diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..cd4ee18
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,16 @@
+# Database
+DATABASE_URL="postgresql://user:password@host:port/database?sslmode=require"
+
+# Redis (existing)
+REDIS_URL="your-redis-url"
+
+# Last.fm API (existing)
+LASTFM_API_KEY="your-lastfm-api-key"
+
+# Cloudinary
+CLOUDINARY_CLOUD_NAME="your-cloud-name"
+CLOUDINARY_API_KEY="your-api-key"
+CLOUDINARY_API_SECRET="your-api-secret"
+
+# Admin Authentication (for later)
+ADMIN_PASSWORD="your-admin-password"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 79518f7..a3a7298 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,11 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+/../generated/prisma
+
+# Local uploads (for development)
+/static/local-uploads
+
+*storybook.log
+storybook-static
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 0000000..c0aa788
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,39 @@
+import type { StorybookConfig } from '@storybook/sveltekit'
+import { mergeConfig } from 'vite'
+import path from 'path'
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: ['@storybook/addon-svelte-csf', '@storybook/addon-docs', '@storybook/addon-a11y'],
+	framework: {
+		name: '@storybook/sveltekit',
+		options: {}
+	},
+	viteFinal: async (config) => {
+		return mergeConfig(config, {
+			resolve: {
+				alias: {
+					$lib: path.resolve('./src/lib'),
+					$components: path.resolve('./src/lib/components'),
+					$icons: path.resolve('./src/assets/icons'),
+					$illos: path.resolve('./src/assets/illos'),
+					$styles: path.resolve('./src/assets/styles')
+				}
+			},
+			css: {
+				preprocessorOptions: {
+					scss: {
+						additionalData: `
+              @import './src/assets/styles/variables.scss';
+              @import './src/assets/styles/fonts.scss';
+              @import './src/assets/styles/themes.scss';
+            `,
+						api: 'modern-compiler'
+					}
+				}
+			}
+		})
+	}
+}
+
+export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 0000000..f442071
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,42 @@
+import type { Preview } from '@storybook/sveltekit'
+import '../src/assets/styles/reset.css'
+import '../src/assets/styles/globals.scss'
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/
+			}
+		},
+		backgrounds: {
+			default: 'light',
+			values: [
+				{ name: 'light', value: '#ffffff' },
+				{ name: 'dark', value: '#333333' },
+				{ name: 'admin', value: '#f5f5f5' },
+				{ name: 'grey-95', value: '#f8f9fa' }
+			]
+		},
+		viewport: {
+			viewports: {
+				mobile: {
+					name: 'Mobile',
+					styles: { width: '375px', height: '667px' }
+				},
+				tablet: {
+					name: 'Tablet',
+					styles: { width: '768px', height: '1024px' }
+				},
+				desktop: {
+					name: 'Desktop',
+					styles: { width: '1440px', height: '900px' }
+				}
+			}
+		}
+	}
+}
+
+export default preview
diff --git a/CLAUDE.md b/CLAUDE.md
index e3ccc8e..1fcaf98 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -34,6 +34,10 @@ npm run preview
 
 This is a SvelteKit personal portfolio site for @jedmund that integrates with multiple external APIs to display real-time data about music listening habits and gaming activity.
 
+We are using Svelte 5 in Runes mode, so make sure to only write solutions that will work with that newer syntax.
+
+Make sure to use the CSS variables that are defined across the various files in `src/assets/styles`. When making new colors or defining new variables, check that it doesn't exist first, then define it.
+
 ### Key Architecture Components
 
 **API Integration Layer** (`src/routes/api/`)
diff --git a/LOCAL_SETUP.md b/LOCAL_SETUP.md
new file mode 100644
index 0000000..1b80525
--- /dev/null
+++ b/LOCAL_SETUP.md
@@ -0,0 +1,179 @@
+# Local Development Setup Guide
+
+This guide will help you set up a local development environment for the CMS without needing external services.
+
+## Prerequisites
+
+- Node.js 18+ installed
+- Homebrew (for macOS)
+
+## Step 1: Install PostgreSQL
+
+### On macOS:
+
+```bash
+# Install PostgreSQL
+brew install postgresql@15
+
+# Start PostgreSQL service
+brew services start postgresql@15
+
+# Verify installation
+psql --version
+```
+
+### On Linux:
+
+```bash
+# Ubuntu/Debian
+sudo apt update
+sudo apt install postgresql postgresql-contrib
+
+# Start PostgreSQL
+sudo systemctl start postgresql
+```
+
+## Step 2: Set Up Local Environment
+
+1. **Run the setup script:**
+
+   ```bash
+   npm run setup:local
+   ```
+
+   This script will:
+
+   - Check PostgreSQL installation
+   - Create a `.env` file from `.env.local.example`
+   - Create the database
+   - Run migrations
+   - Generate Prisma client
+
+2. **If the script fails, manually create the database:**
+
+   ```bash
+   # Create database
+   createdb jedmund_cms
+
+   # Or using psql
+   psql -c "CREATE DATABASE jedmund_cms;"
+   ```
+
+3. **Update your `.env` file:**
+
+   ```env
+   # Use your local PostgreSQL settings
+   DATABASE_URL="postgresql://postgres:postgres@localhost:5432/jedmund_cms?schema=public"
+
+   # For local dev, leave Cloudinary empty (will use mock data)
+   CLOUDINARY_CLOUD_NAME=""
+   CLOUDINARY_API_KEY=""
+   CLOUDINARY_API_SECRET=""
+
+   # Simple admin password for local testing
+   ADMIN_PASSWORD="localdev"
+   ```
+
+## Step 3: Run Database Migrations
+
+```bash
+# Generate Prisma client
+npx prisma generate
+
+# Run migrations
+npm run db:migrate
+
+# Seed with test data
+npm run db:seed
+```
+
+## Step 4: Start Development Server
+
+```bash
+npm run dev
+```
+
+## Step 5: Test the Setup
+
+1. **Check API health:**
+   Visit http://localhost:5173/api/health
+
+   You should see:
+
+   ```json
+   {
+   	"status": "ok",
+   	"services": {
+   		"database": "connected",
+   		"cloudinary": "not configured"
+   	}
+   }
+   ```
+
+2. **View database:**
+   ```bash
+   npm run db:studio
+   ```
+   This opens Prisma Studio at http://localhost:5555
+
+## Testing API Endpoints
+
+Since we need authentication, use these curl commands:
+
+```bash
+# Test health (no auth needed)
+curl http://localhost:5173/api/health
+
+# Test media list (with auth)
+curl -H "Authorization: Basic $(echo -n 'admin:localdev' | base64)" \
+  http://localhost:5173/api/media
+
+# Test project creation
+curl -X POST \
+  -H "Authorization: Basic $(echo -n 'admin:localdev' | base64)" \
+  -H "Content-Type: application/json" \
+  -d '{"title":"Test Project","year":2024,"slug":"test-project"}' \
+  http://localhost:5173/api/projects
+```
+
+## Local Development Notes
+
+1. **Media Uploads:** Without Cloudinary configured, uploaded images will return mock URLs. The files won't actually be stored anywhere, but the database records will be created for testing.
+
+2. **Authentication:** Use Basic Auth with username `admin` and password `localdev` (or whatever you set in ADMIN_PASSWORD).
+
+3. **Database:** All data is stored locally in PostgreSQL. You can reset it anytime with:
+
+   ```bash
+   npx prisma migrate reset
+   ```
+
+4. **Debugging:** Check the console for detailed logs. The logger will show all API requests and database queries in development mode.
+
+## Troubleshooting
+
+### PostgreSQL Connection Issues
+
+- Make sure PostgreSQL is running: `brew services list`
+- Check if the database exists: `psql -l`
+- Try connecting manually: `psql -d jedmund_cms`
+
+### Prisma Issues
+
+- Clear Prisma generated files: `rm -rf node_modules/.prisma`
+- Regenerate: `npx prisma generate`
+
+### Port Already in Use
+
+- Kill the process: `lsof -ti:5173 | xargs kill -9`
+- Or use a different port: `npm run dev -- --port 5174`
+
+## Next Steps
+
+Once local development is working, you can:
+
+1. Start building the admin UI (Phase 3)
+2. Test CRUD operations with the API
+3. Develop without needing external services
+
+When ready for production, see the deployment guide for setting up Railway and Cloudinary.
diff --git a/PRD-cms-functionality.md b/PRD-cms-functionality.md
new file mode 100644
index 0000000..489739f
--- /dev/null
+++ b/PRD-cms-functionality.md
@@ -0,0 +1,841 @@
+# Product Requirements Document: Multi-Content CMS
+
+## Overview
+
+Add a comprehensive CMS to the personal portfolio site to manage multiple content types: Projects (Work section), Posts (Universe section), and Photos/Albums (Photos and Universe sections).
+
+## Goals
+
+- Enable dynamic content creation across all site sections
+- Provide rich text editing for long-form content (Edra)
+- Support different content types with appropriate editing interfaces
+- Store all content in PostgreSQL database (Railway-compatible)
+- Display content instantly after publishing
+- Maintain the existing design aesthetic
+
+## Technical Constraints
+
+- **Hosting**: Railway (no direct file system access)
+- **Database**: PostgreSQL add-on available
+- **Framework**: SvelteKit
+- **Editor**: Edra for rich text (https://edra.tsuzat.com/docs), custom forms for structured data
+
+## Core Features
+
+### 1. Database Schema
+
+```sql
+-- Projects table (for /work)
+CREATE TABLE projects (
+  id SERIAL PRIMARY KEY,
+  slug VARCHAR(255) UNIQUE NOT NULL,
+  title VARCHAR(255) NOT NULL,
+  subtitle VARCHAR(255),
+  description TEXT,
+  year INTEGER NOT NULL,
+  client VARCHAR(255),
+  role VARCHAR(255),
+  technologies JSONB, -- Array of tech stack
+  featured_image VARCHAR(500),
+  gallery JSONB, -- Array of image URLs
+  external_url VARCHAR(500),
+  case_study_content JSONB, -- Edra JSON format
+  display_order INTEGER DEFAULT 0,
+  status VARCHAR(50) DEFAULT 'draft',
+  published_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Posts table (for /universe) - Simplified to 2 types
+CREATE TABLE posts (
+  id SERIAL PRIMARY KEY,
+  slug VARCHAR(255) UNIQUE NOT NULL,
+  post_type VARCHAR(50) NOT NULL, -- 'post' or 'essay'
+  title VARCHAR(255), -- Required for essays, optional for posts
+  content JSONB, -- Edra JSON content
+  excerpt TEXT, -- For essays
+
+  featured_image VARCHAR(500),
+  attachments JSONB, -- Array of media IDs for any attachments
+  tags JSONB, -- Array of tags
+  status VARCHAR(50) DEFAULT 'draft',
+  published_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Albums table - Enhanced with photography curation
+CREATE TABLE albums (
+  id SERIAL PRIMARY KEY,
+  slug VARCHAR(255) UNIQUE NOT NULL,
+  title VARCHAR(255) NOT NULL,
+  description TEXT,
+  date DATE,
+  location VARCHAR(255),
+  cover_photo_id INTEGER REFERENCES photos(id),
+  is_photography BOOLEAN DEFAULT false, -- Show in photos experience
+  status VARCHAR(50) DEFAULT 'draft',
+  show_in_universe BOOLEAN DEFAULT false,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Photos table
+CREATE TABLE photos (
+  id SERIAL PRIMARY KEY,
+  album_id INTEGER REFERENCES albums(id) ON DELETE CASCADE,
+  filename VARCHAR(255) NOT NULL,
+  url VARCHAR(500) NOT NULL,
+  thumbnail_url VARCHAR(500),
+  width INTEGER,
+  height INTEGER,
+  exif_data JSONB,
+  caption TEXT,
+  display_order INTEGER DEFAULT 0,
+
+  -- Individual publishing support
+  slug VARCHAR(255) UNIQUE, -- Only if published individually
+  title VARCHAR(255), -- Optional title for individual photos
+  description TEXT, -- Longer description when published solo
+  status VARCHAR(50) DEFAULT 'draft',
+  published_at TIMESTAMP,
+  show_in_photos BOOLEAN DEFAULT true, -- Show in photos page when published solo
+
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Media table (general uploads) - Enhanced with photography curation
+CREATE TABLE media (
+  id SERIAL PRIMARY KEY,
+  filename VARCHAR(255) NOT NULL,
+  original_name VARCHAR(255), -- Original filename from user
+  mime_type VARCHAR(100) NOT NULL,
+  size INTEGER NOT NULL,
+  url TEXT NOT NULL,
+  thumbnail_url TEXT,
+  width INTEGER,
+  height INTEGER,
+  alt_text TEXT, -- Alt text for accessibility
+  description TEXT, -- Optional description
+  is_photography BOOLEAN DEFAULT false, -- Star for photos experience
+  used_in JSONB DEFAULT '[]', -- Legacy tracking field
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Media usage tracking table
+CREATE TABLE media_usage (
+  id SERIAL PRIMARY KEY,
+  media_id INTEGER REFERENCES media(id) ON DELETE CASCADE,
+  content_type VARCHAR(50) NOT NULL, -- 'project', 'post', 'album'
+  content_id INTEGER NOT NULL,
+  field_name VARCHAR(100) NOT NULL, -- 'featuredImage', 'logoUrl', 'gallery', 'content', 'attachments'
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(media_id, content_type, content_id, field_name)
+);
+```
+
+### 2. Image Handling Strategy
+
+#### For Posts (Edra Integration)
+
+- **Storage**: Images embedded in posts are stored in the `media` table
+- **Edra Custom Block**: Create custom image block that:
+  - Uploads to `/api/media/upload` on drop/paste
+  - Returns media ID and URL
+  - Stores reference as `{ type: "image", mediaId: 123, url: "...", alt: "..." }`
+- **Advantages**:
+  - Images flow naturally with content
+  - Can add captions, alt text inline
+  - Supports drag-and-drop repositioning
+  - No orphaned images (tracked by mediaId)
+
+#### For Projects
+
+- **Featured Image**: Single image reference stored in `featured_image` field
+- **Gallery Images**: Array of media IDs stored in `gallery` JSONB field
+- **Case Study Content**: Uses same Edra approach as Posts
+- **Storage Pattern**:
+  ```json
+  {
+  	"featured_image": "https://cdn.../image1.jpg",
+  	"gallery": [
+  		{ "mediaId": 123, "url": "...", "caption": "..." },
+  		{ "mediaId": 124, "url": "...", "caption": "..." }
+  	]
+  }
+  ```
+
+#### Media Usage Tracking System
+
+The system now uses a dedicated `media_usage` table for robust tracking:
+
+```sql
+-- MediaUsage tracks where each media file is used
+-- Replaces the simple used_in JSONB field with proper relational tracking
+-- Enables complex queries like "show all projects using this media"
+-- Supports bulk operations and reference cleanup
+```
+
+**Benefits:**
+- Accurate usage tracking across all content types
+- Efficient queries for usage information
+- Safe bulk deletion with automatic reference cleanup
+- Detailed tracking by field (featuredImage, gallery, content, etc.)
+
+### 3. Content Type Editors
+
+- **Projects**: Form-based editor with:
+  - Metadata fields (title, year, client, role)
+  - Technology tag selector
+  - Featured image picker (opens media library)
+  - Gallery manager (grid view with reordering)
+  - Optional Edra editor for case studies
+- **Posts**: Full Edra editor with:
+  - Custom image block implementation
+  - Drag-and-drop image upload
+  - Media library integration
+  - Image optimization on upload
+  - Auto-save including image references
+- **Photos/Albums**: Media-focused interface with:
+  - Bulk photo upload
+  - Drag-and-drop ordering
+  - EXIF data extraction
+  - Album metadata editing
+
+### 4. Edra Custom Image Block
+
+```typescript
+// Custom image block schema for Edra
+const ImageBlock = {
+  type: "image",
+  content: {
+    mediaId: number,
+    url: string,
+    thumbnailUrl?: string,
+    alt?: string,
+    caption?: string,
+    width?: number,
+    height?: number,
+    alignment?: "left" | "center" | "right" | "full"
+  }
+}
+
+// Example Edra content with images
+{
+  "blocks": [
+    { "type": "heading", "content": "Project Overview" },
+    { "type": "paragraph", "content": "This project..." },
+    {
+      "type": "image",
+      "content": {
+        "mediaId": 123,
+        "url": "https://cdn.../full.jpg",
+        "thumbnailUrl": "https://cdn.../thumb.jpg",
+        "alt": "Project screenshot",
+        "caption": "The main dashboard view",
+        "alignment": "full"
+      }
+    },
+    { "type": "paragraph", "content": "As shown above..." }
+  ]
+}
+```
+
+### 5. Media Library System
+
+#### Media Library Component
+
+- **Modal Interface**: Opens from Edra toolbar, form fields, or Browse Library buttons
+- **Features**:
+  - Grid and list view modes for uploaded media
+  - Search by filename and filter by type (image/video/audio/pdf)
+  - Usage information showing where each media is used
+  - Alt text editing and accessibility features
+  - Upload new files directly from modal
+  - Single and multi-select functionality
+- **Returns**: Media object with ID and URLs
+
+#### Multiselect & Bulk Operations
+
+- **Selection Interface**: Checkbox-based selection in both grid and list views
+- **Bulk Actions**:
+  - Select All / Clear Selection controls
+  - Bulk delete with confirmation
+  - Progress indicators and loading states
+- **Safe Deletion**: Automatic reference cleanup across all content types
+- **Reference Tracking**: Shows exactly where each media file is used before deletion
+
+### 6. Image Processing Pipeline
+
+1. **Upload**: User drops/selects image
+2. **Processing**:
+   - Generate unique filename
+   - Create multiple sizes:
+     - Thumbnail (300px)
+     - Medium (800px)
+     - Large (1600px)
+     - Original
+   - Extract metadata (dimensions, EXIF)
+3. **Storage**: Upload to CDN
+4. **Database**: Create media record with all URLs
+5. **Association**: Update `used_in` when embedded
+
+### 7. API Endpoints
+
+```typescript
+// Projects
+GET /api/projects
+POST /api/projects
+GET /api/projects/[slug]
+PUT /api/projects/[id]
+DELETE /api/projects/[id]
+
+// Posts
+GET /api/posts
+POST /api/posts
+GET /api/posts/[slug]
+PUT /api/posts/[id]
+DELETE /api/posts/[id]
+
+// Albums & Photos
+GET /api/albums
+POST /api/albums
+GET /api/albums/[slug]
+PUT /api/albums/[id]
+DELETE /api/albums/[id]
+POST /api/albums/[id]/photos
+DELETE /api/photos/[id]
+PUT /api/photos/[id]/order
+
+// Media Management
+POST /api/media/upload           // Single file upload
+POST /api/media/bulk-upload      // Multiple file upload
+GET /api/media                   // Browse with filters, pagination
+GET /api/media/[id]              // Get single media item
+PUT /api/media/[id]              // Update media (alt text, description)
+DELETE /api/media/[id]           // Delete single media item
+DELETE /api/media/bulk-delete    // Delete multiple media items
+GET /api/media/[id]/usage        // Check where media is used
+POST /api/media/backfill-usage   // Backfill usage tracking for existing content
+```
+
+### 8. Media Management & Cleanup
+
+#### Advanced Usage Tracking
+
+- **MediaUsage Table**: Dedicated table for precise tracking of media usage
+- **Automatic Tracking**: All content saves automatically update usage references
+- **Field-Level Tracking**: Tracks specific fields (featuredImage, gallery, content, attachments)
+- **Content Type Support**: Projects, Posts, Albums with full reference tracking
+- **Real-time Usage Display**: Shows exactly where each media file is used
+
+#### Safe Deletion System
+
+- **Usage Validation**: Prevents deletion if media is in use (unless forced)
+- **Reference Cleanup**: Automatically removes deleted media from all content
+- **Bulk Operations**: Multi-select deletion with comprehensive reference cleanup
+- **Rich Text Cleanup**: Removes deleted media from Edra editor content (images, galleries)
+- **Atomic Operations**: All-or-nothing deletion ensures data consistency
+
+#### Edra Integration Details
+
+```javascript
+// Custom upload handler for BlockNote
+const handleImageUpload = async (file) => {
+	const formData = new FormData()
+	formData.append('file', file)
+	formData.append('context', 'post') // or 'project'
+
+	const response = await fetch('/api/media/upload', {
+		method: 'POST',
+		body: formData
+	})
+
+	const media = await response.json()
+
+	// Return format expected by Edra
+	return {
+		mediaId: media.id,
+		url: media.url,
+		thumbnailUrl: media.thumbnail_url,
+		width: media.width,
+		height: media.height
+	}
+}
+```
+
+### 9. Admin Interface
+
+- **Route**: `/admin` (completely separate from public routes)
+- **Dashboard**: Overview of all content types with quick stats
+- **Content Lists**:
+  - Projects with preview thumbnails and status indicators
+  - Posts with publish status and type badges
+  - Albums with photo counts and metadata
+- **Content Editors**: Type-specific editing interfaces with rich text support
+- **Media Library**: Comprehensive media management with:
+  - Grid and list view modes
+  - Advanced search and filtering
+  - Usage tracking and reference display
+  - Alt text editing and accessibility features
+  - Bulk operations with multiselect interface
+  - Safe deletion with reference cleanup
+
+### 10. Public Display Integration
+
+- **Work page**: Dynamic project grid from database
+- **Universe page**:
+  - Mixed feed of posts and albums (marked with `show_in_universe`)
+  - Chronological ordering
+  - Different card styles for posts vs photo albums
+- **Photos page**: Album grid with masonry layout
+- **Individual pages**: `/work/[slug]`, `/universe/[slug]`, `/photos/[slug]`
+
+## Implementation Phases
+
+### Phase 1: Foundation (Week 1)
+
+- Set up PostgreSQL database with full schema
+- Create database connection utilities
+- Implement media upload infrastructure
+- Build admin route structure and navigation
+
+### Phase 2: Content Types (Week 2-3)
+
+- **Posts**: Edra integration, CRUD APIs
+- **Projects**: Form builder, gallery management
+- **Albums/Photos**: Bulk upload, EXIF extraction
+- Create content type list views in admin
+
+### Phase 3: Public Display (Week 4)
+
+- Replace static project data with dynamic
+- Build Universe mixed feed (posts + albums)
+- Update Photos page with dynamic albums
+- Implement individual content pages
+
+### Phase 4: Polish & Optimization (Week 5)
+
+- Image optimization and CDN caching
+- Admin UI improvements
+- Search and filtering
+- Performance optimization
+
+## Technical Decisions
+
+### Database Choice: PostgreSQL
+
+- Native JSON support for Edra content
+- Railway provides managed PostgreSQL
+- Familiar, battle-tested solution
+
+### Media Storage Options
+
+1. **Cloudinary** (Recommended)
+
+   - Free tier sufficient for personal use
+   - Automatic image optimization
+   - Easy API integration
+
+2. **AWS S3**
+   - More control but requires AWS account
+   - Additional complexity for signed URLs
+
+### Image Integration Summary
+
+- **Posts**: Use Edra's custom image blocks with inline placement
+- **Projects**:
+  - Featured image: Single media reference
+  - Gallery: Array of media IDs with ordering
+  - Case studies: Edra blocks (same as posts)
+- **Albums**: Direct photos table relationship
+- **Storage**: All images go through media table for consistent handling
+- **Association**: Track usage with `used_in` JSONB field to prevent orphans
+
+### Authentication (Future)
+
+- Initially: No auth (rely on obscure admin URL)
+- Future: Add simple password protection or OAuth
+
+## Development Checklist
+
+### Infrastructure
+
+- [ ] Set up PostgreSQL on Railway
+- [ ] Create database schema and migrations
+- [ ] Set up Cloudinary/S3 for media storage
+- [ ] Configure environment variables
+
+### Dependencies
+
+- [x] `edra` (Edra editor) - Integrated and configured
+- [x] `@prisma/client` - Set up with complete schema
+- [x] `cloudinary` - SDK integrated for image processing and storage
+- [x] Form validation with built-in validation
+- [ ] `exifr` for EXIF data extraction (needed for photos system)
+
+### Admin Interface
+
+- [x] Admin layout and navigation
+- [x] Content type switcher (Dashboard, Projects, Universe, Media)
+- [x] List views for projects and posts
+- [x] Complete form system for Projects (metadata, branding, styling)
+- [x] Edra wrapper for Posts with all post types
+- [x] Comprehensive admin component library
+- [ ] Photo uploader with drag-and-drop (for albums system)
+- [ ] Media library browser modal
+
+### APIs
+
+- [x] CRUD endpoints for projects and posts
+- [x] Media upload with progress
+- [x] Bulk upload operations for media
+- [x] Media usage tracking endpoints
+- [ ] Albums CRUD endpoints (schema ready, UI needed)
+- [ ] Bulk operations (delete, publish) for content
+- [ ] Search and filtering endpoints
+
+### Public Display
+
+- [ ] Dynamic Work page
+- [ ] Mixed Universe feed
+- [ ] Photos masonry grid
+- [ ] Individual content pages
+- [ ] SEO meta tags
+
+## Design Decisions
+
+Based on requirements discussion:
+
+1. **Albums**: No featured flag needed
+2. **Version History**: Nice-to-have feature for future implementation
+3. **Photo Publishing**: Individual photos can be published separately from albums
+4. **Project Templates**: Defer case study layout templates for later phase
+5. **Scheduled Publishing**: Not needed initially
+6. **RSS Feeds**: Required for all content types (projects, posts, photos)
+7. **Post Types**: Simplified to two main types:
+   - **Post**: Simple content with optional attachments (replaces microblog, link, photo posts)
+   - **Essay**: Full editor with title/metadata + optional attachments (replaces blog posts)
+8. **Albums & Photo Curation**: Albums serve dual purposes:
+   - **Regular Albums**: Collections for case studies, UI galleries, design process
+   - **Photography Albums**: Curated collections for photo-centric experience
+   - Both album and media levels have `isPhotography` flags for flexible curation
+9. **Photo Curation Strategy**: Media items can be "starred for photos" regardless of usage context
+   - Same photo can exist in posts AND photo collections
+   - Editorial control over what constitutes "photography" vs "UI screenshots/sketches"
+   - Photography albums can contain mixed content if editorially appropriate
+
+## Current Status (June 2024)
+
+### Completed
+
+- ✅ Database setup with Prisma and PostgreSQL
+- ✅ Media management system with Cloudinary integration
+- ✅ Admin foundation (layout, navigation, auth, forms, data tables)
+- ✅ Edra rich text editor integration for case studies and posts
+- ✅ Edra image and gallery extensions with MediaLibraryModal integration
+- ✅ Local development mode for media uploads (no Cloudinary usage)
+- ✅ Project CRUD system with metadata fields and enhanced schema
+- ✅ Project list view in admin with enhanced UI
+- ✅ Project forms with branding (logo, colors) and styling
+- ✅ Posts CRUD system with all post types (blog, microblog, link, photo, album)
+- ✅ Posts attachments field for multiple image support
+- ✅ Posts list view and editor in admin
+- ✅ Complete database schema with MediaUsage tracking table
+- ✅ Media API endpoints with upload, bulk upload, and usage tracking
+- ✅ Component library for admin interface (buttons, inputs, modals, etc.)
+- ✅ MediaLibraryModal for browsing and selecting media
+- ✅ Media details modal with alt text editing and usage information
+- ✅ Multiselect interface for bulk media operations
+- ✅ Safe bulk deletion with automatic reference cleanup
+- ✅ UniverseComposer with photo attachment support
+- ✅ Form integration with Browse Library functionality (ImageUploader, GalleryUploader)
+- ✅ Usage tracking backfill system for existing content
+- ✅ **Project Password Protection & Visibility System** (June 2024)
+  - ✅ Four project states: Published, List-only, Password-protected, Draft
+  - ✅ Password protection with session storage
+  - ✅ Visual indicators in project lists
+  - ✅ Admin interface updates with status dropdown
+  - ✅ API filtering for different visibility states
+- ✅ **RSS Feed Best Practices Implementation** (June 2024)
+  - ✅ Updated all RSS feeds with proper XML namespaces
+  - ✅ Full content support via content:encoded
+  - ✅ Enhanced HTTP headers with ETag and caching
+  - ✅ RFC 822 date formatting throughout
+
+### In Progress
+
+- 🔄 Content Simplification & Photo Curation System
+
+### Next Steps
+
+1. **Content Model Updates** (Immediate Priority)
+
+   - Add `isPhotography` field to Media and Album tables via migration
+   - Simplify post types to just "post" and "essay"
+   - Update post creation UI to use simplified types
+   - Add photography toggle to media details modal
+   - Add photography indicator pills in admin interface
+
+2. **Albums & Photos Management Interface** 
+
+   - Album creation and management UI with photography toggle
+   - Bulk photo upload interface with progress
+   - Photo ordering within albums
+   - Album cover selection
+   - EXIF data extraction and display
+   - Photography album filtering and management
+
+3. **Enhanced Content Features**
+
+   - Featured image picker for projects (using MediaLibraryModal)
+   - Technology tag selector for projects
+   - Auto-save functionality for all editors
+   - Gallery manager for project images with drag-and-drop
+
+4. **Public Display Integration**
+
+   - Dynamic Work page displaying projects from database
+   - Universe page with mixed content feed (posts + essays)
+   - Photos page with photography albums only
+   - Individual content detail pages
+   - SEO meta tags and OpenGraph integration
+
+## Phased Implementation Plan
+
+### Phase 0: Local Development Setup
+
+- [x] Install local PostgreSQL (via Homebrew or Postgres.app)
+- [x] Create local database
+- [x] Set up local environment variables
+- [x] Run Prisma migrations locally
+- [x] Create mock data for testing
+- [x] Test basic CRUD operations locally
+
+### Phase 1: Database & Infrastructure Setup
+
+- [x] Create all database tables with updated schema
+- [x] Set up Prisma ORM with models
+- [x] Create base API route structure
+- [x] Implement database connection utilities
+- [x] Set up error handling and logging
+- [ ] Configure Cloudinary account (deferred to production setup)
+- [ ] Set up PostgreSQL on Railway (deferred to production setup)
+
+### Phase 2: Media Management System
+
+- [x] Create media upload endpoint with Cloudinary integration
+- [x] Implement image processing pipeline (multiple sizes)
+- [x] Build media library API endpoints with pagination and filtering
+- [x] Create advanced MediaUsage tracking system
+- [x] Add bulk upload endpoint for photos
+- [x] Build MediaLibraryModal component with search and selection
+- [x] Implement media details modal with alt text editing
+- [x] Create multiselect interface for bulk operations
+- [x] Add safe bulk deletion with reference cleanup
+- [x] Build usage tracking queries and backfill system
+
+### Phase 3: Admin Foundation
+
+- [x] Create admin layout component
+- [x] Build admin navigation with content type switcher
+- [x] Implement admin authentication (basic for now)
+- [x] Create reusable form components (Button, Input, Modal, etc.)
+- [x] Build data table component for list views
+- [x] Add loading and error states
+- [x] Create comprehensive admin UI component library
+- [x] Build complete media library system with modals and management
+
+### Phase 4: Posts System (All Types)
+
+- [x] Create Edra Svelte wrapper component
+- [x] Implement custom image and gallery blocks for Edra
+- [x] Build post type selector UI
+- [x] Create blog/microblog post editor
+- [x] Build link post form
+- [x] Create posts list view in admin
+- [x] Implement post CRUD APIs with attachments support
+- [x] Post editor page with type-specific fields
+- [x] Complete posts database schema with attachments field
+- [x] Posts administration interface
+- [x] UniverseComposer with photo attachment support
+- [x] Integrate MediaLibraryModal with Edra editor
+- [ ] Build album post selector (needs albums system)
+- [ ] Add auto-save functionality
+
+### Phase 5: Projects System
+
+- [x] Build project form with all metadata fields
+- [x] Enhanced schema with branding fields (logo, colors)
+- [x] Project branding and styling forms with ImageUploader and GalleryUploader
+- [x] Add optional Edra editor for case studies with media support
+- [x] Create project CRUD APIs with usage tracking
+- [x] Build project list view with enhanced UI
+- [x] Integrate Browse Library functionality in project forms
+- [ ] Create technology tag selector
+- [ ] Build gallery manager with drag-and-drop ordering
+- [ ] Add project ordering functionality
+
+### Phase 6: Content Simplification & Photo Curation
+
+- [x] Add `isPhotography` field to Media table (migration)
+- [x] Add `isPhotography` field to Album table (migration) 
+- [x] Simplify post types to "post" and "essay" only
+- [x] Update UniverseComposer to use simplified post types
+- [x] Add photography toggle to MediaDetailsModal
+- [x] Add photography indicator pills throughout admin interface
+- [x] Update media and album APIs to handle photography flags
+
+### Phase 7: Photos & Albums System
+
+- [x] Complete database schema for albums and photos
+- [x] Photo/album CRUD API endpoints (albums endpoint exists)
+- [x] Create album management interface with photography toggle
+- [x] **Album Photo Management** (Core functionality complete)
+  - [x] Add photos to albums interface using MediaLibraryModal
+  - [x] Remove photos from albums with confirmation
+  - [x] Photo grid display with hover overlays
+  - [x] Album-photo relationship API endpoints (POST /api/albums/[id]/photos, DELETE /api/photos/[id])
+  - [ ] Photo reordering within albums (drag-and-drop)
+  - [ ] Album cover photo selection
+- [ ] Build bulk photo uploader with progress
+- [ ] Implement EXIF data extraction for photos
+- [ ] Add individual photo publishing UI
+- [ ] Build photo metadata editor
+- [ ] Add photography album filtering and management
+- [ ] Add "show in universe" toggle for albums
+
+### Phase 8: Public Display Updates
+
+- [x] Replace static Work page with dynamic data
+- [x] Update project detail pages
+- [x] Build Universe mixed feed component  
+- [x] Create different card types for each post type
+- [x] Update Photos page with dynamic albums/photos
+- [x] Implement individual photo pages
+- [x] Add Universe post detail pages
+- [ ] Ensure responsive design throughout
+
+### Phase 9: RSS Feeds & Final Polish
+
+- [ ] Implement RSS feed for projects
+- [ ] Create RSS feed for Universe posts
+- [ ] Add RSS feed for photos/albums
+- [ ] Implement combined RSS feed
+- [ ] Add OpenGraph meta tags
+- [ ] Optimize image loading and caching
+- [ ] Add search functionality to admin
+- [ ] Performance optimization pass
+
+### Phase 10: Production Deployment
+
+- [ ] Set up PostgreSQL on Railway
+- [ ] Run migrations on production database
+- [ ] Configure Cloudinary for production
+- [ ] Set up environment variables on Railway
+- [ ] Test all endpoints in production
+- [ ] Set up database backups
+- [ ] Configure proper authentication
+- [ ] Monitor logs and performance
+
+### Future Enhancements (Post-Launch)
+
+- [ ] Version history system
+- [ ] More robust authentication
+- [ ] Project case study templates
+- [ ] Advanced media organization (folders/tags)
+- [ ] Analytics integration
+- [ ] Backup system
+
+## Albums & Photos System Implementation
+
+### Design Decisions Made (May 2024)
+
+1. **Simplified Post Types**: Reduced from 5 types (blog, microblog, link, photo, album) to 2 types:
+   - **Post**: Simple content with optional attachments (handles previous microblog, link, photo use cases)
+   - **Essay**: Full editor with title/metadata + attachments (handles previous blog use cases)
+
+2. **Photo Curation Strategy**: Dual-level curation system:
+   - **Media Level**: `isPhotography` boolean - stars individual media for photo experience
+   - **Album Level**: `isPhotography` boolean - marks entire albums for photo experience
+   - **Mixed Content**: Photography albums can contain non-photography media (Option A)
+   - **Default Behavior**: Both flags default to `false` to prevent accidental photo inclusion
+
+3. **Visual Indicators**: Pill-shaped tags to indicate photography status in admin interface
+
+4. **Album Flexibility**: Albums serve multiple purposes:
+   - Regular albums for case studies, UI collections, design process
+   - Photography albums for curated photo experience (Japan Trip, Street Photography)
+   - Same album system, different curation flags
+
+### Implementation Task List
+
+#### Phase 1: Database Updates
+- [x] Create migration to add `isPhotography` field to Media table
+- [x] Create migration to add `isPhotography` field to Album table
+- [x] Update Prisma schema with new fields
+- [x] Test migrations on local database
+
+#### Phase 2: API Updates
+- [x] Update Media API endpoints to handle `isPhotography` flag
+- [x] Update Album API endpoints to handle `isPhotography` flag
+- [x] Update media usage tracking to work with new flags
+- [x] Add filtering capabilities for photography content
+
+#### Phase 3: Admin Interface Updates
+- [x] Add photography toggle to MediaDetailsModal
+- [x] Add photography indicator pills for media items (grid and list views)
+- [x] Add photography indicator pills for albums
+- [x] Update media library filtering to include photography status
+- [x] Add bulk photography operations (mark/unmark multiple items)
+
+#### Phase 4: Post Type Simplification
+- [x] Update UniverseComposer to use only "post" and "essay" types
+- [x] Remove complex post type selector UI
+- [x] Update post creation flows
+- [x] Migrate existing posts to simplified types (if needed)
+- [x] Update post display logic to handle simplified types
+
+#### Phase 5: Album Management System
+- [x] Create album creation/editing interface with photography toggle
+- [x] Build album list view with photography indicators
+- [ ] **Critical Missing Feature: Album Photo Management**
+  - [ ] Add photo management section to album edit page
+  - [ ] Implement "Add Photos from Library" functionality using MediaLibraryModal
+  - [ ] Create photo grid display within album editor
+  - [ ] Add remove photo functionality (individual photos)
+  - [ ] Implement drag-and-drop photo reordering within albums
+  - [ ] Add album cover photo selection interface
+  - [ ] Update album API to handle photo associations
+  - [ ] Create album-photo relationship endpoints
+- [ ] Add bulk photo upload to albums with automatic photography detection
+
+#### Phase 6: Photography Experience
+- [ ] Build photography album filtering in admin
+- [ ] Create photography-focused views and workflows
+- [ ] Add batch operations for photo curation
+- [ ] Implement photography album public display
+- [ ] Add photography vs regular album distinction in frontend
+
+### Success Criteria
+
+- Admin can quickly toggle media items between regular and photography status
+- Albums can be easily marked for photography experience
+- Post creation is simplified to 2 clear choices
+- Photography albums display correctly in public photos section
+- Mixed content albums (photography + other) display all content as intended
+- Pill indicators clearly show photography status throughout admin interface
+
+## Success Metrics
+
+- Can create and publish any content type within 2-3 minutes
+- Content appears on site immediately after publishing
+- Bulk photo upload handles 50+ images smoothly
+- No accidental data loss (auto-save works reliably)
+- Page load performance remains fast (<2s)
+- Admin interface works well on tablet/desktop
+- Media uploads show progress and handle failures gracefully
+- RSS feeds update automatically with new content
diff --git a/PRD-enhanced-tag-system.md b/PRD-enhanced-tag-system.md
new file mode 100644
index 0000000..fe7cb95
--- /dev/null
+++ b/PRD-enhanced-tag-system.md
@@ -0,0 +1,610 @@
+# Product Requirements Document: Enhanced Tag System
+
+## Overview
+
+Upgrade the current JSON-based tag system to a relational database model with advanced tagging features including tag filtering, related posts, tag management, and an improved tag input UI with typeahead functionality.
+
+## Goals
+
+- Enable efficient querying and filtering of posts by tags
+- Provide tag management capabilities for content curation
+- Show related posts based on shared tags
+- Implement intuitive tag input with typeahead and keyboard shortcuts
+- Build analytics and insights around tag usage
+- Maintain backward compatibility during migration
+
+## Technical Constraints
+
+- **Framework**: SvelteKit with Svelte 5 runes mode
+- **Database**: PostgreSQL with Prisma ORM
+- **Hosting**: Railway (existing infrastructure)
+- **Design System**: Use existing admin component library
+- **Performance**: Tag operations should be sub-100ms
+
+## Current State vs Target State
+
+### Current Implementation
+- Tags stored as JSON arrays: `tags: ['announcement', 'meta', 'cms']`
+- Simple display-only functionality
+- No querying capabilities
+- Manual tag input with Add button
+
+### Target Implementation
+- Relational many-to-many tag system
+- Full CRUD operations for tags
+- Advanced filtering and search
+- Typeahead tag input with keyboard navigation
+- Tag analytics and management interface
+
+## Database Schema Changes
+
+### New Tables
+
+```sql
+-- Tags table
+CREATE TABLE tags (
+  id SERIAL PRIMARY KEY,
+  name VARCHAR(100) UNIQUE NOT NULL,
+  slug VARCHAR(100) UNIQUE NOT NULL,
+  description TEXT,
+  color VARCHAR(7), -- Hex color for tag styling
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Post-Tag junction table
+CREATE TABLE post_tags (
+  id SERIAL PRIMARY KEY,
+  post_id INTEGER REFERENCES posts(id) ON DELETE CASCADE,
+  tag_id INTEGER REFERENCES tags(id) ON DELETE CASCADE,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE(post_id, tag_id)
+);
+
+-- Tag usage analytics (optional)
+CREATE TABLE tag_analytics (
+  id SERIAL PRIMARY KEY,
+  tag_id INTEGER REFERENCES tags(id) ON DELETE CASCADE,
+  usage_count INTEGER DEFAULT 1,
+  last_used TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### Prisma Schema Updates
+
+```prisma
+model Tag {
+  id          Int       @id @default(autoincrement())
+  name        String    @unique @db.VarChar(100)
+  slug        String    @unique @db.VarChar(100)
+  description String?   @db.Text
+  color       String?   @db.VarChar(7)  // Hex color
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  
+  // Relations
+  posts       PostTag[]
+  
+  @@index([name])
+  @@index([slug])
+}
+
+model PostTag {
+  id        Int      @id @default(autoincrement())
+  postId    Int
+  tagId     Int
+  createdAt DateTime @default(now())
+  
+  // Relations
+  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
+  tag       Tag      @relation(fields: [tagId], references: [id], onDelete: Cascade)
+  
+  @@unique([postId, tagId])
+  @@index([postId])
+  @@index([tagId])
+}
+
+// Update existing Post model
+model Post {
+  // ... existing fields
+  tags      PostTag[]  // Replace: tags Json?
+}
+```
+
+## Core Features
+
+### 1. Tag Management Interface
+
+#### Admin Tag Manager (`/admin/tags`)
+- **Tag List View**
+  - DataTable with tag name, usage count, created date
+  - Search and filter capabilities
+  - Bulk operations (delete, merge, rename)
+  - Color coding and visual indicators
+
+- **Tag Detail/Edit View**
+  - Edit tag name, description, color
+  - View all posts using this tag
+  - Usage analytics and trends
+  - Merge with other tags functionality
+
+#### Tag Analytics Dashboard
+- **Usage Statistics**
+  - Most/least used tags
+  - Tag usage trends over time
+  - Orphaned tags (no posts)
+  - Tag co-occurrence patterns
+
+- **Tag Insights**
+  - Suggested tag consolidations
+  - Similar tags detection
+  - Tag performance metrics
+
+### 2. Enhanced Tag Input Component (`TagInput.svelte`)
+
+#### Features
+- **Typeahead Search**: Real-time search of existing tags
+- **Keyboard Navigation**: Arrow keys to navigate suggestions
+- **Instant Add**: Press Enter to add tag without button click
+- **Visual Feedback**: Highlight matching text in suggestions
+- **Tag Validation**: Prevent duplicates and invalid characters
+- **Quick Actions**: Backspace to remove last tag
+
+#### Component API
+```typescript
+interface TagInputProps {
+  tags: string[] | Tag[]           // Current tags
+  suggestions?: Tag[]              // Available tags for typeahead
+  placeholder?: string             // Input placeholder text
+  maxTags?: number                // Maximum number of tags
+  allowNew?: boolean              // Allow creating new tags
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  onTagAdd?: (tag: Tag) => void
+  onTagRemove?: (tag: Tag) => void
+  onTagCreate?: (name: string) => void
+}
+```
+
+#### Svelte 5 Implementation
+```svelte
+<script lang="ts">
+  let {
+    tags = $bindable([]),
+    suggestions = [],
+    placeholder = "Add tags...",
+    maxTags = 10,
+    allowNew = true,
+    size = 'medium',
+    disabled = false,
+    onTagAdd,
+    onTagRemove,
+    onTagCreate
+  }: TagInputProps = $props()
+
+  let inputValue = $state('')
+  let showSuggestions = $state(false)
+  let selectedIndex = $state(-1)
+  let inputElement: HTMLInputElement
+
+  // Filtered suggestions based on input
+  let filteredSuggestions = $derived(
+    suggestions.filter(tag => 
+      tag.name.toLowerCase().includes(inputValue.toLowerCase()) &&
+      !tags.some(t => t.id === tag.id)
+    )
+  )
+
+  // Handle keyboard navigation
+  function handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'Enter':
+        e.preventDefault()
+        if (selectedIndex >= 0) {
+          addExistingTag(filteredSuggestions[selectedIndex])
+        } else if (inputValue.trim() && allowNew) {
+          createNewTag(inputValue.trim())
+        }
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        selectedIndex = Math.min(selectedIndex + 1, filteredSuggestions.length - 1)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        selectedIndex = Math.max(selectedIndex - 1, -1)
+        break
+      case 'Backspace':
+        if (!inputValue && tags.length > 0) {
+          removeTag(tags[tags.length - 1])
+        }
+        break
+      case 'Escape':
+        showSuggestions = false
+        selectedIndex = -1
+        break
+    }
+  }
+</script>
+```
+
+### 3. Post Filtering by Tags
+
+#### Frontend Components
+- **Tag Filter Bar**: Multi-select tag filtering
+- **Tag Cloud**: Visual tag representation with usage counts
+- **Search Integration**: Combine text search with tag filters
+
+#### API Endpoints
+```typescript
+// GET /api/posts?tags=javascript,react&operation=AND
+// GET /api/posts?tags=design,ux&operation=OR
+interface PostsQueryParams {
+  tags?: string[]               // Tag names or IDs
+  operation?: 'AND' | 'OR'     // How to combine multiple tags
+  page?: number
+  limit?: number
+  status?: 'published' | 'draft'
+}
+
+// GET /api/tags/suggest?q=java
+interface TagSuggestResponse {
+  tags: Array<{
+    id: number
+    name: string
+    slug: string
+    usageCount: number
+  }>
+}
+```
+
+### 4. Related Posts Feature
+
+#### Implementation
+- **Algorithm**: Find posts sharing the most tags
+- **Weighting**: Consider tag importance and recency
+- **Exclusions**: Don't show current post in related list
+- **Limit**: Show 3-6 related posts maximum
+
+#### Component (`RelatedPosts.svelte`)
+```svelte
+<script lang="ts">
+  let { postId, tags, limit = 4 }: {
+    postId: number
+    tags: Tag[]
+    limit?: number
+  } = $props()
+
+  let relatedPosts = $state<Post[]>([])
+
+  $effect(async () => {
+    const tagIds = tags.map(t => t.id)
+    const response = await fetch(`/api/posts/related?postId=${postId}&tagIds=${tagIds.join(',')}&limit=${limit}`)
+    relatedPosts = await response.json()
+  })
+</script>
+```
+
+## API Specification
+
+### Tag Management APIs
+
+```typescript
+// GET /api/tags - List all tags
+interface TagsResponse {
+  tags: Tag[]
+  total: number
+  page: number
+  limit: number
+}
+
+// POST /api/tags - Create new tag
+interface CreateTagRequest {
+  name: string
+  description?: string
+  color?: string
+}
+
+// PUT /api/tags/[id] - Update tag
+interface UpdateTagRequest {
+  name?: string
+  description?: string
+  color?: string
+}
+
+// DELETE /api/tags/[id] - Delete tag
+// Returns: 204 No Content
+
+// POST /api/tags/merge - Merge tags
+interface MergeTagsRequest {
+  sourceTagIds: number[]
+  targetTagId: number
+}
+
+// GET /api/tags/[id]/posts - Get posts for tag
+interface TagPostsResponse {
+  posts: Post[]
+  tag: Tag
+  total: number
+}
+
+// GET /api/tags/analytics - Tag usage analytics
+interface TagAnalyticsResponse {
+  mostUsed: Array<{ tag: Tag; count: number }>
+  leastUsed: Array<{ tag: Tag; count: number }>
+  trending: Array<{ tag: Tag; growth: number }>
+  orphaned: Tag[]
+}
+```
+
+### Enhanced Post APIs
+
+```typescript
+// GET /api/posts/related?postId=123&tagIds=1,2,3&limit=4
+interface RelatedPostsResponse {
+  posts: Array<{
+    id: number
+    title: string
+    slug: string
+    excerpt?: string
+    publishedAt: string
+    tags: Tag[]
+    sharedTagsCount: number  // Number of tags in common
+  }>
+}
+
+// PUT /api/posts/[id]/tags - Update post tags
+interface UpdatePostTagsRequest {
+  tagIds: number[]
+}
+```
+
+## User Interface Components
+
+### 1. TagInput Component Features
+
+#### Visual States
+- **Default**: Clean input with placeholder
+- **Focused**: Show suggestions dropdown
+- **Typing**: Filter and highlight matches
+- **Selected**: Navigate with keyboard
+- **Adding**: Smooth animation for new tags
+- **Full**: Disable input when max tags reached
+
+#### Accessibility
+- **ARIA Labels**: Proper labeling for screen readers
+- **Keyboard Navigation**: Full keyboard accessibility
+- **Focus Management**: Logical tab order
+- **Announcements**: Screen reader feedback for actions
+
+### 2. Tag Display Components
+
+#### TagPill Component
+```svelte
+<script lang="ts">
+  let {
+    tag,
+    size = 'medium',
+    removable = false,
+    clickable = false,
+    showCount = false,
+    onRemove,
+    onClick
+  }: TagPillProps = $props()
+</script>
+
+<span 
+  class="tag-pill tag-pill-{size}"
+  style="--tag-color: {tag.color}"
+  class:clickable
+  class:removable
+  onclick={onClick}
+>
+  {tag.name}
+  {#if showCount}
+    <span class="tag-count">({tag.usageCount})</span>
+  {/if}
+  {#if removable}
+    <button onclick={onRemove} class="tag-remove">×</button>
+  {/if}
+</span>
+```
+
+#### TagCloud Component
+```svelte
+<script lang="ts">
+  let {
+    tags,
+    maxTags = 50,
+    minFontSize = 12,
+    maxFontSize = 24,
+    onClick
+  }: TagCloudProps = $props()
+
+  // Calculate font sizes based on usage
+  let tagSizes = $derived(calculateTagSizes(tags, minFontSize, maxFontSize))
+</script>
+```
+
+### 3. Admin Interface Updates
+
+#### Posts List with Tag Filtering
+- **Filter Bar**: Multi-select tag filter above posts list
+- **Tag Pills**: Show tags on each post item
+- **Quick Filter**: Click tag to filter by that tag
+- **Clear Filters**: Easy way to reset all filters
+
+#### Posts Edit Form Integration
+- **Replace Current**: Swap existing tag input with new TagInput
+- **Preserve UX**: Maintain current metadata popover
+- **Tag Management**: Quick access to create/edit tags
+
+## Migration Strategy
+
+### Phase 1: Database Migration (Week 1)
+1. **Create Migration Script**
+   - Create new tables (tags, post_tags)
+   - Migrate existing JSON tags to relational format
+   - Create indexes for performance
+
+2. **Data Migration**
+   - Extract unique tags from existing posts
+   - Create tag records with auto-generated slugs
+   - Create post_tag relationships
+   - Validate data integrity
+
+3. **Backward Compatibility**
+   - Keep original tags JSON field temporarily
+   - Dual-write to both systems during transition
+
+### Phase 2: API Development (Week 1-2)
+1. **Tag Management APIs**
+   - CRUD operations for tags
+   - Tag suggestions and search
+   - Analytics endpoints
+
+2. **Enhanced Post APIs**
+   - Update post endpoints for relational tags
+   - Related posts algorithm
+   - Tag filtering capabilities
+
+3. **Testing & Validation**
+   - Unit tests for all endpoints
+   - Performance testing for queries
+   - Data consistency checks
+
+### Phase 3: Frontend Components (Week 2-3)
+1. **Core Components**
+   - TagInput with typeahead
+   - TagPill and TagCloud
+   - Tag management interface
+
+2. **Integration**
+   - Update MetadataPopover
+   - Add tag filtering to posts list
+   - Implement related posts component
+
+3. **Admin Interface**
+   - Tag management dashboard
+   - Analytics views
+   - Bulk operations interface
+
+### Phase 4: Features & Polish (Week 3-4)
+1. **Advanced Features**
+   - Tag merging functionality
+   - Usage analytics
+   - Tag suggestions based on content
+
+2. **Performance Optimization**
+   - Query optimization
+   - Caching strategies
+   - Load testing
+
+3. **Cleanup**
+   - Remove JSON tags field
+   - Documentation updates
+   - Final testing
+
+## Success Metrics
+
+### Performance
+- Tag search responses under 50ms
+- Post filtering responses under 100ms
+- Page load times maintained or improved
+
+### Usability
+- Reduced clicks to add tags (eliminate Add button)
+- Faster tag input with typeahead
+- Improved content discovery through related posts
+
+### Content Management
+- Ability to merge duplicate tags
+- Insights into tag usage patterns
+- Better content organization capabilities
+
+### Analytics
+- Track tag usage growth over time
+- Identify content gaps through tag analysis
+- Measure impact on content engagement
+
+## Technical Considerations
+
+### Performance
+- **Database Indexes**: Proper indexing on tag names and relationships
+- **Query Optimization**: Efficient joins for tag filtering
+- **Caching**: Cache popular tag lists and related posts
+- **Pagination**: Handle large tag lists efficiently
+
+### Data Integrity
+- **Constraints**: Prevent duplicate tag names
+- **Cascading Deletes**: Properly handle tag/post deletions
+- **Validation**: Ensure tag names follow naming conventions
+- **Backup Strategy**: Safe migration with rollback capability
+
+### User Experience
+- **Progressive Enhancement**: Graceful degradation if JS fails
+- **Loading States**: Smooth loading indicators
+- **Error Handling**: Clear error messages for users
+- **Responsive Design**: Works well on all device sizes
+
+## Future Enhancements
+
+### Advanced Features (Post-MVP)
+- **Hierarchical Tags**: Parent/child tag relationships
+- **Tag Synonyms**: Alternative names for the same concept
+- **Auto-tagging**: ML-based tag suggestions from content
+- **Tag Templates**: Predefined tag sets for different content types
+
+### Integrations
+- **External APIs**: Import tags from external sources
+- **Search Integration**: Enhanced search with tag faceting
+- **Analytics**: Deep tag performance analytics
+- **Content Recommendations**: AI-powered related content
+
+## Risk Assessment
+
+### High Risk
+- **Data Migration**: Complex migration of existing tag data
+- **Performance Impact**: New queries might affect page load times
+- **User Adoption**: Users need to learn new tag input interface
+
+### Mitigation Strategies
+- **Staged Rollout**: Deploy to staging first, then gradual production rollout
+- **Performance Monitoring**: Continuous monitoring during migration
+- **User Training**: Clear documentation and smooth UX transitions
+- **Rollback Plan**: Ability to revert to JSON tags if needed
+
+## Success Criteria
+
+### Must Have
+- ✅ All existing tags migrated successfully
+- ✅ Tag input works with keyboard-only navigation
+- ✅ Posts can be filtered by single or multiple tags
+- ✅ Related posts show based on shared tags
+- ✅ Performance remains acceptable (< 100ms for most operations)
+
+### Should Have
+- ✅ Tag management interface for admins
+- ✅ Tag usage analytics and insights
+- ✅ Ability to merge duplicate tags
+- ✅ Tag color coding and visual improvements
+
+### Could Have
+- Tag auto-suggestions based on post content
+- Tag trending and popularity metrics
+- Advanced tag analytics and reporting
+- Integration with external tag sources
+
+## Timeline
+
+**Total Duration**: 4 weeks
+
+- **Week 1**: Database migration and API development
+- **Week 2**: Core frontend components and basic integration
+- **Week 3**: Advanced features and admin interface
+- **Week 4**: Polish, testing, and production deployment
+
+## Conclusion
+
+This enhanced tag system will significantly improve content organization, discoverability, and management capabilities while providing a modern, intuitive user interface built with Svelte 5 runes. The migration strategy ensures minimal disruption while delivering substantial improvements in functionality and user experience.
\ No newline at end of file
diff --git a/PRD-media-library.md b/PRD-media-library.md
new file mode 100644
index 0000000..69d9f57
--- /dev/null
+++ b/PRD-media-library.md
@@ -0,0 +1,576 @@
+# Product Requirements Document: Media Library Modal System
+
+## 🎉 **PROJECT STATUS: CORE IMPLEMENTATION COMPLETE!** 
+
+We have successfully implemented a comprehensive Media Library system with both direct upload workflows and library browsing capabilities. **All major components are functional and integrated throughout the admin interface.**
+
+### 🏆 Major Achievements
+- **✅ Complete MediaLibraryModal system** with single/multiple selection
+- **✅ Enhanced upload components** (ImageUploader, GalleryUploader) with MediaLibraryModal integration
+- **✅ Full form integration** across projects, posts, albums, and editor
+- **✅ Alt text support** throughout upload and editing workflows
+- **✅ Edra editor integration** with `/image` and `/gallery` slash commands
+- **✅ Media Library management** with clickable editing and metadata support
+
+## Overview
+
+Implement a comprehensive Media Library modal system that provides a unified interface for browsing, selecting, and managing media across all admin forms. **The primary workflow is direct upload from computer within forms**, with the Media Library serving as a secondary browsing interface and management tool for previously uploaded content.
+
+## 📋 Updated Approach Summary
+
+**🎯 Primary Focus**: Direct upload components that allow users to drag-and-drop or browse files directly within project/post/album forms, with immediate preview and alt text capture.
+
+**🎯 Secondary Feature**: Media Library modal for selecting previously uploaded content when needed.
+
+**🎯 Key Addition**: Alt text storage and editing capabilities for accessibility compliance and SEO.
+
+## Goals
+
+### Primary Goals (Direct Upload Workflow)
+- **Enable direct file upload within forms** where content will be used (projects, posts, albums)
+- **Provide immediate upload and preview** without requiring navigation to separate media management
+- **Store comprehensive metadata** including alt text for accessibility and SEO
+- **Support drag-and-drop and click-to-browse** for intuitive file selection
+
+### Secondary Goals (Media Library Browser)
+- Create a reusable media browser for **selecting previously uploaded content**
+- Provide **media management interface** showing where files are referenced
+- Enable **bulk operations** and **metadata editing** (especially alt text)
+- Support **file organization** and **usage tracking**
+
+### Technical Goals
+- Maintain consistent UX across all media interactions
+- Support different file type filtering based on context
+- Integrate seamlessly with existing admin components
+
+## Current State Analysis
+
+### ✅ What We Have
+- Complete media API (`/api/media`, `/api/media/upload`, `/api/media/bulk-upload`)
+- Media management page with grid/list views and search/filtering
+- Modal base component (`Modal.svelte`)
+- Complete admin UI component library (Button, Input, etc.)
+- Media upload infrastructure with Cloudinary integration
+- Pagination and search functionality
+- **✅ Database schema with alt text support** (altText field in Media table)
+- **✅ MediaLibraryModal component** with single/multiple selection modes
+- **✅ ImageUploader and GalleryUploader components** with MediaLibraryModal integration
+- **✅ Enhanced admin form components** with Browse Library functionality
+- **✅ Media details editing** with alt text support in Media Library page
+- **✅ Edra editor integration** with image and gallery support via slash commands
+
+### 🎯 What We Need
+
+#### High Priority (Remaining Tasks)
+- **Enhanced upload features** with drag & drop zones in all upload components
+- **Bulk alt text editing** in Media Library for existing content
+- **Usage tracking display** showing where media is referenced
+- **Performance optimizations** for large media libraries
+
+#### Medium Priority (Polish & Advanced Features)
+- **Image optimization options** during upload
+- **Advanced search capabilities** (by alt text, usage, etc.)
+- **Bulk operations** (delete multiple, bulk metadata editing)
+
+#### Low Priority (Future Enhancements)
+- **AI-powered alt text suggestions**
+- **Duplicate detection** and management
+- **Advanced analytics** and usage reporting
+
+## Workflow Priorities
+
+### 🥇 Primary Workflow: Direct Upload in Forms
+This is the **main workflow** that users will use 90% of the time:
+
+1. **User creates content** (project, post, album)
+2. **User uploads files directly** in the form where they'll be used
+3. **Files are immediately processed** and previewed
+4. **Alt text and metadata** are captured during upload
+5. **Content is saved** with proper media references
+
+**Key Components**:
+- `ImageUploader` - Direct drag-and-drop/click upload with preview
+- `GalleryUploader` - Multiple file upload with immediate gallery preview
+- `MediaMetadataForm` - Alt text and description capture during upload
+
+### 🥈 Secondary Workflow: Browse Existing Media
+This workflow is for **reusing previously uploaded content**:
+
+1. **User needs to select existing media** (rare case)
+2. **User clicks "Browse Library"** (secondary button)
+3. **Media Library Modal opens** showing all uploaded files
+4. **User selects from existing content**
+5. **Media references are updated**
+
+**Key Components**:
+- `MediaLibraryModal` - Browse and select existing media
+- `MediaSelector` - Grid interface for selection
+- `MediaManager` - Edit alt text and view usage
+
+## Technical Requirements
+
+### 1. Enhanced Upload Components (Primary)
+
+#### ImageUploader Component
+**Purpose**: Direct image upload with immediate preview and metadata capture
+
+```typescript
+interface ImageUploaderProps {
+  label: string
+  value?: Media | null
+  onUpload: (media: Media) => void
+  aspectRatio?: string
+  required?: boolean
+  error?: string
+  allowAltText?: boolean  // Enable alt text input
+  maxFileSize?: number    // MB limit
+}
+```
+
+**Features**:
+- Drag-and-drop upload zone with visual feedback
+- Click to browse files from computer
+- Immediate image preview with proper aspect ratio
+- Alt text input field (when enabled)
+- Upload progress indicator
+- File validation with helpful error messages
+- Replace/remove functionality
+
+#### GalleryUploader Component
+**Purpose**: Multiple file upload with gallery preview and reordering
+
+```typescript
+interface GalleryUploaderProps {
+  label: string
+  value?: Media[]
+  onUpload: (media: Media[]) => void
+  onReorder?: (media: Media[]) => void
+  maxItems?: number
+  allowAltText?: boolean
+  required?: boolean
+  error?: string
+}
+```
+
+**Features**:
+- Multiple file drag-and-drop
+- Immediate gallery preview grid
+- Individual alt text inputs for each image
+- Drag-and-drop reordering
+- Individual remove buttons
+- Bulk upload progress
+
+### 2. MediaLibraryModal Component (Secondary)
+
+**Purpose**: Main modal component that wraps the media browser functionality
+
+**Props Interface**:
+```typescript
+interface MediaLibraryModalProps {
+  isOpen: boolean
+  mode: 'single' | 'multiple'
+  fileType?: 'image' | 'video' | 'all'
+  onSelect: (media: Media | Media[]) => void
+  onClose: () => void
+  selectedIds?: number[]  // Pre-selected items
+  title?: string          // Modal title
+  confirmText?: string    // Confirm button text
+}
+```
+
+**Features**:
+- Modal overlay with proper focus management
+- Header with title and close button
+- Media browser grid with selection indicators
+- Search and filter controls
+- Upload area with drag-and-drop
+- Footer with selection count and action buttons
+- Responsive design (desktop and tablet)
+
+### 2. MediaSelector Component
+
+**Purpose**: The actual media browsing interface within the modal
+
+**Features**:
+- Grid layout with thumbnail previews
+- Individual item selection with visual feedback
+- Keyboard navigation support
+- Loading states and error handling
+- "Select All" / "Clear Selection" bulk actions (for multiple mode)
+
+**Item Display**:
+- Thumbnail image
+- Filename (truncated)
+- File size and dimensions
+- Usage indicator (if used elsewhere)
+- Selection checkbox/indicator
+
+### 3. MediaUploader Component
+
+**Purpose**: Handle file uploads within the modal
+
+**Features**:
+- Drag-and-drop upload zone
+- Click to browse files
+- Upload progress indicators
+- Error handling and validation
+- Multiple file upload support
+- Automatic refresh of media grid after upload
+
+**Validation**:
+- File type restrictions based on context
+- File size limits (10MB per file)
+- Maximum number of files for bulk upload
+
+### 4. Form Integration Components
+
+#### MediaInput Component
+**Purpose**: Generic input field that opens media library modal
+
+```typescript
+interface MediaInputProps {
+  label: string
+  value?: Media | Media[] | null
+  mode: 'single' | 'multiple'
+  fileType?: 'image' | 'video' | 'all'
+  onSelect: (media: Media | Media[] | null) => void
+  placeholder?: string
+  required?: boolean
+  error?: string
+}
+```
+
+**Display**:
+- Label and optional required indicator
+- Preview of selected media (thumbnail + filename)
+- "Browse" button to open modal
+- "Clear" button to remove selection
+- Error state display
+
+#### ImagePicker Component
+**Purpose**: Specialized single image selector with enhanced preview
+
+```typescript
+interface ImagePickerProps {
+  label: string
+  value?: Media | null
+  onSelect: (media: Media | null) => void
+  aspectRatio?: string    // e.g., "16:9", "1:1"
+  placeholder?: string
+  required?: boolean
+  error?: string
+}
+```
+
+**Display**:
+- Large preview area with placeholder
+- Image preview with proper aspect ratio
+- Overlay with "Change" and "Remove" buttons on hover
+- Upload progress indicator
+
+#### GalleryManager Component
+**Purpose**: Multiple image selection with drag-and-drop reordering
+
+```typescript
+interface GalleryManagerProps {
+  label: string
+  value?: Media[]
+  onSelect: (media: Media[]) => void
+  onReorder?: (media: Media[]) => void
+  maxItems?: number
+  required?: boolean
+  error?: string
+}
+```
+
+**Display**:
+- Grid of selected images with reorder handles
+- "Add Images" button to open modal
+- Individual remove buttons on each image
+- Drag-and-drop reordering with visual feedback
+
+## User Experience Flows
+
+### 🥇 Primary Flow: Direct Upload in Forms
+
+#### 1. Single Image Upload (Project Featured Image)
+1. **User creates/edits project** and reaches featured image field
+2. **User drags image file** directly onto ImageUploader component OR clicks to browse
+3. **File is immediately uploaded** with progress indicator
+4. **Image preview appears** with proper aspect ratio
+5. **Alt text input field appears** below preview (if enabled)
+6. **User enters alt text** for accessibility
+7. **Form can be saved** with media reference and metadata
+
+#### 2. Multiple Image Upload (Project Gallery)
+1. **User reaches gallery section** of project form
+2. **User drags multiple files** onto GalleryUploader OR clicks to browse multiple
+3. **Upload progress shown** for each file individually
+4. **Gallery grid appears** with all uploaded images
+5. **Alt text inputs available** for each image
+6. **User can reorder** images with drag-and-drop
+7. **User can remove** individual images with X button
+8. **Form saves** with complete gallery and metadata
+
+#### 3. Media Management and Alt Text Editing
+1. **User visits Media Library page** to manage uploaded content
+2. **User clicks on any media item** to open details modal
+3. **User can edit alt text** and other metadata
+4. **User can see usage references** (which projects/posts use this media)
+5. **Changes are saved** and reflected wherever media is used
+
+### 🥈 Secondary Flow: Browse Existing Media
+
+#### 1. Selecting Previously Uploaded Image
+1. **User clicks "Browse Library"** button (secondary option in forms)
+2. **MediaLibraryModal opens** showing all previously uploaded media
+3. **User browses or searches** existing content
+4. **User selects image** and confirms selection
+5. **Modal closes** and form shows selected media with existing alt text
+
+#### 2. Managing Media Library
+1. **User visits dedicated Media Library page**
+2. **User can view all uploaded media** in grid/list format
+3. **User can edit metadata** including alt text for any media
+4. **User can see usage tracking** - which content references each media
+5. **User can perform bulk operations** like deleting unused media
+
+## Design Specifications
+
+### Modal Layout
+- **Width**: 1200px max, responsive on smaller screens
+- **Height**: 80vh max with scroll
+- **Grid**: 4-6 columns depending on screen size
+- **Item Size**: 180px × 140px thumbnails
+
+### Visual States
+- **Default**: Border with subtle background
+- **Selected**: Blue border and checkmark overlay
+- **Hover**: Slight scale and shadow effect
+- **Loading**: Skeleton loader animation
+- **Upload**: Progress overlay with percentage
+
+### Colors (Using Existing Variables)
+- **Selection**: `$blue-60` for selected state
+- **Hover**: `$grey-10` background
+- **Upload Progress**: `$green-60` for success, `$red-60` for error
+
+## API Integration
+
+### Endpoints Used
+- `GET /api/media` - Browse media with search/filter/pagination
+- `POST /api/media/upload` - Single file upload
+- `POST /api/media/bulk-upload` - Multiple file upload
+
+### Search and Filtering
+- **Search**: By filename (case-insensitive)
+- **Filter by Type**: image/*, video/*, all
+- **Filter by Usage**: unused only, all
+- **Sort**: Most recent first
+
+### Pagination
+- 24 items per page
+- Infinite scroll or traditional pagination
+- Loading states during page changes
+
+## Implementation Plan
+
+### ✅ Phase 1: Database Schema Updates (COMPLETED)
+1. **✅ Alt Text Support**
+   - Database schema includes `altText` and `description` fields
+   - API endpoints support alt text in upload and update operations
+
+2. **⏳ Usage Tracking (IN PROGRESS)**
+   - Basic usage references working in forms
+   - Need dedicated tracking table for comprehensive usage analytics
+
+### ✅ Phase 2: Direct Upload Components (COMPLETED)
+1. **✅ ImageUploader Component**
+   - Drag-and-drop upload zone with visual feedback
+   - Immediate upload and preview functionality
+   - Alt text input integration
+   - MediaLibraryModal integration as secondary option
+
+2. **✅ GalleryUploader Component**
+   - Multiple file drag-and-drop support
+   - Individual alt text inputs per image
+   - Drag-and-drop reordering functionality
+   - Remove individual images functionality
+   - MediaLibraryModal integration for existing media selection
+
+3. **✅ Upload API Enhancement**
+   - Alt text accepted in upload requests
+   - Complete media object returned with metadata
+   - Batch uploads with individual alt text support
+
+### ✅ Phase 3: Form Integration (COMPLETED)
+1. **✅ Project Forms Enhancement**
+   - Logo field enhanced with ImageUploader + Browse Library
+   - Featured image support with ImageUploader
+   - Gallery section implemented with GalleryUploader
+   - Secondary "Browse Library" buttons throughout
+
+2. **✅ Post Forms Enhancement**
+   - Photo post creation with PhotoPostForm
+   - Album creation with AlbumForm and GalleryUploader
+   - Universe Composer with photo attachments
+   - Enhanced Edra editor with inline image/gallery support
+
+### ✅ Phase 4: Media Library Management (MOSTLY COMPLETED)
+1. **✅ Enhanced Media Library Page**
+   - Alt text editing for existing media via MediaDetailsModal
+   - Clickable media items with edit functionality
+   - Grid and list view toggles
+
+2. **✅ MediaLibraryModal for Selection**
+   - Browse existing media interface
+   - Single and multiple selection modes
+   - Integration throughout all form components
+   - File type filtering (image/video/all)
+
+### 🎯 Phase 5: Remaining Enhancements (CURRENT PRIORITIES)
+
+#### 🔥 High Priority (Next Sprint)
+1. **Enhanced Media Library Features**
+   - **Bulk alt text editing** - Select multiple media items and edit alt text in batch
+   - **Usage tracking display** - Show where each media item is referenced
+   - **Advanced drag & drop zones** - More intuitive upload areas in all components
+
+2. **Performance Optimizations**
+   - **Lazy loading** for large media libraries
+   - **Search optimization** with better indexing
+   - **Thumbnail optimization** for faster loading
+
+#### 🔥 Medium Priority (Future Sprints)
+1. **Advanced Upload Features**
+   - **Image resizing/optimization** options during upload
+   - **Duplicate detection** to prevent redundant uploads
+   - **Bulk upload improvements** with better progress tracking
+
+2. **Usage Analytics & Management**
+   - **Usage analytics dashboard** showing media usage statistics
+   - **Unused media cleanup** tools for storage optimization
+   - **Advanced search** by alt text, usage status, date ranges
+
+#### 🔥 Low Priority (Nice-to-Have)
+1. **AI Integration**
+   - **Automatic alt text suggestions** using image recognition
+   - **Smart tagging** for better organization
+   - **Content-aware optimization** suggestions
+
+## Success Criteria
+
+### Functional Requirements
+
+#### Primary Workflow (Direct Upload)
+- [x] **Drag-and-drop upload works** in all form components
+- [x] **Click-to-browse file selection** works reliably  
+- [x] **Immediate upload and preview** happens without page navigation
+- [x] **Alt text input appears** and saves with uploaded media
+- [x] **Upload progress** is clearly indicated with percentage
+- [x] **Error handling** provides helpful feedback for failed uploads
+- [x] **Multiple file upload** works with individual progress tracking
+- [x] **Gallery reordering** works with drag-and-drop after upload
+
+#### Secondary Workflow (Media Library)
+- [x] **Media Library Modal** opens and closes properly with smooth animations
+- [x] **Single and multiple selection** modes work correctly
+- [x] **Search and filtering** return accurate results  
+- [ ] **Usage tracking** shows where media is referenced (IN PROGRESS)
+- [x] **Alt text editing** works in Media Library management
+- [x] **All components are keyboard accessible**
+
+#### Edra Editor Integration
+- [x] **Slash commands** work for image and gallery insertion
+- [x] **MediaLibraryModal integration** in editor placeholders
+- [x] **Gallery management** within rich text editor
+- [x] **Image replacement** functionality in editor
+
+### Performance Requirements
+- [x] Modal opens in under 200ms
+- [x] Media grid loads in under 1 second
+- [x] Search results appear in under 500ms
+- [x] Upload progress updates in real-time
+- [x] No memory leaks when opening/closing modal multiple times
+
+### UX Requirements
+- [x] Interface is intuitive without instruction
+- [x] Visual feedback is clear for all interactions
+- [x] Error messages are helpful and actionable
+- [x] Mobile/tablet interface is fully functional
+- [x] Loading states prevent user confusion
+
+## Technical Considerations
+
+### State Management
+- Use Svelte runes for reactive state
+- Maintain selection state during modal lifecycle
+- Handle API loading and error states properly
+
+### Accessibility
+- Proper ARIA labels and roles
+- Keyboard navigation support
+- Focus management when modal opens/closes
+- Screen reader announcements for state changes
+
+### Performance
+- Lazy load thumbnails as they come into view
+- Debounce search input to prevent excessive API calls
+- Efficient reordering without full re-renders
+- Memory cleanup when modal is closed
+
+### Error Handling
+- Network failure recovery
+- Upload failure feedback
+- File validation error messages
+- Graceful degradation for missing thumbnails
+
+## Future Enhancements
+
+### Nice-to-Have Features
+- **Bulk Operations**: Delete multiple files, bulk tag editing
+- **Advanced Search**: Search by tags, date range, file size
+- **Preview Mode**: Full-size preview with navigation
+- **Folder Organization**: Create folders/categories for organization
+- **Smart Suggestions**: Recently used, similar images
+- **Crop Tool**: Basic cropping interface within modal
+- **Alt Text Editor**: Quick alt text editing for accessibility
+
+### Integration Opportunities
+- **CDN Optimization**: Automatic image optimization settings
+- **AI Tagging**: Automatic tag generation for uploaded images
+- **Duplicate Detection**: Warn about similar/duplicate uploads
+- **Usage Analytics**: Track which media is used most frequently
+
+## Development Checklist
+
+### Core Components
+- [x] MediaLibraryModal base structure
+- [x] MediaSelector with grid layout
+- [x] MediaUploader with drag-and-drop
+- [x] Search and filter interface
+- [x] Pagination implementation
+
+### Form Integration
+- [x] MediaInput generic component (ImageUploader/GalleryUploader)
+- [x] ImagePicker specialized component (ImageUploader)
+- [x] GalleryManager with reordering (GalleryUploader)
+- [x] Integration with existing project forms
+- [x] Integration with post forms
+- [x] Integration with Edra editor
+
+### Polish and Testing
+- [x] Responsive design implementation
+- [x] Accessibility testing and fixes
+- [x] Performance optimization
+- [x] Error state handling
+- [x] Cross-browser testing
+- [x] Mobile device testing
+
+### 🎯 Next Priority Items
+- [ ] **Bulk alt text editing** in Media Library
+- [ ] **Usage tracking display** for media references
+- [ ] **Advanced drag & drop zones** with better visual feedback
+- [ ] **Performance optimizations** for large libraries
+
+This Media Library system will serve as the foundation for all media-related functionality in the CMS, enabling rich content creation across projects, posts, and albums.
\ No newline at end of file
diff --git a/PRD-storybook-integration.md b/PRD-storybook-integration.md
new file mode 100644
index 0000000..cbb3082
--- /dev/null
+++ b/PRD-storybook-integration.md
@@ -0,0 +1,397 @@
+# Product Requirements Document: Storybook Integration
+
+## Overview
+
+Implement Storybook as our component development and documentation platform to improve development workflow, component testing, and design system consistency across the jedmund-svelte project.
+
+## Goals
+
+- **Isolated Component Development**: Build and test components in isolation from business logic
+- **Visual Documentation**: Create a living style guide for all UI components
+- **Design System Consistency**: Ensure consistent component behavior across different states
+- **Developer Experience**: Improve development workflow with hot reloading and component playground
+- **Quality Assurance**: Test component edge cases and various prop combinations
+- **Team Collaboration**: Provide a central place for designers and developers to review components
+
+## Current State Analysis
+
+### ✅ What We Have
+- Comprehensive admin UI component library (Button, Input, Modal, etc.)
+- Media Library components (MediaLibraryModal, ImagePicker, GalleryManager, etc.)
+- SCSS-based styling system with global variables
+- SvelteKit project with Svelte 5 runes mode
+- TypeScript configuration
+- Vite build system
+
+### 🎯 What We Need
+- Storybook installation and configuration
+- Stories for existing components
+- Visual regression testing setup
+- Component documentation standards
+- Integration with existing SCSS variables and themes
+
+## Technical Requirements
+
+### 1. Storybook Installation
+
+**Installation Method**: Manual setup (not template-based since we have an existing project)
+
+```bash
+# Install Storybook CLI and initialize
+npx storybook@latest init
+
+# Or manual installation for better control
+npm install --save-dev @storybook/svelte-vite @storybook/addon-essentials
+```
+
+**Expected File Structure**:
+```
+.storybook/
+├── main.js           # Storybook configuration
+├── preview.js        # Global decorators and parameters
+└── manager.js        # Storybook UI customization
+
+src/
+├── stories/          # Component stories
+│   ├── Button.stories.js
+│   ├── Input.stories.js
+│   └── ...
+└── components/       # Existing components
+```
+
+### 2. Configuration Requirements
+
+#### Main Configuration (.storybook/main.js)
+```javascript
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    '@storybook/addon-essentials',    // Controls, actions, viewport, etc.
+    '@storybook/addon-svelte-csf',    // Svelte Component Story Format
+    '@storybook/addon-a11y',          // Accessibility testing
+    '@storybook/addon-design-tokens', // Design system tokens
+  ],
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {}
+  },
+  viteFinal: async (config) => {
+    // Integrate with existing Vite config
+    // Import SCSS variables and aliases
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '$lib': path.resolve('./src/lib'),
+          '$components': path.resolve('./src/lib/components'),
+          '$icons': path.resolve('./src/assets/icons'),
+          '$illos': path.resolve('./src/assets/illos'),
+        }
+      },
+      css: {
+        preprocessorOptions: {
+          scss: {
+            additionalData: `
+              @import './src/assets/styles/variables.scss';
+              @import './src/assets/styles/fonts.scss';
+              @import './src/assets/styles/themes.scss';
+              @import './src/assets/styles/globals.scss';
+            `
+          }
+        }
+      }
+    });
+  }
+};
+```
+
+#### Preview Configuration (.storybook/preview.js)
+```javascript
+import '../src/assets/styles/reset.css';
+import '../src/assets/styles/globals.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: 'light',
+    values: [
+      { name: 'light', value: '#ffffff' },
+      { name: 'dark', value: '#333333' },
+      { name: 'admin', value: '#f5f5f5' },
+    ],
+  },
+  viewport: {
+    viewports: {
+      mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
+      tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
+      desktop: { name: 'Desktop', styles: { width: '1440px', height: '900px' } },
+    },
+  },
+};
+```
+
+### 3. Component Story Standards
+
+#### Story File Format
+Each component should have a corresponding `.stories.js` file following this structure:
+
+```javascript
+// Button.stories.js
+import Button from '../lib/components/admin/Button.svelte';
+
+export default {
+  title: 'Admin/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'ghost', 'danger']
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large']
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    onclick: { action: 'clicked' }
+  }
+};
+
+export const Primary = {
+  args: {
+    variant: 'primary',
+    children: 'Primary Button'
+  }
+};
+
+export const Secondary = {
+  args: {
+    variant: 'secondary', 
+    children: 'Secondary Button'
+  }
+};
+
+export const AllVariants = {
+  render: () => ({
+    Component: ButtonShowcase,
+    props: {}
+  })
+};
+```
+
+#### Story Organization
+```
+src/stories/
+├── admin/              # Admin interface components
+│   ├── Button.stories.js
+│   ├── Input.stories.js
+│   ├── Modal.stories.js
+│   └── forms/          # Form-specific components
+│       ├── MediaInput.stories.js
+│       ├── ImagePicker.stories.js
+│       └── GalleryManager.stories.js
+├── public/             # Public-facing components
+│   ├── Header.stories.js
+│   └── Footer.stories.js
+└── examples/           # Complex examples and compositions
+    ├── AdminDashboard.stories.js
+    └── MediaLibraryFlow.stories.js
+```
+
+## Implementation Plan
+
+### Phase 1: Initial Setup (1-2 days)
+1. **Install and Configure Storybook**
+   - Run `npx storybook@latest init`
+   - Configure Vite integration for SCSS and aliases
+   - Set up TypeScript support
+   - Configure preview with global styles
+
+2. **Test Basic Setup**
+   - Create simple Button story
+   - Verify SCSS variables work
+   - Test hot reloading
+
+### Phase 2: Core Component Stories (3-4 days)
+1. **Basic UI Components**
+   - Button (all variants, states, sizes)
+   - Input (text, textarea, validation states)
+   - Modal (different sizes, content types)
+   - LoadingSpinner (different sizes)
+
+2. **Form Components**
+   - MediaInput (single/multiple modes)
+   - ImagePicker (different aspect ratios)
+   - GalleryManager (with/without items)
+
+3. **Complex Components**
+   - MediaLibraryModal (with mock data)
+   - DataTable (with sample data)
+   - AdminNavBar (active states)
+
+### Phase 3: Advanced Features (2-3 days)
+1. **Mock Data Setup**
+   - Create mock Media objects
+   - Set up API mocking for components that need data
+   - Create realistic test scenarios
+
+2. **Accessibility Testing**
+   - Add @storybook/addon-a11y
+   - Test keyboard navigation
+   - Verify screen reader compatibility
+
+3. **Visual Regression Testing**
+   - Set up Chromatic (optional)
+   - Create baseline screenshots
+   - Configure CI integration
+
+### Phase 4: Documentation and Polish (1-2 days)
+1. **Component Documentation**
+   - Add JSDoc comments to components
+   - Create usage examples
+   - Document props and events
+
+2. **Design System Documentation**
+   - Color palette showcase
+   - Typography scale
+   - Spacing system
+   - Icon library
+
+## Success Criteria
+
+### Functional Requirements
+- [ ] Storybook runs successfully with `npm run storybook`
+- [ ] All existing components have basic stories
+- [ ] SCSS variables and global styles work correctly
+- [ ] Components render properly in isolation
+- [ ] Hot reloading works for both component and story changes
+- [ ] TypeScript support is fully functional
+
+### Quality Requirements
+- [ ] Stories cover all major component variants
+- [ ] Interactive controls work for all props
+- [ ] Actions are properly logged for events
+- [ ] Accessibility addon reports no critical issues
+- [ ] Components are responsive across viewport sizes
+
+### Developer Experience Requirements
+- [ ] Story creation is straightforward and documented
+- [ ] Mock data is easily accessible and realistic
+- [ ] Component API is clearly documented
+- [ ] Common patterns have reusable templates
+
+## Integration with Existing Workflow
+
+### Development Workflow
+1. **Component Development**: Start new components in Storybook
+2. **Testing**: Test all states and edge cases in stories
+3. **Documentation**: Stories serve as living documentation
+4. **Review**: Use Storybook for design/code reviews
+
+### Project Structure Integration
+```
+package.json           # Add storybook scripts
+├── "storybook": "storybook dev -p 6006"
+├── "build-storybook": "storybook build"
+
+.storybook/           # Storybook configuration
+src/
+├── lib/components/   # Existing components (unchanged)
+├── stories/          # New: component stories
+└── assets/styles/    # Existing styles (used by Storybook)
+```
+
+### Scripts and Commands
+```json
+{
+  "scripts": {
+    "dev": "vite dev",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "storybook:test": "test-storybook"
+  }
+}
+```
+
+## Technical Considerations
+
+### SCSS Integration
+- Import global variables in Storybook preview
+- Ensure component styles render correctly
+- Test responsive breakpoints
+
+### SvelteKit Compatibility
+- Handle SvelteKit-specific imports (like `$app/stores`)
+- Mock SvelteKit modules when needed
+- Ensure aliases work in Storybook context
+
+### TypeScript Support
+- Configure proper type checking
+- Use TypeScript for story definitions where beneficial
+- Ensure IntelliSense works for story arguments
+
+### Performance
+- Optimize bundle size for faster story loading
+- Use lazy loading for large story collections
+- Configure appropriate caching
+
+## Future Enhancements
+
+### Advanced Testing
+- **Visual Regression Testing**: Use Chromatic for automated visual testing
+- **Interaction Testing**: Add @storybook/addon-interactions for user flow testing
+- **Accessibility Automation**: Automated a11y testing in CI/CD
+
+### Design System Evolution
+- **Design Tokens**: Implement design tokens addon
+- **Figma Integration**: Connect with Figma designs
+- **Component Status**: Track component implementation status
+
+### Collaboration Features
+- **Published Storybook**: Deploy Storybook for team access
+- **Design Review Process**: Use Storybook for design approvals
+- **Documentation Site**: Evolve into full design system documentation
+
+## Risks and Mitigation
+
+### Technical Risks
+- **Build Conflicts**: Vite configuration conflicts
+  - *Mitigation*: Careful configuration merging and testing
+- **SCSS Import Issues**: Global styles not loading
+  - *Mitigation*: Test SCSS integration early in setup
+
+### Workflow Risks
+- **Adoption Resistance**: Team not using Storybook
+  - *Mitigation*: Start with high-value components, show immediate benefits
+- **Maintenance Overhead**: Stories become outdated
+  - *Mitigation*: Include story updates in component change process
+
+## Success Metrics
+
+### Development Efficiency
+- Reduced time to develop new components
+- Faster iteration on component designs
+- Fewer bugs in component edge cases
+
+### Code Quality
+- Better component API consistency
+- Improved accessibility compliance
+- More comprehensive component testing
+
+### Team Collaboration
+- Faster design review cycles
+- Better communication between design and development
+- More consistent component usage across the application
+
+## Conclusion
+
+Implementing Storybook will significantly improve our component development workflow, provide better documentation, and create a foundation for a mature design system. The investment in setup and story creation will pay dividends in development speed, component quality, and team collaboration.
+
+The implementation should be done incrementally, starting with the most commonly used components and gradually expanding coverage. This approach minimizes risk while providing immediate value to the development process.
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index 5a7eb2c..8621138 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook'
+
 import js from '@eslint/js'
 import ts from 'typescript-eslint'
 import svelte from 'eslint-plugin-svelte'
@@ -29,5 +32,6 @@ export default [
 	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
-	}
+	},
+	...storybook.configs['flat/recommended']
 ]
diff --git a/package-lock.json b/package-lock.json
index e206d3f..163a2a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5270 +1,9077 @@
 {
-	"name": "jedmund-svelte",
-	"version": "0.0.1",
-	"lockfileVersion": 3,
-	"requires": true,
-	"packages": {
-		"": {
-			"name": "jedmund-svelte",
-			"version": "0.0.1",
-			"dependencies": {
-				"@sveltejs/adapter-node": "^5.2.0",
-				"@types/redis": "^4.0.10",
-				"@types/steamapi": "^2.2.5",
-				"dotenv": "^16.4.5",
-				"giantbombing-api": "^1.0.4",
-				"gray-matter": "^4.0.3",
-				"ioredis": "^5.4.1",
-				"marked": "^15.0.12",
-				"node-itunes-search": "^1.2.3",
-				"psn-api": "github:jedmund/psn-api",
-				"redis": "^4.7.0",
-				"steamapi": "^3.0.11",
-				"tinyduration": "^3.3.1"
-			},
-			"devDependencies": {
-				"@musicorum/lastfm": "github:jedmund/lastfm",
-				"@poppanator/sveltekit-svg": "^5.0.0-svelte5.4",
-				"@sveltejs/adapter-auto": "^3.0.0",
-				"@sveltejs/kit": "^2.0.0",
-				"@sveltejs/vite-plugin-svelte": "^3.1.2",
-				"@types/eslint": "^8.56.7",
-				"@types/node": "^22.0.2",
-				"autoprefixer": "^10.4.19",
-				"eslint": "^9.0.0",
-				"eslint-config-prettier": "^9.1.0",
-				"eslint-plugin-svelte": "^2.36.0",
-				"globals": "^15.0.0",
-				"postcss": "^8.4.39",
-				"prettier": "^3.1.1",
-				"prettier-plugin-svelte": "^3.1.2",
-				"sass": "^1.77.8",
-				"svelte": "^5.0.0-next.1",
-				"svelte-check": "^3.6.0",
-				"tslib": "^2.4.1",
-				"typescript": "^5.5.3",
-				"typescript-eslint": "^8.0.0-alpha.20",
-				"vite": "^5.0.3"
-			}
-		},
-		"node_modules/@ampproject/remapping": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dependencies": {
-				"@jridgewell/gen-mapping": "^0.3.5",
-				"@jridgewell/trace-mapping": "^0.3.24"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@esbuild/aix-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-			"cpu": [
-				"ppc64"
-			],
-			"optional": true,
-			"os": [
-				"aix"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/android-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-			"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-			"cpu": [
-				"arm"
-			],
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/android-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-			"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/android-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-			"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-			"integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-			"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-			"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-			"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-			"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-			"cpu": [
-				"arm"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-			"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-			"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-			"cpu": [
-				"ia32"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-			"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-			"cpu": [
-				"loong64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-			"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-			"cpu": [
-				"mips64el"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-			"cpu": [
-				"ppc64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-			"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-			"cpu": [
-				"riscv64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-			"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-			"cpu": [
-				"s390x"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/linux-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-			"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"netbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"openbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-			"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"sunos"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-			"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-			"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-			"cpu": [
-				"ia32"
-			],
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@esbuild/win32-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-			"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-			"integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-			"dev": true,
-			"dependencies": {
-				"eslint-visitor-keys": "^3.3.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"peerDependencies": {
-				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-			}
-		},
-		"node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-			"version": "3.4.3",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-			"dev": true,
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/@eslint-community/regexpp": {
-			"version": "4.11.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-			"integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
-			"dev": true,
-			"engines": {
-				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-			}
-		},
-		"node_modules/@eslint/config-array": {
-			"version": "0.17.0",
-			"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.0.tgz",
-			"integrity": "sha512-A68TBu6/1mHHuc5YJL0U0VVeGNiklLAL6rRmhTCP2B5XjWLMnrX+HkO+IAXyHvks5cyyY1jjK5ITPQ1HGS2EVA==",
-			"dev": true,
-			"dependencies": {
-				"@eslint/object-schema": "^2.1.4",
-				"debug": "^4.3.1",
-				"minimatch": "^3.1.2"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@eslint/eslintrc": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
-			"integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
-			"dev": true,
-			"dependencies": {
-				"ajv": "^6.12.4",
-				"debug": "^4.3.2",
-				"espree": "^10.0.1",
-				"globals": "^14.0.0",
-				"ignore": "^5.2.0",
-				"import-fresh": "^3.2.1",
-				"js-yaml": "^4.1.0",
-				"minimatch": "^3.1.2",
-				"strip-json-comments": "^3.1.1"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/@eslint/eslintrc/node_modules/globals": {
-			"version": "14.0.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-			"integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/@eslint/js": {
-			"version": "9.6.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.6.0.tgz",
-			"integrity": "sha512-D9B0/3vNg44ZeWbYMpBoXqNP4j6eQD5vNwIlGAuFRRzK/WtT/jvDQW3Bi9kkf3PMDMlM7Yi+73VLUsn5bJcl8A==",
-			"dev": true,
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@eslint/object-schema": {
-			"version": "2.1.4",
-			"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
-			"integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
-			"dev": true,
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@humanwhocodes/module-importer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-			"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-			"dev": true,
-			"engines": {
-				"node": ">=12.22"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
-		"node_modules/@humanwhocodes/retry": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz",
-			"integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==",
-			"dev": true,
-			"engines": {
-				"node": ">=18.18"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
-		"node_modules/@ioredis/commands": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
-			"integrity": "sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==",
-			"license": "MIT"
-		},
-		"node_modules/@isaacs/cliui": {
-			"version": "8.0.2",
-			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-			"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-			"dependencies": {
-				"string-width": "^5.1.2",
-				"string-width-cjs": "npm:string-width@^4.2.0",
-				"strip-ansi": "^7.0.1",
-				"strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-				"wrap-ansi": "^8.1.0",
-				"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
-			}
-		},
-		"node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-			"dependencies": {
-				"ansi-regex": "^6.0.1"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
-			}
-		},
-		"node_modules/@jridgewell/gen-mapping": {
-			"version": "0.3.5",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-			"dependencies": {
-				"@jridgewell/set-array": "^1.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.10",
-				"@jridgewell/trace-mapping": "^0.3.24"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/resolve-uri": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/set-array": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/sourcemap-codec": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-			"license": "MIT"
-		},
-		"node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.25",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dependencies": {
-				"@jridgewell/resolve-uri": "^3.1.0",
-				"@jridgewell/sourcemap-codec": "^1.4.14"
-			}
-		},
-		"node_modules/@musicorum/lastfm": {
-			"version": "0.3.2",
-			"resolved": "git+ssh://git@github.com/jedmund/lastfm.git#ec56b053a8d00be63bb71b1e0d41c650f859f0ca",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=17.5.0"
-			}
-		},
-		"node_modules/@nodelib/fs.scandir": {
-			"version": "2.1.5",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-			"dev": true,
-			"dependencies": {
-				"@nodelib/fs.stat": "2.0.5",
-				"run-parallel": "^1.1.9"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/@nodelib/fs.stat": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-			"dev": true,
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/@nodelib/fs.walk": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-			"dev": true,
-			"dependencies": {
-				"@nodelib/fs.scandir": "2.1.5",
-				"fastq": "^1.6.0"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/@pkgjs/parseargs": {
-			"version": "0.11.0",
-			"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-			"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-			"optional": true,
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/@polka/url": {
-			"version": "1.0.0-next.25",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
-		},
-		"node_modules/@poppanator/sveltekit-svg": {
-			"version": "5.0.0-svelte5.4",
-			"resolved": "https://registry.npmjs.org/@poppanator/sveltekit-svg/-/sveltekit-svg-5.0.0-svelte5.4.tgz",
-			"integrity": "sha512-ZFUA/B5MfSEO2Ta/stJMuyhWZKadHg5WQqp8KicgIx741no89rvDCr+X4FSrUI6eqm0Na/p6yya14C2T/7lkZQ==",
-			"dev": true,
-			"dependencies": {
-				"@rollup/pluginutils": "^5.1.0"
-			},
-			"peerDependencies": {
-				"svelte": ">=5.x || ^5.0.0-next.0",
-				"svgo": ">=3.x",
-				"vite": ">=5.x"
-			}
-		},
-		"node_modules/@redis/bloom": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
-			"integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
-			"license": "MIT",
-			"peerDependencies": {
-				"@redis/client": "^1.0.0"
-			}
-		},
-		"node_modules/@redis/client": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.0.tgz",
-			"integrity": "sha512-aR0uffYI700OEEH4gYnitAnv3vzVGXCFvYfdpu/CJKvk4pHfLPEy/JSZyrpQ+15WhXe1yJRXLtfQ84s4mEXnPg==",
-			"license": "MIT",
-			"dependencies": {
-				"cluster-key-slot": "1.1.2",
-				"generic-pool": "3.9.0",
-				"yallist": "4.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/@redis/graph": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.1.tgz",
-			"integrity": "sha512-FEMTcTHZozZciLRl6GiiIB4zGm5z5F3F6a6FZCyrfxdKOhFlGkiAqlexWMBzCi4DcRoyiOsuLfW+cjlGWyExOw==",
-			"license": "MIT",
-			"peerDependencies": {
-				"@redis/client": "^1.0.0"
-			}
-		},
-		"node_modules/@redis/json": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.7.tgz",
-			"integrity": "sha512-6UyXfjVaTBTJtKNG4/9Z8PSpKE6XgSyEb8iwaqDcy+uKrd/DGYHTWkUdnQDyzm727V7p21WUMhsqz5oy65kPcQ==",
-			"license": "MIT",
-			"peerDependencies": {
-				"@redis/client": "^1.0.0"
-			}
-		},
-		"node_modules/@redis/search": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@redis/search/-/search-1.2.0.tgz",
-			"integrity": "sha512-tYoDBbtqOVigEDMAcTGsRlMycIIjwMCgD8eR2t0NANeQmgK/lvxNAvYyb6bZDD4frHRhIHkJu2TBRvB0ERkOmw==",
-			"license": "MIT",
-			"peerDependencies": {
-				"@redis/client": "^1.0.0"
-			}
-		},
-		"node_modules/@redis/time-series": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.1.0.tgz",
-			"integrity": "sha512-c1Q99M5ljsIuc4YdaCwfUEXsofakb9c8+Zse2qxTadu8TalLXuAESzLvFAvNVbkmSlvlzIQOLpBCmWI9wTOt+g==",
-			"license": "MIT",
-			"peerDependencies": {
-				"@redis/client": "^1.0.0"
-			}
-		},
-		"node_modules/@rollup/plugin-commonjs": {
-			"version": "26.0.1",
-			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-26.0.1.tgz",
-			"integrity": "sha512-UnsKoZK6/aGIH6AdkptXhNvhaqftcjq3zZdT+LY5Ftms6JR06nADcDsYp5hTU9E2lbJUEOhdlY5J4DNTneM+jQ==",
-			"dependencies": {
-				"@rollup/pluginutils": "^5.0.1",
-				"commondir": "^1.0.1",
-				"estree-walker": "^2.0.2",
-				"glob": "^10.4.1",
-				"is-reference": "1.2.1",
-				"magic-string": "^0.30.3"
-			},
-			"engines": {
-				"node": ">=16.0.0 || 14 >= 14.17"
-			},
-			"peerDependencies": {
-				"rollup": "^2.68.0||^3.0.0||^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"rollup": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/@rollup/plugin-commonjs/node_modules/glob": {
-			"version": "10.4.5",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-			"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-			"dependencies": {
-				"foreground-child": "^3.1.0",
-				"jackspeak": "^3.1.2",
-				"minimatch": "^9.0.4",
-				"minipass": "^7.1.2",
-				"package-json-from-dist": "^1.0.0",
-				"path-scurry": "^1.11.1"
-			},
-			"bin": {
-				"glob": "dist/esm/bin.mjs"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
-			"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
-			"dependencies": {
-				"@types/estree": "*"
-			}
-		},
-		"node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
-			"version": "9.0.5",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=16 || 14 >=14.17"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/@rollup/plugin-json": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
-			"integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
-			"dependencies": {
-				"@rollup/pluginutils": "^5.1.0"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"peerDependencies": {
-				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"rollup": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@rollup/plugin-node-resolve": {
-			"version": "15.2.3",
-			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
-			"integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==",
-			"dependencies": {
-				"@rollup/pluginutils": "^5.0.1",
-				"@types/resolve": "1.20.2",
-				"deepmerge": "^4.2.2",
-				"is-builtin-module": "^3.2.1",
-				"is-module": "^1.0.0",
-				"resolve": "^1.22.1"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"peerDependencies": {
-				"rollup": "^2.78.0||^3.0.0||^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"rollup": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@rollup/pluginutils": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-			"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
-			"dependencies": {
-				"@types/estree": "^1.0.0",
-				"estree-walker": "^2.0.2",
-				"picomatch": "^2.3.1"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"peerDependencies": {
-				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"rollup": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@rollup/rollup-android-arm-eabi": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
-			"integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
-			"cpu": [
-				"arm"
-			],
-			"optional": true,
-			"os": [
-				"android"
-			]
-		},
-		"node_modules/@rollup/rollup-android-arm64": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
-			"integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"android"
-			]
-		},
-		"node_modules/@rollup/rollup-darwin-arm64": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
-			"integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"darwin"
-			]
-		},
-		"node_modules/@rollup/rollup-darwin-x64": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
-			"integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"darwin"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
-			"integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
-			"cpu": [
-				"arm"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
-			"integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
-			"cpu": [
-				"arm"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-arm64-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
-			"integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-arm64-musl": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
-			"integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
-			"integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
-			"cpu": [
-				"ppc64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
-			"integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
-			"cpu": [
-				"riscv64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-s390x-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
-			"integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
-			"cpu": [
-				"s390x"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-x64-gnu": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
-			"integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-x64-musl": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
-			"integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-win32-arm64-msvc": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
-			"integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
-			"cpu": [
-				"arm64"
-			],
-			"optional": true,
-			"os": [
-				"win32"
-			]
-		},
-		"node_modules/@rollup/rollup-win32-ia32-msvc": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
-			"integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
-			"cpu": [
-				"ia32"
-			],
-			"optional": true,
-			"os": [
-				"win32"
-			]
-		},
-		"node_modules/@rollup/rollup-win32-x64-msvc": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
-			"integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
-			"cpu": [
-				"x64"
-			],
-			"optional": true,
-			"os": [
-				"win32"
-			]
-		},
-		"node_modules/@sveltejs/adapter-auto": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.2.tgz",
-			"integrity": "sha512-Mso5xPCA8zgcKrv+QioVlqMZkyUQ5MjDJiEPuG/Z7cV/5tmwV7LmcVWk5tZ+H0NCOV1x12AsoSpt/CwFwuVXMA==",
-			"dev": true,
-			"dependencies": {
-				"import-meta-resolve": "^4.1.0"
-			},
-			"peerDependencies": {
-				"@sveltejs/kit": "^2.0.0"
-			}
-		},
-		"node_modules/@sveltejs/adapter-node": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.0.tgz",
-			"integrity": "sha512-HVZoei2078XSyPmvdTHE03VXDUD0ytTvMuMHMQP0j6zX4nPDpCcKrgvU7baEblMeCCMdM/shQvstFxOJPQKlUQ==",
-			"dependencies": {
-				"@rollup/plugin-commonjs": "^26.0.1",
-				"@rollup/plugin-json": "^6.1.0",
-				"@rollup/plugin-node-resolve": "^15.2.3",
-				"rollup": "^4.9.5"
-			},
-			"peerDependencies": {
-				"@sveltejs/kit": "^2.4.0"
-			}
-		},
-		"node_modules/@sveltejs/kit": {
-			"version": "2.5.18",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.18.tgz",
-			"integrity": "sha512-+g06hvpVAnH7b4CDjhnTDgFWBKBiQJpuSmQeGYOuzbO3SC3tdYjRNlDCrafvDtKbGiT2uxY5Dn9qdEUGVZdWOQ==",
-			"hasInstallScript": true,
-			"dependencies": {
-				"@types/cookie": "^0.6.0",
-				"cookie": "^0.6.0",
-				"devalue": "^5.0.0",
-				"esm-env": "^1.0.0",
-				"import-meta-resolve": "^4.1.0",
-				"kleur": "^4.1.5",
-				"magic-string": "^0.30.5",
-				"mrmime": "^2.0.0",
-				"sade": "^1.8.1",
-				"set-cookie-parser": "^2.6.0",
-				"sirv": "^2.0.4",
-				"tiny-glob": "^0.2.9"
-			},
-			"bin": {
-				"svelte-kit": "svelte-kit.js"
-			},
-			"engines": {
-				"node": ">=18.13"
-			},
-			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.3"
-			}
-		},
-		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
-			"integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
-			"license": "MIT",
-			"dependencies": {
-				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-				"debug": "^4.3.4",
-				"deepmerge": "^4.3.1",
-				"kleur": "^4.1.5",
-				"magic-string": "^0.30.10",
-				"svelte-hmr": "^0.16.0",
-				"vitefu": "^0.2.5"
-			},
-			"engines": {
-				"node": "^18.0.0 || >=20"
-			},
-			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
-			}
-		},
-		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-			"integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
-			"license": "MIT",
-			"dependencies": {
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^18.0.0 || >=20"
-			},
-			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
-			}
-		},
-		"node_modules/@sveltejs/vite-plugin-svelte/node_modules/svelte-hmr": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-			"integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-			"license": "ISC",
-			"engines": {
-				"node": "^12.20 || ^14.13.1 || >= 16"
-			},
-			"peerDependencies": {
-				"svelte": "^3.19.0 || ^4.0.0"
-			}
-		},
-		"node_modules/@trysound/sax": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-			"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">=10.13.0"
-			}
-		},
-		"node_modules/@types/cookie": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
-		},
-		"node_modules/@types/eslint": {
-			"version": "8.56.10",
-			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-			"integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-			"dev": true,
-			"dependencies": {
-				"@types/estree": "*",
-				"@types/json-schema": "*"
-			}
-		},
-		"node_modules/@types/estree": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-		},
-		"node_modules/@types/json-schema": {
-			"version": "7.0.15",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-			"dev": true
-		},
-		"node_modules/@types/node": {
-			"version": "22.0.2",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.2.tgz",
-			"integrity": "sha512-yPL6DyFwY5PiMVEwymNeqUTKsDczQBJ/5T7W/46RwLU/VH+AA8aT5TZkvBviLKLbbm0hlfftEkGrNzfRk/fofQ==",
-			"devOptional": true,
-			"license": "MIT",
-			"dependencies": {
-				"undici-types": "~6.11.1"
-			}
-		},
-		"node_modules/@types/pug": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
-			"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
-			"dev": true
-		},
-		"node_modules/@types/redis": {
-			"version": "4.0.10",
-			"resolved": "https://registry.npmjs.org/@types/redis/-/redis-4.0.10.tgz",
-			"integrity": "sha512-7CLy5b5fzzEGVcOccgZjoMlNpPhX6d10jEeRy2YWbFuaMNrSPc9ExRsMYsd+0VxvEHucf4EWx24Ja7cSU1FGUA==",
-			"license": "MIT",
-			"dependencies": {
-				"redis": "*"
-			}
-		},
-		"node_modules/@types/resolve": {
-			"version": "1.20.2",
-			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
-			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
-		},
-		"node_modules/@types/steamapi": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/@types/steamapi/-/steamapi-2.2.5.tgz",
-			"integrity": "sha512-cpxm1Fn9B8ZcjNQ79ebC3/20DxaUq8zNF520rctPtX71/PxHT49oLlk2coPsg132zGsTihcOU0umP8qrUrccmA==",
-			"license": "MIT"
-		},
-		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-ILv1vDA8M9ah1vzYpnOs4UOLRdB63Ki/rsxedVikjMLq68hFfpsDR25bdMZ4RyUkzLJwOhcg3Jujm/C1nupXKA==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "8.0.0-alpha.39",
-				"@typescript-eslint/type-utils": "8.0.0-alpha.39",
-				"@typescript-eslint/utils": "8.0.0-alpha.39",
-				"@typescript-eslint/visitor-keys": "8.0.0-alpha.39",
-				"graphemer": "^1.4.0",
-				"ignore": "^5.3.1",
-				"natural-compare": "^1.4.0",
-				"ts-api-utils": "^1.3.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
-				"eslint": "^8.57.0 || ^9.0.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/parser": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-5k+pwV91plJojHgZkWlq4/TQdOrnEaeSvt48V0m8iEwdMJqX/63BXYxy8BUOSghWcjp05s73vy9HJjovAKmHkQ==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.0.0-alpha.39",
-				"@typescript-eslint/types": "8.0.0-alpha.39",
-				"@typescript-eslint/typescript-estree": "8.0.0-alpha.39",
-				"@typescript-eslint/visitor-keys": "8.0.0-alpha.39",
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.57.0 || ^9.0.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-HCBlKQROY+JIgWolucdFMj1W3VUnnIQTdxAhxJTAj3ix2nASmvKIFgrdo5KQMrXxQj6tC4l3zva10L+s0dUIIw==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/types": "8.0.0-alpha.39",
-				"@typescript-eslint/visitor-keys": "8.0.0-alpha.39"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/type-utils": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-alO13fRU6yVeJbwl9ESI3AYhq5dQdz3Dpd0I5B4uezs2lvgYp44dZsj5hWyPz/kL7JFEsjbn+4b/CZA0OQJzjA==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/typescript-estree": "8.0.0-alpha.39",
-				"@typescript-eslint/utils": "8.0.0-alpha.39",
-				"debug": "^4.3.4",
-				"ts-api-utils": "^1.3.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/types": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-yINN7j0/+S1VGSp0IgH52oQvUx49vkOug6xbrDA/9o+U55yCAQKSvYWvzYjNa+SZE3hXI0zwvYtMVsIAAMmKIQ==",
-			"dev": true,
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-S8gREuP8r8PCxGegeojeXntx0P50ul9YH7c7JYpbLIIsEPNr5f7UHlm+I1NUbL04CBin4kvZ60TG4eWr/KKN9A==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/types": "8.0.0-alpha.39",
-				"@typescript-eslint/visitor-keys": "8.0.0-alpha.39",
-				"debug": "^4.3.4",
-				"globby": "^11.1.0",
-				"is-glob": "^4.0.3",
-				"minimatch": "^9.0.4",
-				"semver": "^7.6.0",
-				"ts-api-utils": "^1.3.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-			"version": "9.0.5",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=16 || 14 >=14.17"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/@typescript-eslint/utils": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-Nr2PrlfNhrNQTlFHlD7XJdTGw/Vt8qY44irk6bfjn9LxGdSG5e4c1R2UN6kvGMhhx20DBPbM7q3Z3r+huzmL1w==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.4.0",
-				"@typescript-eslint/scope-manager": "8.0.0-alpha.39",
-				"@typescript-eslint/types": "8.0.0-alpha.39",
-				"@typescript-eslint/typescript-estree": "8.0.0-alpha.39"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.57.0 || ^9.0.0"
-			}
-		},
-		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-DVJ0UdhucZy+/1GlIy7FX2+CFhCeNAi4VwaEAe7u2UDenQr9/kGqvzx00UlpWibmEVDw4KsPOI7Aqa1+2Vqfmw==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/types": "8.0.0-alpha.39",
-				"eslint-visitor-keys": "^3.4.3"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-			"version": "3.4.3",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-			"dev": true,
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/acorn": {
-			"version": "8.12.0",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
-			"integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
-			"bin": {
-				"acorn": "bin/acorn"
-			},
-			"engines": {
-				"node": ">=0.4.0"
-			}
-		},
-		"node_modules/acorn-jsx": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-			"dev": true,
-			"peerDependencies": {
-				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-			}
-		},
-		"node_modules/acorn-typescript": {
-			"version": "1.4.13",
-			"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
-			"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
-			"peerDependencies": {
-				"acorn": ">=8.9.0"
-			}
-		},
-		"node_modules/ajv": {
-			"version": "6.12.6",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
-				"fast-json-stable-stringify": "^2.0.0",
-				"json-schema-traverse": "^0.4.1",
-				"uri-js": "^4.2.2"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/epoberezkin"
-			}
-		},
-		"node_modules/ansi-regex": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/ansi-styles": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-			"dependencies": {
-				"color-convert": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
-			}
-		},
-		"node_modules/anymatch": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"devOptional": true,
-			"dependencies": {
-				"normalize-path": "^3.0.0",
-				"picomatch": "^2.0.4"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/argparse": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-			"dev": true
-		},
-		"node_modules/aria-query": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dependencies": {
-				"dequal": "^2.0.3"
-			}
-		},
-		"node_modules/array-union": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/asn1": {
-			"version": "0.2.6",
-			"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-			"integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-			"license": "MIT",
-			"dependencies": {
-				"safer-buffer": "~2.1.0"
-			}
-		},
-		"node_modules/assert-plus": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-			"integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.8"
-			}
-		},
-		"node_modules/asynckit": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-			"license": "MIT"
-		},
-		"node_modules/autoprefixer": {
-			"version": "10.4.19",
-			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-			"integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/postcss/"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/autoprefixer"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"dependencies": {
-				"browserslist": "^4.23.0",
-				"caniuse-lite": "^1.0.30001599",
-				"fraction.js": "^4.3.7",
-				"normalize-range": "^0.1.2",
-				"picocolors": "^1.0.0",
-				"postcss-value-parser": "^4.2.0"
-			},
-			"bin": {
-				"autoprefixer": "bin/autoprefixer"
-			},
-			"engines": {
-				"node": "^10 || ^12 || >=14"
-			},
-			"peerDependencies": {
-				"postcss": "^8.1.0"
-			}
-		},
-		"node_modules/aws-sign2": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-			"integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/aws4": {
-			"version": "1.13.0",
-			"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz",
-			"integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==",
-			"license": "MIT"
-		},
-		"node_modules/axobject-query": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
-			"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-			"dependencies": {
-				"dequal": "^2.0.3"
-			}
-		},
-		"node_modules/balanced-match": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-		},
-		"node_modules/bcrypt-pbkdf": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-			"integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-			"license": "BSD-3-Clause",
-			"dependencies": {
-				"tweetnacl": "^0.14.3"
-			}
-		},
-		"node_modules/binary-extensions": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-			"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-			"devOptional": true,
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/boolbase": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-			"dev": true,
-			"peer": true
-		},
-		"node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
-		"node_modules/braces": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-			"devOptional": true,
-			"dependencies": {
-				"fill-range": "^7.1.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/browserslist": {
-			"version": "4.23.2",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-			"integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/browserslist"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/browserslist"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"dependencies": {
-				"caniuse-lite": "^1.0.30001640",
-				"electron-to-chromium": "^1.4.820",
-				"node-releases": "^2.0.14",
-				"update-browserslist-db": "^1.1.0"
-			},
-			"bin": {
-				"browserslist": "cli.js"
-			},
-			"engines": {
-				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-			}
-		},
-		"node_modules/buffer-crc32": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
-			"integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.0.0"
-			}
-		},
-		"node_modules/builtin-modules": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-			"integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/callsites": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/caniuse-lite": {
-			"version": "1.0.30001641",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz",
-			"integrity": "sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/browserslist"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			]
-		},
-		"node_modules/caseless": {
-			"version": "0.12.0",
-			"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-			"integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-			"license": "Apache-2.0"
-		},
-		"node_modules/chalk": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^4.1.0",
-				"supports-color": "^7.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
-		"node_modules/chokidar": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-			"devOptional": true,
-			"dependencies": {
-				"anymatch": "~3.1.2",
-				"braces": "~3.0.2",
-				"glob-parent": "~5.1.2",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.6.0"
-			},
-			"engines": {
-				"node": ">= 8.10.0"
-			},
-			"funding": {
-				"url": "https://paulmillr.com/funding/"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
-			}
-		},
-		"node_modules/chokidar/node_modules/glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"devOptional": true,
-			"dependencies": {
-				"is-glob": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/cluster-key-slot": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
-			"integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/color-convert": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-			"dependencies": {
-				"color-name": "~1.1.4"
-			},
-			"engines": {
-				"node": ">=7.0.0"
-			}
-		},
-		"node_modules/color-name": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-		},
-		"node_modules/combined-stream": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-			"license": "MIT",
-			"dependencies": {
-				"delayed-stream": "~1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.8"
-			}
-		},
-		"node_modules/commander": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">= 10"
-			}
-		},
-		"node_modules/commondir": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
-		},
-		"node_modules/concat-map": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
-		},
-		"node_modules/cookie": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
-		"node_modules/core-util-is": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-			"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-			"license": "MIT"
-		},
-		"node_modules/cross-spawn": {
-			"version": "7.0.3",
-			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-			"dependencies": {
-				"path-key": "^3.1.0",
-				"shebang-command": "^2.0.0",
-				"which": "^2.0.1"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/css-select": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-			"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"boolbase": "^1.0.0",
-				"css-what": "^6.1.0",
-				"domhandler": "^5.0.2",
-				"domutils": "^3.0.1",
-				"nth-check": "^2.0.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/fb55"
-			}
-		},
-		"node_modules/css-tree": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"mdn-data": "2.0.30",
-				"source-map-js": "^1.0.1"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-			}
-		},
-		"node_modules/css-what": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-			"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">= 6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/fb55"
-			}
-		},
-		"node_modules/cssesc": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
-			"bin": {
-				"cssesc": "bin/cssesc"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/csso": {
-			"version": "5.0.5",
-			"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
-			"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"css-tree": "~2.2.0"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-				"npm": ">=7.0.0"
-			}
-		},
-		"node_modules/csso/node_modules/css-tree": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
-			"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"mdn-data": "2.0.28",
-				"source-map-js": "^1.0.1"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-				"npm": ">=7.0.0"
-			}
-		},
-		"node_modules/csso/node_modules/mdn-data": {
-			"version": "2.0.28",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
-			"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
-			"dev": true,
-			"peer": true
-		},
-		"node_modules/dashdash": {
-			"version": "1.14.1",
-			"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-			"integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-			"license": "MIT",
-			"dependencies": {
-				"assert-plus": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
-		"node_modules/data-uri-to-buffer": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 12"
-			}
-		},
-		"node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/deep-is": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-			"dev": true
-		},
-		"node_modules/deepmerge": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/delayed-stream": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.4.0"
-			}
-		},
-		"node_modules/denque": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
-			"integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
-		"node_modules/dequal": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/detect-indent": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
-			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/devalue": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
-		},
-		"node_modules/dir-glob": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-			"dev": true,
-			"dependencies": {
-				"path-type": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/dom-serializer": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-			"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"domelementtype": "^2.3.0",
-				"domhandler": "^5.0.2",
-				"entities": "^4.2.0"
-			},
-			"funding": {
-				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-			}
-		},
-		"node_modules/domelementtype": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/fb55"
-				}
-			],
-			"peer": true
-		},
-		"node_modules/domhandler": {
-			"version": "5.0.3",
-			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-			"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"domelementtype": "^2.3.0"
-			},
-			"engines": {
-				"node": ">= 4"
-			},
-			"funding": {
-				"url": "https://github.com/fb55/domhandler?sponsor=1"
-			}
-		},
-		"node_modules/domutils": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-			"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"dom-serializer": "^2.0.0",
-				"domelementtype": "^2.3.0",
-				"domhandler": "^5.0.3"
-			},
-			"funding": {
-				"url": "https://github.com/fb55/domutils?sponsor=1"
-			}
-		},
-		"node_modules/dotenv": {
-			"version": "16.4.5",
-			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
-			"integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
-			"license": "BSD-2-Clause",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://dotenvx.com"
-			}
-		},
-		"node_modules/eastasianwidth": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-		},
-		"node_modules/ecc-jsbn": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-			"integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-			"license": "MIT",
-			"dependencies": {
-				"jsbn": "~0.1.0",
-				"safer-buffer": "^2.1.0"
-			}
-		},
-		"node_modules/electron-to-chromium": {
-			"version": "1.4.827",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.827.tgz",
-			"integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==",
-			"dev": true
-		},
-		"node_modules/emoji-regex": {
-			"version": "9.2.2",
-			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-		},
-		"node_modules/entities": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">=0.12"
-			},
-			"funding": {
-				"url": "https://github.com/fb55/entities?sponsor=1"
-			}
-		},
-		"node_modules/es6-promise": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
-			"integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
-			"dev": true
-		},
-		"node_modules/esbuild": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-			"hasInstallScript": true,
-			"bin": {
-				"esbuild": "bin/esbuild"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.21.5",
-				"@esbuild/android-arm": "0.21.5",
-				"@esbuild/android-arm64": "0.21.5",
-				"@esbuild/android-x64": "0.21.5",
-				"@esbuild/darwin-arm64": "0.21.5",
-				"@esbuild/darwin-x64": "0.21.5",
-				"@esbuild/freebsd-arm64": "0.21.5",
-				"@esbuild/freebsd-x64": "0.21.5",
-				"@esbuild/linux-arm": "0.21.5",
-				"@esbuild/linux-arm64": "0.21.5",
-				"@esbuild/linux-ia32": "0.21.5",
-				"@esbuild/linux-loong64": "0.21.5",
-				"@esbuild/linux-mips64el": "0.21.5",
-				"@esbuild/linux-ppc64": "0.21.5",
-				"@esbuild/linux-riscv64": "0.21.5",
-				"@esbuild/linux-s390x": "0.21.5",
-				"@esbuild/linux-x64": "0.21.5",
-				"@esbuild/netbsd-x64": "0.21.5",
-				"@esbuild/openbsd-x64": "0.21.5",
-				"@esbuild/sunos-x64": "0.21.5",
-				"@esbuild/win32-arm64": "0.21.5",
-				"@esbuild/win32-ia32": "0.21.5",
-				"@esbuild/win32-x64": "0.21.5"
-			}
-		},
-		"node_modules/escalade": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-			"integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/escape-string-regexp": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/eslint": {
-			"version": "9.6.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.6.0.tgz",
-			"integrity": "sha512-ElQkdLMEEqQNM9Njff+2Y4q2afHk7JpkPvrd7Xh7xefwgQynqPxwf55J7di9+MEibWUGdNjFF9ITG9Pck5M84w==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.2.0",
-				"@eslint-community/regexpp": "^4.6.1",
-				"@eslint/config-array": "^0.17.0",
-				"@eslint/eslintrc": "^3.1.0",
-				"@eslint/js": "9.6.0",
-				"@humanwhocodes/module-importer": "^1.0.1",
-				"@humanwhocodes/retry": "^0.3.0",
-				"@nodelib/fs.walk": "^1.2.8",
-				"ajv": "^6.12.4",
-				"chalk": "^4.0.0",
-				"cross-spawn": "^7.0.2",
-				"debug": "^4.3.2",
-				"escape-string-regexp": "^4.0.0",
-				"eslint-scope": "^8.0.1",
-				"eslint-visitor-keys": "^4.0.0",
-				"espree": "^10.1.0",
-				"esquery": "^1.5.0",
-				"esutils": "^2.0.2",
-				"fast-deep-equal": "^3.1.3",
-				"file-entry-cache": "^8.0.0",
-				"find-up": "^5.0.0",
-				"glob-parent": "^6.0.2",
-				"ignore": "^5.2.0",
-				"imurmurhash": "^0.1.4",
-				"is-glob": "^4.0.0",
-				"is-path-inside": "^3.0.3",
-				"json-stable-stringify-without-jsonify": "^1.0.1",
-				"levn": "^0.4.1",
-				"lodash.merge": "^4.6.2",
-				"minimatch": "^3.1.2",
-				"natural-compare": "^1.4.0",
-				"optionator": "^0.9.3",
-				"strip-ansi": "^6.0.1",
-				"text-table": "^0.2.0"
-			},
-			"bin": {
-				"eslint": "bin/eslint.js"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://eslint.org/donate"
-			}
-		},
-		"node_modules/eslint-compat-utils": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
-			"integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^7.5.4"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"peerDependencies": {
-				"eslint": ">=6.0.0"
-			}
-		},
-		"node_modules/eslint-config-prettier": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
-			"integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
-			"dev": true,
-			"bin": {
-				"eslint-config-prettier": "bin/cli.js"
-			},
-			"peerDependencies": {
-				"eslint": ">=7.0.0"
-			}
-		},
-		"node_modules/eslint-plugin-svelte": {
-			"version": "2.41.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.41.0.tgz",
-			"integrity": "sha512-gjU9Q/psxbWG1VNwYbEb0Q6U4W5PBGaDpYmO2zlQ+zlAMVS3Qt0luAK0ACi/tMSwRK6JENiySvMyJbO0YWmXSg==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.4.0",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"eslint-compat-utils": "^0.5.1",
-				"esutils": "^2.0.3",
-				"known-css-properties": "^0.34.0",
-				"postcss": "^8.4.38",
-				"postcss-load-config": "^3.1.4",
-				"postcss-safe-parser": "^6.0.0",
-				"postcss-selector-parser": "^6.1.0",
-				"semver": "^7.6.2",
-				"svelte-eslint-parser": "^0.39.2"
-			},
-			"engines": {
-				"node": "^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ota-meshi"
-			},
-			"peerDependencies": {
-				"eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
-				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.155"
-			},
-			"peerDependenciesMeta": {
-				"svelte": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/eslint-scope": {
-			"version": "8.0.1",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.1.tgz",
-			"integrity": "sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==",
-			"dev": true,
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint-visitor-keys": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
-			"integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==",
-			"dev": true,
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/esm-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
-		},
-		"node_modules/espree": {
-			"version": "10.1.0",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
-			"integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==",
-			"dev": true,
-			"dependencies": {
-				"acorn": "^8.12.0",
-				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^4.0.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/esprima": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-			"license": "BSD-2-Clause",
-			"bin": {
-				"esparse": "bin/esparse.js",
-				"esvalidate": "bin/esvalidate.js"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/esquery": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-			"integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
-			"dev": true,
-			"dependencies": {
-				"estraverse": "^5.1.0"
-			},
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
-		"node_modules/esrap": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
-			"integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@types/estree": "^1.0.1"
-			}
-		},
-		"node_modules/esrecurse": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-			"dev": true,
-			"dependencies": {
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/estraverse": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/estree-walker": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-		},
-		"node_modules/esutils": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/extend": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-			"license": "MIT"
-		},
-		"node_modules/extend-shallow": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-			"license": "MIT",
-			"dependencies": {
-				"is-extendable": "^0.1.0"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/extsprintf": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-			"integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
-			"engines": [
-				"node >=0.6.0"
-			],
-			"license": "MIT"
-		},
-		"node_modules/fast-deep-equal": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-		},
-		"node_modules/fast-glob": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-			"dev": true,
-			"dependencies": {
-				"@nodelib/fs.stat": "^2.0.2",
-				"@nodelib/fs.walk": "^1.2.3",
-				"glob-parent": "^5.1.2",
-				"merge2": "^1.3.0",
-				"micromatch": "^4.0.4"
-			},
-			"engines": {
-				"node": ">=8.6.0"
-			}
-		},
-		"node_modules/fast-glob/node_modules/glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
-			"dependencies": {
-				"is-glob": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/fast-json-stable-stringify": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
-		},
-		"node_modules/fast-levenshtein": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-			"dev": true
-		},
-		"node_modules/fastq": {
-			"version": "1.17.1",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-			"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-			"dev": true,
-			"dependencies": {
-				"reusify": "^1.0.4"
-			}
-		},
-		"node_modules/fetch-blob": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-			"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/jimmywarting"
-				},
-				{
-					"type": "paypal",
-					"url": "https://paypal.me/jimmywarting"
-				}
-			],
-			"license": "MIT",
-			"dependencies": {
-				"node-domexception": "^1.0.0",
-				"web-streams-polyfill": "^3.0.3"
-			},
-			"engines": {
-				"node": "^12.20 || >= 14.13"
-			}
-		},
-		"node_modules/file-entry-cache": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
-			"integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
-			"dev": true,
-			"dependencies": {
-				"flat-cache": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=16.0.0"
-			}
-		},
-		"node_modules/fill-range": {
-			"version": "7.1.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-			"devOptional": true,
-			"dependencies": {
-				"to-regex-range": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/find-up": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-			"dev": true,
-			"dependencies": {
-				"locate-path": "^6.0.0",
-				"path-exists": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/flat-cache": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
-			"integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-			"dev": true,
-			"dependencies": {
-				"flatted": "^3.2.9",
-				"keyv": "^4.5.4"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
-		"node_modules/flatted": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-			"dev": true
-		},
-		"node_modules/foreground-child": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-			"integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
-			"dependencies": {
-				"cross-spawn": "^7.0.0",
-				"signal-exit": "^4.0.1"
-			},
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/forever-agent": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-			"integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/form-data": {
-			"version": "2.3.3",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-			"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-			"license": "MIT",
-			"dependencies": {
-				"asynckit": "^0.4.0",
-				"combined-stream": "^1.0.6",
-				"mime-types": "^2.1.12"
-			},
-			"engines": {
-				"node": ">= 0.12"
-			}
-		},
-		"node_modules/formdata-polyfill": {
-			"version": "4.0.10",
-			"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-			"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-			"license": "MIT",
-			"dependencies": {
-				"fetch-blob": "^3.1.2"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/fraction.js": {
-			"version": "4.3.7",
-			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-			"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-			"dev": true,
-			"engines": {
-				"node": "*"
-			},
-			"funding": {
-				"type": "patreon",
-				"url": "https://github.com/sponsors/rawify"
-			}
-		},
-		"node_modules/fs.realpath": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
-		},
-		"node_modules/fsevents": {
-			"version": "2.3.3",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"hasInstallScript": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-			}
-		},
-		"node_modules/function-bind": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/generic-pool": {
-			"version": "3.9.0",
-			"resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
-			"integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 4"
-			}
-		},
-		"node_modules/getpass": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-			"integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-			"license": "MIT",
-			"dependencies": {
-				"assert-plus": "^1.0.0"
-			}
-		},
-		"node_modules/giantbombing-api": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/giantbombing-api/-/giantbombing-api-1.0.4.tgz",
-			"integrity": "sha512-Ioe+gbdmQ0s2ztlCxfF91ruk2g/UN+36Ae7qCdIvE8zUWRGfWZ/z/xztqX1r087ZSVCRVr3lrERuhFEYsG4CdA==",
-			"license": "MIT",
-			"dependencies": {
-				"request": "^2.69.0"
-			}
-		},
-		"node_modules/glob": {
-			"version": "7.2.3",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"deprecated": "Glob versions prior to v9 are no longer supported",
-			"dev": true,
-			"dependencies": {
-				"fs.realpath": "^1.0.0",
-				"inflight": "^1.0.4",
-				"inherits": "2",
-				"minimatch": "^3.1.1",
-				"once": "^1.3.0",
-				"path-is-absolute": "^1.0.0"
-			},
-			"engines": {
-				"node": "*"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/glob-parent": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-			"dev": true,
-			"dependencies": {
-				"is-glob": "^4.0.3"
-			},
-			"engines": {
-				"node": ">=10.13.0"
-			}
-		},
-		"node_modules/globals": {
-			"version": "15.7.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-15.7.0.tgz",
-			"integrity": "sha512-ivatRXWwKC6ImcdKO7dOwXuXR5XFrdwo45qFwD7D0qOkEPzzJdLXC3BHceBdyrPOD3p1suPaWi4Y4NMm2D++AQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/globalyzer": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
-		},
-		"node_modules/globby": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-			"dev": true,
-			"dependencies": {
-				"array-union": "^2.1.0",
-				"dir-glob": "^3.0.1",
-				"fast-glob": "^3.2.9",
-				"ignore": "^5.2.0",
-				"merge2": "^1.4.1",
-				"slash": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/globrex": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
-		},
-		"node_modules/graceful-fs": {
-			"version": "4.2.11",
-			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-			"dev": true
-		},
-		"node_modules/graphemer": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-			"dev": true
-		},
-		"node_modules/gray-matter": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
-			"integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
-			"license": "MIT",
-			"dependencies": {
-				"js-yaml": "^3.13.1",
-				"kind-of": "^6.0.2",
-				"section-matter": "^1.0.0",
-				"strip-bom-string": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=6.0"
-			}
-		},
-		"node_modules/gray-matter/node_modules/argparse": {
-			"version": "1.0.10",
-			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-			"license": "MIT",
-			"dependencies": {
-				"sprintf-js": "~1.0.2"
-			}
-		},
-		"node_modules/gray-matter/node_modules/js-yaml": {
-			"version": "3.14.1",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-			"license": "MIT",
-			"dependencies": {
-				"argparse": "^1.0.7",
-				"esprima": "^4.0.0"
-			},
-			"bin": {
-				"js-yaml": "bin/js-yaml.js"
-			}
-		},
-		"node_modules/har-schema": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-			"integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-			"license": "ISC",
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/har-validator": {
-			"version": "5.1.5",
-			"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-			"integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-			"deprecated": "this library is no longer supported",
-			"license": "MIT",
-			"dependencies": {
-				"ajv": "^6.12.3",
-				"har-schema": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/has-flag": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/hasown": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-			"dependencies": {
-				"function-bind": "^1.1.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			}
-		},
-		"node_modules/http-signature": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-			"integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
-			"license": "MIT",
-			"dependencies": {
-				"assert-plus": "^1.0.0",
-				"jsprim": "^1.2.2",
-				"sshpk": "^1.7.0"
-			},
-			"engines": {
-				"node": ">=0.8",
-				"npm": ">=1.3.7"
-			}
-		},
-		"node_modules/ignore": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-			"integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
-			"dev": true,
-			"engines": {
-				"node": ">= 4"
-			}
-		},
-		"node_modules/immutable": {
-			"version": "4.3.6",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
-			"integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
-			"devOptional": true
-		},
-		"node_modules/import-fresh": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-			"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-			"dev": true,
-			"dependencies": {
-				"parent-module": "^1.0.0",
-				"resolve-from": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/import-meta-resolve": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
-			"integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==",
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/wooorm"
-			}
-		},
-		"node_modules/imurmurhash": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.8.19"
-			}
-		},
-		"node_modules/inflight": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-			"dev": true,
-			"dependencies": {
-				"once": "^1.3.0",
-				"wrappy": "1"
-			}
-		},
-		"node_modules/inherits": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
-		},
-		"node_modules/ioredis": {
-			"version": "5.4.1",
-			"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.4.1.tgz",
-			"integrity": "sha512-2YZsvl7jopIa1gaePkeMtd9rAcSjOOjPtpcLlOeusyO+XH2SK5ZcT+UCrElPP+WVIInh2TzeI4XW9ENaSLVVHA==",
-			"license": "MIT",
-			"dependencies": {
-				"@ioredis/commands": "^1.1.1",
-				"cluster-key-slot": "^1.1.0",
-				"debug": "^4.3.4",
-				"denque": "^2.1.0",
-				"lodash.defaults": "^4.2.0",
-				"lodash.isarguments": "^3.1.0",
-				"redis-errors": "^1.2.0",
-				"redis-parser": "^3.0.0",
-				"standard-as-callback": "^2.1.0"
-			},
-			"engines": {
-				"node": ">=12.22.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/ioredis"
-			}
-		},
-		"node_modules/is-binary-path": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"devOptional": true,
-			"dependencies": {
-				"binary-extensions": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-builtin-module": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
-			"integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
-			"dependencies": {
-				"builtin-modules": "^3.3.0"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/is-core-module": {
-			"version": "2.14.0",
-			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
-			"integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
-			"dependencies": {
-				"hasown": "^2.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-extendable": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-			"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-extglob": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"devOptional": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-fullwidth-code-point": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-glob": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"devOptional": true,
-			"dependencies": {
-				"is-extglob": "^2.1.1"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-module": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
-		},
-		"node_modules/is-number": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"devOptional": true,
-			"engines": {
-				"node": ">=0.12.0"
-			}
-		},
-		"node_modules/is-path-inside": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-reference": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dependencies": {
-				"@types/estree": "*"
-			}
-		},
-		"node_modules/is-typedarray": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-			"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-			"license": "MIT"
-		},
-		"node_modules/isexe": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-		},
-		"node_modules/isomorphic-unfetch": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
-			"integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==",
-			"license": "MIT",
-			"dependencies": {
-				"node-fetch": "^2.6.1",
-				"unfetch": "^4.2.0"
-			}
-		},
-		"node_modules/isomorphic-unfetch/node_modules/node-fetch": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-			"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-			"license": "MIT",
-			"dependencies": {
-				"whatwg-url": "^5.0.0"
-			},
-			"engines": {
-				"node": "4.x || >=6.0.0"
-			},
-			"peerDependencies": {
-				"encoding": "^0.1.0"
-			},
-			"peerDependenciesMeta": {
-				"encoding": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/isstream": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-			"integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-			"license": "MIT"
-		},
-		"node_modules/jackspeak": {
-			"version": "3.4.3",
-			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-			"dependencies": {
-				"@isaacs/cliui": "^8.0.2"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			},
-			"optionalDependencies": {
-				"@pkgjs/parseargs": "^0.11.0"
-			}
-		},
-		"node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-			"dev": true,
-			"dependencies": {
-				"argparse": "^2.0.1"
-			},
-			"bin": {
-				"js-yaml": "bin/js-yaml.js"
-			}
-		},
-		"node_modules/jsbn": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-			"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-			"license": "MIT"
-		},
-		"node_modules/json-buffer": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-			"dev": true
-		},
-		"node_modules/json-schema": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-			"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-			"license": "(AFL-2.1 OR BSD-3-Clause)"
-		},
-		"node_modules/json-schema-traverse": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-		},
-		"node_modules/json-stable-stringify-without-jsonify": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-			"dev": true
-		},
-		"node_modules/json-stringify-safe": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-			"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-			"license": "ISC"
-		},
-		"node_modules/jsprim": {
-			"version": "1.4.2",
-			"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-			"integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
-			"license": "MIT",
-			"dependencies": {
-				"assert-plus": "1.0.0",
-				"extsprintf": "1.3.0",
-				"json-schema": "0.4.0",
-				"verror": "1.10.0"
-			},
-			"engines": {
-				"node": ">=0.6.0"
-			}
-		},
-		"node_modules/keyv": {
-			"version": "4.5.4",
-			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-			"dev": true,
-			"dependencies": {
-				"json-buffer": "3.0.1"
-			}
-		},
-		"node_modules/kind-of": {
-			"version": "6.0.3",
-			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-			"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/kleur": {
-			"version": "4.1.5",
-			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/known-css-properties": {
-			"version": "0.34.0",
-			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
-			"integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
-			"dev": true
-		},
-		"node_modules/levn": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-			"dev": true,
-			"dependencies": {
-				"prelude-ls": "^1.2.1",
-				"type-check": "~0.4.0"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/lilconfig": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/locate-character": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-		},
-		"node_modules/locate-path": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-			"dev": true,
-			"dependencies": {
-				"p-locate": "^5.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/lodash.defaults": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-			"integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
-			"license": "MIT"
-		},
-		"node_modules/lodash.isarguments": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-			"integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==",
-			"license": "MIT"
-		},
-		"node_modules/lodash.merge": {
-			"version": "4.6.2",
-			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-			"dev": true
-		},
-		"node_modules/lru-cache": {
-			"version": "10.4.3",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-			"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
-		},
-		"node_modules/magic-string": {
-			"version": "0.30.17",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-			"license": "MIT",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.5.0"
-			}
-		},
-		"node_modules/marked": {
-			"version": "15.0.12",
-			"resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
-			"integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
-			"license": "MIT",
-			"bin": {
-				"marked": "bin/marked.js"
-			},
-			"engines": {
-				"node": ">= 18"
-			}
-		},
-		"node_modules/mdn-data": {
-			"version": "2.0.30",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"dev": true,
-			"peer": true
-		},
-		"node_modules/merge2": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/micromatch": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-			"integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-			"dev": true,
-			"dependencies": {
-				"braces": "^3.0.3",
-				"picomatch": "^2.3.1"
-			},
-			"engines": {
-				"node": ">=8.6"
-			}
-		},
-		"node_modules/mime-db": {
-			"version": "1.52.0",
-			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
-		"node_modules/mime-types": {
-			"version": "2.1.35",
-			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-			"license": "MIT",
-			"dependencies": {
-				"mime-db": "1.52.0"
-			},
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
-		"node_modules/min-indent": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/minimist": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/minipass": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-			"engines": {
-				"node": ">=16 || 14 >=14.17"
-			}
-		},
-		"node_modules/mkdirp": {
-			"version": "0.5.6",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-			"dev": true,
-			"dependencies": {
-				"minimist": "^1.2.6"
-			},
-			"bin": {
-				"mkdirp": "bin/cmd.js"
-			}
-		},
-		"node_modules/mri": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
-			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/mrmime": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
-			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"license": "MIT"
-		},
-		"node_modules/nanoid": {
-			"version": "3.3.7",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"bin": {
-				"nanoid": "bin/nanoid.cjs"
-			},
-			"engines": {
-				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-			}
-		},
-		"node_modules/natural-compare": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-			"dev": true
-		},
-		"node_modules/node-domexception": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-			"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/jimmywarting"
-				},
-				{
-					"type": "github",
-					"url": "https://paypal.me/jimmywarting"
-				}
-			],
-			"license": "MIT",
-			"engines": {
-				"node": ">=10.5.0"
-			}
-		},
-		"node_modules/node-fetch": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-			"license": "MIT",
-			"dependencies": {
-				"data-uri-to-buffer": "^4.0.0",
-				"fetch-blob": "^3.1.4",
-				"formdata-polyfill": "^4.0.10"
-			},
-			"engines": {
-				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/node-fetch"
-			}
-		},
-		"node_modules/node-itunes-search": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/node-itunes-search/-/node-itunes-search-1.2.3.tgz",
-			"integrity": "sha512-CctU1Fx6FB1E6IDIvJkt1wsahxTwhIZ9ppv+5dodjbftWXZMLvVnr84q8tnCAZf1WQwABKviD+zkR3Bq4W8gpw==",
-			"license": "MIT",
-			"dependencies": {
-				"phin": "^2.9.3"
-			}
-		},
-		"node_modules/node-releases": {
-			"version": "2.0.14",
-			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-			"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-			"dev": true
-		},
-		"node_modules/normalize-path": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"devOptional": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/normalize-range": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-			"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/nth-check": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"boolbase": "^1.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/fb55/nth-check?sponsor=1"
-			}
-		},
-		"node_modules/oauth-sign": {
-			"version": "0.9.0",
-			"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-			"integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/once": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
-			"dependencies": {
-				"wrappy": "1"
-			}
-		},
-		"node_modules/optionator": {
-			"version": "0.9.4",
-			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-			"dev": true,
-			"dependencies": {
-				"deep-is": "^0.1.3",
-				"fast-levenshtein": "^2.0.6",
-				"levn": "^0.4.1",
-				"prelude-ls": "^1.2.1",
-				"type-check": "^0.4.0",
-				"word-wrap": "^1.2.5"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/p-limit": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-			"dev": true,
-			"dependencies": {
-				"yocto-queue": "^0.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/p-locate": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-			"dev": true,
-			"dependencies": {
-				"p-limit": "^3.0.2"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/package-json-from-dist": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-			"integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
-		},
-		"node_modules/parent-module": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-			"dev": true,
-			"dependencies": {
-				"callsites": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/path-exists": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/path-is-absolute": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/path-key": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/path-parse": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-		},
-		"node_modules/path-scurry": {
-			"version": "1.11.1",
-			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-			"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-			"dependencies": {
-				"lru-cache": "^10.2.0",
-				"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-			},
-			"engines": {
-				"node": ">=16 || 14 >=14.18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/path-type": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/performance-now": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-			"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-			"license": "MIT"
-		},
-		"node_modules/phin": {
-			"version": "2.9.3",
-			"resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
-			"integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==",
-			"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-			"license": "MIT"
-		},
-		"node_modules/picocolors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
-		},
-		"node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"engines": {
-				"node": ">=8.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
-		"node_modules/postcss": {
-			"version": "8.4.39",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-			"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/postcss/"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/postcss"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"dependencies": {
-				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.1",
-				"source-map-js": "^1.2.0"
-			},
-			"engines": {
-				"node": "^10 || ^12 || >=14"
-			}
-		},
-		"node_modules/postcss-load-config": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
-			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-			"dev": true,
-			"dependencies": {
-				"lilconfig": "^2.0.5",
-				"yaml": "^1.10.2"
-			},
-			"engines": {
-				"node": ">= 10"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
-			},
-			"peerDependencies": {
-				"postcss": ">=8.0.9",
-				"ts-node": ">=9.0.0"
-			},
-			"peerDependenciesMeta": {
-				"postcss": {
-					"optional": true
-				},
-				"ts-node": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/postcss-safe-parser": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=12.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
-			},
-			"peerDependencies": {
-				"postcss": "^8.3.3"
-			}
-		},
-		"node_modules/postcss-scss": {
-			"version": "4.0.9",
-			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
-			"integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/postcss/"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"engines": {
-				"node": ">=12.0"
-			},
-			"peerDependencies": {
-				"postcss": "^8.4.29"
-			}
-		},
-		"node_modules/postcss-selector-parser": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-			"integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
-			"dev": true,
-			"dependencies": {
-				"cssesc": "^3.0.0",
-				"util-deprecate": "^1.0.2"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/postcss-value-parser": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-			"dev": true
-		},
-		"node_modules/prelude-ls": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/prettier": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
-			"integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
-			"dev": true,
-			"bin": {
-				"prettier": "bin/prettier.cjs"
-			},
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/prettier/prettier?sponsor=1"
-			}
-		},
-		"node_modules/prettier-plugin-svelte": {
-			"version": "3.2.5",
-			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.5.tgz",
-			"integrity": "sha512-vP/M/Goc8z4iVIvrwXwbrYVjJgA0Hf8PO1G4LBh/ocSt6vUP6sLvyu9F3ABEGr+dbKyxZjEKLkeFsWy/yYl0HQ==",
-			"dev": true,
-			"peerDependencies": {
-				"prettier": "^3.0.0",
-				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
-			}
-		},
-		"node_modules/psl": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-			"license": "MIT"
-		},
-		"node_modules/psn-api": {
-			"version": "0.0.0-development",
-			"resolved": "git+ssh://git@github.com/jedmund/psn-api.git#4ec4930d4ad9080d7c8d04103956107ec26af7e1",
-			"license": "MIT",
-			"dependencies": {
-				"isomorphic-unfetch": "^3.1.0"
-			}
-		},
-		"node_modules/punycode": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/qs": {
-			"version": "6.5.3",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-			"integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-			"license": "BSD-3-Clause",
-			"engines": {
-				"node": ">=0.6"
-			}
-		},
-		"node_modules/queue-microtask": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/feross"
-				},
-				{
-					"type": "patreon",
-					"url": "https://www.patreon.com/feross"
-				},
-				{
-					"type": "consulting",
-					"url": "https://feross.org/support"
-				}
-			]
-		},
-		"node_modules/readdirp": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"devOptional": true,
-			"dependencies": {
-				"picomatch": "^2.2.1"
-			},
-			"engines": {
-				"node": ">=8.10.0"
-			}
-		},
-		"node_modules/redis": {
-			"version": "4.7.0",
-			"resolved": "https://registry.npmjs.org/redis/-/redis-4.7.0.tgz",
-			"integrity": "sha512-zvmkHEAdGMn+hMRXuMBtu4Vo5P6rHQjLoHftu+lBqq8ZTA3RCVC/WzD790bkKKiNFp7d5/9PcSD19fJyyRvOdQ==",
-			"license": "MIT",
-			"workspaces": [
-				"./packages/*"
-			],
-			"dependencies": {
-				"@redis/bloom": "1.2.0",
-				"@redis/client": "1.6.0",
-				"@redis/graph": "1.1.1",
-				"@redis/json": "1.0.7",
-				"@redis/search": "1.2.0",
-				"@redis/time-series": "1.1.0"
-			}
-		},
-		"node_modules/redis-errors": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
-			"integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/redis-parser": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
-			"integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
-			"license": "MIT",
-			"dependencies": {
-				"redis-errors": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/request": {
-			"version": "2.88.2",
-			"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-			"integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-			"deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
-			"license": "Apache-2.0",
-			"dependencies": {
-				"aws-sign2": "~0.7.0",
-				"aws4": "^1.8.0",
-				"caseless": "~0.12.0",
-				"combined-stream": "~1.0.6",
-				"extend": "~3.0.2",
-				"forever-agent": "~0.6.1",
-				"form-data": "~2.3.2",
-				"har-validator": "~5.1.3",
-				"http-signature": "~1.2.0",
-				"is-typedarray": "~1.0.0",
-				"isstream": "~0.1.2",
-				"json-stringify-safe": "~5.0.1",
-				"mime-types": "~2.1.19",
-				"oauth-sign": "~0.9.0",
-				"performance-now": "^2.1.0",
-				"qs": "~6.5.2",
-				"safe-buffer": "^5.1.2",
-				"tough-cookie": "~2.5.0",
-				"tunnel-agent": "^0.6.0",
-				"uuid": "^3.3.2"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/resolve": {
-			"version": "1.22.8",
-			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-			"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-			"dependencies": {
-				"is-core-module": "^2.13.0",
-				"path-parse": "^1.0.7",
-				"supports-preserve-symlinks-flag": "^1.0.0"
-			},
-			"bin": {
-				"resolve": "bin/resolve"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/resolve-from": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/reusify": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-			"dev": true,
-			"engines": {
-				"iojs": ">=1.0.0",
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/rimraf": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-			"deprecated": "Rimraf versions prior to v4 are no longer supported",
-			"dev": true,
-			"dependencies": {
-				"glob": "^7.1.3"
-			},
-			"bin": {
-				"rimraf": "bin.js"
-			}
-		},
-		"node_modules/rollup": {
-			"version": "4.18.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
-			"integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
-			"dependencies": {
-				"@types/estree": "1.0.5"
-			},
-			"bin": {
-				"rollup": "dist/bin/rollup"
-			},
-			"engines": {
-				"node": ">=18.0.0",
-				"npm": ">=8.0.0"
-			},
-			"optionalDependencies": {
-				"@rollup/rollup-android-arm-eabi": "4.18.0",
-				"@rollup/rollup-android-arm64": "4.18.0",
-				"@rollup/rollup-darwin-arm64": "4.18.0",
-				"@rollup/rollup-darwin-x64": "4.18.0",
-				"@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
-				"@rollup/rollup-linux-arm-musleabihf": "4.18.0",
-				"@rollup/rollup-linux-arm64-gnu": "4.18.0",
-				"@rollup/rollup-linux-arm64-musl": "4.18.0",
-				"@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
-				"@rollup/rollup-linux-riscv64-gnu": "4.18.0",
-				"@rollup/rollup-linux-s390x-gnu": "4.18.0",
-				"@rollup/rollup-linux-x64-gnu": "4.18.0",
-				"@rollup/rollup-linux-x64-musl": "4.18.0",
-				"@rollup/rollup-win32-arm64-msvc": "4.18.0",
-				"@rollup/rollup-win32-ia32-msvc": "4.18.0",
-				"@rollup/rollup-win32-x64-msvc": "4.18.0",
-				"fsevents": "~2.3.2"
-			}
-		},
-		"node_modules/run-parallel": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/feross"
-				},
-				{
-					"type": "patreon",
-					"url": "https://www.patreon.com/feross"
-				},
-				{
-					"type": "consulting",
-					"url": "https://feross.org/support"
-				}
-			],
-			"dependencies": {
-				"queue-microtask": "^1.2.2"
-			}
-		},
-		"node_modules/sade": {
-			"version": "1.8.1",
-			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
-			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-			"dependencies": {
-				"mri": "^1.1.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/safe-buffer": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/feross"
-				},
-				{
-					"type": "patreon",
-					"url": "https://www.patreon.com/feross"
-				},
-				{
-					"type": "consulting",
-					"url": "https://feross.org/support"
-				}
-			],
-			"license": "MIT"
-		},
-		"node_modules/safer-buffer": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"license": "MIT"
-		},
-		"node_modules/sander": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
-			"integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
-			"dev": true,
-			"dependencies": {
-				"es6-promise": "^3.1.2",
-				"graceful-fs": "^4.1.3",
-				"mkdirp": "^0.5.1",
-				"rimraf": "^2.5.2"
-			}
-		},
-		"node_modules/sass": {
-			"version": "1.77.8",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-			"integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
-			"devOptional": true,
-			"dependencies": {
-				"chokidar": ">=3.0.0 <4.0.0",
-				"immutable": "^4.0.0",
-				"source-map-js": ">=0.6.2 <2.0.0"
-			},
-			"bin": {
-				"sass": "sass.js"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			}
-		},
-		"node_modules/section-matter": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
-			"integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-			"license": "MIT",
-			"dependencies": {
-				"extend-shallow": "^2.0.1",
-				"kind-of": "^6.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/semver": {
-			"version": "7.6.2",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-			"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-			"dev": true,
-			"bin": {
-				"semver": "bin/semver.js"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/set-cookie-parser": {
-			"version": "2.6.0",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
-		},
-		"node_modules/shebang-command": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-			"dependencies": {
-				"shebang-regex": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/shebang-regex": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/signal-exit": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/sirv": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
-			"dependencies": {
-				"@polka/url": "^1.0.0-next.24",
-				"mrmime": "^2.0.0",
-				"totalist": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 10"
-			}
-		},
-		"node_modules/slash": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/sorcery": {
-			"version": "0.11.1",
-			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.1.tgz",
-			"integrity": "sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.14",
-				"buffer-crc32": "^1.0.0",
-				"minimist": "^1.2.0",
-				"sander": "^0.5.0"
-			},
-			"bin": {
-				"sorcery": "bin/sorcery"
-			}
-		},
-		"node_modules/source-map-js": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/sprintf-js": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-			"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-			"license": "BSD-3-Clause"
-		},
-		"node_modules/sshpk": {
-			"version": "1.18.0",
-			"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
-			"integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
-			"license": "MIT",
-			"dependencies": {
-				"asn1": "~0.2.3",
-				"assert-plus": "^1.0.0",
-				"bcrypt-pbkdf": "^1.0.0",
-				"dashdash": "^1.12.0",
-				"ecc-jsbn": "~0.1.1",
-				"getpass": "^0.1.1",
-				"jsbn": "~0.1.0",
-				"safer-buffer": "^2.0.2",
-				"tweetnacl": "~0.14.0"
-			},
-			"bin": {
-				"sshpk-conv": "bin/sshpk-conv",
-				"sshpk-sign": "bin/sshpk-sign",
-				"sshpk-verify": "bin/sshpk-verify"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/standard-as-callback": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
-			"integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
-			"license": "MIT"
-		},
-		"node_modules/steamapi": {
-			"version": "3.0.11",
-			"resolved": "https://registry.npmjs.org/steamapi/-/steamapi-3.0.11.tgz",
-			"integrity": "sha512-8thxYSeMbzUO5P6nVelTaHNcfhVcYG4N9K/5zDfuCOwlk7jIZb0Zfez5yRSqDZXDuAiu6YlhR+LuiJl3eexdkQ==",
-			"license": "MIT",
-			"dependencies": {
-				"node-fetch": "^3.3.2",
-				"steamid": "^2.0.0"
-			}
-		},
-		"node_modules/steamid": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/steamid/-/steamid-2.0.0.tgz",
-			"integrity": "sha512-+BFJMbo+IxzyfovLR37E7APkaNfmrL3S+88T7wTMRHnQ6LBhzEawPnjfWNKM9eUL/dH45j+7vhSX4WaGXoa4/Q==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.0.0"
-			}
-		},
-		"node_modules/string-width": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-			"dependencies": {
-				"eastasianwidth": "^0.2.0",
-				"emoji-regex": "^9.2.2",
-				"strip-ansi": "^7.0.1"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/string-width-cjs": {
-			"name": "string-width",
-			"version": "4.2.3",
-			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-			"dependencies": {
-				"emoji-regex": "^8.0.0",
-				"is-fullwidth-code-point": "^3.0.0",
-				"strip-ansi": "^6.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/string-width-cjs/node_modules/emoji-regex": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-		},
-		"node_modules/string-width/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
-			}
-		},
-		"node_modules/string-width/node_modules/strip-ansi": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-			"dependencies": {
-				"ansi-regex": "^6.0.1"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
-			}
-		},
-		"node_modules/strip-ansi": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dependencies": {
-				"ansi-regex": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/strip-ansi-cjs": {
-			"name": "strip-ansi",
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dependencies": {
-				"ansi-regex": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/strip-bom-string": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
-			"integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/strip-indent": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-			"dev": true,
-			"dependencies": {
-				"min-indent": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/strip-json-comments": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/supports-color": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-			"dev": true,
-			"dependencies": {
-				"has-flag": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/supports-preserve-symlinks-flag": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/svelte": {
-			"version": "5.0.0-next.169",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.169.tgz",
-			"integrity": "sha512-8VD4/adoVW5Oo4Kub+jnWnuexAtskjbLuAhy3IGMkSKcQ6RVKEQPo4j+8Xr58epow6ccA7S5zp+PsiTv4eW5Zg==",
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@types/estree": "^1.0.5",
-				"acorn": "^8.11.3",
-				"acorn-typescript": "^1.4.13",
-				"aria-query": "^5.3.0",
-				"axobject-query": "^4.0.0",
-				"esm-env": "^1.0.0",
-				"esrap": "^1.2.2",
-				"is-reference": "^3.0.2",
-				"locate-character": "^3.0.0",
-				"magic-string": "^0.30.5",
-				"zimmerframe": "^1.1.2"
-			},
-			"engines": {
-				"node": ">=18"
-			}
-		},
-		"node_modules/svelte-check": {
-			"version": "3.8.4",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.8.4.tgz",
-			"integrity": "sha512-61aHMkdinWyH8BkkTX9jPLYxYzaAAz/FK/VQqdr2FiCQQ/q04WCwDlpGbHff1GdrMYTmW8chlTFvRWL9k0A8vg==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/trace-mapping": "^0.3.17",
-				"chokidar": "^3.4.1",
-				"picocolors": "^1.0.0",
-				"sade": "^1.7.4",
-				"svelte-preprocess": "^5.1.3",
-				"typescript": "^5.0.3"
-			},
-			"bin": {
-				"svelte-check": "bin/svelte-check"
-			},
-			"peerDependencies": {
-				"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
-			}
-		},
-		"node_modules/svelte-eslint-parser": {
-			"version": "0.39.2",
-			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.39.2.tgz",
-			"integrity": "sha512-87UwLuWTtDIuzWOhOi1zBL5wYVd07M5BK1qZ57YmXJB5/UmjUNJqGy3XSOhPqjckY1dATNV9y+mx+nI0WH6HPA==",
-			"dev": true,
-			"dependencies": {
-				"eslint-scope": "^7.2.2",
-				"eslint-visitor-keys": "^3.4.3",
-				"espree": "^9.6.1",
-				"postcss": "^8.4.38",
-				"postcss-scss": "^4.0.9"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ota-meshi"
-			},
-			"peerDependencies": {
-				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.115"
-			},
-			"peerDependenciesMeta": {
-				"svelte": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
-			"version": "7.2.2",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-			"integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-			"dev": true,
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/eslint-visitor-keys": {
-			"version": "3.4.3",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-			"dev": true,
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/espree": {
-			"version": "9.6.1",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-			"integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-			"dev": true,
-			"dependencies": {
-				"acorn": "^8.9.0",
-				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^3.4.1"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-preprocess": {
-			"version": "5.1.4",
-			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
-			"integrity": "sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==",
-			"dev": true,
-			"hasInstallScript": true,
-			"dependencies": {
-				"@types/pug": "^2.0.6",
-				"detect-indent": "^6.1.0",
-				"magic-string": "^0.30.5",
-				"sorcery": "^0.11.0",
-				"strip-indent": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 16.0.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.10.2",
-				"coffeescript": "^2.5.1",
-				"less": "^3.11.3 || ^4.0.0",
-				"postcss": "^7 || ^8",
-				"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
-				"pug": "^3.0.0",
-				"sass": "^1.26.8",
-				"stylus": "^0.55.0",
-				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-				"svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0",
-				"typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
-			},
-			"peerDependenciesMeta": {
-				"@babel/core": {
-					"optional": true
-				},
-				"coffeescript": {
-					"optional": true
-				},
-				"less": {
-					"optional": true
-				},
-				"postcss": {
-					"optional": true
-				},
-				"postcss-load-config": {
-					"optional": true
-				},
-				"pug": {
-					"optional": true
-				},
-				"sass": {
-					"optional": true
-				},
-				"stylus": {
-					"optional": true
-				},
-				"sugarss": {
-					"optional": true
-				},
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/svgo": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
-			"integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"@trysound/sax": "0.2.0",
-				"commander": "^7.2.0",
-				"css-select": "^5.1.0",
-				"css-tree": "^2.3.1",
-				"css-what": "^6.1.0",
-				"csso": "^5.0.5",
-				"picocolors": "^1.0.0"
-			},
-			"bin": {
-				"svgo": "bin/svgo"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/svgo"
-			}
-		},
-		"node_modules/text-table": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-			"dev": true
-		},
-		"node_modules/tiny-glob": {
-			"version": "0.2.9",
-			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
-			"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
-			"dependencies": {
-				"globalyzer": "0.1.0",
-				"globrex": "^0.1.2"
-			}
-		},
-		"node_modules/tinyduration": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/tinyduration/-/tinyduration-3.3.1.tgz",
-			"integrity": "sha512-39iO6CyHMFTPv9PKFxXPXa1DDc2JHog4oGK6x3fG75T+chRO+SKmuEPT00myYs3aGFIq3nQ6U5J5c5hR0PMKjw==",
-			"license": "MIT"
-		},
-		"node_modules/to-regex-range": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"devOptional": true,
-			"dependencies": {
-				"is-number": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=8.0"
-			}
-		},
-		"node_modules/totalist": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
-			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/tough-cookie": {
-			"version": "2.5.0",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-			"integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-			"license": "BSD-3-Clause",
-			"dependencies": {
-				"psl": "^1.1.28",
-				"punycode": "^2.1.1"
-			},
-			"engines": {
-				"node": ">=0.8"
-			}
-		},
-		"node_modules/tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-			"license": "MIT"
-		},
-		"node_modules/ts-api-utils": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
-			"integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=16"
-			},
-			"peerDependencies": {
-				"typescript": ">=4.2.0"
-			}
-		},
-		"node_modules/tslib": {
-			"version": "2.6.3",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-			"dev": true
-		},
-		"node_modules/tunnel-agent": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-			"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-			"license": "Apache-2.0",
-			"dependencies": {
-				"safe-buffer": "^5.0.1"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/tweetnacl": {
-			"version": "0.14.5",
-			"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-			"integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-			"license": "Unlicense"
-		},
-		"node_modules/type-check": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-			"dev": true,
-			"dependencies": {
-				"prelude-ls": "^1.2.1"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/typescript": {
-			"version": "5.5.3",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-			"integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
-			"dev": true,
-			"bin": {
-				"tsc": "bin/tsc",
-				"tsserver": "bin/tsserver"
-			},
-			"engines": {
-				"node": ">=14.17"
-			}
-		},
-		"node_modules/typescript-eslint": {
-			"version": "8.0.0-alpha.39",
-			"resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.0.0-alpha.39.tgz",
-			"integrity": "sha512-bsuR1BVJfHr7sBh7Cca962VPIcP+5UWaIa/+6PpnFZ+qtASjGTxKWIF5dG2o73BX9NsyqQfvRWujb3M9CIoRXA==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/eslint-plugin": "8.0.0-alpha.39",
-				"@typescript-eslint/parser": "8.0.0-alpha.39",
-				"@typescript-eslint/utils": "8.0.0-alpha.39"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/undici-types": {
-			"version": "6.11.1",
-			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz",
-			"integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==",
-			"devOptional": true,
-			"license": "MIT"
-		},
-		"node_modules/unfetch": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
-			"integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==",
-			"license": "MIT"
-		},
-		"node_modules/update-browserslist-db": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
-			"integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/browserslist"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/browserslist"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"dependencies": {
-				"escalade": "^3.1.2",
-				"picocolors": "^1.0.1"
-			},
-			"bin": {
-				"update-browserslist-db": "cli.js"
-			},
-			"peerDependencies": {
-				"browserslist": ">= 4.21.0"
-			}
-		},
-		"node_modules/uri-js": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-			"dependencies": {
-				"punycode": "^2.1.0"
-			}
-		},
-		"node_modules/util-deprecate": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
-		},
-		"node_modules/uuid": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-			"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-			"deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
-			"license": "MIT",
-			"bin": {
-				"uuid": "bin/uuid"
-			}
-		},
-		"node_modules/verror": {
-			"version": "1.10.0",
-			"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-			"integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-			"engines": [
-				"node >=0.6.0"
-			],
-			"license": "MIT",
-			"dependencies": {
-				"assert-plus": "^1.0.0",
-				"core-util-is": "1.0.2",
-				"extsprintf": "^1.2.0"
-			}
-		},
-		"node_modules/vite": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.2.tgz",
-			"integrity": "sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==",
-			"dependencies": {
-				"esbuild": "^0.21.3",
-				"postcss": "^8.4.38",
-				"rollup": "^4.13.0"
-			},
-			"bin": {
-				"vite": "bin/vite.js"
-			},
-			"engines": {
-				"node": "^18.0.0 || >=20.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/vitejs/vite?sponsor=1"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.3"
-			},
-			"peerDependencies": {
-				"@types/node": "^18.0.0 || >=20.0.0",
-				"less": "*",
-				"lightningcss": "^1.21.0",
-				"sass": "*",
-				"stylus": "*",
-				"sugarss": "*",
-				"terser": "^5.4.0"
-			},
-			"peerDependenciesMeta": {
-				"@types/node": {
-					"optional": true
-				},
-				"less": {
-					"optional": true
-				},
-				"lightningcss": {
-					"optional": true
-				},
-				"sass": {
-					"optional": true
-				},
-				"stylus": {
-					"optional": true
-				},
-				"sugarss": {
-					"optional": true
-				},
-				"terser": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/vitefu": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-			"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
-			"license": "MIT",
-			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
-			},
-			"peerDependenciesMeta": {
-				"vite": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/web-streams-polyfill": {
-			"version": "3.3.3",
-			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
-			"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-			"license": "BSD-2-Clause"
-		},
-		"node_modules/whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"license": "MIT",
-			"dependencies": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
-			}
-		},
-		"node_modules/which": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-			"dependencies": {
-				"isexe": "^2.0.0"
-			},
-			"bin": {
-				"node-which": "bin/node-which"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/word-wrap": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/wrap-ansi": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-			"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-			"dependencies": {
-				"ansi-styles": "^6.1.0",
-				"string-width": "^5.0.1",
-				"strip-ansi": "^7.0.1"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-			}
-		},
-		"node_modules/wrap-ansi-cjs": {
-			"name": "wrap-ansi",
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-			"dependencies": {
-				"ansi-styles": "^4.0.0",
-				"string-width": "^4.1.0",
-				"strip-ansi": "^6.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-			}
-		},
-		"node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-		},
-		"node_modules/wrap-ansi-cjs/node_modules/string-width": {
-			"version": "4.2.3",
-			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-			"dependencies": {
-				"emoji-regex": "^8.0.0",
-				"is-fullwidth-code-point": "^3.0.0",
-				"strip-ansi": "^6.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/wrap-ansi/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
-			}
-		},
-		"node_modules/wrap-ansi/node_modules/ansi-styles": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-			"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
-			}
-		},
-		"node_modules/wrap-ansi/node_modules/strip-ansi": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-			"dependencies": {
-				"ansi-regex": "^6.0.1"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
-			}
-		},
-		"node_modules/wrappy": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
-		},
-		"node_modules/yallist": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-			"license": "ISC"
-		},
-		"node_modules/yaml": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/yocto-queue": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/zimmerframe": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
-			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
-		}
-	}
+  "name": "jedmund-svelte",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "jedmund-svelte",
+      "version": "0.0.1",
+      "dependencies": {
+        "@aarkue/tiptap-math-extension": "^1.3.6",
+        "@prisma/client": "^6.8.2",
+        "@sveltejs/adapter-node": "^5.2.0",
+        "@tiptap/core": "^2.12.0",
+        "@tiptap/extension-bubble-menu": "^2.12.0",
+        "@tiptap/extension-character-count": "^2.12.0",
+        "@tiptap/extension-code-block-lowlight": "^2.12.0",
+        "@tiptap/extension-color": "^2.12.0",
+        "@tiptap/extension-floating-menu": "^2.12.0",
+        "@tiptap/extension-highlight": "^2.12.0",
+        "@tiptap/extension-image": "^2.12.0",
+        "@tiptap/extension-link": "^2.12.0",
+        "@tiptap/extension-placeholder": "^2.12.0",
+        "@tiptap/extension-subscript": "^2.12.0",
+        "@tiptap/extension-superscript": "^2.12.0",
+        "@tiptap/extension-table": "^2.12.0",
+        "@tiptap/extension-table-header": "^2.12.0",
+        "@tiptap/extension-table-row": "^2.12.0",
+        "@tiptap/extension-task-item": "^2.12.0",
+        "@tiptap/extension-task-list": "^2.12.0",
+        "@tiptap/extension-text": "^2.12.0",
+        "@tiptap/extension-text-align": "^2.12.0",
+        "@tiptap/extension-text-style": "^2.12.0",
+        "@tiptap/extension-typography": "^2.12.0",
+        "@tiptap/extension-underline": "^2.12.0",
+        "@tiptap/pm": "^2.12.0",
+        "@tiptap/starter-kit": "^2.12.0",
+        "@tiptap/suggestion": "^2.12.0",
+        "@types/multer": "^1.4.12",
+        "@types/redis": "^4.0.10",
+        "@types/steamapi": "^2.2.5",
+        "cloudinary": "^2.6.1",
+        "dotenv": "^16.5.0",
+        "exifr": "^7.1.3",
+        "giantbombing-api": "^1.0.4",
+        "gray-matter": "^4.0.3",
+        "ioredis": "^5.4.1",
+        "katex": "^0.16.22",
+        "lowlight": "^3.3.0",
+        "lucide-svelte": "^0.511.0",
+        "marked": "^15.0.12",
+        "multer": "^2.0.0",
+        "node-itunes-search": "^1.2.3",
+        "prisma": "^6.8.2",
+        "psn-api": "github:jedmund/psn-api",
+        "redis": "^4.7.0",
+        "sharp": "^0.34.2",
+        "steamapi": "^3.0.11",
+        "svelte-tiptap": "^2.1.0",
+        "svgo": "^3.3.2",
+        "tinyduration": "^3.3.1",
+        "tippy.js": "^6.3.7",
+        "tiptap-extension-auto-joiner": "^0.1.3",
+        "tiptap-extension-global-drag-handle": "^0.1.18",
+        "tiptap-markdown": "^0.8.10",
+        "zod": "^3.25.30"
+      },
+      "devDependencies": {
+        "@musicorum/lastfm": "github:jedmund/lastfm",
+        "@poppanator/sveltekit-svg": "^5.0.0-svelte5.4",
+        "@storybook/addon-a11y": "^9.0.1",
+        "@storybook/addon-docs": "^9.0.1",
+        "@storybook/addon-svelte-csf": "^5.0.3",
+        "@storybook/sveltekit": "^9.0.1",
+        "@sveltejs/adapter-auto": "^3.0.0",
+        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+        "@types/eslint": "^8.56.7",
+        "@types/node": "^22.0.2",
+        "autoprefixer": "^10.4.19",
+        "eslint": "^9.0.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-storybook": "^9.0.1",
+        "eslint-plugin-svelte": "^2.36.0",
+        "globals": "^15.0.0",
+        "postcss": "^8.4.39",
+        "prettier": "^3.1.1",
+        "prettier-plugin-svelte": "^3.1.2",
+        "sass": "^1.77.8",
+        "storybook": "^9.0.1",
+        "svelte": "^5.0.0-next.1",
+        "svelte-check": "^3.6.0",
+        "tslib": "^2.4.1",
+        "tsx": "^4.19.4",
+        "typescript": "^5.5.3",
+        "typescript-eslint": "^8.0.0-alpha.20",
+        "vite": "^5.0.3"
+      }
+    },
+    "node_modules/@aarkue/tiptap-math-extension": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@aarkue/tiptap-math-extension/-/tiptap-math-extension-1.3.6.tgz",
+      "integrity": "sha512-+wYePrAbziOmQfpbWMCiLth9IiirDr9r6DiMtz4kM8IYsZPSW4foUWQTSl5iu3bgDVY9oib9UWLlbOPrO4i1yg==",
+      "license": "MIT",
+      "dependencies": {
+        "evaluatex": "^2.2.0",
+        "katex": "^0.16.7"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.3.tgz",
+      "integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz",
+      "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
+      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.0.tgz",
+      "integrity": "sha512-A68TBu6/1mHHuc5YJL0U0VVeGNiklLAL6rRmhTCP2B5XjWLMnrX+HkO+IAXyHvks5cyyY1jjK5ITPQ1HGS2EVA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.4",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
+      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.6.0.tgz",
+      "integrity": "sha512-D9B0/3vNg44ZeWbYMpBoXqNP4j6eQD5vNwIlGAuFRRzK/WtT/jvDQW3Bi9kkf3PMDMlM7Yi+73VLUsn5bJcl8A==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
+      "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz",
+      "integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.2.tgz",
+      "integrity": "sha512-OfXHZPppddivUJnqyKoi5YVeHRkkNE2zUFT2gbpKxp/JZCFYEYubnMg+gOp6lWfasPrTS+KPosKqdI+ELYVDtg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.2.tgz",
+      "integrity": "sha512-dYvWqmjU9VxqXmjEtjmvHnGqF8GrVjM2Epj9rJ6BUIXvk8slvNDJbhGFvIoXzkDhrJC2jUxNLz/GUjjvSzfw+g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz",
+      "integrity": "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz",
+      "integrity": "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz",
+      "integrity": "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz",
+      "integrity": "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
+      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz",
+      "integrity": "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz",
+      "integrity": "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.2.tgz",
+      "integrity": "sha512-0DZzkvuEOqQUP9mo2kjjKNok5AmnOr1jB2XYjkaoNRwpAYMDzRmAqUIa1nRi58S2WswqSfPOWLNOr0FDT3H5RQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.2.tgz",
+      "integrity": "sha512-D8n8wgWmPDakc83LORcfJepdOSN6MvWNzzz2ux0MnIbOqdieRZwVYY32zxVx+IFUT8er5KPcyU3XXsn+GzG/0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.2.tgz",
+      "integrity": "sha512-EGZ1xwhBI7dNISwxjChqBGELCWMGDvmxZXKjQRuqMrakhO8QoMgqCrdjnAqJq/CScxfRn+Bb7suXBElKQpPDiw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.2.tgz",
+      "integrity": "sha512-sD7J+h5nFLMMmOXYH4DD9UtSNBD05tWSSdWAcEyzqW8Cn5UxXvsHAxmxSesYUsTOBmUnjtxghKDl15EvfqLFbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.2.tgz",
+      "integrity": "sha512-NEE2vQ6wcxYav1/A22OOxoSOGiKnNmDzCYFOZ949xFmrWZOVII1Bp3NqVVpvj+3UeHMFyN5eP/V5hzViQ5CZNA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.2.tgz",
+      "integrity": "sha512-DOYMrDm5E6/8bm/yQLCWyuDJwUnlevR8xtF8bs+gjZ7cyUNYXiSf/E8Kp0Ss5xasIaXSHzb888V1BE4i1hFhAA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.2.tgz",
+      "integrity": "sha512-/VI4mdlJ9zkaq53MbIG6rZY+QRN3MLbR6usYlgITEzi4Rpx5S6LFKsycOQjkOGmqTNmkIdLjEvooFKwww6OpdQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.4.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.2.tgz",
+      "integrity": "sha512-cfP/r9FdS63VA5k0xiqaNaEoGxBg9k7uE+RQGzuK9fHt7jib4zAVVseR9LsE4gJcNWgT6APKMNnCcnyOtmSEUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.2.tgz",
+      "integrity": "sha512-QLjGGvAbj0X/FXl8n1WbtQ6iVBpWU7JO94u/P2M4a8CFYsvQi4GW2mRy/JqkRx0qpBzaOdKJKw8uc930EX2AHw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.2.tgz",
+      "integrity": "sha512-aUdT6zEYtDKCaxkofmmJDJYGCf0+pJg3eU9/oBuqvEeoB9dKI6ZLc/1iLJCTuJQDO4ptntAlkUmHgGjyuobZbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@ioredis/commands": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
+      "integrity": "sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==",
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@mdx-js/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdx": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "react": ">=16"
+      }
+    },
+    "node_modules/@musicorum/lastfm": {
+      "version": "0.3.2",
+      "resolved": "git+ssh://git@github.com/jedmund/lastfm.git#ec56b053a8d00be63bb71b1e0d41c650f859f0ca",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=17.5.0"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.25",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
+    },
+    "node_modules/@poppanator/sveltekit-svg": {
+      "version": "5.0.0-svelte5.4",
+      "resolved": "https://registry.npmjs.org/@poppanator/sveltekit-svg/-/sveltekit-svg-5.0.0-svelte5.4.tgz",
+      "integrity": "sha512-ZFUA/B5MfSEO2Ta/stJMuyhWZKadHg5WQqp8KicgIx741no89rvDCr+X4FSrUI6eqm0Na/p6yya14C2T/7lkZQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0"
+      },
+      "peerDependencies": {
+        "svelte": ">=5.x || ^5.0.0-next.0",
+        "svgo": ">=3.x",
+        "vite": ">=5.x"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@prisma/client": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.8.2.tgz",
+      "integrity": "sha512-5II+vbyzv4si6Yunwgkj0qT/iY0zyspttoDrL3R4BYgLdp42/d2C8xdi9vqkrYtKt9H32oFIukvyw3Koz5JoDg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "peerDependencies": {
+        "prisma": "*",
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/config": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.8.2.tgz",
+      "integrity": "sha512-ZJY1fF4qRBPdLQ/60wxNtX+eu89c3AkYEcP7L3jkp0IPXCNphCYxikTg55kPJLDOG6P0X+QG5tCv6CmsBRZWFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jiti": "2.4.2"
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.8.2.tgz",
+      "integrity": "sha512-4muBSSUwJJ9BYth5N8tqts8JtiLT8QI/RSAzEogwEfpbYGFo9mYsInsVo8dqXdPO2+Rm5OG5q0qWDDE3nyUbVg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/engines": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.8.2.tgz",
+      "integrity": "sha512-XqAJ//LXjqYRQ1RRabs79KOY4+v6gZOGzbcwDQl0D6n9WBKjV7qdrbd042CwSK0v0lM9MSHsbcFnU2Yn7z8Zlw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.8.2",
+        "@prisma/engines-version": "6.8.0-43.2060c79ba17c6bb9f5823312b6f6b7f4a845738e",
+        "@prisma/fetch-engine": "6.8.2",
+        "@prisma/get-platform": "6.8.2"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "6.8.0-43.2060c79ba17c6bb9f5823312b6f6b7f4a845738e",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-6.8.0-43.2060c79ba17c6bb9f5823312b6f6b7f4a845738e.tgz",
+      "integrity": "sha512-Rkik9lMyHpFNGaLpPF3H5q5TQTkm/aE7DsGM5m92FZTvWQsvmi6Va8On3pWvqLHOt5aPUvFb/FeZTmphI4CPiQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.8.2.tgz",
+      "integrity": "sha512-lCvikWOgaLOfqXGacEKSNeenvj0n3qR5QvZUOmPE2e1Eh8cMYSobxonCg9rqM6FSdTfbpqp9xwhSAOYfNqSW0g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.8.2",
+        "@prisma/engines-version": "6.8.0-43.2060c79ba17c6bb9f5823312b6f6b7f4a845738e",
+        "@prisma/get-platform": "6.8.2"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.8.2.tgz",
+      "integrity": "sha512-vXSxyUgX3vm1Q70QwzwkjeYfRryIvKno1SXbIqwSptKwqKzskINnDUcx85oX+ys6ooN2ATGSD0xN2UTfg6Zcow==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.8.2"
+      }
+    },
+    "node_modules/@redis/bloom": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-1.2.0.tgz",
+      "integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/client": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.0.tgz",
+      "integrity": "sha512-aR0uffYI700OEEH4gYnitAnv3vzVGXCFvYfdpu/CJKvk4pHfLPEy/JSZyrpQ+15WhXe1yJRXLtfQ84s4mEXnPg==",
+      "license": "MIT",
+      "dependencies": {
+        "cluster-key-slot": "1.1.2",
+        "generic-pool": "3.9.0",
+        "yallist": "4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@redis/graph": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@redis/graph/-/graph-1.1.1.tgz",
+      "integrity": "sha512-FEMTcTHZozZciLRl6GiiIB4zGm5z5F3F6a6FZCyrfxdKOhFlGkiAqlexWMBzCi4DcRoyiOsuLfW+cjlGWyExOw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/json": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@redis/json/-/json-1.0.7.tgz",
+      "integrity": "sha512-6UyXfjVaTBTJtKNG4/9Z8PSpKE6XgSyEb8iwaqDcy+uKrd/DGYHTWkUdnQDyzm727V7p21WUMhsqz5oy65kPcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/search": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@redis/search/-/search-1.2.0.tgz",
+      "integrity": "sha512-tYoDBbtqOVigEDMAcTGsRlMycIIjwMCgD8eR2t0NANeQmgK/lvxNAvYyb6bZDD4frHRhIHkJu2TBRvB0ERkOmw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@redis/time-series": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@redis/time-series/-/time-series-1.1.0.tgz",
+      "integrity": "sha512-c1Q99M5ljsIuc4YdaCwfUEXsofakb9c8+Zse2qxTadu8TalLXuAESzLvFAvNVbkmSlvlzIQOLpBCmWI9wTOt+g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@redis/client": "^1.0.0"
+      }
+    },
+    "node_modules/@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/plugin-commonjs": {
+      "version": "26.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-26.0.1.tgz",
+      "integrity": "sha512-UnsKoZK6/aGIH6AdkptXhNvhaqftcjq3zZdT+LY5Ftms6JR06nADcDsYp5hTU9E2lbJUEOhdlY5J4DNTneM+jQ==",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.2",
+        "glob": "^10.4.1",
+        "is-reference": "1.2.1",
+        "magic-string": "^0.30.3"
+      },
+      "engines": {
+        "node": ">=16.0.0 || 14 >= 14.17"
+      },
+      "peerDependencies": {
+        "rollup": "^2.68.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@rollup/plugin-json": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
+      "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
+      "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-builtin-module": "^3.2.1",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
+      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
+      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
+      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
+      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
+      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
+      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
+      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
+      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
+      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
+      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
+      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
+      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
+      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
+      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
+      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@storybook/addon-a11y": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-9.0.1.tgz",
+      "integrity": "sha512-YlJtsGtsungRnTI50AIIxJ0vCo0AoVzkBh3iQSi8nMs+jo2OBzXTXeAVs/8R97s0Pa1rnUgq98rVHdG9y7KUrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "axe-core": "^4.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^9.0.1"
+      }
+    },
+    "node_modules/@storybook/addon-docs": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.0.1.tgz",
+      "integrity": "sha512-sRU18E4auHY0F7JEvyCxO+yt3C3L+7k3l9YIIW3oy1SEQNAZzPkOgQz6Tl74L1UGBk5+Q505PGaQbXAaIHGlzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@mdx-js/react": "^3.0.0",
+        "@storybook/csf-plugin": "9.0.1",
+        "@storybook/icons": "^1.2.12",
+        "@storybook/react-dom-shim": "9.0.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^9.0.1"
+      }
+    },
+    "node_modules/@storybook/addon-svelte-csf": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-svelte-csf/-/addon-svelte-csf-5.0.3.tgz",
+      "integrity": "sha512-P6f/fCqL0Wq79LTe1EjSjKppKE5h8Dz5+x9R/NK7+5PyQI4NS1RNwMnppUJeJhF4CqV7BLjsFGr88DT3AAdytw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/csf": "^0.1.13",
+        "dedent": "^1.5.3",
+        "es-toolkit": "^1.26.1",
+        "esrap": "^1.2.2",
+        "magic-string": "^0.30.12",
+        "svelte-ast-print": "^0.4.0",
+        "zimmerframe": "^1.1.2"
+      },
+      "peerDependencies": {
+        "@storybook/svelte": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0 || ^5.0.0",
+        "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0",
+        "svelte": "^5.0.0",
+        "vite": "^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/@storybook/builder-vite": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.0.1.tgz",
+      "integrity": "sha512-Kt1Ze/LrK9en4BxG6VNmLy/RuxvexOHE2Rf7R6e9WoQb7zGy7G0EbGRRSm1zqF6jF9L6e6S129nWkiwt2oPhPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/csf-plugin": "9.0.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^9.0.1",
+        "vite": "^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/@storybook/csf": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
+      "integrity": "sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/@storybook/csf-plugin": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.0.1.tgz",
+      "integrity": "sha512-DRAyU1CKMDJpEOEn70gQtPQielI0gxu55unM4CpK6qWAAPAPVmz3+e+VHbh0AnvBZVgwsaB+g7EI8DD4l2d4PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unplugin": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^9.0.1"
+      }
+    },
+    "node_modules/@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@storybook/icons": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.4.0.tgz",
+      "integrity": "sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
+      }
+    },
+    "node_modules/@storybook/react-dom-shim": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.0.1.tgz",
+      "integrity": "sha512-MtowY/NS+v/UsHJDZDvsAaXRZERw3diQgWSldEtdlwQxypZQ9CWwvgIuIzRuP4i+/m58TyCEeMEG9gZB1b5pBQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "storybook": "^9.0.1"
+      }
+    },
+    "node_modules/@storybook/svelte": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-9.0.1.tgz",
+      "integrity": "sha512-lkhwTBzx+4f5gxOgNTh9yQlSlIBTwLcEU+zy90akL7D5hBcrA8NUPyKOcQMKJjaR9JSjCIYxjOMz36ps5sdlvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ts-dedent": "^2.0.0",
+        "type-fest": "~2.19"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^9.0.1",
+        "svelte": "^5.0.0"
+      }
+    },
+    "node_modules/@storybook/svelte-vite": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-9.0.1.tgz",
+      "integrity": "sha512-z7LLDkZL74IDb6UgUrb8HDQuwXh3NTKpMXLYCmLIq73uHwO/V2kb6kYnv0UIEuzAsqtP8yG0CdMFqJRsuFyLJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/builder-vite": "9.0.1",
+        "@storybook/svelte": "9.0.1",
+        "magic-string": "^0.30.0",
+        "svelte2tsx": "^0.7.35",
+        "typescript": "^4.9.4 || ^5.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+        "storybook": "^9.0.1",
+        "svelte": "^5.0.0",
+        "vite": "^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/@storybook/sveltekit": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@storybook/sveltekit/-/sveltekit-9.0.1.tgz",
+      "integrity": "sha512-aPr8g1rNdUEYyAc/wXCeEUySzY+6ad1yi0vrhIEbeTLziCAAsAfcxdHcVxSFE1CO05ES6OsUeAPSylOytu/UBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/builder-vite": "9.0.1",
+        "@storybook/svelte": "9.0.1",
+        "@storybook/svelte-vite": "9.0.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^9.0.1",
+        "svelte": "^5.0.0",
+        "vite": "^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/@sveltejs/acorn-typescript": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
+      "integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8.9.0"
+      }
+    },
+    "node_modules/@sveltejs/adapter-auto": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.2.tgz",
+      "integrity": "sha512-Mso5xPCA8zgcKrv+QioVlqMZkyUQ5MjDJiEPuG/Z7cV/5tmwV7LmcVWk5tZ+H0NCOV1x12AsoSpt/CwFwuVXMA==",
+      "dev": true,
+      "dependencies": {
+        "import-meta-resolve": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": "^2.0.0"
+      }
+    },
+    "node_modules/@sveltejs/adapter-node": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.0.tgz",
+      "integrity": "sha512-HVZoei2078XSyPmvdTHE03VXDUD0ytTvMuMHMQP0j6zX4nPDpCcKrgvU7baEblMeCCMdM/shQvstFxOJPQKlUQ==",
+      "dependencies": {
+        "@rollup/plugin-commonjs": "^26.0.1",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "rollup": "^4.9.5"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": "^2.4.0"
+      }
+    },
+    "node_modules/@sveltejs/kit": {
+      "version": "2.5.18",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.18.tgz",
+      "integrity": "sha512-+g06hvpVAnH7b4CDjhnTDgFWBKBiQJpuSmQeGYOuzbO3SC3tdYjRNlDCrafvDtKbGiT2uxY5Dn9qdEUGVZdWOQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0",
+        "devalue": "^5.0.0",
+        "esm-env": "^1.0.0",
+        "import-meta-resolve": "^4.1.0",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.5",
+        "mrmime": "^2.0.0",
+        "sade": "^1.8.1",
+        "set-cookie-parser": "^2.6.0",
+        "sirv": "^2.0.4",
+        "tiny-glob": "^0.2.9"
+      },
+      "bin": {
+        "svelte-kit": "svelte-kit.js"
+      },
+      "engines": {
+        "node": ">=18.13"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "vite": "^5.0.3"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.4.tgz",
+      "integrity": "sha512-0ba1RQ/PHen5FGpdSrW7Y3fAMQjrXantECALeOiOdBdzR5+5vPP6HVZRLmZaQL+W8m++o+haIAKq5qT+MiZ7VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
+        "debug": "^4.3.7",
+        "deepmerge": "^4.3.1",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.12",
+        "vitefu": "^1.0.3"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.1.tgz",
+      "integrity": "sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.7"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.0||^4.0.0",
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
+      "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@tiptap/core": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.12.0.tgz",
+      "integrity": "sha512-3qX8oGVKFFZzQ0vit+ZolR6AJIATBzmEmjAA0llFhWk4vf3v64p1YcXcJsOBsr5scizJu5L6RYWEFatFwqckRg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.12.0.tgz",
+      "integrity": "sha512-XUC2A77YAPMJS2SqZ2S62IGcUH8gZ7cdhoWlYQb1pR4ZzXFByeKDJPxfYeAePSiuI01YGrlzgY2c6Ncx/DtO0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.12.0.tgz",
+      "integrity": "sha512-lAUtoLDLRc5ofD2I9MFY6MQ7d1qBLLqS1rvpwaPjOaoQb/GPVnaHj9qXYG0SY9K3erMtto48bMFpAcscjZHzZQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.12.0.tgz",
+      "integrity": "sha512-DYijoE0igV0Oi+ZppFsp2UrQsM/4HZtmmpD78BJM9zfCbd1YvAUIxmzmXr8uqU18OHd1uQy+/zvuNoUNYyw67g==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.12.0.tgz",
+      "integrity": "sha512-YTCjztB8MaIpwyxFYr81H4+LdKCq1VlaSXQyrPdB44mVdhhRqc46BYQb8/B//XE3UIu3X2QWFjwrqRlUq6vUiw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-character-count": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-character-count/-/extension-character-count-2.12.0.tgz",
+      "integrity": "sha512-UCtcDyDj1nhKHc7AlOxR2PkFpRs7pWV8+/pfyWr471ECJHpJ2eDR3dyaH8uzkNiakHgqcwDca9lRu9lwHDfWcw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.12.0.tgz",
+      "integrity": "sha512-R7RaS+hJeHFim7alImQ9L9CSWSMjWXvz0Ote568x9ea5gdBGUYW8PcH+5a91lh8e1XGYWBM12a8oJZRyxg/tQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.12.0.tgz",
+      "integrity": "sha512-1D7cYAjgxEFHdfC/35Ooi4GqWKB5sszbW8iI7N16XILNln26xb0d5KflXqYrwr9CN/ZnZoCl2o6YsP7xEObcZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block-lowlight": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.12.0.tgz",
+      "integrity": "sha512-q5dg3GbWCMT0xniVuxjDwAd3CdMfGXFmptulzgaV31HLU+6nu4zZ5sNtMLDA7RU05lnvatKLeXNUhJ2gPouhtw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/extension-code-block": "^2.7.0",
+        "@tiptap/pm": "^2.7.0",
+        "highlight.js": "^11",
+        "lowlight": "^2 || ^3"
+      }
+    },
+    "node_modules/@tiptap/extension-color": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-2.12.0.tgz",
+      "integrity": "sha512-tb3KDhH2Hf3Pwm7pIEH80TKBOLmHU+T/0seR3R+6flamPC7t9S4mcehDX35qvTQTqDU9v429Rw5SL40FRW7AMg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/extension-text-style": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.12.0.tgz",
+      "integrity": "sha512-sA1Q+mxDIv0Y3qQTBkYGwknNbDcGFiJ/fyAFholXpqbrcRx3GavwR/o0chBdsJZlFht0x7AWGwUYWvIo7wYilA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.12.0.tgz",
+      "integrity": "sha512-zcZSOXFj+7LVnmdPWTfKr5AoxYIzFPFlLJe35AdTQC5IhkljLn1Exct8I30ZREojX/00hKYsO7JJmePS6TEVlQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.12.0.tgz",
+      "integrity": "sha512-BYpyZx/56KCDksWuJJbhki/uNgt9sACuSSZFH5AN1yS1ISD+EzIxqf6Pzzv8QCoNJ+KcRNVaZsOlOFaJGoyzag==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.12.0.tgz",
+      "integrity": "sha512-k8ji5v9YKn7bNjo8UtI9hEfXfl4tKUp1hpJOEmUxGJQa3LIwrwSbReupUTnHszGQelzxikS/l1xO9P0TIGwRoA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.12.0.tgz",
+      "integrity": "sha512-08MNS2PK5DzdnAfqXn4krmJ/xebKmWpRpYqqN5EM8AvetYKlAJyTVSpo0ZUeGbZ3EZiPm9djgSnrLqpFUDjRCg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.12.0.tgz",
+      "integrity": "sha512-9DfES4Wd5TX1foI70N9sAL+35NN1UHrtzDYN2+dTHupnmKir9RaMXyZcbkUb4aDVzYrGxIqxJzHBVkquKIlTrw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-highlight": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.12.0.tgz",
+      "integrity": "sha512-dQNaDXslN9ion0NgVVOOKJNS3MP8Lnx9xT01mDa/R9Qdulh7xmK6n8O2GCb86TnjX1OyZURx+fEK/WLM8oKK+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.12.0.tgz",
+      "integrity": "sha512-+B9CAf2BFURC6mQiM1OQtahVTzdEOEgT/UUNlRZkeeBc0K5of3dr6UdBqaoaMAefja3jx5PqiQ7mhUBAjSt6AA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.12.0.tgz",
+      "integrity": "sha512-Vi2+6RIehDSpoJn/7PDuOieUj7W7WrEb4wBxK9TG8PDscihR0mehhhzm/K2xhH4TN48iPJGRsjDFrFjTbXmcnw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-image": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-2.12.0.tgz",
+      "integrity": "sha512-wO+yrfMlnW3SYCb1Q1qAb+nt5WH6jnlQPTV6qdoIabRtW0puwMWULZDUgclPN5hxn8EXb9vBEu44egvH6hgkfQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.12.0.tgz",
+      "integrity": "sha512-JKcXK3LmEsmxNzEq5e06rPUGMRLUxmJ2mYtBY4NlJ6yLM9XMDljtgeTnWT0ySLYmfINSFTkX4S7WIRbpl9l4pw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.12.0.tgz",
+      "integrity": "sha512-N6f78F2onvcL8FAwFOJexOF02UwGETLjQ7cCguhBe/w7vtx7aX8/f+IlaSGY/pIcWyEQpoC28ciM0+QsrJRr1A==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.12.0.tgz",
+      "integrity": "sha512-4YwZooC8HP+gPxs6YrkB1ayggyYbgVvJx/rWBT6lKSW2MVVg8QXi1zAcSI3MhIhHmqDysXXFPL8JURlbeGjaFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.12.0.tgz",
+      "integrity": "sha512-1ys0e/oqk09oXxrB1WzAx5EntK/QreObG/V1yhgihGm429fxHMsxzIYN6dKAYxx0YOPQG7qEZRrrPuWU70Ms7g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.12.0.tgz",
+      "integrity": "sha512-QNK5cgewCunWFxpLlbvvoO1rrLgEtNKxiY79fctP9toV+e59R+1i1Q9lXC1O5mOfDgVxCb6uFDMsqmKhFjpPog==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.12.0.tgz",
+      "integrity": "sha512-K7irDox4P+NLAMjVrJeG72f0sulsCRYpx1Cy4gxKCdi1LTivj5VkXa6MXmi42KTCwBu3pWajBctYIOAES1FTAA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.12.0.tgz",
+      "integrity": "sha512-nBaa5YtBsLJPZFfSs36sBz4Zgi/c8b3MsmS/Az8uXaHb0R9yPewOVUMDIQbxMct8SXUlIo9VtKlOL+mVJ3Nkpw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-subscript": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-2.12.0.tgz",
+      "integrity": "sha512-9hQE28oHkIjLtn6ixysQJtHBSpEvcaV2pmYFkmoVDf4mHqbXGOUuywO3b/Fc0lNOU2aD/kgZNENNsFPWWaRWJA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-superscript": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.12.0.tgz",
+      "integrity": "sha512-qdUDRNGluGAG2Jok8DUezgSwTryZDs/72SyY4+gIB8nOkEfIOeM2avx8F0jETLk4Eyasfl8wbMbS1qY7s6ydfA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-table": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.12.0.tgz",
+      "integrity": "sha512-tT3IbbBal0vPQ1Bc/3Xl+tmqqZQCYWxnycBPl/WZBqhd57DWzfJqRPESwCGUIJgjOtTnipy/ulvj0FxHi1j9JA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-table-header": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.12.0.tgz",
+      "integrity": "sha512-gRKEsy13KKLpg9RxyPeUGqh4BRFSJ2Bc2KQP1ldhef6CPRYHCbGycxXCVQ5aAb7Mhpo54L+AAkmAv1iMHUTflw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-table-row": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.12.0.tgz",
+      "integrity": "sha512-AEW/Zl9V0IoaYDBLMhF5lVl0xgoIJs3IuKCsIYxGDlxBfTVFC6PfQzvuy296CMjO5ZcZ0xalVipPV9ggsMRD+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-task-item": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-task-item/-/extension-task-item-2.12.0.tgz",
+      "integrity": "sha512-IyAcy5CGU4Oesb5HpoZ7nU3wvP61Spz5/KCy1aXCgBfx3c1tF+JOijxKDnYKWSvfxzziGGIiOKR89EllnzTsdw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-task-list": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-task-list/-/extension-task-list-2.12.0.tgz",
+      "integrity": "sha512-KqXL4bRsras3a2sswxoddo7GYgBE0ZqzJgGgYVWvczA7TG3WShjJheaB1tFbt9DmVJzaZR34hKhXvDbVspbznQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.12.0.tgz",
+      "integrity": "sha512-0ytN9V1tZYTXdiYDQg4FB2SQ56JAJC9r/65snefb9ztl+gZzDrIvih7CflHs1ic9PgyjexfMLeH+VzuMccNyZw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text-align": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.12.0.tgz",
+      "integrity": "sha512-ntGjHFPrb9iQ+QGVUr6U53/wcWI/qaAwDyApW7F7GcTpQbmimwUqvUHti1RsSh9nTrQmZD6g8SdRbIR/Y31gOw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.12.0.tgz",
+      "integrity": "sha512-Pxwt23ZlvbQUahV0PvHy8Ej6IAuKR1FvHobUvwP3T8AiY7hob66fWRe7tQbESzSAzm5Vv2xkvyHeU8vekMTezA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-typography": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-2.12.0.tgz",
+      "integrity": "sha512-Sh95D8ON3KcGR/6wQ1B2PwVQNQXSHItQFodDAEgT9c6CCPzrz0omLWJvG7lx7NzMoZ7cvPE/BBoEujsDIT1XRA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.12.0.tgz",
+      "integrity": "sha512-u95lrUCesw1SN3BXY4xrgfSuxtoCYmJ9uaU7IVVOu0zVsDFtLlOa82kd63KVF+URL0kMdO+FBmvdS6d8Era70Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.12.0.tgz",
+      "integrity": "sha512-TNzVwpeNzFfHAcYTOKqX9iU4fRxliyoZrCnERR+RRzeg7gWrXrCLubQt1WEx0sojMAfznshSL3M5HGsYjEbYwA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.3.0",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.23.0",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.4",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.37.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.12.0.tgz",
+      "integrity": "sha512-wlcEEtexd6u0gbR311/OFZnbtRWU97DUsY6/GsSQzN4rqZ7Ra6YbfHEN5Lutu+I/anomK8vKy8k9NyvfY5Hllg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "^2.12.0",
+        "@tiptap/extension-blockquote": "^2.12.0",
+        "@tiptap/extension-bold": "^2.12.0",
+        "@tiptap/extension-bullet-list": "^2.12.0",
+        "@tiptap/extension-code": "^2.12.0",
+        "@tiptap/extension-code-block": "^2.12.0",
+        "@tiptap/extension-document": "^2.12.0",
+        "@tiptap/extension-dropcursor": "^2.12.0",
+        "@tiptap/extension-gapcursor": "^2.12.0",
+        "@tiptap/extension-hard-break": "^2.12.0",
+        "@tiptap/extension-heading": "^2.12.0",
+        "@tiptap/extension-history": "^2.12.0",
+        "@tiptap/extension-horizontal-rule": "^2.12.0",
+        "@tiptap/extension-italic": "^2.12.0",
+        "@tiptap/extension-list-item": "^2.12.0",
+        "@tiptap/extension-ordered-list": "^2.12.0",
+        "@tiptap/extension-paragraph": "^2.12.0",
+        "@tiptap/extension-strike": "^2.12.0",
+        "@tiptap/extension-text": "^2.12.0",
+        "@tiptap/extension-text-style": "^2.12.0",
+        "@tiptap/pm": "^2.12.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/suggestion": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-2.12.0.tgz",
+      "integrity": "sha512-bsXLoZbjUo1oOF1Z+XSfoGzbcnrTcYtJdfylM/FerMLU9T12dhsM/Ri2SKLX4IR5D0HJ07FcsEHCrGEy8Y5y0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
+      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.56.10",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
+      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
+    "node_modules/@types/express": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.2.tgz",
+      "integrity": "sha512-BtjL3ZwbCQriyb0DGw+Rt12qAXPiBTPs815lsUvtt1Grk0vLRMZNMUZ741d5rjk+UQOxfDiBZ3dxpX00vSkK3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^5.0.0",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz",
+      "integrity": "sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
+      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true
+    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/mdx": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
+      "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/multer": {
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/@types/multer/-/multer-1.4.12.tgz",
+      "integrity": "sha512-pQ2hoqvXiJt2FP9WQVLPRO+AmiIm/ZYkavPlIQnx282u4ZrVdztx0pkh3jjpQt0Kz+YI0YhSG264y08UJKoUQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.2.tgz",
+      "integrity": "sha512-yPL6DyFwY5PiMVEwymNeqUTKsDczQBJ/5T7W/46RwLU/VH+AA8aT5TZkvBviLKLbbm0hlfftEkGrNzfRk/fofQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.11.1"
+      }
+    },
+    "node_modules/@types/pug": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
+      "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
+      "dev": true
+    },
+    "node_modules/@types/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
+      "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/redis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/@types/redis/-/redis-4.0.10.tgz",
+      "integrity": "sha512-7CLy5b5fzzEGVcOccgZjoMlNpPhX6d10jEeRy2YWbFuaMNrSPc9ExRsMYsd+0VxvEHucf4EWx24Ja7cSU1FGUA==",
+      "license": "MIT",
+      "dependencies": {
+        "redis": "*"
+      }
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
+      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/steamapi": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@types/steamapi/-/steamapi-2.2.5.tgz",
+      "integrity": "sha512-cpxm1Fn9B8ZcjNQ79ebC3/20DxaUq8zNF520rctPtX71/PxHT49oLlk2coPsg132zGsTihcOU0umP8qrUrccmA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-ILv1vDA8M9ah1vzYpnOs4UOLRdB63Ki/rsxedVikjMLq68hFfpsDR25bdMZ4RyUkzLJwOhcg3Jujm/C1nupXKA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.0.0-alpha.39",
+        "@typescript-eslint/type-utils": "8.0.0-alpha.39",
+        "@typescript-eslint/utils": "8.0.0-alpha.39",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.39",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-5k+pwV91plJojHgZkWlq4/TQdOrnEaeSvt48V0m8iEwdMJqX/63BXYxy8BUOSghWcjp05s73vy9HJjovAKmHkQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.0.0-alpha.39",
+        "@typescript-eslint/types": "8.0.0-alpha.39",
+        "@typescript-eslint/typescript-estree": "8.0.0-alpha.39",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.39",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.33.0.tgz",
+      "integrity": "sha512-d1hz0u9l6N+u/gcrk6s6gYdl7/+pp8yHheRTqP6X5hVDKALEaTn8WfGiit7G511yueBEL3OpOEpD+3/MBdoN+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.33.0",
+        "@typescript-eslint/types": "^8.33.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service/node_modules/@typescript-eslint/types": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.33.0.tgz",
+      "integrity": "sha512-DKuXOKpM5IDT1FA2g9x9x1Ug81YuKrzf4mYX8FAVSNu5Wo/LELHWQyM1pQaDkI42bX15PWl0vNPt1uGiIFUOpg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-HCBlKQROY+JIgWolucdFMj1W3VUnnIQTdxAhxJTAj3ix2nASmvKIFgrdo5KQMrXxQj6tC4l3zva10L+s0dUIIw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.0.0-alpha.39",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.39"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.33.0.tgz",
+      "integrity": "sha512-sTkETlbqhEoiFmGr1gsdq5HyVbSOF0145SYDJ/EQmXHtKViCaGvnyLqWFFHtEXoS0J1yU8Wyou2UGmgW88fEug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-alO13fRU6yVeJbwl9ESI3AYhq5dQdz3Dpd0I5B4uezs2lvgYp44dZsj5hWyPz/kL7JFEsjbn+4b/CZA0OQJzjA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.0.0-alpha.39",
+        "@typescript-eslint/utils": "8.0.0-alpha.39",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-yINN7j0/+S1VGSp0IgH52oQvUx49vkOug6xbrDA/9o+U55yCAQKSvYWvzYjNa+SZE3hXI0zwvYtMVsIAAMmKIQ==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-S8gREuP8r8PCxGegeojeXntx0P50ul9YH7c7JYpbLIIsEPNr5f7UHlm+I1NUbL04CBin4kvZ60TG4eWr/KKN9A==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.0.0-alpha.39",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.39",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-Nr2PrlfNhrNQTlFHlD7XJdTGw/Vt8qY44irk6bfjn9LxGdSG5e4c1R2UN6kvGMhhx20DBPbM7q3Z3r+huzmL1w==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.0.0-alpha.39",
+        "@typescript-eslint/types": "8.0.0-alpha.39",
+        "@typescript-eslint/typescript-estree": "8.0.0-alpha.39"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-DVJ0UdhucZy+/1GlIy7FX2+CFhCeNAi4VwaEAe7u2UDenQr9/kGqvzx00UlpWibmEVDw4KsPOI7Aqa1+2Vqfmw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.0.0-alpha.39",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.0.9.tgz",
+      "integrity": "sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.0.9",
+        "@vitest/utils": "3.0.9",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.0.9.tgz",
+      "integrity": "sha512-OW9F8t2J3AwFEwENg3yMyKWweF7oRJlMyHOMIhO5F3n0+cgQAJZBjNgrF8dLwFTEXl5jUqBLXd9QyyKv8zEcmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.0.9.tgz",
+      "integrity": "sha512-/CcK2UDl0aQ2wtkp3YVWldrpLRNCfVcIOFGlVGKO4R5eajsH393Z1yiXLVQ7vWsj26JOEjeZI0x5sm5P4OGUNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^3.0.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.0.9.tgz",
+      "integrity": "sha512-ilHM5fHhZ89MCp5aAaM9uhfl1c2JdxVxl3McqsdVyVNN6JffnEen8UMCdRTzOhGXNQGo5GNL9QugHrz727Wnng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.0.9",
+        "loupe": "^3.1.3",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz",
+      "integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==",
+      "license": "MIT"
+    },
+    "node_modules/axe-core": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
+      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "node_modules/better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "open": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "devOptional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
+      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001640",
+        "electron-to-chromium": "^1.4.820",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
+      "integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001641",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz",
+      "integrity": "sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/chai": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.2.0.tgz",
+      "integrity": "sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "devOptional": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "devOptional": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cloudinary": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.6.1.tgz",
+      "integrity": "sha512-Dt7o3p4VzxYoTi+EqWkVQmGy6WiXIyMcG5Gbr9kPR/EQ+jZa+3FFzlDKfDx1uDsaB1aTR1gYeO6wZqrgLFaByQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "q": "^1.5.1"
+      },
+      "engines": {
+        "node": ">=9"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cluster-key-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
+      "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "license": "MIT"
+    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dedent": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.6.0.tgz",
+      "integrity": "sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/devalue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
+      "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.827",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.827.tgz",
+      "integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==",
+      "dev": true
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.38.0.tgz",
+      "integrity": "sha512-OT3AxczYYd3W50bCj4V0hKoOAfqIy9tof0leNQYekEDxVKir3RTVTJOLij7VAe6fsCNsGhC0JqIkURpMXTCSEA==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+      "dev": true
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/esbuild-register": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.6.0.tgz",
+      "integrity": "sha512-ElQkdLMEEqQNM9Njff+2Y4q2afHk7JpkPvrd7Xh7xefwgQynqPxwf55J7di9+MEibWUGdNjFF9ITG9Pck5M84w==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/config-array": "^0.17.0",
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "9.6.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.3.0",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.0.1",
+        "eslint-visitor-keys": "^4.0.0",
+        "espree": "^10.1.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/eslint-compat-utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-storybook": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-9.0.1.tgz",
+      "integrity": "sha512-8WHL0K9c2SY3Ks4jEELQGu1jOJT311NqCN+8ppiKxNogzUUrEe0duaeSKCj6QA+IPtzXgHgbW7vVVk/mu3Nkqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/utils": "^8.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8",
+        "storybook": "^9.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.33.0.tgz",
+      "integrity": "sha512-LMi/oqrzpqxyO72ltP+dBSP6V0xiUb4saY7WLtxSfiNEBI8m321LLVFU9/QDJxjDQG9/tjSqKz/E3380TEqSTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.33.0",
+        "@typescript-eslint/visitor-keys": "8.33.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/types": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.33.0.tgz",
+      "integrity": "sha512-DKuXOKpM5IDT1FA2g9x9x1Ug81YuKrzf4mYX8FAVSNu5Wo/LELHWQyM1pQaDkI42bX15PWl0vNPt1uGiIFUOpg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.33.0.tgz",
+      "integrity": "sha512-vegY4FQoB6jL97Tu/lWRsAiUUp8qJTqzAmENH2k59SJhw0Th1oszb9Idq/FyyONLuNqT1OADJPXfyUNOR8SzAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.33.0",
+        "@typescript-eslint/tsconfig-utils": "8.33.0",
+        "@typescript-eslint/types": "8.33.0",
+        "@typescript-eslint/visitor-keys": "8.33.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.33.0.tgz",
+      "integrity": "sha512-lPFuQaLA9aSNa7D5u2EpRiqdAUhzShwGg/nhpBlc4GR6kcTABttCuyjFs8BcEZ8VWrjCBof/bePhP3Q3fS+Yrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.33.0",
+        "@typescript-eslint/types": "8.33.0",
+        "@typescript-eslint/typescript-estree": "8.33.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.33.0.tgz",
+      "integrity": "sha512-7RW7CMYoskiz5OOGAWjJFxgb7c5UNjTG292gYhWeOAcFmYCtVCSqjqSBj5zMhxbXo2JOW95YYrUWJfU0zrpaGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.33.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/eslint-plugin-svelte": {
+      "version": "2.41.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.41.0.tgz",
+      "integrity": "sha512-gjU9Q/psxbWG1VNwYbEb0Q6U4W5PBGaDpYmO2zlQ+zlAMVS3Qt0luAK0ACi/tMSwRK6JENiySvMyJbO0YWmXSg==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "eslint-compat-utils": "^0.5.1",
+        "esutils": "^2.0.3",
+        "known-css-properties": "^0.34.0",
+        "postcss": "^8.4.38",
+        "postcss-load-config": "^3.1.4",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-selector-parser": "^6.1.0",
+        "semver": "^7.6.2",
+        "svelte-eslint-parser": "^0.39.2"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.155"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.1.tgz",
+      "integrity": "sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "license": "MIT"
+    },
+    "node_modules/espree": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
+      "integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.12.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrap": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
+      "integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/evaluatex": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/evaluatex/-/evaluatex-2.2.0.tgz",
+      "integrity": "sha512-QVtGvYTf9HvQyDjbBCwoDQPP9KMuVB56H8KalrkLsPPCQfngpVmkiIoxJ4FU/SVmlmhnbr/heOmP5VlbCTEJpg==",
+      "license": "MIT"
+    },
+    "node_modules/exifr": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/exifr/-/exifr-7.1.3.tgz",
+      "integrity": "sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "devOptional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "dev": true
+    },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generic-pool": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.9.0.tgz",
+      "integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "node_modules/giantbombing-api": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/giantbombing-api/-/giantbombing-api-1.0.4.tgz",
+      "integrity": "sha512-Ioe+gbdmQ0s2ztlCxfF91ruk2g/UN+36Ae7qCdIvE8zUWRGfWZ/z/xztqX1r087ZSVCRVr3lrERuhFEYsG4CdA==",
+      "license": "MIT",
+      "dependencies": {
+        "request": "^2.69.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.7.0.tgz",
+      "integrity": "sha512-ivatRXWwKC6ImcdKO7dOwXuXR5XFrdwo45qFwD7D0qOkEPzzJdLXC3BHceBdyrPOD3p1suPaWi4Y4NMm2D++AQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.8",
+        "npm": ">=1.3.7"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "devOptional": true
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-meta-resolve": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+      "integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ioredis": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.4.1.tgz",
+      "integrity": "sha512-2YZsvl7jopIa1gaePkeMtd9rAcSjOOjPtpcLlOeusyO+XH2SK5ZcT+UCrElPP+WVIInh2TzeI4XW9ENaSLVVHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ioredis/commands": "^1.1.1",
+        "cluster-key-slot": "^1.1.0",
+        "debug": "^4.3.4",
+        "denque": "^2.1.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.isarguments": "^3.1.0",
+        "redis-errors": "^1.2.0",
+        "redis-parser": "^3.0.0",
+        "standard-as-callback": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ioredis"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-builtin-module": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+      "dependencies": {
+        "builtin-modules": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
+      "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "devOptional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
+    "node_modules/is-reference/node_modules/@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "license": "MIT"
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/isomorphic-unfetch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
+      "integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.6.1",
+        "unfetch": "^4.2.0"
+      }
+    },
+    "node_modules/isomorphic-unfetch/node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "license": "MIT"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "license": "MIT"
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "license": "ISC"
+    },
+    "node_modules/jsprim": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/known-css-properties": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
+      "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
+      "dev": true
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/linkifyjs": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.1.tgz",
+      "integrity": "sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==",
+      "license": "MIT"
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/loupe": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
+      "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lowlight": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
+      "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+    },
+    "node_modules/lucide-svelte": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.511.0.tgz",
+      "integrity": "sha512-cSBj1UPKt1EXnj3VBUidBqwHyFQ83pLYiTaQ/67Q5thnaP9IPohL2UXjqEzgSXXklYPYQKaAv+kmVdliDWFjWQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^3 || ^4 || ^5.0.0-next.42"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==",
+      "license": "ISC"
+    },
+    "node_modules/marked": {
+      "version": "15.0.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/multer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-2.0.0.tgz",
+      "integrity": "sha512-bS8rPZurbAuHGAnApbM9d4h1wSoYqrOqkE+6a64KLMK9yWU7gJXBDDVklKQ3TPi9DRb85cRs6yXaC0+cjxRtRg==",
+      "license": "MIT",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.0.0",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.4",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/node-itunes-search": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/node-itunes-search/-/node-itunes-search-1.2.3.tgz",
+      "integrity": "sha512-CctU1Fx6FB1E6IDIvJkt1wsahxTwhIZ9ppv+5dodjbftWXZMLvVnr84q8tnCAZf1WQwABKviD+zkR3Bq4W8gpw==",
+      "license": "MIT",
+      "dependencies": {
+        "phin": "^2.9.3"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT"
+    },
+    "node_modules/phin": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
+      "integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.5.tgz",
+      "integrity": "sha512-vP/M/Goc8z4iVIvrwXwbrYVjJgA0Hf8PO1G4LBh/ocSt6vUP6sLvyu9F3ABEGr+dbKyxZjEKLkeFsWy/yYl0HQ==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/prisma": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.8.2.tgz",
+      "integrity": "sha512-JNricTXQxzDtRS7lCGGOB4g5DJ91eg3nozdubXze3LpcMl1oWwcFddrj++Up3jnRE6X/3gB/xz3V+ecBk/eEGA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/config": "6.8.2",
+        "@prisma/engines": "6.8.2"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=18.18"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.0.tgz",
+      "integrity": "sha512-8wRKhlEwEJ4I13Ju54q2NZR1pVKGTgJ/8XsQ8L5A5uUsQ/YQScQJuEAuh8Bn8i6IwAMjjLRABd9lVli+DlIiVw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz",
+      "integrity": "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.2.tgz",
+      "integrity": "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz",
+      "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.1.tgz",
+      "integrity": "sha512-AUvbm7qqmpZa5d9fPKMvH1Q5bqYQvAZWOGRvxsB6iFLyycvC9MwNemNVjHVrWgjaoxAfY8XVg7DbvQ/qxvI9Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+      "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.7.1.tgz",
+      "integrity": "sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-model": "^1.25.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-transform": "^1.10.3",
+        "prosemirror-view": "^1.39.1"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.22.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.33.8"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz",
+      "integrity": "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.39.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.39.3.tgz",
+      "integrity": "sha512-bY/7kg0LzRE7ytR0zRdSMWX3sknEjw68l836ffLPMh0OG3OYnNuBDUSF3v0vjvnzgYjgY9ZH/RypbARURlcMFA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "license": "MIT"
+    },
+    "node_modules/psn-api": {
+      "version": "0.0.0-development",
+      "resolved": "git+ssh://git@github.com/jedmund/psn-api.git#4ec4930d4ad9080d7c8d04103956107ec26af7e1",
+      "license": "MIT",
+      "dependencies": {
+        "isomorphic-unfetch": "^3.1.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+      "deprecated": "You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.\n\n(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.0",
+        "teleport": ">=0.2.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/redis": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/redis/-/redis-4.7.0.tgz",
+      "integrity": "sha512-zvmkHEAdGMn+hMRXuMBtu4Vo5P6rHQjLoHftu+lBqq8ZTA3RCVC/WzD790bkKKiNFp7d5/9PcSD19fJyyRvOdQ==",
+      "license": "MIT",
+      "workspaces": [
+        "./packages/*"
+      ],
+      "dependencies": {
+        "@redis/bloom": "1.2.0",
+        "@redis/client": "1.6.0",
+        "@redis/graph": "1.1.1",
+        "@redis/json": "1.0.7",
+        "@redis/search": "1.2.0",
+        "@redis/time-series": "1.1.0"
+      }
+    },
+    "node_modules/redis-errors": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
+      "integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/redis-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
+      "integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
+      "license": "MIT",
+      "dependencies": {
+        "redis-errors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/request": {
+      "version": "2.88.2",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.3",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.5.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
+      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.18.0",
+        "@rollup/rollup-android-arm64": "4.18.0",
+        "@rollup/rollup-darwin-arm64": "4.18.0",
+        "@rollup/rollup-darwin-x64": "4.18.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
+        "@rollup/rollup-linux-arm64-musl": "4.18.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-gnu": "4.18.0",
+        "@rollup/rollup-linux-x64-musl": "4.18.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
+        "@rollup/rollup-win32-x64-msvc": "4.18.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "dependencies": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
+      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
+    },
+    "node_modules/sharp": {
+      "version": "0.34.2",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.2.tgz",
+      "integrity": "sha512-lszvBmB9QURERtyKT2bNmsgxXK0ShJrL/fvqlonCo7e6xBF8nT8xU6pW+PMIbLsz0RxQk3rgH9kd8UmvOzlMJg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.4",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.2",
+        "@img/sharp-darwin-x64": "0.34.2",
+        "@img/sharp-libvips-darwin-arm64": "1.1.0",
+        "@img/sharp-libvips-darwin-x64": "1.1.0",
+        "@img/sharp-libvips-linux-arm": "1.1.0",
+        "@img/sharp-libvips-linux-arm64": "1.1.0",
+        "@img/sharp-libvips-linux-ppc64": "1.1.0",
+        "@img/sharp-libvips-linux-s390x": "1.1.0",
+        "@img/sharp-libvips-linux-x64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
+        "@img/sharp-linux-arm": "0.34.2",
+        "@img/sharp-linux-arm64": "0.34.2",
+        "@img/sharp-linux-s390x": "0.34.2",
+        "@img/sharp-linux-x64": "0.34.2",
+        "@img/sharp-linuxmusl-arm64": "0.34.2",
+        "@img/sharp-linuxmusl-x64": "0.34.2",
+        "@img/sharp-wasm32": "0.34.2",
+        "@img/sharp-win32-arm64": "0.34.2",
+        "@img/sharp-win32-ia32": "0.34.2",
+        "@img/sharp-win32-x64": "0.34.2"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sorcery": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.1.tgz",
+      "integrity": "sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.14",
+        "buffer-crc32": "^1.0.0",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0"
+      },
+      "bin": {
+        "sorcery": "bin/sorcery"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/standard-as-callback": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
+      "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
+      "license": "MIT"
+    },
+    "node_modules/steamapi": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/steamapi/-/steamapi-3.0.11.tgz",
+      "integrity": "sha512-8thxYSeMbzUO5P6nVelTaHNcfhVcYG4N9K/5zDfuCOwlk7jIZb0Zfez5yRSqDZXDuAiu6YlhR+LuiJl3eexdkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^3.3.2",
+        "steamid": "^2.0.0"
+      }
+    },
+    "node_modules/steamid": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/steamid/-/steamid-2.0.0.tgz",
+      "integrity": "sha512-+BFJMbo+IxzyfovLR37E7APkaNfmrL3S+88T7wTMRHnQ6LBhzEawPnjfWNKM9eUL/dH45j+7vhSX4WaGXoa4/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/storybook": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-9.0.1.tgz",
+      "integrity": "sha512-WE6tTNUl0Xwa/vT4dv2PcNUeujE9pKY4ruGVLsNV7r7lvQla5Jsqi/eWePjU3kuTmi2BcQqLXfapMy0kM3dabw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/user-event": "^14.6.1",
+        "@vitest/expect": "3.0.9",
+        "@vitest/spy": "3.0.9",
+        "better-opn": "^3.0.2",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
+        "esbuild-register": "^3.5.0",
+        "recast": "^0.23.5",
+        "semver": "^7.6.2",
+        "ws": "^8.18.0"
+      },
+      "bin": {
+        "storybook": "bin/index.cjs"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "5.33.6",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.33.6.tgz",
+      "integrity": "sha512-bxg2QY03JlrilCZmDlshY95Argj0rnX43UQFWZN4fct8PZTNBBmvfow2A6yOW1+YweDjhC2qdZF66ASI0Y21Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@sveltejs/acorn-typescript": "^1.0.5",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.6",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/svelte-ast-print": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/svelte-ast-print/-/svelte-ast-print-0.4.2.tgz",
+      "integrity": "sha512-hRHHufbJoArFmDYQKCpCvc0xUuIEfwYksvyLYEQyH+1xb5LD5sM/IthfooCdXZQtOIqXz6xm7NmaqdfwG4kh6w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/xeho91"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/xeho91"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "esrap": "1.2.2",
+        "zimmerframe": "1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0"
+      }
+    },
+    "node_modules/svelte-ast-print/node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
+    "node_modules/svelte-check": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.8.4.tgz",
+      "integrity": "sha512-61aHMkdinWyH8BkkTX9jPLYxYzaAAz/FK/VQqdr2FiCQQ/q04WCwDlpGbHff1GdrMYTmW8chlTFvRWL9k0A8vg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "chokidar": "^3.4.1",
+        "picocolors": "^1.0.0",
+        "sade": "^1.7.4",
+        "svelte-preprocess": "^5.1.3",
+        "typescript": "^5.0.3"
+      },
+      "bin": {
+        "svelte-check": "bin/svelte-check"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
+      }
+    },
+    "node_modules/svelte-eslint-parser": {
+      "version": "0.39.2",
+      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.39.2.tgz",
+      "integrity": "sha512-87UwLuWTtDIuzWOhOi1zBL5wYVd07M5BK1qZ57YmXJB5/UmjUNJqGy3XSOhPqjckY1dATNV9y+mx+nI0WH6HPA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "postcss": "^8.4.38",
+        "postcss-scss": "^4.0.9"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      },
+      "peerDependencies": {
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.115"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/svelte-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/svelte-eslint-parser/node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/svelte-preprocess": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
+      "integrity": "sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/pug": "^2.0.6",
+        "detect-indent": "^6.1.0",
+        "magic-string": "^0.30.5",
+        "sorcery": "^0.11.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.10.2",
+        "coffeescript": "^2.5.1",
+        "less": "^3.11.3 || ^4.0.0",
+        "postcss": "^7 || ^8",
+        "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+        "pug": "^3.0.0",
+        "sass": "^1.26.8",
+        "stylus": "^0.55.0",
+        "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0",
+        "typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "coffeescript": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "postcss-load-config": {
+          "optional": true
+        },
+        "pug": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/svelte-tiptap": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-tiptap/-/svelte-tiptap-2.1.0.tgz",
+      "integrity": "sha512-CtmBM4RzJ7dibuglG6g8YsiyEiaFWAu6qFuX73STuxKFJqoBuqXQWpJqQRttrUWVp/rrrDFjd08zyC1Zzrl/Qg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.3",
+        "@tiptap/extension-bubble-menu": "^2.0.3",
+        "@tiptap/extension-floating-menu": "^2.0.3",
+        "@tiptap/pm": "^2.0.3",
+        "svelte": "^5.0.0"
+      }
+    },
+    "node_modules/svelte2tsx": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.39.tgz",
+      "integrity": "sha512-NX8a7eSqF1hr6WKArvXr7TV7DeE+y0kDFD7L5JP7TWqlwFidzGKaG415p992MHREiiEWOv2xIWXJ+mlONofs0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+        "typescript": "^4.9.4 || ^5.0.0"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dependencies": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyduration": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tinyduration/-/tinyduration-3.3.1.tgz",
+      "integrity": "sha512-39iO6CyHMFTPv9PKFxXPXa1DDc2JHog4oGK6x3fG75T+chRO+SKmuEPT00myYs3aGFIq3nQ6U5J5c5hR0PMKjw==",
+      "license": "MIT"
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
+    "node_modules/tiptap-extension-auto-joiner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/tiptap-extension-auto-joiner/-/tiptap-extension-auto-joiner-0.1.3.tgz",
+      "integrity": "sha512-nY3aKeCpVb2WjjVEZkLtEqxsK3KU1zGioyglMhK1sUFNjKDccOfRyz/YDKrHRAVsKJPGnk2A8VA1827iGEAXWQ==",
+      "license": "MIT"
+    },
+    "node_modules/tiptap-extension-global-drag-handle": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/tiptap-extension-global-drag-handle/-/tiptap-extension-global-drag-handle-0.1.18.tgz",
+      "integrity": "sha512-jwFuy1K8DP3a4bFy76Hpc63w1Sil0B7uZ3mvhQomVvUFCU787Lg2FowNhn7NFzeyok761qY2VG+PZ/FDthWUdg==",
+      "license": "MIT"
+    },
+    "node_modules/tiptap-markdown": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.8.10.tgz",
+      "integrity": "sha512-iDVkR2BjAqkTDtFX0h94yVvE2AihCXlF0Q7RIXSJPRSR5I0PA1TMuAg6FHFpmqTn4tPxJ0by0CK7PUMlnFLGEQ==",
+      "license": "MIT",
+      "workspaces": [
+        "example"
+      ],
+      "dependencies": {
+        "@types/markdown-it": "^13.0.7",
+        "markdown-it": "^14.1.0",
+        "markdown-it-task-lists": "^2.1.1",
+        "prosemirror-markdown": "^1.11.1"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.3"
+      }
+    },
+    "node_modules/tiptap-markdown/node_modules/@types/linkify-it": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
+      "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==",
+      "license": "MIT"
+    },
+    "node_modules/tiptap-markdown/node_modules/@types/markdown-it": {
+      "version": "13.0.9",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.9.tgz",
+      "integrity": "sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^3",
+        "@types/mdurl": "^1"
+      }
+    },
+    "node_modules/tiptap-markdown/node_modules/@types/mdurl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
+      "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==",
+      "license": "MIT"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "devOptional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "devOptional": true,
+      "license": "0BSD"
+    },
+    "node_modules/tsx": {
+      "version": "4.19.4",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.4.tgz",
+      "integrity": "sha512-gK5GVzDkJK1SI1zwHf32Mqxf2tSJkNx+eYcNly5+nHvWqXUJYUkWBQtKauoESz3ymezAI++ZwT855x5p5eop+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.25.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
+      "integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
+      "integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
+      "integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
+      "integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
+      "integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
+      "integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
+      "integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
+      "integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
+      "integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
+      "integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
+      "integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
+      "integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
+      "integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
+      "integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
+      "integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
+      "integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
+      "integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
+      "integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
+      "integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.5.tgz",
+      "integrity": "sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/esbuild": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
+      "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.5",
+        "@esbuild/android-arm": "0.25.5",
+        "@esbuild/android-arm64": "0.25.5",
+        "@esbuild/android-x64": "0.25.5",
+        "@esbuild/darwin-arm64": "0.25.5",
+        "@esbuild/darwin-x64": "0.25.5",
+        "@esbuild/freebsd-arm64": "0.25.5",
+        "@esbuild/freebsd-x64": "0.25.5",
+        "@esbuild/linux-arm": "0.25.5",
+        "@esbuild/linux-arm64": "0.25.5",
+        "@esbuild/linux-ia32": "0.25.5",
+        "@esbuild/linux-loong64": "0.25.5",
+        "@esbuild/linux-mips64el": "0.25.5",
+        "@esbuild/linux-ppc64": "0.25.5",
+        "@esbuild/linux-riscv64": "0.25.5",
+        "@esbuild/linux-s390x": "0.25.5",
+        "@esbuild/linux-x64": "0.25.5",
+        "@esbuild/netbsd-arm64": "0.25.5",
+        "@esbuild/netbsd-x64": "0.25.5",
+        "@esbuild/openbsd-arm64": "0.25.5",
+        "@esbuild/openbsd-x64": "0.25.5",
+        "@esbuild/sunos-x64": "0.25.5",
+        "@esbuild/win32-arm64": "0.25.5",
+        "@esbuild/win32-ia32": "0.25.5",
+        "@esbuild/win32-x64": "0.25.5"
+      }
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "license": "Unlicense"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
+    "node_modules/typescript": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "devOptional": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.0.0-alpha.39.tgz",
+      "integrity": "sha512-bsuR1BVJfHr7sBh7Cca962VPIcP+5UWaIa/+6PpnFZ+qtASjGTxKWIF5dG2o73BX9NsyqQfvRWujb3M9CIoRXA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.0.0-alpha.39",
+        "@typescript-eslint/parser": "8.0.0-alpha.39",
+        "@typescript-eslint/utils": "8.0.0-alpha.39"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz",
+      "integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==",
+      "license": "MIT"
+    },
+    "node_modules/unfetch": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
+      "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==",
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "license": "MIT",
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.2.tgz",
+      "integrity": "sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitefu": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
+      "integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
+      "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*"
+      ],
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/ws": {
+      "version": "8.18.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
+      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
+    },
+    "node_modules/zod": {
+      "version": "3.25.30",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.30.tgz",
+      "integrity": "sha512-VolhdEtu6TJr/fzGuHA/SZ5ixvXqA6ADOG9VRcQ3rdOKmF5hkmcJbyaQjUH5BgmpA9gej++zYRX7zjSmdReIwA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
index 64d2243..42a0a38 100644
--- a/package.json
+++ b/package.json
@@ -10,46 +10,108 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"db:migrate": "prisma migrate dev",
+		"db:seed": "prisma db seed",
+		"db:studio": "prisma studio",
+		"setup:local": "./scripts/setup-local.sh",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
 		"@musicorum/lastfm": "github:jedmund/lastfm",
 		"@poppanator/sveltekit-svg": "^5.0.0-svelte5.4",
+		"@storybook/addon-a11y": "^9.0.1",
+		"@storybook/addon-docs": "^9.0.1",
+		"@storybook/addon-svelte-csf": "^5.0.3",
+		"@storybook/sveltekit": "^9.0.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@types/eslint": "^8.56.7",
 		"@types/node": "^22.0.2",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-storybook": "^9.0.1",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"postcss": "^8.4.39",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"sass": "^1.77.8",
+		"storybook": "^9.0.1",
 		"svelte": "^5.0.0-next.1",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
+		"tsx": "^4.19.4",
 		"typescript": "^5.5.3",
 		"typescript-eslint": "^8.0.0-alpha.20",
 		"vite": "^5.0.3"
 	},
 	"type": "module",
 	"dependencies": {
+		"@aarkue/tiptap-math-extension": "^1.3.6",
+		"@prisma/client": "^6.8.2",
 		"@sveltejs/adapter-node": "^5.2.0",
+		"@tiptap/core": "^2.12.0",
+		"@tiptap/extension-bubble-menu": "^2.12.0",
+		"@tiptap/extension-character-count": "^2.12.0",
+		"@tiptap/extension-code-block-lowlight": "^2.12.0",
+		"@tiptap/extension-color": "^2.12.0",
+		"@tiptap/extension-floating-menu": "^2.12.0",
+		"@tiptap/extension-highlight": "^2.12.0",
+		"@tiptap/extension-image": "^2.12.0",
+		"@tiptap/extension-link": "^2.12.0",
+		"@tiptap/extension-placeholder": "^2.12.0",
+		"@tiptap/extension-subscript": "^2.12.0",
+		"@tiptap/extension-superscript": "^2.12.0",
+		"@tiptap/extension-table": "^2.12.0",
+		"@tiptap/extension-table-header": "^2.12.0",
+		"@tiptap/extension-table-row": "^2.12.0",
+		"@tiptap/extension-task-item": "^2.12.0",
+		"@tiptap/extension-task-list": "^2.12.0",
+		"@tiptap/extension-text": "^2.12.0",
+		"@tiptap/extension-text-align": "^2.12.0",
+		"@tiptap/extension-text-style": "^2.12.0",
+		"@tiptap/extension-typography": "^2.12.0",
+		"@tiptap/extension-underline": "^2.12.0",
+		"@tiptap/pm": "^2.12.0",
+		"@tiptap/starter-kit": "^2.12.0",
+		"@tiptap/suggestion": "^2.12.0",
+		"@types/multer": "^1.4.12",
 		"@types/redis": "^4.0.10",
 		"@types/steamapi": "^2.2.5",
-		"dotenv": "^16.4.5",
+		"cloudinary": "^2.6.1",
+		"dotenv": "^16.5.0",
+		"exifr": "^7.1.3",
 		"giantbombing-api": "^1.0.4",
 		"gray-matter": "^4.0.3",
 		"ioredis": "^5.4.1",
+		"katex": "^0.16.22",
+		"lowlight": "^3.3.0",
+		"lucide-svelte": "^0.511.0",
 		"marked": "^15.0.12",
+		"multer": "^2.0.0",
 		"node-itunes-search": "^1.2.3",
+		"prisma": "^6.8.2",
 		"psn-api": "github:jedmund/psn-api",
 		"redis": "^4.7.0",
+		"sharp": "^0.34.2",
 		"steamapi": "^3.0.11",
-		"tinyduration": "^3.3.1"
+		"svelte-tiptap": "^2.1.0",
+		"svgo": "^3.3.2",
+		"tinyduration": "^3.3.1",
+		"tippy.js": "^6.3.7",
+		"tiptap-extension-auto-joiner": "^0.1.3",
+		"tiptap-extension-global-drag-handle": "^0.1.18",
+		"tiptap-markdown": "^0.8.10",
+		"zod": "^3.25.30"
+	},
+	"prisma": {
+		"seed": "tsx prisma/seed.ts"
+	},
+	"overrides": {
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"
 	}
 }
diff --git a/prisma/migrations/20250527040429_initial_setup/migration.sql b/prisma/migrations/20250527040429_initial_setup/migration.sql
new file mode 100644
index 0000000..51513d4
--- /dev/null
+++ b/prisma/migrations/20250527040429_initial_setup/migration.sql
@@ -0,0 +1,149 @@
+-- CreateTable
+CREATE TABLE "Project" (
+    "id" SERIAL NOT NULL,
+    "slug" VARCHAR(255) NOT NULL,
+    "title" VARCHAR(255) NOT NULL,
+    "subtitle" VARCHAR(255),
+    "description" TEXT,
+    "year" INTEGER NOT NULL,
+    "client" VARCHAR(255),
+    "role" VARCHAR(255),
+    "technologies" JSONB,
+    "featuredImage" VARCHAR(500),
+    "gallery" JSONB,
+    "externalUrl" VARCHAR(500),
+    "caseStudyContent" JSONB,
+    "displayOrder" INTEGER NOT NULL DEFAULT 0,
+    "status" VARCHAR(50) NOT NULL DEFAULT 'draft',
+    "publishedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Project_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" SERIAL NOT NULL,
+    "slug" VARCHAR(255) NOT NULL,
+    "postType" VARCHAR(50) NOT NULL,
+    "title" VARCHAR(255),
+    "content" JSONB,
+    "excerpt" TEXT,
+    "linkUrl" VARCHAR(500),
+    "linkDescription" TEXT,
+    "photoId" INTEGER,
+    "albumId" INTEGER,
+    "featuredImage" VARCHAR(500),
+    "tags" JSONB,
+    "status" VARCHAR(50) NOT NULL DEFAULT 'draft',
+    "publishedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Album" (
+    "id" SERIAL NOT NULL,
+    "slug" VARCHAR(255) NOT NULL,
+    "title" VARCHAR(255) NOT NULL,
+    "description" TEXT,
+    "date" TIMESTAMP(3),
+    "location" VARCHAR(255),
+    "coverPhotoId" INTEGER,
+    "status" VARCHAR(50) NOT NULL DEFAULT 'draft',
+    "showInUniverse" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Album_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Photo" (
+    "id" SERIAL NOT NULL,
+    "albumId" INTEGER,
+    "filename" VARCHAR(255) NOT NULL,
+    "url" VARCHAR(500) NOT NULL,
+    "thumbnailUrl" VARCHAR(500),
+    "width" INTEGER,
+    "height" INTEGER,
+    "exifData" JSONB,
+    "caption" TEXT,
+    "displayOrder" INTEGER NOT NULL DEFAULT 0,
+    "slug" VARCHAR(255),
+    "title" VARCHAR(255),
+    "description" TEXT,
+    "status" VARCHAR(50) NOT NULL DEFAULT 'draft',
+    "publishedAt" TIMESTAMP(3),
+    "showInPhotos" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Photo_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Media" (
+    "id" SERIAL NOT NULL,
+    "filename" VARCHAR(255) NOT NULL,
+    "mimeType" VARCHAR(100) NOT NULL,
+    "size" INTEGER NOT NULL,
+    "url" TEXT NOT NULL,
+    "thumbnailUrl" TEXT,
+    "width" INTEGER,
+    "height" INTEGER,
+    "usedIn" JSONB NOT NULL DEFAULT '[]',
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Media_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Project_slug_key" ON "Project"("slug");
+
+-- CreateIndex
+CREATE INDEX "Project_slug_idx" ON "Project"("slug");
+
+-- CreateIndex
+CREATE INDEX "Project_status_idx" ON "Project"("status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Post_slug_key" ON "Post"("slug");
+
+-- CreateIndex
+CREATE INDEX "Post_slug_idx" ON "Post"("slug");
+
+-- CreateIndex
+CREATE INDEX "Post_status_idx" ON "Post"("status");
+
+-- CreateIndex
+CREATE INDEX "Post_postType_idx" ON "Post"("postType");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Album_slug_key" ON "Album"("slug");
+
+-- CreateIndex
+CREATE INDEX "Album_slug_idx" ON "Album"("slug");
+
+-- CreateIndex
+CREATE INDEX "Album_status_idx" ON "Album"("status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Photo_slug_key" ON "Photo"("slug");
+
+-- CreateIndex
+CREATE INDEX "Photo_slug_idx" ON "Photo"("slug");
+
+-- CreateIndex
+CREATE INDEX "Photo_status_idx" ON "Photo"("status");
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD CONSTRAINT "Post_photoId_fkey" FOREIGN KEY ("photoId") REFERENCES "Photo"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD CONSTRAINT "Post_albumId_fkey" FOREIGN KEY ("albumId") REFERENCES "Album"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_albumId_fkey" FOREIGN KEY ("albumId") REFERENCES "Album"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/migrations/20250527053447_add_project_colors/migration.sql b/prisma/migrations/20250527053447_add_project_colors/migration.sql
new file mode 100644
index 0000000..1c82557
--- /dev/null
+++ b/prisma/migrations/20250527053447_add_project_colors/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "backgroundColor" VARCHAR(50),
+ADD COLUMN     "highlightColor" VARCHAR(50);
diff --git a/prisma/migrations/20250530011034_add_project_logo/migration.sql b/prisma/migrations/20250530011034_add_project_logo/migration.sql
new file mode 100644
index 0000000..28f49d5
--- /dev/null
+++ b/prisma/migrations/20250530011034_add_project_logo/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN "logoUrl" VARCHAR(500);
\ No newline at end of file
diff --git a/prisma/migrations/20250531071811_add_media_alt_text/migration.sql b/prisma/migrations/20250531071811_add_media_alt_text/migration.sql
new file mode 100644
index 0000000..1192e93
--- /dev/null
+++ b/prisma/migrations/20250531071811_add_media_alt_text/migration.sql
@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - Added the required column `updatedAt` to the `Media` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Media" ADD COLUMN     "altText" TEXT,
+ADD COLUMN     "description" TEXT,
+ADD COLUMN     "originalName" VARCHAR(255),
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- Set originalName to filename for existing records where it's null
+UPDATE "Media" SET "originalName" = "filename" WHERE "originalName" IS NULL;
diff --git a/prisma/migrations/20250531181345_remove_technologies_field/migration.sql b/prisma/migrations/20250531181345_remove_technologies_field/migration.sql
new file mode 100644
index 0000000..5a9e0d9
--- /dev/null
+++ b/prisma/migrations/20250531181345_remove_technologies_field/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `technologies` on the `Project` table. All the data in this column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Project" DROP COLUMN "technologies";
\ No newline at end of file
diff --git a/prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql b/prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql
new file mode 100644
index 0000000..ef09f17
--- /dev/null
+++ b/prisma/migrations/20250531202127_add_media_usage_tracking/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Media" ALTER COLUMN "updatedAt" DROP DEFAULT;
diff --git a/prisma/migrations/20250531210030_add_post_attachments/migration.sql b/prisma/migrations/20250531210030_add_post_attachments/migration.sql
new file mode 100644
index 0000000..9ff3a25
--- /dev/null
+++ b/prisma/migrations/20250531210030_add_post_attachments/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Post" ADD COLUMN     "attachments" JSONB;
diff --git a/prisma/migrations/20250531213353_add_photography_flags/migration.sql b/prisma/migrations/20250531213353_add_photography_flags/migration.sql
new file mode 100644
index 0000000..fc6810e
--- /dev/null
+++ b/prisma/migrations/20250531213353_add_photography_flags/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Album" ADD COLUMN     "isPhotography" BOOLEAN NOT NULL DEFAULT false;
+
+-- AlterTable
+ALTER TABLE "Media" ADD COLUMN     "isPhotography" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql b/prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql
new file mode 100644
index 0000000..1a74b7c
--- /dev/null
+++ b/prisma/migrations/20250601021128_add_project_type_and_password_protection/migration.sql
@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "Media" ADD COLUMN     "exifData" JSONB;
+
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "password" VARCHAR(255),
+ADD COLUMN     "projectType" VARCHAR(50) NOT NULL DEFAULT 'work';
diff --git a/prisma/migrations/20250602194010_remove_post_excerpt/migration.sql b/prisma/migrations/20250602194010_remove_post_excerpt/migration.sql
new file mode 100644
index 0000000..19688ec
--- /dev/null
+++ b/prisma/migrations/20250602194010_remove_post_excerpt/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Post" DROP COLUMN "excerpt";
\ No newline at end of file
diff --git a/prisma/migrations/add_media_usage_tracking/migration.sql b/prisma/migrations/add_media_usage_tracking/migration.sql
new file mode 100644
index 0000000..6cbd7e3
--- /dev/null
+++ b/prisma/migrations/add_media_usage_tracking/migration.sql
@@ -0,0 +1,24 @@
+-- CreateTable
+CREATE TABLE "MediaUsage" (
+    "id" SERIAL NOT NULL,
+    "mediaId" INTEGER NOT NULL,
+    "contentType" VARCHAR(50) NOT NULL,
+    "contentId" INTEGER NOT NULL,
+    "fieldName" VARCHAR(100) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "MediaUsage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "MediaUsage_mediaId_idx" ON "MediaUsage"("mediaId");
+
+-- CreateIndex
+CREATE INDEX "MediaUsage_contentType_contentId_idx" ON "MediaUsage"("contentType", "contentId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "MediaUsage_mediaId_contentType_contentId_fieldName_key" ON "MediaUsage"("mediaId", "contentType", "contentId", "fieldName");
+
+-- AddForeignKey
+ALTER TABLE "MediaUsage" ADD CONSTRAINT "MediaUsage_mediaId_fkey" FOREIGN KEY ("mediaId") REFERENCES "Media"("id") ON DELETE CASCADE ON UPDATE CASCADE;
\ No newline at end of file
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..044d57c
--- /dev/null
+++ b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
new file mode 100644
index 0000000..e918944
--- /dev/null
+++ b/prisma/schema.prisma
@@ -0,0 +1,166 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+// Projects table (for /work)
+model Project {
+  id                 Int       @id @default(autoincrement())
+  slug               String    @unique @db.VarChar(255)
+  title              String    @db.VarChar(255)
+  subtitle           String?   @db.VarChar(255)
+  description        String?   @db.Text
+  year               Int
+  client             String?   @db.VarChar(255)
+  role               String?   @db.VarChar(255)
+  featuredImage      String?   @db.VarChar(500)
+  logoUrl            String?   @db.VarChar(500)
+  gallery            Json?     // Array of image URLs
+  externalUrl        String?   @db.VarChar(500)
+  caseStudyContent   Json?     // BlockNote JSON format
+  backgroundColor    String?   @db.VarChar(50)  // For project card styling
+  highlightColor     String?   @db.VarChar(50)  // For project card accent
+  projectType        String    @default("work") @db.VarChar(50) // "work" or "labs"
+  displayOrder       Int       @default(0)
+  status             String    @default("draft") @db.VarChar(50) // "draft", "published", "list-only", "password-protected"
+  password           String?   @db.VarChar(255) // Required when status is "password-protected"
+  publishedAt        DateTime?
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  
+  @@index([slug])
+  @@index([status])
+}
+
+// Posts table (for /universe)
+model Post {
+  id                 Int       @id @default(autoincrement())
+  slug               String    @unique @db.VarChar(255)
+  postType           String    @db.VarChar(50) // blog, microblog, link, photo, album
+  title              String?   @db.VarChar(255) // Optional for microblog posts
+  content            Json?     // BlockNote JSON for blog/microblog
+  
+  // Type-specific fields
+  linkUrl            String?   @db.VarChar(500)
+  linkDescription    String?   @db.Text
+  photoId            Int?
+  albumId            Int?
+  
+  featuredImage      String?   @db.VarChar(500)
+  attachments        Json?     // Array of media IDs for photo attachments
+  tags               Json?     // Array of tags
+  status             String    @default("draft") @db.VarChar(50)
+  publishedAt        DateTime?
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  
+  // Relations
+  photo              Photo?    @relation(fields: [photoId], references: [id])
+  album              Album?    @relation(fields: [albumId], references: [id])
+  
+  @@index([slug])
+  @@index([status])
+  @@index([postType])
+}
+
+// Albums table
+model Album {
+  id                 Int       @id @default(autoincrement())
+  slug               String    @unique @db.VarChar(255)
+  title              String    @db.VarChar(255)
+  description        String?   @db.Text
+  date               DateTime?
+  location           String?   @db.VarChar(255)
+  coverPhotoId       Int?
+  isPhotography      Boolean   @default(false)   // Show in photos experience
+  status             String    @default("draft") @db.VarChar(50)
+  showInUniverse     Boolean   @default(false)
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  
+  // Relations
+  photos             Photo[]
+  posts              Post[]
+  
+  @@index([slug])
+  @@index([status])
+}
+
+// Photos table
+model Photo {
+  id                 Int       @id @default(autoincrement())
+  albumId            Int?
+  filename           String    @db.VarChar(255)
+  url                String    @db.VarChar(500)
+  thumbnailUrl       String?   @db.VarChar(500)
+  width              Int?
+  height             Int?
+  exifData           Json?
+  caption            String?   @db.Text
+  displayOrder       Int       @default(0)
+  
+  // Individual publishing support
+  slug               String?   @unique @db.VarChar(255)
+  title              String?   @db.VarChar(255)
+  description        String?   @db.Text
+  status             String    @default("draft") @db.VarChar(50)
+  publishedAt        DateTime?
+  showInPhotos       Boolean   @default(true)
+  
+  createdAt          DateTime  @default(now())
+  
+  // Relations
+  album              Album?    @relation(fields: [albumId], references: [id], onDelete: Cascade)
+  posts              Post[]
+  
+  @@index([slug])
+  @@index([status])
+}
+
+// Media table (general uploads)
+model Media {
+  id                 Int       @id @default(autoincrement())
+  filename           String    @db.VarChar(255)
+  originalName       String?   @db.VarChar(255)  // Original filename from user (optional for backward compatibility)
+  mimeType           String    @db.VarChar(100)
+  size               Int
+  url                String    @db.Text
+  thumbnailUrl       String?   @db.Text
+  width              Int?
+  height             Int?
+  exifData           Json?                       // EXIF data for photos
+  altText            String?   @db.Text          // Alt text for accessibility
+  description        String?   @db.Text          // Optional description
+  isPhotography      Boolean   @default(false)   // Star for photos experience
+  usedIn             Json      @default("[]")    // Track where media is used (legacy)
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  
+  // Relations
+  usage              MediaUsage[]
+}
+
+// Media usage tracking table
+model MediaUsage {
+  id                 Int       @id @default(autoincrement())
+  mediaId            Int
+  contentType        String    @db.VarChar(50)   // 'project', 'post', 'album'
+  contentId          Int
+  fieldName          String    @db.VarChar(100)  // 'featuredImage', 'logoUrl', 'gallery', 'content'
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  
+  // Relations
+  media              Media     @relation(fields: [mediaId], references: [id], onDelete: Cascade)
+  
+  @@unique([mediaId, contentType, contentId, fieldName])
+  @@index([mediaId])
+  @@index([contentType, contentId])
+}
\ No newline at end of file
diff --git a/prisma/seed.ts b/prisma/seed.ts
new file mode 100644
index 0000000..02aaa61
--- /dev/null
+++ b/prisma/seed.ts
@@ -0,0 +1,376 @@
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+async function main() {
+	console.log('🌱 Starting seed...')
+
+	// Clear existing data
+	await prisma.photo.deleteMany({})
+	await prisma.album.deleteMany({})
+	await prisma.post.deleteMany({})
+	await prisma.media.deleteMany({})
+	await prisma.project.deleteMany({})
+	console.log('✅ Cleared existing data')
+
+	// Create real projects from ProjectList
+	const projects = await Promise.all([
+		prisma.project.create({
+			data: {
+				slug: 'maitsu',
+				title: 'Maitsu',
+				subtitle: 'A hobby journal for weekly creativity',
+				description: 'Maitsu is a hobby journal that helps people make something new every week.',
+				year: 2023,
+				client: 'Personal Project',
+				role: 'Founder & Designer',
+				projectType: 'work',
+				featuredImage: '/images/projects/maitsu-cover.png',
+				backgroundColor: '#FFF7EA',
+				highlightColor: '#F77754',
+				displayOrder: 1,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.project.create({
+			data: {
+				slug: 'slack',
+				title: 'Slack',
+				subtitle: 'Redefining automation strategy',
+				description:
+					'At Slack, I helped redefine strategy for Workflows and other features in under the automation umbrella.',
+				year: 2022,
+				client: 'Slack Technologies',
+				role: 'Senior Product Designer',
+				projectType: 'work',
+				featuredImage: '/images/projects/slack-cover.png',
+				backgroundColor: '#4a154b',
+				highlightColor: '#611F69',
+				displayOrder: 2,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.project.create({
+			data: {
+				slug: 'figma',
+				title: 'Figma',
+				subtitle: 'Pioneering prototyping features',
+				description:
+					'At Figma, I designed features and led R&D and strategy for the nascent prototyping team.',
+				year: 2019,
+				client: 'Figma Inc.',
+				role: 'Product Designer',
+				projectType: 'work',
+				featuredImage: '/images/projects/figma-cover.png',
+				backgroundColor: '#2c2c2c',
+				highlightColor: '#0ACF83',
+				displayOrder: 3,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.project.create({
+			data: {
+				slug: 'pinterest',
+				title: 'Pinterest',
+				subtitle: 'Building from the ground up',
+				description:
+					'At Pinterest, I was the first product design hired, and touched almost every part of the product.',
+				year: 2011,
+				client: 'Pinterest',
+				role: 'Product Designer #1',
+				projectType: 'work',
+				featuredImage: '/images/projects/pinterest-cover.png',
+				backgroundColor: '#f7f7f7',
+				highlightColor: '#CB1F27',
+				displayOrder: 4,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		})
+	])
+
+	console.log(`✅ Created ${projects.length} work projects`)
+
+	// Create Labs projects
+	const labsProjects = await Promise.all([
+		prisma.project.create({
+			data: {
+				slug: 'granblue-team',
+				title: 'granblue.team',
+				subtitle: 'Comprehensive web app for Granblue Fantasy players',
+				description:
+					'A comprehensive web application for Granblue Fantasy players to track raids, manage crews, and optimize team compositions. Features real-time raid tracking, character databases, and community tools.',
+				year: 2022,
+				client: 'Personal Project',
+				role: 'Full-Stack Developer',
+				externalUrl: 'https://granblue.team',
+				backgroundColor: '#1a1a2e',
+				highlightColor: '#16213e',
+				projectType: 'labs',
+				displayOrder: 1,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.project.create({
+			data: {
+				slug: 'subway-board',
+				title: 'Subway Board',
+				subtitle: 'Beautiful, minimalist NYC subway dashboard',
+				description:
+					'A beautiful, minimalist dashboard displaying real-time NYC subway arrival times. Clean interface inspired by the classic subway map design with live MTA data integration.',
+				year: 2023,
+				client: 'Personal Project',
+				role: 'Developer & Designer',
+				backgroundColor: '#0f4c81',
+				highlightColor: '#1e3a5f',
+				projectType: 'labs',
+				displayOrder: 2,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.project.create({
+			data: {
+				slug: 'siero-discord',
+				title: 'Siero for Discord',
+				subtitle: 'Discord bot for Granblue Fantasy communities',
+				description:
+					'A Discord bot for Granblue Fantasy communities providing character lookups, raid notifications, and server management tools. Serves thousands of users across multiple servers.',
+				year: 2021,
+				client: 'Personal Project',
+				role: 'Bot Developer',
+				backgroundColor: '#5865f2',
+				highlightColor: '#4752c4',
+				projectType: 'labs',
+				displayOrder: 3,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.project.create({
+			data: {
+				slug: 'homelab',
+				title: 'Homelab',
+				subtitle: 'Self-hosted infrastructure on Kubernetes',
+				description:
+					'Self-hosted infrastructure running on Kubernetes with monitoring, media servers, and development environments. Includes automated deployments and backup strategies.',
+				year: 2023,
+				client: 'Personal Project',
+				role: 'DevOps Engineer',
+				backgroundColor: '#ff6b35',
+				highlightColor: '#e55a2b',
+				projectType: 'labs',
+				displayOrder: 4,
+				status: 'published',
+				publishedAt: new Date()
+			}
+		})
+	])
+
+	console.log(`✅ Created ${labsProjects.length} labs projects`)
+
+	// Create test posts using new simplified types
+	const posts = await Promise.all([
+		prisma.post.create({
+			data: {
+				slug: 'hello-world',
+				postType: 'essay',
+				title: 'Hello World',
+				content: {
+					blocks: [
+						{ type: 'paragraph', content: 'This is my first essay on the new CMS!' },
+						{
+							type: 'paragraph',
+							content:
+								'The system now uses a simplified post type system with just essays and posts.'
+						},
+						{
+							type: 'paragraph',
+							content:
+								'Essays are perfect for longer-form content with titles and excerpts, while posts are great for quick thoughts and updates.'
+						}
+					]
+				},
+				excerpt: 'Welcome to my new blog powered by a custom CMS with simplified post types.',
+				tags: ['announcement', 'meta', 'cms'],
+				status: 'published',
+				publishedAt: new Date()
+			}
+		}),
+		prisma.post.create({
+			data: {
+				slug: 'quick-thought',
+				postType: 'post',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content:
+								'Just pushed a major update to the site. The new simplified post types are working great! 🎉'
+						}
+					]
+				},
+				tags: ['update', 'development'],
+				status: 'published',
+				publishedAt: new Date(Date.now() - 86400000) // Yesterday
+			}
+		}),
+		prisma.post.create({
+			data: {
+				slug: 'design-systems-thoughts',
+				postType: 'essay',
+				title: 'Thoughts on Design Systems',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content:
+								'Design systems have become essential for maintaining consistency across large products.'
+						},
+						{
+							type: 'paragraph',
+							content: 'The key is finding the right balance between flexibility and constraints.'
+						},
+						{
+							type: 'paragraph',
+							content:
+								'Too rigid, and designers feel boxed in. Too flexible, and you lose consistency.'
+						}
+					]
+				},
+				excerpt: 'Exploring the balance between flexibility and constraints in design systems.',
+				tags: ['design', 'systems', 'ux'],
+				status: 'published',
+				publishedAt: new Date(Date.now() - 172800000) // 2 days ago
+			}
+		}),
+		prisma.post.create({
+			data: {
+				slug: 'morning-coffee',
+				postType: 'post',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content: 'Perfect morning for coding with a fresh cup of coffee ☕'
+						}
+					]
+				},
+				tags: ['life', 'coffee'],
+				status: 'published',
+				publishedAt: new Date(Date.now() - 259200000) // 3 days ago
+			}
+		}),
+		prisma.post.create({
+			data: {
+				slug: 'weekend-project',
+				postType: 'post',
+				content: {
+					blocks: [
+						{
+							type: 'paragraph',
+							content:
+								'Built a small CLI tool over the weekend. Sometimes the best projects come from scratching your own itch.'
+						}
+					]
+				},
+				tags: ['projects', 'cli', 'weekend'],
+				status: 'draft'
+			}
+		})
+	])
+
+	console.log(`✅ Created ${posts.length} posts`)
+
+	// Create test album and photos
+	const album = await prisma.album.create({
+		data: {
+			slug: 'tokyo-trip-2024',
+			title: 'Tokyo Trip 2024',
+			description: 'Photos from my recent trip to Tokyo',
+			date: new Date('2024-03-15'),
+			location: 'Tokyo, Japan',
+			status: 'published',
+			isPhotography: true,
+			showInUniverse: true
+		}
+	})
+
+	const photos = await Promise.all([
+		prisma.photo.create({
+			data: {
+				albumId: album.id,
+				filename: 'tokyo-tower.jpg',
+				url: '/local-uploads/tokyo-tower.jpg',
+				thumbnailUrl: '/local-uploads/thumb-tokyo-tower.jpg',
+				width: 1920,
+				height: 1080,
+				caption: 'Tokyo Tower at sunset',
+				displayOrder: 1,
+				status: 'published',
+				showInPhotos: true,
+				exifData: {
+					camera: 'Sony A7III',
+					lens: '24-70mm f/2.8',
+					iso: 400,
+					aperture: 'f/5.6',
+					shutterSpeed: '1/250s'
+				}
+			}
+		}),
+		prisma.photo.create({
+			data: {
+				albumId: album.id,
+				filename: 'shibuya-crossing.jpg',
+				url: '/local-uploads/shibuya-crossing.jpg',
+				thumbnailUrl: '/local-uploads/thumb-shibuya-crossing.jpg',
+				width: 1920,
+				height: 1080,
+				caption: 'The famous Shibuya crossing',
+				displayOrder: 2,
+				status: 'published',
+				showInPhotos: true
+			}
+		})
+	])
+
+	await prisma.album.update({
+		where: { id: album.id },
+		data: { coverPhotoId: photos[0].id }
+	})
+
+	console.log(`✅ Created album with ${photos.length} photos`)
+
+	// Create test media entries
+	const media = await Promise.all([
+		prisma.media.create({
+			data: {
+				filename: 'blog-header.jpg',
+				mimeType: 'image/jpeg',
+				size: 245000,
+				url: '/local-uploads/blog-header.jpg',
+				thumbnailUrl: '/local-uploads/thumb-blog-header.jpg',
+				width: 1920,
+				height: 1080,
+				usedIn: [{ type: 'post', id: posts[0].id }]
+			}
+		})
+	])
+
+	console.log(`✅ Created ${media.length} media items`)
+
+	console.log('🎉 Seed completed!')
+}
+
+main()
+	.catch((e) => {
+		console.error('❌ Seed failed:', e)
+		process.exit(1)
+	})
+	.finally(async () => {
+		await prisma.$disconnect()
+	})
diff --git a/scripts/setup-local.sh b/scripts/setup-local.sh
new file mode 100755
index 0000000..488c5cb
--- /dev/null
+++ b/scripts/setup-local.sh
@@ -0,0 +1,39 @@
+#!/bin/bash
+
+echo "🚀 Setting up local development environment..."
+
+# Check if PostgreSQL is installed
+if ! command -v psql &> /dev/null; then
+    echo "❌ PostgreSQL is not installed. Please install it first:"
+    echo "   brew install postgresql@15"
+    echo "   brew services start postgresql@15"
+    exit 1
+fi
+
+# Check if .env exists
+if [ ! -f .env ]; then
+    echo "📝 Creating .env file from .env.local.example..."
+    cp .env.local.example .env
+    echo "✅ .env file created. Please update it with your local settings."
+else
+    echo "✅ .env file already exists"
+fi
+
+# Create database
+echo "🗄️  Creating local database..."
+createdb universe 2>/dev/null || echo "Database already exists"
+
+# Run Prisma commands
+echo "🔧 Generating Prisma client..."
+npx prisma generate
+
+echo "📊 Running database migrations..."
+npx prisma migrate dev --name initial_setup
+
+echo "✨ Local setup complete!"
+echo ""
+echo "Next steps:"
+echo "1. Make sure PostgreSQL is running: brew services start postgresql@15"
+echo "2. Update .env with your local PostgreSQL connection string"
+echo "3. Run: npm run dev"
+echo "4. Visit: http://localhost:5173/api/health"
\ No newline at end of file
diff --git a/src/assets/icons/chevron-down.svg b/src/assets/icons/chevron-down.svg
new file mode 100644
index 0000000..ff0c1a0
--- /dev/null
+++ b/src/assets/icons/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/dashboard.svg b/src/assets/icons/dashboard.svg
new file mode 100644
index 0000000..bb8f93f
--- /dev/null
+++ b/src/assets/icons/dashboard.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="3" y="3" width="6" height="6" stroke="currentColor" stroke-width="1.5" fill="none" rx="1" />
+	<rect x="11" y="3" width="6" height="6" stroke="currentColor" stroke-width="1.5" fill="none" rx="1" />
+	<rect x="3" y="11" width="6" height="6" stroke="currentColor" stroke-width="1.5" fill="none" rx="1" />
+	<rect x="11" y="11" width="6" height="6" stroke="currentColor" stroke-width="1.5" fill="none" rx="1" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/metadata.svg b/src/assets/icons/metadata.svg
new file mode 100644
index 0000000..371b5da
--- /dev/null
+++ b/src/assets/icons/metadata.svg
@@ -0,0 +1,3 @@
+<svg fill="currentColor" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg
new file mode 100644
index 0000000..80f61d9
--- /dev/null
+++ b/src/assets/icons/refresh.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.04 122.88"><path d="M16.08,59.26A8,8,0,0,1,0,59.26a59,59,0,0,1,97.13-45V8a8,8,0,1,1,16.08,0V33.35a8,8,0,0,1-8,8L80.82,43.62a8,8,0,1,1-1.44-15.95l8-.73A43,43,0,0,0,16.08,59.26Zm22.77,19.6a8,8,0,0,1,1.44,16l-10.08.91A42.95,42.95,0,0,0,102,63.86a8,8,0,0,1,16.08,0A59,59,0,0,1,22.3,110v4.18a8,8,0,0,1-16.08,0V89.14h0a8,8,0,0,1,7.29-8l25.31-2.3Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/styles/animations.scss b/src/assets/styles/animations.scss
index f484dbe..6265800 100644
--- a/src/assets/styles/animations.scss
+++ b/src/assets/styles/animations.scss
@@ -3,51 +3,62 @@
 
 // Work icon - cursor wiggle
 @keyframes cursorWiggle {
-	0%, 100% { transform: rotate(0deg) scale(1); }
-	25% { transform: rotate(-8deg) scale(1.05); }
-	75% { transform: rotate(8deg) scale(1.05); }
+	0%,
+	100% {
+		transform: rotate(0deg) scale(1);
+	}
+	25% {
+		transform: rotate(-8deg) scale(1.05);
+	}
+	75% {
+		transform: rotate(8deg) scale(1.05);
+	}
 }
 
 // Photos icon - masonry height changes
 @keyframes masonryRect1 {
-	0%, 100% { 
+	0%,
+	100% {
 		height: 10px;
 		y: 2px;
 	}
-	50% { 
+	50% {
 		height: 6px;
 		y: 2px;
 	}
 }
 
 @keyframes masonryRect2 {
-	0%, 100% { 
+	0%,
+	100% {
 		height: 6px;
 		y: 2px;
 	}
-	50% { 
+	50% {
 		height: 10px;
 		y: 2px;
 	}
 }
 
 @keyframes masonryRect3 {
-	0%, 100% { 
+	0%,
+	100% {
 		height: 4px;
 		y: 14px;
 	}
-	50% { 
+	50% {
 		height: 8px;
 		y: 10px;
 	}
 }
 
 @keyframes masonryRect4 {
-	0%, 100% { 
+	0%,
+	100% {
 		height: 8px;
 		y: 10px;
 	}
-	50% { 
+	50% {
 		height: 4px;
 		y: 14px;
 	}
@@ -55,21 +66,41 @@
 
 // Labs icon - test tube rotation
 @keyframes tubeRotate {
-	0%, 100% { transform: rotate(0deg); }
-	25% { transform: rotate(-10deg); }
-	75% { transform: rotate(10deg); }
+	0%,
+	100% {
+		transform: rotate(0deg);
+	}
+	25% {
+		transform: rotate(-10deg);
+	}
+	75% {
+		transform: rotate(10deg);
+	}
 }
 
 // Universe icon - star spin
 @keyframes starSpin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(720deg); }
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(720deg);
+	}
 }
 
 // Placeholder animations (not currently used)
 @keyframes photoMasonry {
-	0%, 100% { transform: scale(1); }
-	25% { transform: scale(1); }
-	50% { transform: scale(1); }
-	75% { transform: scale(1); }
-}
\ No newline at end of file
+	0%,
+	100% {
+		transform: scale(1);
+	}
+	25% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1);
+	}
+	75% {
+		transform: scale(1);
+	}
+}
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
index e69de29..3090706 100644
--- a/src/assets/styles/globals.scss
+++ b/src/assets/styles/globals.scss
@@ -0,0 +1,35 @@
+// Global font family setting
+// This applies the cstd font to all elements by default
+* {
+	font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;
+}
+
+// Global body styles
+body {
+	font-family: 'cstd', 'Helvetica Neue', Arial, sans-serif;
+	font-weight: 400;
+	line-height: 1.4;
+}
+
+// Heading font weights
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 500;
+}
+
+// Button and input font inheritance
+button,
+input,
+textarea,
+select {
+	font-family: inherit;
+}
+
+input,
+textarea {
+	box-sizing: border-box;
+}
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 0bddff8..87aca88 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -20,6 +20,8 @@ $unit-8x: $unit * 8;
 $unit-10x: $unit * 10;
 $unit-12x: $unit * 12;
 $unit-14x: $unit * 14;
+$unit-16x: $unit * 16;
+$unit-18x: $unit * 18;
 $unit-20x: $unit * 20;
 
 /* Page properties
@@ -64,18 +66,46 @@ $letter-spacing: -0.02em;
 /* Colors
  * -------------------------------------------------------------------------- */
 $grey-100: #ffffff;
+$grey-97: #fafafa;
+$grey-95: #f5f5f5;
 $grey-90: #f7f7f7;
+$grey-85: #ebebeb;
 $grey-80: #e8e8e8;
+$grey-70: #dfdfdf;
+$grey-60: #cccccc;
+$grey-5: #f9f9f9;
 $grey-50: #b2b2b2;
 $grey-40: #999999;
+$grey-30: #808080;
 $grey-20: #666666;
+$grey-10: #4d4d4d;
 $grey-00: #333333;
 
+$red-90: #ff9d8f;
 $red-80: #ff6a54;
 $red-60: #e33d3d;
+$red-50: #d33;
 $red-40: #d31919;
 $red-00: #3d0c0c;
 
+$blue-60: #2e8bc0;
+$blue-50: #1482c1;
+$blue-40: #126fa8;
+$blue-20: #0f5d8f;
+$blue-10: #e6f3ff;
+
+$yellow-90: #fff9e6;
+$yellow-80: #ffeb99;
+$yellow-70: #ffdd4d;
+$yellow-60: #ffcc00;
+$yellow-50: #f5c500;
+$yellow-40: #e6b800;
+$yellow-30: #cc9900;
+$yellow-20: #996600;
+$yellow-10: #664400;
+
+$salmon-pink: #ffd5cf; // Desaturated salmon pink for hover states
+
 $bg-color: #e8e8e8;
 $page-color: #ffffff;
 $card-color: #f7f7f7;
@@ -85,6 +115,7 @@ $text-color-body: #666666;
 
 $accent-color: #e33d3d;
 $grey-color: #f0f0f0;
+$primary-color: #1482c1; // Using labs color as primary
 
 $image-border-color: rgba(0, 0, 0, 0.03);
 
diff --git a/src/lib/admin-auth.ts b/src/lib/admin-auth.ts
new file mode 100644
index 0000000..a89ff9b
--- /dev/null
+++ b/src/lib/admin-auth.ts
@@ -0,0 +1,48 @@
+// Simple admin authentication helper for client-side use
+// In a real application, this would use proper JWT tokens or session cookies
+
+let adminCredentials: string | null = null
+
+// Initialize auth (call this when the admin logs in)
+export function setAdminAuth(username: string, password: string) {
+	adminCredentials = btoa(`${username}:${password}`)
+}
+
+// Get auth headers for API requests
+export function getAuthHeaders(): HeadersInit {
+	if (!adminCredentials) {
+		// For development, use default credentials
+		// In production, this should redirect to login
+		adminCredentials = btoa('admin:localdev')
+	}
+
+	return {
+		Authorization: `Basic ${adminCredentials}`
+	}
+}
+
+// Check if user is authenticated (basic check)
+export function isAuthenticated(): boolean {
+	return adminCredentials !== null
+}
+
+// Clear auth (logout)
+export function clearAuth() {
+	adminCredentials = null
+}
+
+// Make authenticated API request
+export async function authenticatedFetch(
+	url: string,
+	options: RequestInit = {}
+): Promise<Response> {
+	const headers = {
+		...getAuthHeaders(),
+		...options.headers
+	}
+
+	return fetch(url, {
+		...options,
+		headers
+	})
+}
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
index 01fb8ef..48ef29c 100644
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@@ -1,37 +1,35 @@
 <script>
 	// What if we have a headphones avatar that is head bopping if the last scrobble was < 5 mins ago
 	// We can do a thought bubble-y thing with the album art that takes you to the album section of the page
-	import { onMount } from 'svelte'
+	import { onMount, onDestroy } from 'svelte'
 	import { spring } from 'svelte/motion'
 
-	let isHovering = $state(false)
-	let isBlinking = $state(false)
+	let isHovering = false
+	let isBlinking = false
 
 	const scale = spring(1, {
 		stiffness: 0.1,
 		damping: 0.125
 	})
 
-	$effect(() => {
-		if (isHovering) {
-			scale.set(1.25)
-		} else {
-			scale.set(1)
-		}
-	})
+	function handleMouseEnter() {
+		isHovering = true
+		scale.set(1.25)
+	}
+
+	function handleMouseLeave() {
+		isHovering = false
+		scale.set(1)
+	}
 
 	function sleep(ms) {
 		return new Promise((resolve) => setTimeout(resolve, ms))
 	}
 
-	function setBlinkState(state) {
-		isBlinking = state
-	}
-
 	async function singleBlink(duration) {
-		setBlinkState(true)
+		isBlinking = true
 		await sleep(duration)
-		setBlinkState(false)
+		isBlinking = false
 	}
 
 	async function doubleBlink() {
@@ -48,25 +46,27 @@
 		}
 	}
 
-	function startBlinking() {
-		const blinkInterval = setInterval(() => {
+	let blinkInterval
+
+	onMount(() => {
+		blinkInterval = setInterval(() => {
 			if (!isHovering) {
 				blink()
 			}
 		}, 4000)
 
-		return () => clearInterval(blinkInterval)
-	}
-
-	onMount(() => {
-		return startBlinking()
+		return () => {
+			if (blinkInterval) {
+				clearInterval(blinkInterval)
+			}
+		}
 	})
 </script>
 
 <div
 	class="face-container"
-	on:mouseenter={() => (isHovering = true)}
-	on:mouseleave={() => (isHovering = false)}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
 	style="transform: scale({$scale})"
 >
 	<svg
diff --git a/src/lib/components/AvatarSimple.svelte b/src/lib/components/AvatarSimple.svelte
new file mode 100644
index 0000000..0ec51d3
--- /dev/null
+++ b/src/lib/components/AvatarSimple.svelte
@@ -0,0 +1,21 @@
+<script>
+	import jedmundIcon from '$illos/jedmund.svg?raw'
+</script>
+
+<div class="avatar-simple">
+	{@html jedmundIcon}
+</div>
+
+<style lang="scss">
+	.avatar-simple {
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		:global(svg) {
+			width: 100%;
+			height: 100%;
+			border-radius: $avatar-radius;
+		}
+	}
+</style>
diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte
new file mode 100644
index 0000000..315fc78
--- /dev/null
+++ b/src/lib/components/DynamicPostContent.svelte
@@ -0,0 +1,364 @@
+<script lang="ts">
+	import LinkCard from './LinkCard.svelte'
+	import Slideshow from './Slideshow.svelte'
+	import { formatDate } from '$lib/utils/date'
+	import { renderEdraContent } from '$lib/utils/content'
+	import { goto } from '$app/navigation'
+
+	let { post }: { post: any } = $props()
+
+	const renderedContent = $derived(post.content ? renderEdraContent(post.content) : '')
+</script>
+
+<article class="post-content {post.postType}">
+	<header class="post-header">
+		<div class="post-meta">
+			<a href="/universe/{post.slug}" class="post-date-link">
+				<time class="post-date" datetime={post.publishedAt}>
+					{formatDate(post.publishedAt)}
+				</time>
+			</a>
+		</div>
+
+		{#if post.title}
+			<h1 class="post-title">{post.title}</h1>
+		{/if}
+	</header>
+
+	{#if post.linkUrl}
+		<div class="post-link-preview">
+			<LinkCard
+				link={{
+					url: post.linkUrl,
+					title: post.title,
+					description: post.linkDescription
+				}}
+			/>
+		</div>
+	{/if}
+
+	{#if post.album && post.album.photos && post.album.photos.length > 0}
+		<!-- Album slideshow -->
+		<div class="post-album">
+			<div class="album-header">
+				<h3>{post.album.title}</h3>
+				{#if post.album.description}
+					<p class="album-description">{post.album.description}</p>
+				{/if}
+			</div>
+			<Slideshow
+				items={post.album.photos.map((photo) => ({
+					url: photo.url,
+					thumbnailUrl: photo.thumbnailUrl,
+					caption: photo.caption,
+					alt: photo.caption || post.album.title
+				}))}
+				alt={post.album.title}
+				aspectRatio="4/3"
+			/>
+		</div>
+	{:else if post.attachments && Array.isArray(post.attachments) && post.attachments.length > 0}
+		<!-- Regular attachments -->
+		<div class="post-attachments">
+			<h3>Photos</h3>
+			<Slideshow
+				items={post.attachments.map((attachment) => ({
+					url: attachment.url,
+					thumbnailUrl: attachment.thumbnailUrl,
+					caption: attachment.caption,
+					alt: attachment.caption || 'Photo'
+				}))}
+				alt="Post photos"
+				aspectRatio="4/3"
+			/>
+		</div>
+	{/if}
+
+	{#if renderedContent}
+		<div class="post-body">
+			{@html renderedContent}
+		</div>
+	{/if}
+
+	<footer class="post-footer">
+		<button onclick={() => goto('/universe')} class="back-button">
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="back-arrow">
+				<path
+					d="M15 8H3.5M3.5 8L8 3.5M3.5 8L8 12.5"
+					stroke="currentColor"
+					stroke-width="2.25"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+			Back to Universe
+		</button>
+	</footer>
+</article>
+
+<style lang="scss">
+	.post-content {
+		display: flex;
+		flex-direction: column;
+		max-width: 784px;
+		gap: $unit-3x;
+		margin: 0 auto;
+		padding: 0 $unit-3x;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x;
+		}
+
+		// Post type styles
+		&.post {
+			.post-body {
+				font-size: 1.125rem;
+			}
+		}
+
+		&.essay {
+			.post-body {
+				font-size: 1.125rem;
+				line-height: 1.7;
+			}
+		}
+	}
+
+	.post-header {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.post-meta {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.post-date-link {
+		text-decoration: none;
+		transition: color 0.2s ease;
+
+		&:hover {
+			.post-date {
+				color: $red-60;
+			}
+		}
+	}
+
+	.post-date {
+		font-size: 0.9rem;
+		color: $grey-40;
+		font-weight: 400;
+		transition: color 0.2s ease;
+	}
+
+	.post-title {
+		margin: 0;
+		font-size: 2.5rem;
+		font-weight: 700;
+		color: $grey-10;
+		line-height: 1.2;
+
+		@include breakpoint('phone') {
+			font-size: 2rem;
+		}
+	}
+
+	.post-link-preview {
+		margin-bottom: $unit-4x;
+		max-width: 600px;
+	}
+
+	.post-album,
+	.post-attachments {
+		margin-bottom: $unit-4x;
+
+		h3 {
+			font-size: 1.125rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $grey-20;
+		}
+	}
+
+	.album-header {
+		margin-bottom: $unit-3x;
+
+		h3 {
+			margin-bottom: $unit;
+		}
+
+		.album-description {
+			margin: 0;
+			font-size: 1.125rem;
+			color: $grey-10;
+			line-height: 1.5;
+		}
+	}
+
+	.post-body {
+		color: $grey-10;
+		line-height: 1.5;
+
+		:global(h1) {
+			margin: $unit-5x 0 $unit-3x;
+			font-size: 2rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		:global(h2) {
+			margin: $unit-4x 0 $unit-2x;
+			font-size: 1.5rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		:global(h3) {
+			margin: $unit-3x 0 $unit-2x;
+			font-size: 1.25rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		:global(h4) {
+			margin: $unit-3x 0 $unit-2x;
+			font-size: 1.125rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		:global(p) {
+			margin: 0 0 $unit-3x;
+		}
+
+		:global(p:last-child) {
+			margin-bottom: 0;
+		}
+
+		:global(ul),
+		:global(ol) {
+			margin: 0 0 $unit-3x;
+			padding-left: $unit-3x;
+		}
+
+		:global(ul li),
+		:global(ol li) {
+			margin-bottom: $unit;
+		}
+
+		:global(blockquote) {
+			margin: $unit-4x 0;
+			padding: $unit-3x;
+			background: $grey-97;
+			border-left: 4px solid $grey-80;
+			border-radius: $unit;
+			color: $grey-30;
+			font-style: italic;
+
+			:global(p:last-child) {
+				margin-bottom: 0;
+			}
+		}
+
+		:global(code) {
+			background: $grey-95;
+			padding: 2px 6px;
+			border-radius: 4px;
+			font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
+				monospace;
+			font-size: 0.9em;
+			color: $grey-10;
+		}
+
+		:global(pre) {
+			background: $grey-95;
+			padding: $unit-3x;
+			border-radius: $unit;
+			overflow-x: auto;
+			margin: 0 0 $unit-3x;
+			border: 1px solid $grey-85;
+
+			:global(code) {
+				background: none;
+				padding: 0;
+				font-size: 0.875rem;
+			}
+		}
+
+		:global(a) {
+			color: $red-60;
+			text-decoration: none;
+			transition: all 0.2s ease;
+
+			&:hover {
+				text-decoration: underline;
+				text-decoration-style: wavy;
+				text-underline-offset: 0.15em;
+			}
+		}
+
+		:global(hr) {
+			border: none;
+			border-top: 1px solid $grey-85;
+			margin: $unit-4x 0;
+		}
+
+		:global(em) {
+			font-style: italic;
+		}
+
+		:global(strong) {
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		:global(figure) {
+			margin: $unit-4x 0;
+
+			:global(img) {
+				width: 100%;
+				height: auto;
+				border-radius: $unit;
+			}
+		}
+	}
+
+	.post-footer {
+		padding-bottom: $unit-2x;
+	}
+
+	.back-button {
+		color: $red-60;
+		background-color: transparent;
+		border: 1px solid transparent;
+		font: inherit;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		display: inline-flex;
+		align-items: center;
+		gap: $unit;
+		border-radius: 24px;
+		outline: none;
+
+		&:hover:not(:disabled) {
+			.back-arrow {
+				transform: translateX(-3px);
+			}
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 3px rgba($red-60, 0.25);
+		}
+
+		.back-arrow {
+			flex-shrink: 0;
+			transition: transform 0.2s ease;
+			margin-left: -$unit-half;
+		}
+	}
+</style>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 686b27b..44a9c47 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	const currentYear = new Date().getFullYear()
-	
+
 	const socialLinks = [
 		{ name: 'Bluesky', url: 'https://bsky.app/profile/jedmund.com' },
 		{ name: 'Mastodon', url: 'https://fireplace.cafe/@jedmund' },
@@ -71,4 +71,4 @@
 			color: $grey-40;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index a4c1906..5a93286 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -3,27 +3,38 @@
 	import SegmentedController from './SegmentedController.svelte'
 
 	let scrollY = $state(0)
-	let hasScrolled = $state(false)
-	let gradientOpacity = $derived(Math.min(scrollY / 40, 1))
+	// Smooth gradient opacity from 0 to 1 over the first 100px of scroll
+	let gradientOpacity = $derived(Math.min(scrollY / 100, 1))
+	// Padding transition happens more quickly
+	let paddingProgress = $derived(Math.min(scrollY / 50, 1))
 
 	$effect(() => {
-		const handleScroll = () => {
+		let ticking = false
+
+		const updateScroll = () => {
 			scrollY = window.scrollY
-			
-			// Add hysteresis to prevent flickering
-			if (!hasScrolled && scrollY > 30) {
-				hasScrolled = true
-			} else if (hasScrolled && scrollY < 20) {
-				hasScrolled = false
+			ticking = false
+		}
+
+		const handleScroll = () => {
+			if (!ticking) {
+				requestAnimationFrame(updateScroll)
+				ticking = true
 			}
 		}
 
-		window.addEventListener('scroll', handleScroll)
+		// Set initial value
+		scrollY = window.scrollY
+
+		window.addEventListener('scroll', handleScroll, { passive: true })
 		return () => window.removeEventListener('scroll', handleScroll)
 	})
 </script>
 
-<header class="site-header {hasScrolled ? 'scrolled' : ''}" style="--gradient-opacity: {gradientOpacity}">
+<header
+	class="site-header"
+	style="--gradient-opacity: {gradientOpacity}; --padding-progress: {paddingProgress}"
+>
 	<div class="header-content">
 		<a href="/about" class="header-link" aria-label="@jedmund">
 			<Avatar />
@@ -39,32 +50,33 @@
 		z-index: 100;
 		display: flex;
 		justify-content: center;
-		padding: $unit-5x 0;
-		transition:
-			padding 0.3s ease,
-			background 0.3s ease;
+		// Smooth padding transition based on scroll
+		padding: calc($unit-5x - ($unit-5x - $unit-2x) * var(--padding-progress)) 0;
 		pointer-events: none;
+		// Add a very subtle transition to smooth out any remaining jitter
+		transition: padding 0.1s ease-out;
 
-		&.scrolled {
-			padding: $unit-2x 0;
-
-			&::before {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				height: 120px;
-				background: linear-gradient(to bottom, rgba(0, 0, 0, calc(0.15 * var(--gradient-opacity))), transparent);
-				backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
-				-webkit-backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
-				mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
-				-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
-				pointer-events: none;
-				z-index: -1;
-				opacity: var(--gradient-opacity);
-				transition: opacity 0.2s ease;
-			}
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			height: 120px;
+			background: linear-gradient(
+				to bottom,
+				rgba(0, 0, 0, 0.15),
+				transparent
+			);
+			backdrop-filter: blur(6px);
+			-webkit-backdrop-filter: blur(6px);
+			mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
+			-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
+			pointer-events: none;
+			z-index: -1;
+			opacity: var(--gradient-opacity);
+			// Add a very subtle transition to smooth out any remaining jitter
+			transition: opacity 0.1s ease-out;
 		}
 	}
 
diff --git a/src/lib/components/ImagePost.svelte b/src/lib/components/ImagePost.svelte
index f3f4563..7eedc53 100644
--- a/src/lib/components/ImagePost.svelte
+++ b/src/lib/components/ImagePost.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import Lightbox from './Lightbox.svelte'
-	import TiltCard from './TiltCard.svelte'
+	import Slideshow from './Slideshow.svelte'
 
 	let {
 		images = [],
@@ -10,191 +9,9 @@
 		alt?: string
 	} = $props()
 
-	let selectedIndex = $state(0)
-	let lightboxOpen = $state(false)
-	let windowWidth = $state(0)
-	
-	// Calculate columns based on breakpoints
-	const columnsPerRow = $derived(windowWidth <= 400 ? 3 : windowWidth <= 600 ? 4 : 6)
-	const totalSlots = $derived(Math.ceil(images.length / columnsPerRow) * columnsPerRow)
-
-	const selectImage = (index: number) => {
-		selectedIndex = index
-	}
-
-	const openLightbox = (index?: number) => {
-		if (index !== undefined) {
-			selectedIndex = index
-		}
-		lightboxOpen = true
-	}
-	
-	// Track window width for responsive columns
-	$effect(() => {
-		windowWidth = window.innerWidth
-		
-		const handleResize = () => {
-			windowWidth = window.innerWidth
-		}
-		
-		window.addEventListener('resize', handleResize)
-		
-		return () => {
-			window.removeEventListener('resize', handleResize)
-		}
-	})
+	// Convert string array to slideshow items
+	const slideshowItems = $derived(images.map(url => ({ url, alt })))
 </script>
 
-{#if images.length === 1}
-	<!-- Single image -->
-	<TiltCard>
-		<button class="single-image image-button" onclick={() => openLightbox()}>
-			<img src={images[0]} {alt} />
-		</button>
-	</TiltCard>
-{:else if images.length > 1}
-	<!-- Slideshow -->
-	<div class="slideshow">
-		<TiltCard>
-			<button class="main-image image-button" onclick={() => openLightbox()}>
-				<img src={images[selectedIndex]} alt="{alt} {selectedIndex + 1}" />
-			</button>
-		</TiltCard>
-		<div class="thumbnails">
-			{#each Array(totalSlots) as _, index}
-				{#if index < images.length}
-					<button
-						class="thumbnail"
-						class:active={index === selectedIndex}
-						onclick={() => selectImage(index)}
-						aria-label="View image {index + 1}"
-					>
-						<img src={images[index]} alt="{alt} thumbnail {index + 1}" />
-					</button>
-				{:else}
-					<div class="thumbnail placeholder" aria-hidden="true"></div>
-				{/if}
-			{/each}
-		</div>
-	</div>
-{/if}
+<Slideshow items={slideshowItems} {alt} aspectRatio="4/3" />
 
-<Lightbox {images} bind:selectedIndex bind:isOpen={lightboxOpen} {alt} />
-
-<style lang="scss">
-	.image-button {
-		border: none;
-		padding: 0;
-		background: none;
-		cursor: pointer;
-		display: block;
-		width: 100%;
-
-		&:focus {
-			outline: 2px solid $red-60;
-			outline-offset: 2px;
-		}
-	}
-
-	.single-image,
-	.main-image {
-		aspect-ratio: 4 / 3;
-		border-radius: $image-corner-radius;
-		overflow: hidden;
-		// Force GPU acceleration and proper clipping
-		transform: translateZ(0);
-		-webkit-backface-visibility: hidden;
-		backface-visibility: hidden;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	.slideshow {
-		display: flex;
-		flex-direction: column;
-		gap: $unit-2x;
-	}
-
-	.thumbnails {
-		display: grid;
-		grid-template-columns: repeat(6, 1fr);
-		gap: $unit-2x;
-
-		@media (max-width: 600px) {
-			grid-template-columns: repeat(4, 1fr);
-		}
-
-		@media (max-width: 400px) {
-			grid-template-columns: repeat(3, 1fr);
-		}
-	}
-
-	.thumbnail {
-		position: relative;
-		aspect-ratio: 1;
-		border-radius: $image-corner-radius;
-		overflow: hidden;
-		border: none;
-		padding: 0;
-		background: none;
-		cursor: pointer;
-		transition: all 0.2s ease;
-
-		&::before {
-			content: '';
-			position: absolute;
-			inset: 0;
-			border-radius: $image-corner-radius;
-			border: 4px solid transparent;
-			z-index: 2;
-			pointer-events: none;
-			transition: border-color 0.2s ease;
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			inset: 4px;
-			border-radius: calc($image-corner-radius - 4px);
-			border: 4px solid transparent;
-			z-index: 3;
-			pointer-events: none;
-			transition: border-color 0.2s ease;
-		}
-
-		&:hover {
-			transform: scale(0.98);
-		}
-
-		&.active {
-			&::before {
-				border-color: $red-60;
-			}
-
-			&::after {
-				border-color: $grey-100;
-			}
-		}
-		
-		&.placeholder {
-			background: $grey-90;
-			cursor: default;
-			
-			&:hover {
-				transform: none;
-			}
-		}
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-			position: relative;
-			z-index: 1;
-		}
-	}
-</style>
diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte
index 99d81a1..9acfe46 100644
--- a/src/lib/components/LabCard.svelte
+++ b/src/lib/components/LabCard.svelte
@@ -1,71 +1,245 @@
 <script lang="ts">
-	import type { LabProject } from '$lib/types/labs'
+	import type { Project } from '$lib/types/project'
+	import Button from './admin/Button.svelte'
 
-	const { project }: { project: LabProject } = $props()
+	const { project }: { project: Project } = $props()
+
+	// Determine if the project is clickable (not list-only)
+	const isClickable = $derived(project.status !== 'list-only')
+	const projectUrl = $derived(`/labs/${project.slug}`)
+
+	// Tilt card functionality
+	let cardElement: HTMLElement
+	let isHovering = $state(false)
+	let transform = $state('')
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!cardElement || !isHovering) return
+
+		const rect = cardElement.getBoundingClientRect()
+		const x = e.clientX - rect.left
+		const y = e.clientY - rect.top
+
+		const centerX = rect.width / 2
+		const centerY = rect.height / 2
+
+		const rotateX = ((y - centerY) / centerY) * -3 // Subtle tilt
+		const rotateY = ((x - centerX) / centerX) * 3
+
+		transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`
+	}
+
+	function handleMouseEnter() {
+		isHovering = true
+	}
+
+	function handleMouseLeave() {
+		isHovering = false
+		transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
+	}
 </script>
 
-<article class="lab-card">
-	<div class="card-header">
-		<h3 class="project-title">{project.title}</h3>
-		<span class="project-year">{project.year}</span>
-	</div>
-
-	<p class="project-description">{project.description}</p>
-
-	{#if project.url || project.github}
-		<div class="project-links">
-			{#if project.url}
-				<a href={project.url} target="_blank" rel="noopener noreferrer" class="project-link primary">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-						<path d="M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+{#if isClickable}
+	<a
+		href={projectUrl}
+		class="lab-card clickable"
+		bind:this={cardElement}
+		onmousemove={handleMouseMove}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		style:transform
+	>
+		<div class="card-header">
+			<div class="project-title-container">
+				<h3 class="project-title">{project.title}</h3>
+				<span class="project-year">{project.year}</span>
+			</div>
+			{#if project.externalUrl}
+				<Button
+					variant="primary"
+					buttonSize="medium"
+					href={project.externalUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					iconPosition="right"
+					onclick={(e) => e.stopPropagation()}
+				>
+					Visit site
+					<svg
+						slot="icon"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M5 12h14" />
+						<path d="m12 5 7 7-7 7" />
 					</svg>
-					Visit Project
-				</a>
-			{/if}
-			{#if project.github}
-				<a href={project.github} target="_blank" rel="noopener noreferrer" class="project-link secondary">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-						<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-					</svg>
-					GitHub
-				</a>
+				</Button>
 			{/if}
 		</div>
-	{/if}
-</article>
+
+		<p class="project-description">{project.description}</p>
+
+		<!-- Add status indicators for different project states -->
+		{#if project.status === 'password-protected'}
+			<div class="status-indicator password-protected">
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+					<rect
+						x="3"
+						y="11"
+						width="18"
+						height="11"
+						rx="2"
+						ry="2"
+						stroke="currentColor"
+						stroke-width="2"
+					/>
+					<circle cx="12" cy="16" r="1" fill="currentColor" />
+					<path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2" />
+				</svg>
+				<span>Password Protected</span>
+			</div>
+		{/if}
+	</a>
+{:else}
+	<article
+		class="lab-card"
+		bind:this={cardElement}
+		onmousemove={handleMouseMove}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		style:transform
+	>
+		<div class="card-header">
+			<div class="project-title-container">
+				<h3 class="project-title">{project.title}</h3>
+				<span class="project-year">{project.year}</span>
+			</div>
+
+			{#if project.externalUrl}
+				<div class="project-links">
+					<a
+						href={project.externalUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="project-link primary"
+					>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+							<path
+								d="M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+						Visit Project
+					</a>
+				</div>
+			{/if}
+		</div>
+
+		<p class="project-description">{project.description}</p>
+
+		<!-- Add status indicators for different project states -->
+		{#if project.status === 'list-only'}
+			<div class="status-indicator list-only">
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+					<path
+						d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M1 1l22 22"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>View Only</span>
+			</div>
+		{/if}
+	</article>
+{/if}
 
 <style lang="scss">
 	.lab-card {
 		background: $grey-100;
 		border-radius: $card-corner-radius;
 		padding: $unit-3x;
-		transition: transform 0.2s ease, box-shadow 0.2s ease;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+		transition:
+			transform 0.15s ease-out,
+			box-shadow 0.15s ease-out;
+		text-decoration: none;
+		color: inherit;
+		transform-style: preserve-3d;
+		will-change: transform;
+
+		// Prevent overflow issues with 3D transforms
+		-webkit-mask-image: -webkit-radial-gradient(white, black);
+		mask-image: radial-gradient(white, black);
 
 		&:hover {
-			transform: translateY(-2px);
-			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+			box-shadow:
+				0 10px 30px rgba(0, 0, 0, 0.12),
+				0 2px 10px rgba(0, 0, 0, 0.08);
+
+			.project-title {
+				color: $red-60;
+			}
+		}
+
+		&.clickable {
+			cursor: pointer;
 		}
 
 		@include breakpoint('phone') {
 			padding: $unit-2x;
 		}
+
+		p {
+			margin-bottom: 0;
+		}
 	}
 
 	.card-header {
 		display: flex;
 		justify-content: space-between;
-		align-items: baseline;
-		margin-bottom: $unit-2x;
+		align-items: flex-start;
 		gap: $unit-2x;
+
+		// Style the Button component when used in card header
+		:global(.btn) {
+			flex-shrink: 0;
+			margin-top: 2px; // Align with title baseline
+		}
+	}
+
+	.project-title-container {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
 	}
 
 	.project-title {
 		margin: 0;
-		font-size: 1.25rem;
-		font-weight: 600;
+		font-size: 1.125rem;
+		font-weight: 400;
 		color: $grey-00;
 		line-height: 1.3;
-		
+
 		@include breakpoint('phone') {
 			font-size: 1.125rem;
 		}
@@ -74,13 +248,13 @@
 	.project-year {
 		font-size: 0.875rem;
 		color: $grey-40;
-		font-weight: 500;
+		font-weight: 400;
 		white-space: nowrap;
 	}
 
 	.project-description {
 		margin: 0 0 $unit-3x 0;
-		font-size: 1rem;
+		font-size: 1.125rem;
 		line-height: 1.5;
 		color: $grey-20;
 
@@ -93,6 +267,7 @@
 		display: flex;
 		gap: $unit-2x;
 		flex-wrap: wrap;
+		margin-bottom: $unit-2x;
 	}
 
 	.project-link {
@@ -115,6 +290,10 @@
 				background: darken($labs-color, 10%);
 				transform: translateY(-1px);
 			}
+
+			&.external {
+				pointer-events: none; // Prevent clicking when it's inside a clickable card
+			}
 		}
 
 		&.secondary {
@@ -132,4 +311,34 @@
 			flex-shrink: 0;
 		}
 	}
-</style>
\ No newline at end of file
+
+	.status-indicator {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		font-size: 0.875rem;
+		padding: $unit $unit-2x;
+		border-radius: $unit-2x;
+		margin-top: $unit-2x;
+
+		&.list-only {
+			background: rgba(239, 68, 68, 0.1);
+			color: #dc2626;
+		}
+
+		&.password-protected {
+			background: rgba(251, 191, 36, 0.1);
+			color: #d97706;
+		}
+
+		svg {
+			width: 14px;
+			height: 14px;
+			flex-shrink: 0;
+		}
+
+		span {
+			font-weight: 500;
+		}
+	}
+</style>
diff --git a/src/lib/components/Lightbox.svelte b/src/lib/components/Lightbox.svelte
index 3159949..5aa30e2 100644
--- a/src/lib/components/Lightbox.svelte
+++ b/src/lib/components/Lightbox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import { fade, scale } from 'svelte/transition'
-	
+
 	let {
 		images = [],
 		selectedIndex = $bindable(0),
@@ -56,7 +56,7 @@
 			// Restore scroll when lightbox closes
 			document.body.style.overflow = ''
 		}
-		
+
 		// Cleanup on unmount
 		return () => {
 			document.body.style.overflow = ''
@@ -65,7 +65,7 @@
 
 	onMount(() => {
 		window.addEventListener('keydown', handleKeydown)
-		
+
 		return () => {
 			window.removeEventListener('keydown', handleKeydown)
 		}
@@ -73,8 +73,8 @@
 </script>
 
 {#if isOpen}
-	<div 
-		class="lightbox-backdrop" 
+	<div
+		class="lightbox-backdrop"
 		onclick={handleBackgroundClick}
 		transition:fade={{ duration: 200 }}
 		role="button"
@@ -82,19 +82,19 @@
 	>
 		<div class="lightbox-content" onclick={(e) => e.stopPropagation()}>
 			<div class="lightbox-image-container">
-				<img 
-					src={images[selectedIndex]} 
+				<img
+					src={images[selectedIndex]}
 					alt="{alt} {selectedIndex + 1}"
 					transition:scale={{ duration: 200, start: 0.9 }}
 				/>
 			</div>
-			
+
 			{#if images.length > 1}
 				<div class="lightbox-thumbnails">
 					<div class="thumbnails-inner">
 						{#each images as image, index}
-							<button 
-								class="lightbox-thumbnail" 
+							<button
+								class="lightbox-thumbnail"
 								class:active={index === selectedIndex}
 								onclick={() => selectImage(index)}
 								aria-label="View image {index + 1}"
@@ -106,10 +106,21 @@
 				</div>
 			{/if}
 		</div>
-		
+
 		<button class="lightbox-close" onclick={close} aria-label="Close lightbox">
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M18 6L6 18M6 6l12 12"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+				/>
 			</svg>
 		</button>
 	</div>
@@ -146,7 +157,7 @@
 		width: 100%;
 		overflow: hidden;
 		padding-bottom: 120px; // Space for thumbnails
-		
+
 		img {
 			max-width: 90vw;
 			max-height: 80vh;
@@ -171,7 +182,7 @@
 		overflow-x: auto;
 		max-width: 90vw;
 		padding: $unit $unit-2x; // Add vertical padding to prevent clipping
-		
+
 		&::-webkit-scrollbar {
 			display: none;
 		}
@@ -190,7 +201,7 @@
 		cursor: pointer;
 		opacity: 0.5;
 		transition: all 0.2s ease;
-		
+
 		&::before {
 			content: '';
 			position: absolute;
@@ -201,7 +212,7 @@
 			pointer-events: none;
 			transition: border-color 0.2s ease;
 		}
-		
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -212,24 +223,24 @@
 			pointer-events: none;
 			transition: border-color 0.2s ease;
 		}
-		
+
 		&:hover {
 			opacity: 1;
 			transform: scale(1.05);
 		}
-		
+
 		&.active {
 			opacity: 1;
-			
+
 			&::before {
 				border-color: $red-60;
 			}
-			
+
 			&::after {
 				border-color: $grey-00; // Black inner border
 			}
 		}
-		
+
 		img {
 			width: 100%;
 			height: 100%;
@@ -257,10 +268,10 @@
 		justify-content: center;
 		transition: all 0.2s ease;
 		backdrop-filter: blur(10px);
-		
+
 		&:hover {
 			background: rgba(255, 255, 255, 0.2);
 			transform: scale(1.1);
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/LinkCard.svelte b/src/lib/components/LinkCard.svelte
index 5b7a997..7767062 100644
--- a/src/lib/components/LinkCard.svelte
+++ b/src/lib/components/LinkCard.svelte
@@ -16,7 +16,7 @@
 		favicon?: string
 		siteName?: string
 	} | null>(null)
-	
+
 	let loading = $state(true)
 	let error = $state(false)
 
@@ -35,7 +35,7 @@
 			window.open(url, '_blank', 'noopener,noreferrer')
 		}
 	}
-	
+
 	onMount(async () => {
 		// If link is just a string URL, fetch metadata
 		if (typeof link === 'string') {
@@ -109,7 +109,6 @@
 		width: 100%;
 		text-align: left;
 		cursor: pointer;
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		transition: border-color 0.2s ease;
 
 		&:hover {
@@ -124,7 +123,7 @@
 		// Loading state
 		&.loading {
 			cursor: default;
-			
+
 			&:hover {
 				border-color: $grey-80;
 			}
@@ -163,7 +162,6 @@
 		gap: $unit;
 		font-size: 0.875rem;
 		color: $grey-40;
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	}
 
 	.favicon {
@@ -184,7 +182,6 @@
 		font-weight: 600;
 		color: $grey-00;
 		line-height: 1.3;
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 2;
@@ -196,7 +193,6 @@
 		font-size: 0.875rem;
 		color: $grey-40;
 		line-height: 1.4;
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 3;
@@ -225,7 +221,8 @@
 	}
 
 	@keyframes pulse {
-		0%, 100% {
+		0%,
+		100% {
 			opacity: 1;
 		}
 		50% {
diff --git a/src/lib/components/PhotoGrid.svelte b/src/lib/components/PhotoGrid.svelte
index 9069060..156f50e 100644
--- a/src/lib/components/PhotoGrid.svelte
+++ b/src/lib/components/PhotoGrid.svelte
@@ -1,84 +1,37 @@
 <script lang="ts">
 	import PhotoItem from '$components/PhotoItem.svelte'
-	import PhotoLightbox from '$components/PhotoLightbox.svelte'
-	import type { PhotoItem as PhotoItemType, Photo } from '$lib/types/photos'
+	import type { PhotoItem as PhotoItemType } from '$lib/types/photos'
 
-	const { photoItems }: { photoItems: PhotoItemType[] } = $props()
-
-	let lightboxPhoto: Photo | null = $state(null)
-	let lightboxAlbumPhotos: Photo[] = $state([])
-	let lightboxIndex = $state(0)
-
-	function openLightbox(photo: Photo, albumPhotos?: Photo[]) {
-		if (albumPhotos && albumPhotos.length > 0) {
-			// For albums, start with the first photo, not the cover photo
-			lightboxAlbumPhotos = albumPhotos
-			lightboxIndex = 0
-			lightboxPhoto = albumPhotos[0]
-		} else {
-			// For individual photos
-			lightboxPhoto = photo
-			lightboxAlbumPhotos = []
-			lightboxIndex = 0
-		}
-	}
-
-	function closeLightbox() {
-		lightboxPhoto = null
-		lightboxAlbumPhotos = []
-		lightboxIndex = 0
-	}
-
-	function navigateLightbox(direction: 'prev' | 'next') {
-		if (lightboxAlbumPhotos.length === 0) return
-
-		if (direction === 'prev') {
-			lightboxIndex = lightboxIndex > 0 ? lightboxIndex - 1 : lightboxAlbumPhotos.length - 1
-		} else {
-			lightboxIndex = lightboxIndex < lightboxAlbumPhotos.length - 1 ? lightboxIndex + 1 : 0
-		}
-
-		lightboxPhoto = lightboxAlbumPhotos[lightboxIndex]
-	}
+	const {
+		photoItems,
+		albumSlug
+	}: {
+		photoItems: PhotoItemType[]
+		albumSlug?: string
+	} = $props()
 </script>
 
 <div class="photo-grid-container">
 	<div class="photo-grid">
 		{#each photoItems as item}
-			<PhotoItem {item} onPhotoClick={openLightbox} />
+			<PhotoItem {item} {albumSlug} />
 		{/each}
 	</div>
 </div>
 
-{#if lightboxPhoto}
-	<PhotoLightbox
-		photo={lightboxPhoto}
-		albumPhotos={lightboxAlbumPhotos}
-		currentIndex={lightboxIndex}
-		onClose={closeLightbox}
-		onNavigate={navigateLightbox}
-	/>
-{/if}
-
 <style lang="scss">
 	.photo-grid-container {
 		width: 100%;
-		padding: 0 $unit-2x;
-
-		@include breakpoint('phone') {
-			padding: $unit-3x $unit;
-		}
 	}
 
 	.photo-grid {
 		columns: 3;
-		column-gap: $unit-2x;
-		max-width: 700px;
-		margin: 0 auto;
+		column-gap: $unit-3x;
+		margin: 0;
 
 		@include breakpoint('tablet') {
 			columns: 2;
-			column-gap: $unit;
+			column-gap: $unit-2x;
 		}
 
 		@include breakpoint('phone') {
diff --git a/src/lib/components/PhotoItem.svelte b/src/lib/components/PhotoItem.svelte
index e21a2f9..604ecf7 100644
--- a/src/lib/components/PhotoItem.svelte
+++ b/src/lib/components/PhotoItem.svelte
@@ -1,24 +1,32 @@
 <script lang="ts">
 	import type { PhotoItem, Photo, PhotoAlbum } from '$lib/types/photos'
 	import { isAlbum } from '$lib/types/photos'
+	import { goto } from '$app/navigation'
 
-	const { 
-		item, 
-		onPhotoClick 
-	}: { 
+	const {
+		item,
+		albumSlug // For when this is used within an album context
+	}: {
 		item: PhotoItem
-		onPhotoClick: (photo: Photo, albumPhotos?: Photo[]) => void 
+		albumSlug?: string
 	} = $props()
 
 	let imageLoaded = $state(false)
 
 	function handleClick() {
 		if (isAlbum(item)) {
-			// For albums, open the cover photo with album navigation
-			onPhotoClick(item.coverPhoto, item.photos)
+			// Navigate to album page using the slug
+			goto(`/photos/${item.slug}`)
 		} else {
-			// For individual photos, open just that photo
-			onPhotoClick(item)
+			// For individual photos, check if we have album context
+			if (albumSlug) {
+				// Navigate to photo within album
+				const photoId = item.id.replace('photo-', '') // Remove 'photo-' prefix
+				goto(`/photos/${albumSlug}/${photoId}`)
+			} else {
+				// For standalone photos, navigate to a generic photo page (to be implemented)
+				console.log('Individual photo navigation not yet implemented')
+			}
 		}
 	}
 
@@ -38,8 +46,8 @@
 				<div class="stack-photo stack-back"></div>
 				<div class="stack-photo stack-middle"></div>
 				<div class="stack-photo stack-front">
-					<img 
-						src={photo.src} 
+					<img
+						src={photo.src}
 						alt={photo.alt}
 						loading="lazy"
 						draggable="false"
@@ -60,8 +68,8 @@
 		{:else}
 			<!-- Single photo -->
 			<div class="single-photo">
-				<img 
-					src={photo.src} 
+				<img
+					src={photo.src}
 					alt={photo.alt}
 					loading="lazy"
 					draggable="false"
@@ -79,10 +87,10 @@
 <style lang="scss">
 	.photo-item {
 		break-inside: avoid;
-		margin-bottom: $unit-2x;
-		
+		margin-bottom: $unit-3x;
+
 		@include breakpoint('tablet') {
-			margin-bottom: $unit;
+			margin-bottom: $unit-2x;
 		}
 	}
 
@@ -96,7 +104,9 @@
 		border-radius: $corner-radius;
 		overflow: hidden;
 		position: relative;
-		transition: transform 0.2s ease, box-shadow 0.2s ease;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
 
 		&:hover {
 			transform: translateY(-2px);
@@ -133,7 +143,7 @@
 
 	.stack-photo {
 		border-radius: $corner-radius;
-		
+
 		&.stack-back {
 			position: absolute;
 			top: -6px;
@@ -144,7 +154,7 @@
 			z-index: 1;
 			transform: rotate(2deg);
 		}
-		
+
 		&.stack-middle {
 			position: absolute;
 			top: -3px;
@@ -155,11 +165,11 @@
 			z-index: 2;
 			transform: rotate(-1deg);
 		}
-		
+
 		&.stack-front {
 			position: relative;
 			z-index: 3;
-			
+
 			img {
 				width: 100%;
 				height: auto;
@@ -209,7 +219,7 @@
 			.stack-back {
 				transform: rotate(3deg) translateY(-1px);
 			}
-			
+
 			.stack-middle {
 				transform: rotate(-1.5deg) translateY(-0.5px);
 			}
@@ -226,7 +236,7 @@
 		background-size: 200% 200%;
 		animation: shimmer 1.5s ease-in-out infinite;
 		border-radius: $corner-radius;
-		
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -252,4 +262,4 @@
 			background-position: -200% 0;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/PhotoLightbox.svelte b/src/lib/components/PhotoLightbox.svelte
index 7716655..a7550f8 100644
--- a/src/lib/components/PhotoLightbox.svelte
+++ b/src/lib/components/PhotoLightbox.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
 	import type { Photo } from '$lib/types/photos'
 
-	const { 
-		photo, 
-		albumPhotos = [], 
-		currentIndex = 0, 
-		onClose, 
-		onNavigate 
-	}: { 
+	const {
+		photo,
+		albumPhotos = [],
+		currentIndex = 0,
+		onClose,
+		onNavigate
+	}: {
 		photo: Photo
 		albumPhotos?: Photo[]
 		currentIndex?: number
 		onClose: () => void
-		onNavigate: (direction: 'prev' | 'next') => void 
+		onNavigate: (direction: 'prev' | 'next') => void
 	} = $props()
 
 	let imageLoaded = $state(false)
@@ -88,7 +88,12 @@
 		<!-- Close button -->
 		<button class="close-button" onclick={onClose} type="button">
 			<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-				<path d="M6 6l12 12M18 6l-12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+				<path
+					d="M6 6l12 12M18 6l-12 12"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+				/>
 			</svg>
 		</button>
 
@@ -96,24 +101,31 @@
 		{#if hasNavigation}
 			<button class="nav-button nav-prev" onclick={() => onNavigate('prev')} type="button">
 				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-					<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+					<path
+						d="M15 18l-6-6 6-6"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
 				</svg>
 			</button>
 			<button class="nav-button nav-next" onclick={() => onNavigate('next')} type="button">
 				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-					<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+					<path
+						d="M9 18l6-6-6-6"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
 				</svg>
 			</button>
 		{/if}
 
 		<!-- Photo -->
 		<div class="photo-container">
-			<img 
-				src={photo.src} 
-				alt={photo.alt} 
-				onload={handleImageLoad}
-				class:loaded={imageLoaded}
-			/>
+			<img src={photo.src} alt={photo.alt} onload={handleImageLoad} class:loaded={imageLoaded} />
 			{#if !imageLoaded}
 				<div class="loading-indicator">
 					<div class="spinner"></div>
@@ -163,7 +175,7 @@
 		justify-content: center;
 		z-index: 1000;
 		padding: $unit-2x;
-		
+
 		@include breakpoint('phone') {
 			padding: $unit;
 		}
@@ -175,7 +187,7 @@
 		max-height: 90vh;
 		display: flex;
 		gap: $unit-3x;
-		
+
 		@include breakpoint('phone') {
 			flex-direction: column;
 			max-width: 95vw;
@@ -200,7 +212,7 @@
 		&:hover {
 			background: rgba(255, 255, 255, 0.1);
 		}
-		
+
 		@include breakpoint('phone') {
 			top: -$unit-4x;
 			right: -$unit;
@@ -231,7 +243,7 @@
 		&.nav-next {
 			right: -$unit-6x;
 		}
-		
+
 		@include breakpoint('phone') {
 			&.nav-prev {
 				left: $unit;
@@ -249,7 +261,7 @@
 		align-items: center;
 		justify-content: center;
 		position: relative;
-		
+
 		img {
 			max-width: 70vw;
 			max-height: 80vh;
@@ -257,11 +269,11 @@
 			border-radius: $corner-radius;
 			opacity: 0;
 			transition: opacity 0.3s ease;
-			
+
 			&.loaded {
 				opacity: 1;
 			}
-			
+
 			@include breakpoint('phone') {
 				max-width: 95vw;
 				max-height: 60vh;
@@ -274,7 +286,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		
+
 		.spinner {
 			width: 40px;
 			height: 40px;
@@ -301,11 +313,11 @@
 		backdrop-filter: blur(10px);
 		opacity: 0;
 		transition: opacity 0.3s ease 0.1s; // Slight delay to sync with image
-		
+
 		&.loaded {
 			opacity: 1;
 		}
-		
+
 		@include breakpoint('phone') {
 			width: 100%;
 			max-height: 30vh;
@@ -341,13 +353,13 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: baseline;
-		
+
 		dt {
 			font-weight: 500;
 			opacity: 0.7;
 			margin-right: $unit-2x;
 		}
-		
+
 		dd {
 			margin: 0;
 			text-align: right;
@@ -361,4 +373,4 @@
 		opacity: 0.7;
 		font-size: 0.9rem;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/Pill.svelte b/src/lib/components/Pill.svelte
index 48edfde..956f340 100644
--- a/src/lib/components/Pill.svelte
+++ b/src/lib/components/Pill.svelte
@@ -32,7 +32,6 @@
 		color: $grey-20; // #666
 		font-size: 1rem;
 		font-weight: 400;
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		transition: all 0.2s ease;
 
 		:global(svg) {
diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte
index c775363..9056316 100644
--- a/src/lib/components/PostContent.svelte
+++ b/src/lib/components/PostContent.svelte
@@ -25,13 +25,13 @@
 		</time>
 	</header>
 
-	{#if post.type === 'image' && post.images}
+	{#if post.images && post.images.length > 0}
 		<div class="post-images">
 			<ImagePost images={post.images} alt={post.title || 'Post image'} />
 		</div>
 	{/if}
 
-	{#if post.type === 'link' && post.link}
+	{#if post.link}
 		<div class="post-link-preview">
 			<LinkCard link={post.link} />
 		</div>
@@ -51,24 +51,44 @@
 		max-width: 784px;
 		margin: 0 auto;
 
-		&.note {
+		// Post type styles for simplified post types
+		&.post {
 			.post-body {
-				font-size: 1.1rem;
+				font-size: 1.125rem;
 			}
 		}
-		
-		&.image {
-			.post-images {
-				margin-bottom: $unit-4x;
+
+		&.essay {
+			.post-body {
+				font-size: 1.125rem;
+				line-height: 1.5;
 			}
 		}
-		
-		&.link {
-			.post-link-preview {
-				margin-bottom: $unit-4x;
-				max-width: 600px;
+
+		// Legacy type support
+		&.note,
+		&.microblog {
+			.post-body {
+				font-size: 1.125rem;
 			}
 		}
+
+		&.blog {
+			.post-body {
+				font-size: 1.125rem;
+				line-height: 1.5;
+			}
+		}
+	}
+
+	// Content-specific styles
+	.post-images {
+		margin-bottom: $unit-4x;
+	}
+
+	.post-link-preview {
+		margin-bottom: $unit-4x;
+		max-width: 600px;
 	}
 
 	.post-header {
@@ -91,8 +111,8 @@
 	}
 
 	.post-body {
-		color: $grey-20;
-		line-height: 1.6;
+		color: $grey-10;
+		line-height: 1.5;
 
 		:global(h2) {
 			margin: $unit-4x 0 $unit-2x;
diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte
index acc2118..62e5ade 100644
--- a/src/lib/components/PostItem.svelte
+++ b/src/lib/components/PostItem.svelte
@@ -57,7 +57,7 @@
 
 		&.note {
 			.post-excerpt {
-				font-size: 1rem;
+				font-size: 1.125rem;
 			}
 		}
 
@@ -107,8 +107,8 @@
 	.post-excerpt {
 		margin: 0;
 		color: $grey-00;
-		font-size: 1rem;
-		line-height: 1.3;
+		font-size: 1.125rem;
+		line-height: 1.5;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 3;
diff --git a/src/lib/components/ProjectContent.svelte b/src/lib/components/ProjectContent.svelte
new file mode 100644
index 0000000..20adb6c
--- /dev/null
+++ b/src/lib/components/ProjectContent.svelte
@@ -0,0 +1,281 @@
+<script lang="ts">
+	import type { Project } from '$lib/types/project'
+
+	interface Props {
+		project: Project
+	}
+
+	let { project }: Props = $props()
+
+	// Function to render BlockNote content as HTML
+	function renderBlockNoteContent(content: any): string {
+		if (!content || !content.content) return ''
+
+		return content.content
+			.map((block: any) => {
+				switch (block.type) {
+					case 'heading':
+						const level = block.attrs?.level || 1
+						const text = block.content?.[0]?.text || ''
+						return `<h${level}>${text}</h${level}>`
+
+					case 'paragraph':
+						if (!block.content || block.content.length === 0) return '<p><br></p>'
+						const paragraphText = block.content.map((c: any) => c.text || '').join('')
+						return `<p>${paragraphText}</p>`
+
+					case 'image':
+						return `<figure><img src="${block.attrs?.src}" alt="${block.attrs?.alt || ''}" style="width: ${block.attrs?.width || '100%'}; height: ${block.attrs?.height || 'auto'};" /></figure>`
+
+					case 'bulletedList':
+					case 'numberedList':
+						const tag = block.type === 'bulletedList' ? 'ul' : 'ol'
+						const items =
+							block.content
+								?.map((item: any) => {
+									const itemText = item.content?.[0]?.content?.[0]?.text || ''
+									return `<li>${itemText}</li>`
+								})
+								.join('') || ''
+						return `<${tag}>${items}</${tag}>`
+
+					default:
+						return ''
+				}
+			})
+			.join('')
+	}
+</script>
+
+<article class="project-content">
+	<!-- Project Details -->
+	<div class="project-details">
+		<div class="meta-grid">
+			{#if project.client}
+				<div class="meta-item">
+					<span class="meta-label">Client</span>
+					<span class="meta-value">{project.client}</span>
+				</div>
+			{/if}
+
+			{#if project.year}
+				<div class="meta-item">
+					<span class="meta-label">Year</span>
+					<span class="meta-value">{project.year}</span>
+				</div>
+			{/if}
+
+			{#if project.role}
+				<div class="meta-item">
+					<span class="meta-label">Role</span>
+					<span class="meta-value">{project.role}</span>
+				</div>
+			{/if}
+		</div>
+
+		{#if project.externalUrl}
+			<div class="external-link-wrapper">
+				<a
+					href={project.externalUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="external-link"
+				>
+					Visit Project →
+				</a>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Case Study Content -->
+	{#if project.caseStudyContent && project.caseStudyContent.content && project.caseStudyContent.content.length > 0}
+		<div class="case-study-section">
+			<div class="case-study-content">
+				{@html renderBlockNoteContent(project.caseStudyContent)}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Gallery (if available) -->
+	{#if project.gallery && project.gallery.length > 0}
+		<div class="gallery-section">
+			<h2>Gallery</h2>
+			<div class="gallery-grid">
+				{#each project.gallery as image}
+					<img src={image} alt="Project gallery image" />
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Navigation -->
+	<nav class="project-nav">
+		{#if project.projectType === 'labs'}
+			<a href="/labs" class="back-link">← Back to labs</a>
+		{:else}
+			<a href="/" class="back-link">← Back to projects</a>
+		{/if}
+	</nav>
+</article>
+
+<style lang="scss">
+	/* Project Content */
+	.project-content {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+	}
+
+	.project-details {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+		padding-bottom: $unit-3x;
+		border-bottom: 1px solid $grey-90;
+	}
+
+	.meta-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+		gap: $unit-2x;
+
+		.meta-item {
+			display: flex;
+			flex-direction: column;
+			gap: $unit-half;
+		}
+
+		.meta-label {
+			font-size: 0.875rem;
+			color: $grey-60;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+		}
+
+		.meta-value {
+			font-size: 1rem;
+			color: $grey-20;
+			font-weight: 500;
+		}
+	}
+
+	.external-link-wrapper {
+		text-align: center;
+	}
+
+	.external-link {
+		display: inline-block;
+		padding: $unit-2x $unit-3x;
+		background: $grey-10;
+		color: white;
+		text-decoration: none;
+		border-radius: 50px;
+		font-weight: 500;
+		font-size: 0.925rem;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background: $grey-20;
+		}
+	}
+
+	/* Case Study Section */
+	.case-study-content {
+		:global(h1),
+		:global(h2),
+		:global(h3) {
+			margin: $unit-3x 0 $unit-2x;
+			color: $grey-10;
+			font-weight: 600;
+
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+
+		:global(h1) {
+			font-size: 1.75rem;
+		}
+
+		:global(h2) {
+			font-size: 1.375rem;
+		}
+
+		:global(h3) {
+			font-size: 1.125rem;
+		}
+
+		:global(p) {
+			margin: $unit-2x 0;
+			font-size: 1.0625rem;
+			line-height: 1.65;
+			color: $grey-20;
+		}
+
+		:global(figure) {
+			margin: $unit-3x 0;
+
+			:global(img) {
+				width: 100%;
+				height: auto;
+				border-radius: $unit;
+			}
+		}
+
+		:global(ul),
+		:global(ol) {
+			margin: $unit-2x 0;
+			padding-left: $unit-3x;
+
+			:global(li) {
+				margin: $unit 0;
+				font-size: 1.0625rem;
+				line-height: 1.65;
+				color: $grey-20;
+			}
+		}
+	}
+
+	/* Gallery Section */
+	.gallery-section {
+		padding-top: $unit-3x;
+		border-top: 1px solid $grey-90;
+
+		h2 {
+			font-size: 1.75rem;
+			margin: 0 0 $unit-3x;
+			color: $grey-10;
+			font-weight: 600;
+		}
+	}
+
+	.gallery-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: $unit-2x;
+
+		img {
+			width: 100%;
+			height: auto;
+			border-radius: $unit;
+		}
+	}
+
+	/* Navigation */
+	.project-nav {
+		text-align: center;
+		padding-top: $unit-3x;
+		border-top: 1px solid $grey-90;
+	}
+
+	.back-link {
+		color: $grey-40;
+		text-decoration: none;
+		font-size: 0.925rem;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+	}
+</style>
diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
index 26248d5..1b29103 100644
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@@ -1,72 +1,205 @@
 <script lang="ts">
-	import SVGHoverEffect from '$components/SVGHoverEffect.svelte'
-	import type { SvelteComponent } from 'svelte'
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
 
-	export let SVGComponent: typeof SvelteComponent
-	export let backgroundColor: string
-	export let name: string
-	export let description: string
-	export let highlightColor: string
-	export let index: number = 0
+	interface Props {
+		logoUrl: string | null
+		backgroundColor: string
+		name: string
+		slug: string
+		description: string
+		highlightColor: string
+		status?: 'draft' | 'published' | 'list-only' | 'password-protected'
+		index?: number
+	}
+
+	let {
+		logoUrl,
+		backgroundColor,
+		name,
+		slug,
+		description,
+		highlightColor,
+		status = 'published',
+		index = 0
+	}: Props = $props()
+
+	const isEven = $derived(index % 2 === 0)
+	const isClickable = $derived(status === 'published' || status === 'password-protected')
+	const isListOnly = $derived(status === 'list-only')
+	const isPasswordProtected = $derived(status === 'password-protected')
 
-	$: isEven = index % 2 === 0
-	
 	// Create highlighted description
-	$: highlightedDescription = description.replace(
-		new RegExp(`(${name})`, 'gi'),
-		`<span style="color: ${highlightColor};">$1</span>`
+	const highlightedDescription = $derived(
+		description.replace(
+			new RegExp(`(${name})`, 'gi'),
+			`<span style="color: ${highlightColor};">$1</span>`
+		)
 	)
-	
+
 	// 3D tilt effect
 	let cardElement: HTMLDivElement
-	let isHovering = false
-	let transform = ''
-	
+	let logoElement: HTMLElement
+	let isHovering = $state(false)
+	let transform = $state('')
+	let svgContent = $state('')
+
+	// Logo gravity effect
+	let logoTransform = $state('')
+
+	onMount(async () => {
+		// Load SVG content
+		if (logoUrl) {
+			try {
+				const response = await fetch(logoUrl)
+				if (response.ok) {
+					const text = await response.text()
+					const parser = new DOMParser()
+					const doc = parser.parseFromString(text, 'image/svg+xml')
+					const svgElement = doc.querySelector('svg')
+					if (svgElement) {
+						svgElement.removeAttribute('width')
+						svgElement.removeAttribute('height')
+						svgContent = svgElement.outerHTML
+					}
+				}
+			} catch (error) {
+				console.error('Failed to load SVG:', error)
+			}
+		}
+
+		return () => {
+			// Cleanup if needed
+		}
+	})
+
 	function handleMouseMove(e: MouseEvent) {
 		if (!cardElement || !isHovering) return
-		
+
 		const rect = cardElement.getBoundingClientRect()
 		const x = e.clientX - rect.left
 		const y = e.clientY - rect.top
-		
+
 		const centerX = rect.width / 2
 		const centerY = rect.height / 2
-		
-		const rotateX = ((y - centerY) / centerY) * -4 // -4 to 4 degrees
-		const rotateY = ((x - centerX) / centerX) * 4 // -4 to 4 degrees
-		
+
+		// 3D tilt for card
+		const rotateX = ((y - centerY) / centerY) * -4
+		const rotateY = ((x - centerX) / centerX) * 4
 		transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.014, 1.014, 1.014)`
+
+		// Gravity-based logo animation
+		// Logo slides in the same direction as the tilt
+		// When tilting down (mouse at bottom), logo slides down
+		// When tilting up (mouse at top), logo slides up
+		const logoX = -rotateY * 3 // Same direction as tilt
+		const logoY = rotateX * 3 // Same direction as tilt
+
+		logoTransform = `translate(${logoX}px, ${logoY}px)`
 	}
-	
+
 	function handleMouseEnter() {
 		isHovering = true
 	}
-	
+
 	function handleMouseLeave() {
 		isHovering = false
 		transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
+		logoTransform = 'translate(0, 0)'
+	}
+
+	function handleClick() {
+		if (isClickable) {
+			goto(`/work/${slug}`)
+		}
 	}
 </script>
 
-<div 
+<div
 	class="project-item {isEven ? 'even' : 'odd'}"
+	class:clickable={isClickable}
+	class:list-only={isListOnly}
+	class:password-protected={isPasswordProtected}
 	bind:this={cardElement}
-	on:mousemove={handleMouseMove}
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
+	onclick={handleClick}
+	onkeydown={(e) => e.key === 'Enter' && handleClick()}
+	onmousemove={isClickable ? handleMouseMove : undefined}
+	onmouseenter={isClickable ? handleMouseEnter : undefined}
+	onmouseleave={isClickable ? handleMouseLeave : undefined}
 	style="transform: {transform};"
+	role={isClickable ? 'button' : 'article'}
+	tabindex={isClickable ? 0 : -1}
 >
-	<div class="project-logo">
-		<SVGHoverEffect
-			{SVGComponent}
-			{backgroundColor}
-			maxMovement={10}
-			containerHeight="80px"
-			bounceDamping={0.2}
-		/>
+	<div class="project-logo" style="background-color: {backgroundColor}">
+		{#if svgContent}
+			<div bind:this={logoElement} class="logo-svg" style="transform: {logoTransform}">
+				{@html svgContent}
+			</div>
+		{:else if logoUrl}
+			<img
+				src={logoUrl}
+				alt="{name} logo"
+				class="logo-image"
+				bind:this={logoElement}
+				style="transform: {logoTransform}"
+			/>
+		{/if}
 	</div>
 	<div class="project-content">
 		<p class="project-description">{@html highlightedDescription}</p>
+
+		{#if isListOnly}
+			<div class="status-indicator list-only">
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" />
+					<path
+						d="M20.188 10.934c.388.472.612 1.057.612 1.686 0 .63-.224 1.214-.612 1.686a11.79 11.79 0 01-1.897 1.853c-1.481 1.163-3.346 2.24-5.291 2.24-1.945 0-3.81-1.077-5.291-2.24A11.79 11.79 0 016.812 14.32C6.224 13.648 6 13.264 6 12.62c0-.63.224-1.214.612-1.686A11.79 11.79 0 018.709 9.08c1.481-1.163 3.346-2.24 5.291-2.24 1.945 0 3.81 1.077 5.291 2.24a11.79 11.79 0 011.897 1.853z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path d="M2 2l20 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+				</svg>
+				<span>Coming Soon</span>
+			</div>
+		{:else if isPasswordProtected}
+			<div class="status-indicator password-protected">
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect
+						x="3"
+						y="11"
+						width="18"
+						height="11"
+						rx="2"
+						ry="2"
+						stroke="currentColor"
+						stroke-width="2"
+					/>
+					<circle cx="12" cy="16" r="1" fill="currentColor" />
+					<path
+						d="M7 11V7a5 5 0 0 1 10 0v4"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Password Required</span>
+			</div>
+		{/if}
 	</div>
 </div>
 
@@ -79,19 +212,35 @@
 		padding: $unit-3x;
 		background: $grey-100;
 		border-radius: $card-corner-radius;
-		transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
+		transition:
+			transform 0.15s ease-out,
+			box-shadow 0.15s ease-out,
+			opacity 0.15s ease-out;
 		transform-style: preserve-3d;
 		will-change: transform;
-		cursor: pointer;
+		cursor: default;
 
-		&:hover {
-			box-shadow: 
-				0 10px 30px rgba(0, 0, 0, 0.1),
-				0 1px 8px rgba(0, 0, 0, 0.06);
+		&.clickable {
+			cursor: pointer;
+
+			&:hover {
+				box-shadow:
+					0 10px 30px rgba(0, 0, 0, 0.1),
+					0 1px 8px rgba(0, 0, 0, 0.06);
+			}
+		}
+
+		&.list-only {
+			opacity: 0.7;
+			background: $grey-97;
+		}
+
+		&.password-protected {
+			// Keep full interactivity for password-protected items
 		}
 
 		&.odd {
-			flex-direction: row-reverse;
+			// flex-direction: row-reverse;
 		}
 	}
 
@@ -99,19 +248,33 @@
 		flex-shrink: 0;
 		width: 80px;
 		height: 80px;
+		border-radius: $unit-2x;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: $unit-2x;
+		box-sizing: border-box;
 
-		:global(.svg-container) {
-			width: 80px !important;
-			height: 80px !important;
-			border-radius: $unit-2x;
+		.logo-image {
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+			transition: transform 0.4s cubic-bezier(0.2, 2.1, 0.3, 0.95);
+			will-change: transform;
+		}
+
+		.logo-svg {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-		}
+			width: 100%;
+			height: 100%;
+			transition: transform 0.4s cubic-bezier(0.2, 2.1, 0.3, 0.95);
 
-		:global(svg) {
-			width: 48px !important;
-			height: 48px !important;
+			:global(svg) {
+				width: 48px;
+				height: 48px;
+			}
 		}
 	}
 
@@ -127,6 +290,27 @@
 		color: $grey-00;
 	}
 
+	.status-indicator {
+		display: flex;
+		align-items: center;
+		gap: $unit-half;
+		margin-top: $unit;
+		font-size: 0.875rem;
+		font-weight: 500;
+
+		&.list-only {
+			color: $grey-60;
+		}
+
+		&.password-protected {
+			color: $blue-50;
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+	}
+
 	@include breakpoint('phone') {
 		.project-item {
 			flex-direction: column !important;
@@ -137,16 +321,6 @@
 		.project-logo {
 			width: 60px;
 			height: 60px;
-
-			:global(.svg-container) {
-				width: 60px !important;
-				height: 60px !important;
-			}
-
-			:global(svg) {
-				width: 36px !important;
-				height: 36px !important;
-			}
 		}
 	}
 </style>
diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte
index 2a5493d..41ba627 100644
--- a/src/lib/components/ProjectList.svelte
+++ b/src/lib/components/ProjectList.svelte
@@ -1,52 +1,12 @@
 <script lang="ts">
 	import ProjectItem from '$components/ProjectItem.svelte'
+	import type { Project } from '$lib/types/project'
 
-	import MaitsuLogo from '$illos/logo-maitsu.svg?component'
-	import SlackLogo from '$illos/logo-slack.svg?component'
-	import FigmaLogo from '$illos/logo-figma.svg?component'
-	import PinterestLogo from '$illos/logo-pinterest.svg?component'
-	import SVGHoverEffect from '$components/SVGHoverEffect.svelte'
-
-	interface Project {
-		SVGComponent: typeof SvelteComponent
-		backgroundColor: string
-		name: string
-		description: string
-		highlightColor: string
+	interface Props {
+		projects: Project[]
 	}
 
-	const projects: Project[] = [
-		{
-			SVGComponent: MaitsuLogo,
-			backgroundColor: '#FFF7EA',
-			name: 'Maitsu',
-			description: "Maitsu is a hobby journal that helps people make something new every week.",
-			highlightColor: '#F77754'
-		},
-		{
-			SVGComponent: SlackLogo,
-			backgroundColor: '#4a154b',
-			name: 'Slack',
-			description:
-				'At Slack, I helped redefine strategy for Workflows and other features in under the automation umbrella.',
-			highlightColor: '#611F69'
-		},
-		{
-			SVGComponent: FigmaLogo,
-			backgroundColor: '#2c2c2c',
-			name: 'Figma',
-			description: 'At Figma, I designed features and led R&D and strategy for the nascent prototyping team.',
-			highlightColor: '#0ACF83'
-		},
-		{
-			SVGComponent: PinterestLogo,
-			backgroundColor: '#f7f7f7',
-			name: 'Pinterest',
-			description:
-				'At Pinterest, I was the first product design hired, and touched almost every part of the product.',
-			highlightColor: '#CB1F27'
-		}
-	]
+	let { projects = [] }: Props = $props()
 </script>
 
 <section class="projects">
@@ -54,16 +14,32 @@
 		<li>
 			<div class="intro-card">
 				<p class="intro-text">
-					<span class="highlighted">@jedmund</span> is a software designer and strategist based out of San Francisco.
+					<span class="highlighted">@jedmund</span> is a software designer and strategist based out of
+					San Francisco.
 				</p>
 				<p class="intro-text">
-					In his 15 year career, he's focused his design practice on building tools that help people connect with technology—and their own creativity.
+					In his 15 year career, he's focused his design practice on building tools that help people
+					connect with technology—and their own creativity.
 				</p>
 			</div>
 		</li>
+		{#if projects.length === 0}
+			<li>
+				<div class="no-projects">No projects found</div>
+			</li>
+		{/if}
 		{#each projects as project, index}
 			<li>
-				<ProjectItem {...project} {index} />
+				<ProjectItem
+					logoUrl={project.logoUrl}
+					backgroundColor={project.backgroundColor || '#f7f7f7'}
+					name={project.title}
+					slug={project.slug}
+					description={project.description || ''}
+					highlightColor={project.highlightColor || '#333'}
+					status={project.status}
+					{index}
+				/>
 			</li>
 		{/each}
 	</ul>
@@ -74,7 +50,7 @@
 		display: flex;
 		justify-content: center;
 		width: 100%;
-		
+
 		ul {
 			display: flex;
 			flex-direction: column;
@@ -108,7 +84,13 @@
 		}
 
 		.highlighted {
-			color: #D0290D;
+			color: #d0290d;
 		}
 	}
+
+	.no-projects {
+		padding: $unit-3x;
+		text-align: center;
+		color: $grey-40;
+	}
 </style>
diff --git a/src/lib/components/ProjectPasswordProtection.svelte b/src/lib/components/ProjectPasswordProtection.svelte
new file mode 100644
index 0000000..f48cd68
--- /dev/null
+++ b/src/lib/components/ProjectPasswordProtection.svelte
@@ -0,0 +1,251 @@
+<script lang="ts">
+	import Button from '$lib/components/admin/Button.svelte'
+	import { onMount } from 'svelte'
+
+	interface Props {
+		projectSlug: string
+		correctPassword: string
+		projectType?: 'work' | 'labs'
+		children?: any
+	}
+
+	let { projectSlug, correctPassword, projectType = 'work', children }: Props = $props()
+
+	let isUnlocked = $state(false)
+	let password = $state('')
+	let error = $state('')
+	let isLoading = $state(false)
+
+	// Check if project is already unlocked in session storage
+	onMount(() => {
+		const unlockedProjects = JSON.parse(sessionStorage.getItem('unlockedProjects') || '[]')
+		isUnlocked = unlockedProjects.includes(projectSlug)
+	})
+
+	async function handleSubmit() {
+		if (!password.trim()) {
+			error = 'Please enter a password'
+			return
+		}
+
+		isLoading = true
+		error = ''
+
+		// Simulate a small delay for better UX
+		await new Promise((resolve) => setTimeout(resolve, 500))
+
+		if (password === correctPassword) {
+			// Store in session storage
+			const unlockedProjects = JSON.parse(sessionStorage.getItem('unlockedProjects') || '[]')
+			if (!unlockedProjects.includes(projectSlug)) {
+				unlockedProjects.push(projectSlug)
+				sessionStorage.setItem('unlockedProjects', JSON.stringify(unlockedProjects))
+			}
+			isUnlocked = true
+		} else {
+			error = 'Incorrect password. Please try again.'
+			password = ''
+		}
+
+		isLoading = false
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			handleSubmit()
+		}
+	}
+</script>
+
+{#if isUnlocked}
+	{@render children?.()}
+{:else}
+	{#snippet passwordHeader()}
+		<div class="password-header">
+			<div class="lock-icon">
+				<svg
+					width="48"
+					height="48"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M18 11H6C5.45 11 5 11.45 5 12V19C5 19.55 5.45 20 6 20H18C18.55 20 19 19.55 19 19V12C19 11.45 18.55 11 18 11Z"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</div>
+			<h1>This project is password protected</h1>
+			<p>Please enter the password to view this project.</p>
+		</div>
+	{/snippet}
+
+	{#snippet passwordContent()}
+		<div class="password-content">
+			<div class="form-wrapper">
+				<div class="input-group">
+					<input
+						type="password"
+						bind:value={password}
+						placeholder="Enter password"
+						class="password-input"
+						class:error
+						onkeypress={handleKeyPress}
+						disabled={isLoading}
+					/>
+					<Button
+						variant="primary"
+						onclick={handleSubmit}
+						disabled={isLoading || !password.trim()}
+						class="submit-button"
+					>
+						{isLoading ? 'Checking...' : 'Access Project'}
+					</Button>
+				</div>
+
+				{#if error}
+					<div class="error-message">{error}</div>
+				{/if}
+			</div>
+
+			<div class="back-link-wrapper">
+				{#if projectType === 'labs'}
+					<a href="/labs" class="back-link">← Back to labs</a>
+				{:else}
+					<a href="/" class="back-link">← Back to projects</a>
+				{/if}
+			</div>
+		</div>
+	{/snippet}
+
+	{@render passwordHeader()}
+	{@render passwordContent()}
+{/if}
+
+<style lang="scss">
+	.password-header {
+		text-align: center;
+		width: 100%;
+
+		.lock-icon {
+			color: $grey-40;
+			margin-bottom: $unit-3x;
+
+			svg {
+				display: block;
+				margin: 0 auto;
+			}
+		}
+
+		h1 {
+			font-size: 2rem;
+			font-weight: 600;
+			color: $grey-10;
+			margin: 0 0 $unit-2x;
+
+			@include breakpoint('phone') {
+				font-size: 1.5rem;
+			}
+		}
+
+		p {
+			color: $grey-40;
+			margin: 0;
+			line-height: 1.5;
+			font-size: 1.125rem;
+		}
+	}
+
+	.password-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 300px;
+		gap: $unit-4x;
+
+		.form-wrapper {
+			width: 100%;
+			max-width: 400px;
+		}
+
+		.input-group {
+			display: flex;
+			flex-direction: column;
+			gap: $unit-2x;
+			margin-bottom: $unit-2x;
+
+			@include breakpoint('tablet') {
+				flex-direction: row;
+			}
+		}
+
+		.password-input {
+			flex: 1;
+			padding: $unit-2x;
+			border: 1px solid $grey-80;
+			border-radius: $unit;
+			font-size: 1rem;
+			transition:
+				border-color 0.2s ease,
+				box-shadow 0.2s ease;
+
+			&:focus {
+				outline: none;
+				border-color: $blue-50;
+				box-shadow: 0 0 0 3px rgba(20, 130, 193, 0.1);
+			}
+
+			&.error {
+				border-color: $red-50;
+				box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+			}
+
+			&:disabled {
+				background: $grey-95;
+				color: $grey-60;
+				cursor: not-allowed;
+			}
+		}
+
+		:global(.submit-button) {
+			min-width: 140px;
+		}
+
+		.error-message {
+			font-size: 0.875rem;
+			color: $red-50;
+			text-align: left;
+			margin: 0;
+		}
+
+		.back-link-wrapper {
+			border-top: 1px solid $grey-90;
+			padding-top: $unit-3x;
+			text-align: center;
+			width: 100%;
+		}
+
+		.back-link {
+			color: $grey-40;
+			text-decoration: none;
+			font-size: 0.925rem;
+			transition: color 0.2s ease;
+
+			&:hover {
+				color: $grey-20;
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/SegmentedController.svelte b/src/lib/components/SegmentedController.svelte
index 2c9ee55..8b93256 100644
--- a/src/lib/components/SegmentedController.svelte
+++ b/src/lib/components/SegmentedController.svelte
@@ -4,108 +4,125 @@
 	import UniverseIcon from '$icons/universe.svg'
 	import PhotosIcon from '$icons/photos.svg'
 	import { page } from '$app/stores'
-	
+
 	const currentPath = $derived($page.url.pathname)
-	
+
 	interface NavItem {
 		icon: typeof WorkIcon
 		text: string
 		href: string
 		variant: 'work' | 'universe' | 'labs' | 'photos'
 	}
-	
+
 	const navItems: NavItem[] = [
 		{ icon: WorkIcon, text: 'Work', href: '/', variant: 'work' },
+		{ icon: UniverseIcon, text: 'Universe', href: '/universe', variant: 'universe' },
 		{ icon: PhotosIcon, text: 'Photos', href: '/photos', variant: 'photos' },
-		{ icon: LabsIcon, text: 'Labs', href: '/labs', variant: 'labs' },
-		{ icon: UniverseIcon, text: 'Universe', href: '/universe', variant: 'universe' }
+		{ icon: LabsIcon, text: 'Labs', href: '/labs', variant: 'labs' }
 	]
-	
+
 	// Track hover state for each item
 	let hoveredIndex = $state<number | null>(null)
-	
+
 	// Calculate active index based on current path
 	const activeIndex = $derived(
-		currentPath === '/' ? 0 : 
-		currentPath.startsWith('/photos') ? 1 :
-		currentPath.startsWith('/labs') ? 2 :
-		currentPath.startsWith('/universe') ? 3 : 
-		-1
+		currentPath === '/'
+			? 0
+			: currentPath.startsWith('/universe')
+				? 1
+				: currentPath.startsWith('/photos')
+					? 2
+					: currentPath.startsWith('/labs')
+						? 3
+						: -1
 	)
-	
+
 	// Calculate pill position and width
 	let containerElement: HTMLElement
 	let itemElements: HTMLAnchorElement[] = []
 	let pillStyle = $state('')
-	
+
 	function updatePillPosition() {
 		if (activeIndex >= 0 && itemElements[activeIndex] && containerElement) {
 			const activeElement = itemElements[activeIndex]
 			const containerRect = containerElement.getBoundingClientRect()
 			const activeRect = activeElement.getBoundingClientRect()
-			
+
 			// Subtract the container padding (8px) from the left position
 			const left = activeRect.left - containerRect.left - 8
 			const width = activeRect.width
-			
+
 			pillStyle = `transform: translateX(${left}px); width: ${width}px;`
 		}
 	}
-	
+
 	$effect(() => {
 		updatePillPosition()
-		
+
 		// Handle window resize
 		const handleResize = () => updatePillPosition()
 		window.addEventListener('resize', handleResize)
-		
+
 		return () => {
 			window.removeEventListener('resize', handleResize)
 		}
 	})
-	
+
 	// Get background color based on variant
 	function getBgColor(variant: string): string {
 		switch (variant) {
-			case 'work': return '#ffcdc5' // $work-bg
-			case 'photos': return '#e8c5ff' // $photos-bg (purple)
-			case 'universe': return '#ffebc5' // $universe-bg
-			case 'labs': return '#c5eaff' // $labs-bg
-			default: return '#c5eaff'
+			case 'work':
+				return '#ffcdc5' // $work-bg
+			case 'photos':
+				return '#e8c5ff' // $photos-bg (purple)
+			case 'universe':
+				return '#ffebc5' // $universe-bg
+			case 'labs':
+				return '#c5eaff' // $labs-bg
+			default:
+				return '#c5eaff'
 		}
 	}
-	
+
 	// Get text color based on variant
 	function getTextColor(variant: string): string {
 		switch (variant) {
-			case 'work': return '#d0290d' // $work-color
-			case 'photos': return '#7c3aed' // $photos-color (purple)
-			case 'universe': return '#b97d14' // $universe-color
-			case 'labs': return '#1482c1' // $labs-color
-			default: return '#1482c1'
+			case 'work':
+				return '#d0290d' // $work-color
+			case 'photos':
+				return '#7c3aed' // $photos-color (purple)
+			case 'universe':
+				return '#b97d14' // $universe-color
+			case 'labs':
+				return '#1482c1' // $labs-color
+			default:
+				return '#1482c1'
 		}
 	}
 </script>
 
 <nav class="segmented-controller" bind:this={containerElement}>
 	{#if activeIndex >= 0}
-		<div 
+		<div
 			class="active-pill"
 			style="{pillStyle} background-color: {getBgColor(navItems[activeIndex].variant)};"
 		></div>
 	{/if}
-	
+
 	{#each navItems as item, index}
-		<a 
+		<a
 			href={item.href}
 			class="nav-item"
 			class:active={index === activeIndex}
 			bind:this={itemElements[index]}
 			style="color: {index === activeIndex ? getTextColor(item.variant) : '#666'};"
-			onmouseenter={() => hoveredIndex = index}
-			onmouseleave={() => hoveredIndex = null}
+			onmouseenter={() => (hoveredIndex = index)}
+			onmouseleave={() => (hoveredIndex = null)}
 		>
-			<svelte:component this={item.icon} class="nav-icon {hoveredIndex === index ? 'animate' : ''}" />
+			<svelte:component
+				this={item.icon}
+				class="nav-icon {hoveredIndex === index ? 'animate' : ''}"
+			/>
 			<span>{item.text}</span>
 		</a>
 	{/each}
@@ -113,7 +130,7 @@
 
 <style lang="scss">
 	@import '../../assets/styles/animations';
-	
+
 	.segmented-controller {
 		display: flex;
 		align-items: center;
@@ -125,7 +142,7 @@
 		position: relative;
 		overflow: hidden;
 	}
-	
+
 	.active-pill {
 		position: absolute;
 		top: $unit;
@@ -135,7 +152,7 @@
 		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 		z-index: 1;
 	}
-	
+
 	.nav-item {
 		display: flex;
 		align-items: center;
@@ -145,63 +162,60 @@
 		text-decoration: none;
 		font-size: 1rem;
 		font-weight: 400;
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		position: relative;
 		z-index: 2;
-		transition: color 0.2s ease, background-color 0.2s ease;
-		
+		transition:
+			color 0.2s ease,
+			background-color 0.2s ease;
+
 		&:hover:not(.active) {
 			background-color: rgba(0, 0, 0, 0.05);
 		}
-		
+
 		:global(svg.nav-icon) {
 			width: 20px;
 			height: 20px;
 			flex-shrink: 0;
 			fill: currentColor;
 			transition: fill 0.2s ease;
-			
+
 			&.animate {
 				animation: iconPulse 0.6s ease;
 			}
 		}
-		
 	}
-	
+
 	// Different animations for each nav item
-	// First item is Work (index 1)
+	// First item is Work
 	.nav-item:nth-of-type(1) :global(svg.animate) {
 		animation: cursorWiggle 0.6s ease;
 	}
-	
-	// Second item is Photos (index 2) - animation handled by individual rect animations
-	
-	// Third item is Labs (index 3)
-	.nav-item:nth-of-type(3) :global(svg.animate) {
+
+	// Second item is Universe
+	.nav-item:nth-of-type(2) :global(svg.animate) {
+		animation: starSpin 0.6s ease;
+	}
+
+	// Third item is Photos - animation handled by individual rect animations
+	.nav-item:nth-of-type(3) :global(svg.animate rect:nth-child(1)) {
+		animation: masonryRect1 0.6s ease;
+	}
+
+	.nav-item:nth-of-type(3) :global(svg.animate rect:nth-child(2)) {
+		animation: masonryRect2 0.6s ease;
+	}
+
+	.nav-item:nth-of-type(3) :global(svg.animate rect:nth-child(3)) {
+		animation: masonryRect3 0.6s ease;
+	}
+
+	.nav-item:nth-of-type(3) :global(svg.animate rect:nth-child(4)) {
+		animation: masonryRect4 0.6s ease;
+	}
+
+	// Fourth item is Labs
+	.nav-item:nth-of-type(4) :global(svg.animate) {
 		animation: tubeRotate 0.6s ease;
 		transform-origin: center bottom;
 	}
-	
-	// Fourth item is Universe (index 4)
-	.nav-item:nth-of-type(4) :global(svg.animate) {
-		animation: starSpin 0.6s ease;
-	}
-	
-	// Specific animation for photo masonry rectangles
-	.nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(1)) {
-		animation: masonryRect1 0.6s ease;
-	}
-	
-	.nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(2)) {
-		animation: masonryRect2 0.6s ease;
-	}
-	
-	.nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(3)) {
-		animation: masonryRect3 0.6s ease;
-	}
-	
-	.nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(4)) {
-		animation: masonryRect4 0.6s ease;
-	}
-	
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/Slideshow.svelte b/src/lib/components/Slideshow.svelte
new file mode 100644
index 0000000..db0ae58
--- /dev/null
+++ b/src/lib/components/Slideshow.svelte
@@ -0,0 +1,353 @@
+<script lang="ts">
+	import Lightbox from './Lightbox.svelte'
+	import TiltCard from './TiltCard.svelte'
+
+	interface SlideItem {
+		url: string
+		thumbnailUrl?: string
+		caption?: string
+		alt?: string
+	}
+
+	let {
+		items = [],
+		alt = 'Image',
+		showThumbnails = true,
+		aspectRatio = '4/3',
+		maxThumbnails,
+		totalCount,
+		showMoreLink
+	}: {
+		items: SlideItem[]
+		alt?: string
+		showThumbnails?: boolean
+		aspectRatio?: string
+		maxThumbnails?: number
+		totalCount?: number
+		showMoreLink?: string
+	} = $props()
+
+	let selectedIndex = $state(0)
+	let lightboxOpen = $state(false)
+	let windowWidth = $state(0)
+
+	// Calculate columns based on breakpoints
+	const columnsPerRow = $derived(windowWidth <= 400 ? 3 : windowWidth <= 600 ? 4 : 6)
+
+	// Make maxThumbnails responsive - use fewer thumbnails on smaller screens
+	const responsiveMaxThumbnails = $derived(
+		maxThumbnails ? (windowWidth <= 400 ? 3 : windowWidth <= 600 ? 4 : maxThumbnails) : undefined
+	)
+
+	const showMoreThumbnail = $derived(
+		responsiveMaxThumbnails && totalCount && totalCount > responsiveMaxThumbnails - 1
+	)
+
+	// Determine how many thumbnails to show
+	const displayItems = $derived(
+		!responsiveMaxThumbnails || !showMoreThumbnail
+			? items
+			: items.slice(0, responsiveMaxThumbnails - 1) // Show actual thumbnails, leave last slot for "+N"
+	)
+
+	const remainingCount = $derived(
+		showMoreThumbnail ? (totalCount || items.length) - (responsiveMaxThumbnails - 1) : 0
+	)
+
+	const totalSlots = $derived(
+		responsiveMaxThumbnails
+			? responsiveMaxThumbnails
+			: Math.ceil((displayItems.length + (showMoreThumbnail ? 1 : 0)) / columnsPerRow) *
+					columnsPerRow
+	)
+
+	// Convert items to image URLs for lightbox
+	const lightboxImages = $derived(items.map((item) => item.url))
+
+	const selectImage = (index: number) => {
+		selectedIndex = index
+	}
+
+	const openLightbox = (index?: number) => {
+		if (index !== undefined) {
+			selectedIndex = index
+		}
+		lightboxOpen = true
+	}
+
+	// Track window width for responsive columns
+	$effect(() => {
+		windowWidth = window.innerWidth
+
+		const handleResize = () => {
+			windowWidth = window.innerWidth
+		}
+
+		window.addEventListener('resize', handleResize)
+
+		return () => {
+			window.removeEventListener('resize', handleResize)
+		}
+	})
+</script>
+
+{#if items.length === 1}
+	<!-- Single image -->
+	<TiltCard>
+		<div class="single-image image-container" onclick={() => openLightbox()}>
+			<img src={items[0].url} alt={items[0].alt || alt} />
+			{#if items[0].caption}
+				<div class="image-caption">{items[0].caption}</div>
+			{/if}
+		</div>
+	</TiltCard>
+{:else if items.length > 1}
+	<!-- Slideshow -->
+	<div class="slideshow">
+		<TiltCard>
+			<div class="main-image image-container" onclick={() => openLightbox()}>
+				<img
+					src={items[selectedIndex].url}
+					alt={items[selectedIndex].alt || `${alt} ${selectedIndex + 1}`}
+				/>
+				{#if items[selectedIndex].caption}
+					<div class="image-caption">{items[selectedIndex].caption}</div>
+				{/if}
+			</div>
+		</TiltCard>
+
+		{#if showThumbnails}
+			<div class="thumbnails">
+				{#each Array(totalSlots) as _, index}
+					{#if index < displayItems.length}
+						<button
+							class="thumbnail"
+							class:active={index === selectedIndex}
+							onclick={() => selectImage(index)}
+							aria-label="View image {index + 1}"
+						>
+							<img
+								src={displayItems[index].thumbnailUrl || displayItems[index].url}
+								alt="{displayItems[index].alt || alt} thumbnail {index + 1}"
+							/>
+						</button>
+					{:else if index === displayItems.length && showMoreThumbnail}
+						<a
+							href={showMoreLink}
+							class="thumbnail show-more"
+							aria-label="View all {totalCount || items.length} photos"
+						>
+							{#if items[displayItems.length]}
+								<img
+									src={items[displayItems.length].thumbnailUrl || items[displayItems.length].url}
+									alt="View all photos"
+									class="blurred-bg"
+								/>
+							{:else if items[items.length - 1]}
+								<img
+									src={items[items.length - 1].thumbnailUrl || items[items.length - 1].url}
+									alt="View all photos"
+									class="blurred-bg"
+								/>
+							{/if}
+							<div class="show-more-overlay">
+								+{remainingCount}
+							</div>
+						</a>
+					{:else}
+						<div class="thumbnail placeholder" aria-hidden="true"></div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<Lightbox images={lightboxImages} bind:selectedIndex bind:isOpen={lightboxOpen} {alt} />
+
+<style lang="scss">
+	.image-container {
+		cursor: pointer;
+		display: block;
+		width: 100%;
+		position: relative;
+
+		&:focus {
+			outline: 2px solid $red-60;
+			outline-offset: 2px;
+		}
+	}
+
+	.single-image,
+	.main-image {
+		width: 100%;
+		aspect-ratio: v-bind(aspectRatio);
+		border-radius: $image-corner-radius;
+		overflow: hidden;
+		display: flex;
+		// Force GPU acceleration and proper clipping
+		transform: translateZ(0);
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			display: block;
+			flex-shrink: 0;
+		}
+	}
+
+	.image-caption {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+		color: white;
+		padding: $unit-3x $unit-2x $unit-2x;
+		font-size: 0.875rem;
+		line-height: 1.4;
+	}
+
+	.slideshow {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.thumbnails {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		gap: $unit-2x;
+
+		@media (max-width: 600px) {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		@media (max-width: 400px) {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+
+	.thumbnail {
+		position: relative;
+		aspect-ratio: 1;
+		border-radius: $image-corner-radius;
+		overflow: hidden;
+		border: none;
+		padding: 0;
+		background: none;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: $image-corner-radius;
+			border: 4px solid transparent;
+			z-index: 2;
+			pointer-events: none;
+			transition: border-color 0.2s ease;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 4px;
+			border-radius: calc($image-corner-radius - 4px);
+			border: 4px solid transparent;
+			z-index: 3;
+			pointer-events: none;
+			transition: border-color 0.2s ease;
+		}
+
+		&:hover {
+			transform: scale(0.98);
+		}
+
+		&:focus-visible {
+			outline: none;
+
+			&::before {
+				border-color: $red-90;
+			}
+
+			&::after {
+				border-color: $grey-100;
+			}
+		}
+
+		&.active {
+			&::before {
+				border-color: $red-60;
+			}
+
+			&::after {
+				border-color: $grey-100;
+			}
+		}
+
+		&.placeholder {
+			background: $grey-90;
+			cursor: default;
+
+			&:hover {
+				transform: none;
+			}
+		}
+
+		&.show-more {
+			position: relative;
+			color: inherit;
+			text-decoration: none;
+
+			.blurred-bg {
+				filter: blur(3px);
+				transform: scale(1.1); // Slightly scale to hide blur edges
+			}
+
+			.show-more-overlay {
+				position: absolute;
+				inset: 0;
+				background: rgba(0, 0, 0, 0.6);
+				color: white;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 1.2rem;
+				font-weight: 600;
+				border-radius: $image-corner-radius;
+				z-index: 2;
+			}
+
+			&:hover {
+				.show-more-overlay {
+					background: rgba(0, 0, 0, 0.7);
+				}
+			}
+
+			&:focus-visible {
+				outline: none;
+
+				&::before {
+					border-color: $red-90;
+				}
+
+				.show-more-overlay {
+					box-shadow: inset 0 0 0 3px rgba($red-90, 0.5);
+				}
+			}
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			position: relative;
+			z-index: 1;
+		}
+	}
+</style>
diff --git a/src/lib/components/SmartImage.svelte b/src/lib/components/SmartImage.svelte
new file mode 100644
index 0000000..31a56fe
--- /dev/null
+++ b/src/lib/components/SmartImage.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type { Media } from '@prisma/client'
+	import { browser } from '$app/environment'
+
+	interface Props {
+		media: Media
+		alt?: string
+		class?: string
+		containerWidth?: number // If known, use this for smart sizing
+		loading?: 'lazy' | 'eager'
+		aspectRatio?: string
+		sizes?: string // For responsive images
+	}
+
+	let {
+		media,
+		alt = media.altText || media.filename || '',
+		class: className = '',
+		containerWidth,
+		loading = 'lazy',
+		aspectRatio,
+		sizes = '(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px'
+	}: Props = $props()
+
+	let imgElement: HTMLImageElement
+	let actualContainerWidth = $state<number | undefined>(containerWidth)
+	let imageUrl = $state('')
+	let srcSet = $state('')
+
+	// Update image URL when container width changes
+	$effect(() => {
+		imageUrl = getImageUrl()
+		srcSet = getSrcSet()
+	})
+
+	// Detect container width if not provided
+	$effect(() => {
+		if (browser && !containerWidth && imgElement?.parentElement) {
+			const resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					actualContainerWidth = entry.contentRect.width
+				}
+			})
+
+			resizeObserver.observe(imgElement.parentElement)
+
+			return () => {
+				resizeObserver.disconnect()
+			}
+		}
+	})
+
+	// Smart image URL selection
+	function getImageUrl(): string {
+		if (!media.url) return ''
+
+		// SVG files should always use the original URL (they're vector, no thumbnails needed)
+		if (media.mimeType === 'image/svg+xml' || media.url.endsWith('.svg')) {
+			return media.url
+		}
+
+		// For local development, use what we have
+		if (media.url.startsWith('/local-uploads')) {
+			// For larger containers, prefer original over thumbnail
+			if (actualContainerWidth && actualContainerWidth > 400) {
+				return media.url // Original image
+			}
+			return media.thumbnailUrl || media.url
+		}
+
+		// For Cloudinary images, we could implement smart URL generation here
+		// For now, use the same logic as local
+		if (actualContainerWidth && actualContainerWidth > 400) {
+			return media.url
+		}
+		return media.thumbnailUrl || media.url
+	}
+
+	// Generate responsive srcset for better performance
+	function getSrcSet(): string {
+		// SVG files don't need srcset (they're vector and scale infinitely)
+		if (media.mimeType === 'image/svg+xml' || media.url.endsWith('.svg')) {
+			return ''
+		}
+
+		if (!media.url || media.url.startsWith('/local-uploads')) {
+			// For local images, just provide the main options
+			const sources = []
+			if (media.thumbnailUrl) {
+				sources.push(`${media.thumbnailUrl} 800w`)
+			}
+			if (media.url) {
+				sources.push(`${media.url} ${media.width || 1920}w`)
+			}
+			return sources.join(', ')
+		}
+
+		// For Cloudinary, we could generate multiple sizes
+		// This is a placeholder for future implementation
+		return ''
+	}
+
+	// Compute styles
+	function getImageStyles(): string {
+		let styles = ''
+
+		if (aspectRatio) {
+			styles += `aspect-ratio: ${aspectRatio.replace(':', '/')};`
+		}
+
+		return styles
+	}
+</script>
+
+<img
+	bind:this={imgElement}
+	src={imageUrl}
+	{alt}
+	class={className}
+	style={getImageStyles()}
+	{loading}
+	srcset={srcSet || undefined}
+	{sizes}
+	width={media.width || undefined}
+	height={media.height || undefined}
+/>
+
+<style>
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+</style>
diff --git a/src/lib/components/TiltCard.svelte b/src/lib/components/TiltCard.svelte
index 4e3853b..09d0ed2 100644
--- a/src/lib/components/TiltCard.svelte
+++ b/src/lib/components/TiltCard.svelte
@@ -50,7 +50,7 @@
 		cursor: pointer;
 		border-radius: $image-corner-radius;
 		overflow: hidden;
-		
+
 		// Use mask as a fallback for better clipping
 		-webkit-mask-image: -webkit-radial-gradient(white, black);
 		mask-image: radial-gradient(white, black);
diff --git a/src/lib/components/UniverseAlbumCard.svelte b/src/lib/components/UniverseAlbumCard.svelte
new file mode 100644
index 0000000..1b2730e
--- /dev/null
+++ b/src/lib/components/UniverseAlbumCard.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import UniverseCard from './UniverseCard.svelte'
+	import Slideshow from './Slideshow.svelte'
+	import type { UniverseItem } from '../../routes/api/universe/+server'
+
+	let { album }: { album: UniverseItem } = $props()
+
+	// Convert photos to slideshow items
+	const slideshowItems = $derived(
+		album.photos && album.photos.length > 0
+			? album.photos.map((photo) => ({
+					url: photo.url,
+					thumbnailUrl: photo.thumbnailUrl,
+					caption: photo.caption,
+					alt: photo.caption || album.title
+				}))
+			: album.coverPhoto
+				? [
+						{
+							url: album.coverPhoto.url,
+							thumbnailUrl: album.coverPhoto.thumbnailUrl,
+							caption: album.coverPhoto.caption,
+							alt: album.coverPhoto.caption || album.title
+						}
+					]
+				: []
+	)
+</script>
+
+<UniverseCard item={album} type="album">
+	{#if slideshowItems.length > 0}
+		<div class="album-slideshow">
+			<Slideshow
+				items={slideshowItems}
+				alt={album.title}
+				aspectRatio="3/2"
+				showThumbnails={slideshowItems.length > 1}
+				maxThumbnails={6}
+				totalCount={album.photosCount}
+				showMoreLink="/photos/{album.slug}"
+			/>
+		</div>
+	{/if}
+
+	<div class="album-info">
+		<h2 class="card-title">
+			<a
+				href="/photos/{album.slug}"
+				class="card-title-link"
+				onclick={(e) => e.preventDefault()}
+				tabindex="-1">{album.title}</a
+			>
+		</h2>
+
+		{#if album.description}
+			<p class="album-description">{album.description}</p>
+		{/if}
+	</div>
+</UniverseCard>
+
+<style lang="scss">
+	.album-slideshow {
+		position: relative;
+		width: 100%;
+		margin-bottom: $unit-2x;
+	}
+
+	.album-info {
+		margin-bottom: 0;
+	}
+
+	.card-title {
+		margin: 0 0 $unit-2x;
+		font-size: 1.375rem;
+		font-weight: 600;
+		line-height: 1.3;
+	}
+
+	.card-title-link {
+		text-decoration: none;
+		transition: all 0.2s ease;
+	}
+
+	.album-description {
+		margin: 0;
+		color: $grey-10;
+		font-size: 1.125rem;
+		line-height: 1.5;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+	}
+</style>
diff --git a/src/lib/components/UniverseCard.svelte b/src/lib/components/UniverseCard.svelte
new file mode 100644
index 0000000..717167c
--- /dev/null
+++ b/src/lib/components/UniverseCard.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import UniverseIcon from '$icons/universe.svg'
+	import PhotosIcon from '$icons/photos.svg'
+	import { formatDate } from '$lib/utils/date'
+	import { goto } from '$app/navigation'
+
+	interface UniverseItem {
+		slug: string
+		publishedAt: string
+		[key: string]: any
+	}
+
+	let {
+		item,
+		type = 'post',
+		children
+	}: {
+		item: UniverseItem
+		type?: 'post' | 'album'
+		children?: Snippet
+	} = $props()
+
+	const href = $derived(type === 'album' ? `/photos/${item.slug}` : `/universe/${item.slug}`)
+
+	const handleCardClick = (event: MouseEvent) => {
+		// Check if the click is on an interactive element
+		const target = event.target as HTMLElement
+		const isInteractive =
+			target.closest('a') ||
+			target.closest('button') ||
+			target.closest('.slideshow') ||
+			target.closest('.album-slideshow') ||
+			target.tagName === 'A' ||
+			target.tagName === 'BUTTON'
+
+		if (!isInteractive) {
+			goto(href)
+		}
+	}
+</script>
+
+<article class="universe-card universe-card--{type}">
+	<div
+		class="card-content"
+		onclick={handleCardClick}
+		role="button"
+		tabindex="0"
+		onkeydown={(e) => e.key === 'Enter' && handleCardClick(e)}
+	>
+		{@render children?.()}
+
+		<div class="card-footer">
+			<a {href} class="card-link" tabindex="-1">
+				<time class="card-date" datetime={item.publishedAt}>
+					{formatDate(item.publishedAt)}
+				</time>
+			</a>
+			{#if type === 'album'}
+			<PhotosIcon class="card-icon" />
+		{:else}
+			<UniverseIcon class="card-icon" />
+		{/if}
+		</div>
+	</div>
+</article>
+
+<style lang="scss">
+	@import '../../assets/styles/animations';
+
+	.universe-card {
+		width: 100%;
+		max-width: 700px;
+		margin: 0 auto;
+	}
+
+	.card-content {
+		padding: $unit-4x;
+		background: $grey-100;
+		border-radius: $card-corner-radius;
+		border: 1px solid $grey-95;
+		transition: all 0.2s ease;
+		cursor: pointer;
+		outline: none;
+
+		&:hover {
+			border-color: $grey-85;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+		}
+
+		&:focus-visible {
+			outline: 2px solid $red-60;
+			outline-offset: 2px;
+		}
+	}
+
+	.card-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: $unit-2x;
+		padding-top: $unit-2x;
+	}
+
+	.card-link {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.card-date {
+		color: $grey-40;
+		font-size: 0.875rem;
+		font-weight: 400;
+		transition: color 0.2s ease;
+	}
+
+	:global(.card-icon) {
+		width: 16px;
+		height: 16px;
+		fill: $grey-40;
+		transition: all 0.2s ease;
+	}
+
+	.universe-card--post {
+		.card-content:hover {
+			.card-date {
+				color: $red-60;
+			}
+
+			:global(.card-icon) {
+				fill: $red-60;
+				transform: rotate(15deg);
+			}
+
+			:global(.card-title-link) {
+				color: $red-60;
+			}
+		}
+
+		:global(.card-title-link) {
+			color: $grey-10;
+			text-decoration: none;
+			transition: all 0.2s ease;
+		}
+	}
+
+	.universe-card--album {
+		.card-content:hover {
+			.card-date {
+				color: $red-60;
+			}
+
+			:global(.card-icon) {
+				fill: $red-60;
+			}
+
+			:global(.card-icon rect:nth-child(1)) {
+				transition: all 0.3s ease;
+				height: 6px;
+				y: 2px;
+			}
+
+			:global(.card-icon rect:nth-child(2)) {
+				transition: all 0.3s ease;
+				height: 10px;
+				y: 2px;
+			}
+
+			:global(.card-icon rect:nth-child(3)) {
+				transition: all 0.3s ease;
+				height: 8px;
+				y: 10px;
+			}
+
+			:global(.card-icon rect:nth-child(4)) {
+				transition: all 0.3s ease;
+				height: 4px;
+				y: 14px;
+			}
+
+			:global(.card-title-link) {
+				color: $red-60;
+			}
+		}
+
+		// Base state for smooth transition back
+		:global(.card-icon rect) {
+			transition: all 0.3s ease;
+		}
+
+		:global(.card-title-link) {
+			color: $grey-10;
+			text-decoration: none;
+			transition: all 0.2s ease;
+		}
+	}
+</style>
diff --git a/src/lib/components/UniverseFeed.svelte b/src/lib/components/UniverseFeed.svelte
new file mode 100644
index 0000000..12873e7
--- /dev/null
+++ b/src/lib/components/UniverseFeed.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import UniversePostCard from './UniversePostCard.svelte'
+	import UniverseAlbumCard from './UniverseAlbumCard.svelte'
+	import type { UniverseItem } from '../../routes/api/universe/+server'
+
+	let { items }: { items: UniverseItem[] } = $props()
+</script>
+
+<div class="universe-feed">
+	{#if items && items.length > 0}
+		{#each items as item}
+			{#if item.type === 'post'}
+				<UniversePostCard post={item} />
+			{:else if item.type === 'album'}
+				<UniverseAlbumCard album={item} />
+			{/if}
+		{/each}
+	{:else}
+		<div class="empty-state">
+			<p>No content found in the universe yet.</p>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.universe-feed {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: $unit-6x $unit-3x;
+		color: $grey-40;
+
+		p {
+			margin: 0;
+			font-size: 1.125rem;
+		}
+	}
+</style>
diff --git a/src/lib/components/UniversePostCard.svelte b/src/lib/components/UniversePostCard.svelte
new file mode 100644
index 0000000..1ec37cf
--- /dev/null
+++ b/src/lib/components/UniversePostCard.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import UniverseCard from './UniverseCard.svelte'
+	import { getContentExcerpt } from '$lib/utils/content'
+	import type { UniverseItem } from '../../routes/api/universe/+server'
+
+	let { post }: { post: UniverseItem } = $props()
+
+	// Check if content is truncated
+	const isContentTruncated = $derived(() => {
+		if (post.content) {
+			// Check if the excerpt is shorter than the full content
+			const excerpt = getContentExcerpt(post.content)
+			return excerpt.endsWith('...')
+		}
+		return false
+	})
+</script>
+
+<UniverseCard item={post} type="post">
+	{#if post.title}
+		<h2 class="card-title">
+			<a href="/universe/{post.slug}" class="card-title-link" tabindex="-1">{post.title}</a>
+		</h2>
+	{/if}
+
+	{#if post.linkUrl}
+		<!-- Link post type -->
+		<div class="link-preview">
+			<a href={post.linkUrl} target="_blank" rel="noopener noreferrer" class="link-url">
+				{post.linkUrl}
+			</a>
+			{#if post.linkDescription}
+				<p class="link-description">{post.linkDescription}</p>
+			{/if}
+		</div>
+	{/if}
+
+	{#if post.content}
+		<div class="post-excerpt">
+			<p>{getContentExcerpt(post.content, 150)}</p>
+		</div>
+	{/if}
+
+	{#if post.postType === 'essay' && isContentTruncated}
+		<p>
+			<a href="/universe/{post.slug}" class="read-more" tabindex="-1">Continue reading</a>
+		</p>
+	{/if}
+
+	{#if post.attachments && Array.isArray(post.attachments) && post.attachments.length > 0}
+		<div class="attachments">
+			<div class="attachment-count">
+				📎 {post.attachments.length} attachment{post.attachments.length > 1 ? 's' : ''}
+			</div>
+		</div>
+	{/if}
+</UniverseCard>
+
+<style lang="scss">
+	.card-title {
+		margin: 0 0 $unit-3x;
+		font-size: 1.375rem;
+		font-weight: 600;
+		line-height: 1.3;
+	}
+
+	.card-title-link {
+		text-decoration: none;
+		transition: all 0.2s ease;
+	}
+
+	.link-preview {
+		background: $grey-97;
+		border: 1px solid $grey-90;
+		border-radius: $unit;
+		padding: $unit-2x;
+		margin-bottom: $unit-3x;
+
+		.link-url {
+			display: block;
+			color: $blue-60;
+			text-decoration: none;
+			font-size: 0.875rem;
+			margin-bottom: $unit;
+			word-break: break-all;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+
+		.link-description {
+			margin: 0;
+			color: $grey-30;
+			font-size: 0.875rem;
+			line-height: 1.4;
+		}
+	}
+
+	.post-excerpt {
+		p {
+			margin: 0;
+			color: $grey-10;
+			font-size: 1.125rem;
+			line-height: 1.5;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			overflow: hidden;
+		}
+	}
+
+	.attachments {
+		margin-bottom: $unit-3x;
+
+		.attachment-count {
+			background: $grey-95;
+			border: 1px solid $grey-85;
+			border-radius: $unit;
+			padding: $unit $unit-2x;
+			font-size: 0.875rem;
+			color: $grey-40;
+			display: inline-block;
+		}
+	}
+
+	.read-more {
+		color: $red-60;
+		text-decoration: none;
+		font-size: 0.875rem;
+		font-weight: 500;
+		transition: all 0.2s ease;
+	}
+</style>
diff --git a/src/lib/components/admin/AdminByline.svelte b/src/lib/components/admin/AdminByline.svelte
new file mode 100644
index 0000000..5cbed27
--- /dev/null
+++ b/src/lib/components/admin/AdminByline.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	interface Props {
+		sections: string[]
+	}
+
+	let { sections }: Props = $props()
+</script>
+
+<div class="admin-byline">
+	{#each sections as section, index}
+		<span class="byline-section">{section}</span>
+		{#if index < sections.length - 1}
+			<span class="separator">&middot;</span>
+		{/if}
+	{/each}
+</div>
+
+<style lang="scss">
+	.admin-byline {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		font-size: 0.875rem;
+		color: $grey-40;
+		flex-wrap: wrap;
+
+		.byline-section {
+			// Remove text-transform: capitalize to allow proper sentence case
+		}
+
+		.separator {
+			color: $grey-40;
+		}
+	}
+
+	// Responsive adjustments
+	@media (max-width: 480px) {
+		.admin-byline {
+			font-size: 0.875rem;
+			gap: $unit-half;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/AdminFilters.svelte b/src/lib/components/admin/AdminFilters.svelte
new file mode 100644
index 0000000..577f8f7
--- /dev/null
+++ b/src/lib/components/admin/AdminFilters.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		left?: any
+		right?: any
+	}
+
+	let { left, right }: Props = $props()
+</script>
+
+<div class="admin-filters">
+	<div class="filters-left">
+		{#if left}
+			{@render left()}
+		{/if}
+	</div>
+	<div class="filters-right">
+		{#if right}
+			{@render right()}
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.admin-filters {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 $unit-2x 0 $unit;
+		margin-bottom: $unit-2x;
+	}
+
+	.filters-left {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+	}
+
+	.filters-right {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+		flex-shrink: 0;
+	}
+</style>
diff --git a/src/lib/components/admin/AdminHeader.svelte b/src/lib/components/admin/AdminHeader.svelte
new file mode 100644
index 0000000..64ddb0a
--- /dev/null
+++ b/src/lib/components/admin/AdminHeader.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	interface Props {
+		title: string
+		actions?: any
+	}
+
+	let { title, actions }: Props = $props()
+</script>
+
+<header>
+	<h1>{title}</h1>
+	{#if actions}
+		<div class="header-actions">
+			{@render actions()}
+		</div>
+	{/if}
+</header>
+
+<style lang="scss">
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+
+		h1 {
+			font-size: 1.75rem;
+			font-weight: 700;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+</style>
diff --git a/src/lib/components/admin/AdminNavBar.svelte b/src/lib/components/admin/AdminNavBar.svelte
new file mode 100644
index 0000000..b386de3
--- /dev/null
+++ b/src/lib/components/admin/AdminNavBar.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { onMount } from 'svelte'
+	import AvatarSimple from '$lib/components/AvatarSimple.svelte'
+	import WorkIcon from '$icons/work.svg?component'
+	import UniverseIcon from '$icons/universe.svg?component'
+	import PhotosIcon from '$icons/photos.svg?component'
+
+	const currentPath = $derived($page.url.pathname)
+	let isScrolled = $state(false)
+
+	onMount(() => {
+		const handleScroll = () => {
+			isScrolled = window.scrollY > 0
+		}
+
+		window.addEventListener('scroll', handleScroll)
+		handleScroll() // Check initial scroll position
+
+		return () => {
+			window.removeEventListener('scroll', handleScroll)
+		}
+	})
+
+	interface NavItem {
+		text: string
+		href: string
+		icon: any
+	}
+
+	const navItems: NavItem[] = [
+		{ text: 'Projects', href: '/admin/projects', icon: WorkIcon },
+		{ text: 'Universe', href: '/admin/posts', icon: UniverseIcon },
+		{ text: 'Albums', href: '/admin/albums', icon: PhotosIcon },
+		{ text: 'Media', href: '/admin/media', icon: PhotosIcon }
+	]
+
+	// Calculate active index based on current path
+	const activeIndex = $derived(
+		currentPath.startsWith('/admin/projects')
+			? 0
+			: currentPath.startsWith('/admin/posts')
+				? 1
+				: currentPath.startsWith('/admin/albums')
+					? 2
+					: currentPath.startsWith('/admin/media')
+						? 3
+						: -1
+	)
+</script>
+
+<nav class="admin-nav-bar" class:scrolled={isScrolled}>
+	<div class="nav-container">
+		<div class="nav-content">
+			<a href="/" class="nav-brand">
+				<div class="brand-logo">
+					<AvatarSimple />
+				</div>
+				<span class="brand-text">Back to jedmund.com</span>
+			</a>
+
+			<div class="nav-links">
+				{#each navItems as item, index}
+					<a href={item.href} class="nav-link" class:active={index === activeIndex}>
+						<item.icon class="nav-icon" />
+						<span class="nav-text">{item.text}</span>
+					</a>
+				{/each}
+			</div>
+		</div>
+	</div>
+</nav>
+
+<style lang="scss">
+	// Breakpoint variables
+	$phone-max: 639px;
+	$tablet-min: 640px;
+	$tablet-max: 1023px;
+	$laptop-min: 1024px;
+	$laptop-max: 1439px;
+	$monitor-min: 1440px;
+
+	.admin-nav-bar {
+		position: sticky;
+		top: 0;
+		z-index: 100;
+		width: 100%;
+		background: $bg-color;
+		border-bottom: 1px solid transparent;
+		transition: border-bottom 0.2s ease;
+
+		&.scrolled {
+			border-bottom: 1px solid $grey-60;
+		}
+	}
+
+	.nav-container {
+		width: 100%;
+		padding: 0 $unit-3x;
+
+		// Phone: Full width with padding
+		@media (max-width: $phone-max) {
+			padding: 0 $unit-2x;
+		}
+
+		// Tablet: Constrained width
+		@media (min-width: $tablet-min) and (max-width: $tablet-max) {
+			max-width: 768px;
+			margin: 0 auto;
+			padding: 0 $unit-4x;
+		}
+
+		// Laptop: Wider constrained width
+		@media (min-width: $laptop-min) and (max-width: $laptop-max) {
+			max-width: 900px;
+			margin: 0 auto;
+			padding: 0 $unit-5x;
+		}
+
+		// Monitor: Maximum constrained width
+		@media (min-width: $monitor-min) {
+			max-width: 900px;
+			margin: 0 auto;
+			padding: 0 $unit-6x;
+		}
+	}
+
+	.nav-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 64px;
+		gap: $unit-4x;
+
+		@media (max-width: $phone-max) {
+			height: 56px;
+			gap: $unit-2x;
+		}
+	}
+
+	.nav-brand {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		text-decoration: none;
+		color: $grey-30;
+		font-weight: 400;
+		font-size: 0.925rem;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+
+		.brand-logo {
+			height: 32px;
+			width: 32px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+
+			:global(.face-container) {
+				--face-size: 32px;
+				width: 32px;
+				height: 32px;
+			}
+
+			:global(svg) {
+				width: 32px;
+				height: 32px;
+			}
+		}
+
+		.brand-text {
+			white-space: nowrap;
+
+			@media (max-width: $phone-max) {
+				display: none;
+			}
+		}
+	}
+
+	.nav-links {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		flex: 1;
+		justify-content: right;
+
+		@media (max-width: $phone-max) {
+			gap: 0;
+		}
+	}
+
+	.nav-link {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		padding: $unit $unit-2x;
+		border-radius: $card-corner-radius;
+		text-decoration: none;
+		font-size: 0.925rem;
+		font-weight: 500;
+		color: $grey-30;
+		transition: all 0.2s ease;
+		position: relative;
+
+		@media (max-width: $phone-max) {
+			padding: $unit-2x $unit;
+		}
+
+		&:hover {
+			background-color: $grey-70;
+		}
+
+		&.active {
+			color: $red-60;
+			background-color: $salmon-pink;
+		}
+
+		.nav-icon {
+			font-size: 1.1rem;
+			line-height: 1;
+
+			@media (max-width: $tablet-max) {
+				font-size: 1rem;
+			}
+		}
+
+		.nav-text {
+			@media (max-width: $phone-max) {
+				display: none;
+			}
+		}
+	}
+
+	.nav-actions {
+		// Placeholder for future actions if needed
+	}
+</style>
diff --git a/src/lib/components/admin/AdminPage.svelte b/src/lib/components/admin/AdminPage.svelte
new file mode 100644
index 0000000..624a5c9
--- /dev/null
+++ b/src/lib/components/admin/AdminPage.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	export let noHorizontalPadding = false
+</script>
+
+<section class="admin-page" class:no-horizontal-padding={noHorizontalPadding}>
+	<div class="page-header">
+		<slot name="header" />
+	</div>
+
+	<div class="page-content">
+		<slot />
+	</div>
+
+	{#if $$slots.fullwidth}
+		<div class="page-fullwidth">
+			<slot name="fullwidth" />
+		</div>
+	{/if}
+</section>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+	@import '$styles/mixins.scss';
+
+	.admin-page {
+		background: white;
+		border-radius: $card-corner-radius;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto $unit-2x;
+		width: calc(100% - #{$unit-6x});
+		max-width: 900px; // Much wider for admin
+		min-height: calc(100vh - #{$unit-16x}); // Full height minus margins
+		overflow: hidden; // Ensure border-radius clips content
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		@include breakpoint('phone') {
+			margin-bottom: $unit-3x;
+			width: calc(100% - #{$unit-4x});
+		}
+
+		@include breakpoint('small-phone') {
+			width: calc(100% - #{$unit-3x});
+		}
+	}
+
+	.page-header {
+		box-sizing: border-box;
+		min-height: 110px;
+		padding: $unit-4x;
+		display: flex;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x;
+		}
+
+		@include breakpoint('small-phone') {
+			padding: $unit-2x;
+		}
+
+		:global(header) {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			gap: $unit-2x;
+		}
+	}
+
+	.page-content {
+		padding: 0 $unit-2x $unit-4x;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-3x $unit-3x;
+		}
+
+		@include breakpoint('small-phone') {
+			padding: 0 $unit-2x $unit-2x;
+		}
+	}
+
+	.page-fullwidth {
+		padding: 0;
+		margin-top: $unit-3x;
+
+		@include breakpoint('small-phone') {
+			margin-top: $unit-2x;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/AdminSegmentedControl.svelte b/src/lib/components/admin/AdminSegmentedControl.svelte
new file mode 100644
index 0000000..2a6cdfd
--- /dev/null
+++ b/src/lib/components/admin/AdminSegmentedControl.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	interface Props {
+		options: Array<{ value: string; label: string }>
+		value: string
+		onChange: (value: string) => void
+	}
+
+	let { options, value, onChange }: Props = $props()
+</script>
+
+<div class="segmented-control">
+	{#each options as option}
+		<button
+			class="segment"
+			class:active={value === option.value}
+			onclick={() => onChange(option.value)}
+		>
+			{option.label}
+		</button>
+	{/each}
+</div>
+
+<style lang="scss">
+	.segmented-control {
+		display: inline-flex;
+		background-color: $grey-95;
+		border-radius: 50px;
+		padding: $unit-half;
+		gap: $unit-half;
+	}
+
+	.segment {
+		padding: $unit $unit-3x;
+		background: transparent;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		color: $grey-40;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:hover:not(.active) {
+			color: $grey-20;
+		}
+
+		&.active {
+			background-color: white;
+			color: $grey-10;
+			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/AdminSegmentedController.svelte b/src/lib/components/admin/AdminSegmentedController.svelte
new file mode 100644
index 0000000..3cd680b
--- /dev/null
+++ b/src/lib/components/admin/AdminSegmentedController.svelte
@@ -0,0 +1,272 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
+
+	const currentPath = $derived($page.url.pathname)
+
+	interface NavItem {
+		text: string
+		href: string
+		icon: string
+	}
+
+	const navItems: NavItem[] = [
+		{ text: 'Dashboard', href: '/admin', icon: '📊' },
+		{ text: 'Projects', href: '/admin/projects', icon: '💼' },
+		{ text: 'Universe', href: '/admin/posts', icon: '🌟' },
+		{ text: 'Media', href: '/admin/media', icon: '🖼️' }
+	]
+
+	// Track hover state and dropdown state
+	let hoveredIndex = $state<number | null>(null)
+	let showDropdown = $state(false)
+
+	// Calculate active index based on current path
+	const activeIndex = $derived(
+		currentPath === '/admin'
+			? 0
+			: currentPath.startsWith('/admin/projects')
+				? 1
+				: currentPath.startsWith('/admin/posts')
+					? 2
+					: currentPath.startsWith('/admin/media')
+						? 3
+						: -1
+	)
+
+	// Calculate pill position and width
+	let containerElement: HTMLElement
+	let itemElements: HTMLAnchorElement[] = []
+	let pillStyle = $state('')
+
+	function updatePillPosition() {
+		if (activeIndex >= 0 && itemElements[activeIndex] && containerElement) {
+			const activeElement = itemElements[activeIndex]
+			const containerRect = containerElement.getBoundingClientRect()
+			const activeRect = activeElement.getBoundingClientRect()
+
+			// Subtract the container padding (8px) from the left position
+			const left = activeRect.left - containerRect.left - 8
+			const width = activeRect.width
+
+			pillStyle = `transform: translateX(${left}px); width: ${width}px;`
+		}
+	}
+
+	$effect(() => {
+		updatePillPosition()
+
+		// Handle window resize
+		const handleResize = () => updatePillPosition()
+		window.addEventListener('resize', handleResize)
+
+		return () => {
+			window.removeEventListener('resize', handleResize)
+		}
+	})
+
+	function logout() {
+		localStorage.removeItem('admin_auth')
+		goto('/admin/login')
+	}
+
+	// Close dropdown when clicking outside
+	$effect(() => {
+		function handleClickOutside(e: MouseEvent) {
+			const target = e.target as HTMLElement
+			if (!target.closest('.dropdown-container')) {
+				showDropdown = false
+			}
+		}
+
+		if (showDropdown) {
+			document.addEventListener('click', handleClickOutside)
+			return () => document.removeEventListener('click', handleClickOutside)
+		}
+	})
+</script>
+
+<nav class="admin-segmented-controller" bind:this={containerElement}>
+	<div class="pills-container">
+		{#if activeIndex >= 0}
+			<div class="active-pill" style={pillStyle}></div>
+		{/if}
+
+		{#each navItems as item, index}
+			<a
+				href={item.href}
+				class="nav-item"
+				class:active={index === activeIndex}
+				bind:this={itemElements[index]}
+				onmouseenter={() => (hoveredIndex = index)}
+				onmouseleave={() => (hoveredIndex = null)}
+			>
+				<span class="icon">{item.icon}</span>
+				<span>{item.text}</span>
+			</a>
+		{/each}
+	</div>
+
+	<div class="dropdown-container">
+		<button
+			class="dropdown-trigger"
+			onclick={() => (showDropdown = !showDropdown)}
+			aria-label="Menu"
+		>
+			<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class:rotate={showDropdown}>
+				<path
+					d="M3 5L6 8L9 5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+
+		{#if showDropdown}
+			<div class="dropdown-menu">
+				<button class="dropdown-item" onclick={logout}>
+					<span>Log out</span>
+				</button>
+			</div>
+		{/if}
+	</div>
+</nav>
+
+<style lang="scss">
+	.admin-segmented-controller {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		background: $grey-100;
+		padding: $unit;
+		border-radius: 100px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		position: relative;
+		overflow: visible;
+	}
+
+	.pills-container {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		position: relative;
+		flex: 1;
+	}
+
+	.active-pill {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background-color: $grey-85;
+		border-radius: 100px;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		z-index: 1;
+	}
+
+	.nav-item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 10px 16px;
+		border-radius: 100px;
+		text-decoration: none;
+		font-size: 1rem;
+		font-weight: 400;
+		color: $grey-20;
+		position: relative;
+		z-index: 2;
+		transition:
+			color 0.2s ease,
+			background-color 0.2s ease;
+
+		&:hover:not(.active) {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+
+		&.active {
+			color: $grey-10;
+		}
+
+		.icon {
+			font-size: 1.1rem;
+			line-height: 1;
+			width: 20px;
+			text-align: center;
+		}
+	}
+
+	.dropdown-container {
+		position: relative;
+	}
+
+	.dropdown-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		background: transparent;
+		border: none;
+		color: $grey-40;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+			color: $grey-20;
+		}
+
+		svg {
+			transition: transform 0.2s ease;
+
+			&.rotate {
+				transform: rotate(180deg);
+			}
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + $unit);
+		right: 0;
+		background: white;
+		border-radius: 12px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		min-width: 150px;
+		z-index: 1000;
+		overflow: hidden;
+		animation: slideDown 0.2s ease;
+	}
+
+	.dropdown-item {
+		display: block;
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.925rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/AlbumForm.svelte b/src/lib/components/admin/AlbumForm.svelte
new file mode 100644
index 0000000..e038f84
--- /dev/null
+++ b/src/lib/components/admin/AlbumForm.svelte
@@ -0,0 +1,375 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminPage from './AdminPage.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import GalleryUploader from './GalleryUploader.svelte'
+	import Editor from './Editor.svelte'
+	import type { JSONContent } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		postId?: number
+		initialData?: {
+			title?: string
+			content?: JSONContent
+			gallery?: Media[]
+			status: 'draft' | 'published'
+			tags?: string[]
+		}
+		mode: 'create' | 'edit'
+	}
+
+	let { postId, initialData, mode }: Props = $props()
+
+	// State
+	let isSaving = $state(false)
+	let error = $state('')
+	let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
+
+	// Form data
+	let title = $state(initialData?.title || '')
+	let content = $state<JSONContent>({ type: 'doc', content: [] })
+	let gallery = $state<Media[]>([])
+	let tags = $state(initialData?.tags?.join(', ') || '')
+
+	// Editor ref
+	let editorRef: any
+
+	// Initialize data for edit mode
+	$effect(() => {
+		if (initialData && mode === 'edit') {
+			// Parse album content structure
+			if (
+				initialData.content &&
+				typeof initialData.content === 'object' &&
+				'type' in initialData.content
+			) {
+				const albumContent = initialData.content as any
+				if (albumContent.type === 'album') {
+					// Album content structure: { type: 'album', gallery: [mediaIds], description: JSONContent }
+					if (albumContent.gallery) {
+						// Load media objects from IDs (we'll need to fetch these)
+						loadGalleryMedia(albumContent.gallery)
+					}
+					if (albumContent.description) {
+						content = albumContent.description
+					}
+				}
+			} else {
+				// Fallback to regular content
+				content = initialData.content || { type: 'doc', content: [] }
+			}
+
+			// Load gallery from initialData if provided directly
+			if (initialData.gallery) {
+				gallery = initialData.gallery
+			}
+		}
+	})
+
+	async function loadGalleryMedia(mediaIds: number[]) {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			const mediaPromises = mediaIds.map(async (id) => {
+				const response = await fetch(`/api/media/${id}`, {
+					headers: { Authorization: `Basic ${auth}` }
+				})
+				if (response.ok) {
+					return await response.json()
+				}
+				return null
+			})
+
+			const mediaResults = await Promise.all(mediaPromises)
+			gallery = mediaResults.filter((media) => media !== null)
+		} catch (error) {
+			console.error('Failed to load gallery media:', error)
+		}
+	}
+
+	// Validation
+	let isValid = $derived(title.trim().length > 0 && gallery.length > 0)
+
+	function handleGalleryUpload(newMedia: Media[]) {
+		gallery = [...gallery, ...newMedia]
+	}
+
+	function handleGalleryReorder(reorderedMedia: Media[]) {
+		gallery = reorderedMedia
+	}
+
+	function handleEditorChange(newContent: JSONContent) {
+		content = newContent
+	}
+
+	async function handleSave(newStatus: 'draft' | 'published' = status) {
+		if (!isValid) return
+
+		isSaving = true
+		error = ''
+
+		try {
+			const postData = {
+				title: title.trim(),
+				slug: generateSlug(title),
+				postType: 'album',
+				status: newStatus,
+				content,
+				gallery: gallery.map((media) => media.id),
+				featuredImage: gallery.length > 0 ? gallery[0].id : undefined,
+				tags: tags.trim() ? tags.split(',').map((tag) => tag.trim()) : []
+			}
+
+			const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
+			const method = mode === 'edit' ? 'PUT' : 'POST'
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch(url, {
+				method,
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Basic ${auth}`
+				},
+				body: JSON.stringify(postData)
+			})
+
+			if (!response.ok) {
+				const errorData = await response.text()
+				throw new Error(`Failed to save album: ${errorData}`)
+			}
+
+			status = newStatus
+			goto('/admin/posts')
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save album'
+		} finally {
+			isSaving = false
+		}
+	}
+
+	function generateSlug(title: string): string {
+		return title
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	}
+
+	function handleCancel() {
+		if (hasChanges() && !confirm('Are you sure you want to cancel? Your changes will be lost.')) {
+			return
+		}
+		goto('/admin/posts')
+	}
+
+	function hasChanges(): boolean {
+		if (mode === 'create') {
+			return title.trim().length > 0 || gallery.length > 0 || tags.trim().length > 0
+		}
+
+		// For edit mode, compare with initial data
+		return (
+			title !== (initialData?.title || '') ||
+			gallery !== (initialData?.gallery || []) ||
+			tags !== (initialData?.tags?.join(', ') || '')
+		)
+	}
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-left">
+			<button class="btn-icon" onclick={handleCancel}>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+			<h1>📸 {mode === 'create' ? 'New Album' : 'Edit Album'}</h1>
+		</div>
+		<div class="header-actions">
+			{#if mode === 'create'}
+				<Button variant="secondary" onclick={handleCancel} disabled={isSaving}>Cancel</Button>
+				<Button
+					variant="secondary"
+					onclick={() => handleSave('draft')}
+					disabled={!isValid || isSaving}
+				>
+					{isSaving ? 'Saving...' : 'Save Draft'}
+				</Button>
+				<Button
+					variant="primary"
+					onclick={() => handleSave('published')}
+					disabled={!isValid || isSaving}
+				>
+					{isSaving ? 'Publishing...' : 'Publish Album'}
+				</Button>
+			{:else}
+				<Button variant="secondary" onclick={handleCancel} disabled={isSaving}>Cancel</Button>
+				<Button variant="primary" onclick={() => handleSave()} disabled={!isValid || isSaving}>
+					{isSaving ? 'Saving...' : 'Save Changes'}
+				</Button>
+			{/if}
+		</div>
+	</header>
+
+	<div class="album-form">
+		{#if error}
+			<div class="error-message">
+				{error}
+			</div>
+		{/if}
+
+		<div class="form-content">
+			<div class="form-section">
+				<Input
+					label="Album Title"
+					bind:value={title}
+					placeholder="Enter album title"
+					required={true}
+					error={title.trim().length === 0 ? 'Title is required' : undefined}
+				/>
+			</div>
+
+			<div class="form-section">
+				<GalleryUploader
+					label="Album Photos"
+					bind:value={gallery}
+					onUpload={handleGalleryUpload}
+					onReorder={handleGalleryReorder}
+					required={true}
+					showBrowseLibrary={true}
+					maxItems={50}
+					placeholder="Add photos to your album"
+					helpText="First photo will be used as the album cover"
+					error={gallery.length === 0 ? 'At least one photo is required' : undefined}
+				/>
+			</div>
+
+			<div class="form-section">
+				<div class="editor-wrapper">
+					<label class="form-label">Description</label>
+					<Editor
+						bind:this={editorRef}
+						bind:data={content}
+						onChange={handleEditorChange}
+						placeholder="Write a description for your album..."
+						simpleMode={false}
+						minHeight={200}
+					/>
+				</div>
+			</div>
+
+			<div class="form-section">
+				<Input
+					label="Tags"
+					bind:value={tags}
+					placeholder="travel, photography, nature"
+					helpText="Separate tags with commas"
+				/>
+			</div>
+		</div>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+
+		h1 {
+			font-size: 1.5rem;
+			font-weight: 700;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.album-form {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: $unit-3x;
+	}
+
+	.error-message {
+		background: #fef2f2;
+		border: 1px solid #fecaca;
+		border-radius: 8px;
+		padding: $unit-2x;
+		margin-bottom: $unit-3x;
+		color: #dc2626;
+		font-size: 0.875rem;
+	}
+
+	.form-content {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+	}
+
+	.form-section {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.editor-wrapper {
+		.form-label {
+			display: block;
+			font-size: 0.875rem;
+			font-weight: 600;
+			color: $grey-20;
+			margin-bottom: $unit;
+		}
+	}
+
+	@include breakpoint('phone') {
+		.album-form {
+			padding: $unit-2x;
+		}
+
+		.header-actions {
+			flex-wrap: wrap;
+			gap: $unit;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/AlbumListItem.svelte b/src/lib/components/admin/AlbumListItem.svelte
new file mode 100644
index 0000000..23afafd
--- /dev/null
+++ b/src/lib/components/admin/AlbumListItem.svelte
@@ -0,0 +1,303 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { createEventDispatcher } from 'svelte'
+	import AdminByline from './AdminByline.svelte'
+
+	interface Photo {
+		id: number
+		url: string
+		thumbnailUrl: string | null
+		caption: string | null
+	}
+
+	interface Album {
+		id: number
+		slug: string
+		title: string
+		description: string | null
+		date: string | null
+		location: string | null
+		coverPhotoId: number | null
+		isPhotography: boolean
+		status: string
+		showInUniverse: boolean
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+		photos: Photo[]
+		_count: {
+			photos: number
+		}
+	}
+
+	interface Props {
+		album: Album
+		isDropdownActive?: boolean
+	}
+
+	let { album, isDropdownActive = false }: Props = $props()
+
+	const dispatch = createEventDispatcher<{
+		toggleDropdown: { albumId: number; event: MouseEvent }
+		edit: { album: Album; event: MouseEvent }
+		togglePublish: { album: Album; event: MouseEvent }
+		delete: { album: Album; event: MouseEvent }
+	}>()
+
+	function formatRelativeTime(dateString: string): string {
+		const date = new Date(dateString)
+		const now = new Date()
+		const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+		if (diffInSeconds < 60) return 'just now'
+
+		const minutes = Math.floor(diffInSeconds / 60)
+		if (diffInSeconds < 3600) return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`
+
+		const hours = Math.floor(diffInSeconds / 3600)
+		if (diffInSeconds < 86400) return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`
+
+		const days = Math.floor(diffInSeconds / 86400)
+		if (diffInSeconds < 2592000) return `${days} ${days === 1 ? 'day' : 'days'} ago`
+
+		const months = Math.floor(diffInSeconds / 2592000)
+		if (diffInSeconds < 31536000) return `${months} ${months === 1 ? 'month' : 'months'} ago`
+
+		const years = Math.floor(diffInSeconds / 31536000)
+		return `${years} ${years === 1 ? 'year' : 'years'} ago`
+	}
+
+	function handleAlbumClick() {
+		goto(`/admin/albums/${album.id}/edit`)
+	}
+
+	function handleToggleDropdown(event: MouseEvent) {
+		dispatch('toggleDropdown', { albumId: album.id, event })
+	}
+
+	function handleEdit(event: MouseEvent) {
+		dispatch('edit', { album, event })
+	}
+
+	function handleTogglePublish(event: MouseEvent) {
+		dispatch('togglePublish', { album, event })
+	}
+
+	function handleDelete(event: MouseEvent) {
+		dispatch('delete', { album, event })
+	}
+
+	// Get thumbnail - try cover photo first, then first photo
+	function getThumbnailUrl(): string | null {
+		if (album.coverPhotoId && album.photos.length > 0) {
+			const coverPhoto = album.photos.find((p) => p.id === album.coverPhotoId)
+			if (coverPhoto) {
+				return coverPhoto.thumbnailUrl || coverPhoto.url
+			}
+		}
+
+		// Fallback to first photo
+		if (album.photos.length > 0) {
+			return album.photos[0].thumbnailUrl || album.photos[0].url
+		}
+
+		return null
+	}
+
+	function getPhotoCount(): number {
+		return album._count?.photos || 0
+	}
+</script>
+
+<div
+	class="album-item"
+	role="button"
+	tabindex="0"
+	onclick={handleAlbumClick}
+	onkeydown={(e) => e.key === 'Enter' && handleAlbumClick()}
+>
+	<div class="album-thumbnail">
+		{#if getThumbnailUrl()}
+			<img src={getThumbnailUrl()} alt="{album.title} thumbnail" class="thumbnail-image" />
+		{:else}
+			<div class="thumbnail-placeholder">
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+					<path
+						d="M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM19 19H5V5H19V19ZM13.96 12.29L11.21 15.83L9.25 13.47L6.5 17H17.5L13.96 12.29Z"
+						fill="currentColor"
+					/>
+				</svg>
+			</div>
+		{/if}
+	</div>
+
+	<div class="album-info">
+		<h3 class="album-title">{album.title}</h3>
+		<AdminByline
+			sections={[
+				album.isPhotography ? 'Photography' : 'Album',
+				album.status === 'published' ? 'Published' : 'Draft',
+				`${getPhotoCount()} ${getPhotoCount() === 1 ? 'photo' : 'photos'}`,
+				album.status === 'published' && album.publishedAt
+					? `Published ${formatRelativeTime(album.publishedAt)}`
+					: `Created ${formatRelativeTime(album.createdAt)}`
+			]}
+		/>
+	</div>
+
+	<div class="dropdown-container">
+		<button class="action-button" onclick={handleToggleDropdown} aria-label="Album actions">
+			<svg
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle cx="10" cy="4" r="1.5" fill="currentColor" />
+				<circle cx="10" cy="10" r="1.5" fill="currentColor" />
+				<circle cx="10" cy="16" r="1.5" fill="currentColor" />
+			</svg>
+		</button>
+
+		{#if isDropdownActive}
+			<div class="dropdown-menu">
+				<button class="dropdown-item" onclick={handleEdit}> Edit album </button>
+				<button class="dropdown-item" onclick={handleTogglePublish}>
+					{album.status === 'published' ? 'Unpublish' : 'Publish'} album
+				</button>
+				<div class="dropdown-divider"></div>
+				<button class="dropdown-item delete" onclick={handleDelete}> Delete album </button>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.album-item {
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		gap: $unit-2x;
+		padding: $unit-2x;
+		background: white;
+		border-radius: $unit-2x;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		width: 100%;
+		text-align: left;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+	}
+
+	.album-thumbnail {
+		flex-shrink: 0;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: $unit;
+		overflow: hidden;
+		background-color: $grey-90;
+
+		.thumbnail-image {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.thumbnail-placeholder {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+			color: $grey-50;
+		}
+	}
+
+	.album-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+		min-width: 0;
+	}
+
+	.album-title {
+		font-size: 1rem;
+		font-weight: 600;
+		color: $grey-10;
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dropdown-container {
+		position: relative;
+		flex-shrink: 0;
+	}
+
+	.action-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: $unit;
+		cursor: pointer;
+		color: $grey-30;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: $unit-half;
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		min-width: 180px;
+		z-index: 10;
+	}
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.875rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+
+		&.delete {
+			color: $red-60;
+		}
+	}
+
+	.dropdown-divider {
+		height: 1px;
+		background-color: $grey-90;
+		margin: $unit-half 0;
+	}
+</style>
diff --git a/src/lib/components/admin/AlbumMetadataPopover.svelte b/src/lib/components/admin/AlbumMetadataPopover.svelte
new file mode 100644
index 0000000..b5c4ca3
--- /dev/null
+++ b/src/lib/components/admin/AlbumMetadataPopover.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import GenericMetadataPopover, { type MetadataConfig } from './GenericMetadataPopover.svelte'
+
+	type Props = {
+		album: any
+		triggerElement: HTMLElement
+		onUpdate: (key: string, value: any) => void
+		onDelete: () => void
+		onClose?: () => void
+	}
+
+	let {
+		album = $bindable(),
+		triggerElement,
+		onUpdate,
+		onDelete,
+		onClose = () => {}
+	}: Props = $props()
+
+	// Convert album date to YYYY-MM-DD format for date input
+	const albumDate = $derived(album.date ? new Date(album.date).toISOString().split('T')[0] : '')
+
+	// Handle date changes - convert back to ISO string
+	function handleDateChange(key: string, value: string) {
+		if (key === 'date') {
+			const isoDate = value ? new Date(value).toISOString() : null
+			onUpdate(key, isoDate)
+		} else {
+			onUpdate(key, value)
+		}
+	}
+
+	const config: MetadataConfig = {
+		title: 'Album Settings',
+		fields: [
+			{
+				type: 'input',
+				key: 'slug',
+				label: 'Slug',
+				placeholder: 'album-url-slug',
+				helpText: 'Used in the album URL.'
+			},
+			{
+				type: 'date',
+				key: 'date',
+				label: 'Date',
+				helpText: 'When was this album created or photos taken?'
+			},
+			{
+				type: 'input',
+				key: 'location',
+				label: 'Location',
+				placeholder: 'Location where photos were taken'
+			},
+			{
+				type: 'section',
+				key: 'display-options',
+				label: 'Display Options'
+			},
+			{
+				type: 'toggle',
+				key: 'isPhotography',
+				label: 'Show in Photos',
+				helpText: 'Show this album in the photography experience'
+			},
+			{
+				type: 'toggle',
+				key: 'showInUniverse',
+				label: 'Show in Universe',
+				helpText: 'Display this album in the Universe feed'
+			},
+			{
+				type: 'metadata',
+				key: 'metadata'
+			}
+		],
+		deleteButton: {
+			label: 'Delete Album',
+			action: onDelete
+		}
+	}
+
+	// Create a reactive data object that includes the formatted date
+	let popoverData = $state({
+		...album,
+		date: albumDate
+	})
+
+	// Sync changes back to album
+	$effect(() => {
+		popoverData = {
+			...album,
+			date: albumDate
+		}
+	})
+</script>
+
+<GenericMetadataPopover
+	{config}
+	bind:data={popoverData}
+	{triggerElement}
+	onUpdate={handleDateChange}
+	{onClose}
+/>
diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte
new file mode 100644
index 0000000..a6d7ce1
--- /dev/null
+++ b/src/lib/components/admin/Button.svelte
@@ -0,0 +1,416 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+
+	interface Props extends HTMLButtonAttributes {
+		variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'text' | 'overlay' | 'danger-text'
+		buttonSize?: 'small' | 'medium' | 'large' | 'icon'
+		iconOnly?: boolean
+		iconPosition?: 'left' | 'right'
+		pill?: boolean
+		fullWidth?: boolean
+		loading?: boolean
+		active?: boolean
+		href?: string
+		class?: string
+	}
+
+	let {
+		variant = 'primary',
+		buttonSize = 'medium',
+		iconOnly = false,
+		iconPosition = 'left',
+		pill = true,
+		fullWidth = false,
+		loading = false,
+		active = false,
+		disabled = false,
+		type = 'button',
+		href,
+		class: className = '',
+		children,
+		onclick,
+		...restProps
+	}: Props = $props()
+
+	// Compute button classes
+	const buttonClass = $derived.by(() => {
+		const classes = ['btn']
+
+		// Variant
+		classes.push(`btn-${variant}`)
+
+		// Size
+		if (!iconOnly) {
+			classes.push(`btn-${buttonSize}`)
+		} else {
+			classes.push('btn-icon')
+			classes.push(`btn-icon-${buttonSize}`)
+		}
+
+		// States
+		if (active) classes.push('active')
+		if (loading) classes.push('loading')
+		if (fullWidth) classes.push('full-width')
+		if (!pill && !iconOnly) classes.push('btn-square')
+
+		// Custom class
+		if (className) classes.push(className)
+
+		return classes.join(' ')
+	})
+
+	// Handle icon slot positioning
+	const hasIcon = $derived(!!$$slots.icon)
+	const hasDefaultSlot = $derived(!!$$slots.default)
+	const showSpinner = $derived(loading && !iconOnly)
+</script>
+
+{#if href}
+	<a {href} class={buttonClass} class:disabled={disabled || loading} {...restProps}>
+		{#if showSpinner}
+			<svg class="btn-spinner" width="16" height="16" viewBox="0 0 16 16">
+				<circle
+					cx="8"
+					cy="8"
+					r="6"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+					stroke-dasharray="25"
+					stroke-dashoffset="25"
+					stroke-linecap="round"
+				>
+					<animateTransform
+						attributeName="transform"
+						type="rotate"
+						from="0 8 8"
+						to="360 8 8"
+						dur="1s"
+						repeatCount="indefinite"
+					/>
+				</circle>
+			</svg>
+		{/if}
+
+		{#if hasIcon && iconPosition === 'left' && !iconOnly}
+			<span class="btn-icon-wrapper">
+				<slot name="icon" />
+			</span>
+		{/if}
+
+		{#if hasDefaultSlot && !iconOnly}
+			<span class="btn-label">
+				<slot />
+			</span>
+		{:else if iconOnly && hasIcon}
+			<slot name="icon" />
+		{/if}
+
+		{#if hasIcon && iconPosition === 'right' && !iconOnly}
+			<span class="btn-icon-wrapper">
+				<slot name="icon" />
+			</span>
+		{/if}
+	</a>
+{:else}
+	<button class={buttonClass} {type} disabled={disabled || loading} {onclick} {...restProps}>
+		{#if showSpinner}
+			<svg class="btn-spinner" width="16" height="16" viewBox="0 0 16 16">
+				<circle
+					cx="8"
+					cy="8"
+					r="6"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+					stroke-dasharray="25"
+					stroke-dashoffset="25"
+					stroke-linecap="round"
+				>
+					<animateTransform
+						attributeName="transform"
+						type="rotate"
+						from="0 8 8"
+						to="360 8 8"
+						dur="1s"
+						repeatCount="indefinite"
+					/>
+				</circle>
+			</svg>
+		{/if}
+
+		{#if hasIcon && iconPosition === 'left' && !iconOnly}
+			<span class="btn-icon-wrapper">
+				<slot name="icon" />
+			</span>
+		{/if}
+
+		{#if hasDefaultSlot && !iconOnly}
+			<span class="btn-label">
+				<slot />
+			</span>
+		{:else if iconOnly && hasIcon}
+			<slot name="icon" />
+		{/if}
+
+		{#if hasIcon && iconPosition === 'right' && !iconOnly}
+			<span class="btn-icon-wrapper">
+				<slot name="icon" />
+			</span>
+		{/if}
+	</button>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	// Base button styles
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		font-weight: 500;
+		border: none;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		outline: none;
+		position: relative;
+		white-space: nowrap;
+		text-decoration: none;
+		box-sizing: border-box;
+
+		&:disabled,
+		&.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
+		&.loading {
+			color: transparent;
+		}
+
+		&.full-width {
+			width: 100%;
+		}
+
+		// Ensure consistent styling for both button and anchor elements
+		&:focus {
+			outline: 2px solid rgba(59, 130, 246, 0.5);
+			outline-offset: 2px;
+		}
+	}
+
+	// Size variations
+	.btn-small {
+		padding: $unit calc($unit * 1.5);
+		font-size: 13px;
+		border-radius: 20px;
+		min-height: 28px;
+	}
+
+	.btn-medium {
+		padding: $unit $unit-2x;
+		font-size: 14px;
+		border-radius: 24px;
+		min-height: 36px;
+	}
+
+	.btn-large {
+		padding: calc($unit * 1.5) $unit-3x;
+		font-size: 15px;
+		border-radius: 28px;
+		min-height: 44px;
+	}
+
+	// Square corners variant
+	.btn-square {
+		&.btn-small {
+			border-radius: 6px;
+		}
+		&.btn-medium {
+			border-radius: 8px;
+		}
+		&.btn-large {
+			border-radius: 10px;
+		}
+	}
+
+	// Icon-only button styles
+	.btn-icon {
+		padding: 0;
+		border-radius: 8px;
+
+		&.btn-icon-small {
+			width: 28px;
+			height: 28px;
+			border-radius: 6px;
+		}
+
+		&.btn-icon-medium {
+			width: 34px;
+			height: 34px;
+		}
+
+		&.btn-icon-large {
+			width: 44px;
+			height: 44px;
+			border-radius: 10px;
+		}
+
+		&.btn-icon-icon {
+			// For circular icon buttons
+			width: 34px;
+			height: 34px;
+			border-radius: 17px;
+		}
+	}
+
+	// Variant styles
+	.btn-primary {
+		background-color: $red-60;
+		color: white;
+
+		&:hover:not(:disabled) {
+			background-color: $red-80;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $red-40;
+		}
+	}
+
+	.btn-secondary {
+		background-color: $grey-10;
+		color: $grey-80;
+		border: 1px solid $grey-20;
+
+		&:hover:not(:disabled) {
+			background-color: $grey-20;
+			border-color: $grey-30;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $grey-30;
+		}
+	}
+
+	.btn-danger {
+		background-color: $yellow-60;
+		color: $yellow-10;
+
+		&:hover:not(:disabled) {
+			background-color: $yellow-50;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $yellow-40;
+		}
+	}
+
+	.btn-ghost {
+		background-color: transparent;
+		color: $grey-20;
+
+		&:hover:not(:disabled) {
+			background-color: $grey-5;
+			color: $grey-00;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $grey-10;
+		}
+
+		&.active {
+			background-color: $grey-10;
+			color: $grey-00;
+		}
+	}
+
+	.btn-text {
+		background: none;
+		color: $grey-40;
+		padding: $unit;
+
+		&:hover:not(:disabled) {
+			color: $grey-20;
+			background-color: $grey-5;
+		}
+
+		&:active:not(:disabled) {
+			color: $grey-00;
+		}
+	}
+
+	.btn-danger-text {
+		background: none;
+		color: #dc2626;
+		padding: $unit;
+		font-weight: 600;
+
+		&:hover:not(:disabled) {
+			background-color: $grey-90;
+			color: #dc2626;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $grey-80;
+			color: #dc2626;
+		}
+	}
+
+	.btn-overlay {
+		background-color: white;
+		color: $grey-20;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+		&:hover:not(:disabled) {
+			background-color: $grey-5;
+			color: $grey-00;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+		}
+
+		&:active:not(:disabled) {
+			background-color: $grey-10;
+			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	// Icon wrapper
+	.btn-icon-wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	// Loading spinner
+	.btn-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: currentColor;
+	}
+
+	// Label wrapper
+	.btn-label {
+		line-height: 1;
+	}
+
+	// Special states
+	.btn.active {
+		&.btn-ghost {
+			background-color: rgba($blue-50, 0.1);
+			color: $blue-50;
+		}
+	}
+
+	// Icon color inheritance
+	:global(.btn svg) {
+		color: currentColor;
+		flex-shrink: 0;
+	}
+</style>
diff --git a/src/lib/components/admin/DataTable.svelte b/src/lib/components/admin/DataTable.svelte
new file mode 100644
index 0000000..f8de45c
--- /dev/null
+++ b/src/lib/components/admin/DataTable.svelte
@@ -0,0 +1,170 @@
+<script lang="ts">
+	interface Column<T> {
+		key: string
+		label: string
+		render?: (item: T) => string
+		component?: any
+		width?: string
+	}
+
+	interface Props<T> {
+		data: T[]
+		columns: Column<T>[]
+		isLoading?: boolean
+		emptyMessage?: string
+		onRowClick?: (item: T) => void
+		unstyled?: boolean
+	}
+
+	let {
+		data = [],
+		columns = [],
+		isLoading = false,
+		emptyMessage = 'No data found',
+		onRowClick,
+		unstyled = false
+	}: Props<any> = $props()
+
+	function getCellValue(item: any, column: Column<any>) {
+		if (column.render) {
+			return column.render(item)
+		}
+
+		// Handle nested properties
+		const keys = column.key.split('.')
+		let value = item
+		for (const key of keys) {
+			value = value?.[key]
+		}
+
+		return value
+	}
+</script>
+
+<div class="data-table-wrapper" class:unstyled>
+	{#if isLoading}
+		<div class="loading">
+			<div class="spinner"></div>
+			<p>Loading...</p>
+		</div>
+	{:else if data.length === 0}
+		<div class="empty-state">
+			<p>{emptyMessage}</p>
+		</div>
+	{:else}
+		<table class="data-table">
+			<thead>
+				<tr>
+					{#each columns as column}
+						<th style={column.width ? `width: ${column.width}` : ''}>
+							{column.label}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each data as item}
+					<tr class:clickable={!!onRowClick} onclick={() => onRowClick?.(item)}>
+						{#each columns as column}
+							<td>
+								{#if column.component}
+									<svelte:component this={column.component} {item} />
+								{:else}
+									{getCellValue(item, column)}
+								{/if}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</div>
+
+<style lang="scss">
+	.data-table-wrapper {
+		background: white;
+		border-radius: 8px;
+		overflow: hidden;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+		&.unstyled {
+			border-radius: 0;
+			box-shadow: none;
+		}
+	}
+
+	.loading {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		.spinner {
+			width: 32px;
+			height: 32px;
+			border: 3px solid $grey-80;
+			border-top-color: $primary-color;
+			border-radius: 50%;
+			margin: 0 auto $unit-2x;
+			animation: spin 0.8s linear infinite;
+		}
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.empty-state {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+
+		thead {
+			background-color: $grey-95;
+			border-bottom: 1px solid $grey-85;
+		}
+
+		th {
+			padding: $unit-3x $unit-4x;
+			text-align: left;
+			font-weight: 600;
+			font-size: 0.875rem;
+			color: $grey-30;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+		}
+
+		tbody tr {
+			border-bottom: 1px solid $grey-90;
+			transition: background-color 0.2s ease;
+
+			&:hover {
+				background-color: $grey-97;
+			}
+
+			&.clickable {
+				cursor: pointer;
+			}
+
+			&:last-child {
+				border-bottom: none;
+			}
+		}
+
+		td {
+			padding: $unit-4x;
+			color: $grey-20;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/DeleteConfirmationModal.svelte b/src/lib/components/admin/DeleteConfirmationModal.svelte
new file mode 100644
index 0000000..5e7d0d4
--- /dev/null
+++ b/src/lib/components/admin/DeleteConfirmationModal.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+
+	interface Props {
+		isOpen: boolean
+		title?: string
+		message: string
+		confirmText?: string
+		cancelText?: string
+		onConfirm: () => void
+		onCancel?: () => void
+	}
+
+	let {
+		isOpen = $bindable(),
+		title = 'Delete item?',
+		message,
+		confirmText = 'Delete',
+		cancelText = 'Cancel',
+		onConfirm,
+		onCancel
+	}: Props = $props()
+
+	function handleConfirm() {
+		onConfirm()
+	}
+
+	function handleCancel() {
+		isOpen = false
+		onCancel?.()
+	}
+
+	function handleBackdropClick() {
+		isOpen = false
+		onCancel?.()
+	}
+</script>
+
+{#if isOpen}
+	<div class="modal-backdrop" onclick={handleBackdropClick}>
+		<div class="modal" onclick={(e) => e.stopPropagation()}>
+			<h2>{title}</h2>
+			<p>{message}</p>
+			<div class="modal-actions">
+				<Button variant="secondary" onclick={handleCancel}>
+					{cancelText}
+				</Button>
+				<Button variant="danger" onclick={handleConfirm}>
+					{confirmText}
+				</Button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	.modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1050;
+	}
+
+	.modal {
+		background: white;
+		border-radius: $unit-2x;
+		padding: $unit-4x;
+		max-width: 400px;
+		width: 90%;
+		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+
+		h2 {
+			margin: 0 0 $unit-2x;
+			font-size: 1.25rem;
+			font-weight: 700;
+			color: $grey-10;
+		}
+
+		p {
+			margin: 0 0 $unit-4x;
+			color: $grey-20;
+			line-height: 1.5;
+		}
+	}
+
+	.modal-actions {
+		display: flex;
+		gap: $unit-2x;
+		justify-content: flex-end;
+	}
+</style>
diff --git a/src/lib/components/admin/DropdownItem.svelte b/src/lib/components/admin/DropdownItem.svelte
new file mode 100644
index 0000000..a768e25
--- /dev/null
+++ b/src/lib/components/admin/DropdownItem.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	interface Props {
+		onclick?: (event: MouseEvent) => void
+		variant?: 'default' | 'danger'
+		disabled?: boolean
+	}
+
+	let { onclick, variant = 'default', disabled = false, children }: Props = $props()
+
+	function handleClick(event: MouseEvent) {
+		if (disabled) return
+		event.stopPropagation()
+		onclick?.(event)
+	}
+</script>
+
+<button
+	class="dropdown-item"
+	class:danger={variant === 'danger'}
+	class:disabled
+	{disabled}
+	onclick={handleClick}
+>
+	{@render children()}
+</button>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.875rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover:not(:disabled) {
+			background-color: $grey-95;
+		}
+
+		&.danger {
+			color: $red-60;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/DropdownMenu.svelte b/src/lib/components/admin/DropdownMenu.svelte
new file mode 100644
index 0000000..55c6a51
--- /dev/null
+++ b/src/lib/components/admin/DropdownMenu.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte'
+	import { browser } from '$app/environment'
+
+	interface Props {
+		isOpen: boolean
+		triggerElement?: HTMLElement
+		items: DropdownItem[]
+		onClose?: () => void
+	}
+
+	interface DropdownItem {
+		id: string
+		label: string
+		action: () => void
+		variant?: 'default' | 'danger'
+		divider?: boolean
+	}
+
+	let { isOpen = $bindable(), triggerElement, items, onClose }: Props = $props()
+
+	let dropdownElement: HTMLDivElement
+	const dispatch = createEventDispatcher()
+
+	// Calculate position dynamically when needed
+	const position = $derived(() => {
+		if (!isOpen || !triggerElement || !browser) {
+			return { top: 0, left: 0 }
+		}
+
+		const rect = triggerElement.getBoundingClientRect()
+		const dropdownWidth = 180
+
+		return {
+			top: rect.bottom + 4,
+			left: rect.right - dropdownWidth
+		}
+	})
+
+	function handleItemClick(item: DropdownItem, event: MouseEvent) {
+		event.stopPropagation()
+		item.action()
+		isOpen = false
+		onClose?.()
+	}
+
+	function handleOutsideClick(event: MouseEvent) {
+		if (!dropdownElement || !isOpen) return
+
+		const target = event.target as HTMLElement
+		if (!dropdownElement.contains(target) && !triggerElement?.contains(target)) {
+			isOpen = false
+			onClose?.()
+		}
+	}
+
+	$effect(() => {
+		if (browser && isOpen) {
+			document.addEventListener('click', handleOutsideClick)
+			return () => {
+				document.removeEventListener('click', handleOutsideClick)
+			}
+		}
+	})
+</script>
+
+{#if isOpen && browser}
+	<div
+		bind:this={dropdownElement}
+		class="dropdown-menu"
+		style="top: {position().top}px; left: {position().left}px"
+	>
+		{#each items as item}
+			{#if item.divider}
+				<div class="dropdown-divider"></div>
+			{:else}
+				<button
+					class="dropdown-item"
+					class:danger={item.variant === 'danger'}
+					onclick={(e) => handleItemClick(item, e)}
+				>
+					{item.label}
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.dropdown-menu {
+		position: fixed;
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		min-width: 180px;
+		z-index: 1000;
+	}
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.875rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		display: block;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+
+		&.danger {
+			color: $red-60;
+		}
+	}
+
+	.dropdown-divider {
+		height: 1px;
+		background-color: $grey-90;
+		margin: $unit-half 0;
+	}
+</style>
diff --git a/src/lib/components/admin/DropdownMenuContainer.svelte b/src/lib/components/admin/DropdownMenuContainer.svelte
new file mode 100644
index 0000000..91559cc
--- /dev/null
+++ b/src/lib/components/admin/DropdownMenuContainer.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	interface Props {
+		class?: string
+	}
+
+	let { class: className = '', children }: Props = $props()
+</script>
+
+<div class="dropdown-menu {className}">
+	{@render children()}
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + $unit-half);
+		right: 0;
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		min-width: 180px;
+		z-index: 10;
+	}
+</style>
diff --git a/src/lib/components/admin/Editor.svelte b/src/lib/components/admin/Editor.svelte
new file mode 100644
index 0000000..c2e4f39
--- /dev/null
+++ b/src/lib/components/admin/Editor.svelte
@@ -0,0 +1,385 @@
+<script lang="ts">
+	import EditorWithUpload from './EditorWithUpload.svelte'
+	import type { Editor } from '@tiptap/core'
+	import type { JSONContent } from '@tiptap/core'
+
+	interface Props {
+		data?: JSONContent
+		onChange?: (data: JSONContent) => void
+		placeholder?: string
+		readOnly?: boolean
+		minHeight?: number
+		autofocus?: boolean
+		class?: string
+		showToolbar?: boolean
+		simpleMode?: boolean
+	}
+
+	let {
+		data = $bindable({
+			type: 'doc',
+			content: [{ type: 'paragraph' }]
+		}),
+		onChange,
+		placeholder = 'Type "/" for commands...',
+		readOnly = false,
+		minHeight = 400,
+		autofocus = false,
+		class: className = '',
+		showToolbar = true,
+		simpleMode = false
+	}: Props = $props()
+
+	let editor = $state<Editor | undefined>()
+	let initialized = false
+
+	// Update content when editor changes
+	function onUpdate(props: { editor: Editor }) {
+		// Skip the first update to avoid circular updates
+		if (!initialized) {
+			initialized = true
+			return
+		}
+
+		const json = props.editor.getJSON()
+		data = json
+		onChange?.(json)
+	}
+
+	// Public API
+	export function save(): JSONContent | null {
+		return editor?.getJSON() || null
+	}
+
+	export function clear() {
+		editor?.commands.clearContent()
+	}
+
+	export function focus() {
+		editor?.commands.focus()
+	}
+
+	export function getIsDirty(): boolean {
+		// This would need to track changes since last save
+		return false
+	}
+
+	// Focus on mount if requested
+	$effect(() => {
+		if (editor && autofocus) {
+			// Only focus once on initial mount
+			const timer = setTimeout(() => {
+				editor.commands.focus()
+			}, 100)
+
+			return () => clearTimeout(timer)
+		}
+	})
+</script>
+
+<div class="editor-wrapper {className}" style="--min-height: {minHeight}px">
+	<div class="editor-container">
+		<EditorWithUpload
+			bind:editor
+			content={data}
+			{onUpdate}
+			editable={!readOnly}
+			showToolbar={!simpleMode && showToolbar}
+			{placeholder}
+			showSlashCommands={!simpleMode}
+			showLinkBubbleMenu={!simpleMode}
+			showTableBubbleMenu={false}
+			class="editor-content"
+		/>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+	@import '$styles/mixins.scss';
+
+	.editor-wrapper {
+		width: 100%;
+		min-height: var(--min-height);
+		height: 100%;
+		background: white;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.editor-container {
+		flex: 1;
+		overflow-y: auto;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	:global(.editor-content) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	:global(.editor-content .edra) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	:global(.editor-content .editor-toolbar) {
+		border-radius: $card-corner-radius;
+		box-sizing: border-box;
+		background: $grey-95;
+		padding: $unit-2x;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		overflow-x: auto;
+		overflow-y: hidden;
+		white-space: nowrap;
+		-webkit-overflow-scrolling: touch;
+
+		// Hide scrollbar but keep functionality
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		// Override Edra toolbar styles
+		:global(.edra-toolbar) {
+			overflow: visible;
+			width: auto;
+			padding: 0;
+			display: flex;
+			align-items: center;
+			gap: $unit;
+		}
+	}
+
+	// Override Edra styles to match our design
+	:global(.edra-editor) {
+		flex: 1;
+		min-height: 0;
+		height: 100%;
+		overflow-y: auto;
+		padding: 0 $unit-4x;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x;
+		}
+	}
+
+	:global(.edra .ProseMirror) {
+		font-size: 16px;
+		line-height: 1.6;
+		color: $grey-10;
+		min-height: 100%;
+		padding-bottom: 30vh; // Give space for scrolling
+	}
+
+	:global(.edra .ProseMirror h1) {
+		font-size: 2rem;
+		font-weight: 700;
+		margin: $unit-3x 0 $unit-2x;
+		line-height: 1.2;
+	}
+
+	:global(.edra .ProseMirror h2) {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: $unit-3x 0 $unit-2x;
+		line-height: 1.3;
+	}
+
+	:global(.edra .ProseMirror h3) {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: $unit-3x 0 $unit-2x;
+		line-height: 1.4;
+	}
+
+	:global(.edra .ProseMirror p) {
+		margin: $unit-2x 0;
+	}
+
+	:global(.edra .ProseMirror ul),
+	:global(.edra .ProseMirror ol) {
+		padding-left: $unit-4x;
+		margin: $unit-2x 0;
+	}
+
+	:global(.edra .ProseMirror li) {
+		margin: $unit 0;
+	}
+
+	:global(.edra .ProseMirror blockquote) {
+		border-left: 3px solid $grey-80;
+		margin: $unit-3x 0;
+		padding-left: $unit-3x;
+		font-style: italic;
+		color: $grey-30;
+	}
+
+	:global(.edra .ProseMirror pre) {
+		background: $grey-95;
+		border: 1px solid $grey-80;
+		border-radius: 4px;
+		color: $grey-10;
+		font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
+		font-size: 0.875rem;
+		line-height: 1.5;
+		margin: $unit-2x 0;
+		padding: $unit-2x;
+		overflow-x: auto;
+	}
+
+	:global(.edra .ProseMirror code) {
+		background: $grey-90;
+		border-radius: 0.25rem;
+		color: $grey-10;
+		font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
+		font-size: 0.875em;
+		padding: 0.125rem 0.25rem;
+	}
+
+	:global(.edra .ProseMirror hr) {
+		border: none;
+		border-top: 1px solid $grey-80;
+		margin: $unit-4x 0;
+	}
+
+	:global(.edra .ProseMirror a) {
+		color: #3b82f6;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
+	:global(.edra .ProseMirror a:hover) {
+		color: #2563eb;
+	}
+
+	:global(.edra .ProseMirror ::selection) {
+		background: rgba(59, 130, 246, 0.15);
+	}
+
+	// Placeholder
+	:global(.edra .ProseMirror p.is-editor-empty:first-child::before) {
+		content: attr(data-placeholder);
+		float: left;
+		color: #999;
+		pointer-events: none;
+		height: 0;
+	}
+
+	// Focus styles
+	:global(.edra .ProseMirror.ProseMirror-focused) {
+		outline: none;
+	}
+
+	// Loading state
+	:global(.edra-loading) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: var(--min-height);
+		color: $grey-50;
+		gap: $unit;
+	}
+
+	// Image styles
+	:global(.edra .ProseMirror img) {
+		max-width: 100%;
+		width: auto;
+		max-height: 400px;
+		height: auto;
+		border-radius: 4px;
+		margin: $unit-2x auto;
+		display: block;
+		object-fit: contain;
+	}
+
+	:global(.edra-media-placeholder-wrapper) {
+		margin: $unit-2x 0;
+	}
+
+	:global(.edra-media-placeholder-content) {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		padding: $unit-4x;
+		border: 2px dashed $grey-80;
+		border-radius: 8px;
+		background: $grey-95;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:hover {
+			border-color: $grey-60;
+			background: $grey-90;
+		}
+	}
+
+	:global(.edra-media-placeholder-icon) {
+		width: 48px;
+		height: 48px;
+		color: $grey-50;
+	}
+
+	:global(.edra-media-placeholder-text) {
+		font-size: 1rem;
+		color: $grey-30;
+	}
+
+	// Image container styles
+	:global(.edra-media-container) {
+		margin: $unit-3x auto;
+		position: relative;
+
+		&.align-left {
+			margin-left: 0;
+		}
+
+		&.align-right {
+			margin-right: 0;
+			margin-left: auto;
+		}
+
+		&.align-center {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+
+	:global(.edra-media-content) {
+		width: 100%;
+		height: auto;
+		display: block;
+	}
+
+	:global(.edra-media-caption) {
+		width: 100%;
+		margin-top: $unit;
+		padding: $unit $unit-2x;
+		border: 1px solid $grey-80;
+		border-radius: 4px;
+		font-size: 0.875rem;
+		color: $grey-30;
+		background: $grey-95;
+
+		&:focus {
+			outline: none;
+			border-color: $grey-60;
+			background: white;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/EditorWithUpload.svelte b/src/lib/components/admin/EditorWithUpload.svelte
new file mode 100644
index 0000000..65d7964
--- /dev/null
+++ b/src/lib/components/admin/EditorWithUpload.svelte
@@ -0,0 +1,866 @@
+<script lang="ts">
+	import { type Editor } from '@tiptap/core'
+	import { onMount } from 'svelte'
+	import { initiateEditor } from '$lib/components/edra/editor.js'
+	import { EdraToolbar, EdraBubbleMenu } from '$lib/components/edra/headless/index.js'
+	import LoaderCircle from 'lucide-svelte/icons/loader-circle'
+	import { focusEditor, type EdraProps } from '$lib/components/edra/utils.js'
+	import EdraToolBarIcon from '$lib/components/edra/headless/components/EdraToolBarIcon.svelte'
+	import { commands } from '$lib/components/edra/commands/commands.js'
+
+	// Import all the same components as Edra
+	import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+	import { all, createLowlight } from 'lowlight'
+	import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+	import CodeExtended from '$lib/components/edra/headless/components/CodeExtended.svelte'
+	import { AudioPlaceholder } from '$lib/components/edra/extensions/audio/AudioPlaceholder.js'
+	import AudioPlaceholderComponent from '$lib/components/edra/headless/components/AudioPlaceholder.svelte'
+	import AudioExtendedComponent from '$lib/components/edra/headless/components/AudioExtended.svelte'
+	import { ImagePlaceholder } from '$lib/components/edra/extensions/image/ImagePlaceholder.js'
+	import ImageUploadPlaceholder from './ImageUploadPlaceholder.svelte' // Our custom component
+	import { VideoPlaceholder } from '$lib/components/edra/extensions/video/VideoPlaceholder.js'
+	import VideoPlaceholderComponent from '$lib/components/edra/headless/components/VideoPlaceholder.svelte'
+	import { ImageExtended } from '$lib/components/edra/extensions/image/ImageExtended.js'
+	import ImageExtendedComponent from '$lib/components/edra/headless/components/ImageExtended.svelte'
+	import VideoExtendedComponent from '$lib/components/edra/headless/components/VideoExtended.svelte'
+	import { VideoExtended } from '$lib/components/edra/extensions/video/VideoExtended.js'
+	import { AudioExtended } from '$lib/components/edra/extensions/audio/AudiExtended.js'
+	import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
+	import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
+	import TableColMenu from '$lib/components/edra/headless/menus/table/table-col-menu.svelte'
+	import slashcommand from '$lib/components/edra/extensions/slash-command/slashcommand.js'
+	import SlashCommandList from '$lib/components/edra/headless/components/SlashCommandList.svelte'
+	import IFramePlaceholderComponent from '$lib/components/edra/headless/components/IFramePlaceholder.svelte'
+	import { IFramePlaceholder } from '$lib/components/edra/extensions/iframe/IFramePlaceholder.js'
+	import { IFrameExtended } from '$lib/components/edra/extensions/iframe/IFrameExtended.js'
+	import IFrameExtendedComponent from '$lib/components/edra/headless/components/IFrameExtended.svelte'
+	import { GalleryPlaceholder } from '$lib/components/edra/extensions/gallery/GalleryPlaceholder.js'
+	import GalleryPlaceholderComponent from '$lib/components/edra/headless/components/GalleryPlaceholder.svelte'
+	import { GalleryExtended } from '$lib/components/edra/extensions/gallery/GalleryExtended.js'
+	import GalleryExtendedComponent from '$lib/components/edra/headless/components/GalleryExtended.svelte'
+
+	// Import Edra styles
+	import '$lib/components/edra/headless/style.css'
+	import 'katex/dist/katex.min.css'
+	import '$lib/components/edra/editor.css'
+	import '$lib/components/edra/onedark.css'
+
+	const lowlight = createLowlight(all)
+
+	let {
+		class: className = '',
+		content = undefined,
+		editable = true,
+		limit = undefined,
+		editor = $bindable<Editor | undefined>(),
+		showSlashCommands = true,
+		showLinkBubbleMenu = true,
+		showTableBubbleMenu = true,
+		onUpdate,
+		showToolbar = true,
+		placeholder = 'Type "/" for commands...'
+	}: EdraProps & { showToolbar?: boolean; placeholder?: string } = $props()
+
+	let element = $state<HTMLElement>()
+	let isLoading = $state(true)
+	let showTextStyleDropdown = $state(false)
+	let showMediaDropdown = $state(false)
+	let dropdownTriggerRef = $state<HTMLElement>()
+	let mediaDropdownTriggerRef = $state<HTMLElement>()
+	let dropdownPosition = $state({ top: 0, left: 0 })
+	let mediaDropdownPosition = $state({ top: 0, left: 0 })
+
+	// Filter out unwanted commands
+	const getFilteredCommands = () => {
+		const filtered = { ...commands }
+
+		// Remove these groups entirely
+		delete filtered['undo-redo']
+		delete filtered['headings'] // In text style dropdown
+		delete filtered['lists'] // In text style dropdown
+		delete filtered['alignment'] // Not needed
+		delete filtered['table'] // Not needed
+		delete filtered['media'] // Will be in media dropdown
+
+		// Reorganize text-formatting commands
+		if (filtered['text-formatting']) {
+			const allCommands = filtered['text-formatting'].commands
+			const basicFormatting = []
+			const advancedFormatting = []
+
+			// Group basic formatting first
+			const basicOrder = ['bold', 'italic', 'underline', 'strike']
+			basicOrder.forEach((name) => {
+				const cmd = allCommands.find((c) => c.name === name)
+				if (cmd) basicFormatting.push(cmd)
+			})
+
+			// Then link and code
+			const advancedOrder = ['link', 'code']
+			advancedOrder.forEach((name) => {
+				const cmd = allCommands.find((c) => c.name === name)
+				if (cmd) advancedFormatting.push(cmd)
+			})
+
+			// Create two groups
+			filtered['basic-formatting'] = {
+				name: 'Basic Formatting',
+				label: 'Basic Formatting',
+				commands: basicFormatting
+			}
+
+			filtered['advanced-formatting'] = {
+				name: 'Advanced Formatting',
+				label: 'Advanced Formatting',
+				commands: advancedFormatting
+			}
+
+			// Remove original text-formatting
+			delete filtered['text-formatting']
+		}
+
+		return filtered
+	}
+
+	// Get media commands, but filter out iframe
+	const getMediaCommands = () => {
+		if (commands.media) {
+			return commands.media.commands.filter((cmd) => cmd.name !== 'iframe-placeholder')
+		}
+		return []
+	}
+
+	const filteredCommands = getFilteredCommands()
+	const colorCommands = commands.colors.commands
+	const fontCommands = commands.fonts.commands
+	const excludedCommands = ['colors', 'fonts']
+
+	// Get current text style for dropdown
+	const getCurrentTextStyle = (editor: Editor) => {
+		if (editor.isActive('heading', { level: 1 })) return 'Heading 1'
+		if (editor.isActive('heading', { level: 2 })) return 'Heading 2'
+		if (editor.isActive('heading', { level: 3 })) return 'Heading 3'
+		if (editor.isActive('bulletList')) return 'Bullet List'
+		if (editor.isActive('orderedList')) return 'Ordered List'
+		if (editor.isActive('taskList')) return 'Task List'
+		if (editor.isActive('codeBlock')) return 'Code Block'
+		if (editor.isActive('blockquote')) return 'Blockquote'
+		return 'Paragraph'
+	}
+
+	// Calculate dropdown position
+	const updateDropdownPosition = () => {
+		if (dropdownTriggerRef) {
+			const rect = dropdownTriggerRef.getBoundingClientRect()
+			dropdownPosition = {
+				top: rect.bottom + 4,
+				left: rect.left
+			}
+		}
+	}
+
+	// Toggle dropdown with position update
+	const toggleDropdown = () => {
+		if (!showTextStyleDropdown) {
+			updateDropdownPosition()
+		}
+		showTextStyleDropdown = !showTextStyleDropdown
+	}
+
+	// Update media dropdown position
+	const updateMediaDropdownPosition = () => {
+		if (mediaDropdownTriggerRef) {
+			const rect = mediaDropdownTriggerRef.getBoundingClientRect()
+			mediaDropdownPosition = {
+				top: rect.bottom + 4,
+				left: rect.left
+			}
+		}
+	}
+
+	// Toggle media dropdown
+	const toggleMediaDropdown = () => {
+		if (!showMediaDropdown) {
+			updateMediaDropdownPosition()
+		}
+		showMediaDropdown = !showMediaDropdown
+	}
+
+	// Close dropdown when clicking outside
+	const handleClickOutside = (event: MouseEvent) => {
+		const target = event.target as HTMLElement
+		if (!dropdownTriggerRef?.contains(target) && !target.closest('.dropdown-menu-portal')) {
+			showTextStyleDropdown = false
+		}
+		if (!mediaDropdownTriggerRef?.contains(target) && !target.closest('.media-dropdown-portal')) {
+			showMediaDropdown = false
+		}
+	}
+
+	$effect(() => {
+		if (showTextStyleDropdown || showMediaDropdown) {
+			document.addEventListener('click', handleClickOutside)
+			return () => {
+				document.removeEventListener('click', handleClickOutside)
+			}
+		}
+	})
+
+	// Custom paste handler for both images and text
+	function handlePaste(view: any, event: ClipboardEvent) {
+		const clipboardData = event.clipboardData
+		if (!clipboardData) return false
+
+		// Check for images first
+		const imageItem = Array.from(clipboardData.items).find(
+			(item) => item.type.indexOf('image') === 0
+		)
+		if (imageItem) {
+			const file = imageItem.getAsFile()
+			if (!file) return false
+
+			// Check file size (2MB max)
+			const filesize = file.size / 1024 / 1024
+			if (filesize > 2) {
+				alert(`Image too large! File size: ${filesize.toFixed(2)} MB (max 2MB)`)
+				return true
+			}
+
+			// Upload to our media API
+			uploadImage(file)
+			return true // Prevent default paste behavior
+		}
+
+		// Handle text paste - strip HTML formatting
+		const htmlData = clipboardData.getData('text/html')
+		const plainText = clipboardData.getData('text/plain')
+
+		if (htmlData && plainText) {
+			// If we have both HTML and plain text, use plain text to strip formatting
+			event.preventDefault()
+
+			// Use editor commands to insert text so all callbacks are triggered
+			const editorInstance = (view as any).editor
+			if (editorInstance) {
+				editorInstance.chain().focus().insertContent(plainText).run()
+			} else {
+				// Fallback to manual transaction
+				const { state, dispatch } = view
+				const { selection } = state
+				const transaction = state.tr.insertText(plainText, selection.from, selection.to)
+				dispatch(transaction)
+			}
+
+			return true // Prevent default paste behavior
+		}
+
+		// Let default handling take care of plain text only
+		return false
+	}
+
+	async function uploadImage(file: File) {
+		if (!editor) return
+
+		// Create a placeholder while uploading
+		const placeholderSrc = URL.createObjectURL(file)
+		editor.commands.setImage({ src: placeholderSrc })
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				throw new Error('Not authenticated')
+			}
+
+			const formData = new FormData()
+			formData.append('file', file)
+
+			const response = await fetch('/api/media/upload', {
+				method: 'POST',
+				headers: {
+					Authorization: `Basic ${auth}`
+				},
+				body: formData
+			})
+
+			if (!response.ok) {
+				throw new Error('Upload failed')
+			}
+
+			const media = await response.json()
+
+			// Replace placeholder with actual URL
+			// Set a reasonable default width (max 600px)
+			const displayWidth = media.width && media.width > 600 ? 600 : media.width
+
+			editor.commands.insertContent({
+				type: 'image',
+				attrs: {
+					src: media.url,
+					alt: media.filename || '',
+					width: displayWidth,
+					height: media.height,
+					align: 'center'
+				}
+			})
+
+			// Clean up the object URL
+			URL.revokeObjectURL(placeholderSrc)
+		} catch (error) {
+			console.error('Image upload failed:', error)
+			alert('Failed to upload image. Please try again.')
+			// Remove the placeholder on error
+			editor.commands.undo()
+		}
+	}
+
+	onMount(() => {
+		editor = initiateEditor(
+			element,
+			content,
+			limit,
+			[
+				CodeBlockLowlight.configure({
+					lowlight
+				}).extend({
+					addNodeView() {
+						return SvelteNodeViewRenderer(CodeExtended)
+					}
+				}),
+				AudioPlaceholder(AudioPlaceholderComponent),
+				ImagePlaceholder(ImageUploadPlaceholder), // Use our custom component
+				GalleryPlaceholder(GalleryPlaceholderComponent),
+				IFramePlaceholder(IFramePlaceholderComponent),
+				IFrameExtended(IFrameExtendedComponent),
+				VideoPlaceholder(VideoPlaceholderComponent),
+				AudioExtended(AudioExtendedComponent),
+				ImageExtended(ImageExtendedComponent),
+				GalleryExtended(GalleryExtendedComponent),
+				VideoExtended(VideoExtendedComponent),
+				...(showSlashCommands ? [slashcommand(SlashCommandList)] : [])
+			],
+			{
+				editable,
+				onUpdate,
+				onTransaction: (props) => {
+					editor = undefined
+					editor = props.editor
+				},
+				editorProps: {
+					attributes: {
+						class: 'prose prose-sm max-w-none focus:outline-none'
+					},
+					handlePaste: handlePaste
+				}
+			},
+			placeholder
+		)
+
+		// Add placeholder
+		if (placeholder && editor) {
+			editor.extensionManager.extensions
+				.find((ext) => ext.name === 'placeholder')
+				?.configure({
+					placeholder
+				})
+		}
+
+		isLoading = false
+
+		return () => editor?.destroy()
+	})
+</script>
+
+<div class={`edra ${className}`}>
+	{#if showToolbar && editor && !isLoading}
+		<div class="editor-toolbar">
+			<div class="edra-toolbar">
+				<!-- Text Style Dropdown -->
+				<div class="text-style-dropdown">
+					<button bind:this={dropdownTriggerRef} class="dropdown-trigger" onclick={toggleDropdown}>
+						<span>{getCurrentTextStyle(editor)}</span>
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 12 12"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M3 4.5L6 7.5L9 4.5"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<span class="separator"></span>
+
+				{#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys}
+					{@const groups = filteredCommands[keys].commands}
+					{#each groups as command}
+						<EdraToolBarIcon {command} {editor} />
+					{/each}
+					<span class="separator"></span>
+				{/each}
+
+				<!-- Media Dropdown -->
+				<div class="text-style-dropdown">
+					<button
+						bind:this={mediaDropdownTriggerRef}
+						class="dropdown-trigger"
+						onclick={toggleMediaDropdown}
+					>
+						<span>Insert</span>
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 12 12"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M3 4.5L6 7.5L9 4.5"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<span class="separator"></span>
+
+				<EdraToolBarIcon
+					command={colorCommands[0]}
+					{editor}
+					style={`color: ${editor.getAttributes('textStyle').color};`}
+					onclick={() => {
+						const color = editor.getAttributes('textStyle').color
+						const hasColor = editor.isActive('textStyle', { color })
+						if (hasColor) {
+							editor.chain().focus().unsetColor().run()
+						} else {
+							const color = prompt('Enter the color of the text:')
+							if (color !== null) {
+								editor.chain().focus().setColor(color).run()
+							}
+						}
+					}}
+				/>
+				<EdraToolBarIcon
+					command={colorCommands[1]}
+					{editor}
+					style={`background-color: ${editor.getAttributes('highlight').color};`}
+					onclick={() => {
+						const hasHightlight = editor.isActive('highlight')
+						if (hasHightlight) {
+							editor.chain().focus().unsetHighlight().run()
+						} else {
+							const color = prompt('Enter the color of the highlight:')
+							if (color !== null) {
+								editor.chain().focus().setHighlight({ color }).run()
+							}
+						}
+					}}
+				/>
+			</div>
+		</div>
+	{/if}
+	{#if editor}
+		{#if showLinkBubbleMenu}
+			<LinkMenu {editor} />
+		{/if}
+		{#if showTableBubbleMenu}
+			<TableRowMenu {editor} />
+			<TableColMenu {editor} />
+		{/if}
+	{/if}
+	{#if !editor}
+		<div class="edra-loading">
+			<LoaderCircle class="animate-spin" /> Loading...
+		</div>
+	{/if}
+	<div
+		bind:this={element}
+		role="button"
+		tabindex="0"
+		onclick={(event) => focusEditor(editor, event)}
+		onkeydown={(event) => {
+			if (event.key === 'Enter' || event.key === ' ') {
+				focusEditor(editor, event)
+			}
+		}}
+		class="edra-editor"
+	></div>
+</div>
+
+<!-- Media Dropdown Portal -->
+{#if showMediaDropdown}
+	<div
+		class="media-dropdown-portal"
+		style="position: fixed; top: {mediaDropdownPosition.top}px; left: {mediaDropdownPosition.left}px; z-index: 10000;"
+	>
+		<div class="dropdown-menu">
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertImagePlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="dropdown-icon">
+					<rect
+						x="3"
+						y="5"
+						width="14"
+						height="10"
+						stroke="currentColor"
+						stroke-width="2"
+						fill="none"
+						rx="1"
+					/>
+					<circle cx="7" cy="9" r="1.5" stroke="currentColor" stroke-width="2" fill="none" />
+					<path
+						d="M3 12L7 8L10 11L13 8L17 12"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						fill="none"
+					/>
+				</svg>
+				<span>Image</span>
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertGalleryPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="dropdown-icon">
+					<rect
+						x="2"
+						y="4"
+						width="12"
+						height="9"
+						stroke="currentColor"
+						stroke-width="2"
+						fill="none"
+						rx="1"
+					/>
+					<rect
+						x="6"
+						y="7"
+						width="12"
+						height="9"
+						stroke="currentColor"
+						stroke-width="2"
+						fill="none"
+						rx="1"
+					/>
+					<circle cx="6.5" cy="9.5" r="1" stroke="currentColor" stroke-width="1.5" fill="none" />
+					<path
+						d="M6 12L8 10L10 12L12 10L15 13"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						fill="none"
+					/>
+				</svg>
+				<span>Gallery</span>
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertVideoPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="dropdown-icon">
+					<rect
+						x="3"
+						y="4"
+						width="14"
+						height="12"
+						stroke="currentColor"
+						stroke-width="2"
+						fill="none"
+						rx="2"
+					/>
+					<path d="M8 8.5L12 10L8 11.5V8.5Z" fill="currentColor" />
+				</svg>
+				<span>Video</span>
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().insertAudioPlaceholder().run()
+					showMediaDropdown = false
+				}}
+			>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="dropdown-icon">
+					<path
+						d="M10 4L10 16M6 8L6 12M14 8L14 12M2 6L2 14M18 6L18 14"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+				<span>Audio</span>
+			</button>
+		</div>
+	</div>
+{/if}
+
+<!-- Dropdown Menu Portal -->
+{#if showTextStyleDropdown}
+	<div
+		class="dropdown-menu-portal"
+		style="position: fixed; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; z-index: 10000;"
+	>
+		<div class="dropdown-menu">
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().setParagraph().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Paragraph
+			</button>
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleHeading({ level: 1 }).run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Heading 1
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleHeading({ level: 2 }).run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Heading 2
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleHeading({ level: 3 }).run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Heading 3
+			</button>
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleBulletList().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Unordered List
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleOrderedList().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Ordered List
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleTaskList().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Task List
+			</button>
+			<div class="dropdown-separator"></div>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleCodeBlock().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Code Block
+			</button>
+			<button
+				class="dropdown-item"
+				onclick={() => {
+					editor?.chain().focus().toggleBlockquote().run()
+					showTextStyleDropdown = false
+				}}
+			>
+				Blockquote
+			</button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.edra {
+		width: 100%;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.editor-toolbar {
+		background: var(--edra-button-bg-color);
+		box-sizing: border-box;
+		padding: 0.5rem;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		overflow-x: auto;
+		overflow-y: hidden;
+		white-space: nowrap;
+		-webkit-overflow-scrolling: touch;
+		width: 100%;
+		flex-shrink: 0;
+	}
+
+	.edra-editor {
+		width: 100%;
+		flex: 1;
+		min-width: 0;
+		overflow-x: hidden;
+		box-sizing: border-box;
+	}
+
+	:global(.ProseMirror) {
+		width: 100%;
+		min-height: 100%;
+		position: relative;
+		word-wrap: break-word;
+		white-space: pre-wrap;
+		cursor: auto;
+		-webkit-font-variant-ligatures: none;
+		font-variant-ligatures: none;
+		&:focus {
+			outline: none;
+		}
+	}
+
+	/* Text Style Dropdown Styles */
+	.text-style-dropdown {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-trigger {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 6px 12px;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 8px;
+		font-size: 14px;
+		font-family: inherit;
+		color: var(--edra-text-color);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-width: 120px;
+		justify-content: space-between;
+		height: 36px;
+	}
+
+	.dropdown-trigger:hover {
+		background: rgba(0, 0, 0, 0.06);
+		border-color: transparent;
+	}
+
+	.dropdown-menu {
+		background: white;
+		border: 1px solid #e0e0e0;
+		border-radius: 8px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		min-width: 160px;
+		overflow: hidden;
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 8px 16px;
+		text-align: left;
+		background: none;
+		border: none;
+		font-size: 14px;
+		font-family: inherit;
+		color: var(--edra-text-color);
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.dropdown-item:hover {
+		background-color: #f5f5f5;
+	}
+
+	.dropdown-icon {
+		flex-shrink: 0;
+		width: 20px;
+		height: 20px;
+	}
+
+	.dropdown-separator {
+		height: 1px;
+		background-color: #e0e0e0;
+		margin: 4px 0;
+	}
+
+	/* Separator in toolbar */
+	:global(.edra-toolbar .separator) {
+		display: inline-block;
+		width: 2px;
+		height: 24px;
+		background-color: #e0e0e0;
+		border-radius: 1px;
+		margin: 0 4px;
+		vertical-align: middle;
+	}
+
+	/* Remove default button backgrounds */
+	:global(.edra-toolbar button) {
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 6px;
+		transition: all 0.2s ease;
+	}
+
+	:global(.edra-toolbar button:hover) {
+		background: rgba(0, 0, 0, 0.06);
+		border-color: transparent;
+	}
+
+	:global(.edra-toolbar button.active),
+	:global(.edra-toolbar button[data-active='true']) {
+		background: rgba(0, 0, 0, 0.1);
+		border-color: transparent;
+	}
+
+	/* Thicker strokes for icons */
+	:global(.edra-toolbar svg) {
+		stroke-width: 2;
+	}
+</style>
diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte
new file mode 100644
index 0000000..e1bbb53
--- /dev/null
+++ b/src/lib/components/admin/EssayForm.svelte
@@ -0,0 +1,545 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminPage from './AdminPage.svelte'
+	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
+	import Editor from './Editor.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import type { JSONContent } from '@tiptap/core'
+
+	interface Props {
+		postId?: number
+		initialData?: {
+			title: string
+			slug: string
+			content: JSONContent
+			tags: string[]
+			status: 'draft' | 'published'
+		}
+		mode: 'create' | 'edit'
+	}
+
+	let { postId, initialData, mode }: Props = $props()
+
+	// State
+	let isLoading = $state(false)
+	let isSaving = $state(false)
+	let error = $state('')
+	let successMessage = $state('')
+	let activeTab = $state('metadata')
+	let showPublishMenu = $state(false)
+
+	// Form data
+	let title = $state(initialData?.title || '')
+	let slug = $state(initialData?.slug || '')
+	let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
+	let tags = $state<string[]>(initialData?.tags || [])
+	let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
+	let tagInput = $state('')
+
+	// Ref to the editor component
+	let editorRef: any
+
+	const tabOptions = [
+		{ value: 'metadata', label: 'Metadata' },
+		{ value: 'content', label: 'Content' }
+	]
+
+	// Auto-generate slug from title
+	$effect(() => {
+		if (title && !slug) {
+			slug = title
+				.toLowerCase()
+				.replace(/[^a-z0-9]+/g, '-')
+				.replace(/^-+|-+$/g, '')
+		}
+	})
+
+	function addTag() {
+		if (tagInput && !tags.includes(tagInput)) {
+			tags = [...tags, tagInput]
+			tagInput = ''
+		}
+	}
+
+	function removeTag(tag: string) {
+		tags = tags.filter((t) => t !== tag)
+	}
+
+	function handleEditorChange(newContent: JSONContent) {
+		content = newContent
+	}
+
+	async function handleSave() {
+		// Check if we're on the content tab and should save editor content
+		if (activeTab === 'content' && editorRef) {
+			const editorData = await editorRef.save()
+			if (editorData) {
+				content = editorData
+			}
+		}
+
+		if (!title) {
+			error = 'Title is required'
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+			successMessage = ''
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const payload = {
+				title,
+				slug,
+				postType: 'blog', // 'blog' is the database value for essays
+				status,
+				content,
+				tags
+			}
+
+			const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
+			const method = mode === 'edit' ? 'PUT' : 'POST'
+
+			const response = await fetch(url, {
+				method,
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			})
+
+			if (!response.ok) {
+				throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} essay`)
+			}
+
+			const savedPost = await response.json()
+			successMessage = `Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`
+
+			setTimeout(() => {
+				successMessage = ''
+				if (mode === 'create') {
+					goto(`/admin/posts/${savedPost.id}/edit`)
+				}
+			}, 1500)
+		} catch (err) {
+			error = `Failed to ${mode === 'edit' ? 'save' : 'create'} essay`
+			console.error(err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+	async function handlePublish() {
+		status = 'published'
+		await handleSave()
+		showPublishMenu = false
+	}
+
+	async function handleUnpublish() {
+		status = 'draft'
+		await handleSave()
+		showPublishMenu = false
+	}
+
+	function togglePublishMenu() {
+		showPublishMenu = !showPublishMenu
+	}
+
+	// Close menu when clicking outside
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.save-actions')) {
+			showPublishMenu = false
+		}
+	}
+
+	$effect(() => {
+		if (showPublishMenu) {
+			document.addEventListener('click', handleClickOutside)
+			return () => {
+				document.removeEventListener('click', handleClickOutside)
+			}
+		}
+	})
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-left">
+			<Button variant="ghost" iconOnly onclick={() => goto('/admin/posts')}>
+				<svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</Button>
+		</div>
+		<div class="header-center">
+			<AdminSegmentedControl
+				options={tabOptions}
+				value={activeTab}
+				onChange={(value) => (activeTab = value)}
+			/>
+		</div>
+		<div class="header-actions">
+			<div class="save-actions">
+				<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
+					{isSaving ? 'Saving...' : status === 'published' ? 'Save' : 'Save Draft'}
+				</Button>
+				<Button
+					variant="primary"
+					iconOnly
+					buttonSize="medium"
+					active={showPublishMenu}
+					onclick={togglePublishMenu}
+					disabled={isSaving}
+					class="chevron-button"
+				>
+					<svg
+						slot="icon"
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M3 4.5L6 7.5L9 4.5"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</Button>
+				{#if showPublishMenu}
+					<div class="publish-menu">
+						{#if status === 'published'}
+							<Button variant="ghost" onclick={handleUnpublish} class="menu-item" fullWidth>
+								Unpublish
+							</Button>
+						{:else}
+							<Button variant="ghost" onclick={handlePublish} class="menu-item" fullWidth>
+								Publish
+							</Button>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</header>
+
+	<div class="admin-container">
+		{#if error}
+			<div class="error-message">{error}</div>
+		{/if}
+
+		{#if successMessage}
+			<div class="success-message">{successMessage}</div>
+		{/if}
+
+		<div class="tab-panels">
+			<!-- Metadata Panel -->
+			<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
+				<div class="form-content">
+					<form
+						onsubmit={(e) => {
+							e.preventDefault()
+							handleSave()
+						}}
+					>
+						<div class="form-section">
+							<Input label="Title" bind:value={title} required placeholder="Essay title" />
+
+							<Input label="Slug" bind:value={slug} placeholder="essay-url-slug" />
+
+							<div class="tags-field">
+								<label class="input-label">Tags</label>
+								<div class="tag-input-wrapper">
+									<Input
+										bind:value={tagInput}
+										onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), addTag())}
+										placeholder="Add tags..."
+										wrapperClass="tag-input"
+									/>
+									<Button variant="secondary" buttonSize="small" type="button" onclick={addTag}>
+										Add
+									</Button>
+								</div>
+								{#if tags.length > 0}
+									<div class="tags">
+										{#each tags as tag}
+											<span class="tag">
+												{tag}
+												<Button
+													variant="ghost"
+													iconOnly
+													buttonSize="small"
+													onclick={() => removeTag(tag)}
+													aria-label="Remove {tag}"
+												>
+													×
+												</Button>
+											</span>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+
+			<!-- Content Panel -->
+			<div class="panel content-wrapper" class:active={activeTab === 'content'}>
+				<div class="editor-content">
+					<Editor
+						bind:this={editorRef}
+						bind:data={content}
+						onChange={handleEditorChange}
+						placeholder="Write your essay..."
+						minHeight={400}
+						autofocus={false}
+						class="essay-editor"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	header {
+		display: grid;
+		grid-template-columns: 250px 1fr 250px;
+		align-items: center;
+		width: 100%;
+		gap: $unit-2x;
+
+		.header-left {
+			width: 250px;
+		}
+
+		.header-center {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.header-actions {
+			width: 250px;
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
+
+	.admin-container {
+		width: 100%;
+		margin: 0 auto;
+		padding: 0 $unit-2x $unit-4x;
+		box-sizing: border-box;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x $unit-2x;
+		}
+	}
+
+	.save-actions {
+		position: relative;
+		display: flex;
+	}
+
+	// Custom styles for save/publish buttons to maintain grey color scheme
+	:global(.save-button.btn-primary) {
+		background-color: $grey-10;
+
+		&:hover:not(:disabled) {
+			background-color: $grey-20;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $grey-30;
+		}
+	}
+
+	.save-button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		padding-right: $unit-2x;
+	}
+
+	:global(.chevron-button.btn-primary) {
+		background-color: $grey-10;
+
+		&:hover:not(:disabled) {
+			background-color: $grey-20;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $grey-30;
+		}
+
+		&.active {
+			background-color: $grey-20;
+		}
+	}
+
+	.chevron-button {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+		border-left: 1px solid rgba(255, 255, 255, 0.2);
+
+		svg {
+			transition: transform 0.2s ease;
+		}
+
+		&.active svg {
+			transform: rotate(180deg);
+		}
+	}
+
+	.publish-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: $unit;
+		background: white;
+		border-radius: $unit;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		overflow: hidden;
+		min-width: 120px;
+		z-index: 100;
+
+		.menu-item {
+			text-align: left;
+		}
+	}
+
+	.tab-panels {
+		position: relative;
+
+		.panel {
+			display: none;
+			box-sizing: border-box;
+
+			&.active {
+				display: block;
+			}
+		}
+	}
+
+	.content-wrapper {
+		background: white;
+		border-radius: $unit-2x;
+		padding: 0;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.error-message,
+	.success-message {
+		padding: $unit-3x;
+		border-radius: $unit;
+		margin-bottom: $unit-4x;
+		max-width: 700px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.error-message {
+		background-color: #fee;
+		color: #d33;
+	}
+
+	.success-message {
+		background-color: #efe;
+		color: #363;
+	}
+
+	.form-section {
+		margin-bottom: $unit-6x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.form-content {
+		padding: $unit-4x;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x;
+		}
+	}
+
+	// Tags field styles
+	.tags-field {
+		margin-bottom: $unit-4x;
+
+		.input-label {
+			display: block;
+			margin-bottom: $unit;
+			font-size: 14px;
+			font-weight: 500;
+			color: $grey-20;
+		}
+	}
+
+	.tag-input-wrapper {
+		display: flex;
+		gap: $unit;
+
+		:global(.tag-input) {
+			flex: 1;
+		}
+	}
+
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+		margin-top: $unit-2x;
+	}
+
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: $unit $unit-2x;
+		background: $grey-90;
+		border-radius: 20px;
+		font-size: 0.875rem;
+		color: $grey-20;
+
+		:global(.btn) {
+			margin-left: 4px;
+			font-size: 1.125rem;
+			line-height: 1;
+		}
+	}
+
+	.editor-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
+
+		:global(.essay-editor) {
+			flex: 1;
+			overflow: auto;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/FormField.svelte b/src/lib/components/admin/FormField.svelte
new file mode 100644
index 0000000..f7fd76c
--- /dev/null
+++ b/src/lib/components/admin/FormField.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	interface Props {
+		label: string
+		name: string
+		type?: string
+		value?: any
+		placeholder?: string
+		required?: boolean
+		error?: string
+		helpText?: string
+		disabled?: boolean
+		onchange?: (e: Event) => void
+	}
+
+	let {
+		label,
+		name,
+		type = 'text',
+		value = $bindable(),
+		placeholder = '',
+		required = false,
+		error = '',
+		helpText = '',
+		disabled = false,
+		onchange
+	}: Props = $props()
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement | HTMLTextAreaElement
+		value = target.value
+		onchange?.(e)
+	}
+</script>
+
+<div class="form-field" class:has-error={!!error}>
+	<label for={name}>
+		{label}
+		{#if required}
+			<span class="required">*</span>
+		{/if}
+	</label>
+
+	{#if type === 'textarea'}
+		<textarea
+			id={name}
+			{name}
+			{value}
+			{placeholder}
+			{required}
+			{disabled}
+			onchange={handleChange}
+			rows="4"
+		/>
+	{:else}
+		<input
+			id={name}
+			{name}
+			{type}
+			{value}
+			{placeholder}
+			{required}
+			{disabled}
+			onchange={handleChange}
+		/>
+	{/if}
+
+	{#if error}
+		<div class="error-text">{error}</div>
+	{:else if helpText}
+		<div class="help-text">{helpText}</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.form-field {
+		margin-bottom: $unit-4x;
+
+		&.has-error {
+			input,
+			textarea {
+				border-color: #c33;
+			}
+		}
+	}
+
+	label {
+		display: block;
+		margin-bottom: $unit;
+		font-weight: 500;
+		color: $grey-20;
+
+		.required {
+			color: #c33;
+			margin-left: 2px;
+		}
+	}
+
+	input,
+	textarea {
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		border: 1px solid $grey-80;
+		border-radius: 6px;
+		font-size: 1rem;
+		font-family: inherit;
+		transition: border-color 0.2s ease;
+		background-color: white;
+
+		&:focus {
+			outline: none;
+			border-color: $primary-color;
+		}
+
+		&:disabled {
+			background-color: $grey-95;
+			cursor: not-allowed;
+		}
+	}
+
+	textarea {
+		resize: vertical;
+		min-height: 100px;
+	}
+
+	.error-text {
+		margin-top: $unit;
+		color: #c33;
+		font-size: 0.875rem;
+	}
+
+	.help-text {
+		margin-top: $unit;
+		color: $grey-40;
+		font-size: 0.875rem;
+	}
+</style>
diff --git a/src/lib/components/admin/FormFieldWrapper.svelte b/src/lib/components/admin/FormFieldWrapper.svelte
new file mode 100644
index 0000000..81f9313
--- /dev/null
+++ b/src/lib/components/admin/FormFieldWrapper.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	interface Props {
+		label: string
+		required?: boolean
+		helpText?: string
+		error?: string
+		children?: any
+	}
+
+	let { label, required = false, helpText, error, children }: Props = $props()
+</script>
+
+<div class="form-field" class:has-error={!!error}>
+	<label>
+		{label}
+		{#if required}
+			<span class="required">*</span>
+		{/if}
+	</label>
+
+	{#if helpText}
+		<p class="help-text">{helpText}</p>
+	{/if}
+
+	{@render children?.()}
+
+	{#if error}
+		<p class="error-text">{error}</p>
+	{/if}
+</div>
+
+<style lang="scss">
+	.form-field {
+		margin-bottom: $unit-3x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&.has-error {
+			:global(input),
+			:global(textarea) {
+				border-color: #c33;
+			}
+		}
+	}
+
+	label {
+		display: block;
+		margin-bottom: $unit;
+		font-weight: 500;
+		color: $grey-20;
+		font-size: 0.925rem;
+
+		.required {
+			color: #c33;
+			margin-left: 2px;
+		}
+	}
+
+	.error-text {
+		margin-top: $unit;
+		color: #c33;
+		font-size: 0.875rem;
+	}
+
+	.help-text {
+		margin-top: $unit;
+		color: $grey-40;
+		font-size: 0.875rem;
+	}
+</style>
diff --git a/src/lib/components/admin/GalleryManager.svelte b/src/lib/components/admin/GalleryManager.svelte
new file mode 100644
index 0000000..a047012
--- /dev/null
+++ b/src/lib/components/admin/GalleryManager.svelte
@@ -0,0 +1,646 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		label: string
+		value?: Media[]
+		maxItems?: number
+		required?: boolean
+		error?: string
+		showFileInfo?: boolean
+	}
+
+	let {
+		label,
+		value = $bindable([]),
+		maxItems,
+		required = false,
+		error,
+		showFileInfo = false
+	}: Props = $props()
+
+	let showModal = $state(false)
+	let draggedIndex = $state<number | null>(null)
+	let dragOverIndex = $state<number | null>(null)
+
+	function handleImagesSelect(media: Media[]) {
+		// Add new images to existing ones, avoiding duplicates
+		const existingIds = new Set(value.map((item) => item.id))
+		const newImages = media.filter((item) => !existingIds.has(item.id))
+
+		if (maxItems) {
+			const availableSlots = maxItems - value.length
+			value = [...value, ...newImages.slice(0, availableSlots)]
+		} else {
+			value = [...value, ...newImages]
+		}
+
+		showModal = false
+	}
+
+	function removeImage(index: number) {
+		value = value.filter((_, i) => i !== index)
+	}
+
+	function openModal() {
+		showModal = true
+	}
+
+	// Drag and Drop functionality
+	function handleDragStart(event: DragEvent, index: number) {
+		if (!event.dataTransfer) return
+
+		draggedIndex = index
+		event.dataTransfer.effectAllowed = 'move'
+		event.dataTransfer.setData('text/html', '')
+
+		// Add dragging class to the dragged element
+		const target = event.target as HTMLElement
+		target.style.opacity = '0.5'
+	}
+
+	function handleDragEnd(event: DragEvent) {
+		const target = event.target as HTMLElement
+		target.style.opacity = '1'
+
+		draggedIndex = null
+		dragOverIndex = null
+	}
+
+	function handleDragOver(event: DragEvent, index: number) {
+		event.preventDefault()
+		if (!event.dataTransfer) return
+
+		event.dataTransfer.dropEffect = 'move'
+		dragOverIndex = index
+	}
+
+	function handleDragLeave() {
+		dragOverIndex = null
+	}
+
+	function handleDrop(event: DragEvent, dropIndex: number) {
+		event.preventDefault()
+
+		if (draggedIndex === null || draggedIndex === dropIndex) {
+			return
+		}
+
+		// Reorder the array
+		const newValue = [...value]
+		const draggedItem = newValue[draggedIndex]
+
+		// Remove the dragged item
+		newValue.splice(draggedIndex, 1)
+
+		// Insert at the new position (adjust index if necessary)
+		const insertIndex = draggedIndex < dropIndex ? dropIndex - 1 : dropIndex
+		newValue.splice(insertIndex, 0, draggedItem)
+
+		value = newValue
+
+		// Reset drag state
+		draggedIndex = null
+		dragOverIndex = null
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+	}
+
+	// Computed properties
+	const hasImages = $derived(value.length > 0)
+	const canAddMore = $derived(!maxItems || value.length < maxItems)
+	const selectedIds = $derived(value.map((item) => item.id))
+	const itemsText = $derived(value.length === 1 ? '1 image' : `${value.length} images`)
+</script>
+
+<div class="gallery-manager">
+	<div class="header">
+		<label class="input-label">
+			{label}
+			{#if required}
+				<span class="required">*</span>
+			{/if}
+		</label>
+
+		{#if hasImages}
+			<span class="items-count">
+				{itemsText}
+				{#if maxItems}
+					of {maxItems} max
+				{/if}
+			</span>
+		{/if}
+	</div>
+
+	<!-- Gallery Grid -->
+	{#if hasImages}
+		<div class="gallery-grid" class:has-error={error}>
+			{#each value as item, index (item.id)}
+				<div
+					class="gallery-item"
+					class:drag-over={dragOverIndex === index}
+					draggable="true"
+					ondragstart={(e) => handleDragStart(e, index)}
+					ondragend={handleDragEnd}
+					ondragover={(e) => handleDragOver(e, index)}
+					ondragleave={handleDragLeave}
+					ondrop={(e) => handleDrop(e, index)}
+				>
+					<!-- Drag Handle -->
+					<div class="drag-handle">
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<circle cx="9" cy="12" r="1" fill="currentColor" />
+							<circle cx="9" cy="5" r="1" fill="currentColor" />
+							<circle cx="9" cy="19" r="1" fill="currentColor" />
+							<circle cx="15" cy="12" r="1" fill="currentColor" />
+							<circle cx="15" cy="5" r="1" fill="currentColor" />
+							<circle cx="15" cy="19" r="1" fill="currentColor" />
+						</svg>
+					</div>
+
+					<!-- Image -->
+					<div class="image-container">
+						{#if item.thumbnailUrl}
+							<img src={item.thumbnailUrl} alt={item.filename} />
+						{:else}
+							<div class="image-placeholder">
+								<svg
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<rect
+										x="3"
+										y="5"
+										width="18"
+										height="14"
+										rx="2"
+										stroke="currentColor"
+										stroke-width="2"
+									/>
+									<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+									<path
+										d="M3 16l5-5 3 3 4-4 4 4"
+										stroke="currentColor"
+										stroke-width="2"
+										fill="none"
+									/>
+								</svg>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Image Info -->
+					{#if showFileInfo}
+						<div class="image-info">
+							<p class="filename">{item.filename}</p>
+							<p class="file-size">{formatFileSize(item.size)}</p>
+						</div>
+					{/if}
+
+					<!-- Remove Button -->
+					<button
+						type="button"
+						class="remove-button"
+						onclick={() => removeImage(index)}
+						aria-label="Remove image"
+					>
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M6 6L18 18M6 18L18 6"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							/>
+						</svg>
+					</button>
+
+					<!-- Order Indicator -->
+					<div class="order-indicator">
+						{index + 1}
+					</div>
+				</div>
+			{/each}
+
+			<!-- Add More Button (if within grid) -->
+			{#if canAddMore}
+				<button type="button" class="add-more-item" onclick={openModal}>
+					<div class="add-icon">
+						<svg
+							width="32"
+							height="32"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M12 5v14m-7-7h14"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							/>
+						</svg>
+					</div>
+					<span>Add Images</span>
+				</button>
+			{/if}
+		</div>
+	{:else}
+		<!-- Empty State -->
+		<div class="empty-state" class:has-error={error}>
+			<div class="empty-content">
+				<div class="empty-icon">
+					<svg
+						width="48"
+						height="48"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect
+							x="3"
+							y="5"
+							width="18"
+							height="14"
+							rx="2"
+							stroke="currentColor"
+							stroke-width="1.5"
+						/>
+						<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+						<path d="M3 16l5-5 3 3 4-4 4 4" stroke="currentColor" stroke-width="1.5" fill="none" />
+					</svg>
+				</div>
+				<p class="empty-text">No images added yet</p>
+				<Button variant="primary" onclick={openModal}>
+					<svg
+						slot="icon"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M12 5v14m-7-7h14"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+					Add Images
+				</Button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Add More Button (outside grid) -->
+	{#if hasImages && canAddMore}
+		<div class="add-more-container">
+			<Button variant="ghost" onclick={openModal}>
+				<svg
+					slot="icon"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M12 5v14m-7-7h14"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+				Add More Images
+			</Button>
+		</div>
+	{/if}
+
+	<!-- Error Message -->
+	{#if error}
+		<p class="error-message">{error}</p>
+	{/if}
+
+	<!-- Help Text -->
+	{#if hasImages}
+		<p class="help-text">Drag and drop to reorder images</p>
+	{/if}
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={showModal}
+		mode="multiple"
+		fileType="image"
+		{selectedIds}
+		title="Add Images to Gallery"
+		confirmText="Add Selected Images"
+		onselect={handleImagesSelect}
+	/>
+</div>
+
+<style lang="scss">
+	.gallery-manager {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.input-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-20;
+
+		.required {
+			color: $red-60;
+			margin-left: $unit-half;
+		}
+	}
+
+	.items-count {
+		font-size: 0.75rem;
+		color: $grey-40;
+		font-weight: 500;
+	}
+
+	.gallery-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+		gap: $unit-2x;
+		padding: $unit-2x;
+		border: 1px solid $grey-85;
+		border-radius: $card-corner-radius;
+		background-color: $grey-97;
+
+		&.has-error {
+			border-color: $red-60;
+		}
+	}
+
+	.gallery-item {
+		position: relative;
+		aspect-ratio: 1;
+		border-radius: $card-corner-radius;
+		overflow: hidden;
+		cursor: move;
+		transition: all 0.2s ease;
+		background-color: white;
+		border: 1px solid $grey-90;
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+			.remove-button {
+				opacity: 1;
+			}
+		}
+
+		&.drag-over {
+			border-color: $blue-60;
+			background-color: rgba(59, 130, 246, 0.05);
+		}
+	}
+
+	.drag-handle {
+		position: absolute;
+		top: $unit-half;
+		left: $unit-half;
+		z-index: 3;
+		background-color: rgba(0, 0, 0, 0.6);
+		color: white;
+		padding: $unit-half;
+		border-radius: 4px;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		pointer-events: none;
+
+		.gallery-item:hover & {
+			opacity: 1;
+		}
+	}
+
+	.image-container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.image-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background-color: $grey-95;
+		color: $grey-60;
+	}
+
+	.image-info {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+		padding: $unit-2x $unit $unit;
+		color: white;
+
+		.filename {
+			margin: 0 0 $unit-fourth 0;
+			font-size: 0.75rem;
+			font-weight: 500;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.file-size {
+			margin: 0;
+			font-size: 0.625rem;
+			opacity: 0.8;
+		}
+	}
+
+	.remove-button {
+		position: absolute;
+		top: $unit-half;
+		right: $unit-half;
+		z-index: 3;
+		background-color: rgba(239, 68, 68, 0.9);
+		color: white;
+		border: none;
+		border-radius: 50%;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		opacity: 0;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background-color: $red-60;
+			transform: scale(1.1);
+		}
+	}
+
+	.order-indicator {
+		position: absolute;
+		top: $unit-half;
+		right: $unit-half;
+		z-index: 2;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: white;
+		font-size: 0.75rem;
+		font-weight: 600;
+		padding: $unit-fourth $unit-half;
+		border-radius: 12px;
+		min-width: 20px;
+		text-align: center;
+		line-height: 1;
+	}
+
+	.add-more-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		aspect-ratio: 1;
+		border: 2px dashed $grey-70;
+		border-radius: $card-corner-radius;
+		background-color: transparent;
+		color: $grey-50;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		font-size: 0.875rem;
+		font-weight: 500;
+
+		&:hover {
+			border-color: $blue-60;
+			color: $blue-60;
+			background-color: rgba(59, 130, 246, 0.05);
+		}
+	}
+
+	.add-icon {
+		color: inherit;
+	}
+
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		border: 2px dashed $grey-80;
+		border-radius: $card-corner-radius;
+		background-color: $grey-97;
+
+		&.has-error {
+			border-color: $red-60;
+		}
+	}
+
+	.empty-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit-2x;
+		text-align: center;
+		padding: $unit-4x;
+	}
+
+	.empty-icon {
+		color: $grey-60;
+	}
+
+	.empty-text {
+		margin: 0;
+		font-size: 0.875rem;
+		color: $grey-40;
+	}
+
+	.add-more-container {
+		display: flex;
+		justify-content: center;
+		padding-top: $unit;
+	}
+
+	.error-message {
+		margin: 0;
+		font-size: 0.75rem;
+		color: $red-60;
+	}
+
+	.help-text {
+		margin: 0;
+		font-size: 0.75rem;
+		color: $grey-50;
+		text-align: center;
+		font-style: italic;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 640px) {
+		.gallery-grid {
+			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+			gap: $unit;
+			padding: $unit;
+		}
+
+		.header {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: $unit;
+		}
+
+		.order-indicator {
+			font-size: 0.625rem;
+			padding: $unit-fourth $unit-half;
+		}
+
+		.remove-button {
+			opacity: 1; // Always visible on mobile
+		}
+
+		.image-info {
+			display: none; // Hide on mobile to save space
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/GalleryUploader.svelte b/src/lib/components/admin/GalleryUploader.svelte
new file mode 100644
index 0000000..10477b2
--- /dev/null
+++ b/src/lib/components/admin/GalleryUploader.svelte
@@ -0,0 +1,930 @@
+<script lang="ts">
+	import type { Media } from '@prisma/client'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import SmartImage from '../SmartImage.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import { authenticatedFetch } from '$lib/admin-auth'
+
+	interface Props {
+		label: string
+		value?: any[] // Changed from Media[] to any[] to be more flexible
+		onUpload: (media: any[]) => void
+		onReorder?: (media: any[]) => void
+		onRemove?: (item: any, index: number) => void // New callback for removals
+		maxItems?: number
+		allowAltText?: boolean
+		required?: boolean
+		error?: string
+		placeholder?: string
+		helpText?: string
+		showBrowseLibrary?: boolean
+		maxFileSize?: number // MB limit
+	}
+
+	let {
+		label,
+		value = $bindable([]),
+		onUpload,
+		onReorder,
+		onRemove,
+		maxItems = 20,
+		allowAltText = true,
+		required = false,
+		error,
+		placeholder = 'Drag and drop images here, or click to browse',
+		helpText,
+		showBrowseLibrary = false,
+		maxFileSize = 10
+	}: Props = $props()
+
+	// State
+	let isUploading = $state(false)
+	let uploadProgress = $state<Record<string, number>>({})
+	let uploadError = $state<string | null>(null)
+	let isDragOver = $state(false)
+	let fileInputElement: HTMLInputElement
+	let draggedIndex = $state<number | null>(null)
+	let draggedOverIndex = $state<number | null>(null)
+	let isMediaLibraryOpen = $state(false)
+
+	// Computed properties
+	const hasImages = $derived(value && value.length > 0)
+	const canAddMore = $derived(!maxItems || !value || value.length < maxItems)
+	const remainingSlots = $derived(maxItems ? maxItems - (value?.length || 0) : Infinity)
+
+	// File validation
+	function validateFile(file: File): string | null {
+		// Check file type
+		if (!file.type.startsWith('image/')) {
+			return 'Please select image files only'
+		}
+
+		// Check file size
+		const sizeMB = file.size / 1024 / 1024
+		if (sizeMB > maxFileSize) {
+			return `File size must be less than ${maxFileSize}MB`
+		}
+
+		return null
+	}
+
+	// Upload multiple files to server
+	async function uploadFiles(files: File[]): Promise<Media[]> {
+		const uploadPromises = files.map(async (file, index) => {
+			const formData = new FormData()
+			formData.append('file', file)
+
+			const response = await authenticatedFetch('/api/media/upload', {
+				method: 'POST',
+				body: formData
+			})
+
+			if (!response.ok) {
+				const errorData = await response.json()
+				throw new Error(errorData.error || `Upload failed for ${file.name}`)
+			}
+
+			return await response.json()
+		})
+
+		return Promise.all(uploadPromises)
+	}
+
+	// Handle file selection/drop
+	async function handleFiles(files: FileList) {
+		if (files.length === 0) return
+
+		// Validate files
+		const filesToUpload: File[] = []
+		const errors: string[] = []
+
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i]
+			const validationError = validateFile(file)
+
+			if (validationError) {
+				errors.push(`${file.name}: ${validationError}`)
+			} else if (filesToUpload.length < remainingSlots) {
+				filesToUpload.push(file)
+			} else {
+				errors.push(`${file.name}: Maximum ${maxItems} images allowed`)
+			}
+		}
+
+		if (errors.length > 0) {
+			uploadError = errors.join('\n')
+			return
+		}
+
+		if (filesToUpload.length === 0) return
+
+		uploadError = null
+		isUploading = true
+
+		try {
+			// Initialize progress tracking
+			const progressKeys = filesToUpload.map((file, index) => `${file.name}-${index}`)
+			uploadProgress = Object.fromEntries(progressKeys.map((key) => [key, 0]))
+
+			// Simulate progress for user feedback
+			const progressIntervals = progressKeys.map((key) => {
+				return setInterval(() => {
+					if (uploadProgress[key] < 90) {
+						uploadProgress[key] += Math.random() * 10
+						uploadProgress = { ...uploadProgress }
+					}
+				}, 100)
+			})
+
+			const uploadedMedia = await uploadFiles(filesToUpload)
+
+			// Clear progress intervals
+			progressIntervals.forEach((interval) => clearInterval(interval))
+
+			// Complete progress
+			progressKeys.forEach((key) => {
+				uploadProgress[key] = 100
+			})
+			uploadProgress = { ...uploadProgress }
+
+			// Brief delay to show completion
+			setTimeout(() => {
+				const newValue = [...(value || []), ...uploadedMedia]
+				value = newValue
+				// Only pass the newly uploaded media, not the entire gallery
+				onUpload(uploadedMedia)
+				isUploading = false
+				uploadProgress = {}
+			}, 500)
+		} catch (err) {
+			isUploading = false
+			uploadProgress = {}
+			uploadError = err instanceof Error ? err.message : 'Upload failed'
+		}
+	}
+
+	// Drag and drop handlers for file upload
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault()
+		isDragOver = true
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault()
+		isDragOver = false
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		isDragOver = false
+
+		const files = event.dataTransfer?.files
+		if (files) {
+			handleFiles(files)
+		}
+	}
+
+	// Click to browse handler
+	function handleBrowseClick() {
+		fileInputElement?.click()
+	}
+
+	function handleFileInputChange(event: Event) {
+		const target = event.target as HTMLInputElement
+		if (target.files) {
+			handleFiles(target.files)
+		}
+	}
+
+	// Remove individual image - now passes the item to be removed instead of doing it locally
+	function handleRemoveImage(index: number) {
+		if (!value || !value[index]) return
+
+		const itemToRemove = value[index]
+		// Call the onRemove callback if provided, otherwise fall back to onUpload
+		if (onRemove) {
+			onRemove(itemToRemove, index)
+		} else {
+			// Fallback: remove locally and call onUpload
+			const newValue = value.filter((_, i) => i !== index)
+			value = newValue
+			onUpload(newValue)
+		}
+		uploadError = null
+	}
+
+	// Update alt text on server
+	async function handleAltTextChange(item: any, newAltText: string) {
+		if (!item) return
+
+		try {
+			// For album photos, use mediaId; for direct media objects, use id
+			const mediaId = item.mediaId || item.id
+			if (!mediaId) {
+				console.error('No media ID found for alt text update')
+				return
+			}
+
+			const response = await authenticatedFetch(`/api/media/${mediaId}/metadata`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					altText: newAltText.trim() || null
+				})
+			})
+
+			if (response.ok) {
+				const updatedData = await response.json()
+				if (value) {
+					const index = value.findIndex((v) => (v.mediaId || v.id) === mediaId)
+					if (index !== -1) {
+						value[index] = {
+							...value[index],
+							altText: updatedData.altText,
+							updatedAt: updatedData.updatedAt
+						}
+						value = [...value]
+					}
+				}
+			}
+		} catch (error) {
+			console.error('Failed to update alt text:', error)
+		}
+	}
+
+	// Drag and drop reordering handlers
+	function handleImageDragStart(event: DragEvent, index: number) {
+		draggedIndex = index
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move'
+		}
+	}
+
+	function handleImageDragOver(event: DragEvent, index: number) {
+		event.preventDefault()
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'move'
+		}
+		draggedOverIndex = index
+	}
+
+	function handleImageDragLeave() {
+		draggedOverIndex = null
+	}
+
+	function handleImageDrop(event: DragEvent, dropIndex: number) {
+		event.preventDefault()
+
+		if (draggedIndex === null || !value) return
+
+		const newValue = [...value]
+		const draggedItem = newValue[draggedIndex]
+
+		// Remove from old position
+		newValue.splice(draggedIndex, 1)
+
+		// Insert at new position (adjust index if dragging to later position)
+		const adjustedDropIndex = draggedIndex < dropIndex ? dropIndex - 1 : dropIndex
+		newValue.splice(adjustedDropIndex, 0, draggedItem)
+
+		value = newValue
+		onUpload(newValue)
+		if (onReorder) {
+			onReorder(newValue)
+		}
+
+		draggedIndex = null
+		draggedOverIndex = null
+	}
+
+	function handleImageDragEnd() {
+		draggedIndex = null
+		draggedOverIndex = null
+	}
+
+	// Browse library handler
+	function handleBrowseLibrary() {
+		isMediaLibraryOpen = true
+	}
+
+	function handleMediaSelect(selectedMedia: any | any[]) {
+		// For gallery mode, selectedMedia will be an array
+		const mediaArray = Array.isArray(selectedMedia) ? selectedMedia : [selectedMedia]
+
+		// Filter out duplicates before passing to parent
+		// Create a comprehensive set of existing IDs (both id and mediaId)
+		const existingIds = new Set()
+		value?.forEach((m) => {
+			if (m.id) existingIds.add(m.id)
+			if (m.mediaId) existingIds.add(m.mediaId)
+		})
+
+		// Filter out any media that already exists (check both id and potential mediaId)
+		const newMedia = mediaArray.filter((media) => {
+			return !existingIds.has(media.id) && !existingIds.has(media.mediaId)
+		})
+
+		if (newMedia.length > 0) {
+			// Don't modify the value array here - let the parent component handle it
+			// through the API calls and then update the bound value
+			onUpload(newMedia)
+		}
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+</script>
+
+<div class="gallery-uploader">
+	<!-- Upload Area -->
+	{#if !hasImages || (hasImages && canAddMore)}
+		<div
+			class="drop-zone"
+			class:drag-over={isDragOver}
+			class:uploading={isUploading}
+			class:has-error={!!uploadError}
+			ondragover={handleDragOver}
+			ondragleave={handleDragLeave}
+			ondrop={handleDrop}
+			onclick={handleBrowseClick}
+		>
+			{#if isUploading}
+				<!-- Upload Progress -->
+				<div class="upload-progress">
+					<svg class="upload-spinner" width="24" height="24" viewBox="0 0 24 24">
+						<circle
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							stroke-width="2"
+							fill="none"
+							stroke-dasharray="60"
+							stroke-dashoffset="60"
+							stroke-linecap="round"
+						>
+							<animateTransform
+								attributeName="transform"
+								type="rotate"
+								from="0 12 12"
+								to="360 12 12"
+								dur="1s"
+								repeatCount="indefinite"
+							/>
+						</circle>
+					</svg>
+					<p class="upload-text">Uploading images...</p>
+
+					<!-- Individual file progress -->
+					<div class="file-progress-list">
+						{#each Object.entries(uploadProgress) as [fileName, progress]}
+							<div class="file-progress-item">
+								<span class="file-name">{fileName.split('-')[0]}</span>
+								<div class="progress-bar">
+									<div class="progress-fill" style="width: {Math.round(progress)}%"></div>
+								</div>
+								<span class="progress-percent">{Math.round(progress)}%</span>
+							</div>
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<!-- Upload Prompt -->
+				<div class="upload-prompt">
+					<svg
+						class="upload-icon"
+						width="48"
+						height="48"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<polyline
+							points="14,2 14,8 20,8"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<line
+							x1="16"
+							y1="13"
+							x2="8"
+							y2="13"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+						<line
+							x1="16"
+							y1="17"
+							x2="8"
+							y2="17"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+						<polyline
+							points="10,9 9,9 8,9"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+					<p class="upload-main-text">{placeholder}</p>
+					<p class="upload-sub-text">
+						Supports JPG, PNG, GIF up to {maxFileSize}MB
+						{#if maxItems}
+							• Maximum {maxItems} images
+						{/if}
+						{#if hasImages && remainingSlots < Infinity}
+							• {remainingSlots} slots remaining
+						{/if}
+					</p>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Action Buttons -->
+	{#if !isUploading && canAddMore}
+		<div class="action-buttons">
+			<Button variant="primary" onclick={handleBrowseClick}>
+				{hasImages ? 'Add More Images' : 'Choose Images'}
+			</Button>
+
+			{#if showBrowseLibrary}
+				<Button variant="ghost" onclick={handleBrowseLibrary}>Browse Library</Button>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Image Gallery -->
+	{#if hasImages}
+		<div class="image-gallery">
+			{#each value as media, index (`${media.mediaId || media.id || index}`)}
+				<div
+					class="gallery-item"
+					class:dragging={draggedIndex === index}
+					class:drag-over={draggedOverIndex === index}
+					draggable="true"
+					ondragstart={(e) => handleImageDragStart(e, index)}
+					ondragover={(e) => handleImageDragOver(e, index)}
+					ondragleave={handleImageDragLeave}
+					ondrop={(e) => handleImageDrop(e, index)}
+					ondragend={handleImageDragEnd}
+				>
+					<!-- Drag Handle -->
+					<div class="drag-handle">
+						<svg
+							width="12"
+							height="12"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<circle cx="9" cy="6" r="2" fill="currentColor" />
+							<circle cx="15" cy="6" r="2" fill="currentColor" />
+							<circle cx="9" cy="12" r="2" fill="currentColor" />
+							<circle cx="15" cy="12" r="2" fill="currentColor" />
+							<circle cx="9" cy="18" r="2" fill="currentColor" />
+							<circle cx="15" cy="18" r="2" fill="currentColor" />
+						</svg>
+					</div>
+
+					<!-- Image Preview -->
+					<div class="image-preview">
+						<SmartImage
+							media={{
+								id: media.mediaId || media.id,
+								filename: media.filename,
+								originalName: media.originalName || media.filename,
+								mimeType: media.mimeType || 'image/jpeg',
+								size: media.size || 0,
+								url: media.url,
+								thumbnailUrl: media.thumbnailUrl,
+								width: media.width,
+								height: media.height,
+								altText: media.altText,
+								description: media.description,
+								isPhotography: media.isPhotography || false,
+								createdAt: media.createdAt,
+								updatedAt: media.updatedAt
+							}}
+							alt={media.altText || media.filename || 'Gallery image'}
+							containerWidth={300}
+							loading="lazy"
+							aspectRatio="1:1"
+							class="gallery-image"
+						/>
+
+						<!-- Remove Button -->
+						<button
+							class="remove-button"
+							onclick={() => handleRemoveImage(index)}
+							type="button"
+							aria-label="Remove image"
+						>
+							<svg
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<line
+									x1="18"
+									y1="6"
+									x2="6"
+									y2="18"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<line
+									x1="6"
+									y1="6"
+									x2="18"
+									y2="18"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</button>
+					</div>
+
+					<!-- Alt Text Input -->
+					{#if allowAltText}
+						<div class="alt-text-input">
+							<Input
+								type="text"
+								label="Alt Text"
+								value={media.altText || ''}
+								placeholder="Describe this image"
+								buttonSize="small"
+								onblur={(e) => handleAltTextChange(media, e.target.value)}
+							/>
+						</div>
+					{/if}
+
+					<!-- File Info -->
+					<div class="file-info">
+						<p class="filename">{media.originalName || media.filename}</p>
+						<p class="file-meta">
+							{Math.round((media.size || 0) / 1024)} KB
+							{#if media.width && media.height}
+								• {media.width}×{media.height}
+							{/if}
+						</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Error Message -->
+	{#if error || uploadError}
+		<p class="error-message">{error || uploadError}</p>
+	{/if}
+
+	<!-- Hidden File Input -->
+	<input
+		bind:this={fileInputElement}
+		type="file"
+		accept="image/*"
+		multiple
+		style="display: none;"
+		onchange={handleFileInputChange}
+	/>
+</div>
+
+<!-- Media Library Modal -->
+<MediaLibraryModal
+	bind:isOpen={isMediaLibraryOpen}
+	mode="multiple"
+	fileType="image"
+	title="Select Images"
+	confirmText="Add Selected"
+	onSelect={handleMediaSelect}
+	onClose={handleMediaLibraryClose}
+/>
+
+<style lang="scss">
+	.gallery-uploader {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.uploader-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-20;
+
+		.required {
+			color: $red-60;
+			margin-left: $unit-half;
+		}
+	}
+
+	.help-text {
+		margin: 0;
+		font-size: 0.8rem;
+		color: $grey-40;
+		line-height: 1.4;
+	}
+
+	// Drop Zone Styles
+	.drop-zone {
+		border: 2px dashed $grey-80;
+		border-radius: $card-corner-radius;
+		background-color: $grey-97;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-height: 120px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+
+		&:hover {
+			border-color: $blue-60;
+			background-color: rgba($blue-60, 0.02);
+		}
+
+		&.drag-over {
+			border-color: $blue-60;
+			background-color: rgba($blue-60, 0.05);
+			border-style: solid;
+		}
+
+		&.uploading {
+			cursor: default;
+			border-color: $blue-60;
+		}
+
+		&.has-error {
+			border-color: $red-60;
+			background-color: rgba($red-60, 0.02);
+		}
+	}
+
+	.upload-prompt {
+		text-align: center;
+		padding: $unit-3x;
+
+		.upload-icon {
+			color: $grey-50;
+			margin-bottom: $unit-2x;
+		}
+
+		.upload-main-text {
+			margin: 0 0 $unit 0;
+			font-size: 0.875rem;
+			color: $grey-30;
+			font-weight: 500;
+		}
+
+		.upload-sub-text {
+			margin: 0;
+			font-size: 0.75rem;
+			color: $grey-50;
+		}
+	}
+
+	.upload-progress {
+		text-align: center;
+		padding: $unit-3x;
+
+		.upload-spinner {
+			color: $blue-60;
+			margin-bottom: $unit-2x;
+		}
+
+		.upload-text {
+			margin: 0 0 $unit-2x 0;
+			font-size: 0.875rem;
+			color: $grey-30;
+			font-weight: 500;
+		}
+
+		.file-progress-list {
+			display: flex;
+			flex-direction: column;
+			gap: $unit;
+			max-width: 300px;
+			margin: 0 auto;
+		}
+
+		.file-progress-item {
+			display: flex;
+			align-items: center;
+			gap: $unit;
+			font-size: 0.75rem;
+
+			.file-name {
+				flex: 1;
+				color: $grey-30;
+				text-align: left;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.progress-bar {
+				width: 60px;
+				height: 4px;
+				background-color: $grey-90;
+				border-radius: 2px;
+				overflow: hidden;
+
+				.progress-fill {
+					height: 100%;
+					background-color: $blue-60;
+					transition: width 0.3s ease;
+				}
+			}
+
+			.progress-percent {
+				width: 30px;
+				text-align: right;
+				color: $grey-40;
+				font-size: 0.7rem;
+			}
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+	}
+
+	// Image Gallery Styles
+	.image-gallery {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		gap: $unit-3x;
+		margin-top: $unit-2x;
+	}
+
+	.gallery-item {
+		position: relative;
+		border: 1px solid $grey-90;
+		border-radius: $card-corner-radius;
+		background-color: white;
+		overflow: hidden;
+		transition: all 0.2s ease;
+
+		&:hover {
+			border-color: $grey-70;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+		}
+
+		&.dragging {
+			opacity: 0.5;
+			transform: scale(0.95);
+		}
+
+		&.drag-over {
+			border-color: $blue-60;
+			background-color: rgba($blue-60, 0.05);
+		}
+
+		.drag-handle {
+			position: absolute;
+			top: $unit;
+			left: $unit;
+			z-index: 2;
+			background: rgba(255, 255, 255, 0.9);
+			border-radius: 4px;
+			padding: $unit-half;
+			cursor: grab;
+			color: $grey-40;
+			opacity: 0;
+			transition: opacity 0.2s ease;
+
+			&:active {
+				cursor: grabbing;
+			}
+		}
+
+		&:hover .drag-handle {
+			opacity: 1;
+		}
+	}
+
+	.image-preview {
+		position: relative;
+		aspect-ratio: 1;
+		overflow: hidden;
+
+		:global(.gallery-image) {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			display: block;
+		}
+
+		.remove-button {
+			position: absolute;
+			top: $unit;
+			right: $unit;
+			background: rgba(255, 255, 255, 0.9);
+			border: none;
+			border-radius: 50%;
+			width: 28px;
+			height: 28px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			color: $grey-40;
+			opacity: 0;
+			transition: all 0.2s ease;
+
+			&:hover {
+				background: white;
+				color: $red-60;
+				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+			}
+		}
+
+		&:hover .remove-button {
+			opacity: 1;
+		}
+	}
+
+	.alt-text-input {
+		padding: $unit-2x;
+	}
+
+	.file-info {
+		padding: $unit-2x;
+		padding-top: $unit;
+		border-top: 1px solid $grey-95;
+
+		.filename {
+			margin: 0 0 $unit-half 0;
+			font-size: 0.75rem;
+			font-weight: 500;
+			color: $grey-10;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.file-meta {
+			margin: 0;
+			font-size: 0.7rem;
+			color: $grey-40;
+		}
+	}
+
+	.error-message {
+		margin: 0;
+		font-size: 0.75rem;
+		color: $red-60;
+		padding: $unit;
+		background-color: rgba($red-60, 0.05);
+		border-radius: $card-corner-radius;
+		border: 1px solid rgba($red-60, 0.2);
+		white-space: pre-line;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 640px) {
+		.image-gallery {
+			grid-template-columns: 1fr;
+		}
+
+		.upload-prompt {
+			padding: $unit-2x;
+
+			.upload-main-text {
+				font-size: 0.8rem;
+			}
+		}
+
+		.action-buttons {
+			flex-direction: column;
+			align-items: stretch;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/GenericMetadataPopover.svelte b/src/lib/components/admin/GenericMetadataPopover.svelte
new file mode 100644
index 0000000..224eb68
--- /dev/null
+++ b/src/lib/components/admin/GenericMetadataPopover.svelte
@@ -0,0 +1,465 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import Input from './Input.svelte'
+	import FormFieldWrapper from './FormFieldWrapper.svelte'
+	import Button from './Button.svelte'
+
+	export interface MetadataField {
+		type: 'input' | 'textarea' | 'date' | 'toggle' | 'tags' | 'metadata' | 'custom' | 'section'
+		key: string
+		label?: string
+		placeholder?: string
+		rows?: number
+		helpText?: string
+		component?: any // For custom components
+		props?: any // Additional props for custom components
+	}
+
+	export interface MetadataConfig {
+		title: string
+		fields: MetadataField[]
+		deleteButton?: {
+			label: string
+			action: () => void
+		}
+	}
+
+	type Props = {
+		config: MetadataConfig
+		data: any
+		triggerElement: HTMLElement
+		onUpdate?: (key: string, value: any) => void
+		onAddTag?: () => void
+		onRemoveTag?: (tag: string) => void
+		onClose?: () => void
+	}
+
+	let {
+		config,
+		data = $bindable(),
+		triggerElement,
+		onUpdate = () => {},
+		onAddTag = () => {},
+		onRemoveTag = () => {},
+		onClose = () => {}
+	}: Props = $props()
+
+	let popoverElement: HTMLDivElement
+	let portalTarget: HTMLElement
+
+	function updatePosition() {
+		if (!popoverElement || !triggerElement) return
+
+		const triggerRect = triggerElement.getBoundingClientRect()
+		const popoverRect = popoverElement.getBoundingClientRect()
+		const viewportWidth = window.innerWidth
+		const viewportHeight = window.innerHeight
+
+		// Find the AdminPage container to align with its right edge
+		const adminPage =
+			document.querySelector('.admin-page') || document.querySelector('[data-admin-page]')
+		const adminPageRect = adminPage?.getBoundingClientRect()
+
+		// Position below the trigger button
+		let top = triggerRect.bottom + 8
+
+		// Align closer to the right edge of AdminPage, with some padding
+		let left: number
+		if (adminPageRect) {
+			// Position to align with AdminPage right edge minus padding
+			left = adminPageRect.right - popoverRect.width - 24
+		} else {
+			// Fallback to viewport-based positioning
+			left = triggerRect.right - popoverRect.width
+		}
+
+		// Ensure we don't go off-screen horizontally
+		if (left < 16) {
+			left = 16
+		} else if (left + popoverRect.width > viewportWidth - 16) {
+			left = viewportWidth - popoverRect.width - 16
+		}
+
+		// Check if popover would go off-screen vertically (both top and bottom)
+		if (top + popoverRect.height > viewportHeight - 16) {
+			// Try positioning above the trigger
+			const topAbove = triggerRect.top - popoverRect.height - 8
+			if (topAbove >= 16) {
+				top = topAbove
+			} else {
+				// If neither above nor below works, position with maximum available space
+				if (triggerRect.top > viewportHeight - triggerRect.bottom) {
+					// More space above - position at top of viewport with margin
+					top = 16
+				} else {
+					// More space below - position at bottom of viewport with margin
+					top = viewportHeight - popoverRect.height - 16
+				}
+			}
+		}
+
+		// Also check if positioning below would place us off the top (shouldn't happen but be safe)
+		if (top < 16) {
+			top = 16
+		}
+
+		popoverElement.style.position = 'fixed'
+		popoverElement.style.top = `${top}px`
+		popoverElement.style.left = `${left}px`
+		popoverElement.style.zIndex = '1000'
+	}
+
+	function handleFieldUpdate(key: string, value: any) {
+		data[key] = value
+		onUpdate(key, value)
+	}
+
+	onMount(() => {
+		// Create portal target
+		portalTarget = document.createElement('div')
+		portalTarget.style.position = 'absolute'
+		portalTarget.style.top = '0'
+		portalTarget.style.left = '0'
+		portalTarget.style.pointerEvents = 'none'
+		document.body.appendChild(portalTarget)
+
+		// Initial positioning
+		updatePosition()
+
+		// Update position on scroll/resize
+		const handleUpdate = () => updatePosition()
+		window.addEventListener('scroll', handleUpdate, true)
+		window.addEventListener('resize', handleUpdate)
+
+		// Click outside handler
+		const handleClickOutside = (event: MouseEvent) => {
+			const target = event.target as Node
+			// Don't close if clicking inside the trigger button or the popover itself
+			if (triggerElement?.contains(target) || popoverElement?.contains(target)) {
+				return
+			}
+			onClose()
+		}
+
+		// Add click outside listener
+		document.addEventListener('click', handleClickOutside)
+
+		return () => {
+			window.removeEventListener('scroll', handleUpdate, true)
+			window.removeEventListener('resize', handleUpdate)
+			document.removeEventListener('click', handleClickOutside)
+			if (portalTarget) {
+				document.body.removeChild(portalTarget)
+			}
+		}
+	})
+
+	$effect(() => {
+		if (popoverElement && portalTarget && triggerElement) {
+			portalTarget.appendChild(popoverElement)
+			portalTarget.style.pointerEvents = 'auto'
+			updatePosition()
+		}
+	})
+</script>
+
+<div class="metadata-popover" bind:this={popoverElement}>
+	<div class="popover-content">
+		<h3>{config.title}</h3>
+
+		{#each config.fields as field}
+			{#if field.type === 'input'}
+				<Input
+					label={field.label}
+					bind:value={data[field.key]}
+					placeholder={field.placeholder}
+					helpText={field.helpText}
+					onchange={() => handleFieldUpdate(field.key, data[field.key])}
+				/>
+			{:else if field.type === 'textarea'}
+				<Input
+					type="textarea"
+					label={field.label}
+					bind:value={data[field.key]}
+					rows={field.rows || 3}
+					placeholder={field.placeholder}
+					helpText={field.helpText}
+					onchange={() => handleFieldUpdate(field.key, data[field.key])}
+				/>
+			{:else if field.type === 'date'}
+				<Input
+					type="date"
+					label={field.label}
+					bind:value={data[field.key]}
+					helpText={field.helpText}
+					onchange={() => handleFieldUpdate(field.key, data[field.key])}
+				/>
+			{:else if field.type === 'toggle'}
+				<div class="toggle-wrapper">
+					<label class="toggle-label">
+						<input
+							type="checkbox"
+							bind:checked={data[field.key]}
+							class="toggle-input"
+							onchange={() => handleFieldUpdate(field.key, data[field.key])}
+						/>
+						<span class="toggle-slider"></span>
+						<div class="toggle-content">
+							<span class="toggle-title">{field.label}</span>
+							{#if field.helpText}
+								<span class="toggle-description">{field.helpText}</span>
+							{/if}
+						</div>
+					</label>
+				</div>
+			{:else if field.type === 'tags'}
+				<div class="tags-section">
+					<Input
+						label={field.label}
+						bind:value={data.tagInput}
+						onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), onAddTag())}
+						placeholder={field.placeholder || 'Add tags...'}
+					/>
+					<button type="button" onclick={onAddTag} class="add-tag-btn">Add</button>
+
+					{#if data[field.key] && data[field.key].length > 0}
+						<div class="tags">
+							{#each data[field.key] as tag}
+								<span class="tag">
+									{tag}
+									<button onclick={() => onRemoveTag(tag)}>×</button>
+								</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{:else if field.type === 'metadata'}
+				<div class="metadata">
+					<p>Created: {new Date(data.createdAt).toLocaleString()}</p>
+					<p>Updated: {new Date(data.updatedAt).toLocaleString()}</p>
+					{#if data.publishedAt}
+						<p>Published: {new Date(data.publishedAt).toLocaleString()}</p>
+					{/if}
+				</div>
+			{:else if field.type === 'section'}
+				<div class="section-header">
+					<h4>{field.label}</h4>
+				</div>
+			{:else if field.type === 'custom' && field.component}
+				<svelte:component this={field.component} {...field.props} bind:data />
+			{/if}
+		{/each}
+	</div>
+
+	{#if config.deleteButton}
+		<div class="popover-footer">
+			<Button variant="danger-text" pill={false} onclick={config.deleteButton.action}>
+				<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+					<path
+						d="M4 4L12 12M4 12L12 4"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				{config.deleteButton.label}
+			</Button>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.metadata-popover {
+		background: white;
+		border: 1px solid $grey-80;
+		border-radius: $card-corner-radius;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		min-width: 420px;
+		max-width: 480px;
+		max-height: calc(100vh - #{$unit-2x * 2});
+		display: flex;
+		flex-direction: column;
+		pointer-events: auto;
+		overflow-y: auto;
+	}
+
+	.popover-content {
+		padding: $unit-3x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+
+		h3 {
+			font-size: 1.125rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.popover-footer {
+		padding: $unit-3x;
+		border-top: 1px solid $grey-90;
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.section-header {
+		margin: $unit-3x 0 $unit 0;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		h4 {
+			display: block;
+			margin-bottom: $unit;
+			font-weight: 500;
+			color: $grey-20;
+			font-size: 0.925rem;
+		}
+	}
+
+	.tags-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.add-tag-btn {
+		align-self: flex-start;
+		margin-top: $unit-half;
+		padding: $unit $unit-2x;
+		background: $grey-10;
+		color: white;
+		border: none;
+		border-radius: 6px;
+		font-size: 13px;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+
+		&:hover {
+			background: $grey-20;
+		}
+	}
+
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+		margin-top: $unit;
+	}
+
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px $unit-2x;
+		background: $grey-80;
+		border-radius: 20px;
+		font-size: 0.75rem;
+
+		button {
+			background: none;
+			border: none;
+			color: $grey-40;
+			cursor: pointer;
+			padding: 0;
+			font-size: 1rem;
+			line-height: 1;
+
+			&:hover {
+				color: $grey-10;
+			}
+		}
+	}
+
+	.metadata {
+		font-size: 0.75rem;
+		color: $grey-40;
+
+		p {
+			margin: $unit-half 0;
+		}
+	}
+
+	.toggle-wrapper {
+		.toggle-label {
+			display: flex;
+			align-items: center;
+			gap: $unit-3x;
+			cursor: pointer;
+			user-select: none;
+		}
+
+		.toggle-input {
+			position: absolute;
+			opacity: 0;
+			pointer-events: none;
+
+			&:checked + .toggle-slider {
+				background-color: $blue-60;
+
+				&::before {
+					transform: translateX(20px);
+				}
+			}
+
+			&:disabled + .toggle-slider {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.toggle-slider {
+			position: relative;
+			width: 44px;
+			height: 24px;
+			background-color: $grey-80;
+			border-radius: 12px;
+			transition: background-color 0.2s ease;
+			flex-shrink: 0;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 2px;
+				width: 20px;
+				height: 20px;
+				background-color: white;
+				border-radius: 50%;
+				transition: transform 0.2s ease;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+			}
+		}
+
+		.toggle-content {
+			display: flex;
+			flex-direction: column;
+			gap: $unit-half;
+
+			.toggle-title {
+				font-weight: 500;
+				color: $grey-10;
+				font-size: 0.875rem;
+			}
+
+			.toggle-description {
+				font-size: 0.75rem;
+				color: $grey-50;
+				line-height: 1.4;
+			}
+		}
+	}
+
+	@include breakpoint('phone') {
+		.metadata-popover {
+			min-width: 280px;
+			max-width: calc(100vw - 2rem);
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ImagePicker.svelte b/src/lib/components/admin/ImagePicker.svelte
new file mode 100644
index 0000000..fc8affa
--- /dev/null
+++ b/src/lib/components/admin/ImagePicker.svelte
@@ -0,0 +1,401 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		label: string
+		value?: Media | null
+		aspectRatio?: string
+		placeholder?: string
+		required?: boolean
+		error?: string
+		showDimensions?: boolean
+	}
+
+	let {
+		label,
+		value = $bindable(),
+		aspectRatio,
+		placeholder = 'No image selected',
+		required = false,
+		error,
+		showDimensions = true
+	}: Props = $props()
+
+	let showModal = $state(false)
+	let isHovering = $state(false)
+
+	function handleImageSelect(media: Media) {
+		value = media
+		showModal = false
+	}
+
+	function handleClear() {
+		value = null
+	}
+
+	function openModal() {
+		showModal = true
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+	}
+
+	// Computed properties
+	const hasImage = $derived(value !== null && value !== undefined)
+	const selectedIds = $derived(hasImage ? [value!.id] : [])
+
+	// Calculate aspect ratio styles
+	const aspectRatioStyle = $derived(
+		!aspectRatio
+			? 'aspect-ratio: 16/9;'
+			: (() => {
+					const [width, height] = aspectRatio.split(':').map(Number)
+					return width && height ? `aspect-ratio: ${width}/${height};` : 'aspect-ratio: 16/9;'
+				})()
+	)
+</script>
+
+<div class="image-picker">
+	<label class="input-label">
+		{label}
+		{#if required}
+			<span class="required">*</span>
+		{/if}
+	</label>
+
+	<!-- Image Preview Area -->
+	<div
+		class="image-preview-container"
+		class:has-image={hasImage}
+		class:has-error={error}
+		style={aspectRatioStyle}
+		role="button"
+		tabindex="0"
+		onclick={openModal}
+		onkeydown={(e) => e.key === 'Enter' && openModal()}
+		onmouseenter={() => (isHovering = true)}
+		onmouseleave={() => (isHovering = false)}
+	>
+		{#if hasImage && value}
+			<!-- Image Display -->
+			<img src={value.url} alt={value.filename} class="preview-image" />
+
+			<!-- Hover Overlay -->
+			{#if isHovering}
+				<div class="image-overlay">
+					<div class="overlay-actions">
+						<Button variant="primary" onclick={openModal}>
+							<svg
+								slot="icon"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<path
+									d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+							Change
+						</Button>
+						<Button variant="ghost" onclick={handleClear}>
+							<svg
+								slot="icon"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M3 6h18m-2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+							Remove
+						</Button>
+					</div>
+				</div>
+			{/if}
+		{:else}
+			<!-- Empty State -->
+			<div class="empty-state">
+				<div class="empty-icon">
+					<svg
+						width="48"
+						height="48"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect
+							x="3"
+							y="5"
+							width="18"
+							height="14"
+							rx="2"
+							stroke="currentColor"
+							stroke-width="1.5"
+						/>
+						<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+						<path d="M3 16l5-5 3 3 4-4 4 4" stroke="currentColor" stroke-width="1.5" fill="none" />
+					</svg>
+				</div>
+				<p class="empty-text">{placeholder}</p>
+				<Button variant="ghost" onclick={openModal}>
+					<svg
+						slot="icon"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M12 5v14m-7-7h14"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+					Select Image
+				</Button>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Image Details -->
+	{#if hasImage && value}
+		<div class="image-details">
+			<div class="detail-row">
+				<span class="detail-label">Filename:</span>
+				<span class="detail-value">{value.filename}</span>
+			</div>
+			<div class="detail-row">
+				<span class="detail-label">Size:</span>
+				<span class="detail-value">{formatFileSize(value.size)}</span>
+			</div>
+			{#if showDimensions && value.width && value.height}
+				<div class="detail-row">
+					<span class="detail-label">Dimensions:</span>
+					<span class="detail-value">{value.width} × {value.height} px</span>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Error Message -->
+	{#if error}
+		<p class="error-message">{error}</p>
+	{/if}
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={showModal}
+		mode="single"
+		fileType="image"
+		{selectedIds}
+		title="Select Image"
+		confirmText="Select Image"
+		onselect={handleImageSelect}
+	/>
+</div>
+
+<style lang="scss">
+	.image-picker {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.input-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-20;
+
+		.required {
+			color: $red-60;
+			margin-left: $unit-half;
+		}
+	}
+
+	.image-preview-container {
+		position: relative;
+		width: 100%;
+		border: 2px dashed $grey-80;
+		border-radius: $card-corner-radius;
+		overflow: hidden;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		background-color: $grey-95;
+
+		&:hover {
+			border-color: $grey-60;
+		}
+
+		&:focus {
+			outline: none;
+			border-color: $blue-60;
+			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+		}
+
+		&.has-image {
+			border-style: solid;
+			border-color: $grey-80;
+			background-color: transparent;
+
+			&:hover {
+				border-color: $blue-60;
+			}
+		}
+
+		&.has-error {
+			border-color: $red-60;
+
+			&:focus {
+				border-color: $red-60;
+				box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+			}
+		}
+	}
+
+	.preview-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	.image-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		animation: fadeIn 0.2s ease forwards;
+	}
+
+	@keyframes fadeIn {
+		to {
+			opacity: 1;
+		}
+	}
+
+	.overlay-actions {
+		display: flex;
+		gap: $unit-2x;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: $unit-4x;
+		text-align: center;
+		height: 100%;
+		min-height: 200px;
+		gap: $unit-2x;
+	}
+
+	.empty-icon {
+		color: $grey-60;
+		margin-bottom: $unit;
+	}
+
+	.empty-text {
+		margin: 0;
+		font-size: 0.875rem;
+		color: $grey-40;
+		margin-bottom: $unit;
+	}
+
+	.image-details {
+		padding: $unit-2x;
+		background-color: $grey-95;
+		border-radius: $card-corner-radius;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+	}
+
+	.detail-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 0.875rem;
+	}
+
+	.detail-label {
+		font-weight: 500;
+		color: $grey-30;
+	}
+
+	.detail-value {
+		color: $grey-10;
+		text-align: right;
+		word-break: break-all;
+	}
+
+	.error-message {
+		margin: 0;
+		font-size: 0.75rem;
+		color: $red-60;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 640px) {
+		.empty-state {
+			padding: $unit-3x;
+			min-height: 150px;
+		}
+
+		.empty-icon svg {
+			width: 32px;
+			height: 32px;
+		}
+
+		.overlay-actions {
+			flex-direction: column;
+			gap: $unit;
+		}
+
+		.detail-row {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: $unit-half;
+		}
+
+		.detail-value {
+			text-align: left;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ImageUploadPlaceholder.svelte b/src/lib/components/admin/ImageUploadPlaceholder.svelte
new file mode 100644
index 0000000..ddc6c31
--- /dev/null
+++ b/src/lib/components/admin/ImageUploadPlaceholder.svelte
@@ -0,0 +1,296 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+	import Image from 'lucide-svelte/icons/image'
+	import Upload from 'lucide-svelte/icons/upload'
+	import Link from 'lucide-svelte/icons/link'
+	import Grid from 'lucide-svelte/icons/grid-3x3'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+
+	const { editor, deleteNode }: NodeViewProps = $props()
+
+	let fileInput: HTMLInputElement
+	let isDragging = $state(false)
+	let isMediaLibraryOpen = $state(false)
+	let isUploading = $state(false)
+
+	function handleBrowseLibrary(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		isMediaLibraryOpen = true
+	}
+
+	function handleDirectUpload(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		fileInput.click()
+	}
+
+	function handleMediaSelect(media: Media | Media[]) {
+		const selectedMedia = Array.isArray(media) ? media[0] : media
+		if (selectedMedia) {
+			// Set a reasonable default width (max 600px)
+			const displayWidth =
+				selectedMedia.width && selectedMedia.width > 600 ? 600 : selectedMedia.width
+
+			editor
+				.chain()
+				.focus()
+				.setImage({
+					src: selectedMedia.url,
+					alt: selectedMedia.altText || '',
+					width: displayWidth,
+					height: selectedMedia.height,
+					align: 'center'
+				})
+				.run()
+		}
+		isMediaLibraryOpen = false
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	async function handleFileSelect(e: Event) {
+		const target = e.target as HTMLInputElement
+		const file = target.files?.[0]
+		if (file) {
+			await uploadFile(file)
+		}
+		// Reset input
+		target.value = ''
+	}
+
+	async function uploadFile(file: File) {
+		// Check file type
+		if (!file.type.startsWith('image/')) {
+			alert('Please select an image file')
+			return
+		}
+
+		// Check file size (2MB max)
+		const filesize = file.size / 1024 / 1024
+		if (filesize > 2) {
+			alert(`Image too large! File size: ${filesize.toFixed(2)} MB (max 2MB)`)
+			return
+		}
+
+		isUploading = true
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				throw new Error('Not authenticated')
+			}
+
+			const formData = new FormData()
+			formData.append('file', file)
+			formData.append('type', 'image')
+
+			const response = await fetch('/api/media/upload', {
+				method: 'POST',
+				headers: {
+					Authorization: `Basic ${auth}`
+				},
+				body: formData
+			})
+
+			if (!response.ok) {
+				throw new Error('Upload failed')
+			}
+
+			const media = await response.json()
+
+			// Insert the uploaded image with reasonable default width
+			const displayWidth = media.width && media.width > 600 ? 600 : media.width
+
+			editor
+				.chain()
+				.focus()
+				.setImage({
+					src: media.url,
+					alt: media.altText || '',
+					width: displayWidth,
+					height: media.height,
+					align: 'center'
+				})
+				.run()
+		} catch (error) {
+			console.error('Image upload failed:', error)
+			alert('Failed to upload image. Please try again.')
+		} finally {
+			isUploading = false
+		}
+	}
+
+	// Drag and drop handlers
+	function handleDragOver(e: DragEvent) {
+		e.preventDefault()
+		e.stopPropagation()
+		isDragging = true
+	}
+
+	function handleDragLeave(e: DragEvent) {
+		e.preventDefault()
+		e.stopPropagation()
+		isDragging = false
+	}
+
+	async function handleDrop(e: DragEvent) {
+		e.preventDefault()
+		e.stopPropagation()
+		isDragging = false
+
+		const file = e.dataTransfer?.files[0]
+		if (file && file.type.startsWith('image/')) {
+			await uploadFile(file)
+		}
+	}
+
+	// Handle keyboard navigation
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			handleBrowseLibrary(e as any)
+		} else if (e.key === 'Escape') {
+			deleteNode()
+		}
+	}
+</script>
+
+<NodeViewWrapper class="edra-media-placeholder-wrapper" contenteditable="false">
+	<input
+		bind:this={fileInput}
+		type="file"
+		accept="image/*"
+		onchange={handleFileSelect}
+		style="display: none;"
+	/>
+
+	<div class="edra-image-placeholder-container">
+		{#if isUploading}
+			<div class="edra-image-placeholder-uploading">
+				<div class="spinner"></div>
+				<span>Uploading image...</span>
+			</div>
+		{:else}
+			<button
+				class="edra-image-placeholder-option"
+				onclick={handleDirectUpload}
+				onkeydown={handleKeyDown}
+				tabindex="0"
+				aria-label="Upload Image"
+				title="Upload from device"
+			>
+				<Upload class="edra-image-placeholder-icon" />
+				<span class="edra-image-placeholder-text">Upload Image</span>
+			</button>
+
+			<button
+				class="edra-image-placeholder-option"
+				onclick={handleBrowseLibrary}
+				onkeydown={handleKeyDown}
+				tabindex="0"
+				aria-label="Browse Media Library"
+				title="Choose from library"
+			>
+				<Grid class="edra-image-placeholder-icon" />
+				<span class="edra-image-placeholder-text">Browse Library</span>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={isMediaLibraryOpen}
+		mode="single"
+		fileType="image"
+		onSelect={handleMediaSelect}
+		onClose={handleMediaLibraryClose}
+	/>
+</NodeViewWrapper>
+
+<style>
+	.edra-image-placeholder-container {
+		display: flex;
+		gap: 12px;
+		padding: 24px;
+		border: 2px dashed #e5e7eb;
+		border-radius: 8px;
+		background: #f9fafb;
+		transition: all 0.2s ease;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.edra-image-placeholder-container:hover {
+		border-color: #d1d5db;
+		background: #f3f4f6;
+	}
+
+	.edra-image-placeholder-option {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 16px 20px;
+		border: 1px solid #e5e7eb;
+		border-radius: 6px;
+		background: white;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-width: 140px;
+	}
+
+	.edra-image-placeholder-option:hover {
+		border-color: #d1d5db;
+		background: #f9fafb;
+		transform: translateY(-1px);
+	}
+
+	.edra-image-placeholder-option:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
+
+	.edra-image-placeholder-uploading {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 20px;
+		color: #6b7280;
+	}
+
+	.spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid #f3f4f6;
+		border-top: 2px solid #3b82f6;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	:global(.edra-image-placeholder-icon) {
+		width: 28px;
+		height: 28px;
+		color: #6b7280;
+	}
+
+	.edra-image-placeholder-text {
+		font-size: 14px;
+		color: #6b7280;
+		font-weight: 500;
+	}
+</style>
diff --git a/src/lib/components/admin/ImageUploader.svelte b/src/lib/components/admin/ImageUploader.svelte
new file mode 100644
index 0000000..17db29d
--- /dev/null
+++ b/src/lib/components/admin/ImageUploader.svelte
@@ -0,0 +1,856 @@
+<script lang="ts">
+	import type { Media } from '@prisma/client'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import SmartImage from '../SmartImage.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import { authenticatedFetch } from '$lib/admin-auth'
+	import RefreshIcon from '$icons/refresh.svg?component'
+
+	interface Props {
+		label: string
+		value?: Media | null
+		onUpload: (media: Media) => void
+		aspectRatio?: string // e.g., "16:9", "1:1"
+		required?: boolean
+		error?: string
+		allowAltText?: boolean
+		maxFileSize?: number // MB limit
+		placeholder?: string
+		helpText?: string
+		showBrowseLibrary?: boolean // Show secondary "Browse Library" button
+		compact?: boolean // Use compact layout with smaller preview and side-by-side alt text
+	}
+
+	let {
+		label,
+		value = $bindable(),
+		onUpload,
+		aspectRatio,
+		required = false,
+		error,
+		allowAltText = true,
+		maxFileSize = 10,
+		placeholder = 'Drag and drop an image here, or click to browse',
+		helpText,
+		showBrowseLibrary = false,
+		compact = false
+	}: Props = $props()
+
+	// State
+	let isUploading = $state(false)
+	let uploadProgress = $state(0)
+	let uploadError = $state<string | null>(null)
+	let isDragOver = $state(false)
+	let fileInputElement: HTMLInputElement
+	let altTextValue = $state(value?.altText || '')
+	let descriptionValue = $state(value?.description || '')
+	let isMediaLibraryOpen = $state(false)
+
+	// Computed properties
+	const hasValue = $derived(!!value)
+	const aspectRatioStyle = $derived(() => {
+		if (!aspectRatio) return ''
+		const [w, h] = aspectRatio.split(':').map(Number)
+		const ratio = (h / w) * 100
+		return `aspect-ratio: ${w}/${h}; padding-bottom: ${ratio}%;`
+	})
+
+	// File validation
+	function validateFile(file: File): string | null {
+		// Check file type
+		if (!file.type.startsWith('image/')) {
+			return 'Please select an image file'
+		}
+
+		// Check file size
+		const sizeMB = file.size / 1024 / 1024
+		if (sizeMB > maxFileSize) {
+			return `File size must be less than ${maxFileSize}MB`
+		}
+
+		return null
+	}
+
+	// Upload file to server
+	async function uploadFile(file: File): Promise<Media> {
+		const formData = new FormData()
+		formData.append('file', file)
+
+		if (allowAltText && altTextValue.trim()) {
+			formData.append('altText', altTextValue.trim())
+		}
+
+		if (allowAltText && descriptionValue.trim()) {
+			formData.append('description', descriptionValue.trim())
+		}
+
+		const response = await authenticatedFetch('/api/media/upload', {
+			method: 'POST',
+			body: formData
+		})
+
+		if (!response.ok) {
+			const errorData = await response.json()
+			throw new Error(errorData.error || 'Upload failed')
+		}
+
+		return await response.json()
+	}
+
+	// Handle file selection/drop
+	async function handleFiles(files: FileList) {
+		if (files.length === 0) return
+
+		const file = files[0]
+		const validationError = validateFile(file)
+
+		if (validationError) {
+			uploadError = validationError
+			return
+		}
+
+		uploadError = null
+		isUploading = true
+		uploadProgress = 0
+
+		try {
+			// Simulate progress for user feedback
+			const progressInterval = setInterval(() => {
+				if (uploadProgress < 90) {
+					uploadProgress += Math.random() * 10
+				}
+			}, 100)
+
+			const uploadedMedia = await uploadFile(file)
+
+			clearInterval(progressInterval)
+			uploadProgress = 100
+
+			// Brief delay to show completion
+			setTimeout(() => {
+				value = uploadedMedia
+				altTextValue = uploadedMedia.altText || ''
+				descriptionValue = uploadedMedia.description || ''
+				onUpload(uploadedMedia)
+				isUploading = false
+				uploadProgress = 0
+			}, 500)
+		} catch (err) {
+			isUploading = false
+			uploadProgress = 0
+			uploadError = err instanceof Error ? err.message : 'Upload failed'
+		}
+	}
+
+	// Drag and drop handlers
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault()
+		isDragOver = true
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault()
+		isDragOver = false
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		isDragOver = false
+
+		const files = event.dataTransfer?.files
+		if (files) {
+			handleFiles(files)
+		}
+	}
+
+	// Click to browse handler
+	function handleBrowseClick() {
+		fileInputElement?.click()
+	}
+
+	function handleFileInputChange(event: Event) {
+		const target = event.target as HTMLInputElement
+		if (target.files) {
+			handleFiles(target.files)
+		}
+	}
+
+	// Remove uploaded image
+	function handleRemove() {
+		value = null
+		altTextValue = ''
+		descriptionValue = ''
+		uploadError = null
+	}
+
+	// Update alt text on server
+	async function handleAltTextChange() {
+		if (!value) return
+
+		try {
+			const response = await authenticatedFetch(`/api/media/${value.id}/metadata`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					altText: altTextValue.trim() || null
+				})
+			})
+
+			if (response.ok) {
+				const updatedData = await response.json()
+				value = { ...value, altText: updatedData.altText, updatedAt: updatedData.updatedAt }
+			}
+		} catch (error) {
+			console.error('Failed to update alt text:', error)
+		}
+	}
+
+	async function handleDescriptionChange() {
+		if (!value) return
+
+		try {
+			const response = await authenticatedFetch(`/api/media/${value.id}/metadata`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					description: descriptionValue.trim() || null
+				})
+			})
+
+			if (response.ok) {
+				const updatedData = await response.json()
+				value = { ...value, description: updatedData.description, updatedAt: updatedData.updatedAt }
+			}
+		} catch (error) {
+			console.error('Failed to update description:', error)
+		}
+	}
+
+	// Browse library handler
+	function handleBrowseLibrary() {
+		isMediaLibraryOpen = true
+	}
+
+	function handleMediaSelect(selectedMedia: Media | Media[]) {
+		// Since this is single mode, selectedMedia will be a single Media object
+		const media = selectedMedia as Media
+		value = media
+		altTextValue = media.altText || ''
+		descriptionValue = media.description || ''
+		onUpload(media)
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+</script>
+
+<div class="image-uploader" class:compact>
+	<!-- Label -->
+	<label class="uploader-label">
+		{label}
+		{#if required}
+			<span class="required">*</span>
+		{/if}
+	</label>
+
+	{#if helpText}
+		<p class="help-text">{helpText}</p>
+	{/if}
+
+	<!-- Upload Area or Preview -->
+	<div class="upload-container">
+		{#if hasValue && !isUploading}
+			{#if compact}
+				<!-- Compact Layout: Image and metadata side-by-side -->
+				<div class="compact-preview">
+					<div class="compact-image">
+						<SmartImage
+							media={value}
+							alt={value?.altText || value?.filename || 'Uploaded image'}
+							containerWidth={100}
+							loading="eager"
+							{aspectRatio}
+							class="preview-image"
+						/>
+
+						<!-- Overlay with actions -->
+						<div class="preview-overlay">
+							<div class="preview-actions">
+								<Button variant="overlay" buttonSize="small" onclick={handleBrowseClick}>
+									<RefreshIcon slot="icon" width="12" height="12" />
+								</Button>
+
+								<Button variant="overlay" buttonSize="small" onclick={handleRemove}>
+									<svg
+										slot="icon"
+										width="12"
+										height="12"
+										viewBox="0 0 24 24"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<polyline
+											points="3,6 5,6 21,6"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+										<path
+											d="M19 6V20A2 2 0 0 1 17 22H7A2 2 0 0 1 5 20V6M8 6V4A2 2 0 0 1 10 2H14A2 2 0 0 1 16 4V6"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</Button>
+							</div>
+						</div>
+					</div>
+
+					<div class="compact-info">
+						<!-- Alt Text Input in compact mode -->
+						{#if allowAltText}
+							<div class="compact-metadata">
+								<Input
+									type="text"
+									label="Alt Text"
+									bind:value={altTextValue}
+									placeholder="Describe this image for screen readers"
+									buttonSize="small"
+									onblur={handleAltTextChange}
+								/>
+
+								<Input
+									type="textarea"
+									label="Description (Optional)"
+									bind:value={descriptionValue}
+									placeholder="Additional description or caption"
+									rows={2}
+									buttonSize="small"
+									onblur={handleDescriptionChange}
+								/>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{:else}
+				<!-- Standard Layout: Image preview -->
+				<div class="image-preview" style={aspectRatioStyle}>
+					<SmartImage
+						media={value}
+						alt={value?.altText || value?.filename || 'Uploaded image'}
+						containerWidth={800}
+						loading="eager"
+						{aspectRatio}
+						class="preview-image"
+					/>
+
+					<!-- Overlay with actions -->
+					<div class="preview-overlay">
+						<div class="preview-actions">
+							<Button variant="overlay" buttonSize="small" onclick={handleBrowseClick}>
+								<RefreshIcon slot="icon" width="16" height="16" />
+								Replace
+							</Button>
+
+							<Button variant="overlay" buttonSize="small" onclick={handleRemove}>
+								<svg
+									slot="icon"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<polyline
+										points="3,6 5,6 21,6"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+									<path
+										d="M19 6V20A2 2 0 0 1 17 22H7A2 2 0 0 1 5 20V6M8 6V4A2 2 0 0 1 10 2H14A2 2 0 0 1 16 4V6"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+								Remove
+							</Button>
+						</div>
+					</div>
+				</div>
+
+				<!-- File Info -->
+				<div class="file-info">
+					<p class="filename">{value?.originalName || value?.filename}</p>
+					<p class="file-meta">
+						{Math.round((value?.size || 0) / 1024)} KB
+						{#if value?.width && value?.height}
+							• {value.width}×{value.height}
+						{/if}
+					</p>
+				</div>
+			{/if}
+		{:else}
+			<!-- Upload Drop Zone -->
+			<div
+				class="drop-zone"
+				class:drag-over={isDragOver}
+				class:uploading={isUploading}
+				class:has-error={!!uploadError}
+				style={aspectRatioStyle}
+				ondragover={handleDragOver}
+				ondragleave={handleDragLeave}
+				ondrop={handleDrop}
+				onclick={handleBrowseClick}
+			>
+				{#if isUploading}
+					<!-- Upload Progress -->
+					<div class="upload-progress">
+						<svg class="upload-spinner" width="24" height="24" viewBox="0 0 24 24">
+							<circle
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="2"
+								fill="none"
+								stroke-dasharray="60"
+								stroke-dashoffset="60"
+								stroke-linecap="round"
+							>
+								<animateTransform
+									attributeName="transform"
+									type="rotate"
+									from="0 12 12"
+									to="360 12 12"
+									dur="1s"
+									repeatCount="indefinite"
+								/>
+							</circle>
+						</svg>
+						<p class="upload-text">Uploading... {Math.round(uploadProgress)}%</p>
+						<div class="progress-bar">
+							<div class="progress-fill" style="width: {uploadProgress}%"></div>
+						</div>
+					</div>
+				{:else}
+					<!-- Upload Prompt -->
+					<div class="upload-prompt">
+						<svg
+							class="upload-icon"
+							width="48"
+							height="48"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<polyline
+								points="14,2 14,8 20,8"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<line
+								x1="16"
+								y1="13"
+								x2="8"
+								y2="13"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							/>
+							<line
+								x1="16"
+								y1="17"
+								x2="8"
+								y2="17"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							/>
+							<polyline
+								points="10,9 9,9 8,9"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+						<p class="upload-main-text">{placeholder}</p>
+						<p class="upload-sub-text">
+							Supports JPG, PNG, GIF up to {maxFileSize}MB
+						</p>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Action Buttons -->
+	{#if !hasValue && !isUploading}
+		<div class="action-buttons">
+			<Button variant="primary" onclick={handleBrowseClick}>Choose File</Button>
+
+			{#if showBrowseLibrary}
+				<Button variant="ghost" onclick={handleBrowseLibrary}>Browse Library</Button>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Alt Text Input (only in standard mode, compact mode has it inline) -->
+	{#if allowAltText && hasValue && !compact}
+		<div class="metadata-section">
+			<Input
+				type="text"
+				label="Alt Text"
+				bind:value={altTextValue}
+				placeholder="Describe this image for screen readers"
+				helpText="Help make your content accessible. Describe what's in the image."
+				onblur={handleAltTextChange}
+			/>
+
+			<Input
+				type="textarea"
+				label="Description (Optional)"
+				bind:value={descriptionValue}
+				placeholder="Additional description or caption"
+				rows={2}
+				onblur={handleDescriptionChange}
+			/>
+		</div>
+	{/if}
+
+	<!-- Error Message -->
+	{#if error || uploadError}
+		<p class="error-message">{error || uploadError}</p>
+	{/if}
+
+	<!-- Hidden File Input -->
+	<input
+		bind:this={fileInputElement}
+		type="file"
+		accept="image/*"
+		style="display: none;"
+		onchange={handleFileInputChange}
+	/>
+</div>
+
+<!-- Media Library Modal -->
+<MediaLibraryModal
+	bind:isOpen={isMediaLibraryOpen}
+	mode="single"
+	fileType="image"
+	title="Select Image"
+	confirmText="Select Image"
+	onSelect={handleMediaSelect}
+	onClose={handleMediaLibraryClose}
+/>
+
+<style lang="scss">
+	.image-uploader {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+
+		&.compact {
+			gap: $unit;
+		}
+	}
+
+	.uploader-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-20;
+
+		.required {
+			color: $red-60;
+			margin-left: $unit-half;
+		}
+	}
+
+	.help-text {
+		margin: 0;
+		font-size: 0.8rem;
+		color: $grey-40;
+		line-height: 1.4;
+	}
+
+	.upload-container {
+		position: relative;
+	}
+
+	// Drop Zone Styles
+	.drop-zone {
+		border: 2px dashed $grey-80;
+		border-radius: $card-corner-radius;
+		background-color: $grey-97;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-height: 200px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+
+		&:hover {
+			border-color: $blue-60;
+			background-color: rgba($blue-60, 0.02);
+		}
+
+		&.drag-over {
+			border-color: $blue-60;
+			background-color: rgba($blue-60, 0.05);
+			border-style: solid;
+		}
+
+		&.uploading {
+			cursor: default;
+			border-color: $blue-60;
+		}
+
+		&.has-error {
+			border-color: $red-60;
+			background-color: rgba($red-60, 0.02);
+		}
+	}
+
+	.upload-prompt {
+		text-align: center;
+		padding: $unit-4x;
+
+		.upload-icon {
+			color: $grey-50;
+			margin-bottom: $unit-2x;
+		}
+
+		.upload-main-text {
+			margin: 0 0 $unit 0;
+			font-size: 0.875rem;
+			color: $grey-30;
+			font-weight: 500;
+		}
+
+		.upload-sub-text {
+			margin: 0;
+			font-size: 0.75rem;
+			color: $grey-50;
+		}
+	}
+
+	.upload-progress {
+		text-align: center;
+		padding: $unit-4x;
+
+		.upload-spinner {
+			color: $blue-60;
+			margin-bottom: $unit-2x;
+		}
+
+		.upload-text {
+			margin: 0 0 $unit-2x 0;
+			font-size: 0.875rem;
+			color: $grey-30;
+			font-weight: 500;
+		}
+
+		.progress-bar {
+			width: 200px;
+			height: 4px;
+			background-color: $grey-90;
+			border-radius: 2px;
+			overflow: hidden;
+			margin: 0 auto;
+
+			.progress-fill {
+				height: 100%;
+				background-color: $blue-60;
+				transition: width 0.3s ease;
+			}
+		}
+	}
+
+	// Image Preview Styles
+	.image-preview {
+		position: relative;
+		border-radius: $card-corner-radius;
+		overflow: hidden;
+		background-color: $grey-95;
+		min-height: 200px;
+
+		:global(.preview-image) {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			display: block;
+		}
+
+		.preview-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.5);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			opacity: 0;
+			transition: opacity 0.2s ease;
+		}
+
+		&:hover .preview-overlay {
+			opacity: 1;
+		}
+
+		.preview-actions {
+			display: flex;
+			gap: $unit;
+		}
+	}
+
+	.file-info {
+		margin-top: $unit-2x;
+
+		.filename {
+			margin: 0 0 $unit-half 0;
+			font-size: 0.875rem;
+			font-weight: 500;
+			color: $grey-10;
+		}
+
+		.file-meta {
+			margin: 0;
+			font-size: 0.75rem;
+			color: $grey-40;
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+	}
+
+	.metadata-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		padding: $unit-3x;
+		background-color: $grey-97;
+		border-radius: $card-corner-radius;
+		border: 1px solid $grey-90;
+	}
+
+	.error-message {
+		margin: 0;
+		font-size: 0.75rem;
+		color: $red-60;
+		padding: $unit;
+		background-color: rgba($red-60, 0.05);
+		border-radius: $card-corner-radius;
+		border: 1px solid rgba($red-60, 0.2);
+	}
+
+	// Compact layout styles
+	.compact-preview {
+		display: flex;
+		gap: $unit-3x;
+		align-items: flex-start;
+	}
+
+	.compact-image {
+		position: relative;
+		width: 100px;
+		height: 100px;
+		flex-shrink: 0;
+		border-radius: $card-corner-radius;
+		overflow: hidden;
+		background-color: $grey-95;
+		border: 1px solid $grey-90;
+
+		:global(.preview-image) {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+			display: block;
+			padding: $unit-3x;
+			box-sizing: border-box;
+		}
+
+		.preview-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.7);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			opacity: 0;
+			transition: opacity 0.2s ease;
+		}
+
+		&:hover .preview-overlay {
+			opacity: 1;
+		}
+
+		.preview-actions {
+			display: flex;
+			gap: $unit-half;
+		}
+	}
+
+	.compact-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+
+		.compact-metadata {
+			display: flex;
+			flex-direction: column;
+			gap: $unit-2x;
+		}
+	}
+
+	// Responsive adjustments
+	@media (max-width: 640px) {
+		.upload-prompt {
+			padding: $unit-3x;
+
+			.upload-main-text {
+				font-size: 0.8rem;
+			}
+		}
+
+		.action-buttons {
+			flex-direction: column;
+			align-items: stretch;
+		}
+
+		.preview-actions {
+			flex-direction: column;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/Input.svelte b/src/lib/components/admin/Input.svelte
new file mode 100644
index 0000000..5fb6978
--- /dev/null
+++ b/src/lib/components/admin/Input.svelte
@@ -0,0 +1,508 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements'
+
+	// Type helpers for different input elements
+	type InputProps = HTMLInputAttributes & {
+		type?:
+			| 'text'
+			| 'email'
+			| 'password'
+			| 'url'
+			| 'search'
+			| 'number'
+			| 'tel'
+			| 'date'
+			| 'time'
+			| 'color'
+	}
+
+	type TextareaProps = HTMLTextareaAttributes & {
+		type: 'textarea'
+		rows?: number
+		autoResize?: boolean
+	}
+
+	type Props = (InputProps | TextareaProps) & {
+		label?: string
+		error?: string
+		helpText?: string
+		size?: 'small' | 'medium' | 'large'
+		pill?: boolean
+		fullWidth?: boolean
+		required?: boolean
+		class?: string
+		wrapperClass?: string
+		inputClass?: string
+		prefixIcon?: boolean
+		suffixIcon?: boolean
+		showCharCount?: boolean
+		maxLength?: number
+		colorSwatch?: boolean // Show color swatch based on input value
+	}
+
+	let {
+		label,
+		error,
+		helpText,
+		size = 'medium',
+		pill = false,
+		fullWidth = true,
+		required = false,
+		disabled = false,
+		readonly = false,
+		type = 'text',
+		value = $bindable(''),
+		class: className = '',
+		wrapperClass = '',
+		inputClass = '',
+		prefixIcon = false,
+		suffixIcon = false,
+		showCharCount = false,
+		maxLength,
+		colorSwatch = false,
+		id = `input-${Math.random().toString(36).substr(2, 9)}`,
+		...restProps
+	}: Props = $props()
+
+	// For textarea auto-resize
+	let textareaElement: HTMLTextAreaElement | undefined = $state()
+	let charCount = $derived(String(value).length)
+	let charsRemaining = $derived(maxLength ? maxLength - charCount : 0)
+
+	// Color swatch validation and display
+	const isValidHexColor = $derived(() => {
+		if (!colorSwatch || !value) return false
+		const hexRegex = /^#[0-9A-Fa-f]{6}$/
+		return hexRegex.test(String(value))
+	})
+
+	// Color picker functionality
+	let colorPickerInput: HTMLInputElement
+
+	function handleColorSwatchClick() {
+		if (colorPickerInput) {
+			colorPickerInput.click()
+		}
+	}
+
+	function handleColorPickerChange(event: Event) {
+		const target = event.target as HTMLInputElement
+		if (target.value) {
+			value = target.value.toUpperCase()
+		}
+	}
+
+	// Auto-resize textarea
+	$effect(() => {
+		if (type === 'textarea' && textareaElement && isTextarea(restProps) && restProps.autoResize) {
+			// Reset height to auto to get the correct scrollHeight
+			textareaElement.style.height = 'auto'
+			// Set the height to match content
+			textareaElement.style.height = textareaElement.scrollHeight + 'px'
+		}
+	})
+
+	// Compute classes
+	const wrapperClasses = $derived(() => {
+		const classes = ['input-wrapper']
+		if (size) classes.push(`input-wrapper-${size}`)
+		if (fullWidth) classes.push('full-width')
+		if (error) classes.push('has-error')
+		if (disabled) classes.push('is-disabled')
+		if (prefixIcon) classes.push('has-prefix-icon')
+		if (suffixIcon) classes.push('has-suffix-icon')
+		if (colorSwatch) classes.push('has-color-swatch')
+		if (type === 'textarea' && isTextarea(restProps) && restProps.autoResize)
+			classes.push('has-auto-resize')
+		if (wrapperClass) classes.push(wrapperClass)
+		if (className) classes.push(className)
+		return classes.join(' ')
+	})
+
+	const inputClasses = $derived(() => {
+		const classes = ['input']
+		classes.push(`input-${size}`)
+		if (pill) classes.push('input-pill')
+		if (inputClass) classes.push(inputClass)
+		return classes.join(' ')
+	})
+
+	// Type guard for textarea props
+	function isTextarea(props: Props): props is TextareaProps {
+		return props.type === 'textarea'
+	}
+</script>
+
+<div class={wrapperClasses()}>
+	{#if label}
+		<label for={id} class="input-label">
+			{label}
+			{#if required}
+				<span class="required-indicator">*</span>
+			{/if}
+		</label>
+	{/if}
+
+	<div class="input-container">
+		{#if prefixIcon}
+			<span class="input-icon prefix-icon">
+				<slot name="prefix" />
+			</span>
+		{/if}
+
+		{#if colorSwatch && isValidHexColor}
+			<span
+				class="color-swatch"
+				style="background-color: {value}"
+				onclick={handleColorSwatchClick}
+				role="button"
+				tabindex="0"
+				aria-label="Open color picker"
+			></span>
+		{/if}
+
+		{#if type === 'textarea' && isTextarea(restProps)}
+			<textarea
+				bind:this={textareaElement}
+				bind:value
+				{id}
+				{disabled}
+				{readonly}
+				{required}
+				{maxLength}
+				class={inputClasses()}
+				rows={restProps.rows || 3}
+				{...restProps}
+			/>
+		{:else}
+			<input
+				bind:value
+				{id}
+				{type}
+				{disabled}
+				{readonly}
+				{required}
+				{maxLength}
+				class={inputClasses()}
+				{...restProps}
+			/>
+		{/if}
+
+		{#if suffixIcon}
+			<span class="input-icon suffix-icon">
+				<slot name="suffix" />
+			</span>
+		{/if}
+
+		{#if colorSwatch}
+			<input
+				bind:this={colorPickerInput}
+				type="color"
+				value={isValidHexColor ? String(value) : '#000000'}
+				oninput={handleColorPickerChange}
+				onchange={handleColorPickerChange}
+				style="position: absolute; visibility: hidden; pointer-events: none;"
+				tabindex="-1"
+			/>
+		{/if}
+	</div>
+
+	{#if (error || helpText || showCharCount) && !disabled}
+		<div class="input-footer">
+			{#if error}
+				<span class="input-error">{error}</span>
+			{:else if helpText}
+				<span class="input-help">{helpText}</span>
+			{/if}
+
+			{#if showCharCount && maxLength}
+				<span
+					class="char-count"
+					class:warning={charsRemaining < maxLength * 0.1}
+					class:error={charsRemaining < 0}
+				>
+					{charsRemaining}
+				</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	// Wrapper styles
+	.input-wrapper {
+		display: inline-block;
+		position: relative;
+
+		&.full-width {
+			display: block;
+			width: 100%;
+		}
+
+		&.has-error {
+			.input {
+				border-color: $red-50;
+
+				&:focus {
+					border-color: $red-50;
+				}
+			}
+		}
+
+		&.is-disabled {
+			opacity: 0.6;
+		}
+
+		&.has-color-swatch {
+			.input {
+				padding-left: 36px; // Make room for color swatch (20px + 8px margin + 8px padding)
+			}
+		}
+	}
+
+	// Label styles
+	.input-label {
+		display: block;
+		margin-bottom: $unit;
+		font-size: 14px;
+		font-weight: 500;
+		color: $grey-20;
+	}
+
+	.required-indicator {
+		color: $red-50;
+		margin-left: 2px;
+	}
+
+	// Container for input and icons
+	.input-container {
+		position: relative;
+		display: flex;
+		align-items: stretch;
+		width: 100%;
+	}
+
+	// Color swatch styles
+	.color-swatch {
+		position: absolute;
+		left: 8px;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 20px;
+		height: 20px;
+		border-radius: 4px;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		z-index: 1;
+		cursor: pointer;
+		transition: border-color 0.15s ease;
+
+		&:hover {
+			border-color: rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	// Input and textarea styles
+	.input {
+		width: 100%;
+		font-size: 14px;
+		border: 1px solid $grey-80;
+		border-radius: 6px;
+		background-color: white;
+		transition: all 0.15s ease;
+
+		&::placeholder {
+			color: $grey-50;
+		}
+
+		&:focus {
+			outline: none;
+			border-color: $primary-color;
+			background-color: white;
+		}
+
+		&:disabled {
+			background-color: $grey-95;
+			cursor: not-allowed;
+			color: $grey-40;
+		}
+
+		&:read-only {
+			background-color: $grey-97;
+			cursor: default;
+		}
+	}
+
+	// Size variations
+	.input-small {
+		padding: $unit calc($unit * 1.5);
+		font-size: 13px;
+	}
+
+	.input-medium {
+		padding: calc($unit * 1.5) $unit-2x;
+		font-size: 14px;
+	}
+
+	.input-large {
+		padding: $unit-2x $unit-3x;
+		font-size: 16px;
+		box-sizing: border-box;
+	}
+
+	// Shape variants - pill vs rounded
+	.input-pill {
+		&.input-small {
+			border-radius: 20px;
+		}
+		&.input-medium {
+			border-radius: 24px;
+		}
+		&.input-large {
+			border-radius: 28px;
+		}
+	}
+
+	.input:not(.input-pill) {
+		&.input-small {
+			border-radius: 6px;
+		}
+		&.input-medium {
+			border-radius: 8px;
+		}
+		&.input-large {
+			border-radius: 10px;
+		}
+	}
+
+	// Icon adjustments
+	.has-prefix-icon .input {
+		padding-left: calc($unit-2x + 24px);
+	}
+
+	.has-suffix-icon .input {
+		padding-right: calc($unit-2x + 24px);
+	}
+
+	.input-icon {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: $grey-40;
+		pointer-events: none;
+
+		&.prefix-icon {
+			left: $unit-2x;
+		}
+
+		&.suffix-icon {
+			right: $unit-2x;
+		}
+
+		:global(svg) {
+			width: 16px;
+			height: 16px;
+		}
+	}
+
+	// Textarea specific
+	textarea.input {
+		resize: vertical;
+		min-height: 80px;
+		padding-top: calc($unit * 1.5);
+		padding-bottom: calc($unit * 1.5);
+		line-height: 1.5;
+		overflow-y: hidden; // Important for auto-resize
+
+		&.input-small {
+			min-height: 60px;
+			padding-top: $unit;
+			padding-bottom: $unit;
+		}
+
+		&.input-large {
+			min-height: 100px;
+		}
+	}
+
+	// Auto-resizing textarea
+	.has-auto-resize textarea.input {
+		resize: none; // Disable manual resize when auto-resize is enabled
+	}
+
+	// Footer styles
+	.input-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: $unit-half;
+		min-height: 20px;
+	}
+
+	.input-error,
+	.input-help {
+		font-size: 13px;
+		line-height: 1.4;
+	}
+
+	.input-error {
+		color: $red-50;
+	}
+
+	.input-help {
+		color: $grey-40;
+	}
+
+	.char-count {
+		font-size: 12px;
+		color: $grey-50;
+		font-variant-numeric: tabular-nums;
+		margin-left: auto;
+
+		&.warning {
+			color: $universe-color;
+		}
+
+		&.error {
+			color: $red-50;
+			font-weight: 500;
+		}
+	}
+
+	// Special input types
+	input[type='color'].input {
+		padding: $unit;
+		cursor: pointer;
+
+		&::-webkit-color-swatch-wrapper {
+			padding: 0;
+		}
+
+		&::-webkit-color-swatch {
+			border: none;
+			border-radius: 4px;
+		}
+	}
+
+	input[type='number'].input {
+		-moz-appearance: textfield;
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+
+	// Search input
+	input[type='search'].input {
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button {
+			-webkit-appearance: none;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/LoadingSpinner.svelte b/src/lib/components/admin/LoadingSpinner.svelte
new file mode 100644
index 0000000..51b6b48
--- /dev/null
+++ b/src/lib/components/admin/LoadingSpinner.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	interface Props {
+		size?: 'small' | 'medium' | 'large'
+		text?: string
+	}
+
+	let { size = 'medium', text = '' }: Props = $props()
+
+	const sizeMap = {
+		small: '24px',
+		medium: '32px',
+		large: '48px'
+	}
+</script>
+
+<div class="loading-spinner">
+	<div class="spinner" style="width: {sizeMap[size]}; height: {sizeMap[size]};"></div>
+	{#if text}
+		<p class="loading-text">{text}</p>
+	{/if}
+</div>
+
+<style lang="scss">
+	.loading-spinner {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: $unit-2x;
+		padding: $unit-8x;
+	}
+
+	.spinner {
+		border: 3px solid $grey-80;
+		border-top-color: $primary-color;
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.loading-text {
+		margin: 0;
+		color: $grey-40;
+		font-size: 1rem;
+	}
+</style>
diff --git a/src/lib/components/admin/MediaDetailsModal.svelte b/src/lib/components/admin/MediaDetailsModal.svelte
new file mode 100644
index 0000000..c9eb3d0
--- /dev/null
+++ b/src/lib/components/admin/MediaDetailsModal.svelte
@@ -0,0 +1,779 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import SmartImage from '../SmartImage.svelte'
+	import { authenticatedFetch } from '$lib/admin-auth'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		isOpen: boolean
+		media: Media | null
+		onClose: () => void
+		onUpdate: (updatedMedia: Media) => void
+	}
+
+	let { isOpen = $bindable(), media, onClose, onUpdate }: Props = $props()
+
+	// Form state
+	let altText = $state('')
+	let description = $state('')
+	let isPhotography = $state(false)
+	let isSaving = $state(false)
+	let error = $state('')
+	let successMessage = $state('')
+
+	// Usage tracking state
+	let usage = $state<
+		Array<{
+			contentType: string
+			contentId: number
+			contentTitle: string
+			fieldDisplayName: string
+			contentUrl?: string
+			createdAt: string
+		}>
+	>([])
+	let loadingUsage = $state(false)
+
+	// Initialize form when media changes
+	$effect(() => {
+		if (media) {
+			altText = media.altText || ''
+			description = media.description || ''
+			isPhotography = media.isPhotography || false
+			error = ''
+			successMessage = ''
+			loadUsage()
+		}
+	})
+
+	// Load usage information
+	async function loadUsage() {
+		if (!media) return
+
+		try {
+			loadingUsage = true
+			const response = await authenticatedFetch(`/api/media/${media.id}/usage`)
+
+			if (response.ok) {
+				const data = await response.json()
+				usage = data.usage || []
+			} else {
+				console.warn('Failed to load media usage')
+				usage = []
+			}
+		} catch (error) {
+			console.error('Error loading media usage:', error)
+			usage = []
+		} finally {
+			loadingUsage = false
+		}
+	}
+
+	function handleClose() {
+		altText = ''
+		description = ''
+		isPhotography = false
+		error = ''
+		successMessage = ''
+		isOpen = false
+		onClose()
+	}
+
+	async function handleSave() {
+		if (!media) return
+
+		try {
+			isSaving = true
+			error = ''
+
+			const response = await authenticatedFetch(`/api/media/${media.id}`, {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					altText: altText.trim() || null,
+					description: description.trim() || null,
+					isPhotography: isPhotography
+				})
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to update media')
+			}
+
+			const updatedMedia = await response.json()
+			onUpdate(updatedMedia)
+			successMessage = 'Media updated successfully!'
+
+			// Auto-close after success
+			setTimeout(() => {
+				handleClose()
+			}, 1500)
+		} catch (err) {
+			error = 'Failed to update media. Please try again.'
+			console.error('Failed to update media:', err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+	async function handleDelete() {
+		if (
+			!media ||
+			!confirm('Are you sure you want to delete this media file? This action cannot be undone.')
+		) {
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+
+			const response = await authenticatedFetch(`/api/media/${media.id}`, {
+				method: 'DELETE'
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to delete media')
+			}
+
+			// Close modal and let parent handle the deletion
+			handleClose()
+			// Note: Parent component should refresh the media list
+		} catch (err) {
+			error = 'Failed to delete media. Please try again.'
+			console.error('Failed to delete media:', err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+	function copyUrl() {
+		if (media?.url) {
+			navigator.clipboard
+				.writeText(media.url)
+				.then(() => {
+					successMessage = 'URL copied to clipboard!'
+					setTimeout(() => {
+						successMessage = ''
+					}, 2000)
+				})
+				.catch(() => {
+					error = 'Failed to copy URL'
+					setTimeout(() => {
+						error = ''
+					}, 2000)
+				})
+		}
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 Bytes'
+		const k = 1024
+		const sizes = ['Bytes', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+	}
+
+	function getFileType(mimeType: string): string {
+		if (mimeType.startsWith('image/')) return 'Image'
+		if (mimeType.startsWith('video/')) return 'Video'
+		if (mimeType.startsWith('audio/')) return 'Audio'
+		if (mimeType.includes('pdf')) return 'PDF'
+		return 'File'
+	}
+</script>
+
+{#if media}
+	<Modal
+		bind:isOpen
+		size="large"
+		closeOnBackdrop={!isSaving}
+		closeOnEscape={!isSaving}
+		on:close={handleClose}
+	>
+		<div class="media-details-modal">
+			<!-- Header -->
+			<div class="modal-header">
+				<div class="header-content">
+					<h2>Media Details</h2>
+					<p class="filename">{media.filename}</p>
+				</div>
+				{#if !isSaving}
+					<Button variant="ghost" onclick={handleClose} iconOnly aria-label="Close modal">
+						<svg
+							slot="icon"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M6 6L18 18M6 18L18 6"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							/>
+						</svg>
+					</Button>
+				{/if}
+			</div>
+
+			<!-- Content -->
+			<div class="modal-body">
+				<div class="media-preview-section">
+					<!-- Media Preview -->
+					<div class="media-preview">
+						{#if media.mimeType.startsWith('image/')}
+							<SmartImage {media} alt={media.altText || media.filename} />
+						{:else}
+							<div class="file-placeholder">
+								<svg
+									width="64"
+									height="64"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+									<polyline
+										points="14,2 14,8 20,8"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+								<span class="file-type">{getFileType(media.mimeType)}</span>
+							</div>
+						{/if}
+					</div>
+
+					<!-- File Info -->
+					<div class="file-info">
+						<div class="info-row">
+							<span class="label">Type:</span>
+							<span class="value">{getFileType(media.mimeType)}</span>
+						</div>
+						<div class="info-row">
+							<span class="label">Size:</span>
+							<span class="value">{formatFileSize(media.size)}</span>
+						</div>
+						{#if media.width && media.height}
+							<div class="info-row">
+								<span class="label">Dimensions:</span>
+								<span class="value">{media.width} × {media.height}px</span>
+							</div>
+						{/if}
+						<div class="info-row">
+							<span class="label">Uploaded:</span>
+							<span class="value">{new Date(media.createdAt).toLocaleDateString()}</span>
+						</div>
+						<div class="info-row">
+							<span class="label">URL:</span>
+							<div class="url-section">
+								<span class="url-text">{media.url}</span>
+								<Button variant="ghost" buttonSize="small" onclick={copyUrl}>Copy</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Edit Form -->
+				<div class="edit-form">
+					<h3>Accessibility & SEO</h3>
+
+					<Input
+						type="text"
+						label="Alt Text"
+						bind:value={altText}
+						placeholder="Describe this image for screen readers"
+						helpText="Help make your content accessible. Describe what's in the image."
+						disabled={isSaving}
+						fullWidth
+					/>
+
+					<Input
+						type="textarea"
+						label="Description (Optional)"
+						bind:value={description}
+						placeholder="Additional description or caption"
+						helpText="Optional longer description for context or captions."
+						rows={3}
+						disabled={isSaving}
+						fullWidth
+					/>
+
+					<!-- Photography Toggle -->
+					<div class="photography-toggle">
+						<label class="toggle-label">
+							<input
+								type="checkbox"
+								bind:checked={isPhotography}
+								disabled={isSaving}
+								class="toggle-input"
+							/>
+							<span class="toggle-slider"></span>
+							<div class="toggle-content">
+								<span class="toggle-title">Photography</span>
+								<span class="toggle-description">Show this media in the photography experience</span
+								>
+							</div>
+						</label>
+					</div>
+
+					<!-- Usage Tracking -->
+					<div class="usage-section">
+						<h4>Used In</h4>
+						{#if loadingUsage}
+							<div class="usage-loading">
+								<div class="spinner"></div>
+								<span>Loading usage information...</span>
+							</div>
+						{:else if usage.length > 0}
+							<ul class="usage-list">
+								{#each usage as usageItem}
+									<li class="usage-item">
+										<div class="usage-content">
+											<div class="usage-header">
+												{#if usageItem.contentUrl}
+													<a
+														href={usageItem.contentUrl}
+														class="usage-title"
+														target="_blank"
+														rel="noopener"
+													>
+														{usageItem.contentTitle}
+													</a>
+												{:else}
+													<span class="usage-title">{usageItem.contentTitle}</span>
+												{/if}
+												<span class="usage-type">{usageItem.contentType}</span>
+											</div>
+											<div class="usage-details">
+												<span class="usage-field">{usageItem.fieldDisplayName}</span>
+												<span class="usage-date"
+													>Added {new Date(usageItem.createdAt).toLocaleDateString()}</span
+												>
+											</div>
+										</div>
+									</li>
+								{/each}
+							</ul>
+						{:else}
+							<p class="no-usage">This media file is not currently used in any content.</p>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<!-- Footer -->
+			<div class="modal-footer">
+				<div class="footer-left">
+					<Button variant="ghost" onclick={handleDelete} disabled={isSaving} class="delete-button">
+						Delete
+					</Button>
+				</div>
+
+				<div class="footer-right">
+					{#if error}
+						<span class="error-text">{error}</span>
+					{/if}
+					{#if successMessage}
+						<span class="success-text">{successMessage}</span>
+					{/if}
+
+					<Button variant="ghost" onclick={handleClose} disabled={isSaving}>Cancel</Button>
+					<Button variant="primary" onclick={handleSave} disabled={isSaving}>
+						{isSaving ? 'Saving...' : 'Save Changes'}
+					</Button>
+				</div>
+			</div>
+		</div>
+	</Modal>
+{/if}
+
+<style lang="scss">
+	.media-details-modal {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-height: 90vh;
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: $unit-4x;
+		border-bottom: 1px solid $grey-90;
+		flex-shrink: 0;
+
+		.header-content {
+			flex: 1;
+
+			h2 {
+				font-size: 1.5rem;
+				font-weight: 600;
+				margin: 0 0 $unit-half 0;
+				color: $grey-10;
+			}
+
+			.filename {
+				font-size: 0.875rem;
+				color: $grey-40;
+				margin: 0;
+				word-break: break-all;
+			}
+		}
+	}
+
+	.modal-body {
+		flex: 1;
+		overflow-y: auto;
+		padding: $unit-4x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-6x;
+	}
+
+	.media-preview-section {
+		display: grid;
+		grid-template-columns: 300px 1fr;
+		gap: $unit-4x;
+		align-items: start;
+
+		@include breakpoint('tablet') {
+			grid-template-columns: 1fr;
+			gap: $unit-3x;
+		}
+	}
+
+	.media-preview {
+		width: 100%;
+		max-width: 300px;
+		aspect-ratio: 4/3;
+		border-radius: 12px;
+		overflow: hidden;
+		background: $grey-95;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		:global(img) {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.file-placeholder {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: $unit-2x;
+			color: $grey-50;
+
+			.file-type {
+				font-size: 0.875rem;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.file-info {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.info-row {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+
+		.label {
+			font-weight: 500;
+			color: $grey-30;
+			min-width: 80px;
+		}
+
+		.value {
+			color: $grey-10;
+			flex: 1;
+		}
+
+		.url-section {
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
+			flex: 1;
+
+			.url-text {
+				color: $grey-10;
+				font-size: 0.875rem;
+				word-break: break-all;
+				flex: 1;
+			}
+		}
+	}
+
+	.edit-form {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+
+		h3 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-10;
+		}
+
+		h4 {
+			font-size: 1rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-20;
+		}
+	}
+
+	.photography-toggle {
+		.toggle-label {
+			display: flex;
+			align-items: center;
+			gap: $unit-3x;
+			cursor: pointer;
+			user-select: none;
+		}
+
+		.toggle-input {
+			position: absolute;
+			opacity: 0;
+			pointer-events: none;
+
+			&:checked + .toggle-slider {
+				background-color: $blue-60;
+
+				&::before {
+					transform: translateX(20px);
+				}
+			}
+
+			&:disabled + .toggle-slider {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.toggle-slider {
+			position: relative;
+			width: 44px;
+			height: 24px;
+			background-color: $grey-80;
+			border-radius: 12px;
+			transition: background-color 0.2s ease;
+			flex-shrink: 0;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 2px;
+				width: 20px;
+				height: 20px;
+				background-color: white;
+				border-radius: 50%;
+				transition: transform 0.2s ease;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+			}
+		}
+
+		.toggle-content {
+			display: flex;
+			flex-direction: column;
+			gap: $unit-half;
+
+			.toggle-title {
+				font-weight: 500;
+				color: $grey-10;
+				font-size: 0.875rem;
+			}
+
+			.toggle-description {
+				font-size: 0.75rem;
+				color: $grey-50;
+				line-height: 1.4;
+			}
+		}
+	}
+
+	.usage-section {
+		.usage-list {
+			list-style: none;
+			padding: 0;
+			margin: $unit-2x 0 0 0;
+			display: flex;
+			flex-direction: column;
+			gap: $unit;
+		}
+
+		.usage-loading {
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
+			padding: $unit-2x;
+			color: $grey-50;
+
+			.spinner {
+				width: 16px;
+				height: 16px;
+				border: 2px solid $grey-90;
+				border-top: 2px solid $grey-50;
+				border-radius: 50%;
+				animation: spin 1s linear infinite;
+			}
+		}
+
+		.usage-item {
+			padding: $unit-3x;
+			background: $grey-95;
+			border-radius: 12px;
+			border: 1px solid $grey-90;
+
+			.usage-content {
+				display: flex;
+				flex-direction: column;
+				gap: $unit;
+			}
+
+			.usage-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: $unit-2x;
+
+				.usage-title {
+					font-weight: 600;
+					color: $grey-10;
+					text-decoration: none;
+					transition: color 0.2s ease;
+
+					&:hover {
+						color: $blue-60;
+					}
+				}
+
+				.usage-type {
+					background: $grey-85;
+					color: $grey-30;
+					padding: $unit-half $unit;
+					border-radius: 6px;
+					font-size: 0.75rem;
+					font-weight: 500;
+					text-transform: uppercase;
+					letter-spacing: 0.5px;
+					flex-shrink: 0;
+				}
+			}
+
+			.usage-details {
+				display: flex;
+				align-items: center;
+				gap: $unit-3x;
+
+				.usage-field {
+					color: $grey-40;
+					font-size: 0.875rem;
+					font-weight: 500;
+				}
+
+				.usage-date {
+					color: $grey-50;
+					font-size: 0.75rem;
+				}
+			}
+		}
+
+		.no-usage {
+			color: $grey-50;
+			font-style: italic;
+			margin: $unit-2x 0 0 0;
+		}
+	}
+
+	.modal-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: $unit-4x;
+		border-top: 1px solid $grey-90;
+		flex-shrink: 0;
+
+		.footer-left {
+			:global(.delete-button) {
+				color: $red-60;
+
+				&:hover {
+					background-color: rgba(239, 68, 68, 0.1);
+				}
+			}
+		}
+
+		.footer-right {
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
+
+			.error-text {
+				color: $red-60;
+				font-size: 0.875rem;
+			}
+
+			.success-text {
+				color: #16a34a; // green-600 equivalent
+				font-size: 0.875rem;
+			}
+		}
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	// Responsive adjustments
+	@include breakpoint('phone') {
+		.modal-header {
+			padding: $unit-3x;
+		}
+
+		.modal-body {
+			padding: $unit-3x;
+		}
+
+		.modal-footer {
+			padding: $unit-3x;
+			flex-direction: column;
+			gap: $unit-3x;
+			align-items: stretch;
+
+			.footer-right {
+				justify-content: space-between;
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/MediaInput.svelte b/src/lib/components/admin/MediaInput.svelte
new file mode 100644
index 0000000..fc03865
--- /dev/null
+++ b/src/lib/components/admin/MediaInput.svelte
@@ -0,0 +1,430 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		label: string
+		value?: Media | Media[] | null
+		mode: 'single' | 'multiple'
+		fileType?: 'image' | 'video' | 'all'
+		placeholder?: string
+		required?: boolean
+		error?: string
+	}
+
+	let {
+		label,
+		value = $bindable(),
+		mode,
+		fileType = 'all',
+		placeholder = mode === 'single' ? 'No file selected' : 'No files selected',
+		required = false,
+		error
+	}: Props = $props()
+
+	let showModal = $state(false)
+
+	function handleMediaSelect(media: Media | Media[]) {
+		value = media
+		showModal = false
+	}
+
+	function handleClear() {
+		if (mode === 'single') {
+			value = null
+		} else {
+			value = []
+		}
+	}
+
+	function openModal() {
+		showModal = true
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+	}
+
+	// Computed properties
+	const hasValue = $derived(
+		mode === 'single'
+			? value !== null && value !== undefined
+			: Array.isArray(value) && value.length > 0
+	)
+
+	const displayText = $derived(
+		!hasValue
+			? placeholder
+			: mode === 'single' && value && !Array.isArray(value)
+				? value.filename
+				: mode === 'multiple' && Array.isArray(value)
+					? value.length === 1
+						? `${value.length} file selected`
+						: `${value.length} files selected`
+					: placeholder
+	)
+
+	const selectedIds = $derived(
+		!hasValue
+			? []
+			: mode === 'single' && value && !Array.isArray(value)
+				? [value.id]
+				: mode === 'multiple' && Array.isArray(value)
+					? value.map((item) => item.id)
+					: []
+	)
+
+	const modalTitle = $derived(
+		mode === 'single'
+			? `Select ${fileType === 'image' ? 'Image' : 'Media'}`
+			: `Select ${fileType === 'image' ? 'Images' : 'Media'}`
+	)
+
+	const confirmText = $derived(mode === 'single' ? 'Select' : 'Select Files')
+</script>
+
+<div class="media-input">
+	<label class="input-label">
+		{label}
+		{#if required}
+			<span class="required">*</span>
+		{/if}
+	</label>
+
+	<!-- Selected Media Preview -->
+	{#if hasValue}
+		<div class="selected-media">
+			{#if mode === 'single' && value && !Array.isArray(value)}
+				<div class="media-preview single">
+					<div class="media-thumbnail">
+						{#if value.thumbnailUrl}
+							<img src={value.thumbnailUrl} alt={value.filename} />
+						{:else}
+							<div class="media-placeholder">
+								<svg
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<rect
+										x="3"
+										y="5"
+										width="18"
+										height="14"
+										rx="2"
+										stroke="currentColor"
+										stroke-width="2"
+									/>
+									<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+									<path
+										d="M3 16l5-5 3 3 4-4 4 4"
+										stroke="currentColor"
+										stroke-width="2"
+										fill="none"
+									/>
+								</svg>
+							</div>
+						{/if}
+					</div>
+					<div class="media-info">
+						<p class="filename">{value.filename}</p>
+						<p class="file-meta">
+							{formatFileSize(value.size)}
+							{#if value.width && value.height}
+								• {value.width}×{value.height}
+							{/if}
+						</p>
+					</div>
+				</div>
+			{:else if mode === 'multiple' && Array.isArray(value) && value.length > 0}
+				<div class="media-preview multiple">
+					<div class="media-grid">
+						{#each value.slice(0, 4) as item}
+							<div class="media-thumbnail">
+								{#if item.thumbnailUrl}
+									<img src={item.thumbnailUrl} alt={item.filename} />
+								{:else}
+									<div class="media-placeholder">
+										<svg
+											width="16"
+											height="16"
+											viewBox="0 0 24 24"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<rect
+												x="3"
+												y="5"
+												width="18"
+												height="14"
+												rx="2"
+												stroke="currentColor"
+												stroke-width="2"
+											/>
+											<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+											<path
+												d="M3 16l5-5 3 3 4-4 4 4"
+												stroke="currentColor"
+												stroke-width="2"
+												fill="none"
+											/>
+										</svg>
+									</div>
+								{/if}
+							</div>
+						{/each}
+						{#if value.length > 4}
+							<div class="media-thumbnail overflow">
+								<div class="overflow-indicator">
+									+{value.length - 4}
+								</div>
+							</div>
+						{/if}
+					</div>
+					<p class="selection-summary">
+						{value.length} file{value.length !== 1 ? 's' : ''} selected
+					</p>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Input Field -->
+	<div class="input-field" class:has-error={error}>
+		<input
+			type="text"
+			readonly
+			value={displayText}
+			class="media-input-field"
+			class:placeholder={!hasValue}
+		/>
+		<div class="input-actions">
+			<Button variant="ghost" onclick={openModal}>Browse</Button>
+			{#if hasValue}
+				<Button variant="ghost" onclick={handleClear} aria-label="Clear selection">
+					<svg
+						slot="icon"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M6 6L18 18M6 18L18 6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<p class="error-message">{error}</p>
+	{/if}
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={showModal}
+		{mode}
+		{fileType}
+		{selectedIds}
+		title={modalTitle}
+		{confirmText}
+		onselect={handleMediaSelect}
+	/>
+</div>
+
+<style lang="scss">
+	.media-input {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.input-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-20;
+
+		.required {
+			color: $red-60;
+			margin-left: $unit-half;
+		}
+	}
+
+	.selected-media {
+		padding: $unit-2x;
+		background-color: $grey-95;
+		border-radius: $card-corner-radius;
+		border: 1px solid $grey-85;
+	}
+
+	.media-preview {
+		&.single {
+			display: flex;
+			gap: $unit-2x;
+			align-items: flex-start;
+		}
+
+		&.multiple {
+			display: flex;
+			flex-direction: column;
+			gap: $unit;
+		}
+	}
+
+	.media-thumbnail {
+		width: 60px;
+		height: 60px;
+		border-radius: calc($card-corner-radius - 2px);
+		overflow: hidden;
+		background-color: $grey-90;
+		flex-shrink: 0;
+		position: relative;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&.overflow {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $grey-80;
+			color: $grey-30;
+			font-size: 0.75rem;
+			font-weight: 600;
+		}
+	}
+
+	.media-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		color: $grey-60;
+	}
+
+	.media-info {
+		flex: 1;
+		min-width: 0;
+
+		.filename {
+			margin: 0 0 $unit-half 0;
+			font-size: 0.875rem;
+			font-weight: 500;
+			color: $grey-10;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.file-meta {
+			margin: 0;
+			font-size: 0.75rem;
+			color: $grey-40;
+		}
+	}
+
+	.media-grid {
+		display: flex;
+		gap: $unit;
+		margin-bottom: $unit;
+	}
+
+	.selection-summary {
+		margin: 0;
+		font-size: 0.875rem;
+		color: $grey-30;
+		font-weight: 500;
+	}
+
+	.input-field {
+		position: relative;
+		display: flex;
+		align-items: center;
+		border: 1px solid $grey-80;
+		border-radius: $card-corner-radius;
+		background-color: white;
+		transition: border-color 0.2s ease;
+
+		&:focus-within {
+			border-color: $blue-60;
+			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+		}
+
+		&.has-error {
+			border-color: $red-60;
+
+			&:focus-within {
+				border-color: $red-60;
+				box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+			}
+		}
+	}
+
+	.media-input-field {
+		flex: 1;
+		padding: $unit $unit-2x;
+		border: none;
+		background: transparent;
+		font-size: 0.875rem;
+		color: $grey-10;
+
+		&:focus {
+			outline: none;
+		}
+
+		&.placeholder {
+			color: $grey-50;
+		}
+
+		&[readonly] {
+			cursor: pointer;
+		}
+	}
+
+	.input-actions {
+		display: flex;
+		align-items: center;
+		padding-right: $unit-half;
+		gap: $unit-half;
+	}
+
+	.error-message {
+		margin: 0;
+		font-size: 0.75rem;
+		color: $red-60;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 640px) {
+		.media-preview.single {
+			flex-direction: column;
+		}
+
+		.media-thumbnail {
+			width: 80px;
+			height: 80px;
+		}
+
+		.media-grid {
+			flex-wrap: wrap;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/MediaLibraryModal.svelte b/src/lib/components/admin/MediaLibraryModal.svelte
new file mode 100644
index 0000000..2f2ee11
--- /dev/null
+++ b/src/lib/components/admin/MediaLibraryModal.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import Button from './Button.svelte'
+	import MediaSelector from './MediaSelector.svelte'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		isOpen: boolean
+		mode: 'single' | 'multiple'
+		fileType?: 'image' | 'video' | 'all'
+		selectedIds?: number[]
+		title?: string
+		confirmText?: string
+		onSelect: (media: Media | Media[]) => void
+		onClose: () => void
+	}
+
+	let {
+		isOpen = $bindable(),
+		mode,
+		fileType = 'all',
+		selectedIds = [],
+		title = mode === 'single' ? 'Select Media' : 'Select Media Files',
+		confirmText = mode === 'single' ? 'Select' : 'Select Files',
+		onSelect,
+		onClose
+	}: Props = $props()
+
+	let selectedMedia = $state<Media[]>([])
+	let isLoading = $state(false)
+
+	function handleMediaSelect(media: Media[]) {
+		selectedMedia = media
+	}
+
+	function handleConfirm() {
+		if (selectedMedia.length === 0) return
+
+		if (mode === 'single') {
+			onSelect(selectedMedia[0])
+		} else {
+			onSelect(selectedMedia)
+		}
+
+		handleClose()
+	}
+
+	function handleClose() {
+		selectedMedia = []
+		isOpen = false
+		onClose()
+	}
+
+	function handleCancel() {
+		handleClose()
+	}
+
+	// Computed properties
+	const canConfirm = $derived(selectedMedia.length > 0)
+	const selectionCount = $derived(selectedMedia.length)
+	const footerText = $derived(
+		mode === 'single'
+			? canConfirm
+				? '1 item selected'
+				: 'No item selected'
+			: `${selectionCount} item${selectionCount !== 1 ? 's' : ''} selected`
+	)
+</script>
+
+<Modal {isOpen} size="full" closeOnBackdrop={false} showCloseButton={false} on:close={handleClose}>
+	<div class="media-library-modal">
+		<!-- Header -->
+		<header class="modal-header">
+			<div class="header-content">
+				<h2 class="modal-title">{title}</h2>
+				<p class="modal-subtitle">
+					{#if fileType === 'image'}
+						Browse and select image files
+					{:else if fileType === 'video'}
+						Browse and select video files
+					{:else}
+						Browse and select media files
+					{/if}
+				</p>
+			</div>
+			<Button variant="ghost" iconOnly onclick={handleClose} aria-label="Close modal">
+				<svg
+					slot="icon"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M6 6L18 18M6 18L18 6"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</Button>
+		</header>
+
+		<!-- Media Browser -->
+		<div class="modal-body">
+			<MediaSelector
+				{mode}
+				{fileType}
+				{selectedIds}
+				on:select={(e) => handleMediaSelect(e.detail)}
+				bind:loading={isLoading}
+			/>
+		</div>
+
+		<!-- Footer -->
+		<footer class="modal-footer">
+			<div class="footer-info">
+				<span class="selection-count">{footerText}</span>
+			</div>
+			<div class="footer-actions">
+				<Button variant="ghost" onclick={handleCancel} disabled={isLoading}>Cancel</Button>
+				<Button variant="primary" onclick={handleConfirm} disabled={!canConfirm || isLoading}>
+					{confirmText}
+				</Button>
+			</div>
+		</footer>
+	</div>
+</Modal>
+
+<style lang="scss">
+	.media-library-modal {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 80vh;
+		max-height: 90vh;
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: $unit-3x $unit-4x;
+		border-bottom: 1px solid $grey-80;
+		background-color: white;
+		flex-shrink: 0;
+	}
+
+	.header-content {
+		flex: 1;
+	}
+
+	.modal-title {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0 0 $unit-half 0;
+		color: $grey-10;
+	}
+
+	.modal-subtitle {
+		font-size: 0.875rem;
+		color: $grey-30;
+		margin: 0;
+	}
+
+	.modal-body {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.modal-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: $unit-3x $unit-4x;
+		border-top: 1px solid $grey-80;
+		background-color: $grey-95;
+		flex-shrink: 0;
+	}
+
+	.footer-info {
+		flex: 1;
+	}
+
+	.selection-count {
+		font-size: 0.875rem;
+		color: $grey-30;
+		font-weight: 500;
+	}
+
+	.footer-actions {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 768px) {
+		.modal-header {
+			padding: $unit-2x $unit-3x;
+		}
+
+		.modal-footer {
+			padding: $unit-2x $unit-3x;
+			flex-direction: column;
+			gap: $unit-2x;
+			align-items: stretch;
+		}
+
+		.footer-info {
+			text-align: center;
+		}
+
+		.footer-actions {
+			justify-content: center;
+		}
+
+		.modal-title {
+			font-size: 1.25rem;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/MediaSelector.svelte b/src/lib/components/admin/MediaSelector.svelte
new file mode 100644
index 0000000..a0400e0
--- /dev/null
+++ b/src/lib/components/admin/MediaSelector.svelte
@@ -0,0 +1,631 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte'
+	import Input from './Input.svelte'
+	import Button from './Button.svelte'
+	import LoadingSpinner from './LoadingSpinner.svelte'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		mode: 'single' | 'multiple'
+		fileType?: 'image' | 'video' | 'all'
+		selectedIds?: number[]
+		loading?: boolean
+	}
+
+	let { mode, fileType = 'all', selectedIds = [], loading = $bindable(false) }: Props = $props()
+
+	const dispatch = createEventDispatcher<{
+		select: Media[]
+	}>()
+
+	// State
+	let media = $state<Media[]>([])
+	let selectedMedia = $state<Media[]>([])
+	let currentPage = $state(1)
+	let totalPages = $state(1)
+	let total = $state(0)
+	let searchQuery = $state('')
+	let filterType = $state<string>(fileType === 'all' ? 'all' : fileType)
+	let photographyFilter = $state<string>('all')
+	let searchTimeout: ReturnType<typeof setTimeout>
+
+	// Initialize selected media from IDs
+	$effect(() => {
+		if (selectedIds.length > 0 && media.length > 0) {
+			selectedMedia = media.filter((item) => selectedIds.includes(item.id))
+			dispatch('select', selectedMedia)
+		}
+	})
+
+	// Watch for search query changes with debounce
+	$effect(() => {
+		if (searchQuery !== undefined) {
+			clearTimeout(searchTimeout)
+			searchTimeout = setTimeout(() => {
+				currentPage = 1
+				loadMedia()
+			}, 300)
+		}
+	})
+
+	// Watch for filter changes
+	$effect(() => {
+		if (filterType !== undefined) {
+			currentPage = 1
+			loadMedia()
+		}
+	})
+
+	// Watch for photography filter changes
+	$effect(() => {
+		if (photographyFilter !== undefined) {
+			currentPage = 1
+			loadMedia()
+		}
+	})
+
+	onMount(() => {
+		loadMedia()
+	})
+
+	async function loadMedia(page = 1) {
+		try {
+			loading = true
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			let url = `/api/media?page=${page}&limit=24`
+
+			if (filterType !== 'all') {
+				url += `&mimeType=${filterType}`
+			}
+
+			if (photographyFilter !== 'all') {
+				url += `&isPhotography=${photographyFilter}`
+			}
+
+			if (searchQuery) {
+				url += `&search=${encodeURIComponent(searchQuery)}`
+			}
+
+			const response = await fetch(url, {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to load media')
+			}
+
+			const data = await response.json()
+
+			if (page === 1) {
+				media = data.media
+			} else {
+				media = [...media, ...data.media]
+			}
+
+			currentPage = page
+			totalPages = data.pagination.totalPages
+			total = data.pagination.total
+		} catch (error) {
+			console.error('Error loading media:', error)
+		} finally {
+			loading = false
+		}
+	}
+
+	function handleMediaClick(item: Media) {
+		if (mode === 'single') {
+			selectedMedia = [item]
+			dispatch('select', selectedMedia)
+		} else {
+			const isSelected = selectedMedia.some((m) => m.id === item.id)
+
+			if (isSelected) {
+				selectedMedia = selectedMedia.filter((m) => m.id !== item.id)
+			} else {
+				selectedMedia = [...selectedMedia, item]
+			}
+
+			dispatch('select', selectedMedia)
+		}
+	}
+
+	function handleSelectAll() {
+		if (selectedMedia.length === media.length) {
+			selectedMedia = []
+		} else {
+			selectedMedia = [...media]
+		}
+		dispatch('select', selectedMedia)
+	}
+
+	function loadMore() {
+		if (currentPage < totalPages && !loading) {
+			loadMedia(currentPage + 1)
+		}
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+	}
+
+	function isSelected(item: Media): boolean {
+		return selectedMedia.some((m) => m.id === item.id)
+	}
+
+	// Computed properties
+	const hasMore = $derived(currentPage < totalPages)
+	const showSelectAll = $derived(mode === 'multiple' && media.length > 0)
+	const allSelected = $derived(media.length > 0 && selectedMedia.length === media.length)
+</script>
+
+<div class="media-selector">
+	<!-- Search and Filter Controls -->
+	<div class="controls">
+		<div class="search-filters">
+			<Input type="search" placeholder="Search media files..." bind:value={searchQuery} />
+
+			<select bind:value={filterType} class="filter-select">
+				<option value="all">All Files</option>
+				<option value="image">Images</option>
+				<option value="video">Videos</option>
+			</select>
+
+			<select bind:value={photographyFilter} class="filter-select">
+				<option value="all">All Media</option>
+				<option value="true">Photography</option>
+				<option value="false">Non-Photography</option>
+			</select>
+		</div>
+
+		{#if showSelectAll}
+			<Button variant="ghost" onclick={handleSelectAll}>
+				{allSelected ? 'Clear All' : 'Select All'}
+			</Button>
+		{/if}
+	</div>
+
+	<!-- Results Info -->
+	{#if total > 0}
+		<div class="results-info">
+			<span class="total-count">{total} file{total !== 1 ? 's' : ''} found</span>
+		</div>
+	{/if}
+
+	<!-- Media Grid -->
+	<div class="media-grid-container">
+		{#if loading && media.length === 0}
+			<div class="loading-container">
+				<LoadingSpinner />
+				<p>Loading media...</p>
+			</div>
+		{:else if media.length === 0}
+			<div class="empty-state">
+				<svg
+					width="64"
+					height="64"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="2" />
+					<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+					<path d="M3 16l5-5 3 3 4-4 4 4" stroke="currentColor" stroke-width="2" fill="none" />
+				</svg>
+				<h3>No media found</h3>
+				<p>Try adjusting your search or upload some files</p>
+			</div>
+		{:else}
+			<div class="media-grid">
+				{#each media as item (item.id)}
+					<button
+						type="button"
+						class="media-item"
+						class:selected={isSelected(item)}
+						onclick={() => handleMediaClick(item)}
+					>
+						<!-- Thumbnail -->
+						<div class="media-thumbnail">
+							{#if item.mimeType?.startsWith('image/')}
+								<img
+									src={item.mimeType === 'image/svg+xml' ? item.url : item.thumbnailUrl || item.url}
+									alt={item.filename}
+									loading="lazy"
+								/>
+							{:else}
+								<div class="media-placeholder">
+									<svg
+										width="32"
+										height="32"
+										viewBox="0 0 24 24"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<rect
+											x="3"
+											y="5"
+											width="18"
+											height="14"
+											rx="2"
+											stroke="currentColor"
+											stroke-width="2"
+										/>
+										<circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
+										<path
+											d="M3 16l5-5 3 3 4-4 4 4"
+											stroke="currentColor"
+											stroke-width="2"
+											fill="none"
+										/>
+									</svg>
+								</div>
+							{/if}
+
+							<!-- Selection Indicator -->
+							{#if mode === 'multiple'}
+								<div class="selection-checkbox">
+									<input type="checkbox" checked={isSelected(item)} readonly />
+								</div>
+							{/if}
+
+							<!-- Selected Overlay -->
+							{#if isSelected(item)}
+								<div class="selected-overlay">
+									<svg
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											d="M9 12l2 2 4-4"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</div>
+							{/if}
+						</div>
+
+						<!-- Media Info -->
+						<div class="media-info">
+							<div class="media-filename" title={item.filename}>
+								{item.filename}
+							</div>
+							<div class="media-indicators">
+								{#if item.isPhotography}
+									<span class="indicator-pill photography" title="Photography">
+										<svg
+											width="10"
+											height="10"
+											viewBox="0 0 24 24"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<polygon
+												points="12,2 15.09,8.26 22,9 17,14.74 18.18,21.02 12,17.77 5.82,21.02 7,14.74 2,9 8.91,8.26"
+												fill="currentColor"
+											/>
+										</svg>
+										Photo
+									</span>
+								{/if}
+								{#if item.altText}
+									<span class="indicator-pill alt-text" title="Alt text: {item.altText}">
+										Alt
+									</span>
+								{:else}
+									<span class="indicator-pill no-alt-text" title="No alt text"> No Alt </span>
+								{/if}
+							</div>
+							<div class="media-meta">
+								<span class="file-size">{formatFileSize(item.size)}</span>
+								{#if item.width && item.height}
+									<span class="dimensions">{item.width}×{item.height}</span>
+								{/if}
+							</div>
+						</div>
+					</button>
+				{/each}
+			</div>
+
+			<!-- Load More Button -->
+			{#if hasMore}
+				<div class="load-more-container">
+					<Button variant="ghost" onclick={loadMore} disabled={loading} class="load-more-button">
+						{#if loading}
+							<LoadingSpinner buttonSize="small" />
+							Loading...
+						{:else}
+							Load More
+						{/if}
+					</Button>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.media-selector {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		padding: $unit-3x $unit-4x;
+	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: $unit-2x;
+		margin-bottom: $unit-3x;
+		flex-shrink: 0;
+	}
+
+	.search-filters {
+		display: flex;
+		gap: $unit-2x;
+		flex: 1;
+		max-width: 600px;
+	}
+
+	.filter-select {
+		padding: $unit $unit-2x;
+		border: 1px solid $grey-80;
+		border-radius: $card-corner-radius;
+		background-color: white;
+		font-size: 0.875rem;
+		min-width: 120px;
+
+		&:focus {
+			outline: none;
+			border-color: $blue-60;
+			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+		}
+	}
+
+	.results-info {
+		margin-bottom: $unit-2x;
+		flex-shrink: 0;
+	}
+
+	.total-count {
+		font-size: 0.875rem;
+		color: $grey-30;
+	}
+
+	.media-grid-container {
+		flex: 1;
+		overflow-y: auto;
+		min-height: 0;
+	}
+
+	.loading-container,
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: $unit-6x;
+		text-align: center;
+		color: $grey-40;
+		min-height: 300px;
+
+		svg {
+			margin-bottom: $unit-2x;
+			color: $grey-60;
+		}
+
+		h3 {
+			margin: 0 0 $unit 0;
+			font-size: 1.125rem;
+			font-weight: 600;
+			color: $grey-20;
+		}
+
+		p {
+			margin: 0;
+			font-size: 0.875rem;
+		}
+	}
+
+	.media-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+		gap: $unit-2x;
+		padding-bottom: $unit-2x;
+	}
+
+	.media-item {
+		display: flex;
+		flex-direction: column;
+		background: white;
+		border: 2px solid $grey-90;
+		border-radius: $card-corner-radius;
+		padding: $unit;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		text-align: left;
+		width: 100%;
+
+		&:hover {
+			border-color: $grey-70;
+			transform: translateY(-1px);
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		}
+
+		&.selected {
+			border-color: $blue-60;
+			background-color: rgba(59, 130, 246, 0.05);
+		}
+
+		&:focus {
+			outline: none;
+			border-color: $blue-60;
+			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+		}
+	}
+
+	.media-thumbnail {
+		position: relative;
+		width: 100%;
+		height: 120px;
+		border-radius: calc($card-corner-radius - 2px);
+		overflow: hidden;
+		background-color: $grey-95;
+		margin-bottom: $unit;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.media-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		color: $grey-60;
+		background-color: $grey-95;
+	}
+
+	.selection-checkbox {
+		position: absolute;
+		top: $unit;
+		left: $unit;
+		z-index: 2;
+
+		input {
+			width: 18px;
+			height: 18px;
+			cursor: pointer;
+		}
+	}
+
+	.selected-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(59, 130, 246, 0.2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: $blue-60;
+	}
+
+	.media-info {
+		flex: 1;
+	}
+
+	.media-filename {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-10;
+		margin-bottom: $unit-half;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.media-indicators {
+		display: flex;
+		gap: $unit-half;
+		flex-wrap: wrap;
+		margin-bottom: $unit-half;
+	}
+
+	.media-meta {
+		display: flex;
+		gap: $unit;
+		font-size: 0.75rem;
+		color: $grey-40;
+	}
+
+	// Indicator pill styles
+	.indicator-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: $unit-half;
+		padding: 2px $unit;
+		border-radius: 4px;
+		font-size: 0.625rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		line-height: 1;
+
+		svg {
+			width: 8px;
+			height: 8px;
+			flex-shrink: 0;
+		}
+
+		&.photography {
+			background-color: rgba(139, 92, 246, 0.1);
+			color: #7c3aed;
+			border: 1px solid rgba(139, 92, 246, 0.2);
+
+			svg {
+				fill: #7c3aed;
+			}
+		}
+
+		&.alt-text {
+			background-color: rgba(34, 197, 94, 0.1);
+			color: #16a34a;
+			border: 1px solid rgba(34, 197, 94, 0.2);
+		}
+
+		&.no-alt-text {
+			background-color: rgba(239, 68, 68, 0.1);
+			color: #dc2626;
+			border: 1px solid rgba(239, 68, 68, 0.2);
+		}
+	}
+
+	.load-more-container {
+		display: flex;
+		justify-content: center;
+		padding: $unit-3x 0;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 768px) {
+		.media-selector {
+			padding: $unit-2x;
+		}
+
+		.controls {
+			flex-direction: column;
+			align-items: stretch;
+			gap: $unit-2x;
+		}
+
+		.search-filters {
+			max-width: none;
+		}
+
+		.media-grid {
+			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+			gap: $unit;
+		}
+
+		.media-thumbnail {
+			height: 100px;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/MediaUploadModal.svelte b/src/lib/components/admin/MediaUploadModal.svelte
new file mode 100644
index 0000000..cccb38a
--- /dev/null
+++ b/src/lib/components/admin/MediaUploadModal.svelte
@@ -0,0 +1,618 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import Button from './Button.svelte'
+	import LoadingSpinner from './LoadingSpinner.svelte'
+
+	interface Props {
+		isOpen: boolean
+		onClose: () => void
+		onUploadComplete: () => void
+	}
+
+	let { isOpen = $bindable(), onClose, onUploadComplete }: Props = $props()
+
+	let files = $state<File[]>([])
+	let dragActive = $state(false)
+	let isUploading = $state(false)
+	let uploadProgress = $state<Record<string, number>>({})
+	let uploadErrors = $state<string[]>([])
+	let successCount = $state(0)
+	let fileInput: HTMLInputElement
+
+	// Reset state when modal opens/closes
+	$effect(() => {
+		if (!isOpen) {
+			files = []
+			dragActive = false
+			isUploading = false
+			uploadProgress = {}
+			uploadErrors = []
+			successCount = 0
+		}
+	})
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault()
+		dragActive = true
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault()
+		dragActive = false
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		dragActive = false
+
+		const droppedFiles = Array.from(event.dataTransfer?.files || [])
+		addFiles(droppedFiles)
+	}
+
+	function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement
+		const selectedFiles = Array.from(target.files || [])
+		addFiles(selectedFiles)
+	}
+
+	function addFiles(newFiles: File[]) {
+		// Filter for image files
+		const imageFiles = newFiles.filter((file) => file.type.startsWith('image/'))
+
+		if (imageFiles.length !== newFiles.length) {
+			uploadErrors = [
+				...uploadErrors,
+				`${newFiles.length - imageFiles.length} non-image files were skipped`
+			]
+		}
+
+		files = [...files, ...imageFiles]
+	}
+
+	function removeFile(index: number) {
+		files = files.filter((_, i) => i !== index)
+		// Clear any related upload progress
+		const fileName = files[index]?.name
+		if (fileName && uploadProgress[fileName]) {
+			const { [fileName]: removed, ...rest } = uploadProgress
+			uploadProgress = rest
+		}
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 Bytes'
+		const k = 1024
+		const sizes = ['Bytes', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+	}
+
+	async function uploadFiles() {
+		if (files.length === 0) return
+
+		isUploading = true
+		uploadErrors = []
+		successCount = 0
+		uploadProgress = {}
+
+		const auth = localStorage.getItem('admin_auth')
+		if (!auth) {
+			uploadErrors = ['Authentication required']
+			isUploading = false
+			return
+		}
+
+		// Upload files individually to show progress
+		for (const file of files) {
+			try {
+				const formData = new FormData()
+				formData.append('file', file)
+
+				const response = await fetch('/api/media/upload', {
+					method: 'POST',
+					headers: {
+						Authorization: `Basic ${auth}`
+					},
+					body: formData
+				})
+
+				if (!response.ok) {
+					const error = await response.json()
+					uploadErrors = [...uploadErrors, `${file.name}: ${error.message || 'Upload failed'}`]
+				} else {
+					successCount++
+					uploadProgress = { ...uploadProgress, [file.name]: 100 }
+				}
+			} catch (error) {
+				uploadErrors = [...uploadErrors, `${file.name}: Network error`]
+			}
+		}
+
+		isUploading = false
+
+		// If all uploads succeeded, close modal and refresh media list
+		if (successCount === files.length && uploadErrors.length === 0) {
+			setTimeout(() => {
+				onUploadComplete()
+				onClose()
+			}, 1500)
+		}
+	}
+
+	function clearAll() {
+		files = []
+		uploadProgress = {}
+		uploadErrors = []
+		successCount = 0
+	}
+
+	function handleClose() {
+		if (!isUploading) {
+			onClose()
+		}
+	}
+</script>
+
+<Modal bind:isOpen on:close={handleClose} size="large">
+	<div class="upload-modal-content">
+		<div class="modal-header">
+			<h2>Upload Media</h2>
+		</div>
+		<!-- Drop Zone -->
+		<div class="modal-inner-content">
+			<div
+				class="drop-zone"
+				class:active={dragActive}
+				class:has-files={files.length > 0}
+				ondragover={handleDragOver}
+				ondragleave={handleDragLeave}
+				ondrop={handleDrop}
+			>
+				<div class="drop-zone-content">
+					{#if files.length === 0}
+						<div class="upload-icon">
+							<svg
+								width="48"
+								height="48"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<polyline
+									points="14,2 14,8 20,8"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<line
+									x1="16"
+									y1="13"
+									x2="8"
+									y2="13"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<line
+									x1="16"
+									y1="17"
+									x2="8"
+									y2="17"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<polyline
+									points="10,9 9,9 8,9"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</div>
+						<h3>Drop images here</h3>
+						<p>or click to browse and select files</p>
+						<p class="upload-hint">Supports JPG, PNG, GIF, WebP, and SVG files</p>
+					{:else}
+						<div class="file-count">
+							<strong>{files.length} file{files.length !== 1 ? 's' : ''} selected</strong>
+							<p>Drop more files to add them, or click to browse</p>
+						</div>
+					{/if}
+				</div>
+
+				<input
+					bind:this={fileInput}
+					type="file"
+					multiple
+					accept="image/*"
+					onchange={handleFileSelect}
+					class="hidden-input"
+				/>
+
+				<button
+					type="button"
+					class="drop-zone-button"
+					onclick={() => fileInput.click()}
+					disabled={isUploading}
+				>
+					{dragActive ? 'Drop files' : 'Click to browse'}
+				</button>
+			</div>
+		</div>
+
+		<!-- File List -->
+		{#if files.length > 0}
+			<div class="file-list">
+				<div class="file-list-header">
+					<h3>Files to Upload</h3>
+					<div class="file-actions">
+						<Button
+							variant="secondary"
+							buttonSize="small"
+							onclick={clearAll}
+							disabled={isUploading}
+						>
+							Clear All
+						</Button>
+						<Button
+							variant="primary"
+							buttonSize="small"
+							onclick={uploadFiles}
+							disabled={isUploading || files.length === 0}
+						>
+							{#if isUploading}
+								<LoadingSpinner buttonSize="small" />
+								Uploading...
+							{:else}
+								Upload {files.length} File{files.length !== 1 ? 's' : ''}
+							{/if}
+						</Button>
+					</div>
+				</div>
+
+				<div class="files">
+					{#each files as file, index}
+						<div class="file-item">
+							<div class="file-preview">
+								{#if file.type.startsWith('image/')}
+									<img src={URL.createObjectURL(file)} alt={file.name} />
+								{:else}
+									<div class="file-icon">📄</div>
+								{/if}
+							</div>
+
+							<div class="file-info">
+								<div class="file-name">{file.name}</div>
+								<div class="file-size">{formatFileSize(file.size)}</div>
+
+								{#if uploadProgress[file.name]}
+									<div class="progress-bar">
+										<div class="progress-fill" style="width: {uploadProgress[file.name]}%"></div>
+									</div>
+								{/if}
+							</div>
+
+							{#if !isUploading}
+								<button
+									type="button"
+									class="remove-button"
+									onclick={() => removeFile(index)}
+									title="Remove file"
+								>
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<line x1="18" y1="6" x2="6" y2="18"></line>
+										<line x1="6" y1="6" x2="18" y2="18"></line>
+									</svg>
+								</button>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Upload Results -->
+		{#if successCount > 0 || uploadErrors.length > 0}
+			<div class="upload-results">
+				{#if successCount > 0}
+					<div class="success-message">
+						✅ Successfully uploaded {successCount} file{successCount !== 1 ? 's' : ''}
+						{#if successCount === files.length && uploadErrors.length === 0}
+							<br /><small>Closing modal...</small>
+						{/if}
+					</div>
+				{/if}
+
+				{#if uploadErrors.length > 0}
+					<div class="error-messages">
+						<h4>Upload Errors:</h4>
+						{#each uploadErrors as error}
+							<div class="error-item">❌ {error}</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</Modal>
+
+<style lang="scss">
+	.upload-modal-content {
+		display: flex;
+		flex-direction: column;
+		max-height: 70vh;
+		overflow-y: auto;
+	}
+
+	.modal-header {
+		display: flex;
+		flex-direction: row;
+		padding: $unit-2x $unit-3x $unit $unit-3x;
+
+		h2 {
+			margin: 0;
+			font-size: 1.5rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+	}
+
+	.modal-inner-content {
+		padding: $unit $unit-3x $unit-3x;
+	}
+
+	.drop-zone {
+		border: 2px dashed $grey-80;
+		border-radius: $unit-2x;
+		padding: $unit-6x $unit-4x;
+		text-align: center;
+		position: relative;
+		background: $grey-95;
+		transition: all 0.2s ease;
+
+		&.active {
+			border-color: #3b82f6;
+			background: rgba(59, 130, 246, 0.05);
+		}
+
+		&.has-files {
+			padding: $unit-4x;
+		}
+
+		&:hover {
+			border-color: $grey-60;
+			background: $grey-90;
+		}
+	}
+
+	.drop-zone-content {
+		pointer-events: none;
+
+		.upload-icon {
+			color: $grey-50;
+			margin-bottom: $unit-2x;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+			color: $grey-20;
+			margin-bottom: $unit;
+		}
+
+		p {
+			color: $grey-40;
+			margin-bottom: $unit-half;
+		}
+
+		.upload-hint {
+			font-size: 0.875rem;
+			color: $grey-50;
+		}
+
+		.file-count {
+			strong {
+				color: $grey-20;
+				font-size: 1.1rem;
+			}
+		}
+	}
+
+	.hidden-input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.drop-zone-button {
+		position: absolute;
+		inset: 0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: transparent;
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+
+	.file-list {
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit-2x;
+		padding: $unit-3x;
+	}
+
+	.file-list-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: $unit-3x;
+		padding-bottom: $unit-2x;
+		border-bottom: 1px solid $grey-85;
+
+		h3 {
+			margin: 0;
+			color: $grey-20;
+		}
+
+		.file-actions {
+			display: flex;
+			gap: $unit-2x;
+		}
+	}
+
+	.files {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.file-item {
+		display: flex;
+		align-items: center;
+		gap: $unit-3x;
+		padding: $unit-2x;
+		background: $grey-95;
+		border-radius: $unit;
+		border: 1px solid $grey-85;
+	}
+
+	.file-preview {
+		width: 60px;
+		height: 60px;
+		border-radius: $unit;
+		overflow: hidden;
+		background: $grey-90;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.file-icon {
+			font-size: 1.5rem;
+		}
+	}
+
+	.file-info {
+		flex: 1;
+
+		.file-name {
+			font-weight: 500;
+			color: $grey-20;
+			margin-bottom: $unit-half;
+		}
+
+		.file-size {
+			font-size: 0.875rem;
+			color: $grey-50;
+			margin-bottom: $unit-half;
+		}
+	}
+
+	.progress-bar {
+		width: 100%;
+		height: 4px;
+		background: $grey-85;
+		border-radius: 2px;
+		overflow: hidden;
+
+		.progress-fill {
+			height: 100%;
+			background: #3b82f6;
+			transition: width 0.3s ease;
+		}
+	}
+
+	.remove-button {
+		background: none;
+		border: none;
+		color: $grey-50;
+		cursor: pointer;
+		padding: $unit;
+		border-radius: 50%;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $red-60;
+			color: white;
+		}
+	}
+
+	.upload-results {
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit-2x;
+		padding: $unit-3x;
+
+		.success-message {
+			color: #16a34a;
+			margin-bottom: $unit-2x;
+
+			small {
+				color: $grey-50;
+			}
+		}
+
+		.error-messages {
+			h4 {
+				color: $red-60;
+				margin-bottom: $unit-2x;
+			}
+
+			.error-item {
+				color: $red-60;
+				margin-bottom: $unit;
+				font-size: 0.925rem;
+			}
+		}
+	}
+
+	// Responsive adjustments
+	@media (max-width: 768px) {
+		.upload-modal-content {
+			max-height: 80vh;
+		}
+
+		.drop-zone {
+			padding: $unit-4x $unit-2x;
+		}
+
+		.file-item {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: $unit-2x;
+		}
+
+		.file-list-header {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: $unit-2x;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/MetadataPopover.svelte b/src/lib/components/admin/MetadataPopover.svelte
new file mode 100644
index 0000000..fe4970a
--- /dev/null
+++ b/src/lib/components/admin/MetadataPopover.svelte
@@ -0,0 +1,329 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import Input from './Input.svelte'
+
+	type Props = {
+		post: any
+		postType: 'post' | 'essay'
+		slug: string
+		excerpt: string
+		tags: string[]
+		tagInput: string
+		triggerElement: HTMLElement
+		onAddTag: () => void
+		onRemoveTag: (tag: string) => void
+		onDelete: () => void
+	}
+
+	let {
+		post,
+		postType,
+		slug = $bindable(),
+		excerpt = $bindable(),
+		tags = $bindable(),
+		tagInput = $bindable(),
+		triggerElement,
+		onAddTag,
+		onRemoveTag,
+		onDelete
+	}: Props = $props()
+
+	let popoverElement: HTMLDivElement
+	let portalTarget: HTMLElement
+
+	function updatePosition() {
+		if (!popoverElement || !triggerElement) return
+
+		const triggerRect = triggerElement.getBoundingClientRect()
+		const popoverRect = popoverElement.getBoundingClientRect()
+		const viewportWidth = window.innerWidth
+		const viewportHeight = window.innerHeight
+
+		// Find the AdminPage container to align with its right edge
+		const adminPage =
+			document.querySelector('.admin-page') || document.querySelector('[data-admin-page]')
+		const adminPageRect = adminPage?.getBoundingClientRect()
+
+		// Position below the trigger button
+		let top = triggerRect.bottom + 8
+
+		// Align closer to the right edge of AdminPage, with some padding
+		let left: number
+		if (adminPageRect) {
+			// Position to align with AdminPage right edge minus padding
+			left = adminPageRect.right - popoverRect.width - 24
+		} else {
+			// Fallback to viewport-based positioning
+			left = triggerRect.right - popoverRect.width
+		}
+
+		// Ensure we don't go off-screen horizontally
+		if (left < 16) {
+			left = 16
+		} else if (left + popoverRect.width > viewportWidth - 16) {
+			left = viewportWidth - popoverRect.width - 16
+		}
+
+		// Check if popover would go off-screen vertically (both top and bottom)
+		if (top + popoverRect.height > viewportHeight - 16) {
+			// Try positioning above the trigger
+			const topAbove = triggerRect.top - popoverRect.height - 8
+			if (topAbove >= 16) {
+				top = topAbove
+			} else {
+				// If neither above nor below works, position with maximum available space
+				if (triggerRect.top > viewportHeight - triggerRect.bottom) {
+					// More space above - position at top of viewport with margin
+					top = 16
+				} else {
+					// More space below - position at bottom of viewport with margin
+					top = viewportHeight - popoverRect.height - 16
+				}
+			}
+		}
+
+		// Also check if positioning below would place us off the top (shouldn't happen but be safe)
+		if (top < 16) {
+			top = 16
+		}
+
+		popoverElement.style.position = 'fixed'
+		popoverElement.style.top = `${top}px`
+		popoverElement.style.left = `${left}px`
+		popoverElement.style.zIndex = '1000'
+	}
+
+	onMount(() => {
+		// Create portal target
+		portalTarget = document.createElement('div')
+		portalTarget.style.position = 'absolute'
+		portalTarget.style.top = '0'
+		portalTarget.style.left = '0'
+		portalTarget.style.pointerEvents = 'none'
+		document.body.appendChild(portalTarget)
+
+		// Initial positioning
+		updatePosition()
+
+		// Update position on scroll/resize
+		const handleUpdate = () => updatePosition()
+		window.addEventListener('scroll', handleUpdate, true)
+		window.addEventListener('resize', handleUpdate)
+
+		return () => {
+			window.removeEventListener('scroll', handleUpdate, true)
+			window.removeEventListener('resize', handleUpdate)
+			if (portalTarget) {
+				document.body.removeChild(portalTarget)
+			}
+		}
+	})
+
+	$effect(() => {
+		if (popoverElement && portalTarget && triggerElement) {
+			portalTarget.appendChild(popoverElement)
+			portalTarget.style.pointerEvents = 'auto'
+			updatePosition()
+		}
+	})
+</script>
+
+<div class="metadata-popover" bind:this={popoverElement}>
+	<div class="popover-content">
+		<h3>Post Settings</h3>
+
+		<Input label="Slug" bind:value={slug} placeholder="post-slug" />
+
+		{#if postType === 'essay'}
+			<Input
+				type="textarea"
+				label="Excerpt"
+				bind:value={excerpt}
+				rows={3}
+				placeholder="Brief description..."
+			/>
+		{/if}
+
+		<div class="tags-section">
+			<Input
+				label="Tags"
+				bind:value={tagInput}
+				onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), onAddTag())}
+				placeholder="Add tags..."
+			/>
+			<button type="button" onclick={onAddTag} class="add-tag-btn">Add</button>
+
+			{#if tags.length > 0}
+				<div class="tags">
+					{#each tags as tag}
+						<span class="tag">
+							{tag}
+							<button onclick={() => onRemoveTag(tag)}>×</button>
+						</span>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<div class="metadata">
+			<p>Created: {new Date(post.createdAt).toLocaleString()}</p>
+			<p>Updated: {new Date(post.updatedAt).toLocaleString()}</p>
+			{#if post.publishedAt}
+				<p>Published: {new Date(post.publishedAt).toLocaleString()}</p>
+			{/if}
+		</div>
+	</div>
+
+	<div class="popover-footer">
+		<button class="btn btn-danger" onclick={onDelete}>
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+				<path
+					d="M4 4L12 12M4 12L12 4"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+			Delete Post
+		</button>
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.metadata-popover {
+		background: white;
+		border: 1px solid $grey-80;
+		border-radius: $card-corner-radius;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		min-width: 420px;
+		max-width: 480px;
+		display: flex;
+		flex-direction: column;
+		pointer-events: auto;
+	}
+
+	.popover-content {
+		padding: $unit-3x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+
+		h3 {
+			font-size: 1.125rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.popover-footer {
+		padding: $unit-3x;
+		border-top: 1px solid $grey-90;
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.tags-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.add-tag-btn {
+		align-self: flex-start;
+		margin-top: $unit-half;
+		padding: $unit $unit-2x;
+		background: $grey-10;
+		color: white;
+		border: none;
+		border-radius: 6px;
+		font-size: 13px;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+
+		&:hover {
+			background: $grey-20;
+		}
+	}
+
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+		margin-top: $unit;
+	}
+
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px $unit-2x;
+		background: $grey-80;
+		border-radius: 20px;
+		font-size: 0.75rem;
+
+		button {
+			background: none;
+			border: none;
+			color: $grey-40;
+			cursor: pointer;
+			padding: 0;
+			font-size: 1rem;
+			line-height: 1;
+
+			&:hover {
+				color: $grey-10;
+			}
+		}
+	}
+
+	.metadata {
+		font-size: 0.75rem;
+		color: $grey-40;
+
+		p {
+			margin: $unit-half 0;
+		}
+	}
+
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.btn-small {
+			padding: $unit $unit-2x;
+			font-size: 0.875rem;
+		}
+
+		&.btn-danger {
+			background-color: #dc2626;
+			color: white;
+
+			&:hover:not(:disabled) {
+				background-color: #b91c1c;
+			}
+		}
+	}
+
+	@include breakpoint('phone') {
+		.metadata-popover {
+			min-width: 280px;
+			max-width: calc(100vw - 2rem);
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/Modal.svelte b/src/lib/components/admin/Modal.svelte
new file mode 100644
index 0000000..e0f9fd7
--- /dev/null
+++ b/src/lib/components/admin/Modal.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte'
+	import { fade } from 'svelte/transition'
+	import Button from './Button.svelte'
+
+	export let isOpen = false
+	export let size: 'small' | 'medium' | 'large' | 'full' = 'medium'
+	export let closeOnBackdrop = true
+	export let closeOnEscape = true
+	export let showCloseButton = true
+
+	const dispatch = createEventDispatcher()
+
+	function handleClose() {
+		isOpen = false
+		dispatch('close')
+	}
+
+	function handleBackdropClick() {
+		if (closeOnBackdrop) {
+			handleClose()
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && closeOnEscape) {
+			handleClose()
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('keydown', handleKeydown)
+		return () => {
+			document.removeEventListener('keydown', handleKeydown)
+		}
+	})
+
+	$: modalClass = `modal-${size}`
+</script>
+
+{#if isOpen}
+	<div class="modal-backdrop" on:click={handleBackdropClick} transition:fade={{ duration: 200 }}>
+		<div
+			class="modal {modalClass}"
+			on:click|stopPropagation
+			transition:fade={{ duration: 200, delay: 50 }}
+		>
+			{#if showCloseButton}
+				<Button
+					variant="ghost"
+					iconOnly
+					onclick={handleClose}
+					aria-label="Close modal"
+					class="close-button"
+				>
+					<svg
+						slot="icon"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M6 6L18 18M6 18L18 6"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Button>
+			{/if}
+
+			<div class="modal-content">
+				<slot />
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	.modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 1000;
+		padding: $unit-2x;
+	}
+
+	.modal {
+		background-color: white;
+		border-radius: $card-corner-radius;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		position: relative;
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		&.modal-small {
+			width: 100%;
+			max-width: 400px;
+		}
+
+		&.modal-medium {
+			width: 100%;
+			max-width: 600px;
+		}
+
+		&.modal-large {
+			width: 100%;
+			max-width: 800px;
+		}
+
+		&.modal-full {
+			width: 100%;
+			max-width: 1200px;
+			height: 90vh;
+		}
+	}
+
+	:global(.close-button) {
+		position: absolute !important;
+		top: $unit-2x;
+		right: $unit-2x;
+		z-index: 1;
+	}
+
+	.modal-content {
+		overflow-y: auto;
+		flex: 1;
+	}
+</style>
diff --git a/src/lib/components/admin/PhotoPostForm.svelte b/src/lib/components/admin/PhotoPostForm.svelte
new file mode 100644
index 0000000..5946c96
--- /dev/null
+++ b/src/lib/components/admin/PhotoPostForm.svelte
@@ -0,0 +1,348 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminPage from './AdminPage.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import ImageUploader from './ImageUploader.svelte'
+	import Editor from './Editor.svelte'
+	import type { JSONContent } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		postId?: number
+		initialData?: {
+			title?: string
+			content?: JSONContent
+			featuredImage?: string
+			status: 'draft' | 'published'
+			tags?: string[]
+		}
+		mode: 'create' | 'edit'
+	}
+
+	let { postId, initialData, mode }: Props = $props()
+
+	// State
+	let isSaving = $state(false)
+	let error = $state('')
+	let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
+
+	// Form data
+	let title = $state(initialData?.title || '')
+	let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
+	let featuredImage = $state<Media | null>(null)
+	let tags = $state(initialData?.tags?.join(', ') || '')
+
+	// Editor ref
+	let editorRef: any
+
+	// Initialize featured image if editing
+	$effect(() => {
+		if (initialData?.featuredImage && mode === 'edit') {
+			// Create a minimal Media object for display
+			featuredImage = {
+				id: -1,
+				filename: 'photo.jpg',
+				originalName: 'photo.jpg',
+				mimeType: 'image/jpeg',
+				size: 0,
+				url: initialData.featuredImage,
+				thumbnailUrl: initialData.featuredImage,
+				width: null,
+				height: null,
+				altText: null,
+				description: null,
+				usedIn: [],
+				createdAt: new Date(),
+				updatedAt: new Date()
+			}
+		}
+	})
+
+	function handleFeaturedImageUpload(media: Media) {
+		featuredImage = media
+
+		// If no title is set, use the media filename as a starting point
+		if (!title.trim() && media.originalName) {
+			title = media.originalName.replace(/\.[^/.]+$/, '') // Remove file extension
+		}
+	}
+
+	function createSlug(title: string): string {
+		return title
+			.toLowerCase()
+			.trim()
+			.replace(/[^\w\s-]/g, '') // Remove special characters
+			.replace(/\s+/g, '-') // Replace spaces with hyphens
+			.replace(/-+/g, '-') // Replace multiple hyphens with single
+			.replace(/^-|-$/g, '') // Remove leading/trailing hyphens
+	}
+
+	async function handleSave() {
+		// Validate required fields
+		if (!featuredImage) {
+			error = 'Please upload a photo for this post'
+			return
+		}
+
+		if (!title.trim()) {
+			error = 'Please enter a title for this post'
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+
+			// Get editor content
+			let editorContent = content
+			if (editorRef) {
+				const editorData = await editorRef.save()
+				if (editorData) {
+					editorContent = editorData
+				}
+			}
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			// Generate slug from title
+			const slug = createSlug(title)
+
+			const payload = {
+				title: title.trim(),
+				slug,
+				type: 'photo',
+				status,
+				content: editorContent,
+				featuredImage: featuredImage.url,
+				tags: tags
+					? tags
+							.split(',')
+							.map((tag) => tag.trim())
+							.filter(Boolean)
+					: [],
+			}
+
+			const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
+			const method = mode === 'edit' ? 'PUT' : 'POST'
+
+			const response = await fetch(url, {
+				method,
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			})
+
+			if (!response.ok) {
+				throw new Error(`Failed to ${mode === 'edit' ? 'update' : 'create'} photo post`)
+			}
+
+			const savedPost = await response.json()
+
+			// Redirect to posts list or edit page
+			if (mode === 'create') {
+				goto(`/admin/posts/${savedPost.id}/edit`)
+			} else {
+				goto('/admin/posts')
+			}
+		} catch (err) {
+			error = `Failed to ${mode === 'edit' ? 'update' : 'create'} photo post`
+			console.error(err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+
+	async function handlePublish() {
+		status = 'published'
+		await handleSave()
+	}
+
+	async function handleDraft() {
+		status = 'draft'
+		await handleSave()
+	}
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-content">
+			<h1>{mode === 'edit' ? 'Edit Photo Post' : 'New Photo Post'}</h1>
+			<p class="subtitle">Share a photo with a caption and description</p>
+		</div>
+
+		<div class="header-actions">
+			{#if !isSaving}
+				<Button variant="ghost" onclick={() => goto('/admin/posts')}>Cancel</Button>
+				<Button
+					variant="secondary"
+					onclick={handleDraft}
+					disabled={!featuredImage || !title.trim()}
+				>
+					Save Draft
+				</Button>
+				<Button
+					variant="primary"
+					onclick={handlePublish}
+					disabled={!featuredImage || !title.trim()}
+				>
+					{isSaving ? 'Publishing...' : 'Publish'}
+				</Button>
+			{/if}
+		</div>
+	</header>
+
+	<div class="form-container">
+		{#if error}
+			<div class="error-message">{error}</div>
+		{/if}
+
+		<div class="form-content">
+			<!-- Featured Photo Upload -->
+			<div class="form-section">
+				<ImageUploader
+					label="Photo"
+					value={featuredImage}
+					onUpload={handleFeaturedImageUpload}
+					placeholder="Upload the main photo for this post"
+					helpText="This photo will be displayed prominently in the post"
+					showBrowseLibrary={true}
+					required={true}
+				/>
+			</div>
+
+			<!-- Title -->
+			<div class="form-section">
+				<Input
+					type="text"
+					label="Title"
+					bind:value={title}
+					placeholder="Enter a title for this photo post"
+					required={true}
+					fullWidth={true}
+				/>
+			</div>
+
+			<!-- Caption/Content -->
+			<div class="form-section">
+				<label class="editor-label">Caption & Description</label>
+				<p class="editor-help">Add a caption or tell the story behind this photo</p>
+				<div class="editor-container">
+					<Editor
+						bind:this={editorRef}
+						bind:data={content}
+						placeholder="Write a caption or description for this photo..."
+						minHeight={200}
+						autofocus={false}
+						class="photo-post-editor"
+					/>
+				</div>
+			</div>
+
+			<!-- Tags -->
+			<div class="form-section">
+				<Input
+					type="text"
+					label="Tags (Optional)"
+					bind:value={tags}
+					placeholder="nature, photography, travel (comma-separated)"
+					helpText="Add tags to help categorize this photo post"
+					fullWidth={true}
+				/>
+			</div>
+		</div>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	.header-content {
+		h1 {
+			font-size: 1.75rem;
+			font-weight: 700;
+			margin: 0 0 $unit-half 0;
+			color: $grey-10;
+		}
+
+		.subtitle {
+			font-size: 0.875rem;
+			color: $grey-40;
+			margin: 0;
+		}
+	}
+
+	.header-actions {
+		display: flex;
+		gap: $unit-2x;
+		align-items: center;
+	}
+
+	.form-container {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: $unit-4x;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x;
+		}
+	}
+
+	.error-message {
+		background-color: #fee;
+		color: #d33;
+		padding: $unit-3x;
+		border-radius: $unit;
+		margin-bottom: $unit-4x;
+		text-align: center;
+	}
+
+	.form-content {
+		background: white;
+		border-radius: $unit-2x;
+		padding: $unit-6x;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+		@include breakpoint('phone') {
+			padding: $unit-4x;
+		}
+	}
+
+	.form-section {
+		margin-bottom: $unit-6x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.editor-label {
+		display: block;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $grey-20;
+		margin-bottom: $unit-half;
+	}
+
+	.editor-help {
+		font-size: 0.8rem;
+		color: $grey-40;
+		margin: 0 0 $unit-2x 0;
+		line-height: 1.4;
+	}
+
+	.editor-container {
+		border: 1px solid $grey-80;
+		border-radius: $unit;
+		overflow: hidden;
+
+		:global(.photo-post-editor) {
+			min-height: 200px;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/PostDropdown.svelte b/src/lib/components/admin/PostDropdown.svelte
new file mode 100644
index 0000000..e801de3
--- /dev/null
+++ b/src/lib/components/admin/PostDropdown.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import UniverseComposer from './UniverseComposer.svelte'
+	import Button from './Button.svelte'
+	import ChevronDownIcon from '$icons/chevron-down.svg?raw'
+
+	let isOpen = $state(false)
+	let buttonRef: HTMLElement
+	let showComposer = $state(false)
+	let selectedType = $state<'post' | 'essay'>('post')
+
+	const postTypes = [
+		{ value: 'essay', label: 'Essay' },
+		{ value: 'post', label: 'Post' }
+	]
+
+	function handleSelection(type: string) {
+		isOpen = false
+
+		if (type === 'essay') {
+			// Essays go straight to the full page
+			goto('/admin/posts/new?type=essay')
+		} else if (type === 'post') {
+			// Posts open in modal
+			selectedType = 'post'
+			showComposer = true
+		}
+	}
+
+	function handleComposerClose() {
+		showComposer = false
+	}
+
+	function handleComposerSaved() {
+		showComposer = false
+		// Reload posts - in a real app, you'd emit an event to parent
+		window.location.reload()
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (!buttonRef?.contains(event.target as Node)) {
+			isOpen = false
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside)
+			return () => document.removeEventListener('click', handleClickOutside)
+		}
+	})
+</script>
+
+<div class="dropdown-container">
+	<Button
+		bind:this={buttonRef}
+		variant="primary"
+		buttonSize="large"
+		onclick={(e) => {
+			e.stopPropagation()
+			isOpen = !isOpen
+		}}
+		iconPosition="right"
+	>
+		New Post
+		{#snippet icon()}
+			<div class="chevron">
+				{@html ChevronDownIcon}
+			</div>
+		{/snippet}
+	</Button>
+
+	{#if isOpen}
+		<ul class="dropdown-menu">
+			{#each postTypes as type}
+				<li class="dropdown-item" onclick={() => handleSelection(type.value)}>
+					<div class="dropdown-icon">
+						{#if type.value === 'essay'}
+							<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+								<path
+									d="M3 5C3 3.89543 3.89543 3 5 3H11L17 9V15C17 16.1046 16.1046 17 15 17H5C3.89543 17 3 16.1046 3 15V5Z"
+									stroke="currentColor"
+									stroke-width="1.5"
+								/>
+								<path d="M11 3V9H17" stroke="currentColor" stroke-width="1.5" />
+								<path
+									d="M7 13H13"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+								<path
+									d="M7 10H13"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+							</svg>
+						{:else if type.value === 'post'}
+							<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+								<path
+									d="M4 3C2.89543 3 2 3.89543 2 5V11C2 12.1046 2.89543 13 4 13H6L8 16V13H13C14.1046 13 15 12.1046 15 11V5C15 3.89543 14.1046 3 13 3H4Z"
+									stroke="currentColor"
+									stroke-width="1.5"
+								/>
+								<path d="M5 7H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+								<path d="M5 9H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+							</svg>
+						{/if}
+					</div>
+					<span class="dropdown-label">{type.label}</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<UniverseComposer
+	bind:isOpen={showComposer}
+	initialPostType={selectedType}
+	on:close={handleComposerClose}
+	on:saved={handleComposerSaved}
+	on:switch-to-essay
+/>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.dropdown-container {
+		position: relative;
+	}
+
+	.chevron {
+		transition: transform 0.2s ease;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + $unit);
+		right: 0;
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit-2x;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		min-width: 140px;
+		z-index: 100;
+		overflow: hidden;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		padding: $unit-2x $unit-3x;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		border: none;
+		background: none;
+		width: 100%;
+		text-align: left;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+
+		&:first-child {
+			border-radius: $unit-2x $unit-2x 0 0;
+		}
+
+		&:last-child {
+			border-radius: 0 0 $unit-2x $unit-2x;
+		}
+
+		&:only-child {
+			border-radius: $unit-2x;
+		}
+	}
+
+	.dropdown-icon {
+		color: $grey-40;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+
+		svg {
+			width: 20px;
+			height: 20px;
+		}
+	}
+
+	.dropdown-label {
+		font-size: 0.925rem;
+		font-weight: 500;
+		color: $grey-10;
+	}
+</style>
diff --git a/src/lib/components/admin/PostListItem.svelte b/src/lib/components/admin/PostListItem.svelte
new file mode 100644
index 0000000..cf7cba5
--- /dev/null
+++ b/src/lib/components/admin/PostListItem.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminByline from './AdminByline.svelte'
+
+	interface Post {
+		id: number
+		slug: string
+		postType: string
+		title: string | null
+		content: any // JSON content
+		excerpt: string | null
+		status: string
+		tags: string[] | null
+		linkUrl: string | null
+		linkDescription: string | null
+		featuredImage: string | null
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+	}
+
+	interface Props {
+		post: Post
+	}
+
+	let { post }: Props = $props()
+
+	const postTypeLabels: Record<string, string> = {
+		post: 'Post',
+		essay: 'Essay',
+		// Legacy types for backward compatibility
+		blog: 'Essay',
+		microblog: 'Post',
+		link: 'Post',
+		photo: 'Post',
+		album: 'Album'
+	}
+
+	function handlePostClick() {
+		goto(`/admin/posts/${post.id}/edit`)
+	}
+
+	function getPostSnippet(post: Post): string {
+		// Try excerpt first
+		if (post.excerpt) {
+			return post.excerpt.length > 150 ? post.excerpt.substring(0, 150) + '...' : post.excerpt
+		}
+
+		// Try to extract text from content JSON
+		if (post.content) {
+			let textContent = ''
+
+			if (typeof post.content === 'object' && post.content.content) {
+				// BlockNote/TipTap format
+				function extractText(node: any): string {
+					if (node.text) return node.text
+					if (node.content && Array.isArray(node.content)) {
+						return node.content.map(extractText).join(' ')
+					}
+					return ''
+				}
+				textContent = extractText(post.content)
+			} else if (typeof post.content === 'string') {
+				textContent = post.content
+			}
+
+			if (textContent) {
+				return textContent.length > 150 ? textContent.substring(0, 150) + '...' : textContent
+			}
+		}
+
+		// Fallback to link description for link posts
+		if (post.linkDescription) {
+			return post.linkDescription.length > 150
+				? post.linkDescription.substring(0, 150) + '...'
+				: post.linkDescription
+		}
+
+		// Default fallback
+		return `${postTypeLabels[post.postType] || post.postType} without content`
+	}
+
+	function formatDate(dateString: string): string {
+		const date = new Date(dateString)
+		const now = new Date()
+		const diffTime = now.getTime() - date.getTime()
+		const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+
+		if (diffDays === 0) {
+			return 'today'
+		} else if (diffDays === 1) {
+			return 'yesterday'
+		} else if (diffDays < 7) {
+			return `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`
+		} else {
+			return date.toLocaleDateString('en-US', {
+				month: 'short',
+				day: 'numeric',
+				year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+			})
+		}
+	}
+</script>
+
+<article class="post-item" onclick={handlePostClick}>
+	{#if post.title}
+		<h3 class="post-title">{post.title}</h3>
+	{/if}
+
+	<div class="post-content">
+		{#if post.linkUrl}
+			<p class="post-link-url">{post.linkUrl}</p>
+		{/if}
+		<p class="post-preview">{getPostSnippet(post)}</p>
+	</div>
+
+	<AdminByline
+		sections={[
+			postTypeLabels[post.postType] || post.postType,
+			post.status === 'published' ? 'Published' : 'Draft',
+			post.status === 'published' && post.publishedAt
+				? `published ${formatDate(post.publishedAt)}`
+				: `created ${formatDate(post.createdAt)}`
+		]}
+	/>
+</article>
+
+<style lang="scss">
+	.post-item {
+		background: transparent;
+		border: none;
+		border-radius: $unit-2x;
+		padding: $unit-2x;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+
+		&:hover {
+			background: $grey-95;
+		}
+	}
+
+	.post-title {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0;
+		color: $grey-10;
+		line-height: 1.4;
+	}
+
+	.post-content {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.post-link-url {
+		margin: 0;
+		font-size: 0.875rem;
+		color: $blue-60;
+		word-break: break-all;
+	}
+
+	.post-preview {
+		margin: 0;
+		font-size: 0.925rem;
+		line-height: 1.5;
+		color: $grey-30;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	// Responsive adjustments
+	@media (max-width: 768px) {
+		.post-item {
+			padding: $unit-2x;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/PostMetadataPopover.svelte b/src/lib/components/admin/PostMetadataPopover.svelte
new file mode 100644
index 0000000..19ebbf1
--- /dev/null
+++ b/src/lib/components/admin/PostMetadataPopover.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import GenericMetadataPopover, { type MetadataConfig } from './GenericMetadataPopover.svelte'
+
+	type Props = {
+		post: any
+		postType: 'post' | 'essay'
+		slug: string
+		tags: string[]
+		tagInput: string
+		triggerElement: HTMLElement
+		onAddTag: () => void
+		onRemoveTag: (tag: string) => void
+		onDelete: () => void
+		onClose?: () => void
+	}
+
+	let {
+		post,
+		postType,
+		slug = $bindable(),
+		tags = $bindable(),
+		tagInput = $bindable(),
+		triggerElement,
+		onAddTag,
+		onRemoveTag,
+		onDelete,
+		onClose = () => {}
+	}: Props = $props()
+
+	function handleFieldUpdate(key: string, value: any) {
+		if (key === 'slug') {
+			slug = value
+		} else if (key === 'tagInput') {
+			tagInput = value
+		}
+	}
+
+	const config: MetadataConfig = {
+		title: 'Post Settings',
+		fields: [
+			{
+				type: 'input',
+				key: 'slug',
+				label: 'Slug',
+				placeholder: 'post-slug'
+			},
+			{
+				type: 'tags',
+				key: 'tags',
+				label: 'Tags',
+				placeholder: 'Add tags...'
+			},
+			{
+				type: 'metadata',
+				key: 'metadata'
+			}
+		],
+		deleteButton: {
+			label: 'Delete Post',
+			action: onDelete
+		}
+	}
+
+	// Create a reactive data object
+	let popoverData = $state({
+		slug,
+		tags,
+		tagInput,
+		createdAt: post.createdAt,
+		updatedAt: post.updatedAt,
+		publishedAt: post.publishedAt
+	})
+
+	// Sync changes back
+	$effect(() => {
+		popoverData = {
+			slug,
+			tags,
+			tagInput,
+			createdAt: post.createdAt,
+			updatedAt: post.updatedAt,
+			publishedAt: post.publishedAt
+		}
+	})
+</script>
+
+<GenericMetadataPopover
+	{config}
+	bind:data={popoverData}
+	{triggerElement}
+	onUpdate={handleFieldUpdate}
+	{onAddTag}
+	{onRemoveTag}
+	{onClose}
+/>
\ No newline at end of file
diff --git a/src/lib/components/admin/ProjectBrandingForm.svelte b/src/lib/components/admin/ProjectBrandingForm.svelte
new file mode 100644
index 0000000..dbab34b
--- /dev/null
+++ b/src/lib/components/admin/ProjectBrandingForm.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import Input from './Input.svelte'
+	import ImageUploader from './ImageUploader.svelte'
+	import type { ProjectFormData } from '$lib/types/project'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		formData: ProjectFormData
+	}
+
+	let { formData = $bindable() }: Props = $props()
+
+	// Convert logoUrl string to Media object for ImageUploader
+	let logoMedia = $state<Media | null>(null)
+
+	// Update logoMedia when logoUrl changes
+	$effect(() => {
+		if (formData.logoUrl && !logoMedia) {
+			// Create a minimal Media object from the URL for display
+			logoMedia = {
+				id: -1, // Temporary ID for existing URLs
+				filename: 'logo.svg',
+				originalName: 'logo.svg',
+				mimeType: 'image/svg+xml',
+				size: 0,
+				url: formData.logoUrl,
+				thumbnailUrl: formData.logoUrl,
+				width: null,
+				height: null,
+				altText: null,
+				description: null,
+				usedIn: [],
+				createdAt: new Date(),
+				updatedAt: new Date()
+			}
+		} else if (!formData.logoUrl) {
+			logoMedia = null
+		}
+	})
+
+	function handleLogoUpload(media: Media) {
+		formData.logoUrl = media.url
+		logoMedia = media
+	}
+
+	function handleLogoRemove() {
+		formData.logoUrl = ''
+		logoMedia = null
+	}
+</script>
+
+<div class="form-section">
+	<h2>Branding</h2>
+
+	<ImageUploader
+		label="Project Logo"
+		value={logoMedia}
+		onUpload={handleLogoUpload}
+		aspectRatio="1:1"
+		allowAltText={true}
+		maxFileSize={0.5}
+		placeholder="Drag and drop an SVG logo here, or click to browse"
+		helpText="Upload an SVG logo for project thumbnail (max 500KB). Square logos work best."
+		showBrowseLibrary={true}
+		compact={true}
+	/>
+</div>
+
+<style lang="scss">
+	.form-section {
+		margin-bottom: $unit-6x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		h2 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0 0 $unit-3x;
+			color: $grey-10;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectForm.svelte b/src/lib/components/admin/ProjectForm.svelte
new file mode 100644
index 0000000..4fa1bd5
--- /dev/null
+++ b/src/lib/components/admin/ProjectForm.svelte
@@ -0,0 +1,447 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { z } from 'zod'
+	import AdminPage from './AdminPage.svelte'
+	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
+	import FormFieldWrapper from './FormFieldWrapper.svelte'
+	import Editor from './Editor.svelte'
+	import ProjectMetadataForm from './ProjectMetadataForm.svelte'
+	import ProjectBrandingForm from './ProjectBrandingForm.svelte'
+	import ProjectGalleryForm from './ProjectGalleryForm.svelte'
+	import ProjectStylingForm from './ProjectStylingForm.svelte'
+	import Button from './Button.svelte'
+	import StatusDropdown from './StatusDropdown.svelte'
+	import { projectSchema } from '$lib/schemas/project'
+	import type { Project, ProjectFormData } from '$lib/types/project'
+	import { defaultProjectFormData } from '$lib/types/project'
+
+	interface Props {
+		project?: Project | null
+		mode: 'create' | 'edit'
+	}
+
+	let { project = null, mode }: Props = $props()
+
+	// State
+	let isLoading = $state(mode === 'edit')
+	let isSaving = $state(false)
+	let error = $state('')
+	let successMessage = $state('')
+	let activeTab = $state('metadata')
+	let validationErrors = $state<Record<string, string>>({})
+
+	// Form data
+	let formData = $state<ProjectFormData>({ ...defaultProjectFormData })
+
+	// Ref to the editor component
+	let editorRef: any
+
+	const tabOptions = [
+		{ value: 'metadata', label: 'Metadata' },
+		{ value: 'case-study', label: 'Case Study' }
+	]
+
+	// Watch for project changes and populate form data
+	$effect(() => {
+		if (project && mode === 'edit') {
+			populateFormData(project)
+		} else if (mode === 'create') {
+			isLoading = false
+		}
+	})
+
+	function populateFormData(data: Project) {
+		formData = {
+			title: data.title || '',
+			subtitle: data.subtitle || '',
+			description: data.description || '',
+			year: data.year || new Date().getFullYear(),
+			client: data.client || '',
+			role: data.role || '',
+			projectType: data.projectType || 'work',
+			externalUrl: data.externalUrl || '',
+			featuredImage: data.featuredImage || null,
+			backgroundColor: data.backgroundColor || '',
+			highlightColor: data.highlightColor || '',
+			logoUrl: data.logoUrl || '',
+			gallery: data.gallery || null,
+			status: data.status || 'draft',
+			password: data.password || '',
+			caseStudyContent: data.caseStudyContent || {
+				type: 'doc',
+				content: [{ type: 'paragraph' }]
+			}
+		}
+		isLoading = false
+	}
+
+	function validateForm() {
+		try {
+			projectSchema.parse({
+				title: formData.title,
+				description: formData.description || undefined,
+				year: formData.year,
+				client: formData.client || undefined,
+				externalUrl: formData.externalUrl || undefined,
+				backgroundColor: formData.backgroundColor || undefined,
+				highlightColor: formData.highlightColor || undefined,
+				status: formData.status,
+				password: formData.password || undefined
+			})
+			validationErrors = {}
+			return true
+		} catch (err) {
+			if (err instanceof z.ZodError) {
+				const errors: Record<string, string> = {}
+				err.errors.forEach((e) => {
+					if (e.path[0]) {
+						errors[e.path[0].toString()] = e.message
+					}
+				})
+				validationErrors = errors
+			}
+			return false
+		}
+	}
+
+	function handleEditorChange(content: any) {
+		formData.caseStudyContent = content
+	}
+
+	async function handleSave() {
+		// Check if we're on the case study tab and should save editor content
+		if (activeTab === 'case-study' && editorRef) {
+			const editorData = await editorRef.save()
+			if (editorData) {
+				formData.caseStudyContent = editorData
+			}
+		}
+
+		if (!validateForm()) {
+			error = 'Please fix the validation errors'
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+			successMessage = ''
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const payload = {
+				title: formData.title,
+				subtitle: formData.subtitle,
+				description: formData.description,
+				year: formData.year,
+				client: formData.client,
+				role: formData.role,
+				projectType: formData.projectType,
+				externalUrl: formData.externalUrl,
+				featuredImage: formData.featuredImage,
+				logoUrl: formData.logoUrl,
+				gallery: formData.gallery && formData.gallery.length > 0 ? formData.gallery : null,
+				backgroundColor: formData.backgroundColor,
+				highlightColor: formData.highlightColor,
+				status: formData.status,
+				password: formData.status === 'password-protected' ? formData.password : null,
+				caseStudyContent:
+					formData.caseStudyContent &&
+					formData.caseStudyContent.content &&
+					formData.caseStudyContent.content.length > 0
+						? formData.caseStudyContent
+						: null
+			}
+
+			const url = mode === 'edit' ? `/api/projects/${project?.id}` : '/api/projects'
+			const method = mode === 'edit' ? 'PUT' : 'POST'
+
+			const response = await fetch(url, {
+				method,
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			})
+
+			if (!response.ok) {
+				throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} project`)
+			}
+
+			const savedProject = await response.json()
+			successMessage = `Project ${mode === 'edit' ? 'saved' : 'created'} successfully!`
+
+			setTimeout(() => {
+				successMessage = ''
+				if (mode === 'create') {
+					goto(`/admin/projects/${savedProject.id}/edit`)
+				}
+			}, 1500)
+		} catch (err) {
+			error = `Failed to ${mode === 'edit' ? 'save' : 'create'} project`
+			console.error(err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+	async function handleStatusChange(newStatus: string) {
+		formData.status = newStatus as any
+		await handleSave()
+	}
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-left">
+			<button class="btn-icon" onclick={() => goto('/admin/projects')}>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div class="header-center">
+			<AdminSegmentedControl
+				options={tabOptions}
+				value={activeTab}
+				onChange={(value) => (activeTab = value)}
+			/>
+		</div>
+		<div class="header-actions">
+			{#if !isLoading}
+				{#if formData.status === 'published'}
+					<Button variant="primary" buttonSize="large" onclick={handleSave} disabled={isSaving}>
+						{isSaving ? 'Saving...' : 'Save'}
+					</Button>
+				{:else}
+					<StatusDropdown
+						currentStatus={formData.status}
+						onStatusChange={handleStatusChange}
+						disabled={isSaving}
+						isLoading={isSaving}
+						primaryAction={{ label: 'Publish', status: 'published' }}
+						dropdownActions={[
+							{ label: 'Save as Draft', status: 'draft' },
+							{ label: 'List Only', status: 'list-only', show: formData.status !== 'list-only' },
+							{
+								label: 'Password Protected',
+								status: 'password-protected',
+								show: formData.status !== 'password-protected'
+							}
+						]}
+					/>
+				{/if}
+			{/if}
+		</div>
+	</header>
+
+	<div class="admin-container">
+		{#if isLoading}
+			<div class="loading">Loading project...</div>
+		{:else}
+			{#if error}
+				<div class="error-message">{error}</div>
+			{/if}
+
+			{#if successMessage}
+				<div class="success-message">{successMessage}</div>
+			{/if}
+
+			<div class="tab-panels">
+				<!-- Metadata Panel -->
+				<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
+					<div class="form-content">
+						<form
+							onsubmit={(e) => {
+								e.preventDefault()
+								handleSave()
+							}}
+						>
+							<ProjectMetadataForm bind:formData {validationErrors} />
+							<ProjectBrandingForm bind:formData />
+							<ProjectGalleryForm bind:formData />
+							<ProjectStylingForm bind:formData {validationErrors} />
+						</form>
+					</div>
+				</div>
+
+				<!-- Case Study Panel -->
+				<div class="panel case-study-wrapper" class:active={activeTab === 'case-study'}>
+					<div class="editor-content">
+						<Editor
+							bind:this={editorRef}
+							bind:data={formData.caseStudyContent}
+							onChange={handleEditorChange}
+							placeholder="Write your case study here..."
+							minHeight={400}
+							autofocus={false}
+							class="case-study-editor"
+						/>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	header {
+		display: grid;
+		grid-template-columns: 250px 1fr 250px;
+		align-items: center;
+		width: 100%;
+		gap: $unit-2x;
+
+		.header-left {
+			width: 250px;
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
+		}
+
+		.header-center {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.header-actions {
+			width: 250px;
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
+
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.admin-container {
+		width: 100%;
+		margin: 0 auto;
+		padding: 0 $unit-2x $unit-4x;
+		box-sizing: border-box;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x $unit-2x;
+		}
+	}
+
+	.tab-panels {
+		position: relative;
+
+		.panel {
+			display: none;
+			box-sizing: border-box;
+
+			&.active {
+				display: block;
+			}
+		}
+	}
+
+	.content-wrapper {
+		background: white;
+		border-radius: $unit-2x;
+		padding: 0;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.loading,
+	.error {
+		text-align: center;
+		padding: $unit-6x;
+		color: $grey-40;
+	}
+
+	.error {
+		color: #d33;
+	}
+
+	.error-message,
+	.success-message {
+		padding: $unit-3x;
+		border-radius: $unit;
+		margin-bottom: $unit-4x;
+		max-width: 700px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.error-message {
+		background-color: #fee;
+		color: #d33;
+	}
+
+	.success-message {
+		background-color: #efe;
+		color: #363;
+	}
+
+	.form-content {
+		@include breakpoint('phone') {
+			padding: $unit-3x;
+		}
+	}
+
+	.form-content form {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-6x;
+	}
+
+	.case-study-wrapper {
+		background: white;
+		padding: 0;
+		min-height: 80vh;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		@include breakpoint('phone') {
+			height: 600px;
+		}
+	}
+
+	.editor-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
+
+		/* The editor component will handle its own padding and scrolling */
+		:global(.case-study-editor) {
+			flex: 1;
+			overflow: auto;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectGalleryForm.svelte b/src/lib/components/admin/ProjectGalleryForm.svelte
new file mode 100644
index 0000000..6fa40c6
--- /dev/null
+++ b/src/lib/components/admin/ProjectGalleryForm.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import GalleryUploader from './GalleryUploader.svelte'
+	import type { ProjectFormData } from '$lib/types/project'
+	import type { Media } from '@prisma/client'
+
+	interface Props {
+		formData: ProjectFormData
+	}
+
+	let { formData = $bindable() }: Props = $props()
+
+	// Convert gallery array to Media objects for GalleryUploader
+	let galleryMedia = $state<Media[]>([])
+
+	// Update galleryMedia when gallery changes
+	$effect(() => {
+		if (formData.gallery && Array.isArray(formData.gallery)) {
+			// Convert gallery URLs/objects to Media objects
+			galleryMedia = formData.gallery.map((item, index) => {
+				if (typeof item === 'string') {
+					// Handle legacy URL strings
+					return {
+						id: -(index + 100), // Temporary negative IDs for URLs
+						filename: `gallery-${index}.jpg`,
+						originalName: `gallery-${index}.jpg`,
+						mimeType: 'image/jpeg',
+						size: 0,
+						url: item,
+						thumbnailUrl: item,
+						width: null,
+						height: null,
+						altText: null,
+						description: null,
+						usedIn: [],
+						createdAt: new Date(),
+						updatedAt: new Date()
+					}
+				} else {
+					// Already a Media object
+					return item
+				}
+			})
+		} else {
+			galleryMedia = []
+		}
+	})
+
+	function handleGalleryUpload(media: Media[]) {
+		// Store as Media objects in the gallery field
+		formData.gallery = media
+		galleryMedia = media
+	}
+
+	function handleGalleryReorder(media: Media[]) {
+		formData.gallery = media
+		galleryMedia = media
+	}
+</script>
+
+<div class="form-section">
+	<h2>Project Gallery</h2>
+
+	<GalleryUploader
+		label="Gallery Images"
+		value={galleryMedia}
+		onUpload={handleGalleryUpload}
+		onReorder={handleGalleryReorder}
+		maxItems={12}
+		allowAltText={true}
+		maxFileSize={10}
+		placeholder="Drag and drop images here to create a project gallery"
+		helpText="Upload project screenshots, mockups, or other visual assets. You can reorder images by dragging them."
+		showBrowseLibrary={true}
+	/>
+</div>
+
+<style lang="scss">
+	.form-section {
+		margin-bottom: $unit-6x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		h2 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0 0 $unit-3x;
+			color: $grey-10;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectListItem.svelte b/src/lib/components/admin/ProjectListItem.svelte
new file mode 100644
index 0000000..86495c5
--- /dev/null
+++ b/src/lib/components/admin/ProjectListItem.svelte
@@ -0,0 +1,262 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { createEventDispatcher, onMount } from 'svelte'
+	import AdminByline from './AdminByline.svelte'
+
+	interface Project {
+		id: number
+		title: string
+		subtitle: string | null
+		year: number
+		client: string | null
+		status: string
+		projectType: string
+		logoUrl: string | null
+		backgroundColor: string | null
+		highlightColor: string | null
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+	}
+
+	interface Props {
+		project: Project
+	}
+
+	let { project }: Props = $props()
+
+	const dispatch = createEventDispatcher<{
+		edit: { project: Project }
+		togglePublish: { project: Project }
+		delete: { project: Project }
+	}>()
+
+	let isDropdownOpen = $state(false)
+
+	function formatRelativeTime(dateString: string): string {
+		const date = new Date(dateString)
+		const now = new Date()
+		const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+		if (diffInSeconds < 60) return 'just now'
+
+		const minutes = Math.floor(diffInSeconds / 60)
+		if (diffInSeconds < 3600) return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`
+
+		const hours = Math.floor(diffInSeconds / 3600)
+		if (diffInSeconds < 86400) return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`
+
+		const days = Math.floor(diffInSeconds / 86400)
+		if (diffInSeconds < 2592000) return `${days} ${days === 1 ? 'day' : 'days'} ago`
+
+		const months = Math.floor(diffInSeconds / 2592000)
+		if (diffInSeconds < 31536000) return `${months} ${months === 1 ? 'month' : 'months'} ago`
+
+		const years = Math.floor(diffInSeconds / 31536000)
+		return `${years} ${years === 1 ? 'year' : 'years'} ago`
+	}
+
+	function handleProjectClick() {
+		goto(`/admin/projects/${project.id}/edit`)
+	}
+
+	function handleToggleDropdown(event: MouseEvent) {
+		event.stopPropagation()
+		isDropdownOpen = !isDropdownOpen
+	}
+
+	function handleEdit() {
+		dispatch('edit', { project })
+	}
+
+	function handleTogglePublish() {
+		dispatch('togglePublish', { project })
+	}
+
+	function handleDelete() {
+		dispatch('delete', { project })
+	}
+
+	onMount(() => {
+		function handleCloseDropdowns() {
+			isDropdownOpen = false
+		}
+
+		document.addEventListener('closeDropdowns', handleCloseDropdowns)
+		return () => document.removeEventListener('closeDropdowns', handleCloseDropdowns)
+	})
+</script>
+
+<div
+	class="project-item"
+	role="button"
+	tabindex="0"
+	onclick={handleProjectClick}
+	onkeydown={(e) => e.key === 'Enter' && handleProjectClick()}
+>
+	<div class="project-logo" style="background-color: {project.backgroundColor || '#F5F5F5'}">
+		{#if project.logoUrl}
+			<img src={project.logoUrl} alt="{project.title} logo" class="logo-image" />
+		{/if}
+	</div>
+
+	<div class="project-info">
+		<h3 class="project-title">{project.title}</h3>
+		<AdminByline
+			sections={[
+				project.projectType === 'work' ? 'Work' : 'Labs',
+				project.status === 'published' ? 'Published' : 'Draft',
+				project.status === 'published' && project.publishedAt
+					? `Published ${formatRelativeTime(project.publishedAt)}`
+					: `Created ${formatRelativeTime(project.createdAt)}`
+			]}
+		/>
+	</div>
+
+	<div class="dropdown-container">
+		<button class="action-button" onclick={handleToggleDropdown} aria-label="Project actions">
+			<svg
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle cx="10" cy="4" r="1.5" fill="currentColor" />
+				<circle cx="10" cy="10" r="1.5" fill="currentColor" />
+				<circle cx="10" cy="16" r="1.5" fill="currentColor" />
+			</svg>
+		</button>
+
+		{#if isDropdownOpen}
+			<div class="dropdown-menu">
+				<button class="dropdown-item" onclick={handleEdit}>Edit project</button>
+				<button class="dropdown-item" onclick={handleTogglePublish}>
+					{project.status === 'published' ? 'Unpublish' : 'Publish'} project
+				</button>
+				<div class="dropdown-divider"></div>
+				<button class="dropdown-item danger" onclick={handleDelete}>Delete project</button>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	.project-item {
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		gap: $unit-2x;
+		padding: $unit-2x;
+		background: white;
+		border-radius: $unit-2x;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		width: 100%;
+		text-align: left;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+	}
+
+	.project-logo {
+		flex-shrink: 0;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: $unit;
+		padding: $unit-2x;
+		box-sizing: border-box;
+
+		.logo-image {
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+		}
+	}
+
+	.project-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+		min-width: 0;
+	}
+
+	.project-title {
+		font-size: 1rem;
+		font-weight: 600;
+		color: $grey-10;
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dropdown-container {
+		position: relative;
+		flex-shrink: 0;
+	}
+
+	.action-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: $unit;
+		cursor: pointer;
+		color: $grey-30;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: $unit-half;
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		min-width: 180px;
+		z-index: 10;
+	}
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.875rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+
+		&.danger {
+			color: $red-60;
+		}
+	}
+
+	.dropdown-divider {
+		height: 1px;
+		background-color: $grey-90;
+		margin: $unit-half 0;
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectMetadataForm.svelte b/src/lib/components/admin/ProjectMetadataForm.svelte
new file mode 100644
index 0000000..d8fce21
--- /dev/null
+++ b/src/lib/components/admin/ProjectMetadataForm.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+	import Input from './Input.svelte'
+	import Select from './Select.svelte'
+	import ImageUploader from './ImageUploader.svelte'
+	import type { ProjectFormData } from '$lib/types/project'
+
+	interface Props {
+		formData: ProjectFormData
+		validationErrors: Record<string, string>
+	}
+
+	let { formData = $bindable(), validationErrors }: Props = $props()
+
+	function handleFeaturedImageUpload(media: Media) {
+		formData.featuredImage = media.url
+	}
+</script>
+
+<div class="form-section">
+	<Input
+		label="Title"
+		required
+		error={validationErrors.title}
+		bind:value={formData.title}
+		placeholder="Project title"
+	/>
+
+	<Input
+		type="textarea"
+		label="Description"
+		error={validationErrors.description}
+		bind:value={formData.description}
+		rows={3}
+		placeholder="Short description for project cards"
+	/>
+
+	<Select
+		label="Project Type"
+		bind:value={formData.projectType}
+		error={validationErrors.projectType}
+		options={[
+			{ value: 'work', label: 'Work' },
+			{ value: 'labs', label: 'Labs' }
+		]}
+		helpText="Choose whether this project appears in the Work tab or Labs tab"
+	/>
+
+	<div class="form-row">
+		<Input
+			type="number"
+			label="Year"
+			required
+			error={validationErrors.year}
+			bind:value={formData.year}
+			min={1990}
+			max={new Date().getFullYear() + 1}
+		/>
+
+		<Input
+			label="Client"
+			error={validationErrors.client}
+			bind:value={formData.client}
+			placeholder="Client or company name"
+		/>
+	</div>
+
+	<Input
+		type="url"
+		label="External URL"
+		error={validationErrors.externalUrl}
+		bind:value={formData.externalUrl}
+		placeholder="https://example.com"
+	/>
+
+	<ImageUploader
+		label="Featured Image"
+		value={null}
+		onUpload={handleFeaturedImageUpload}
+		placeholder="Upload a featured image for this project"
+		showBrowseLibrary={true}
+	/>
+
+	<Select
+		label="Project Status"
+		bind:value={formData.status}
+		error={validationErrors.status}
+		options={[
+			{ value: 'draft', label: 'Draft (Hidden)' },
+			{ value: 'published', label: 'Published' },
+			{ value: 'list-only', label: 'List Only (No Access)' },
+			{ value: 'password-protected', label: 'Password Protected' }
+		]}
+		helpText="Control how this project appears on the public site"
+	/>
+
+	{#if formData.status === 'password-protected'}
+		<Input
+			type="password"
+			label="Project Password"
+			required
+			error={validationErrors.password}
+			bind:value={formData.password}
+			placeholder="Enter a password for this project"
+			helpText="Users will need this password to access the project details"
+		/>
+	{/if}
+</div>
+
+<style lang="scss">
+	.form-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.form-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: $unit-2x;
+		padding-bottom: $unit-3x;
+
+		@include breakpoint('phone') {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectStylingForm.svelte b/src/lib/components/admin/ProjectStylingForm.svelte
new file mode 100644
index 0000000..971f164
--- /dev/null
+++ b/src/lib/components/admin/ProjectStylingForm.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Input from './Input.svelte'
+	import type { ProjectFormData } from '$lib/types/project'
+
+	interface Props {
+		formData: ProjectFormData
+		validationErrors: Record<string, string>
+	}
+
+	let { formData = $bindable(), validationErrors }: Props = $props()
+</script>
+
+<div class="form-section">
+	<h2>Styling</h2>
+
+	<div class="form-row">
+		<Input
+			type="text"
+			bind:value={formData.backgroundColor}
+			label="Background Color"
+			helpText="Hex color for project card"
+			error={validationErrors.backgroundColor}
+			placeholder="#FFFFFF"
+			pattern="^#[0-9A-Fa-f]{6}$"
+			colorSwatch={true}
+		/>
+
+		<Input
+			type="text"
+			bind:value={formData.highlightColor}
+			label="Highlight Color"
+			helpText="Accent color for the project"
+			error={validationErrors.highlightColor}
+			placeholder="#000000"
+			pattern="^#[0-9A-Fa-f]{6}$"
+			colorSwatch={true}
+		/>
+	</div>
+</div>
+
+<style lang="scss">
+	.form-section {
+		margin-bottom: $unit-6x;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		h2 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0 0 $unit-3x;
+			color: $grey-10;
+		}
+	}
+
+	.form-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: $unit-2x;
+
+		@include breakpoint('phone') {
+			grid-template-columns: 1fr;
+		}
+
+		:global(.input-wrapper) {
+			margin-bottom: 0;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/ProjectTitleCell.svelte b/src/lib/components/admin/ProjectTitleCell.svelte
new file mode 100644
index 0000000..5d3873e
--- /dev/null
+++ b/src/lib/components/admin/ProjectTitleCell.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		item: {
+			title: string
+			backgroundColor: string | null
+		}
+	}
+
+	let { item }: Props = $props()
+</script>
+
+<div class="title-cell">
+	{#if item.backgroundColor}
+		<span class="color-dot" style="background-color: {item.backgroundColor}"></span>
+	{/if}
+	<span class="title">{item.title}</span>
+</div>
+
+<style lang="scss">
+	.title-cell {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+	}
+
+	.color-dot {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	.title {
+		color: $grey-10;
+	}
+</style>
diff --git a/src/lib/components/admin/PublishDropdown.svelte b/src/lib/components/admin/PublishDropdown.svelte
new file mode 100644
index 0000000..679aa8e
--- /dev/null
+++ b/src/lib/components/admin/PublishDropdown.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+	import DropdownMenuContainer from './DropdownMenuContainer.svelte'
+	import DropdownItem from './DropdownItem.svelte'
+
+	interface Props {
+		onPublish: () => void
+		onSaveDraft: () => void
+		disabled?: boolean
+		isLoading?: boolean
+		publishText?: string
+		saveDraftText?: string
+		loadingText?: string
+		showDropdown?: boolean
+	}
+
+	let {
+		onPublish,
+		onSaveDraft,
+		disabled = false,
+		isLoading = false,
+		publishText = 'Publish',
+		saveDraftText = 'Save as Draft',
+		loadingText = 'Publishing...',
+		showDropdown = true
+	}: Props = $props()
+
+	let isDropdownOpen = $state(false)
+
+	function handlePublishClick() {
+		onPublish()
+		isDropdownOpen = false
+	}
+
+	function handleSaveDraftClick() {
+		onSaveDraft()
+		isDropdownOpen = false
+	}
+
+	function handleDropdownToggle(e: MouseEvent) {
+		e.stopPropagation()
+		isDropdownOpen = !isDropdownOpen
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.publish-dropdown')) {
+			isDropdownOpen = false
+		}
+	}
+
+	$effect(() => {
+		if (isDropdownOpen) {
+			document.addEventListener('click', handleClickOutside)
+			return () => document.removeEventListener('click', handleClickOutside)
+		}
+	})
+</script>
+
+<div class="publish-dropdown">
+	<Button
+		variant="primary"
+		buttonSize="large"
+		onclick={handlePublishClick}
+		disabled={disabled || isLoading}
+	>
+		{isLoading ? loadingText : publishText}
+	</Button>
+
+	{#if showDropdown}
+		<Button
+			variant="ghost"
+			iconOnly
+			buttonSize="large"
+			onclick={handleDropdownToggle}
+			disabled={disabled || isLoading}
+		>
+			<svg slot="icon" width="12" height="12" viewBox="0 0 12 12" fill="none">
+				<path
+					d="M3 4.5L6 7.5L9 4.5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</Button>
+
+		{#if isDropdownOpen}
+			<DropdownMenuContainer>
+				<DropdownItem onclick={handleSaveDraftClick}>
+					{saveDraftText}
+				</DropdownItem>
+			</DropdownMenuContainer>
+		{/if}
+	{/if}
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.publish-dropdown {
+		position: relative;
+		display: flex;
+		gap: $unit-half;
+	}
+</style>
diff --git a/src/lib/components/admin/SaveActionsGroup.svelte b/src/lib/components/admin/SaveActionsGroup.svelte
new file mode 100644
index 0000000..fc57eb4
--- /dev/null
+++ b/src/lib/components/admin/SaveActionsGroup.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+	import PublishDropdown from './PublishDropdown.svelte'
+
+	interface Props {
+		status: 'draft' | 'published' | string
+		onSave: (status?: string) => void
+		disabled?: boolean
+		isLoading?: boolean
+		canSave?: boolean
+		customActions?: Array<{
+			label: string
+			status: string
+			variant?: 'default' | 'danger'
+		}>
+	}
+
+	let {
+		status,
+		onSave,
+		disabled = false,
+		isLoading = false,
+		canSave = true,
+		customActions = []
+	}: Props = $props()
+
+	function handlePublish() {
+		onSave('published')
+	}
+
+	function handleSaveDraft() {
+		onSave('draft')
+	}
+
+	function handleSave() {
+		onSave()
+	}
+
+	const isDisabled = $derived(disabled || isLoading || !canSave)
+</script>
+
+{#if status === 'draft'}
+	<PublishDropdown
+		onPublish={handlePublish}
+		onSaveDraft={handleSaveDraft}
+		disabled={isDisabled}
+		{isLoading}
+	/>
+{:else if status === 'published'}
+	<Button variant="primary" buttonSize="large" onclick={handleSave} disabled={isDisabled}>
+		{isLoading ? 'Saving...' : 'Save'}
+	</Button>
+{:else}
+	<!-- For other statuses like 'list-only', 'password-protected', etc. -->
+	<Button variant="primary" buttonSize="large" onclick={handleSave} disabled={isDisabled}>
+		{isLoading ? 'Saving...' : 'Save'}
+	</Button>
+{/if}
diff --git a/src/lib/components/admin/Select.svelte b/src/lib/components/admin/Select.svelte
new file mode 100644
index 0000000..345b288
--- /dev/null
+++ b/src/lib/components/admin/Select.svelte
@@ -0,0 +1,212 @@
+<script lang="ts">
+	import type { HTMLSelectAttributes } from 'svelte/elements'
+	import ChevronDownIcon from '$icons/chevron-down.svg?raw'
+
+	interface Option {
+		value: string
+		label: string
+	}
+
+	interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+		options: Option[]
+		value?: string
+		size?: 'small' | 'medium' | 'large'
+		variant?: 'default' | 'minimal'
+		fullWidth?: boolean
+		pill?: boolean
+	}
+
+	let {
+		options,
+		value = $bindable(),
+		size = 'medium',
+		variant = 'default',
+		fullWidth = false,
+		pill = true,
+		class: className = '',
+		...restProps
+	}: Props = $props()
+</script>
+
+<div class="select-wrapper">
+	<select
+		bind:value
+		class="select select-{size} select-{variant} {className}"
+		class:select-full-width={fullWidth}
+		class:select-pill={pill}
+		{...restProps}
+	>
+		{#each options as option}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+	<div class="select-icon">
+		{@html ChevronDownIcon}
+	</div>
+</div>
+
+<style lang="scss">
+	.select-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
+	.select {
+		box-sizing: border-box;
+		color: $grey-20;
+		cursor: pointer;
+		font-family: inherit;
+		transition: all 0.2s ease;
+		appearance: none;
+		padding-right: 36px;
+
+		&:focus {
+			outline: none;
+		}
+
+		&:disabled {
+			color: $grey-60;
+			cursor: not-allowed;
+			opacity: 0.6;
+		}
+
+		// Default variant
+		&.select-default {
+			border: 1px solid $grey-80;
+			background: white;
+			font-weight: 500;
+
+			&:focus {
+				border-color: $blue-50;
+				box-shadow: 0 0 0 3px rgba(20, 130, 193, 0.1);
+			}
+
+			&:disabled {
+				background: $grey-90;
+			}
+		}
+
+		// Minimal variant
+		&.select-minimal {
+			border: none;
+			background: $grey-90;
+			font-weight: 500;
+
+			&:hover {
+				background: $grey-80;
+			}
+
+			&:focus {
+				background: $grey-80;
+			}
+
+			&:disabled {
+				background: transparent;
+			}
+		}
+
+		// Size variants for default variant (accounting for border)
+		&.select-default {
+			&.select-small {
+				padding: calc($unit - 1px) calc($unit * 1.5);
+				font-size: 13px;
+				min-height: 28px;
+				min-width: 120px;
+			}
+
+			&.select-medium {
+				padding: calc($unit - 1px) $unit-2x;
+				font-size: 14px;
+				min-height: 36px;
+				min-width: 160px;
+			}
+
+			&.select-large {
+				padding: calc($unit * 1.5 - 1px) $unit-3x;
+				font-size: 15px;
+				min-height: 44px;
+				min-width: 180px;
+			}
+		}
+
+		// Size variants for minimal variant (no border, card-sized border radius)
+		&.select-minimal {
+			&.select-small {
+				padding: $unit calc($unit * 1.5);
+				font-size: 13px;
+				min-height: 28px;
+				min-width: 120px;
+				border-radius: $corner-radius;
+			}
+
+			&.select-medium {
+				padding: $unit $unit-2x;
+				font-size: 14px;
+				min-height: 36px;
+				min-width: 160px;
+				border-radius: $corner-radius;
+			}
+
+			&.select-large {
+				padding: calc($unit * 1.5) $unit-3x;
+				font-size: 15px;
+				min-height: 44px;
+				min-width: 180px;
+				border-radius: $card-corner-radius;
+			}
+		}
+
+		// Shape variants for default variant only (minimal already has card radius)
+		&.select-default.select-pill {
+			&.select-small {
+				border-radius: 20px;
+			}
+			&.select-medium {
+				border-radius: 24px;
+			}
+			&.select-large {
+				border-radius: 28px;
+			}
+		}
+
+		&.select-default:not(.select-pill) {
+			&.select-small {
+				border-radius: 6px;
+			}
+			&.select-medium {
+				border-radius: 8px;
+			}
+			&.select-large {
+				border-radius: 10px;
+			}
+		}
+
+		// Width variants
+		&.select-full-width {
+			width: 100%;
+			min-width: auto;
+		}
+	}
+
+	.select-icon {
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+		color: $grey-60;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		:global(svg) {
+			width: 16px;
+			height: 16px;
+		}
+	}
+
+	// Full width handling for wrapper
+	.select-wrapper:has(.select-full-width) {
+		width: 100%;
+	}
+</style>
diff --git a/src/lib/components/admin/SimplePostForm.svelte b/src/lib/components/admin/SimplePostForm.svelte
new file mode 100644
index 0000000..833f7b1
--- /dev/null
+++ b/src/lib/components/admin/SimplePostForm.svelte
@@ -0,0 +1,355 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminPage from './AdminPage.svelte'
+	import type { JSONContent } from '@tiptap/core'
+	import Editor from './Editor.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+
+	interface Props {
+		postType: 'post'
+		postId?: number
+		initialData?: {
+			title?: string
+			content?: JSONContent
+			linkUrl?: string
+			linkDescription?: string
+			status: 'draft' | 'published'
+		}
+		mode: 'create' | 'edit'
+	}
+
+	let { postType, postId, initialData, mode }: Props = $props()
+
+	// State
+	let isSaving = $state(false)
+	let error = $state('')
+	let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
+
+	// Form data
+	let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
+	let linkUrl = $state(initialData?.linkUrl || '')
+	let linkDescription = $state(initialData?.linkDescription || '')
+	let title = $state(initialData?.title || '')
+
+	// Character count for posts
+	const maxLength = 280
+	const textContent = $derived(() => {
+		if (!content.content) return ''
+		return content.content
+			.map((node: any) => node.content?.map((n: any) => n.text || '').join('') || '')
+			.join('\n')
+	})
+	const charCount = $derived(textContent().length)
+	const isOverLimit = $derived(charCount > maxLength)
+
+	// Check if form has content
+	const hasContent = $derived(() => {
+		// For posts, check if either content exists or it's a link with URL
+		const hasTextContent = textContent().trim().length > 0
+		const hasLinkContent = linkUrl && linkUrl.trim().length > 0
+		return hasTextContent || hasLinkContent
+	})
+
+	async function handleSave(publishStatus: 'draft' | 'published') {
+		if (isOverLimit) {
+			error = 'Post is too long'
+			return
+		}
+
+		// For link posts, URL is required
+		if (linkUrl && !linkUrl.trim()) {
+			error = 'Link URL is required'
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const payload: any = {
+				type: 'post', // Use simplified post type
+				status: publishStatus,
+				content: content
+			}
+
+			// Add link fields if they're provided
+			if (linkUrl && linkUrl.trim()) {
+				payload.title = title || linkUrl
+				payload.link_url = linkUrl
+				payload.linkDescription = linkDescription
+			}
+
+			const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
+			const method = mode === 'edit' ? 'PUT' : 'POST'
+
+			const response = await fetch(url, {
+				method,
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			})
+
+			if (!response.ok) {
+				throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`)
+			}
+
+			const savedPost = await response.json()
+
+			// Redirect back to posts list after creation
+			goto('/admin/posts')
+		} catch (err) {
+			error = `Failed to ${mode === 'edit' ? 'save' : 'create'} post`
+			console.error(err)
+		} finally {
+			isSaving = false
+		}
+	}
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-left">
+			<Button variant="ghost" iconOnly onclick={() => goto('/admin/posts')}>
+				<svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</Button>
+			<h1>
+				{#if postType === 'microblog'}
+					New Post
+				{:else}
+					Share Link
+				{/if}
+			</h1>
+		</div>
+		<div class="header-actions">
+			<Button variant="secondary" onclick={() => handleSave('draft')} disabled={isSaving}>
+				Save Draft
+			</Button>
+			<Button
+				variant="primary"
+				onclick={() => handleSave('published')}
+				disabled={isSaving || !hasContent() || (postType === 'microblog' && isOverLimit)}
+			>
+				{isSaving ? 'Posting...' : 'Post'}
+			</Button>
+		</div>
+	</header>
+
+	<div class="composer-container">
+		{#if error}
+			<div class="error-message">{error}</div>
+		{/if}
+
+		<div class="composer">
+			{#if postType === 'microblog'}
+				<div class="post-composer">
+					<Editor
+						bind:data={content}
+						placeholder="What's on your mind?"
+						minHeight={120}
+						autofocus={true}
+						class="simple-editor"
+						simpleMode={true}
+					/>
+					<div class="composer-footer">
+						<span class="char-count" class:over-limit={isOverLimit}>
+							{charCount} / {maxLength}
+						</span>
+					</div>
+				</div>
+			{:else if postType === 'link'}
+				<div class="link-composer">
+					<Input
+						type="url"
+						bind:value={linkUrl}
+						placeholder="https://example.com"
+						inputClass="link-input"
+						required
+						autofocus
+					/>
+					<input
+						type="text"
+						bind:value={title}
+						placeholder="Link title (optional)"
+						class="title-input"
+					/>
+					<Input
+						type="textarea"
+						bind:value={linkDescription}
+						placeholder="Why is this interesting?"
+						inputClass="description-input"
+						rows={4}
+					/>
+				</div>
+			{/if}
+		</div>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		gap: $unit-2x;
+
+		.header-left {
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
+
+			h1 {
+				font-size: 1.5rem;
+				font-weight: 700;
+				margin: 0;
+				color: $grey-10;
+			}
+		}
+
+		.header-actions {
+			display: flex;
+			gap: $unit-2x;
+		}
+	}
+
+	.composer-container {
+		max-width: 600px;
+		margin: 0 auto;
+		padding: $unit-3x;
+	}
+
+	.error-message {
+		padding: $unit-2x;
+		border-radius: $unit;
+		margin-bottom: $unit-3x;
+		background-color: #fee;
+		color: #d33;
+		font-size: 0.875rem;
+	}
+
+	.composer {
+		background: white;
+		border-radius: $unit-2x;
+		overflow: hidden;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.post-composer {
+		padding: $unit-3x;
+
+		:global(.simple-editor) {
+			font-size: 1.125rem;
+			line-height: 1.5;
+
+			:global(.tiptap) {
+				min-height: 120px;
+
+				&:focus {
+					outline: none;
+				}
+			}
+		}
+	}
+
+	.composer-footer {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: $unit-2x;
+		padding-top: $unit-2x;
+		border-top: 1px solid $grey-80;
+	}
+
+	.char-count {
+		font-size: 0.875rem;
+		color: $grey-50;
+
+		&.over-limit {
+			color: $red-60;
+			font-weight: 600;
+		}
+	}
+
+	.link-composer {
+		display: flex;
+		flex-direction: column;
+
+		:global(.input-wrapper) {
+			border-radius: 0;
+
+			&:first-child {
+				border-bottom: 1px solid $grey-90;
+			}
+
+			&:last-child {
+				border-top: 1px solid $grey-90;
+			}
+		}
+
+		:global(.link-input) {
+			font-size: 1.125rem;
+			font-weight: 500;
+			color: $primary-color;
+			padding: $unit-3x;
+			border: none;
+			border-radius: 0;
+			background: transparent;
+
+			&:focus {
+				border: none;
+				background: $grey-97;
+			}
+		}
+
+		:global(.description-input) {
+			font-size: 1rem;
+			line-height: 1.5;
+			color: $grey-20;
+			padding: $unit-3x;
+			border: none;
+			border-radius: 0;
+			background: transparent;
+			min-height: 100px;
+
+			&:focus {
+				border: none;
+				background: $grey-97;
+			}
+		}
+	}
+
+	.title-input {
+		width: 100%;
+		padding: $unit-3x;
+		border: none;
+		background: transparent;
+		font-size: 1rem;
+		color: $grey-10;
+		border-bottom: 1px solid $grey-90;
+
+		&:focus {
+			outline: none;
+			background: $grey-97;
+		}
+
+		&::placeholder {
+			color: $grey-60;
+		}
+	}
+</style>
diff --git a/src/lib/components/admin/StatusDropdown.svelte b/src/lib/components/admin/StatusDropdown.svelte
new file mode 100644
index 0000000..1c12b2e
--- /dev/null
+++ b/src/lib/components/admin/StatusDropdown.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import Button from './Button.svelte'
+	import DropdownMenuContainer from './DropdownMenuContainer.svelte'
+	import DropdownItem from './DropdownItem.svelte'
+
+	interface Props {
+		currentStatus: string
+		onStatusChange: (status: string) => void
+		disabled?: boolean
+		isLoading?: boolean
+		primaryAction: {
+			label: string
+			status: string
+		}
+		dropdownActions?: Array<{
+			label: string
+			status: string
+			show?: boolean
+		}>
+	}
+
+	let {
+		currentStatus,
+		onStatusChange,
+		disabled = false,
+		isLoading = false,
+		primaryAction,
+		dropdownActions = []
+	}: Props = $props()
+
+	let isDropdownOpen = $state(false)
+
+	function handlePrimaryAction() {
+		onStatusChange(primaryAction.status)
+		isDropdownOpen = false
+	}
+
+	function handleDropdownAction(status: string) {
+		onStatusChange(status)
+		isDropdownOpen = false
+	}
+
+	function handleDropdownToggle(e: MouseEvent) {
+		e.stopPropagation()
+		isDropdownOpen = !isDropdownOpen
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.status-dropdown')) {
+			isDropdownOpen = false
+		}
+	}
+
+	$effect(() => {
+		if (isDropdownOpen) {
+			document.addEventListener('click', handleClickOutside)
+			return () => document.removeEventListener('click', handleClickOutside)
+		}
+	})
+
+	const availableActions = $derived(
+		dropdownActions.filter((action) => action.show !== false && action.status !== currentStatus)
+	)
+</script>
+
+<div class="status-dropdown">
+	<Button
+		variant="primary"
+		buttonSize="large"
+		onclick={handlePrimaryAction}
+		disabled={disabled || isLoading}
+	>
+		{isLoading ? `${primaryAction.label.replace(/e$/, 'ing')}...` : primaryAction.label}
+	</Button>
+
+	{#if availableActions.length > 0}
+		<Button
+			variant="ghost"
+			iconOnly
+			buttonSize="large"
+			onclick={handleDropdownToggle}
+			disabled={disabled || isLoading}
+		>
+			<svg slot="icon" width="12" height="12" viewBox="0 0 12 12" fill="none">
+				<path
+					d="M3 4.5L6 7.5L9 4.5"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</Button>
+
+		{#if isDropdownOpen}
+			<DropdownMenuContainer>
+				{#each availableActions as action}
+					<DropdownItem onclick={() => handleDropdownAction(action.status)}>
+						{action.label}
+					</DropdownItem>
+				{/each}
+			</DropdownMenuContainer>
+		{/if}
+	{/if}
+</div>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.status-dropdown {
+		position: relative;
+		display: flex;
+		gap: $unit-half;
+	}
+</style>
diff --git a/src/lib/components/admin/UniverseComposer.svelte b/src/lib/components/admin/UniverseComposer.svelte
new file mode 100644
index 0000000..2e77ece
--- /dev/null
+++ b/src/lib/components/admin/UniverseComposer.svelte
@@ -0,0 +1,1052 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+	import { goto } from '$app/navigation'
+	import Modal from './Modal.svelte'
+	import Editor from './Editor.svelte'
+	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
+	import FormFieldWrapper from './FormFieldWrapper.svelte'
+	import Button from './Button.svelte'
+	import Input from './Input.svelte'
+	import MediaLibraryModal from './MediaLibraryModal.svelte'
+	import MediaDetailsModal from './MediaDetailsModal.svelte'
+	import SmartImage from '../SmartImage.svelte'
+	import type { JSONContent } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+
+	export let isOpen = false
+	export let initialMode: 'modal' | 'page' = 'modal'
+	export let initialPostType: 'post' | 'essay' = 'post'
+	export let initialContent: JSONContent | undefined = undefined
+	export let closeOnSave = true
+
+	type PostType = 'post' | 'essay'
+	type ComposerMode = 'modal' | 'page'
+
+	let postType: PostType = initialPostType
+	let mode: ComposerMode = initialMode
+	let content: JSONContent = initialContent || {
+		type: 'doc',
+		content: [{ type: 'paragraph' }]
+	}
+	let linkUrl = ''
+	let linkTitle = ''
+	let linkDescription = ''
+	let showLinkFields = false
+	let characterCount = 0
+	let editorInstance: Editor
+
+	// Essay metadata
+	let essayTitle = ''
+	let essaySlug = ''
+	let essayExcerpt = ''
+	let essayTags = ''
+	let essayTab = 0
+
+	// Photo attachment state
+	let attachedPhotos: Media[] = []
+	let isMediaLibraryOpen = false
+	let fileInput: HTMLInputElement
+
+	// Media details modal state
+	let selectedMedia: Media | null = null
+	let isMediaDetailsOpen = false
+
+	const CHARACTER_LIMIT = 280
+	const dispatch = createEventDispatcher()
+
+	function handleClose() {
+		if (hasContent() && !confirm('Are you sure you want to close? Your changes will be lost.')) {
+			return
+		}
+		resetComposer()
+		isOpen = false
+		dispatch('close')
+	}
+
+	function hasContent(): boolean {
+		return characterCount > 0 || linkUrl.length > 0 || attachedPhotos.length > 0
+	}
+
+	function resetComposer() {
+		postType = initialPostType
+		content = {
+			type: 'doc',
+			content: [{ type: 'paragraph' }]
+		}
+		linkUrl = ''
+		linkTitle = ''
+		linkDescription = ''
+		showLinkFields = false
+		characterCount = 0
+		attachedPhotos = []
+		if (editorInstance) {
+			editorInstance.clear()
+		}
+	}
+
+	function switchToEssay() {
+		const contentParam = content ? encodeURIComponent(JSON.stringify(content)) : ''
+		goto(`/admin/posts/new?type=essay${contentParam ? `&content=${contentParam}` : ''}`)
+	}
+
+	function generateSlug(title: string): string {
+		return title
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	}
+
+	$: if (essayTitle && !essaySlug) {
+		essaySlug = generateSlug(essayTitle)
+	}
+
+	function toggleLinkFields() {
+		showLinkFields = !showLinkFields
+	}
+
+	function handlePhotoUpload() {
+		fileInput.click()
+	}
+
+	async function handleFileUpload(event: Event) {
+		const input = event.target as HTMLInputElement
+		const files = input.files
+		if (!files || files.length === 0) return
+
+		for (const file of files) {
+			if (!file.type.startsWith('image/')) continue
+
+			const formData = new FormData()
+			formData.append('file', file)
+			formData.append('type', 'image')
+
+			// Add auth header if needed
+			const auth = localStorage.getItem('admin_auth')
+			const headers: Record<string, string> = {}
+			if (auth) {
+				headers.Authorization = `Basic ${auth}`
+			}
+
+			try {
+				const response = await fetch('/api/media/upload', {
+					method: 'POST',
+					headers,
+					body: formData
+				})
+
+				if (response.ok) {
+					const media = await response.json()
+					attachedPhotos = [...attachedPhotos, media]
+				} else {
+					console.error('Failed to upload image:', response.status)
+				}
+			} catch (error) {
+				console.error('Error uploading image:', error)
+			}
+		}
+
+		// Clear the input
+		input.value = ''
+	}
+
+	function handleMediaSelect(media: Media | Media[]) {
+		const mediaArray = Array.isArray(media) ? media : [media]
+		const currentIds = attachedPhotos.map((p) => p.id)
+		const newMedia = mediaArray.filter((m) => !currentIds.includes(m.id))
+		attachedPhotos = [...attachedPhotos, ...newMedia]
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	function removePhoto(photoId: number) {
+		attachedPhotos = attachedPhotos.filter((p) => p.id !== photoId)
+	}
+
+	function handlePhotoClick(photo: Media) {
+		selectedMedia = photo
+		isMediaDetailsOpen = true
+	}
+
+	function handleMediaDetailsClose() {
+		isMediaDetailsOpen = false
+		selectedMedia = null
+	}
+
+	function handleMediaUpdate(updatedMedia: Media) {
+		// Update the photo in the attachedPhotos array
+		attachedPhotos = attachedPhotos.map((photo) =>
+			photo.id === updatedMedia.id ? updatedMedia : photo
+		)
+	}
+
+	function getTextFromContent(json: JSONContent): number {
+		if (!json || !json.content) return 0
+
+		let text = ''
+
+		function extractText(node: any) {
+			if (node.text) {
+				text += node.text
+			}
+			if (node.content && Array.isArray(node.content)) {
+				node.content.forEach(extractText)
+			}
+		}
+
+		extractText(json)
+		return text.length
+	}
+
+	async function handleSave() {
+		if (!hasContent() && postType !== 'essay') return
+		if (postType === 'essay' && !essayTitle) return
+
+		let postData: any = {
+			content,
+			status: 'published',
+			attachedPhotos: attachedPhotos.map((photo) => photo.id)
+		}
+
+		if (postType === 'essay') {
+			postData = {
+				...postData,
+				type: 'essay',
+				title: essayTitle,
+				slug: essaySlug,
+				excerpt: essayExcerpt,
+				tags: essayTags ? essayTags.split(',').map((tag) => tag.trim()) : []
+			}
+		} else {
+			// All other content is just a "post" with optional link data and attachments
+			postData = {
+				...postData,
+				type: 'post'
+			}
+
+			// Add link fields if present
+			if (showLinkFields) {
+				postData.link_url = linkUrl
+				postData.linkTitle = linkTitle
+				postData.linkDescription = linkDescription
+			}
+		}
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+			if (auth) {
+				headers.Authorization = `Basic ${auth}`
+			}
+
+			const response = await fetch('/api/posts', {
+				method: 'POST',
+				headers,
+				body: JSON.stringify(postData)
+			})
+
+			if (response.ok) {
+				resetComposer()
+				if (closeOnSave) {
+					isOpen = false
+				}
+				dispatch('saved')
+				if (postType === 'essay') {
+					goto('/admin/posts')
+				}
+			} else {
+				console.error('Failed to save post')
+			}
+		} catch (error) {
+			console.error('Error saving post:', error)
+		}
+	}
+
+	$: isOverLimit = characterCount > CHARACTER_LIMIT
+	$: canSave =
+		(postType === 'post' && (characterCount > 0 || attachedPhotos.length > 0) && !isOverLimit) ||
+		(showLinkFields && linkUrl.length > 0) ||
+		(postType === 'essay' && essayTitle.length > 0 && content)
+</script>
+
+{#if mode === 'modal'}
+	<Modal bind:isOpen size="medium" on:close={handleClose} showCloseButton={false}>
+		<div class="composer">
+			<div class="composer-header">
+				<Button variant="ghost" onclick={handleClose}>Cancel</Button>
+				<div class="header-right">
+					<Button
+						variant="ghost"
+						iconOnly
+						onclick={switchToEssay}
+						title="Expand to essay"
+						class="expand-button"
+					>
+						<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+							<path
+								d="M10 6L14 2M14 2H10M14 2V6"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M6 10L2 14M2 14H6M2 14V10"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</Button>
+					<Button variant="primary" onclick={handleSave} disabled={!canSave}>Post</Button>
+				</div>
+			</div>
+
+			<div class="composer-body">
+				<Editor
+					bind:this={editorInstance}
+					bind:data={content}
+					onChange={(newContent) => {
+						content = newContent
+						characterCount = getTextFromContent(newContent)
+					}}
+					placeholder="What's on your mind?"
+					simpleMode={true}
+					autofocus={true}
+					minHeight={80}
+					showToolbar={false}
+					class="composer-editor"
+				/>
+
+				{#if showLinkFields}
+					<div class="link-fields">
+						<Input
+							type="url"
+							bind:value={linkUrl}
+							placeholder="https://example.com"
+							autocomplete="off"
+						/>
+						<Input bind:value={linkTitle} placeholder="Link title (optional)" autocomplete="off" />
+						<Input
+							type="textarea"
+							bind:value={linkDescription}
+							placeholder="Add context..."
+							rows={2}
+						/>
+					</div>
+				{/if}
+
+				{#if attachedPhotos.length > 0}
+					<div class="attached-photos">
+						{#each attachedPhotos as photo}
+							<div class="photo-item">
+								<button
+									class="photo-button"
+									onclick={() => handlePhotoClick(photo)}
+									title="View media details"
+								>
+									<img src={photo.url} alt={photo.altText || ''} class="photo-preview" />
+								</button>
+								<button
+									class="remove-photo"
+									onclick={() => removePhoto(photo.id)}
+									title="Remove photo"
+								>
+									<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+										<path
+											d="M4 4L12 12M4 12L12 4"
+											stroke="currentColor"
+											stroke-width="1.5"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+				<div class="composer-footer">
+					<div class="footer-left">
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={toggleLinkFields}
+							active={showLinkFields}
+							title="Add link"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<path
+									d="M8 10a3 3 0 0 1 0-5l2.5-2.5a3 3 0 0 1 4.243 4.243l-1.25 1.25"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+								<path
+									d="M10 8a3 3 0 0 1 0 5l-2.5 2.5a3 3 0 0 1-4.243-4.243l1.25-1.25"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+								<path
+									d="M11 7l-4 4"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+							</svg>
+						</Button>
+
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={handlePhotoUpload}
+							title="Add image"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<rect
+									x="2"
+									y="2"
+									width="14"
+									height="14"
+									rx="2"
+									stroke="currentColor"
+									stroke-width="1.5"
+								/>
+								<circle cx="5.5" cy="5.5" r="1.5" fill="currentColor" />
+								<path
+									d="M2 12l4-4 3 3 5-5 2 2"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={() => (isMediaLibraryOpen = true)}
+							title="Browse library"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<path
+									d="M2 5L9 12L16 5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+					</div>
+
+					<div class="footer-right">
+						{#if postType === 'post' && !showLinkFields}
+							<span
+								class="character-count"
+								class:warning={characterCount > CHARACTER_LIMIT * 0.9}
+								class:error={isOverLimit}
+							>
+								{CHARACTER_LIMIT - characterCount}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</Modal>
+{:else if mode === 'page'}
+	{#if postType === 'essay'}
+		<div class="essay-composer">
+			<div class="essay-header">
+				<h1>New Essay</h1>
+				<div class="essay-actions">
+					<Button variant="secondary" onclick={() => goto('/admin/posts')}>Cancel</Button>
+					<Button variant="primary" onclick={handleSave} disabled={!canSave}>Publish</Button>
+				</div>
+			</div>
+
+			<AdminSegmentedControl bind:selectedIndex={essayTab}>
+				<button slot="0">Metadata</button>
+				<button slot="1">Content</button>
+			</AdminSegmentedControl>
+
+			<div class="essay-content">
+				{#if essayTab === 0}
+					<div class="metadata-section">
+						<Input label="Title" bind:value={essayTitle} placeholder="Essay title" required />
+
+						<Input label="Slug" bind:value={essaySlug} placeholder="essay-slug" />
+
+						<Input
+							type="textarea"
+							label="Excerpt"
+							bind:value={essayExcerpt}
+							placeholder="Brief description of your essay"
+							rows={3}
+						/>
+
+						<Input
+							label="Tags"
+							bind:value={essayTags}
+							placeholder="design, development, thoughts"
+							helpText="Comma-separated list of tags"
+						/>
+					</div>
+				{:else}
+					<div class="content-section">
+						<Editor
+							bind:this={editorInstance}
+							bind:data={content}
+							onChange={(newContent) => {
+								content = newContent
+								characterCount = getTextFromContent(newContent)
+							}}
+							placeholder="Start writing your essay..."
+							simpleMode={false}
+							autofocus={true}
+							minHeight={500}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="inline-composer">
+			<Button
+				variant="ghost"
+				iconOnly
+				buttonSize="icon"
+				onclick={switchToEssay}
+				title="Switch to essay mode"
+				class="floating-expand-button"
+			>
+				<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+					<path
+						d="M10 6L14 2M14 2H10M14 2V6"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path
+						d="M6 10L2 14M2 14H6M2 14V10"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</Button>
+			<div class="composer-body">
+				<Editor
+					bind:this={editorInstance}
+					bind:data={content}
+					onChange={(newContent) => {
+						content = newContent
+						characterCount = getTextFromContent(newContent)
+					}}
+					placeholder="What's on your mind?"
+					simpleMode={true}
+					autofocus={true}
+					minHeight={120}
+					showToolbar={false}
+					class="inline-composer-editor"
+				/>
+
+				{#if showLinkFields}
+					<div class="link-fields">
+						<Input
+							type="url"
+							bind:value={linkUrl}
+							placeholder="https://example.com"
+							autocomplete="off"
+						/>
+						<Input bind:value={linkTitle} placeholder="Link title (optional)" autocomplete="off" />
+						<Input
+							type="textarea"
+							bind:value={linkDescription}
+							placeholder="Add context..."
+							rows={2}
+						/>
+					</div>
+				{/if}
+
+				{#if attachedPhotos.length > 0}
+					<div class="attached-photos">
+						{#each attachedPhotos as photo}
+							<div class="photo-item">
+								<button
+									class="photo-button"
+									onclick={() => handlePhotoClick(photo)}
+									title="View media details"
+								>
+									<img src={photo.url} alt={photo.altText || ''} class="photo-preview" />
+								</button>
+								<button
+									class="remove-photo"
+									onclick={() => removePhoto(photo.id)}
+									title="Remove photo"
+								>
+									<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+										<path
+											d="M4 4L12 12M4 12L12 4"
+											stroke="currentColor"
+											stroke-width="1.5"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+				<div class="composer-footer">
+					<div class="footer-left">
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={toggleLinkFields}
+							active={showLinkFields}
+							title="Add link"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<path
+									d="M8 10a3 3 0 0 1 0-5l2.5-2.5a3 3 0 0 1 4.243 4.243l-1.25 1.25"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+								<path
+									d="M10 8a3 3 0 0 1 0 5l-2.5 2.5a3 3 0 0 1-4.243-4.243l1.25-1.25"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+								<path
+									d="M11 7l-4 4"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+								/>
+							</svg>
+						</Button>
+
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={handlePhotoUpload}
+							title="Add image"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<rect
+									x="2"
+									y="2"
+									width="14"
+									height="14"
+									rx="2"
+									stroke="currentColor"
+									stroke-width="1.5"
+								/>
+								<circle cx="5.5" cy="5.5" r="1.5" fill="currentColor" />
+								<path
+									d="M2 12l4-4 3 3 5-5 2 2"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+
+						<Button
+							variant="ghost"
+							iconOnly
+							buttonSize="icon"
+							onclick={() => (isMediaLibraryOpen = true)}
+							title="Browse library"
+							class="tool-button"
+						>
+							<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+								<path
+									d="M2 5L9 12L16 5"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						</Button>
+					</div>
+
+					<div class="footer-right">
+						{#if !showLinkFields}
+							<span
+								class="character-count"
+								class:warning={characterCount > CHARACTER_LIMIT * 0.9}
+								class:error={isOverLimit}
+							>
+								{CHARACTER_LIMIT - characterCount}
+							</span>
+						{/if}
+						<Button variant="primary" onclick={handleSave} disabled={!canSave}>Post</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+{/if}
+
+<!-- Hidden file input for photo upload -->
+<input
+	bind:this={fileInput}
+	type="file"
+	accept="image/*"
+	multiple
+	onchange={handleFileUpload}
+	style="display: none;"
+/>
+
+<!-- Media Library Modal -->
+<MediaLibraryModal
+	bind:isOpen={isMediaLibraryOpen}
+	mode="multiple"
+	fileType="image"
+	onSelect={handleMediaSelect}
+	onClose={handleMediaLibraryClose}
+/>
+
+<!-- Media Details Modal -->
+{#if selectedMedia}
+	<MediaDetailsModal
+		bind:isOpen={isMediaDetailsOpen}
+		media={selectedMedia}
+		onClose={handleMediaDetailsClose}
+		onUpdate={handleMediaUpdate}
+	/>
+{/if}
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.composer {
+		padding: 0;
+		max-width: 600px;
+		margin: 0 auto;
+	}
+
+	.composer-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: $unit-2x;
+	}
+
+	.header-right {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+	}
+
+	.composer-body {
+		display: flex;
+		flex-direction: column;
+
+		:global(.edra-editor) {
+			padding: 0;
+		}
+	}
+
+	:global(.composer-editor) {
+		border: none !important;
+		box-shadow: none !important;
+
+		:global(.editor-container) {
+			padding: 0 $unit-3x;
+		}
+
+		:global(.editor-content) {
+			padding: 0;
+			min-height: 80px;
+			font-size: 15px;
+			line-height: 1.5;
+		}
+
+		:global(.ProseMirror) {
+			padding: 0;
+			min-height: 80px;
+
+			&:focus {
+				outline: none;
+			}
+
+			p {
+				margin: 0;
+			}
+
+			&.ProseMirror-focused .is-editor-empty:first-child::before {
+				color: $grey-40;
+				content: attr(data-placeholder);
+				float: left;
+				pointer-events: none;
+				height: 0;
+			}
+		}
+	}
+
+	.link-fields {
+		padding: 0 $unit-2x $unit-2x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.composer-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: calc($unit * 1.5) $unit-2x;
+		border-top: 1px solid $grey-80;
+		background-color: $grey-5;
+	}
+
+	.footer-left,
+	.footer-right {
+		display: flex;
+		align-items: center;
+		gap: $unit-half;
+	}
+
+	.character-count {
+		font-size: 13px;
+		color: $grey-50;
+		font-weight: 400;
+		padding: 0 $unit;
+		min-width: 30px;
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+
+		&.warning {
+			color: $universe-color;
+		}
+
+		&.error {
+			color: $red-50;
+			font-weight: 500;
+		}
+	}
+
+	// Essay composer styles
+	.essay-composer {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: $unit-3x;
+	}
+
+	.essay-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: $unit-3x;
+
+		h1 {
+			font-size: 28px;
+			font-weight: 600;
+			margin: 0;
+		}
+	}
+
+	.essay-actions {
+		display: flex;
+		gap: $unit;
+	}
+
+	.essay-content {
+		margin-top: $unit-3x;
+	}
+
+	.metadata-section {
+		max-width: 600px;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+	}
+
+	.content-section {
+		:global(.editor) {
+			min-height: 500px;
+		}
+	}
+
+	// Inline composer styles
+	.inline-composer {
+		position: relative;
+		background: white;
+		border-radius: $unit-2x;
+		border: 1px solid $grey-80;
+		overflow: hidden;
+		width: 100%;
+
+		.composer-body {
+			display: flex;
+			flex-direction: column;
+
+			:global(.edra-editor) {
+				padding: 0;
+			}
+		}
+	}
+
+	:global(.floating-expand-button) {
+		position: absolute !important;
+		top: $unit-2x;
+		right: $unit-2x;
+		z-index: 10;
+		background-color: rgba(255, 255, 255, 0.9) !important;
+		backdrop-filter: blur(8px);
+		border: 1px solid $grey-80 !important;
+
+		&:hover {
+			background-color: rgba(255, 255, 255, 0.95) !important;
+		}
+	}
+
+	:global(.inline-composer-editor) {
+		border: none !important;
+		box-shadow: none !important;
+		background: transparent !important;
+
+		:global(.editor-container) {
+			padding: $unit * 1.5 $unit-3x 0;
+		}
+
+		:global(.editor-content) {
+			padding: 0;
+			min-height: 120px;
+			font-size: 15px;
+			line-height: 1.5;
+		}
+
+		:global(.ProseMirror) {
+			padding: 0;
+			min-height: 120px;
+
+			&:focus {
+				outline: none;
+			}
+
+			p {
+				margin: 0;
+			}
+
+			&.ProseMirror-focused .is-editor-empty:first-child::before {
+				color: $grey-40;
+				content: attr(data-placeholder);
+				float: left;
+				pointer-events: none;
+				height: 0;
+			}
+		}
+	}
+
+	.inline-composer .link-fields {
+		padding: 0 $unit-3x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		margin-top: $unit-2x;
+	}
+
+	.inline-composer .composer-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: $unit-2x $unit-3x;
+		border-top: 1px solid $grey-80;
+		background-color: $grey-90;
+	}
+
+	.attached-photos {
+		padding: 0 $unit-3x $unit-2x;
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+	}
+
+	.photo-item {
+		position: relative;
+
+		.photo-button {
+			border: none;
+			background: none;
+			padding: 0;
+			cursor: pointer;
+			display: block;
+			transition: transform 0.2s ease;
+
+			&:hover {
+				transform: scale(1.05);
+			}
+		}
+
+		:global(.photo-preview) {
+			width: 64px;
+			height: 64px;
+			object-fit: cover;
+			border-radius: 12px;
+			display: block;
+		}
+
+		.remove-photo {
+			position: absolute;
+			top: -6px;
+			right: -6px;
+			width: 20px;
+			height: 20px;
+			border: none;
+			border-radius: 50%;
+			background: rgba(0, 0, 0, 0.8);
+			color: white;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.2s ease;
+			opacity: 0;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.9);
+			}
+
+			svg {
+				width: 10px;
+				height: 10px;
+			}
+		}
+
+		&:hover .remove-photo {
+			opacity: 1;
+		}
+	}
+
+	.inline-composer .attached-photos {
+		padding: 0 $unit-3x $unit-2x;
+	}
+</style>
diff --git a/src/lib/components/edra/commands/commands.ts b/src/lib/components/edra/commands/commands.ts
new file mode 100644
index 0000000..af7e9e2
--- /dev/null
+++ b/src/lib/components/edra/commands/commands.ts
@@ -0,0 +1,353 @@
+import { isMac } from '../utils.js'
+import type { EdraCommandGroup } from './types.js'
+
+export const commands: Record<string, EdraCommandGroup> = {
+	'undo-redo': {
+		name: 'redo undo',
+		label: 'Redo/Undo',
+		commands: [
+			{
+				iconName: 'Undo',
+				name: 'undo',
+				label: 'Undo',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Z`],
+				action: (editor) => {
+					editor.chain().focus().undo().run()
+				}
+			},
+			{
+				iconName: 'Redo',
+				name: 'redo',
+				label: 'Redo',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Y`, `${isMac ? 'Cmd' : 'Ctrl'}+Shift+Z`],
+				action: (editor) => {
+					editor.chain().focus().redo().run()
+				}
+			}
+		]
+	},
+	headings: {
+		name: 'Headings',
+		label: 'Headings',
+		commands: [
+			{
+				iconName: 'Heading1',
+				name: 'heading1',
+				label: 'Heading 1',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Alt+1`],
+				action: (editor) => {
+					editor.chain().focus().toggleHeading({ level: 1 }).run()
+				},
+				isActive: (editor) => editor.isActive('heading', { level: 1 })
+			},
+			{
+				iconName: 'Heading2',
+				name: 'heading2',
+				label: 'Heading 2',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Alt+2`],
+				action: (editor) => {
+					editor.chain().focus().toggleHeading({ level: 2 }).run()
+				},
+				isActive: (editor) => editor.isActive('heading', { level: 2 })
+			},
+			{
+				iconName: 'Heading3',
+				name: 'heading3',
+				label: 'Heading 3',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Alt+3`],
+				action: (editor) => {
+					editor.chain().focus().toggleHeading({ level: 3 }).run()
+				},
+				isActive: (editor) => editor.isActive('heading', { level: 3 })
+			}
+		]
+	},
+	'text-formatting': {
+		name: 'Text Formatting',
+		label: 'Text Formatting',
+		commands: [
+			{
+				iconName: 'Link',
+				name: 'link',
+				label: 'Link',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+K`],
+				action: (editor) => {
+					const href = prompt('Enter the URL of the link:')
+					if (href !== null) editor.chain().focus().setLink({ href, target: '_blank' }).run()
+				}
+			},
+			{
+				iconName: 'Bold',
+				name: 'bold',
+				label: 'Bold',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+B`],
+				action: (editor) => {
+					editor.chain().focus().toggleBold().run()
+				}
+			},
+			{
+				iconName: 'Italic',
+				name: 'italic',
+				label: 'Italic',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+I`],
+				action: (editor) => {
+					editor.chain().focus().toggleItalic().run()
+				}
+			},
+			{
+				iconName: 'Underline',
+				name: 'underline',
+				label: 'Underline',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+U`],
+				action: (editor) => {
+					editor.chain().focus().toggleUnderline().run()
+				}
+			},
+			{
+				iconName: 'Strikethrough',
+				name: 'strike',
+				label: 'Strikethrough',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+S`],
+				action: (editor) => {
+					editor.chain().focus().toggleStrike().run()
+				}
+			},
+			{
+				iconName: 'Quote',
+				name: 'blockquote',
+				label: 'Blockquote',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+B`],
+				action: (editor) => {
+					editor.chain().focus().toggleBlockquote().run()
+				}
+			},
+			{
+				iconName: 'Superscript',
+				name: 'superscript',
+				label: 'Superscript',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Period`],
+				action: (editor) => {
+					editor.chain().focus().toggleSuperscript().run()
+				}
+			},
+			{
+				iconName: 'Subscript',
+				name: 'subscript',
+				label: 'Subscript',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Comma`],
+				action: (editor) => {
+					editor.chain().focus().toggleSubscript().run()
+				}
+			},
+			{
+				iconName: 'Code',
+				name: 'code',
+				label: 'Code',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+E`],
+				action: (editor) => {
+					editor.chain().focus().toggleCode().run()
+				}
+			},
+			{
+				iconName: 'Braces',
+				name: 'codeBlock',
+				label: 'Code Block',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Alt+C`],
+				action: (editor) => {
+					editor.chain().focus().toggleCodeBlock().run()
+				}
+			}
+		]
+	},
+	alignment: {
+		name: 'Alignment',
+		label: 'Alignment',
+		commands: [
+			{
+				iconName: 'AlignLeft',
+				name: 'alignLeft',
+				label: 'Align Left',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+L`],
+				action: (editor) => {
+					editor.chain().focus().setTextAlign('left').run()
+				},
+				isActive: (editor) => editor.isActive({ textAlign: 'left' })
+			},
+			{
+				iconName: 'AlignCenter',
+				name: 'alignCenter',
+				label: 'Align Center',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+E`],
+				action: (editor) => {
+					editor.chain().focus().setTextAlign('center').run()
+				},
+				isActive: (editor) => editor.isActive({ textAlign: 'center' })
+			},
+			{
+				iconName: 'AlignRight',
+				name: 'alignRight',
+				label: 'Align Right',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+R`],
+				action: (editor) => {
+					editor.chain().focus().setTextAlign('right').run()
+				},
+				isActive: (editor) => editor.isActive({ textAlign: 'right' })
+			},
+			{
+				iconName: 'AlignJustify',
+				name: 'alignJustify',
+				label: 'Align Justify',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+J`],
+				action: (editor) => {
+					editor.chain().focus().setTextAlign('justify').run()
+				},
+				isActive: (editor) => editor.isActive({ textAlign: 'justify' })
+			}
+		]
+	},
+	lists: {
+		name: 'Lists',
+		label: 'Lists',
+		commands: [
+			{
+				iconName: 'List',
+				name: 'bulletList',
+				label: 'Bullet List',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+8`],
+				action: (editor) => {
+					editor.chain().focus().toggleBulletList().run()
+				}
+			},
+			{
+				iconName: 'ListOrdered',
+				name: 'orderedList',
+				label: 'Ordered List',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+7`],
+				action: (editor) => {
+					editor.chain().focus().toggleOrderedList().run()
+				}
+			},
+			{
+				iconName: 'ListChecks',
+				name: 'taskList',
+				label: 'Task List',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+9`],
+				action: (editor) => {
+					editor.chain().focus().toggleTaskList().run()
+				}
+			}
+		]
+	},
+	media: {
+		name: 'Media',
+		label: 'Media',
+		commands: [
+			{
+				iconName: 'AudioLines',
+				name: 'audio-placeholder',
+				label: 'Audio',
+				action: (editor) => {
+					editor.chain().focus().insertAudioPlaceholder().run()
+				}
+			},
+			{
+				iconName: 'Image',
+				name: 'image-placeholder',
+				label: 'Image',
+				action: (editor) => {
+					editor.chain().focus().insertImagePlaceholder().run()
+				}
+			},
+			{
+				iconName: 'Images',
+				name: 'gallery-placeholder',
+				label: 'Gallery',
+				action: (editor) => {
+					editor.chain().focus().insertGalleryPlaceholder().run()
+				}
+			},
+			{
+				iconName: 'Video',
+				name: 'video-placeholder',
+				label: 'Video',
+				action: (editor) => {
+					editor.chain().focus().insertVideoPlaceholder().run()
+				}
+			},
+			{
+				iconName: 'CodeXml',
+				name: 'iframe-placeholder',
+				label: 'IFrame',
+				action: (editor) => {
+					editor.chain().focus().insertIFramePlaceholder().run()
+				}
+			}
+		]
+	},
+	colors: {
+		name: 'Colors',
+		label: 'Colors and Highlights',
+		commands: [
+			{
+				iconName: 'PenLine',
+				name: 'color',
+				label: 'Color',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+C`],
+				action: (editor) => {
+					editor.chain().focus().unsetColor().run()
+				}
+			},
+			{
+				iconName: 'Highlighter',
+				name: 'highlight',
+				label: 'Highlight',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+H`],
+				action: (editor) => {
+					editor.chain().focus().toggleHighlight().run()
+				}
+			}
+		]
+	},
+	table: {
+		name: 'Table',
+		label: 'Table',
+		commands: [
+			{
+				iconName: 'Table',
+				name: 'table',
+				label: 'Table',
+				shortCuts: [`${isMac ? 'Cmd' : 'Ctrl'}+Shift+T`],
+				action: (editor) => {
+					if (editor.isActive('table')) editor.chain().focus().deleteTable().run()
+					else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).run()
+				}
+			}
+		]
+	},
+	fonts: {
+		name: 'fonts',
+		label: 'Fonts',
+		commands: [
+			{
+				iconName: 'Plus',
+				name: 'font increment',
+				label: 'Increase Font Size',
+				action: (editor) => {
+					let currentFontSize = parseInt(editor.getAttributes('textStyle').fontSize ?? '16px')
+					currentFontSize++
+					editor.chain().focus().setFontSize(`${currentFontSize}px`).run()
+				}
+			},
+			{
+				iconName: 'Minus',
+				name: 'font decrement',
+				label: 'Decrease Font Size',
+				action: (editor) => {
+					let currentFontSize = parseInt(editor.getAttributes('textStyle').fontSize ?? '16px')
+					currentFontSize--
+					editor.chain().focus().setFontSize(`${currentFontSize}px`).run()
+				}
+			}
+		]
+	}
+}
diff --git a/src/lib/components/edra/commands/types.ts b/src/lib/components/edra/commands/types.ts
new file mode 100644
index 0000000..5872aa4
--- /dev/null
+++ b/src/lib/components/edra/commands/types.ts
@@ -0,0 +1,21 @@
+import type { Editor } from '@tiptap/core'
+import type { icons } from 'lucide-svelte'
+
+export interface EdraCommand {
+	iconName: keyof typeof icons
+	name: string
+	label: string
+	shortCuts?: string[]
+	action: (editor: Editor) => void
+	isActive?: (editor: Editor) => boolean
+}
+
+export interface EdraCommandShortCuts {
+	key: string
+}
+
+export interface EdraCommandGroup {
+	name: string
+	label: string
+	commands: EdraCommand[]
+}
diff --git a/src/lib/components/edra/drag-handle.svelte b/src/lib/components/edra/drag-handle.svelte
new file mode 100644
index 0000000..42e033a
--- /dev/null
+++ b/src/lib/components/edra/drag-handle.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import { onMount } from 'svelte'
+	import GripVertical from 'lucide-svelte/icons/grip-vertical'
+	import { DragHandlePlugin } from './extensions/drag-handle/index.js'
+
+	interface Props {
+		editor: Editor
+	}
+
+	const { editor }: Props = $props()
+
+	const pluginKey = 'globalDragHandle'
+
+	onMount(() => {
+		const plugin = DragHandlePlugin({
+			pluginKey: pluginKey,
+			dragHandleWidth: 20,
+			scrollTreshold: 100,
+			dragHandleSelector: '.drag-handle',
+			excludedTags: ['pre', 'code', 'table p'],
+			customNodes: []
+		})
+		editor.registerPlugin(plugin)
+		return () => editor.unregisterPlugin(pluginKey)
+	})
+</script>
+
+<div class="drag-handle">
+	<GripVertical />
+</div>
diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css
new file mode 100644
index 0000000..d3dda51
--- /dev/null
+++ b/src/lib/components/edra/editor.css
@@ -0,0 +1,429 @@
+/* Base TipTap Editor Styles with Light/Dark Theme Support */
+
+.tiptap :first-child {
+	margin-top: 0;
+}
+
+/* For Placeholder */
+.tiptap .is-empty::before {
+	pointer-events: none;
+	float: left;
+	height: 0;
+	color: var(--border-color-hover);
+	content: attr(data-placeholder);
+}
+
+/* Heading Styles */
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+	line-height: 1.2;
+	margin-top: 1rem;
+	text-wrap: pretty;
+}
+
+.tiptap h1,
+.tiptap h2 {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+
+.tiptap h1 {
+	font-size: 2rem;
+}
+
+.tiptap h2 {
+	font-size: 1.5rem;
+}
+
+.tiptap h3 {
+	font-size: 1.25rem;
+}
+
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+	font-size: 1rem;
+}
+
+/* Blockquote Styles */
+.tiptap blockquote {
+	border-left: 0.5rem solid var(--blockquote-border);
+	border-radius: 0.5rem;
+	background-color: var(--code-bg);
+	margin: 1rem 0;
+	padding: 0.5rem 0;
+	padding-left: 1rem;
+}
+
+.tiptap blockquote p {
+	margin: 0;
+}
+
+/* Horizontal Rule */
+.tiptap hr {
+	border: none;
+	border-top: 1px solid var(--border-color);
+	margin: 1rem 0;
+}
+
+/* Inline Code */
+.tiptap code:not(pre code) {
+	border-radius: 0.25rem;
+	color: var(--code-color);
+	background-color: var(--code-bg);
+	border: 0.5px solid var(--code-border) !important;
+	padding: 0.25rem;
+	font-family: 'JetBrains Mono', monospace, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono';
+}
+
+/* List Styling */
+.tiptap ul li p,
+.tiptap ol li p {
+	margin-top: 0.25em;
+	margin-bottom: 0.25em;
+}
+
+/* Task List Styling */
+.tiptap ul[data-type='taskList'] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.tiptap ul[data-type='taskList'] li {
+	align-items: flex-start;
+	display: flex;
+}
+
+.tiptap ul[data-type='taskList'] li > label {
+	margin-right: 0.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	user-select: none;
+}
+
+.tiptap ul[data-type='taskList'] li > div {
+	flex: 1 1 auto;
+}
+
+.tiptap ul[data-type='taskList'] input[type='checkbox'] {
+	cursor: pointer;
+}
+
+.tiptap ul[data-type='taskList'] ul[data-type='taskList'] {
+	margin: 0;
+}
+
+ul[data-type='taskList'] li[data-checked='true'] div {
+	color: var(--task-completed-color);
+	text-decoration: line-through;
+}
+
+input[type='checkbox'] {
+	position: relative;
+	top: 0.25rem;
+	margin: 0;
+	display: grid;
+	place-content: center;
+	cursor: pointer;
+	width: 1.125rem;
+	height: 1.125rem;
+	border-radius: 0.25rem;
+}
+
+/* Color Swatches */
+.color {
+	white-space: nowrap;
+}
+
+.color::before {
+	margin-bottom: 0.15rem;
+	margin-right: 0.1rem;
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	border-radius: 0.25rem;
+	border: 1px solid var(--border-color);
+	vertical-align: middle;
+	background-color: var(--color);
+	content: ' ';
+}
+
+/* Code Block Styling */
+.tiptap pre {
+	margin: 0;
+	display: flex;
+	height: fit-content;
+	overflow: auto;
+	background-color: transparent;
+	padding: 0;
+}
+
+.tiptap pre code {
+	flex: 1;
+	border-radius: 0 !important;
+	background-color: transparent;
+	padding: 0;
+	color: inherit;
+	font-family: 'JetBrains Mono', monospace, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono';
+}
+
+/* Drag Handle Styling */
+.drag-handle {
+	position: fixed;
+	z-index: 50;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	padding-right: 0.5rem;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	cursor: grab;
+	opacity: 100;
+	transition-property: opacity;
+	transition-duration: 200ms;
+	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+	color: var(--border-color-hover);
+}
+
+.drag-handle:active {
+	cursor: grabbing;
+}
+
+.drag-handle.hide {
+	opacity: 0;
+	pointer-events: none;
+}
+
+@media screen and (max-width: 600px) {
+	.drag-handle {
+		display: none;
+		pointer-events: none;
+	}
+}
+
+.drag-handle svg {
+	height: 1rem;
+	width: 1rem;
+}
+
+/* Math Equations (KaTeX) */
+.katex:hover {
+	background-color: var(--code-bg);
+}
+
+.katex.result {
+	border-bottom: 1px dashed var(--highlight-border);
+	background-color: var(--highlight-color);
+}
+
+/* Table Styling */
+.ProseMirror .tableWrapper {
+	margin: 0;
+	overflow: auto;
+	padding: 1rem;
+}
+
+.ProseMirror table {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	box-sizing: border-box;
+	width: 100%;
+	border-collapse: collapse;
+	border-radius: 0.25rem;
+	border: 1px solid var(--table-border);
+}
+
+.ProseMirror table td,
+.ProseMirror table th {
+	position: relative;
+	min-width: 100px;
+	border: 1px solid var(--table-border);
+	padding: 0.5rem;
+	text-align: left;
+	vertical-align: top;
+}
+
+.ProseMirror table td:first-of-type:not(a),
+.ProseMirror table th:first-of-type:not(a) {
+	margin-top: 0;
+}
+
+.ProseMirror table td p,
+.ProseMirror table th p {
+	margin: 0;
+}
+
+.ProseMirror table td p + p,
+.ProseMirror table th p + p {
+	margin-top: 0.75rem;
+}
+
+.ProseMirror table th {
+	font-weight: bold;
+}
+
+.ProseMirror table .column-resize-handle {
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	right: -0.25rem;
+	bottom: -2px;
+	display: flex;
+	width: 0.5rem;
+}
+
+.ProseMirror table .column-resize-handle::before {
+	content: '';
+	margin-left: 0.5rem;
+	height: 100%;
+	width: 1px;
+	background-color: var(--table-border);
+}
+
+.ProseMirror table .selectedCell {
+	border-style: double;
+	border-color: var(--table-border);
+	background-color: var(--table-bg-selected);
+}
+
+.ProseMirror table .grip-column,
+.ProseMirror table .grip-row {
+	position: absolute;
+	z-index: 10;
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--table-bg-selected);
+}
+
+.ProseMirror table .grip-column {
+	top: -0.75rem;
+	left: 0;
+	margin-left: -1px;
+	height: 0.75rem;
+	width: calc(100% + 1px);
+	border-left: 1px solid var(--table-border);
+}
+
+.ProseMirror table .grip-column:hover::before,
+.ProseMirror table .grip-column.selected::before {
+	content: '';
+	width: 0.625rem;
+}
+
+.ProseMirror table .grip-column:hover {
+	background-color: var(--table-bg-hover);
+}
+
+.ProseMirror table .grip-column:hover::before {
+	border-bottom: 2px dotted var(--border-color-hover);
+}
+
+.ProseMirror table .grip-column.first {
+	border-top-left-radius: 0.125rem;
+	border-color: transparent;
+}
+
+.ProseMirror table .grip-column.last {
+	border-top-right-radius: 0.125rem;
+}
+
+.ProseMirror table .grip-column.selected {
+	border-color: var(--table-border);
+	background-color: var(--table-bg-hover);
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.ProseMirror table .grip-column.selected::before {
+	border-bottom: 2px dotted var(--border-color-hover);
+}
+
+.ProseMirror table .grip-row {
+	left: -0.75rem;
+	top: 0;
+	margin-top: -1px;
+	height: calc(100% + 1px);
+	width: 0.75rem;
+	border-top: 1px solid var(--table-border);
+}
+
+.ProseMirror table .grip-row:hover::before,
+.ProseMirror table .grip-row.selected::before {
+	content: '';
+	height: 0.625rem;
+}
+
+.ProseMirror table .grip-row:hover {
+	background-color: var(--table-bg-hover);
+}
+
+.ProseMirror table .grip-row:hover::before {
+	border-left: 2px dotted var(--border-color-hover);
+}
+
+.ProseMirror table .grip-row.first {
+	border-top-left-radius: 0.125rem;
+	border-color: transparent;
+}
+
+.ProseMirror table .grip-row.last {
+	border-bottom-left-radius: 0.125rem;
+}
+
+.ProseMirror table .grip-row.selected {
+	border-color: var(--table-border);
+	background-color: var(--table-bg-hover);
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.ProseMirror table .grip-row.selected::before {
+	border-left: 2px dotted var(--border-color-hover);
+}
+
+.tiptap .search-result {
+	background-color: var(--search-result-bg);
+	color: black;
+}
+
+.tiptap .search-result-current {
+	background-color: var(--search-result-current-bg);
+	color: black;
+}
+
+.code-wrapper {
+	background-color: var(--code-bg);
+	border-radius: 0.25rem;
+	padding: 1.5rem;
+	position: relative;
+	height: fit-content;
+}
+
+.code-wrapper-tile {
+	opacity: 0;
+	width: 100%;
+	display: flex;
+	position: absolute;
+	top: 0;
+	padding: 0.25rem;
+	right: 0;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	transition: opacity 0.2s ease-in-out;
+}
+
+.code-wrapper:hover .code-wrapper-tile {
+	opacity: 1;
+}
+
+.tiptap iframe {
+	aspect-ratio: 16 / 9;
+}
diff --git a/src/lib/components/edra/editor.ts b/src/lib/components/edra/editor.ts
new file mode 100644
index 0000000..83b2343
--- /dev/null
+++ b/src/lib/components/edra/editor.ts
@@ -0,0 +1,133 @@
+import { Editor, type Content, type EditorOptions, type Extensions } from '@tiptap/core'
+import Color from '@tiptap/extension-color'
+import Link from '@tiptap/extension-link'
+import Subscript from '@tiptap/extension-subscript'
+import Superscript from '@tiptap/extension-superscript'
+import TaskItem from '@tiptap/extension-task-item'
+import TaskList from '@tiptap/extension-task-list'
+import TextAlign from '@tiptap/extension-text-align'
+import TextStyle from '@tiptap/extension-text-style'
+import Typography from '@tiptap/extension-typography'
+import Underline from '@tiptap/extension-underline'
+import StarterKit from '@tiptap/starter-kit'
+import Highlight from '@tiptap/extension-highlight'
+import Text from '@tiptap/extension-text'
+import { SmilieReplacer } from './extensions/SmilieReplacer.js'
+import { ColorHighlighter } from './extensions/ColorHighlighter.js'
+import AutoJoiner from 'tiptap-extension-auto-joiner'
+import { MathExtension } from '@aarkue/tiptap-math-extension'
+import { Table, TableCell, TableHeader, TableRow } from './extensions/table/index.js'
+import FontSize from './extensions/FontSize.js'
+import Placeholder from '@tiptap/extension-placeholder'
+import CharacterCount from '@tiptap/extension-character-count'
+import SearchAndReplace from './extensions/FindAndReplace.js'
+import { getHandlePaste } from './utils.js'
+import { Markdown } from 'tiptap-markdown'
+
+export const initiateEditor = (
+	element?: HTMLElement,
+	content?: Content,
+	limit?: number,
+	extensions?: Extensions,
+	options?: Partial<EditorOptions>,
+	placeholder?: string
+): Editor => {
+	const editor = new Editor({
+		element: element,
+		content: content,
+		extensions: [
+			StarterKit.configure({
+				orderedList: {
+					HTMLAttributes: {
+						class: 'list-decimal'
+					}
+				},
+				bulletList: {
+					HTMLAttributes: {
+						class: 'list-disc'
+					}
+				},
+				heading: {
+					levels: [1, 2, 3, 4],
+					HTMLAttributes: {
+						class: 'tiptap-heading'
+					}
+				},
+				codeBlock: false,
+				text: false,
+				image: false
+			}),
+			SmilieReplacer,
+			ColorHighlighter,
+			Superscript,
+			Subscript,
+			Underline,
+			Link.configure({
+				openOnClick: false,
+				autolink: true,
+				defaultProtocol: 'https',
+				HTMLAttributes: {
+					target: '_blank',
+					rel: 'noopener noreferrer'
+				}
+			}),
+			TaskList,
+			TaskItem.configure({
+				nested: true
+			}),
+			TextStyle,
+			Color,
+			Highlight.configure({ multicolor: true }),
+			Text,
+			Typography,
+			TextAlign.configure({
+				types: ['heading', 'paragraph']
+			}),
+			AutoJoiner,
+			MathExtension.configure({ evaluation: true }),
+			Table,
+			TableHeader,
+			TableRow,
+			TableCell,
+			FontSize,
+			Markdown.configure({
+				html: true,
+				tightLists: true,
+				tightListClass: 'tight',
+				bulletListMarker: '-',
+				linkify: true, // Create links from "https://..." text
+				breaks: true, // New lines (\n) in markdown input are converted to <br>
+				transformPastedText: true, // Allow to paste markdown text in the editor
+				transformCopiedText: false // Copied text is transformed to markdown
+			}),
+			Placeholder.configure({
+				emptyEditorClass: 'is-empty',
+				// Use a placeholder:
+				// Use different placeholders depending on the node type:
+				placeholder: ({ node }) => {
+					if (node.type.name === 'heading') {
+						return 'What’s the title?'
+					} else if (node.type.name === 'paragraph') {
+						return placeholder || 'Press / or write something ...'
+					}
+					return ''
+				}
+			}),
+			CharacterCount.configure({
+				limit
+			}),
+			SearchAndReplace,
+
+			...(extensions ?? [])
+		],
+		autofocus: true,
+		...options
+	})
+
+	editor.setOptions({
+		editorProps: {
+			handlePaste: getHandlePaste(editor)
+		}
+	})
+	return editor
+}
diff --git a/src/lib/components/edra/extensions/ColorHighlighter.ts b/src/lib/components/edra/extensions/ColorHighlighter.ts
new file mode 100644
index 0000000..0a2dcfe
--- /dev/null
+++ b/src/lib/components/edra/extensions/ColorHighlighter.ts
@@ -0,0 +1,28 @@
+import { Extension } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+
+import { findColors } from '../utils.js'
+
+export const ColorHighlighter = Extension.create({
+	name: 'colorHighlighter',
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				state: {
+					init(_, { doc }) {
+						return findColors(doc)
+					},
+					apply(transaction, oldState) {
+						return transaction.docChanged ? findColors(transaction.doc) : oldState
+					}
+				},
+				props: {
+					decorations(state) {
+						return this.getState(state)
+					}
+				}
+			})
+		]
+	}
+})
diff --git a/src/lib/components/edra/extensions/FindAndReplace.ts b/src/lib/components/edra/extensions/FindAndReplace.ts
new file mode 100644
index 0000000..b4a1e62
--- /dev/null
+++ b/src/lib/components/edra/extensions/FindAndReplace.ts
@@ -0,0 +1,407 @@
+// MIT License
+
+// Copyright (c) 2023 - 2024 Jeet Mandaliya (Github Username: sereneinserenade)
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { Extension, type Range, type Dispatch } from '@tiptap/core'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		search: {
+			/**
+			 * @description Set search term in extension.
+			 */
+			setSearchTerm: (searchTerm: string) => ReturnType
+			/**
+			 * @description Set replace term in extension.
+			 */
+			setReplaceTerm: (replaceTerm: string) => ReturnType
+			/**
+			 * @description Set case sensitivity in extension.
+			 */
+			setCaseSensitive: (caseSensitive: boolean) => ReturnType
+			/**
+			 * @description Reset current search result to first instance.
+			 */
+			resetIndex: () => ReturnType
+			/**
+			 * @description Find next instance of search result.
+			 */
+			nextSearchResult: () => ReturnType
+			/**
+			 * @description Find previous instance of search result.
+			 */
+			previousSearchResult: () => ReturnType
+			/**
+			 * @description Replace first instance of search result with given replace term.
+			 */
+			replace: () => ReturnType
+			/**
+			 * @description Replace all instances of search result with given replace term.
+			 */
+			replaceAll: () => ReturnType
+		}
+	}
+}
+
+interface TextNodesWithPosition {
+	text: string
+	pos: number
+}
+
+const getRegex = (s: string, disableRegex: boolean, caseSensitive: boolean): RegExp => {
+	return RegExp(
+		disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') : s,
+		caseSensitive ? 'gu' : 'gui'
+	)
+}
+
+interface ProcessedSearches {
+	decorationsToReturn: DecorationSet
+	results: Range[]
+}
+
+function processSearches(
+	doc: PMNode,
+	searchTerm: RegExp,
+	searchResultClass: string,
+	resultIndex: number
+): ProcessedSearches {
+	const decorations: Decoration[] = []
+	const results: Range[] = []
+
+	let textNodesWithPosition: TextNodesWithPosition[] = []
+	let index = 0
+
+	if (!searchTerm) {
+		return {
+			decorationsToReturn: DecorationSet.empty,
+			results: []
+		}
+	}
+
+	doc?.descendants((node, pos) => {
+		if (node.isText) {
+			if (textNodesWithPosition[index]) {
+				textNodesWithPosition[index] = {
+					text: textNodesWithPosition[index].text + node.text,
+					pos: textNodesWithPosition[index].pos
+				}
+			} else {
+				textNodesWithPosition[index] = {
+					text: `${node.text}`,
+					pos
+				}
+			}
+		} else {
+			index += 1
+		}
+	})
+
+	textNodesWithPosition = textNodesWithPosition.filter(Boolean)
+
+	for (const element of textNodesWithPosition) {
+		const { text, pos } = element
+		const matches = Array.from(text.matchAll(searchTerm)).filter(([matchText]) => matchText.trim())
+
+		for (const m of matches) {
+			if (m[0] === '') break
+
+			if (m.index !== undefined) {
+				results.push({
+					from: pos + m.index,
+					to: pos + m.index + m[0].length
+				})
+			}
+		}
+	}
+
+	for (let i = 0; i < results.length; i += 1) {
+		const r = results[i]
+		const className =
+			i === resultIndex ? `${searchResultClass} ${searchResultClass}-current` : searchResultClass
+		const decoration: Decoration = Decoration.inline(r.from, r.to, {
+			class: className
+		})
+
+		decorations.push(decoration)
+	}
+
+	return {
+		decorationsToReturn: DecorationSet.create(doc, decorations),
+		results
+	}
+}
+
+const replace = (
+	replaceTerm: string,
+	results: Range[],
+	{ state, dispatch }: { state: EditorState; dispatch: Dispatch }
+) => {
+	const firstResult = results[0]
+
+	if (!firstResult) return
+
+	const { from, to } = results[0]
+
+	if (dispatch) dispatch(state.tr.insertText(replaceTerm, from, to))
+}
+
+const rebaseNextResult = (
+	replaceTerm: string,
+	index: number,
+	lastOffset: number,
+	results: Range[]
+): [number, Range[]] | null => {
+	const nextIndex = index + 1
+
+	if (!results[nextIndex]) return null
+
+	const { from: currentFrom, to: currentTo } = results[index]
+
+	const offset = currentTo - currentFrom - replaceTerm.length + lastOffset
+
+	const { from, to } = results[nextIndex]
+
+	results[nextIndex] = {
+		to: to - offset,
+		from: from - offset
+	}
+
+	return [offset, results]
+}
+
+const replaceAll = (
+	replaceTerm: string,
+	results: Range[],
+	{ tr, dispatch }: { tr: Transaction; dispatch: Dispatch }
+) => {
+	let offset = 0
+
+	let resultsCopy = results.slice()
+
+	if (!resultsCopy.length) return
+
+	for (let i = 0; i < resultsCopy.length; i += 1) {
+		const { from, to } = resultsCopy[i]
+
+		tr.insertText(replaceTerm, from, to)
+
+		const rebaseNextResultResponse = rebaseNextResult(replaceTerm, i, offset, resultsCopy)
+
+		if (!rebaseNextResultResponse) continue
+
+		offset = rebaseNextResultResponse[0]
+		resultsCopy = rebaseNextResultResponse[1]
+	}
+
+	if (dispatch) {
+		dispatch(tr)
+	}
+}
+
+export const searchAndReplacePluginKey = new PluginKey('searchAndReplacePlugin')
+
+export interface SearchAndReplaceOptions {
+	searchResultClass: string
+	disableRegex: boolean
+}
+
+export interface SearchAndReplaceStorage {
+	searchTerm: string
+	replaceTerm: string
+	results: Range[]
+	lastSearchTerm: string
+	caseSensitive: boolean
+	lastCaseSensitive: boolean
+	resultIndex: number
+	lastResultIndex: number
+}
+
+export const SearchAndReplace = Extension.create<SearchAndReplaceOptions, SearchAndReplaceStorage>({
+	name: 'searchAndReplace',
+
+	addOptions() {
+		return {
+			searchResultClass: 'search-result',
+			disableRegex: true
+		}
+	},
+
+	addStorage() {
+		return {
+			searchTerm: '',
+			replaceTerm: '',
+			results: [],
+			lastSearchTerm: '',
+			caseSensitive: false,
+			lastCaseSensitive: false,
+			resultIndex: 0,
+			lastResultIndex: 0
+		}
+	},
+
+	addCommands() {
+		return {
+			setSearchTerm:
+				(searchTerm: string) =>
+				({ editor }) => {
+					editor.storage.searchAndReplace.searchTerm = searchTerm
+
+					return false
+				},
+			setReplaceTerm:
+				(replaceTerm: string) =>
+				({ editor }) => {
+					editor.storage.searchAndReplace.replaceTerm = replaceTerm
+
+					return false
+				},
+			setCaseSensitive:
+				(caseSensitive: boolean) =>
+				({ editor }) => {
+					editor.storage.searchAndReplace.caseSensitive = caseSensitive
+
+					return false
+				},
+			resetIndex:
+				() =>
+				({ editor }) => {
+					editor.storage.searchAndReplace.resultIndex = 0
+
+					return false
+				},
+			nextSearchResult:
+				() =>
+				({ editor }) => {
+					const { results, resultIndex } = editor.storage.searchAndReplace
+
+					const nextIndex = resultIndex + 1
+
+					if (results[nextIndex]) {
+						editor.storage.searchAndReplace.resultIndex = nextIndex
+					} else {
+						editor.storage.searchAndReplace.resultIndex = 0
+					}
+
+					return false
+				},
+			previousSearchResult:
+				() =>
+				({ editor }) => {
+					const { results, resultIndex } = editor.storage.searchAndReplace
+
+					const prevIndex = resultIndex - 1
+
+					if (results[prevIndex]) {
+						editor.storage.searchAndReplace.resultIndex = prevIndex
+					} else {
+						editor.storage.searchAndReplace.resultIndex = results.length - 1
+					}
+
+					return false
+				},
+			replace:
+				() =>
+				({ editor, state, dispatch }) => {
+					const { replaceTerm, results } = editor.storage.searchAndReplace
+
+					replace(replaceTerm, results, { state, dispatch })
+
+					return false
+				},
+			replaceAll:
+				() =>
+				({ editor, tr, dispatch }) => {
+					const { replaceTerm, results } = editor.storage.searchAndReplace
+
+					replaceAll(replaceTerm, results, { tr, dispatch })
+
+					return false
+				}
+		}
+	},
+
+	addProseMirrorPlugins() {
+		const editor = this.editor
+		const { searchResultClass, disableRegex } = this.options
+
+		const setLastSearchTerm = (t: string) => (editor.storage.searchAndReplace.lastSearchTerm = t)
+		const setLastCaseSensitive = (t: boolean) =>
+			(editor.storage.searchAndReplace.lastCaseSensitive = t)
+		const setLastResultIndex = (t: number) => (editor.storage.searchAndReplace.lastResultIndex = t)
+
+		return [
+			new Plugin({
+				key: searchAndReplacePluginKey,
+				state: {
+					init: () => DecorationSet.empty,
+					apply({ doc, docChanged }, oldState) {
+						const {
+							searchTerm,
+							lastSearchTerm,
+							caseSensitive,
+							lastCaseSensitive,
+							resultIndex,
+							lastResultIndex
+						} = editor.storage.searchAndReplace
+
+						if (
+							!docChanged &&
+							lastSearchTerm === searchTerm &&
+							lastCaseSensitive === caseSensitive &&
+							lastResultIndex === resultIndex
+						)
+							return oldState
+
+						setLastSearchTerm(searchTerm)
+						setLastCaseSensitive(caseSensitive)
+						setLastResultIndex(resultIndex)
+
+						if (!searchTerm) {
+							editor.storage.searchAndReplace.results = []
+							return DecorationSet.empty
+						}
+
+						const { decorationsToReturn, results } = processSearches(
+							doc,
+							getRegex(searchTerm, disableRegex, caseSensitive),
+							searchResultClass,
+							resultIndex
+						)
+
+						editor.storage.searchAndReplace.results = results
+
+						return decorationsToReturn
+					}
+				},
+				props: {
+					decorations(state) {
+						return this.getState(state)
+					}
+				}
+			})
+		]
+	}
+})
+
+export default SearchAndReplace
diff --git a/src/lib/components/edra/extensions/FontSize.ts b/src/lib/components/edra/extensions/FontSize.ts
new file mode 100644
index 0000000..6101baa
--- /dev/null
+++ b/src/lib/components/edra/extensions/FontSize.ts
@@ -0,0 +1,64 @@
+import { type Attributes, Extension } from '@tiptap/core'
+import '@tiptap/extension-text-style'
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		fontSize: {
+			setFontSize: (size: string) => ReturnType
+			unsetFontSize: () => ReturnType
+		}
+	}
+}
+
+export const FontSize = Extension.create({
+	name: 'fontSize',
+
+	addOptions() {
+		return {
+			types: ['textStyle']
+		}
+	},
+
+	addGlobalAttributes() {
+		return [
+			{
+				types: ['paragraph'],
+				attributes: {
+					class: {}
+				}
+			},
+			{
+				types: this.options.types,
+				attributes: {
+					fontSize: {
+						parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ''),
+						renderHTML: (attributes) => {
+							if (!attributes.fontSize) {
+								return {}
+							}
+
+							return {
+								style: `font-size: ${attributes.fontSize}`
+							}
+						}
+					}
+				} as Attributes
+			}
+		]
+	},
+
+	addCommands() {
+		return {
+			setFontSize:
+				(fontSize: string) =>
+				({ chain }) =>
+					chain().setMark('textStyle', { fontSize }).run(),
+			unsetFontSize:
+				() =>
+				({ chain }) =>
+					chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run()
+		}
+	}
+})
+
+export default FontSize
diff --git a/src/lib/components/edra/extensions/SmilieReplacer.ts b/src/lib/components/edra/extensions/SmilieReplacer.ts
new file mode 100644
index 0000000..9659023
--- /dev/null
+++ b/src/lib/components/edra/extensions/SmilieReplacer.ts
@@ -0,0 +1,133 @@
+import { Extension, textInputRule } from '@tiptap/core'
+
+export const SmilieReplacer = Extension.create({
+	name: 'smilieReplacer',
+
+	addInputRules() {
+		return [
+			textInputRule({ find: /-___- $/, replace: '😑 ' }),
+			textInputRule({ find: /:'-\) $/, replace: '😂 ' }),
+			textInputRule({ find: /':-\) $/, replace: '😅 ' }),
+			textInputRule({ find: /':-D $/, replace: '😅 ' }),
+			textInputRule({ find: />:-\) $/, replace: '😆 ' }),
+			textInputRule({ find: /-__- $/, replace: '😑 ' }),
+			textInputRule({ find: /':-\( $/, replace: '😓 ' }),
+			textInputRule({ find: /:'-\( $/, replace: '😢 ' }),
+			textInputRule({ find: />:-\( $/, replace: '😠 ' }),
+			textInputRule({ find: /O:-\) $/, replace: '😇 ' }),
+			textInputRule({ find: /0:-3 $/, replace: '😇 ' }),
+			textInputRule({ find: /0:-\) $/, replace: '😇 ' }),
+			textInputRule({ find: /0;\^\) $/, replace: '😇 ' }),
+			textInputRule({ find: /O;-\) $/, replace: '😇 ' }),
+			textInputRule({ find: /0;-\) $/, replace: '😇 ' }),
+			textInputRule({ find: /O:-3 $/, replace: '😇 ' }),
+			textInputRule({ find: /:'\) $/, replace: '😂 ' }),
+			textInputRule({ find: /:-D $/, replace: '😃 ' }),
+			textInputRule({ find: /':\) $/, replace: '😅 ' }),
+			textInputRule({ find: /'=\) $/, replace: '😅 ' }),
+			textInputRule({ find: /':D $/, replace: '😅 ' }),
+			textInputRule({ find: /'=D $/, replace: '😅 ' }),
+			textInputRule({ find: />:\) $/, replace: '😆 ' }),
+			textInputRule({ find: />;\) $/, replace: '😆 ' }),
+			textInputRule({ find: />=\) $/, replace: '😆 ' }),
+			textInputRule({ find: /;-\) $/, replace: '😉 ' }),
+			textInputRule({ find: /\*-\) $/, replace: '😉 ' }),
+			textInputRule({ find: /;-\] $/, replace: '😉 ' }),
+			textInputRule({ find: /;\^\) $/, replace: '😉 ' }),
+			textInputRule({ find: /B-\) $/, replace: '😎 ' }),
+			textInputRule({ find: /8-\) $/, replace: '😎 ' }),
+			textInputRule({ find: /B-D $/, replace: '😎 ' }),
+			textInputRule({ find: /8-D $/, replace: '😎 ' }),
+			textInputRule({ find: /:-\* $/, replace: '😘 ' }),
+			textInputRule({ find: /:\^\* $/, replace: '😘 ' }),
+			textInputRule({ find: /:-\) $/, replace: '🙂 ' }),
+			textInputRule({ find: /-_- $/, replace: '😑 ' }),
+			textInputRule({ find: /:-X $/, replace: '😶 ' }),
+			textInputRule({ find: /:-# $/, replace: '😶 ' }),
+			textInputRule({ find: /:-x $/, replace: '😶 ' }),
+			textInputRule({ find: />.< $/, replace: '😣 ' }),
+			textInputRule({ find: /:-O $/, replace: '😮 ' }),
+			textInputRule({ find: /:-o $/, replace: '😮 ' }),
+			textInputRule({ find: /O_O $/, replace: '😮 ' }),
+			textInputRule({ find: />:O $/, replace: '😮 ' }),
+			textInputRule({ find: /:-P $/, replace: '😛 ' }),
+			textInputRule({ find: /:-p $/, replace: '😛 ' }),
+			textInputRule({ find: /:-Þ $/, replace: '😛 ' }),
+			textInputRule({ find: /:-þ $/, replace: '😛 ' }),
+			textInputRule({ find: /:-b $/, replace: '😛 ' }),
+			textInputRule({ find: />:P $/, replace: '😜 ' }),
+			textInputRule({ find: /X-P $/, replace: '😜 ' }),
+			textInputRule({ find: /x-p $/, replace: '😜 ' }),
+			textInputRule({ find: /':\( $/, replace: '😓 ' }),
+			textInputRule({ find: /'=\( $/, replace: '😓 ' }),
+			textInputRule({ find: />:\\ $/, replace: '😕 ' }),
+			textInputRule({ find: />:\/ $/, replace: '😕 ' }),
+			textInputRule({ find: /:-\/ $/, replace: '😕 ' }),
+			textInputRule({ find: /:-. $/, replace: '😕 ' }),
+			textInputRule({ find: />:\[ $/, replace: '😞 ' }),
+			textInputRule({ find: /:-\( $/, replace: '😞 ' }),
+			textInputRule({ find: /:-\[ $/, replace: '😞 ' }),
+			textInputRule({ find: /:'\( $/, replace: '😢 ' }),
+			textInputRule({ find: /;-\( $/, replace: '😢 ' }),
+			textInputRule({ find: /#-\) $/, replace: '😵 ' }),
+			textInputRule({ find: /%-\) $/, replace: '😵 ' }),
+			textInputRule({ find: /X-\) $/, replace: '😵 ' }),
+			textInputRule({ find: />:\( $/, replace: '😠 ' }),
+			textInputRule({ find: /0:3 $/, replace: '😇 ' }),
+			textInputRule({ find: /0:\) $/, replace: '😇 ' }),
+			textInputRule({ find: /O:\) $/, replace: '😇 ' }),
+			textInputRule({ find: /O=\) $/, replace: '😇 ' }),
+			textInputRule({ find: /O:3 $/, replace: '😇 ' }),
+			textInputRule({ find: /<\/3 $/, replace: '💔 ' }),
+			textInputRule({ find: /:D $/, replace: '😃 ' }),
+			textInputRule({ find: /=D $/, replace: '😃 ' }),
+			textInputRule({ find: /;\) $/, replace: '😉 ' }),
+			textInputRule({ find: /\*\) $/, replace: '😉 ' }),
+			textInputRule({ find: /;\] $/, replace: '😉 ' }),
+			textInputRule({ find: /;D $/, replace: '😉 ' }),
+			textInputRule({ find: /B\) $/, replace: '😎 ' }),
+			textInputRule({ find: /8\) $/, replace: '😎 ' }),
+			textInputRule({ find: /:\* $/, replace: '😘 ' }),
+			textInputRule({ find: /=\* $/, replace: '😘 ' }),
+			textInputRule({ find: /:\) $/, replace: '🙂 ' }),
+			textInputRule({ find: /=\] $/, replace: '🙂 ' }),
+			textInputRule({ find: /=\) $/, replace: '🙂 ' }),
+			textInputRule({ find: /:\] $/, replace: '🙂 ' }),
+			textInputRule({ find: /:X $/, replace: '😶 ' }),
+			textInputRule({ find: /:# $/, replace: '😶 ' }),
+			textInputRule({ find: /=X $/, replace: '😶 ' }),
+			textInputRule({ find: /=x $/, replace: '😶 ' }),
+			textInputRule({ find: /:x $/, replace: '😶 ' }),
+			textInputRule({ find: /=# $/, replace: '😶 ' }),
+			textInputRule({ find: /:O $/, replace: '😮 ' }),
+			textInputRule({ find: /:o $/, replace: '😮 ' }),
+			textInputRule({ find: /:P $/, replace: '😛 ' }),
+			textInputRule({ find: /=P $/, replace: '😛 ' }),
+			textInputRule({ find: /:p $/, replace: '😛  ' }),
+			textInputRule({ find: /=p $/, replace: '😛 ' }),
+			textInputRule({ find: /:Þ $/, replace: '😛 ' }),
+			textInputRule({ find: /:þ $/, replace: '😛 ' }),
+			textInputRule({ find: /:b $/, replace: '😛 ' }),
+			textInputRule({ find: /d: $/, replace: '😛 ' }),
+			textInputRule({ find: /:\/ $/, replace: '😕 ' }),
+			textInputRule({ find: /:\\ $/, replace: '😕 ' }),
+			textInputRule({ find: /=\/ $/, replace: '😕 ' }),
+			textInputRule({ find: /=\\ $/, replace: '😕 ' }),
+			textInputRule({ find: /:L $/, replace: '😕 ' }),
+			textInputRule({ find: /=L $/, replace: '😕 ' }),
+			textInputRule({ find: /:\( $/, replace: '😞 ' }),
+			textInputRule({ find: /:\[ $/, replace: '😞 ' }),
+			textInputRule({ find: /=\( $/, replace: '😞 ' }),
+			textInputRule({ find: /;\( $/, replace: '😢 ' }),
+			textInputRule({ find: /D: $/, replace: '😨 ' }),
+			textInputRule({ find: /:\$ $/, replace: '😳 ' }),
+			textInputRule({ find: /=\$ $/, replace: '😳 ' }),
+			textInputRule({ find: /#\) $/, replace: '😵 ' }),
+			textInputRule({ find: /%\) $/, replace: '😵 ' }),
+			textInputRule({ find: /X\) $/, replace: '😵 ' }),
+			textInputRule({ find: /:@ $/, replace: '😠 ' }),
+			textInputRule({ find: /<3 $/, replace: '❤️ ' }),
+			textInputRule({ find: /\/shrug $/, replace: '¯\\_(ツ)_/¯' })
+		]
+	}
+})
diff --git a/src/lib/components/edra/extensions/audio/AudiExtended.ts b/src/lib/components/edra/extensions/audio/AudiExtended.ts
new file mode 100644
index 0000000..38025e9
--- /dev/null
+++ b/src/lib/components/edra/extensions/audio/AudiExtended.ts
@@ -0,0 +1,34 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+import { Audio } from './AudioExtension.js'
+import type { NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+
+export const AudioExtended = (content: Component<NodeViewProps>) =>
+	Audio.extend({
+		addAttributes() {
+			return {
+				src: {
+					default: null
+				},
+				alt: {
+					default: null
+				},
+				title: {
+					default: null
+				},
+				width: {
+					default: '100%'
+				},
+				height: {
+					default: null
+				},
+				align: {
+					default: 'left'
+				}
+			}
+		},
+
+		addNodeView: () => {
+			return SvelteNodeViewRenderer(content)
+		}
+	})
diff --git a/src/lib/components/edra/extensions/audio/AudioExtension.ts b/src/lib/components/edra/extensions/audio/AudioExtension.ts
new file mode 100644
index 0000000..4aebae3
--- /dev/null
+++ b/src/lib/components/edra/extensions/audio/AudioExtension.ts
@@ -0,0 +1,147 @@
+import { Node, nodeInputRule } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export interface AudioOptions {
+	HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		audio: {
+			/**
+			 * Set a audio node
+			 */
+			setAudio: (src: string) => ReturnType
+			/**
+			 * Toggle a audio
+			 */
+			toggleAudio: (src: string) => ReturnType
+			/**
+			 * Remove a audio
+			 */
+			removeAudio: () => ReturnType
+		}
+	}
+}
+
+const AUDIO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
+
+export const Audio = Node.create<AudioOptions>({
+	name: 'audio',
+	group: 'block',
+	draggable: true,
+	isolating: true,
+	atom: true,
+	addOptions() {
+		return {
+			HTMLAttributes: {}
+		}
+	},
+	addAttributes() {
+		return {
+			src: {
+				default: null,
+				parseHTML: (el) => (el as HTMLSpanElement).getAttribute('src'),
+				renderHTML: (attrs) => ({ src: attrs.src })
+			}
+		}
+	},
+	parseHTML() {
+		return [
+			{
+				tag: 'audio',
+				getAttrs: (el) => ({ src: (el as HTMLAudioElement).getAttribute('src') })
+			}
+		]
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			'audio',
+			{ controls: 'true', style: 'width: 100%;', ...HTMLAttributes },
+			['source', HTMLAttributes]
+		]
+	},
+	addCommands() {
+		return {
+			setAudio:
+				(src: string) =>
+				({ commands }) =>
+					commands.insertContent(
+						`<audio controls autoplay="false" style="width: 100%;" src="${src}"></audio>`
+					),
+
+			toggleAudio:
+				() =>
+				({ commands }) =>
+					commands.toggleNode(this.name, 'paragraph'),
+			removeAudio:
+				() =>
+				({ commands }) =>
+					commands.deleteNode(this.name)
+		}
+	},
+	addInputRules() {
+		return [
+			nodeInputRule({
+				find: AUDIO_INPUT_REGEX,
+				type: this.type,
+				getAttributes: (match) => {
+					const [, , src] = match
+
+					return { src }
+				}
+			})
+		]
+	},
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				key: new PluginKey('audioDropPlugin'),
+
+				props: {
+					handleDOMEvents: {
+						drop(view, event) {
+							const {
+								state: { schema, tr },
+								dispatch
+							} = view
+							const hasFiles =
+								event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length
+
+							if (!hasFiles) return false
+
+							const audios = Array.from(event.dataTransfer.files).filter((file) =>
+								/audio/i.test(file.type)
+							)
+
+							if (audios.length === 0) return false
+
+							event.preventDefault()
+
+							const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })
+
+							audios.forEach((audio) => {
+								const reader = new FileReader()
+
+								reader.onload = (readerEvent) => {
+									const node = schema.nodes.audio.create({ src: readerEvent.target?.result })
+
+									if (coordinates && typeof coordinates.pos === 'number') {
+										const transaction = tr.insert(coordinates?.pos, node)
+
+										dispatch(transaction)
+									}
+								}
+
+								reader.readAsDataURL(audio)
+							})
+
+							return true
+						}
+					}
+				}
+			})
+		]
+	}
+})
diff --git a/src/lib/components/edra/extensions/audio/AudioPlaceholder.ts b/src/lib/components/edra/extensions/audio/AudioPlaceholder.ts
new file mode 100644
index 0000000..50ba60b
--- /dev/null
+++ b/src/lib/components/edra/extensions/audio/AudioPlaceholder.ts
@@ -0,0 +1,64 @@
+import { Editor, Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+
+export interface AudioPlaceholderOptions {
+	HTMLAttributes: Record<string, object>
+	onDrop: (files: File[], editor: Editor) => void
+	onDropRejected?: (files: File[], editor: Editor) => void
+	onEmbed: (url: string, editor: Editor) => void
+	allowedMimeTypes?: Record<string, string[]>
+	maxFiles?: number
+	maxSize?: number
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		audioPlaceholder: {
+			/**
+			 * Inserts an audio placeholder
+			 */
+			insertAudioPlaceholder: () => ReturnType
+		}
+	}
+}
+
+export const AudioPlaceholder = (
+	component: Component<NodeViewProps>
+): Node<AudioPlaceholderOptions> =>
+	Node.create<AudioPlaceholderOptions>({
+		name: 'audio-placeholder',
+		addOptions() {
+			return {
+				HTMLAttributes: {},
+				onDrop: () => {},
+				onDropRejected: () => {},
+				onEmbed: () => {}
+			}
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }]
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return ['div', mergeAttributes(HTMLAttributes)]
+		},
+		group: 'block',
+		draggable: true,
+		atom: true,
+		content: 'inline*',
+		isolating: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(component)
+		},
+		addCommands() {
+			return {
+				insertAudioPlaceholder: () => (props: CommandProps) => {
+					return props.commands.insertContent({
+						type: 'audio-placeholder'
+					})
+				}
+			}
+		}
+	})
diff --git a/src/lib/components/edra/extensions/drag-handle/ClipboardSerializer.ts b/src/lib/components/edra/extensions/drag-handle/ClipboardSerializer.ts
new file mode 100644
index 0000000..9549df4
--- /dev/null
+++ b/src/lib/components/edra/extensions/drag-handle/ClipboardSerializer.ts
@@ -0,0 +1,27 @@
+import { Slice } from '@tiptap/pm/model'
+import { EditorView } from '@tiptap/pm/view'
+import * as pmView from '@tiptap/pm/view'
+
+function getPmView() {
+	try {
+		return pmView
+	} catch (error: Error) {
+		return null
+	}
+}
+
+export function serializeForClipboard(view: EditorView, slice: Slice) {
+	// Newer Tiptap/ProseMirror
+	if (view && typeof view.serializeForClipboard === 'function') {
+		return view.serializeForClipboard(slice)
+	}
+
+	// Older version fallback
+	const proseMirrorView = getPmView()
+
+	if (proseMirrorView && typeof proseMirrorView?.__serializeForClipboard === 'function') {
+		return proseMirrorView.__serializeForClipboard(view, slice)
+	}
+
+	throw new Error('No supported clipboard serialization method found.')
+}
diff --git a/src/lib/components/edra/extensions/drag-handle/index.ts b/src/lib/components/edra/extensions/drag-handle/index.ts
new file mode 100644
index 0000000..06f6e8e
--- /dev/null
+++ b/src/lib/components/edra/extensions/drag-handle/index.ts
@@ -0,0 +1,381 @@
+import { Extension } from '@tiptap/core'
+import { NodeSelection, Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
+import { Fragment, Slice, Node } from '@tiptap/pm/model'
+import { EditorView } from '@tiptap/pm/view'
+import { serializeForClipboard } from './ClipboardSerializer.js'
+
+export interface GlobalDragHandleOptions {
+	/**
+	 * The width of the drag handle
+	 */
+	dragHandleWidth: number
+
+	/**
+	 * The treshold for scrolling
+	 */
+	scrollTreshold: number
+
+	/*
+	 * The css selector to query for the drag handle. (eg: '.custom-handle').
+	 * If handle element is found, that element will be used as drag handle. If not, a default handle will be created
+	 */
+	dragHandleSelector?: string
+
+	/**
+	 * Tags to be excluded for drag handle
+	 */
+	excludedTags: string[]
+
+	/**
+	 * Custom nodes to be included for drag handle
+	 */
+	customNodes: string[]
+
+	/**
+	 * onNodeChange callback for drag handle
+	 * @param data
+	 * @returns
+	 */
+	onMouseMove?: (data: { node: Node; pos: number }) => void
+}
+function absoluteRect(node: Element) {
+	const data = node.getBoundingClientRect()
+	const modal = node.closest('[role="dialog"]')
+
+	if (modal && window.getComputedStyle(modal).transform !== 'none') {
+		const modalRect = modal.getBoundingClientRect()
+
+		return {
+			top: data.top - modalRect.top,
+			left: data.left - modalRect.left,
+			width: data.width
+		}
+	}
+	return {
+		top: data.top,
+		left: data.left,
+		width: data.width
+	}
+}
+
+function nodeDOMAtCoords(coords: { x: number; y: number }, options: GlobalDragHandleOptions) {
+	const selectors = [
+		'li',
+		'p:not(:first-child)',
+		'pre',
+		'blockquote',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		...options.customNodes.map((node) => `[data-type=${node}]`)
+	].join(', ')
+	return document
+		.elementsFromPoint(coords.x, coords.y)
+		.find(
+			(elem: Element) => elem.parentElement?.matches?.('.ProseMirror') || elem.matches(selectors)
+		)
+}
+function nodePosAtDOM(node: Element, view: EditorView, options: GlobalDragHandleOptions) {
+	const boundingRect = node.getBoundingClientRect()
+
+	return view.posAtCoords({
+		left: boundingRect.left + 50 + options.dragHandleWidth,
+		top: boundingRect.top + 1
+	})?.inside
+}
+
+function calcNodePos(pos: number, view: EditorView) {
+	const $pos = view.state.doc.resolve(pos)
+	if ($pos.depth > 1) return $pos.before($pos.depth)
+	return pos
+}
+
+export function DragHandlePlugin(options: GlobalDragHandleOptions & { pluginKey: string }) {
+	let listType = ''
+	function handleDragStart(event: DragEvent, view: EditorView) {
+		view.focus()
+
+		if (!event.dataTransfer) return
+
+		const node = nodeDOMAtCoords(
+			{
+				x: event.clientX + 50 + options.dragHandleWidth,
+				y: event.clientY
+			},
+			options
+		)
+
+		if (!(node instanceof Element)) return
+
+		let draggedNodePos = nodePosAtDOM(node, view, options)
+		if (draggedNodePos == null || draggedNodePos < 0) return
+		draggedNodePos = calcNodePos(draggedNodePos, view)
+
+		const { from, to } = view.state.selection
+		const diff = from - to
+
+		const fromSelectionPos = calcNodePos(from, view)
+		let differentNodeSelected = false
+
+		const nodePos = view.state.doc.resolve(fromSelectionPos)
+
+		// Check if nodePos points to the top level node
+		if (nodePos.node().type.name === 'doc') differentNodeSelected = true
+		else {
+			const nodeSelection = NodeSelection.create(view.state.doc, nodePos.before())
+
+			// Check if the node where the drag event started is part of the current selection
+			differentNodeSelected = !(
+				draggedNodePos + 1 >= nodeSelection.$from.pos && draggedNodePos <= nodeSelection.$to.pos
+			)
+		}
+		let selection = view.state.selection
+		if (!differentNodeSelected && diff !== 0 && !(view.state.selection instanceof NodeSelection)) {
+			const endSelection = NodeSelection.create(view.state.doc, to - 1)
+			selection = TextSelection.create(view.state.doc, draggedNodePos, endSelection.$to.pos)
+		} else {
+			selection = NodeSelection.create(view.state.doc, draggedNodePos)
+
+			// if inline node is selected, e.g mention -> go to the parent node to select the whole node
+			// if table row is selected, go to the parent node to select the whole node
+			if (
+				(selection as NodeSelection).node.type.isInline ||
+				(selection as NodeSelection).node.type.name === 'tableRow'
+			) {
+				const $pos = view.state.doc.resolve(selection.from)
+				selection = NodeSelection.create(view.state.doc, $pos.before())
+			}
+		}
+		view.dispatch(view.state.tr.setSelection(selection))
+
+		// If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
+		if (
+			view.state.selection instanceof NodeSelection &&
+			view.state.selection.node.type.name === 'listItem'
+		) {
+			listType = node.parentElement!.tagName
+		}
+
+		const slice = view.state.selection.content()
+		const { dom, text } = serializeForClipboard(view, slice)
+
+		event.dataTransfer.clearData()
+		event.dataTransfer.setData('text/html', dom.innerHTML)
+		event.dataTransfer.setData('text/plain', text)
+		event.dataTransfer.effectAllowed = 'copyMove'
+
+		event.dataTransfer.setDragImage(node, 0, 0)
+
+		view.dragging = { slice, move: event.ctrlKey }
+	}
+
+	let dragHandleElement: HTMLElement | null = null
+
+	function hideDragHandle() {
+		if (dragHandleElement) {
+			dragHandleElement.classList.add('hide')
+		}
+	}
+
+	function showDragHandle() {
+		if (dragHandleElement) {
+			dragHandleElement.classList.remove('hide')
+		}
+	}
+
+	function hideHandleOnEditorOut(event: MouseEvent) {
+		if (event.target instanceof Element) {
+			// Check if the relatedTarget class is still inside the editor
+			const relatedTarget = event.relatedTarget as HTMLElement
+			const isInsideEditor =
+				relatedTarget?.classList.contains('tiptap') ||
+				relatedTarget?.classList.contains('drag-handle')
+
+			if (isInsideEditor) return
+		}
+		hideDragHandle()
+	}
+
+	return new Plugin({
+		key: new PluginKey(options.pluginKey),
+		view: (view) => {
+			const handleBySelector = options.dragHandleSelector
+				? document.querySelector<HTMLElement>(options.dragHandleSelector)
+				: null
+			dragHandleElement = handleBySelector ?? document.createElement('div')
+			dragHandleElement.draggable = true
+			dragHandleElement.dataset.dragHandle = ''
+			dragHandleElement.classList.add('drag-handle')
+
+			function onDragHandleDragStart(e: DragEvent) {
+				handleDragStart(e, view)
+			}
+
+			dragHandleElement.addEventListener('dragstart', onDragHandleDragStart)
+
+			function onDragHandleDrag(e: DragEvent) {
+				hideDragHandle()
+				const scrollY = window.scrollY
+				if (e.clientY < options.scrollTreshold) {
+					window.scrollTo({ top: scrollY - 30, behavior: 'smooth' })
+				} else if (window.innerHeight - e.clientY < options.scrollTreshold) {
+					window.scrollTo({ top: scrollY + 30, behavior: 'smooth' })
+				}
+			}
+
+			dragHandleElement.addEventListener('drag', onDragHandleDrag)
+
+			hideDragHandle()
+
+			if (!handleBySelector) {
+				view?.dom?.parentElement?.appendChild(dragHandleElement)
+			}
+			view?.dom?.parentElement?.addEventListener('mouseout', hideHandleOnEditorOut)
+
+			return {
+				destroy: () => {
+					if (!handleBySelector) {
+						dragHandleElement?.remove?.()
+					}
+					dragHandleElement?.removeEventListener('drag', onDragHandleDrag)
+					dragHandleElement?.removeEventListener('dragstart', onDragHandleDragStart)
+					dragHandleElement = null
+					view?.dom?.parentElement?.removeEventListener('mouseout', hideHandleOnEditorOut)
+				}
+			}
+		},
+		props: {
+			handleDOMEvents: {
+				mousemove: (view, event) => {
+					if (!view.editable) {
+						return
+					}
+
+					const node = nodeDOMAtCoords(
+						{
+							x: event.clientX + 50 + options.dragHandleWidth,
+							y: event.clientY
+						},
+						options
+					)
+
+					const notDragging = node?.closest('.not-draggable')
+					const excludedTagList = options.excludedTags.concat(['ol', 'ul']).join(', ')
+
+					if (!(node instanceof Element) || node.matches(excludedTagList) || notDragging) {
+						hideDragHandle()
+						return
+					}
+
+					const nodePos = nodePosAtDOM(node, view, options)
+					if (nodePos !== undefined) {
+						const currentNode = view.state.doc.nodeAt(nodePos)
+						if (currentNode !== null) {
+							options.onMouseMove?.({ node: currentNode, pos: nodePos })
+						}
+					}
+
+					const compStyle = window.getComputedStyle(node)
+					const parsedLineHeight = parseInt(compStyle.lineHeight, 10)
+					const lineHeight = isNaN(parsedLineHeight)
+						? parseInt(compStyle.fontSize) * 1.2
+						: parsedLineHeight
+					const paddingTop = parseInt(compStyle.paddingTop, 10)
+
+					const rect = absoluteRect(node)
+
+					rect.top += (lineHeight - 24) / 2
+					rect.top += paddingTop
+					// Li markers
+					if (node.matches('ul:not([data-type=taskList]) li, ol li')) {
+						rect.left -= options.dragHandleWidth
+					}
+					rect.width = options.dragHandleWidth
+
+					if (!dragHandleElement) return
+
+					dragHandleElement.style.left = `${rect.left - rect.width}px`
+					dragHandleElement.style.top = `${rect.top}px`
+					showDragHandle()
+				},
+				keydown: () => {
+					hideDragHandle()
+				},
+				mousewheel: () => {
+					hideDragHandle()
+				},
+				// dragging class is used for CSS
+				dragstart: (view) => {
+					view.dom.classList.add('dragging')
+				},
+				drop: (view, event) => {
+					view.dom.classList.remove('dragging')
+					hideDragHandle()
+					let droppedNode: Node | null = null
+					const dropPos = view.posAtCoords({
+						left: event.clientX,
+						top: event.clientY
+					})
+
+					if (!dropPos) return
+
+					if (view.state.selection instanceof NodeSelection) {
+						droppedNode = view.state.selection.node
+					}
+					if (!droppedNode) return
+
+					const resolvedPos = view.state.doc.resolve(dropPos.pos)
+
+					const isDroppedInsideList = resolvedPos.parent.type.name === 'listItem'
+
+					// If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
+					if (
+						view.state.selection instanceof NodeSelection &&
+						view.state.selection.node.type.name === 'listItem' &&
+						!isDroppedInsideList &&
+						listType == 'OL'
+					) {
+						const newList = view.state.schema.nodes.orderedList?.createAndFill(null, droppedNode)
+						const slice = new Slice(Fragment.from(newList), 0, 0)
+						view.dragging = { slice, move: event.ctrlKey }
+					}
+				},
+				dragend: (view) => {
+					view.dom.classList.remove('dragging')
+				}
+			}
+		}
+	})
+}
+
+const GlobalDragHandle = Extension.create({
+	name: 'globalDragHandle',
+
+	addOptions() {
+		return {
+			dragHandleWidth: 20,
+			scrollTreshold: 100,
+			excludedTags: [],
+			customNodes: []
+		}
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			DragHandlePlugin({
+				pluginKey: 'globalDragHandle',
+				dragHandleWidth: this.options.dragHandleWidth,
+				scrollTreshold: this.options.scrollTreshold,
+				dragHandleSelector: this.options.dragHandleSelector,
+				excludedTags: this.options.excludedTags,
+				customNodes: this.options.customNodes,
+				onMouseMove: this.options.onMouseMove
+			})
+		]
+	}
+})
+
+export default GlobalDragHandle
diff --git a/src/lib/components/edra/extensions/gallery/GalleryExtended.ts b/src/lib/components/edra/extensions/gallery/GalleryExtended.ts
new file mode 100644
index 0000000..ec10883
--- /dev/null
+++ b/src/lib/components/edra/extensions/gallery/GalleryExtended.ts
@@ -0,0 +1,88 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+import { Node, mergeAttributes } from '@tiptap/core'
+import type { Component } from 'svelte'
+import type { NodeViewProps } from '@tiptap/core'
+
+export interface GalleryOptions {
+	HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		gallery: {
+			/**
+			 * Insert a gallery
+			 */
+			setGallery: (options: {
+				images: Array<{ id: number; url: string; alt?: string; title?: string }>
+			}) => ReturnType
+		}
+	}
+}
+
+export const GalleryExtended = (
+	component: Component<NodeViewProps>
+): Node<GalleryOptions, unknown> => {
+	return Node.create<GalleryOptions>({
+		name: 'gallery',
+
+		addOptions() {
+			return {
+				HTMLAttributes: {}
+			}
+		},
+
+		addAttributes() {
+			return {
+				images: {
+					default: []
+				},
+				layout: {
+					default: 'grid' // grid, masonry, carousel
+				},
+				columns: {
+					default: 3
+				},
+				gap: {
+					default: '16px'
+				}
+			}
+		},
+
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }]
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return [
+				'div',
+				mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+					'data-type': this.name
+				})
+			]
+		},
+
+		group: 'block',
+		draggable: true,
+		atom: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(component)
+		},
+
+		addCommands() {
+			return {
+				setGallery:
+					(options) =>
+					({ commands }) => {
+						return commands.insertContent({
+							type: this.name,
+							attrs: {
+								images: options.images
+							}
+						})
+					}
+			}
+		}
+	})
+}
diff --git a/src/lib/components/edra/extensions/gallery/GalleryPlaceholder.ts b/src/lib/components/edra/extensions/gallery/GalleryPlaceholder.ts
new file mode 100644
index 0000000..262f064
--- /dev/null
+++ b/src/lib/components/edra/extensions/gallery/GalleryPlaceholder.ts
@@ -0,0 +1,57 @@
+import { Editor, Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+
+export interface GalleryPlaceholderOptions {
+	HTMLAttributes: Record<string, object>
+	onSelectImages: (images: any[], editor: Editor) => void
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		galleryPlaceholder: {
+			/**
+			 * Inserts a gallery placeholder
+			 */
+			insertGalleryPlaceholder: () => ReturnType
+		}
+	}
+}
+
+export const GalleryPlaceholder = (
+	component: Component<NodeViewProps>
+): Node<GalleryPlaceholderOptions> =>
+	Node.create<GalleryPlaceholderOptions>({
+		name: 'gallery-placeholder',
+		addOptions() {
+			return {
+				HTMLAttributes: {},
+				onSelectImages: () => {}
+			}
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }]
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return ['div', mergeAttributes(HTMLAttributes)]
+		},
+		group: 'block',
+		draggable: true,
+		atom: true,
+		content: 'inline*',
+		isolating: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(component)
+		},
+		addCommands() {
+			return {
+				insertGalleryPlaceholder: () => (props: CommandProps) => {
+					return props.commands.insertContent({
+						type: 'gallery-placeholder'
+					})
+				}
+			}
+		}
+	})
diff --git a/src/lib/components/edra/extensions/iframe/IFrame.ts b/src/lib/components/edra/extensions/iframe/IFrame.ts
new file mode 100644
index 0000000..3756f1b
--- /dev/null
+++ b/src/lib/components/edra/extensions/iframe/IFrame.ts
@@ -0,0 +1,85 @@
+import { Node } from '@tiptap/core'
+
+export interface IframeOptions {
+	allowFullscreen: boolean
+	HTMLAttributes: {
+		[key: string]: unknown
+	}
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		iframe: {
+			/**
+			 * Add an iframe with src
+			 */
+			setIframe: (options: { src: string }) => ReturnType
+			removeIframe: () => ReturnType
+		}
+	}
+}
+
+export default Node.create<IframeOptions>({
+	name: 'iframe',
+
+	group: 'block',
+
+	atom: true,
+
+	addOptions() {
+		return {
+			allowFullscreen: true,
+			HTMLAttributes: {
+				class: 'iframe-wrapper'
+			}
+		}
+	},
+
+	addAttributes() {
+		return {
+			src: {
+				default: null
+			},
+			frameborder: {
+				default: 0
+			},
+			allowfullscreen: {
+				default: this.options.allowFullscreen,
+				parseHTML: () => this.options.allowFullscreen
+			}
+		}
+	},
+
+	parseHTML() {
+		return [
+			{
+				tag: 'iframe'
+			}
+		]
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes]]
+	},
+
+	addCommands() {
+		return {
+			setIframe:
+				(options: { src: string }) =>
+				({ tr, dispatch }) => {
+					const { selection } = tr
+					const node = this.type.create(options)
+
+					if (dispatch) {
+						tr.replaceRangeWith(selection.from, selection.to, node)
+					}
+
+					return true
+				},
+			removeIframe:
+				() =>
+				({ commands }) =>
+					commands.deleteNode(this.name)
+		}
+	}
+})
diff --git a/src/lib/components/edra/extensions/iframe/IFrameExtended.ts b/src/lib/components/edra/extensions/iframe/IFrameExtended.ts
new file mode 100644
index 0000000..37b05f8
--- /dev/null
+++ b/src/lib/components/edra/extensions/iframe/IFrameExtended.ts
@@ -0,0 +1,35 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+
+import type { NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+import IFrame from './IFrame.js'
+
+export const IFrameExtended = (content: Component<NodeViewProps>) =>
+	IFrame.extend({
+		addAttributes() {
+			return {
+				src: {
+					default: null
+				},
+				alt: {
+					default: null
+				},
+				title: {
+					default: null
+				},
+				width: {
+					default: '100%'
+				},
+				height: {
+					default: null
+				},
+				align: {
+					default: 'left'
+				}
+			}
+		},
+
+		addNodeView: () => {
+			return SvelteNodeViewRenderer(content)
+		}
+	})
diff --git a/src/lib/components/edra/extensions/iframe/IFramePlaceholder.ts b/src/lib/components/edra/extensions/iframe/IFramePlaceholder.ts
new file mode 100644
index 0000000..947e0f4
--- /dev/null
+++ b/src/lib/components/edra/extensions/iframe/IFramePlaceholder.ts
@@ -0,0 +1,56 @@
+import { Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+
+export interface IFramePlaceholderOptions {
+	HTMLAttributes: Record<string, object>
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		iframePlaceholder: {
+			/**
+			 * Inserts a IFrame placeholder
+			 */
+			insertIFramePlaceholder: () => ReturnType
+		}
+	}
+}
+
+export const IFramePlaceholder = (content: Component<NodeViewProps>) =>
+	Node.create<IFramePlaceholderOptions>({
+		name: 'iframe-placeholder',
+		addOptions() {
+			return {
+				HTMLAttributes: {},
+				onDrop: () => {},
+				onDropRejected: () => {},
+				onEmbed: () => {}
+			}
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }]
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return ['div', mergeAttributes(HTMLAttributes)]
+		},
+		group: 'block',
+		draggable: true,
+		atom: true,
+		content: 'inline*',
+		isolating: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(content)
+		},
+		addCommands() {
+			return {
+				insertIFramePlaceholder: () => (props: CommandProps) => {
+					return props.commands.insertContent({
+						type: 'iframe-placeholder'
+					})
+				}
+			}
+		}
+	})
diff --git a/src/lib/components/edra/extensions/image/ImageExtended.ts b/src/lib/components/edra/extensions/image/ImageExtended.ts
new file mode 100644
index 0000000..683b8eb
--- /dev/null
+++ b/src/lib/components/edra/extensions/image/ImageExtended.ts
@@ -0,0 +1,36 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+import Image, { type ImageOptions } from '@tiptap/extension-image'
+import type { Component } from 'svelte'
+import type { NodeViewProps, Node } from '@tiptap/core'
+
+export const ImageExtended = (component: Component<NodeViewProps>): Node<ImageOptions, unknown> => {
+	return Image.extend({
+		addAttributes() {
+			return {
+				src: {
+					default: null
+				},
+				alt: {
+					default: null
+				},
+				title: {
+					default: null
+				},
+				width: {
+					default: '100%'
+				},
+				height: {
+					default: null
+				},
+				align: {
+					default: 'left'
+				}
+			}
+		},
+		addNodeView: () => {
+			return SvelteNodeViewRenderer(component)
+		}
+	}).configure({
+		allowBase64: true
+	})
+}
diff --git a/src/lib/components/edra/extensions/image/ImagePlaceholder.ts b/src/lib/components/edra/extensions/image/ImagePlaceholder.ts
new file mode 100644
index 0000000..0cae104
--- /dev/null
+++ b/src/lib/components/edra/extensions/image/ImagePlaceholder.ts
@@ -0,0 +1,64 @@
+import { Editor, Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+
+export interface ImagePlaceholderOptions {
+	HTMLAttributes: Record<string, object>
+	onDrop: (files: File[], editor: Editor) => void
+	onDropRejected?: (files: File[], editor: Editor) => void
+	onEmbed: (url: string, editor: Editor) => void
+	allowedMimeTypes?: Record<string, string[]>
+	maxFiles?: number
+	maxSize?: number
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		imagePlaceholder: {
+			/**
+			 * Inserts an image placeholder
+			 */
+			insertImagePlaceholder: () => ReturnType
+		}
+	}
+}
+
+export const ImagePlaceholder = (
+	component: Component<NodeViewProps>
+): Node<ImagePlaceholderOptions> =>
+	Node.create<ImagePlaceholderOptions>({
+		name: 'image-placeholder',
+		addOptions() {
+			return {
+				HTMLAttributes: {},
+				onDrop: () => {},
+				onDropRejected: () => {},
+				onEmbed: () => {}
+			}
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }]
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return ['div', mergeAttributes(HTMLAttributes)]
+		},
+		group: 'block',
+		draggable: true,
+		atom: true,
+		content: 'inline*',
+		isolating: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(component)
+		},
+		addCommands() {
+			return {
+				insertImagePlaceholder: () => (props: CommandProps) => {
+					return props.commands.insertContent({
+						type: 'image-placeholder'
+					})
+				}
+			}
+		}
+	})
diff --git a/src/lib/components/edra/extensions/slash-command/groups.ts b/src/lib/components/edra/extensions/slash-command/groups.ts
new file mode 100644
index 0000000..bea3631
--- /dev/null
+++ b/src/lib/components/edra/extensions/slash-command/groups.ts
@@ -0,0 +1,55 @@
+import { commands } from '../../commands/commands.js'
+
+import type { EdraCommand } from '../../commands/types.js'
+import type { Editor } from '@tiptap/core'
+
+export interface Group {
+	name: string
+	title: string
+	commands: EdraCommand[]
+}
+
+export const GROUPS: Group[] = [
+	{
+		name: 'format',
+		title: 'Format',
+		commands: [
+			...commands.headings.commands,
+			{
+				iconName: 'Quote',
+				name: 'blockquote',
+				label: 'Blockquote',
+				action: (editor: Editor) => {
+					editor.chain().focus().setBlockquote().run()
+				}
+			},
+			{
+				iconName: 'SquareCode',
+				name: 'codeBlock',
+				label: 'Code Block',
+				action: (editor: Editor) => {
+					editor.chain().focus().setCodeBlock().run()
+				}
+			},
+			...commands.lists.commands
+		]
+	},
+	{
+		name: 'insert',
+		title: 'Insert',
+		commands: [
+			...commands.media.commands,
+			...commands.table.commands,
+			{
+				iconName: 'Minus',
+				name: 'horizontalRule',
+				label: 'Horizontal Rule',
+				action: (editor: Editor) => {
+					editor.chain().focus().setHorizontalRule().run()
+				}
+			}
+		]
+	}
+]
+
+export default GROUPS
diff --git a/src/lib/components/edra/extensions/slash-command/slashcommand.ts b/src/lib/components/edra/extensions/slash-command/slashcommand.ts
new file mode 100644
index 0000000..ef2e39a
--- /dev/null
+++ b/src/lib/components/edra/extensions/slash-command/slashcommand.ts
@@ -0,0 +1,252 @@
+import { Editor, Extension } from '@tiptap/core'
+import Suggestion, { type SuggestionProps, type SuggestionKeyDownProps } from '@tiptap/suggestion'
+import { PluginKey } from '@tiptap/pm/state'
+
+import { GROUPS } from './groups.js'
+import SvelteRenderer from '../../svelte-renderer.js'
+import tippy from 'tippy.js'
+import type { Component } from 'svelte'
+
+const extensionName = 'slashCommand'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let popup: any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default (menuList: Component<any, any, ''>): Extension =>
+	Extension.create({
+		name: extensionName,
+
+		priority: 200,
+
+		onCreate() {
+			popup = tippy('body', {
+				interactive: true,
+				trigger: 'manual',
+				placement: 'bottom-start',
+				theme: 'slash-command',
+				maxWidth: '16rem',
+				offset: [16, 8],
+				popperOptions: {
+					strategy: 'fixed',
+					modifiers: [
+						{
+							name: 'flip',
+							enabled: false
+						}
+					]
+				}
+			})
+		},
+
+		addProseMirrorPlugins() {
+			return [
+				Suggestion({
+					editor: this.editor,
+					char: '/',
+					allowSpaces: true,
+					pluginKey: new PluginKey(extensionName),
+					allow: ({ state, range }) => {
+						const $from = state.doc.resolve(range.from)
+						const afterContent = $from.parent.textContent?.substring(
+							$from.parent.textContent?.indexOf('/')
+						)
+						const isValidAfterContent = !afterContent?.endsWith('  ')
+
+						return isValidAfterContent
+					},
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					command: ({ editor, props }: { editor: Editor; props: any }) => {
+						const { view, state } = editor
+						const { $head, $from } = view.state.selection
+
+						try {
+							const end = $from.pos
+							const from = $head?.nodeBefore
+								? end -
+									($head.nodeBefore.text?.substring($head.nodeBefore.text?.indexOf('/')).length ??
+										0)
+								: $from.start()
+
+							const tr = state.tr.deleteRange(from, end)
+							view.dispatch(tr)
+						} catch (error) {
+							console.error(error)
+						}
+
+						props.action(editor)
+						view.focus()
+					},
+					items: ({ query }: { query: string }) => {
+						const withFilteredCommands = GROUPS.map((group) => ({
+							...group,
+							commands: group.commands.filter((item) => {
+								const labelNormalized = item.label.toLowerCase().trim()
+								const queryNormalized = query.toLowerCase().trim()
+								return labelNormalized.includes(queryNormalized)
+							})
+						}))
+
+						const withoutEmptyGroups = withFilteredCommands.filter((group) => {
+							if (group.commands.length > 0) {
+								return true
+							}
+
+							return false
+						})
+
+						const withEnabledSettings = withoutEmptyGroups.map((group) => ({
+							...group,
+							commands: group.commands.map((command) => ({
+								...command,
+								isEnabled: true
+							}))
+						}))
+
+						return withEnabledSettings
+					},
+					render: () => {
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						let component: any
+
+						let scrollHandler: (() => void) | null = null
+
+						return {
+							onStart: (props: SuggestionProps) => {
+								component = new SvelteRenderer(menuList, {
+									props,
+									editor: props.editor
+								})
+
+								const { view } = props.editor
+
+								const getReferenceClientRect = () => {
+									if (!props.clientRect) {
+										return props.editor.storage[extensionName].rect
+									}
+
+									const rect = props.clientRect()
+
+									if (!rect) {
+										return props.editor.storage[extensionName].rect
+									}
+
+									let yPos = rect.y
+
+									if (rect.top + component.element.offsetHeight + 40 > window.innerHeight) {
+										const diff = rect.top + component.element.offsetHeight - window.innerHeight + 40
+										yPos = rect.y - diff
+									}
+
+									return new DOMRect(rect.x, yPos, rect.width, rect.height)
+								}
+
+								scrollHandler = () => {
+									popup?.[0].setProps({
+										getReferenceClientRect
+									})
+								}
+
+								view.dom.parentElement?.addEventListener('scroll', scrollHandler)
+
+								popup?.[0].setProps({
+									getReferenceClientRect,
+									appendTo: () => document.body,
+									content: component.element
+								})
+
+								popup?.[0].show()
+							},
+
+							onUpdate(props: SuggestionProps) {
+								component.updateProps(props)
+
+								const { view } = props.editor
+
+								const getReferenceClientRect = () => {
+									if (!props.clientRect) {
+										return props.editor.storage[extensionName].rect
+									}
+
+									const rect = props.clientRect()
+
+									if (!rect) {
+										return props.editor.storage[extensionName].rect
+									}
+
+									let yPos = rect.y
+
+									if (rect.top + component.element.offsetHeight + 40 > window.innerHeight) {
+										const diff = rect.top + component.element.offsetHeight - window.innerHeight + 40
+										yPos = rect.y - diff
+									}
+
+									return new DOMRect(rect.x, yPos, rect.width, rect.height)
+								}
+
+								const scrollHandler = () => {
+									popup?.[0].setProps({
+										getReferenceClientRect
+									})
+								}
+
+								view.dom.parentElement?.addEventListener('scroll', scrollHandler)
+
+								props.editor.storage[extensionName].rect = props.clientRect
+									? getReferenceClientRect()
+									: {
+											width: 0,
+											height: 0,
+											left: 0,
+											top: 0,
+											right: 0,
+											bottom: 0
+										}
+								popup?.[0].setProps({
+									getReferenceClientRect
+								})
+							},
+
+							onKeyDown(props: SuggestionKeyDownProps) {
+								if (props.event.key === 'Escape') {
+									popup?.[0].hide()
+									return true
+								}
+
+								if (!popup?.[0].state.isShown) {
+									popup?.[0].show()
+								}
+
+								if (props.event.key === 'Enter') return true
+
+								// return component.ref?.onKeyDown(props);
+								return false
+							},
+
+							onExit(props) {
+								popup?.[0].hide()
+								if (scrollHandler) {
+									const { view } = props.editor
+									view.dom.parentElement?.removeEventListener('scroll', scrollHandler)
+								}
+								component.destroy()
+							}
+						}
+					}
+				})
+			]
+		},
+
+		addStorage() {
+			return {
+				rect: {
+					width: 0,
+					height: 0,
+					left: 0,
+					top: 0,
+					right: 0,
+					bottom: 0
+				}
+			}
+		}
+	})
diff --git a/src/lib/components/edra/extensions/table/index.ts b/src/lib/components/edra/extensions/table/index.ts
new file mode 100644
index 0000000..1b4a982
--- /dev/null
+++ b/src/lib/components/edra/extensions/table/index.ts
@@ -0,0 +1,4 @@
+export { Table } from './table.js'
+export { TableCell } from './table-cell.js'
+export { TableRow } from './table-row.js'
+export { TableHeader } from './table-header.js'
diff --git a/src/lib/components/edra/extensions/table/table-cell.ts b/src/lib/components/edra/extensions/table/table-cell.ts
new file mode 100644
index 0000000..f8b06f1
--- /dev/null
+++ b/src/lib/components/edra/extensions/table/table-cell.ts
@@ -0,0 +1,124 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+
+import { getCellsInColumn, isRowSelected, selectRow } from './utils.js'
+
+export interface TableCellOptions {
+	HTMLAttributes: Record<string, unknown>
+}
+
+export const TableCell = Node.create<TableCellOptions>({
+	name: 'tableCell',
+
+	content: 'block+',
+	tableRole: 'cell',
+
+	isolating: true,
+
+	addOptions() {
+		return {
+			HTMLAttributes: {}
+		}
+	},
+
+	parseHTML() {
+		return [{ tag: 'td' }]
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ['td', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+	},
+
+	addAttributes() {
+		return {
+			colspan: {
+				default: 1,
+				parseHTML: (element) => {
+					const colspan = element.getAttribute('colspan')
+					const value = colspan ? parseInt(colspan, 10) : 1
+
+					return value
+				}
+			},
+			rowspan: {
+				default: 1,
+				parseHTML: (element) => {
+					const rowspan = element.getAttribute('rowspan')
+					const value = rowspan ? parseInt(rowspan, 10) : 1
+
+					return value
+				}
+			},
+			colwidth: {
+				default: null,
+				parseHTML: (element) => {
+					const colwidth = element.getAttribute('colwidth')
+					const value = colwidth ? [parseInt(colwidth, 10)] : null
+
+					return value
+				}
+			},
+			style: {
+				default: null
+			}
+		}
+	},
+
+	addProseMirrorPlugins() {
+		const { isEditable } = this.editor
+
+		return [
+			new Plugin({
+				props: {
+					decorations: (state) => {
+						if (!isEditable) {
+							return DecorationSet.empty
+						}
+
+						const { doc, selection } = state
+						const decorations: Decoration[] = []
+						const cells = getCellsInColumn(0)(selection)
+
+						if (cells) {
+							cells.forEach(({ pos }: { pos: number }, index: number) => {
+								decorations.push(
+									Decoration.widget(pos + 1, () => {
+										const rowSelected = isRowSelected(index)(selection)
+										let className = 'grip-row'
+
+										if (rowSelected) {
+											className += ' selected'
+										}
+
+										if (index === 0) {
+											className += ' first'
+										}
+
+										if (index === cells.length - 1) {
+											className += ' last'
+										}
+
+										const grip = document.createElement('a')
+
+										grip.className = className
+										grip.addEventListener('mousedown', (event) => {
+											event.preventDefault()
+											event.stopImmediatePropagation()
+
+											this.editor.view.dispatch(selectRow(index)(this.editor.state.tr))
+										})
+
+										return grip
+									})
+								)
+							})
+						}
+
+						return DecorationSet.create(doc, decorations)
+					}
+				}
+			})
+		]
+	}
+})
diff --git a/src/lib/components/edra/extensions/table/table-header.ts b/src/lib/components/edra/extensions/table/table-header.ts
new file mode 100644
index 0000000..9feb432
--- /dev/null
+++ b/src/lib/components/edra/extensions/table/table-header.ts
@@ -0,0 +1,89 @@
+import TiptapTableHeader from '@tiptap/extension-table-header'
+import { Plugin } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+
+import { getCellsInRow, isColumnSelected, selectColumn } from './utils.js'
+
+export const TableHeader = TiptapTableHeader.extend({
+	addAttributes() {
+		return {
+			colspan: {
+				default: 1
+			},
+			rowspan: {
+				default: 1
+			},
+			colwidth: {
+				default: null,
+				parseHTML: (element) => {
+					const colwidth = element.getAttribute('colwidth')
+					const value = colwidth ? colwidth.split(',').map((item) => parseInt(item, 10)) : null
+
+					return value
+				}
+			},
+			style: {
+				default: null
+			}
+		}
+	},
+
+	addProseMirrorPlugins() {
+		const { isEditable } = this.editor
+
+		return [
+			new Plugin({
+				props: {
+					decorations: (state) => {
+						if (!isEditable) {
+							return DecorationSet.empty
+						}
+
+						const { doc, selection } = state
+						const decorations: Decoration[] = []
+						const cells = getCellsInRow(0)(selection)
+
+						if (cells) {
+							cells.forEach(({ pos }: { pos: number }, index: number) => {
+								decorations.push(
+									Decoration.widget(pos + 1, () => {
+										const colSelected = isColumnSelected(index)(selection)
+										let className = 'grip-column'
+
+										if (colSelected) {
+											className += ' selected'
+										}
+
+										if (index === 0) {
+											className += ' first'
+										}
+
+										if (index === cells.length - 1) {
+											className += ' last'
+										}
+
+										const grip = document.createElement('a')
+
+										grip.className = className
+										grip.addEventListener('mousedown', (event) => {
+											event.preventDefault()
+											event.stopImmediatePropagation()
+
+											this.editor.view.dispatch(selectColumn(index)(this.editor.state.tr))
+										})
+
+										return grip
+									})
+								)
+							})
+						}
+
+						return DecorationSet.create(doc, decorations)
+					}
+				}
+			})
+		]
+	}
+})
+
+export default TableHeader
diff --git a/src/lib/components/edra/extensions/table/table-row.ts b/src/lib/components/edra/extensions/table/table-row.ts
new file mode 100644
index 0000000..598826a
--- /dev/null
+++ b/src/lib/components/edra/extensions/table/table-row.ts
@@ -0,0 +1,8 @@
+import TiptapTableRow from '@tiptap/extension-table-row'
+
+export const TableRow = TiptapTableRow.extend({
+	allowGapCursor: false,
+	content: 'tableCell*'
+})
+
+export default TableRow
diff --git a/src/lib/components/edra/extensions/table/table.ts b/src/lib/components/edra/extensions/table/table.ts
new file mode 100644
index 0000000..a3ddaf2
--- /dev/null
+++ b/src/lib/components/edra/extensions/table/table.ts
@@ -0,0 +1,9 @@
+import TiptapTable from '@tiptap/extension-table'
+
+export const Table = TiptapTable.configure({
+	resizable: true,
+	lastColumnResizable: true,
+	allowTableNodeSelection: true
+})
+
+export default Table
diff --git a/src/lib/components/edra/extensions/table/utils.ts b/src/lib/components/edra/extensions/table/utils.ts
new file mode 100644
index 0000000..892cc79
--- /dev/null
+++ b/src/lib/components/edra/extensions/table/utils.ts
@@ -0,0 +1,320 @@
+import { Editor, findParentNode } from '@tiptap/core'
+import { CellSelection, type Rect, TableMap } from '@tiptap/pm/tables'
+import type { EditorView } from '@tiptap/pm/view'
+import Table from './table.js'
+
+export const isRectSelected = (rect: Rect) => (selection: CellSelection) => {
+	const map = TableMap.get(selection.$anchorCell.node(-1))
+	const start = selection.$anchorCell.start(-1)
+	const cells = map.cellsInRect(rect)
+	const selectedCells = map.cellsInRect(
+		map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start)
+	)
+
+	for (let i = 0, count = cells.length; i < count; i += 1) {
+		if (selectedCells.indexOf(cells[i]) === -1) {
+			return false
+		}
+	}
+
+	return true
+}
+
+export const findTable = (selection: Selection) =>
+	findParentNode((node) => node.type.spec.tableRole && node.type.spec.tableRole === 'table')(
+		selection
+	)
+
+export const isCellSelection = (selection: Selection): selection is CellSelection =>
+	selection instanceof CellSelection
+
+export const isColumnSelected = (columnIndex: number) => (selection: Selection) => {
+	if (isCellSelection(selection)) {
+		const map = TableMap.get(selection.$anchorCell.node(-1))
+
+		return isRectSelected({
+			left: columnIndex,
+			right: columnIndex + 1,
+			top: 0,
+			bottom: map.height
+		})(selection)
+	}
+
+	return false
+}
+
+export const isRowSelected = (rowIndex: number) => (selection: Selection) => {
+	if (isCellSelection(selection)) {
+		const map = TableMap.get(selection.$anchorCell.node(-1))
+
+		return isRectSelected({
+			left: 0,
+			right: map.width,
+			top: rowIndex,
+			bottom: rowIndex + 1
+		})(selection)
+	}
+
+	return false
+}
+
+export const isTableSelected = (selection: Selection) => {
+	if (isCellSelection(selection)) {
+		const map = TableMap.get(selection.$anchorCell.node(-1))
+
+		return isRectSelected({
+			left: 0,
+			right: map.width,
+			top: 0,
+			bottom: map.height
+		})(selection)
+	}
+
+	return false
+}
+
+export const getCellsInColumn = (columnIndex: number | number[]) => (selection: Selection) => {
+	const table = findTable(selection)
+	if (table) {
+		const map = TableMap.get(table.node)
+		const indexes = Array.isArray(columnIndex) ? columnIndex : Array.from([columnIndex])
+
+		return indexes.reduce(
+			(acc, index) => {
+				if (index >= 0 && index <= map.width - 1) {
+					const cells = map.cellsInRect({
+						left: index,
+						right: index + 1,
+						top: 0,
+						bottom: map.height
+					})
+
+					return acc.concat(
+						cells.map((nodePos) => {
+							const node = table.node.nodeAt(nodePos)
+							const pos = nodePos + table.start
+
+							return { pos, start: pos + 1, node }
+						})
+					)
+				}
+
+				return acc
+			},
+			[] as { pos: number; start: number; node: Node | null | undefined }[]
+		)
+	}
+	return null
+}
+
+export const getCellsInRow = (rowIndex: number | number[]) => (selection: Selection) => {
+	const table = findTable(selection)
+
+	if (table) {
+		const map = TableMap.get(table.node)
+		const indexes = Array.isArray(rowIndex) ? rowIndex : Array.from([rowIndex])
+
+		return indexes.reduce(
+			(acc, index) => {
+				if (index >= 0 && index <= map.height - 1) {
+					const cells = map.cellsInRect({
+						left: 0,
+						right: map.width,
+						top: index,
+						bottom: index + 1
+					})
+
+					return acc.concat(
+						cells.map((nodePos) => {
+							const node = table.node.nodeAt(nodePos)
+							const pos = nodePos + table.start
+							return { pos, start: pos + 1, node }
+						})
+					)
+				}
+
+				return acc
+			},
+			[] as { pos: number; start: number; node: Node | null | undefined }[]
+		)
+	}
+
+	return null
+}
+
+export const getCellsInTable = (selection: Selection) => {
+	const table = findTable(selection)
+
+	if (table) {
+		const map = TableMap.get(table.node)
+		const cells = map.cellsInRect({
+			left: 0,
+			right: map.width,
+			top: 0,
+			bottom: map.height
+		})
+
+		return cells.map((nodePos) => {
+			const node = table.node.nodeAt(nodePos)
+			const pos = nodePos + table.start
+
+			return { pos, start: pos + 1, node }
+		})
+	}
+
+	return null
+}
+
+export const findParentNodeClosestToPos = (
+	$pos: ResolvedPos,
+	predicate: (node: Node) => boolean
+) => {
+	for (let i = $pos.depth; i > 0; i -= 1) {
+		const node = $pos.node(i)
+
+		if (predicate(node)) {
+			return {
+				pos: i > 0 ? $pos.before(i) : 0,
+				start: $pos.start(i),
+				depth: i,
+				node
+			}
+		}
+	}
+
+	return null
+}
+
+export const findCellClosestToPos = ($pos: ResolvedPos) => {
+	const predicate = (node: Node) =>
+		node.type.spec.tableRole && /cell/i.test(node.type.spec.tableRole)
+
+	return findParentNodeClosestToPos($pos, predicate)
+}
+
+const select = (type: 'row' | 'column') => (index: number) => (tr: Transaction) => {
+	const table = findTable(tr.selection)
+	const isRowSelection = type === 'row'
+
+	if (table) {
+		const map = TableMap.get(table.node)
+
+		// Check if the index is valid
+		if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
+			const left = isRowSelection ? 0 : index
+			const top = isRowSelection ? index : 0
+			const right = isRowSelection ? map.width : index + 1
+			const bottom = isRowSelection ? index + 1 : map.height
+
+			const cellsInFirstRow = map.cellsInRect({
+				left,
+				top,
+				right: isRowSelection ? right : left + 1,
+				bottom: isRowSelection ? top + 1 : bottom
+			})
+
+			const cellsInLastRow =
+				bottom - top === 1
+					? cellsInFirstRow
+					: map.cellsInRect({
+							left: isRowSelection ? left : right - 1,
+							top: isRowSelection ? bottom - 1 : top,
+							right,
+							bottom
+						})
+
+			const head = table.start + cellsInFirstRow[0]
+			const anchor = table.start + cellsInLastRow[cellsInLastRow.length - 1]
+			const $head = tr.doc.resolve(head)
+			const $anchor = tr.doc.resolve(anchor)
+
+			return tr.setSelection(new CellSelection($anchor, $head))
+		}
+	}
+	return tr
+}
+
+export const selectColumn = select('column')
+
+export const selectRow = select('row')
+
+export const selectTable = (tr: Transaction) => {
+	const table = findTable(tr.selection)
+
+	if (table) {
+		const { map } = TableMap.get(table.node)
+
+		if (map && map.length) {
+			const head = table.start + map[0]
+			const anchor = table.start + map[map.length - 1]
+			const $head = tr.doc.resolve(head)
+			const $anchor = tr.doc.resolve(anchor)
+
+			return tr.setSelection(new CellSelection($anchor, $head))
+		}
+	}
+
+	return tr
+}
+
+export const isColumnGripSelected = ({
+	editor,
+	view,
+	state,
+	from
+}: {
+	editor: Editor
+	view: EditorView
+	state: EditorState
+	from: number
+}) => {
+	const domAtPos = view.domAtPos(from).node as HTMLElement
+	const nodeDOM = view.nodeDOM(from) as HTMLElement
+	const node = nodeDOM || domAtPos
+
+	if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) {
+		return false
+	}
+
+	let container = node
+
+	while (container && !['TD', 'TH'].includes(container.tagName)) {
+		container = container.parentElement!
+	}
+
+	const gripColumn =
+		container && container.querySelector && container.querySelector('a.grip-column.selected')
+
+	return !!gripColumn
+}
+
+export const isRowGripSelected = ({
+	editor,
+	view,
+	state,
+	from
+}: {
+	editor: Editor
+	view: EditorView
+	state: EditorState
+	from: number
+}) => {
+	const domAtPos = view.domAtPos(from).node as HTMLElement
+	const nodeDOM = view.nodeDOM(from) as HTMLElement
+	const node = nodeDOM || domAtPos
+
+	if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) {
+		return false
+	}
+
+	let container = node
+
+	while (container && !['TD', 'TH'].includes(container.tagName)) {
+		container = container.parentElement!
+	}
+
+	const gripRow =
+		container && container.querySelector && container.querySelector('a.grip-row.selected')
+
+	return !!gripRow
+}
diff --git a/src/lib/components/edra/extensions/video/VideoExtended.ts b/src/lib/components/edra/extensions/video/VideoExtended.ts
new file mode 100644
index 0000000..e68c5ee
--- /dev/null
+++ b/src/lib/components/edra/extensions/video/VideoExtended.ts
@@ -0,0 +1,34 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+import { Video } from './VideoExtension.js'
+import type { NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+
+export const VideoExtended = (content: Component<NodeViewProps>) =>
+	Video.extend({
+		addAttributes() {
+			return {
+				src: {
+					default: null
+				},
+				alt: {
+					default: null
+				},
+				title: {
+					default: null
+				},
+				width: {
+					default: '100%'
+				},
+				height: {
+					default: null
+				},
+				align: {
+					default: 'left'
+				}
+			}
+		},
+
+		addNodeView: () => {
+			return SvelteNodeViewRenderer(content)
+		}
+	})
diff --git a/src/lib/components/edra/extensions/video/VideoExtension.ts b/src/lib/components/edra/extensions/video/VideoExtension.ts
new file mode 100644
index 0000000..018d182
--- /dev/null
+++ b/src/lib/components/edra/extensions/video/VideoExtension.ts
@@ -0,0 +1,147 @@
+import { Node, nodeInputRule } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export interface VideoOptions {
+	HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		video: {
+			/**
+			 * Set a video node
+			 */
+			setVideo: (src: string) => ReturnType
+			/**
+			 * Toggle a video
+			 */
+			toggleVideo: (src: string) => ReturnType
+			/**
+			 * Remove a video
+			 */
+			removeVideo: () => ReturnType
+		}
+	}
+}
+
+const VIDEO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
+
+export const Video = Node.create<VideoOptions>({
+	name: 'video',
+	group: 'block',
+	content: 'inline*',
+	draggable: true,
+	isolating: true,
+	addOptions() {
+		return {
+			HTMLAttributes: {}
+		}
+	},
+	addAttributes() {
+		return {
+			src: {
+				default: null,
+				parseHTML: (el) => (el as HTMLSpanElement).getAttribute('src'),
+				renderHTML: (attrs) => ({ src: attrs.src })
+			}
+		}
+	},
+	parseHTML() {
+		return [
+			{
+				tag: 'video',
+				getAttrs: (el) => ({ src: (el as HTMLVideoElement).getAttribute('src') })
+			}
+		]
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			'video',
+			{ controls: 'true', style: 'width: fit-content;', ...HTMLAttributes },
+			['source', HTMLAttributes]
+		]
+	},
+	addCommands() {
+		return {
+			setVideo:
+				(src: string) =>
+				({ commands }) =>
+					commands.insertContent(
+						`<video controls="true" autoplay="false" style="width: fit-content" src="${src}" />`
+					),
+
+			toggleVideo:
+				() =>
+				({ commands }) =>
+					commands.toggleNode(this.name, 'paragraph'),
+			removeVideo:
+				() =>
+				({ commands }) =>
+					commands.deleteNode(this.name)
+		}
+	},
+	addInputRules() {
+		return [
+			nodeInputRule({
+				find: VIDEO_INPUT_REGEX,
+				type: this.type,
+				getAttributes: (match) => {
+					const [, , src] = match
+
+					return { src }
+				}
+			})
+		]
+	},
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				key: new PluginKey('videoDropPlugin'),
+
+				props: {
+					handleDOMEvents: {
+						drop(view, event) {
+							const {
+								state: { schema, tr },
+								dispatch
+							} = view
+							const hasFiles =
+								event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length
+
+							if (!hasFiles) return false
+
+							const videos = Array.from(event.dataTransfer.files).filter((file) =>
+								/video/i.test(file.type)
+							)
+
+							if (videos.length === 0) return false
+
+							event.preventDefault()
+
+							const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })
+
+							videos.forEach((video) => {
+								const reader = new FileReader()
+
+								reader.onload = (readerEvent) => {
+									const node = schema.nodes.video.create({ src: readerEvent.target?.result })
+
+									if (coordinates && typeof coordinates.pos === 'number') {
+										const transaction = tr.insert(coordinates?.pos, node)
+
+										dispatch(transaction)
+									}
+								}
+
+								reader.readAsDataURL(video)
+							})
+
+							return true
+						}
+					}
+				}
+			})
+		]
+	}
+})
diff --git a/src/lib/components/edra/extensions/video/VideoPlaceholder.ts b/src/lib/components/edra/extensions/video/VideoPlaceholder.ts
new file mode 100644
index 0000000..f013bba
--- /dev/null
+++ b/src/lib/components/edra/extensions/video/VideoPlaceholder.ts
@@ -0,0 +1,62 @@
+import { Editor, Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
+import type { Component } from 'svelte'
+import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+
+export interface VideoPlaceholderOptions {
+	HTMLAttributes: Record<string, object>
+	onDrop: (files: File[], editor: Editor) => void
+	onDropRejected?: (files: File[], editor: Editor) => void
+	onEmbed: (url: string, editor: Editor) => void
+	allowedMimeTypes?: Record<string, string[]>
+	maxFiles?: number
+	maxSize?: number
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		videoPlaceholder: {
+			/**
+			 * Inserts a video placeholder
+			 */
+			insertVideoPlaceholder: () => ReturnType
+		}
+	}
+}
+
+export const VideoPlaceholder = (content: Component<NodeViewProps>) =>
+	Node.create<VideoPlaceholderOptions>({
+		name: 'video-placeholder',
+		addOptions() {
+			return {
+				HTMLAttributes: {},
+				onDrop: () => {},
+				onDropRejected: () => {},
+				onEmbed: () => {}
+			}
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }]
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return ['div', mergeAttributes(HTMLAttributes)]
+		},
+		group: 'block',
+		draggable: true,
+		atom: true,
+		content: 'inline*',
+		isolating: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(content)
+		},
+		addCommands() {
+			return {
+				insertVideoPlaceholder: () => (props: CommandProps) => {
+					return props.commands.insertContent({
+						type: 'video-placeholder'
+					})
+				}
+			}
+		}
+	})
diff --git a/src/lib/components/edra/headless/components/AudioExtended.svelte b/src/lib/components/edra/headless/components/AudioExtended.svelte
new file mode 100644
index 0000000..b4f90bf
--- /dev/null
+++ b/src/lib/components/edra/headless/components/AudioExtended.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import type { NodeViewProps } from '@tiptap/core'
+
+	import AlignLeft from 'lucide-svelte/icons/align-left'
+	import AlignCenter from 'lucide-svelte/icons/align-center'
+	import AlignRight from 'lucide-svelte/icons/align-right'
+	import CopyIcon from 'lucide-svelte/icons/copy'
+	import Fullscreen from 'lucide-svelte/icons/fullscreen'
+	import Trash from 'lucide-svelte/icons/trash'
+	import Captions from 'lucide-svelte/icons/captions'
+
+	import { duplicateContent } from '../../utils.js'
+
+	const { node, editor, selected, deleteNode, updateAttributes }: NodeViewProps = $props()
+
+	const minWidth = 150
+
+	let audRef: HTMLAudioElement
+	let nodeRef: HTMLDivElement
+
+	let caption: string | null = $state(node.attrs.title)
+	$effect(() => {
+		if (caption?.trim() === '') caption = null
+		updateAttributes({ title: caption })
+	})
+
+	let resizing = $state(false)
+	let resizingInitialWidth = $state(0)
+	let resizingInitialMouseX = $state(0)
+	let resizingPosition = $state<'left' | 'right'>('left')
+
+	function handleResizingPosition(e: MouseEvent, position: 'left' | 'right') {
+		startResize(e)
+		resizingPosition = position
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault()
+		resizing = true
+		resizingInitialMouseX = e.clientX
+		if (audRef) resizingInitialWidth = audRef.offsetWidth
+	}
+
+	function resize(e: MouseEvent) {
+		if (!resizing) return
+		let dx = e.clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function endResize() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	function handleTouchStart(e: TouchEvent, position: 'left' | 'right') {
+		e.preventDefault()
+		resizing = true
+		resizingPosition = position
+		resizingInitialMouseX = e.touches[0].clientX
+		if (audRef) resizingInitialWidth = audRef.offsetWidth
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!resizing) return
+		let dx = e.touches[0].clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.touches[0].clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function handleTouchEnd() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	onMount(() => {
+		// Attach id to nodeRef
+		nodeRef = document.getElementById('resizable-container-audio') as HTMLDivElement
+
+		// Mouse events
+		window.addEventListener('mousemove', resize)
+		window.addEventListener('mouseup', endResize)
+		// Touch events
+		window.addEventListener('touchmove', handleTouchMove)
+		window.addEventListener('touchend', handleTouchEnd)
+	})
+
+	onDestroy(() => {
+		window.removeEventListener('mousemove', resize)
+		window.removeEventListener('mouseup', endResize)
+		window.removeEventListener('touchmove', handleTouchMove)
+		window.removeEventListener('touchend', handleTouchEnd)
+	})
+</script>
+
+<NodeViewWrapper
+	id="resizable-container-audio"
+	class={`edra-media-container ${selected ? 'selected' : ''} align-${node.attrs.align}`}
+	style={`width: ${node.attrs.width}px`}
+>
+	<div class={`edra-media-group ${resizing ? 'resizing' : ''}`}>
+		<audio
+			bind:this={audRef}
+			src={node.attrs.src}
+			controls
+			title={node.attrs.title}
+			class="edra-media-content"
+			style="width: 100%;"
+		>
+		</audio>
+
+		{#if caption !== null}
+			<input bind:value={caption} type="text" class="edra-media-caption" />
+		{/if}
+
+		{#if editor?.isEditable}
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize left"
+				class="edra-media-resize-handle edra-media-resize-handle-left"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'left')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'left')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize right"
+				class="edra-media-resize-handle edra-media-resize-handle-right"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'right')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'right')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div class="edra-media-toolbar edra-media-toolbar-audio">
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'left' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'left' })}
+					title="Align Left"
+				>
+					<AlignLeft />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'center' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'center' })}
+					title="Align Center"
+				>
+					<AlignCenter />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'right' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'right' })}
+					title="Align Right"
+				>
+					<AlignRight />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						if (caption === null || caption.trim() === '') caption = 'Audio Caption'
+					}}
+					title="Caption"
+				>
+					<Captions />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						duplicateContent(editor, node)
+					}}
+					title="Duplicate"
+				>
+					<CopyIcon />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						updateAttributes({
+							width: 'fit-content'
+						})
+					}}
+					title="Full Screen"
+				>
+					<Fullscreen />
+				</button>
+				<button
+					class="edra-toolbar-button edra-destructive"
+					onclick={() => {
+						deleteNode()
+					}}
+					title="Delete"
+				>
+					<Trash />
+				</button>
+			</div>
+		{/if}
+	</div>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/AudioPlaceholder.svelte b/src/lib/components/edra/headless/components/AudioPlaceholder.svelte
new file mode 100644
index 0000000..b5c1046
--- /dev/null
+++ b/src/lib/components/edra/headless/components/AudioPlaceholder.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core'
+	import AudioLines from 'lucide-svelte/icons/audio-lines'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	const { editor }: NodeViewProps = $props()
+
+	function handleClick(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		const audioUrl = prompt('Enter the URL of an audio:')
+		if (!audioUrl) {
+			return
+		}
+		editor.chain().focus().setAudio(audioUrl).run()
+	}
+</script>
+
+<NodeViewWrapper class="edra-media-placeholder-wrapper" contenteditable="false">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<span
+		class="edra-media-placeholder-content"
+		onclick={handleClick}
+		tabindex="0"
+		role="button"
+		aria-label="Insert An Audio"
+	>
+		<AudioLines class="edra-media-placeholder-icon" />
+		<span class="edra-media-placeholder-text">Insert An Audio</span>
+	</span>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/CodeExtended.svelte b/src/lib/components/edra/headless/components/CodeExtended.svelte
new file mode 100644
index 0000000..6490aab
--- /dev/null
+++ b/src/lib/components/edra/headless/components/CodeExtended.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { NodeViewWrapper, NodeViewContent } from 'svelte-tiptap'
+	import type { NodeViewProps } from '@tiptap/core'
+	const { node, updateAttributes, extension }: NodeViewProps = $props()
+
+	let preRef = $state<HTMLPreElement>()
+
+	let isCopying = $state(false)
+
+	const languages: string[] = extension.options.lowlight.listLanguages().sort()
+
+	let defaultLanguage = $state(node.attrs.language)
+
+	$effect(() => {
+		updateAttributes({ language: defaultLanguage })
+	})
+
+	function copyCode() {
+		if (isCopying) return
+		if (!preRef) return
+		isCopying = true
+		navigator.clipboard.writeText(preRef.innerText)
+		setTimeout(() => {
+			isCopying = false
+		}, 1000)
+	}
+</script>
+
+<NodeViewWrapper class="code-wrapper">
+	<div class="code-wrapper-tile" contenteditable="false">
+		<select bind:value={defaultLanguage} class="code-wrapper-select">
+			{#each languages as language}
+				<option value={language}>{language}</option>
+			{/each}
+		</select>
+		<button class="code-wrapper-copy" onclick={copyCode}>
+			{#if isCopying}
+				<span class="code-wrapper-copy-text copied">Copied!</span>
+			{:else}
+				<span class="code-wrapper-copy-text">Copy</span>
+			{/if}
+		</button>
+	</div>
+	<pre bind:this={preRef} spellcheck="false">
+		<NodeViewContent as="code" class={`language-${defaultLanguage}`} {...node.attrs} />	
+	</pre>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/EdraToolBarIcon.svelte b/src/lib/components/edra/headless/components/EdraToolBarIcon.svelte
new file mode 100644
index 0000000..0e1208f
--- /dev/null
+++ b/src/lib/components/edra/headless/components/EdraToolBarIcon.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { EdraCommand } from '../../commands/types.js'
+	import type { Editor } from '@tiptap/core'
+	import { icons } from 'lucide-svelte'
+
+	interface Props {
+		command: EdraCommand
+		editor: Editor
+		style?: string
+		onclick?: () => void
+	}
+
+	const { command, editor, style, onclick }: Props = $props()
+
+	const Icon = icons[command.iconName]
+	const shortcut = command.shortCuts ? ` (${command.shortCuts[0]})` : ''
+</script>
+
+<button
+	class="edra-command-button"
+	class:active={editor.isActive(command.name) || command.isActive?.(editor)}
+	onclick={() => {
+		if (onclick !== undefined) onclick()
+		else command.action(editor)
+	}}
+	title={`${command.label}${shortcut}`}
+	{style}
+>
+	<Icon class="edra-toolbar-icon" />
+</button>
diff --git a/src/lib/components/edra/headless/components/GalleryExtended.svelte b/src/lib/components/edra/headless/components/GalleryExtended.svelte
new file mode 100644
index 0000000..ad63ad8
--- /dev/null
+++ b/src/lib/components/edra/headless/components/GalleryExtended.svelte
@@ -0,0 +1,340 @@
+<script lang="ts">
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import type { NodeViewProps } from '@tiptap/core'
+	import Grid from 'lucide-svelte/icons/grid-3x3'
+	import Columns from 'lucide-svelte/icons/columns'
+	import Trash from 'lucide-svelte/icons/trash'
+	import Edit from 'lucide-svelte/icons/edit'
+	import Plus from 'lucide-svelte/icons/plus'
+	import MediaLibraryModal from '../../../admin/MediaLibraryModal.svelte'
+	import type { Media } from '@prisma/client'
+
+	const { node, editor, selected, deleteNode, updateAttributes }: NodeViewProps = $props()
+
+	let isMediaLibraryOpen = $state(false)
+	let editingMode = $state(false)
+
+	function handleEditGallery() {
+		editingMode = true
+		isMediaLibraryOpen = true
+	}
+
+	function handleAddImages() {
+		editingMode = false
+		isMediaLibraryOpen = true
+	}
+
+	function handleMediaSelect(media: Media | Media[]) {
+		const mediaArray = Array.isArray(media) ? media : [media]
+		const newImages = mediaArray.map((m) => ({
+			id: m.id,
+			url: m.url,
+			alt: m.altText || '',
+			title: m.description || ''
+		}))
+
+		if (editingMode) {
+			// Replace all images
+			updateAttributes({ images: newImages })
+		} else {
+			// Add to existing images
+			const existingImages = node.attrs.images || []
+			const currentIds = existingImages.map((img: any) => img.id)
+			const uniqueNewImages = newImages.filter((img) => !currentIds.includes(img.id))
+			updateAttributes({ images: [...existingImages, ...uniqueNewImages] })
+		}
+
+		isMediaLibraryOpen = false
+		editingMode = false
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+		editingMode = false
+	}
+
+	function removeImage(imageId: number) {
+		const currentImages = node.attrs.images || []
+		const updatedImages = currentImages.filter((img: any) => img.id !== imageId)
+		updateAttributes({ images: updatedImages })
+	}
+
+	function changeLayout(layout: 'grid' | 'masonry') {
+		updateAttributes({ layout })
+	}
+
+	function changeColumns(columns: number) {
+		updateAttributes({ columns })
+	}
+
+	const images = $derived(node.attrs.images || [])
+	const layout = $derived(node.attrs.layout || 'grid')
+	const columns = $derived(node.attrs.columns || 3)
+</script>
+
+<NodeViewWrapper
+	class={`edra-gallery-container ${selected ? 'selected' : ''}`}
+	data-layout={layout}
+	style={`--columns: ${columns}`}
+>
+	<div class="edra-gallery-content">
+		{#if images.length === 0}
+			<div class="edra-gallery-empty">
+				<Grid class="edra-gallery-empty-icon" />
+				<span>Gallery is empty</span>
+			</div>
+		{:else}
+			<div class={`edra-gallery-grid ${layout === 'masonry' ? 'masonry' : 'grid'}`}>
+				{#each images as image}
+					<div class="edra-gallery-item">
+						<img src={image.url} alt={image.alt} title={image.title} loading="lazy" />
+						{#if editor?.isEditable}
+							<button
+								class="edra-gallery-item-remove"
+								onclick={() => removeImage(image.id)}
+								title="Remove image"
+							>
+								<Trash />
+							</button>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		{#if editor?.isEditable}
+			<div class="edra-gallery-toolbar">
+				<div class="edra-gallery-toolbar-section">
+					<button
+						class={`edra-toolbar-button ${layout === 'grid' ? 'active' : ''}`}
+						onclick={() => changeLayout('grid')}
+						title="Grid Layout"
+					>
+						<Grid />
+					</button>
+					<button
+						class={`edra-toolbar-button ${layout === 'masonry' ? 'active' : ''}`}
+						onclick={() => changeLayout('masonry')}
+						title="Masonry Layout"
+					>
+						<Columns />
+					</button>
+				</div>
+
+				<div class="edra-gallery-toolbar-section">
+					<select
+						class="edra-gallery-columns-select"
+						value={columns}
+						onchange={(e) => changeColumns(parseInt(e.currentTarget.value))}
+						title="Columns"
+					>
+						<option value="2">2 cols</option>
+						<option value="3">3 cols</option>
+						<option value="4">4 cols</option>
+						<option value="5">5 cols</option>
+					</select>
+				</div>
+
+				<div class="edra-gallery-toolbar-section">
+					<button class="edra-toolbar-button" onclick={handleAddImages} title="Add Images">
+						<Plus />
+					</button>
+					<button class="edra-toolbar-button" onclick={handleEditGallery} title="Edit Gallery">
+						<Edit />
+					</button>
+					<button
+						class="edra-toolbar-button edra-destructive"
+						onclick={() => deleteNode()}
+						title="Delete Gallery"
+					>
+						<Trash />
+					</button>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={isMediaLibraryOpen}
+		mode="multiple"
+		fileType="image"
+		onSelect={handleMediaSelect}
+		onClose={handleMediaLibraryClose}
+	/>
+</NodeViewWrapper>
+
+<style>
+	.edra-gallery-container {
+		border: 2px solid transparent;
+		border-radius: 8px;
+		margin: 16px 0;
+		transition: border-color 0.2s ease;
+	}
+
+	.edra-gallery-container.selected {
+		border-color: #3b82f6;
+	}
+
+	.edra-gallery-content {
+		position: relative;
+	}
+
+	.edra-gallery-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 32px;
+		color: #6b7280;
+		background: #f9fafb;
+		border: 2px dashed #e5e7eb;
+		border-radius: 8px;
+	}
+
+	:global(.edra-gallery-empty-icon) {
+		width: 32px;
+		height: 32px;
+	}
+
+	.edra-gallery-grid {
+		display: grid;
+		gap: 8px;
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.edra-gallery-grid.grid {
+		grid-template-columns: repeat(var(--columns), 1fr);
+	}
+
+	.edra-gallery-grid.masonry {
+		column-count: var(--columns);
+		column-gap: 8px;
+	}
+
+	.edra-gallery-item {
+		position: relative;
+		background: #f3f4f6;
+		border-radius: 6px;
+		overflow: hidden;
+		break-inside: avoid;
+		margin-bottom: 8px;
+	}
+
+	.edra-gallery-item img {
+		width: 100%;
+		height: auto;
+		display: block;
+		transition: transform 0.2s ease;
+	}
+
+	.edra-gallery-item:hover img {
+		transform: scale(1.02);
+	}
+
+	.edra-gallery-item-remove {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		width: 24px;
+		height: 24px;
+		border: none;
+		border-radius: 50%;
+		background: rgba(0, 0, 0, 0.7);
+		color: white;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+	}
+
+	.edra-gallery-item:hover .edra-gallery-item-remove {
+		opacity: 1;
+	}
+
+	.edra-gallery-item-remove:hover {
+		background: rgba(239, 68, 68, 0.8);
+	}
+
+	:global(.edra-gallery-item-remove svg) {
+		width: 12px;
+		height: 12px;
+	}
+
+	.edra-gallery-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 8px;
+		background: rgba(255, 255, 255, 0.95);
+		border: 1px solid #e5e7eb;
+		border-radius: 6px;
+		margin-top: 8px;
+		backdrop-filter: blur(4px);
+	}
+
+	.edra-gallery-toolbar-section {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.edra-gallery-columns-select {
+		padding: 4px 8px;
+		border: 1px solid #e5e7eb;
+		border-radius: 4px;
+		background: white;
+		font-size: 12px;
+		cursor: pointer;
+	}
+
+	.edra-gallery-columns-select:focus {
+		outline: none;
+		border-color: #3b82f6;
+	}
+
+	:global(.edra-toolbar-button) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: 4px;
+		background: transparent;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	:global(.edra-toolbar-button:hover) {
+		background: #f3f4f6;
+	}
+
+	:global(.edra-toolbar-button.active) {
+		background: #3b82f6;
+		color: white;
+	}
+
+	:global(.edra-toolbar-button.edra-destructive:hover) {
+		background: #fef2f2;
+		color: #dc2626;
+	}
+
+	:global(.edra-toolbar-button svg) {
+		width: 16px;
+		height: 16px;
+	}
+
+	@media (max-width: 768px) {
+		.edra-gallery-grid.grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		.edra-gallery-grid.masonry {
+			column-count: 2;
+		}
+	}
+</style>
diff --git a/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte b/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte
new file mode 100644
index 0000000..fbf812c
--- /dev/null
+++ b/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte
@@ -0,0 +1,247 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+	import Grid from 'lucide-svelte/icons/grid-3x3'
+	import Upload from 'lucide-svelte/icons/upload'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import MediaLibraryModal from '../../../admin/MediaLibraryModal.svelte'
+
+	const { editor, deleteNode }: NodeViewProps = $props()
+
+	let isMediaLibraryOpen = $state(false)
+	let fileInput: HTMLInputElement
+	let isUploading = $state(false)
+
+	function handleBrowseLibrary(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		isMediaLibraryOpen = true
+	}
+
+	function handleDirectUpload(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		fileInput.click()
+	}
+
+	function handleMediaSelect(media: Media | Media[]) {
+		const mediaArray = Array.isArray(media) ? media : [media]
+		if (mediaArray.length > 0) {
+			const galleryImages = mediaArray.map((m) => ({
+				id: m.id,
+				url: m.url,
+				alt: m.altText || '',
+				title: m.description || ''
+			}))
+
+			editor.chain().focus().setGallery({ images: galleryImages }).run()
+		}
+		isMediaLibraryOpen = false
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	async function handleFileUpload(event: Event) {
+		const input = event.target as HTMLInputElement
+		const files = input.files
+		if (!files || files.length === 0) return
+
+		isUploading = true
+		const uploadedImages = []
+
+		try {
+			for (const file of files) {
+				if (!file.type.startsWith('image/')) continue
+
+				const formData = new FormData()
+				formData.append('file', file)
+				formData.append('type', 'image')
+
+				// Add auth header if needed
+				const auth = localStorage.getItem('admin_auth')
+				const headers: Record<string, string> = {}
+				if (auth) {
+					headers.Authorization = `Basic ${auth}`
+				}
+
+				const response = await fetch('/api/media/upload', {
+					method: 'POST',
+					headers,
+					body: formData
+				})
+
+				if (response.ok) {
+					const media = await response.json()
+					uploadedImages.push({
+						id: media.id,
+						url: media.url,
+						alt: media.altText || '',
+						title: media.description || ''
+					})
+				} else {
+					console.error('Failed to upload image:', response.status)
+				}
+			}
+
+			if (uploadedImages.length > 0) {
+				editor.chain().focus().setGallery({ images: uploadedImages }).run()
+			}
+		} catch (error) {
+			console.error('Error uploading images:', error)
+			alert('Failed to upload some images. Please try again.')
+		} finally {
+			isUploading = false
+			// Clear the input
+			input.value = ''
+		}
+	}
+
+	// Handle keyboard navigation
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			handleBrowseLibrary(e as any)
+		} else if (e.key === 'Escape') {
+			deleteNode()
+		}
+	}
+</script>
+
+<NodeViewWrapper class="edra-gallery-placeholder-wrapper" contenteditable="false">
+	<div class="edra-gallery-placeholder-container">
+		{#if isUploading}
+			<div class="edra-gallery-placeholder-uploading">
+				<div class="spinner"></div>
+				<span>Uploading images...</span>
+			</div>
+		{:else}
+			<button
+				class="edra-gallery-placeholder-option"
+				onclick={handleDirectUpload}
+				onkeydown={handleKeyDown}
+				tabindex="0"
+				aria-label="Upload Images"
+				title="Upload from device"
+			>
+				<Upload class="edra-gallery-placeholder-icon" />
+				<span class="edra-gallery-placeholder-text">Upload Images</span>
+			</button>
+
+			<button
+				class="edra-gallery-placeholder-option"
+				onclick={handleBrowseLibrary}
+				onkeydown={handleKeyDown}
+				tabindex="0"
+				aria-label="Browse Media Library"
+				title="Choose from library"
+			>
+				<Grid class="edra-gallery-placeholder-icon" />
+				<span class="edra-gallery-placeholder-text">Browse Library</span>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Hidden file input -->
+	<input
+		bind:this={fileInput}
+		type="file"
+		accept="image/*"
+		multiple
+		onchange={handleFileUpload}
+		style="display: none;"
+	/>
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={isMediaLibraryOpen}
+		mode="multiple"
+		fileType="image"
+		onSelect={handleMediaSelect}
+		onClose={handleMediaLibraryClose}
+	/>
+</NodeViewWrapper>
+
+<style>
+	.edra-gallery-placeholder-container {
+		display: flex;
+		gap: 12px;
+		padding: 24px;
+		border: 2px dashed #e5e7eb;
+		border-radius: 8px;
+		background: #f9fafb;
+		transition: all 0.2s ease;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.edra-gallery-placeholder-container:hover {
+		border-color: #d1d5db;
+		background: #f3f4f6;
+	}
+
+	.edra-gallery-placeholder-option {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 16px 20px;
+		border: 1px solid #e5e7eb;
+		border-radius: 6px;
+		background: white;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-width: 140px;
+	}
+
+	.edra-gallery-placeholder-option:hover {
+		border-color: #d1d5db;
+		background: #f9fafb;
+		transform: translateY(-1px);
+	}
+
+	.edra-gallery-placeholder-option:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
+
+	.edra-gallery-placeholder-uploading {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 20px;
+		color: #6b7280;
+	}
+
+	.spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid #f3f4f6;
+		border-top: 2px solid #3b82f6;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	:global(.edra-gallery-placeholder-icon) {
+		width: 28px;
+		height: 28px;
+		color: #6b7280;
+	}
+
+	.edra-gallery-placeholder-text {
+		font-size: 14px;
+		color: #6b7280;
+		font-weight: 500;
+	}
+</style>
diff --git a/src/lib/components/edra/headless/components/IFrameExtended.svelte b/src/lib/components/edra/headless/components/IFrameExtended.svelte
new file mode 100644
index 0000000..d984e23
--- /dev/null
+++ b/src/lib/components/edra/headless/components/IFrameExtended.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import type { NodeViewProps } from '@tiptap/core'
+
+	import AlignLeft from 'lucide-svelte/icons/align-left'
+	import AlignCenter from 'lucide-svelte/icons/align-center'
+	import AlignRight from 'lucide-svelte/icons/align-right'
+	import CopyIcon from 'lucide-svelte/icons/copy'
+	import Fullscreen from 'lucide-svelte/icons/fullscreen'
+	import Trash from 'lucide-svelte/icons/trash'
+	import Captions from 'lucide-svelte/icons/captions'
+
+	import { duplicateContent } from '../../utils.js'
+
+	const { node, editor, selected, deleteNode, updateAttributes }: NodeViewProps = $props()
+
+	const minWidth = 150
+
+	let iframeRef: HTMLIFrameElement
+	let nodeRef: HTMLDivElement
+
+	let caption: string | null = $state(node.attrs.title)
+	$effect(() => {
+		if (caption?.trim() === '') caption = null
+		updateAttributes({ title: caption })
+	})
+
+	let resizing = $state(false)
+	let resizingInitialWidth = $state(0)
+	let resizingInitialMouseX = $state(0)
+	let resizingPosition = $state<'left' | 'right'>('left')
+
+	function handleResizingPosition(e: MouseEvent, position: 'left' | 'right') {
+		startResize(e)
+		resizingPosition = position
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault()
+		resizing = true
+		resizingInitialMouseX = e.clientX
+		if (iframeRef) resizingInitialWidth = iframeRef.offsetWidth
+	}
+
+	function resize(e: MouseEvent) {
+		if (!resizing) return
+		let dx = e.clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function endResize() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	function handleTouchStart(e: TouchEvent, position: 'left' | 'right') {
+		e.preventDefault()
+		resizing = true
+		resizingPosition = position
+		resizingInitialMouseX = e.touches[0].clientX
+		if (iframeRef) resizingInitialWidth = iframeRef.offsetWidth
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!resizing) return
+		let dx = e.touches[0].clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.touches[0].clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function handleTouchEnd() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	onMount(() => {
+		// Attach id to nodeRef
+		nodeRef = document.getElementById('resizable-container-audio') as HTMLDivElement
+
+		// Mouse events
+		window.addEventListener('mousemove', resize)
+		window.addEventListener('mouseup', endResize)
+		// Touch events
+		window.addEventListener('touchmove', handleTouchMove)
+		window.addEventListener('touchend', handleTouchEnd)
+	})
+
+	onDestroy(() => {
+		window.removeEventListener('mousemove', resize)
+		window.removeEventListener('mouseup', endResize)
+		window.removeEventListener('touchmove', handleTouchMove)
+		window.removeEventListener('touchend', handleTouchEnd)
+	})
+</script>
+
+<NodeViewWrapper
+	id="resizable-container-audio"
+	class={`edra-media-container ${selected ? 'selected' : ''} align-${node.attrs.align}`}
+	style={`width: ${node.attrs.width}px`}
+	spellcheck={false}
+>
+	<div class={`edra-media-group ${resizing ? 'resizing' : ''}`}>
+		<iframe bind:this={iframeRef} class="edra-media-content" style="width: 100%;" {...node.attrs}>
+		</iframe>
+
+		{#if caption !== null}
+			<input bind:value={caption} type="text" class="edra-media-caption" />
+		{/if}
+
+		{#if editor?.isEditable}
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize left"
+				class="edra-media-resize-handle edra-media-resize-handle-left"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'left')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'left')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize right"
+				class="edra-media-resize-handle edra-media-resize-handle-right"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'right')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'right')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div class="edra-media-toolbar edra-media-toolbar-audio">
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'left' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'left' })}
+					title="Align Left"
+				>
+					<AlignLeft />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'center' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'center' })}
+					title="Align Center"
+				>
+					<AlignCenter />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'right' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'right' })}
+					title="Align Right"
+				>
+					<AlignRight />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						if (caption === null || caption.trim() === '') caption = 'Audio Caption'
+					}}
+					title="Caption"
+				>
+					<Captions />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						duplicateContent(editor, node)
+					}}
+					title="Duplicate"
+				>
+					<CopyIcon />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						updateAttributes({
+							width: 'fit-content'
+						})
+					}}
+					title="Full Screen"
+				>
+					<Fullscreen />
+				</button>
+				<button
+					class="edra-toolbar-button edra-destructive"
+					onclick={() => {
+						deleteNode()
+					}}
+					title="Delete"
+				>
+					<Trash />
+				</button>
+			</div>
+		{/if}
+	</div>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/IFramePlaceholder.svelte b/src/lib/components/edra/headless/components/IFramePlaceholder.svelte
new file mode 100644
index 0000000..8535812
--- /dev/null
+++ b/src/lib/components/edra/headless/components/IFramePlaceholder.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core'
+	import CodeXML from 'lucide-svelte/icons/code-xml'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	const { editor }: NodeViewProps = $props()
+
+	function handleClick(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		const iFrameURL = prompt('Enter the URL of an iFrame:')
+		if (!iFrameURL) {
+			return
+		}
+		editor.chain().focus().setIframe({ src: iFrameURL }).run()
+	}
+</script>
+
+<NodeViewWrapper class="edra-media-placeholder-wrapper" contenteditable={false} spellcheck={false}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<span
+		class="edra-media-placeholder-content"
+		onclick={handleClick}
+		tabindex="0"
+		role="button"
+		aria-label="Insert An Audio"
+	>
+		<CodeXML class="edra-media-placeholder-icon" />
+		<span class="edra-media-placeholder-text">Insert An IFrame</span>
+	</span>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/ImageExtended.svelte b/src/lib/components/edra/headless/components/ImageExtended.svelte
new file mode 100644
index 0000000..934ea5b
--- /dev/null
+++ b/src/lib/components/edra/headless/components/ImageExtended.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import type { NodeViewProps } from '@tiptap/core'
+
+	import AlignLeft from 'lucide-svelte/icons/align-left'
+	import AlignCenter from 'lucide-svelte/icons/align-center'
+	import AlignRight from 'lucide-svelte/icons/align-right'
+	import CopyIcon from 'lucide-svelte/icons/copy'
+	import Fullscreen from 'lucide-svelte/icons/fullscreen'
+	import Trash from 'lucide-svelte/icons/trash'
+	import Captions from 'lucide-svelte/icons/captions'
+
+	import { duplicateContent } from '../../utils.js'
+
+	const { node, editor, selected, deleteNode, updateAttributes }: NodeViewProps = $props()
+
+	const minWidth = 150
+
+	let imgRef: HTMLImageElement
+	let nodeRef: HTMLDivElement
+
+	let caption: string | null = $state(node.attrs.title)
+	$effect(() => {
+		if (caption?.trim() === '') caption = null
+		updateAttributes({ title: caption })
+	})
+
+	let resizing = $state(false)
+	let resizingInitialWidth = $state(0)
+	let resizingInitialMouseX = $state(0)
+	let resizingPosition = $state<'left' | 'right'>('left')
+
+	function handleResizingPosition(e: MouseEvent, position: 'left' | 'right') {
+		startResize(e)
+		resizingPosition = position
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault()
+		resizing = true
+		resizingInitialMouseX = e.clientX
+		if (imgRef) resizingInitialWidth = imgRef.offsetWidth
+	}
+
+	function resize(e: MouseEvent) {
+		if (!resizing) return
+		let dx = e.clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function endResize() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	function handleTouchStart(e: TouchEvent, position: 'left' | 'right') {
+		e.preventDefault()
+		resizing = true
+		resizingPosition = position
+		resizingInitialMouseX = e.touches[0].clientX
+		if (imgRef) resizingInitialWidth = imgRef.offsetWidth
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!resizing) return
+		let dx = e.touches[0].clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.touches[0].clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function handleTouchEnd() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	onMount(() => {
+		// Attach id to nodeRef
+		nodeRef = document.getElementById('resizable-container-media') as HTMLDivElement
+
+		// Mouse events
+		window.addEventListener('mousemove', resize)
+		window.addEventListener('mouseup', endResize)
+		// Touch events
+		window.addEventListener('touchmove', handleTouchMove)
+		window.addEventListener('touchend', handleTouchEnd)
+	})
+
+	onDestroy(() => {
+		window.removeEventListener('mousemove', resize)
+		window.removeEventListener('mouseup', endResize)
+		window.removeEventListener('touchmove', handleTouchMove)
+		window.removeEventListener('touchend', handleTouchEnd)
+	})
+</script>
+
+<NodeViewWrapper
+	id="resizable-container-media"
+	class={`edra-media-container ${selected ? 'selected' : ''} align-${node.attrs.align}`}
+	style={`width: ${node.attrs.width}px`}
+>
+	<div class={`edra-media-group ${resizing ? 'resizing' : ''}`}>
+		<img
+			bind:this={imgRef}
+			src={node.attrs.src}
+			alt={node.attrs.alt}
+			title={node.attrs.title}
+			class="edra-media-content"
+		/>
+		{#if caption !== null}
+			<input bind:value={caption} type="text" class="edra-media-caption" />
+		{/if}
+
+		{#if editor?.isEditable}
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize left"
+				class="edra-media-resize-handle edra-media-resize-handle-left"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'left')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'left')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize right"
+				class="edra-media-resize-handle edra-media-resize-handle-right"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'right')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'right')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div class="edra-media-toolbar">
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'left' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'left' })}
+					title="Align Left"
+				>
+					<AlignLeft />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'center' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'center' })}
+					title="Align Center"
+				>
+					<AlignCenter />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'right' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'right' })}
+					title="Align Right"
+				>
+					<AlignRight />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						if (caption === null || caption.trim() === '') caption = 'Image Caption'
+					}}
+					title="Caption"
+				>
+					<Captions />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						duplicateContent(editor, node)
+					}}
+					title="Duplicate"
+				>
+					<CopyIcon />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						updateAttributes({
+							width: 'fit-content'
+						})
+					}}
+					title="Full Screen"
+				>
+					<Fullscreen />
+				</button>
+				<button
+					class="edra-toolbar-button edra-destructive"
+					onclick={() => {
+						deleteNode()
+					}}
+					title="Delete"
+				>
+					<Trash />
+				</button>
+			</div>
+		{/if}
+	</div>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/ImagePlaceholder.svelte b/src/lib/components/edra/headless/components/ImagePlaceholder.svelte
new file mode 100644
index 0000000..8f6c9bb
--- /dev/null
+++ b/src/lib/components/edra/headless/components/ImagePlaceholder.svelte
@@ -0,0 +1,249 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core'
+	import type { Media } from '@prisma/client'
+	import Image from 'lucide-svelte/icons/image'
+	import Upload from 'lucide-svelte/icons/upload'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import MediaLibraryModal from '../../../admin/MediaLibraryModal.svelte'
+	import { onMount } from 'svelte'
+
+	const { editor, deleteNode }: NodeViewProps = $props()
+
+	let isMediaLibraryOpen = $state(false)
+	let fileInput: HTMLInputElement
+	let isUploading = $state(false)
+
+	function handleBrowseLibrary(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		isMediaLibraryOpen = true
+	}
+
+	function handleDirectUpload(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		fileInput.click()
+	}
+
+	function handleMediaSelect(media: Media | Media[]) {
+		const selectedMedia = Array.isArray(media) ? media[0] : media
+		if (selectedMedia) {
+			editor
+				.chain()
+				.focus()
+				.setImage({
+					src: selectedMedia.url,
+					alt: selectedMedia.altText || '',
+					title: selectedMedia.description || ''
+				})
+				.run()
+		}
+		isMediaLibraryOpen = false
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	async function handleFileUpload(event: Event) {
+		const input = event.target as HTMLInputElement
+		const files = input.files
+		if (!files || files.length === 0) return
+
+		const file = files[0]
+		if (!file.type.startsWith('image/')) {
+			alert('Please select an image file.')
+			return
+		}
+
+		isUploading = true
+
+		try {
+			const formData = new FormData()
+			formData.append('file', file)
+			formData.append('type', 'image')
+
+			// Add auth header if needed
+			const auth = localStorage.getItem('admin_auth')
+			const headers: Record<string, string> = {}
+			if (auth) {
+				headers.Authorization = `Basic ${auth}`
+			}
+
+			const response = await fetch('/api/media/upload', {
+				method: 'POST',
+				headers,
+				body: formData
+			})
+
+			if (response.ok) {
+				const media = await response.json()
+				editor
+					.chain()
+					.focus()
+					.setImage({
+						src: media.url,
+						alt: media.altText || '',
+						title: media.description || ''
+					})
+					.run()
+			} else {
+				console.error('Failed to upload image:', response.status)
+				alert('Failed to upload image. Please try again.')
+			}
+		} catch (error) {
+			console.error('Error uploading image:', error)
+			alert('Failed to upload image. Please try again.')
+		} finally {
+			isUploading = false
+			// Clear the input
+			input.value = ''
+		}
+	}
+
+	// Handle keyboard navigation
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			handleBrowseLibrary(e as any)
+		} else if (e.key === 'Escape') {
+			deleteNode()
+		}
+	}
+</script>
+
+<NodeViewWrapper class="edra-media-placeholder-wrapper" contenteditable="false">
+	<div class="edra-media-placeholder-container">
+		{#if isUploading}
+			<div class="edra-media-placeholder-uploading">
+				<div class="spinner"></div>
+				<span>Uploading...</span>
+			</div>
+		{:else}
+			<button
+				class="edra-media-placeholder-option"
+				onclick={handleDirectUpload}
+				onkeydown={handleKeyDown}
+				tabindex="0"
+				aria-label="Upload Image"
+				title="Upload from device"
+			>
+				<Upload class="edra-media-placeholder-icon" />
+				<span class="edra-media-placeholder-text">Upload Image</span>
+			</button>
+
+			<button
+				class="edra-media-placeholder-option"
+				onclick={handleBrowseLibrary}
+				onkeydown={handleKeyDown}
+				tabindex="0"
+				aria-label="Browse Media Library"
+				title="Choose from library"
+			>
+				<Image class="edra-media-placeholder-icon" />
+				<span class="edra-media-placeholder-text">Browse Library</span>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Hidden file input -->
+	<input
+		bind:this={fileInput}
+		type="file"
+		accept="image/*"
+		onchange={handleFileUpload}
+		style="display: none;"
+	/>
+
+	<!-- Media Library Modal -->
+	<MediaLibraryModal
+		bind:isOpen={isMediaLibraryOpen}
+		mode="single"
+		fileType="image"
+		onSelect={handleMediaSelect}
+		onClose={handleMediaLibraryClose}
+	/>
+</NodeViewWrapper>
+
+<style>
+	.edra-media-placeholder-container {
+		display: flex;
+		gap: 12px;
+		padding: 16px;
+		border: 2px dashed #e5e7eb;
+		border-radius: 8px;
+		background: #f9fafb;
+		transition: all 0.2s ease;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.edra-media-placeholder-container:hover {
+		border-color: #d1d5db;
+		background: #f3f4f6;
+	}
+
+	.edra-media-placeholder-option {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 12px 16px;
+		border: 1px solid #e5e7eb;
+		border-radius: 6px;
+		background: white;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		min-width: 120px;
+	}
+
+	.edra-media-placeholder-option:hover {
+		border-color: #d1d5db;
+		background: #f9fafb;
+		transform: translateY(-1px);
+	}
+
+	.edra-media-placeholder-option:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
+
+	.edra-media-placeholder-uploading {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 16px;
+		color: #6b7280;
+	}
+
+	.spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid #f3f4f6;
+		border-top: 2px solid #3b82f6;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	:global(.edra-media-placeholder-icon) {
+		width: 24px;
+		height: 24px;
+		color: #6b7280;
+	}
+
+	.edra-media-placeholder-text {
+		font-size: 14px;
+		color: #6b7280;
+		font-weight: 500;
+	}
+</style>
diff --git a/src/lib/components/edra/headless/components/SearchAndReplace.svelte b/src/lib/components/edra/headless/components/SearchAndReplace.svelte
new file mode 100644
index 0000000..66bce00
--- /dev/null
+++ b/src/lib/components/edra/headless/components/SearchAndReplace.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left'
+	import ArrowRight from 'lucide-svelte/icons/arrow-right'
+	import CaseSensitive from 'lucide-svelte/icons/case-sensitive'
+	import Replace from 'lucide-svelte/icons/replace'
+	import ReplaceAll from 'lucide-svelte/icons/replace-all'
+	import Search from 'lucide-svelte/icons/search'
+
+	interface Props {
+		editor: Editor
+		show: boolean
+	}
+
+	let { editor, show = $bindable(false) }: Props = $props()
+
+	let searchText = $state('')
+	let replaceText = $state('')
+	let caseSensitive = $state(false)
+
+	let searchIndex = $derived(editor.storage?.searchAndReplace?.resultIndex)
+	let searchCount = $derived(editor.storage?.searchAndReplace?.results.length)
+
+	function updateSearchTerm(clearIndex: boolean = false) {
+		if (clearIndex) editor.commands.resetIndex()
+
+		editor.commands.setSearchTerm(searchText)
+		editor.commands.setReplaceTerm(replaceText)
+		editor.commands.setCaseSensitive(caseSensitive)
+	}
+
+	function goToSelection() {
+		const { results, resultIndex } = editor.storage.searchAndReplace
+		const position = results[resultIndex]
+		if (!position) return
+		editor.commands.setTextSelection(position)
+		const { node } = editor.view.domAtPos(editor.state.selection.anchor)
+		if (node instanceof HTMLElement) node.scrollIntoView({ behavior: 'smooth', block: 'center' })
+	}
+
+	function replace() {
+		editor.commands.replace()
+		goToSelection()
+	}
+
+	const next = () => {
+		editor.commands.nextSearchResult()
+		goToSelection()
+	}
+
+	const previous = () => {
+		editor.commands.previousSearchResult()
+		goToSelection()
+	}
+
+	const clear = () => {
+		searchText = ''
+		replaceText = ''
+		caseSensitive = false
+		editor.commands.resetIndex()
+	}
+
+	const replaceAll = () => editor.commands.replaceAll()
+</script>
+
+<div class="edra-search-and-replace">
+	<button
+		class="edra-command-button"
+		onclick={() => {
+			show = !show
+			clear()
+			updateSearchTerm()
+		}}
+		title={show ? 'Go Back' : 'Search and Replace'}
+	>
+		{#if show}
+			<ArrowLeft class="edra-toolbar-icon" />
+		{:else}
+			<Search class="edra-toolbar-icon" />
+		{/if}
+	</button>
+	{#if show}
+		<div class="edra-search-and-replace-content">
+			<input placeholder="Search..." bind:value={searchText} oninput={() => updateSearchTerm()} />
+			<span>{searchCount > 0 ? searchIndex + 1 : 0}/{searchCount}</span>
+			<button
+				class="edra-command-button"
+				class:active={caseSensitive}
+				onclick={() => {
+					caseSensitive = !caseSensitive
+					updateSearchTerm()
+				}}
+				title="Case Sensitive"
+			>
+				<CaseSensitive class="edra-toolbar-icon" />
+			</button>
+			<button class="edra-command-button" onclick={previous} title="Previous">
+				<ArrowLeft class="edra-toolbar-icon" />
+			</button>
+			<button class="edra-command-button" onclick={next} title="Next">
+				<ArrowRight class="edra-toolbar-icon" />
+			</button>
+			<span class="separator"></span>
+
+			<input placeholder="Replace..." bind:value={replaceText} oninput={() => updateSearchTerm()} />
+			<button class="edra-command-button" onclick={replace} title="Replace">
+				<Replace class="edra-toolbar-icon" />
+			</button>
+			<button class="edra-command-button" onclick={replaceAll} title="Replace All">
+				<ReplaceAll class="edra-toolbar-icon" />
+			</button>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/edra/headless/components/SlashCommandList.svelte b/src/lib/components/edra/headless/components/SlashCommandList.svelte
new file mode 100644
index 0000000..60cc0c3
--- /dev/null
+++ b/src/lib/components/edra/headless/components/SlashCommandList.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { icons } from 'lucide-svelte'
+
+	interface Props {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		props: Record<string, any>
+	}
+
+	const { props }: Props = $props()
+
+	let scrollContainer = $state<HTMLElement | null>(null)
+
+	let selectedGroupIndex = $state<number>(0)
+	let selectedCommandIndex = $state<number>(0)
+
+	const items = $derived.by(() => props.items)
+
+	$effect(() => {
+		if (items) {
+			selectedGroupIndex = 0
+			selectedCommandIndex = 0
+		}
+	})
+
+	$effect(() => {
+		const activeItem = document.getElementById(`${selectedGroupIndex}-${selectedCommandIndex}`)
+		if (activeItem !== null && scrollContainer !== null) {
+			const offsetTop = activeItem.offsetTop
+			const offsetHeight = activeItem.offsetHeight
+			scrollContainer.scrollTop = offsetTop - offsetHeight
+		}
+	})
+
+	const selectItem = (groupIndex: number, commandIndex: number) => {
+		const command = props.items[groupIndex].commands[commandIndex]
+		props.command(command)
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' || ((e.ctrlKey || e.metaKey) && e.key === 'j') || e.key === 'Tab') {
+			e.preventDefault()
+			if (!props.items.length) {
+				return false
+			}
+			const commands = props.items[selectedGroupIndex].commands
+			let newCommandIndex = selectedCommandIndex + 1
+			let newGroupIndex = selectedGroupIndex
+			if (commands.length - 1 < newCommandIndex) {
+				newCommandIndex = 0
+				newGroupIndex = selectedGroupIndex + 1
+			}
+
+			if (props.items.length - 1 < newGroupIndex) {
+				newGroupIndex = 0
+			}
+			selectedCommandIndex = newCommandIndex
+			selectedGroupIndex = newGroupIndex
+			return true
+		}
+
+		if (e.key === 'ArrowUp' || ((e.ctrlKey || e.metaKey) && e.key === 'k')) {
+			e.preventDefault()
+			if (!props.items.length) {
+				return false
+			}
+			let newCommandIndex = selectedCommandIndex - 1
+			let newGroupIndex = selectedGroupIndex
+			if (newCommandIndex < 0) {
+				newGroupIndex = selectedGroupIndex - 1
+				newCommandIndex = props.items[newGroupIndex]?.commands.length - 1 || 0
+			}
+			if (newGroupIndex < 0) {
+				newGroupIndex = props.items.length - 1
+				newCommandIndex = props.items[newGroupIndex].commands.length - 1
+			}
+			selectedCommandIndex = newCommandIndex
+			selectedGroupIndex = newGroupIndex
+			return true
+		}
+
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			if (!props.items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
+				return false
+			}
+			selectItem(selectedGroupIndex, selectedCommandIndex)
+			return true
+		}
+		return false
+	}
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+{#if items.length}
+	<div bind:this={scrollContainer} class="edra-slash-command-list">
+		{#each items as grp, groupIndex}
+			<span class="edra-slash-command-list-title">{grp.title}</span>
+
+			{#each grp.commands as command, commandIndex}
+				{@const Icon = icons[command.iconName]}
+				{@const isActive =
+					selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex}
+				<button
+					id={`${groupIndex}-${commandIndex}`}
+					class="edra-slash-command-list-item"
+					class:active={isActive}
+					onclick={() => selectItem(groupIndex, commandIndex)}
+				>
+					<Icon class="edra-toolbar-icon" />
+					<span>{command.label}</span>
+				</button>
+			{/each}
+		{/each}
+	</div>
+{/if}
diff --git a/src/lib/components/edra/headless/components/VideoExtended.svelte b/src/lib/components/edra/headless/components/VideoExtended.svelte
new file mode 100644
index 0000000..faaaf9b
--- /dev/null
+++ b/src/lib/components/edra/headless/components/VideoExtended.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	import type { NodeViewProps } from '@tiptap/core'
+
+	import AlignLeft from 'lucide-svelte/icons/align-left'
+	import AlignCenter from 'lucide-svelte/icons/align-center'
+	import AlignRight from 'lucide-svelte/icons/align-right'
+	import CopyIcon from 'lucide-svelte/icons/copy'
+	import Fullscreen from 'lucide-svelte/icons/fullscreen'
+	import Trash from 'lucide-svelte/icons/trash'
+	import Captions from 'lucide-svelte/icons/captions'
+
+	import { duplicateContent } from '../../utils.js'
+
+	const { node, editor, selected, deleteNode, updateAttributes }: NodeViewProps = $props()
+
+	const minWidth = 150
+
+	let vidRef: HTMLVideoElement
+	let nodeRef: HTMLDivElement
+
+	let caption: string | null = $state(node.attrs.title)
+	$effect(() => {
+		if (caption?.trim() === '') caption = null
+		updateAttributes({ title: caption })
+	})
+
+	let resizing = $state(false)
+	let resizingInitialWidth = $state(0)
+	let resizingInitialMouseX = $state(0)
+	let resizingPosition = $state<'left' | 'right'>('left')
+
+	function handleResizingPosition(e: MouseEvent, position: 'left' | 'right') {
+		startResize(e)
+		resizingPosition = position
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault()
+		resizing = true
+		resizingInitialMouseX = e.clientX
+		if (vidRef) resizingInitialWidth = vidRef.offsetWidth
+	}
+
+	function resize(e: MouseEvent) {
+		if (!resizing) return
+		let dx = e.clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function endResize() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	function handleTouchStart(e: TouchEvent, position: 'left' | 'right') {
+		e.preventDefault()
+		resizing = true
+		resizingPosition = position
+		resizingInitialMouseX = e.touches[0].clientX
+		if (vidRef) resizingInitialWidth = vidRef.offsetWidth
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!resizing) return
+		let dx = e.touches[0].clientX - resizingInitialMouseX
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.touches[0].clientX
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth)
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth })
+		}
+	}
+
+	function handleTouchEnd() {
+		resizing = false
+		resizingInitialMouseX = 0
+		resizingInitialWidth = 0
+	}
+
+	onMount(() => {
+		// Attach id to nodeRef
+		nodeRef = document.getElementById('resizable-container-media') as HTMLDivElement
+
+		// Mouse events
+		window.addEventListener('mousemove', resize)
+		window.addEventListener('mouseup', endResize)
+		// Touch events
+		window.addEventListener('touchmove', handleTouchMove)
+		window.addEventListener('touchend', handleTouchEnd)
+	})
+
+	onDestroy(() => {
+		window.removeEventListener('mousemove', resize)
+		window.removeEventListener('mouseup', endResize)
+		window.removeEventListener('touchmove', handleTouchMove)
+		window.removeEventListener('touchend', handleTouchEnd)
+	})
+</script>
+
+<NodeViewWrapper
+	id="resizable-container-media"
+	class={`edra-media-container ${selected ? 'selected' : ''} align-${node.attrs.align}`}
+	style={`width: ${node.attrs.width}px`}
+>
+	<div class={`edra-media-group ${resizing ? 'resizing' : ''}`}>
+		<video
+			bind:this={vidRef}
+			src={node.attrs.src}
+			controls
+			title={node.attrs.title}
+			class="edra-media-content"
+		>
+			<track kind="captions" />
+		</video>
+
+		{#if caption !== null}
+			<input bind:value={caption} type="text" class="edra-media-caption" />
+		{/if}
+
+		{#if editor?.isEditable}
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize left"
+				class="edra-media-resize-handle edra-media-resize-handle-left"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'left')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'left')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Resize right"
+				class="edra-media-resize-handle edra-media-resize-handle-right"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'right')
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'right')
+				}}
+			>
+				<div class="edra-media-resize-indicator"></div>
+			</div>
+
+			<div class="edra-media-toolbar">
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'left' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'left' })}
+					title="Align Left"
+				>
+					<AlignLeft />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'center' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'center' })}
+					title="Align Center"
+				>
+					<AlignCenter />
+				</button>
+				<button
+					class={`edra-toolbar-button ${node.attrs.align === 'right' ? 'active' : ''}`}
+					onclick={() => updateAttributes({ align: 'right' })}
+					title="Align Right"
+				>
+					<AlignRight />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						if (caption === null || caption.trim() === '') caption = 'Video Caption'
+					}}
+					title="Caption"
+				>
+					<Captions />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						duplicateContent(editor, node)
+					}}
+					title="Duplicate"
+				>
+					<CopyIcon />
+				</button>
+				<button
+					class="edra-toolbar-button"
+					onclick={() => {
+						updateAttributes({
+							width: 'fit-content'
+						})
+					}}
+					title="Full Screen"
+				>
+					<Fullscreen />
+				</button>
+				<button
+					class="edra-toolbar-button edra-destructive"
+					onclick={() => {
+						deleteNode()
+					}}
+					title="Delete"
+				>
+					<Trash />
+				</button>
+			</div>
+		{/if}
+	</div>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/components/VideoPlaceholder.svelte b/src/lib/components/edra/headless/components/VideoPlaceholder.svelte
new file mode 100644
index 0000000..bcf39a7
--- /dev/null
+++ b/src/lib/components/edra/headless/components/VideoPlaceholder.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core'
+	import Video from 'lucide-svelte/icons/video'
+	import { NodeViewWrapper } from 'svelte-tiptap'
+	const { editor }: NodeViewProps = $props()
+
+	function handleClick(e: MouseEvent) {
+		if (!editor.isEditable) return
+		e.preventDefault()
+		const videoUrl = prompt('Enter the URL of the video:')
+		if (!videoUrl) {
+			return
+		}
+		editor.chain().focus().setVideo(videoUrl).run()
+	}
+</script>
+
+<NodeViewWrapper class="edra-media-placeholder-wrapper" contenteditable="false">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<span
+		class="edra-media-placeholder-content"
+		onclick={handleClick}
+		tabindex="0"
+		role="button"
+		aria-label="Insert A Video"
+	>
+		<Video class="edra-media-placeholder-icon" />
+		<span class="edra-media-placeholder-text">Insert A Video</span>
+	</span>
+</NodeViewWrapper>
diff --git a/src/lib/components/edra/headless/editor.svelte b/src/lib/components/edra/headless/editor.svelte
new file mode 100644
index 0000000..4ca53ae
--- /dev/null
+++ b/src/lib/components/edra/headless/editor.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { type Editor } from '@tiptap/core'
+	import { onMount } from 'svelte'
+
+	import { initiateEditor } from '../editor.js'
+	import './style.css'
+	import 'katex/dist/katex.min.css'
+
+	// Lowlight
+	import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+	import { all, createLowlight } from 'lowlight'
+	import '../editor.css'
+	import '../onedark.css'
+	import { SvelteNodeViewRenderer } from 'svelte-tiptap'
+	import CodeExtended from './components/CodeExtended.svelte'
+	import { AudioPlaceholder } from '../extensions/audio/AudioPlaceholder.js'
+	import AudioPlaceholderComponent from './components/AudioPlaceholder.svelte'
+	import AudioExtendedComponent from './components/AudioExtended.svelte'
+	import { ImagePlaceholder } from '../extensions/image/ImagePlaceholder.js'
+	import ImagePlaceholderComponent from './components/ImagePlaceholder.svelte'
+	import { VideoPlaceholder } from '../extensions/video/VideoPlaceholder.js'
+	import VideoPlaceholderComponent from './components/VideoPlaceholder.svelte'
+	import { ImageExtended } from '../extensions/image/ImageExtended.js'
+	import ImageExtendedComponent from './components/ImageExtended.svelte'
+	import VideoExtendedComponent from './components/VideoExtended.svelte'
+	import { VideoExtended } from '../extensions/video/VideoExtended.js'
+	import { AudioExtended } from '../extensions/audio/AudiExtended.js'
+	import { GalleryPlaceholder } from '../extensions/gallery/GalleryPlaceholder.js'
+	import GalleryPlaceholderComponent from './components/GalleryPlaceholder.svelte'
+	import { GalleryExtended } from '../extensions/gallery/GalleryExtended.js'
+	import GalleryExtendedComponent from './components/GalleryExtended.svelte'
+	import LinkMenu from './menus/link-menu.svelte'
+	import TableRowMenu from './menus/table/table-row-menu.svelte'
+	import TableColMenu from './menus/table/table-col-menu.svelte'
+	import slashcommand from '../extensions/slash-command/slashcommand.js'
+	import SlashCommandList from './components/SlashCommandList.svelte'
+	import LoaderCircle from 'lucide-svelte/icons/loader-circle'
+	import { focusEditor, type EdraProps } from '../utils.js'
+	import IFramePlaceholderComponent from './components/IFramePlaceholder.svelte'
+	import { IFramePlaceholder } from '../extensions/iframe/IFramePlaceholder.js'
+	import { IFrameExtended } from '../extensions/iframe/IFrameExtended.js'
+	import IFrameExtendedComponent from './components/IFrameExtended.svelte'
+
+	const lowlight = createLowlight(all)
+
+	let {
+		class: className = '',
+		content = undefined,
+		editable = true,
+		limit = undefined,
+		editor = $bindable<Editor | undefined>(),
+		showSlashCommands = true,
+		showLinkBubbleMenu = true,
+		showTableBubbleMenu = true,
+		onUpdate,
+		children,
+		placeholder = undefined
+	}: EdraProps & { placeholder?: string } = $props()
+
+	let element = $state<HTMLElement>()
+
+	onMount(() => {
+		editor = initiateEditor(
+			element,
+			content,
+			limit,
+			[
+				CodeBlockLowlight.configure({
+					lowlight
+				}).extend({
+					addNodeView() {
+						return SvelteNodeViewRenderer(CodeExtended)
+					}
+				}),
+				AudioPlaceholder(AudioPlaceholderComponent),
+				ImagePlaceholder(ImagePlaceholderComponent),
+				GalleryPlaceholder(GalleryPlaceholderComponent),
+				IFramePlaceholder(IFramePlaceholderComponent),
+				IFrameExtended(IFrameExtendedComponent),
+				VideoPlaceholder(VideoPlaceholderComponent),
+				AudioExtended(AudioExtendedComponent),
+				ImageExtended(ImageExtendedComponent),
+				GalleryExtended(GalleryExtendedComponent),
+				VideoExtended(VideoExtendedComponent),
+				...(showSlashCommands ? [slashcommand(SlashCommandList)] : [])
+			],
+			{
+				editable,
+				onUpdate,
+				onTransaction: (props) => {
+					editor = undefined
+					editor = props.editor
+				}
+			},
+			placeholder
+		)
+		return () => editor?.destroy()
+	})
+</script>
+
+<div class={`edra ${className}`}>
+	{@render children?.()}
+	{#if editor}
+		{#if showLinkBubbleMenu}
+			<LinkMenu {editor} />
+		{/if}
+		{#if showTableBubbleMenu}
+			<TableRowMenu {editor} />
+			<TableColMenu {editor} />
+		{/if}
+	{/if}
+	{#if !editor}
+		<div class="edra-loading">
+			<LoaderCircle class="animate-spin" /> Loading...
+		</div>
+	{/if}
+	<div
+		bind:this={element}
+		role="button"
+		tabindex="0"
+		onclick={(event) => focusEditor(editor, event)}
+		onkeydown={(event) => {
+			if (event.key === 'Enter' || event.key === ' ') {
+				focusEditor(editor, event)
+			}
+		}}
+		class="edra-editor"
+	></div>
+</div>
+
+<style>
+	:global(.ProseMirror) {
+		min-height: 100%;
+		position: relative;
+		word-wrap: break-word;
+		white-space: pre-wrap;
+		cursor: auto;
+		-webkit-font-variant-ligatures: none;
+		font-variant-ligatures: none;
+		&:focus {
+			outline: none;
+		}
+	}
+</style>
diff --git a/src/lib/components/edra/headless/index.ts b/src/lib/components/edra/headless/index.ts
new file mode 100644
index 0000000..89230c3
--- /dev/null
+++ b/src/lib/components/edra/headless/index.ts
@@ -0,0 +1,3 @@
+export { default as Edra } from './editor.svelte'
+export { default as EdraToolbar } from './toolbar.svelte'
+export { default as EdraBubbleMenu } from './menus/bubble-menu.svelte'
diff --git a/src/lib/components/edra/headless/menus/bubble-menu.svelte b/src/lib/components/edra/headless/menus/bubble-menu.svelte
new file mode 100644
index 0000000..ceec1cd
--- /dev/null
+++ b/src/lib/components/edra/headless/menus/bubble-menu.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { BubbleMenu } from 'svelte-tiptap'
+	import { isTextSelection, type Editor } from '@tiptap/core'
+	import { commands } from '../../commands/commands.js'
+	import EdraToolBarIcon from '../components/EdraToolBarIcon.svelte'
+	import type { ShouldShowProps } from '../../utils.js'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		class?: string
+		editor: Editor
+		children?: Snippet<[]>
+	}
+	const { class: className = '', editor, children }: Props = $props()
+
+	let isDragging = $state(false)
+
+	editor.view.dom.addEventListener('dragstart', () => {
+		isDragging = true
+	})
+
+	editor.view.dom.addEventListener('drop', () => {
+		isDragging = true
+
+		// Allow some time for the drop action to complete before re-enabling
+		setTimeout(() => {
+			isDragging = false
+		}, 100) // Adjust delay if needed
+	})
+
+	const bubbleMenuCommands = [
+		...commands['text-formatting'].commands,
+		...commands.alignment.commands,
+		...commands.lists.commands
+	]
+
+	const colorCommands = commands.colors.commands
+	const fontCommands = commands.fonts.commands
+
+	function shouldShow(props: ShouldShowProps) {
+		if (!props.editor.isEditable) return false
+		const { view, editor } = props
+		if (!view || editor.view.dragging) {
+			return false
+		}
+		if (editor.isActive('link')) return false
+		if (editor.isActive('codeBlock')) return false
+		const {
+			state: {
+				doc,
+				selection,
+				selection: { empty, from, to }
+			}
+		} = editor
+		// check if the selection is a table grip
+		const domAtPos = view.domAtPos(from || 0).node as HTMLElement
+		const nodeDOM = view.nodeDOM(from || 0) as HTMLElement
+		const node = nodeDOM || domAtPos
+
+		if (isTableGripSelected(node)) {
+			return false
+		}
+		// Sometime check for `empty` is not enough.
+		// Doubleclick an empty paragraph returns a node size of 2.
+		// So we check also for an empty text size.
+		const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(selection)
+		if (empty || isEmptyTextBlock || !editor.isEditable) {
+			return false
+		}
+		return !isDragging && !editor.state.selection.empty
+	}
+
+	const isTableGripSelected = (node: HTMLElement) => {
+		let container = node
+		while (container && !['TD', 'TH'].includes(container.tagName)) {
+			container = container.parentElement!
+		}
+		const gripColumn =
+			container && container.querySelector && container.querySelector('a.grip-column.selected')
+		const gripRow =
+			container && container.querySelector && container.querySelector('a.grip-row.selected')
+		if (gripColumn || gripRow) {
+			return true
+		}
+		return false
+	}
+</script>
+
+<BubbleMenu
+	{editor}
+	class={`bubble-menu-wrapper ${className}`}
+	{shouldShow}
+	pluginKey="bubble-menu"
+	updateDelay={100}
+	tippyOptions={{
+		popperOptions: {
+			placement: 'top-start',
+			modifiers: [
+				{
+					name: 'preventOverflow',
+					options: {
+						boundary: 'viewport',
+						padding: 8
+					}
+				},
+				{
+					name: 'flip',
+					options: {
+						fallbackPlacements: ['bottom-start', 'top-end', 'bottom-end']
+					}
+				}
+			]
+		},
+		maxWidth: 'calc(100vw - 16px)'
+	}}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#each bubbleMenuCommands as command}
+			<EdraToolBarIcon {command} {editor} />
+		{/each}
+
+		<EdraToolBarIcon command={fontCommands[0]} {editor} />
+		<span>{editor.getAttributes('textStyle').fontSize ?? '16px'}</span>
+		<EdraToolBarIcon command={fontCommands[1]} {editor} />
+
+		<EdraToolBarIcon
+			command={colorCommands[0]}
+			{editor}
+			style={`color: ${editor.getAttributes('textStyle').color};`}
+			onclick={() => {
+				const color = editor.getAttributes('textStyle').color
+				const hasColor = editor.isActive('textStyle', { color })
+				if (hasColor) {
+					editor.chain().focus().unsetColor().run()
+				} else {
+					const color = prompt('Enter the color of the text:')
+					if (color !== null) {
+						editor.chain().focus().setColor(color).run()
+					}
+				}
+			}}
+		/>
+		<EdraToolBarIcon
+			command={colorCommands[1]}
+			{editor}
+			style={`background-color: ${editor.getAttributes('highlight').color};`}
+			onclick={() => {
+				const hasHightlight = editor.isActive('highlight')
+				if (hasHightlight) {
+					editor.chain().focus().unsetHighlight().run()
+				} else {
+					const color = prompt('Enter the color of the highlight:')
+					if (color !== null) {
+						editor.chain().focus().setHighlight({ color }).run()
+					}
+				}
+			}}
+		/>
+	{/if}
+</BubbleMenu>
diff --git a/src/lib/components/edra/headless/menus/link-menu.svelte b/src/lib/components/edra/headless/menus/link-menu.svelte
new file mode 100644
index 0000000..b12d527
--- /dev/null
+++ b/src/lib/components/edra/headless/menus/link-menu.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { type Editor } from '@tiptap/core'
+	import { BubbleMenu } from 'svelte-tiptap'
+	import type { ShouldShowProps } from '../../utils.js'
+	import Copy from 'lucide-svelte/icons/copy'
+	import Trash from 'lucide-svelte/icons/trash'
+	import Edit from 'lucide-svelte/icons/pen'
+	import Check from 'lucide-svelte/icons/check'
+
+	interface Props {
+		editor: Editor
+	}
+
+	let { editor }: Props = $props()
+
+	const link = $derived.by(() => editor.getAttributes('link').href)
+
+	let isEditing = $state(false)
+
+	function setLink(url: string) {
+		if (url.trim() === '') {
+			editor.chain().focus().extendMarkRange('link').unsetLink().run()
+			return
+		}
+		editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+	}
+
+	let linkInput = $state('')
+	let isLinkValid = $state(true)
+
+	$effect(() => {
+		isLinkValid = validateURL(linkInput)
+	})
+
+	function validateURL(url: string): boolean {
+		const urlPattern = new RegExp(
+			'^(https?:\\/\\/)?' + // protocol (optional)
+				'((([a-zA-Z\\d]([a-zA-Z\\d-]*[a-zA-Z\\d])*)\\.)+[a-zA-Z]{2,}|' + // domain name and extension
+				'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+				'(\\:\\d+)?(\\/[-a-zA-Z\\d%_.~+]*)*' + // port and path
+				'(\\?[;&a-zA-Z\\d%_.~+=-]*)?' + // query string
+				'(\\#[-a-zA-Z\\d_]*)?$', // fragment locator
+			'i'
+		)
+		return urlPattern.test(url)
+	}
+</script>
+
+<BubbleMenu
+	{editor}
+	pluginKey="link-menu"
+	shouldShow={(props: ShouldShowProps) => {
+		if (!props.editor.isEditable) return false
+		if (props.editor.isActive('link')) {
+			return true
+		} else {
+			isEditing = false
+			linkInput = ''
+			isLinkValid = true
+			return false
+		}
+	}}
+	class="bubble-menu-wrapper"
+>
+	{#if isEditing}
+		<input
+			type="text"
+			bind:value={linkInput}
+			placeholder="Enter the URL"
+			disabled={!isEditing}
+			class:valid={isLinkValid}
+			class:invalid={!isLinkValid}
+		/>
+	{:else}
+		<a href={link} target="_blank">{link}</a>
+	{/if}
+
+	{#if !isEditing}
+		<button
+			class="edra-command-button"
+			onclick={() => {
+				linkInput = link
+				isEditing = true
+			}}
+			title="Edit the URL"
+		>
+			<Edit class="edra-toolbar-icon" />
+		</button>
+		<button
+			class="edra-command-button"
+			onclick={() => {
+				navigator.clipboard.writeText(link)
+			}}
+			title="Copy the URL to the clipboard"
+		>
+			<Copy class="edra-toolbar-icon" />
+		</button>
+		<button
+			class="edra-command-button"
+			onclick={() => {
+				editor.chain().focus().extendMarkRange('link').unsetLink().run()
+			}}
+			title="Remove the link"
+		>
+			<Trash class="edra-toolbar-icon" />
+		</button>
+	{:else}
+		<button
+			class="edra-command-button"
+			onclick={() => {
+				isEditing = false
+				editor.commands.focus()
+				setLink(linkInput)
+			}}
+			disabled={!isLinkValid}
+		>
+			<Check class="edra-toolbar-icon" />
+		</button>
+	{/if}
+</BubbleMenu>
diff --git a/src/lib/components/edra/headless/menus/table/table-col-menu.svelte b/src/lib/components/edra/headless/menus/table/table-col-menu.svelte
new file mode 100644
index 0000000..cf82181
--- /dev/null
+++ b/src/lib/components/edra/headless/menus/table/table-col-menu.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { ShouldShowProps } from '../../../utils.js'
+	import { type Editor } from '@tiptap/core'
+	import { BubbleMenu } from 'svelte-tiptap'
+	import ArrowLeftFromLine from 'lucide-svelte/icons/arrow-left-from-line'
+	import ArrowRightFromLine from 'lucide-svelte/icons/arrow-right-from-line'
+	import Trash from 'lucide-svelte/icons/trash'
+	import { isColumnGripSelected } from '../../../extensions/table/utils.js'
+	interface Props {
+		editor: Editor
+	}
+
+	let { editor }: Props = $props()
+</script>
+
+<BubbleMenu
+	{editor}
+	pluginKey="table-col-menu"
+	shouldShow={(props: ShouldShowProps) => {
+		if (!props.editor.isEditable) return false
+		if (!props.state) {
+			return false
+		}
+		return isColumnGripSelected({
+			editor: props.editor,
+			view: props.view,
+			state: props.state,
+			from: props.from
+		})
+	}}
+	class="edra-menu-wrapper"
+>
+	<button
+		class="edra-command-button"
+		title="Add Column After"
+		onclick={() => editor.chain().focus().addColumnAfter().run()}
+	>
+		<ArrowRightFromLine class="edra-toolbar-icon" />
+	</button>
+	<button
+		class="edra-command-button"
+		title="Add Column Before"
+		onclick={() => editor.chain().focus().addColumnBefore().run()}
+	>
+		<ArrowLeftFromLine class="edra-toolbar-icon" />
+	</button>
+	<button
+		class="edra-command-button"
+		title="Delete Column"
+		onclick={() => editor.chain().focus().deleteColumn().run()}
+	>
+		<Trash class="edra-toolbar-icon" />
+	</button>
+</BubbleMenu>
diff --git a/src/lib/components/edra/headless/menus/table/table-row-menu.svelte b/src/lib/components/edra/headless/menus/table/table-row-menu.svelte
new file mode 100644
index 0000000..a01e971
--- /dev/null
+++ b/src/lib/components/edra/headless/menus/table/table-row-menu.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { ShouldShowProps } from '../../../utils.js'
+	import { type Editor } from '@tiptap/core'
+	import { BubbleMenu } from 'svelte-tiptap'
+	import ArrowDownFromLine from 'lucide-svelte/icons/arrow-down-from-line'
+	import ArrowUpFromLine from 'lucide-svelte/icons/arrow-up-from-line'
+	import Trash from 'lucide-svelte/icons/trash'
+	import { isRowGripSelected } from '../../../extensions/table/utils.js'
+	interface Props {
+		editor: Editor
+	}
+
+	let { editor }: Props = $props()
+</script>
+
+<BubbleMenu
+	{editor}
+	pluginKey="table-row-menu"
+	shouldShow={(props: ShouldShowProps) => {
+		if (!props.editor.isEditable) return false
+		if (!props.state) {
+			return false
+		}
+		return isRowGripSelected({
+			editor: props.editor,
+			view: props.view,
+			state: props.state,
+			from: props.from
+		})
+	}}
+	class="edra-menu-wrapper"
+>
+	<button
+		class="edra-command-button"
+		title="Add Row After"
+		onclick={() => editor.chain().focus().addRowAfter().run()}
+	>
+		<ArrowDownFromLine class="edra-toolbar-icon" />
+	</button>
+	<button
+		class="edra-command-button"
+		title="Add Row Before"
+		onclick={() => editor.chain().focus().addRowBefore().run()}
+	>
+		<ArrowUpFromLine class="edra-toolbar-icon" />
+	</button>
+	<button
+		class="edra-command-button"
+		title="Delete Row"
+		onclick={() => editor.chain().focus().deleteRow().run()}
+	>
+		<Trash class="edra-toolbar-icon" />
+	</button>
+</BubbleMenu>
diff --git a/src/lib/components/edra/headless/style.css b/src/lib/components/edra/headless/style.css
new file mode 100644
index 0000000..b46f2f8
--- /dev/null
+++ b/src/lib/components/edra/headless/style.css
@@ -0,0 +1,383 @@
+:root {
+	/* Color Variables */
+	--edra-border-color: #80808050;
+	--edra-button-bg-color: #80808025;
+	--edra-button-hover-bg-color: #80808075;
+	--edra-button-active-bg-color: #80808090;
+	--edra-icon-color: currentColor; /* Default, can be customized */
+	--edra-separator-color: currentColor; /* Default, can be customized */
+
+	/* Size and Spacing Variables */
+	--edra-gap: 0.25rem;
+	--edra-border-radius: 0.5rem;
+	--edra-button-border-radius: 0.5rem;
+	--edra-padding: 0.5rem;
+	--edra-button-padding: 0.25rem;
+	--edra-button-size: 2rem;
+	--edra-icon-size: 1rem;
+	--edra-separator-width: 0.25rem;
+}
+
+/** Editor Styles */
+:root {
+	--border-color: rgba(128, 128, 128, 0.3);
+	--border-color-hover: rgba(128, 128, 128, 0.5);
+	--blockquote-border: rgba(128, 128, 128, 0.7);
+	--code-color: rgb(255, 68, 0);
+	--code-bg: rgba(128, 128, 128, 0.3);
+	--code-border: rgba(128, 128, 128, 0.4);
+	--table-border: rgba(128, 128, 128, 0.3);
+	--table-bg-selected: rgba(128, 128, 128, 0.1);
+	--table-bg-hover: rgba(128, 128, 128, 0.2);
+	--task-completed-color: rgba(128, 128, 128, 0.7);
+	--code-wrapper-bg: rgba(128, 128, 128, 0.05);
+	--highlight-color: rgba(0, 128, 0, 0.3);
+	--highlight-border: greenyellow;
+	--search-result-bg: yellow;
+	--search-result-current-bg: orange;
+}
+
+.edra {
+	display: flex;
+	flex-direction: column;
+	gap: var(--edra-gap);
+	overflow: auto;
+}
+
+.edra-editor {
+	padding: 0 var(--edra-padding);
+	flex-grow: 1;
+	padding-left: 2rem;
+	overflow: auto;
+	box-sizing: border-box;
+}
+
+.edra-toolbar {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--edra-gap);
+	padding: var(--edra-padding);
+	width: fit-content;
+	overflow: auto;
+}
+
+.edra-loading {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--edra-gap);
+}
+
+.animate-spin {
+	animation: animate-spin 1s linear infinite;
+}
+
+@keyframes animate-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.edra-command-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background-color: var(--edra-button-bg-color);
+	border-radius: var(--edra-button-border-radius);
+	cursor: pointer;
+	transition: background-color 0.2s ease-in-out;
+	padding: var(--edra-button-padding);
+	min-width: var(--edra-button-size);
+	min-height: var(--edra-button-size);
+}
+
+.edra-command-button:hover {
+	background-color: var(--edra-button-hover-bg-color);
+}
+
+.edra-command-button.active {
+	background-color: var(--edra-button-active-bg-color);
+}
+
+.edra-toolbar-icon {
+	height: var(--edra-icon-size);
+	width: var(--edra-icon-size);
+	color: var(--edra-icon-color);
+}
+
+.separator {
+	width: var(--edra-separator-width);
+	/* background-color: var(--edra-separator-color); */
+}
+
+.edra-media-placeholder-wrapper {
+	width: 100%;
+	height: fit-content;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0.5rem 0;
+}
+
+.edra-media-placeholder-content {
+	height: 100%;
+	width: 100%;
+	padding: 1rem;
+	padding-right: 0;
+	background-color: var(--edra-button-bg-color);
+	border-radius: var(--edra-button-border-radius);
+	border: 1px solid var(--edra-border-color);
+	display: inline-flex;
+	align-items: center;
+	justify-content: start;
+	gap: 1rem;
+	cursor: pointer;
+}
+
+.edra-media-placeholder-icon {
+	height: var(--edra-icon-size);
+	width: var(--edra-icon-size);
+	color: var(--edra-icon-color);
+}
+
+.edra-media-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	border-radius: 0.5rem;
+	border: 2px solid transparent;
+	margin: 1rem 0;
+}
+
+.edra-media-container.selected {
+	border-color: #808080;
+}
+
+.edra-media-container.align-left {
+	left: 0;
+	transform: translateX(0);
+}
+
+.edra-media-container.align-center {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.edra-media-container.align-right {
+	left: 100%;
+	transform: translateX(-100%);
+}
+
+.edra-media-group {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	border-radius: 0.5rem;
+}
+
+.edra-media-content {
+	margin: 0;
+	object-fit: cover;
+}
+
+.edra-media-caption {
+	margin: 0.125rem 0;
+	width: 100%;
+	background-color: transparent;
+	text-align: center;
+	font-size: 0.85rem;
+	font-weight: 500;
+	color: #808080;
+	outline: none;
+	border: none;
+}
+
+.edra-media-resize-handle {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	z-index: 20;
+	display: flex;
+	width: 0.5rem;
+	cursor: col-resize;
+	align-items: center;
+}
+
+.edra-media-resize-handle-left {
+	left: 0;
+	justify-content: flex-start;
+	padding: 0.5rem;
+}
+
+.edra-media-resize-handle-right {
+	right: 0;
+	justify-content: flex-end;
+	padding: 0.5rem;
+}
+
+.edra-media-resize-indicator {
+	z-index: 20;
+	height: 3rem;
+	width: 0.25rem;
+	border-radius: 12px;
+	border: 1px solid #808080;
+	background-color: #808080;
+	opacity: 0;
+	transition: opacity 0.5s;
+}
+
+.edra-media-group:hover .edra-media-resize-indicator {
+	opacity: 0.5;
+}
+
+.edra-media-toolbar {
+	position: absolute;
+	right: 16px;
+	top: 8px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	border-radius: 4px;
+	border: 1px solid #808080;
+	background-color: #80808075;
+	padding: 4px;
+	opacity: 0;
+	transition: opacity 0.2s;
+}
+
+.edra-media-toolbar-audio {
+	top: -32px;
+}
+
+.edra-media-group:hover .edra-media-toolbar,
+.edra-media-toolbar.visible {
+	opacity: 1;
+}
+
+.edra-toolbar-button {
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: none;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	color: currentColor;
+}
+
+.edra-toolbar-button:hover {
+	background-color: #80808030;
+}
+
+.edra-toolbar-button.active {
+	background-color: #80808080;
+}
+
+.edra-destructive {
+	color: red;
+}
+
+.bubble-menu-wrapper {
+	z-index: 100;
+	width: fit-content;
+	padding: 0.25rem;
+	border: 1px solid var(--edra-border-color);
+	border-radius: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	background-color: white;
+	backdrop-filter: blur(8px);
+}
+
+html.dark .bubble-menu-wrapper {
+	background-color: black;
+}
+
+.bubble-menu-wrapper input {
+	padding: 0.5rem;
+	border: none;
+	max-width: 10rem;
+	background: none;
+	margin-right: 0.5rem;
+	width: fit-content;
+}
+
+input.valid {
+	border: 1px solid green;
+}
+input:focus {
+	outline: none;
+}
+
+input.invalid {
+	border: 1px solid red;
+}
+
+.edra-slash-command-list {
+	margin-bottom: 2rem;
+	max-height: min(80vh, 20rem);
+	width: 12rem;
+	overflow: auto;
+	scroll-behavior: smooth;
+	border-radius: 0.5rem;
+	border: 1px solid var(--edra-border-color);
+	padding: 0.5rem;
+	backdrop-filter: blur(8px);
+}
+
+.edra-slash-command-list-title {
+	margin: 0.5rem;
+	user-select: none;
+	font-size: 0.875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.025em;
+}
+
+.edra-slash-command-list-item {
+	display: flex;
+	height: fit-content;
+	width: 100%;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 0.5rem;
+	padding: 0.5rem;
+	background: none;
+	border: none;
+	margin: 0.25rem 0;
+	border-radius: 0.25rem;
+}
+.edra-slash-command-list-item.active {
+	background-color: var(--edra-border-color);
+}
+
+.edra-search-and-replace {
+	display: flex;
+	align-items: center;
+	gap: var(--edra-gap);
+}
+
+.edra-search-and-replace-content {
+	display: flex;
+	align-items: center;
+	gap: var(--edra-gap);
+}
+
+.edra-search-and-replace-content input {
+	max-width: 10rem;
+	background: none;
+	width: 15rem;
+	border: 1px solid var(--edra-border-color);
+	border-radius: var(--edra-button-border-radius);
+	padding: 0.2rem 0.5rem;
+}
diff --git a/src/lib/components/edra/headless/toolbar.svelte b/src/lib/components/edra/headless/toolbar.svelte
new file mode 100644
index 0000000..ae30cc9
--- /dev/null
+++ b/src/lib/components/edra/headless/toolbar.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core'
+	import { commands } from '../commands/commands.js'
+	import EdraToolBarIcon from './components/EdraToolBarIcon.svelte'
+	import SearchAndReplace from './components/SearchAndReplace.svelte'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		class?: string
+		editor: Editor
+		children?: Snippet<[]>
+	}
+
+	const { class: className = '', editor, children }: Props = $props()
+
+	// Special components that are handled separately
+	let showSearchAndReplace = $state(false)
+	const colorCommands = commands.colors.commands
+	const fontCommands = commands.fonts.commands
+	const excludedCommands = ['colors', 'fonts']
+</script>
+
+<div class={`edra-toolbar ${className}`}>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if !showSearchAndReplace}
+			{#each Object.keys(commands).filter((key) => !excludedCommands.includes(key)) as keys}
+				{@const groups = commands[keys].commands}
+				{#each groups as command}
+					<EdraToolBarIcon {command} {editor} />
+				{/each}
+				<span class="separator"></span>
+			{/each}
+
+			<EdraToolBarIcon command={fontCommands[0]} {editor} />
+			<span>{editor.getAttributes('textStyle').fontSize ?? '16px'}</span>
+			<EdraToolBarIcon command={fontCommands[1]} {editor} />
+
+			<span class="separator"></span>
+
+			<EdraToolBarIcon
+				command={colorCommands[0]}
+				{editor}
+				style={`color: ${editor.getAttributes('textStyle').color};`}
+				onclick={() => {
+					const color = editor.getAttributes('textStyle').color
+					const hasColor = editor.isActive('textStyle', { color })
+					if (hasColor) {
+						editor.chain().focus().unsetColor().run()
+					} else {
+						const color = prompt('Enter the color of the text:')
+						if (color !== null) {
+							editor.chain().focus().setColor(color).run()
+						}
+					}
+				}}
+			/>
+			<EdraToolBarIcon
+				command={colorCommands[1]}
+				{editor}
+				style={`background-color: ${editor.getAttributes('highlight').color};`}
+				onclick={() => {
+					const hasHightlight = editor.isActive('highlight')
+					if (hasHightlight) {
+						editor.chain().focus().unsetHighlight().run()
+					} else {
+						const color = prompt('Enter the color of the highlight:')
+						if (color !== null) {
+							editor.chain().focus().setHighlight({ color }).run()
+						}
+					}
+				}}
+			/>
+		{/if}
+		<SearchAndReplace {editor} bind:show={showSearchAndReplace} />
+	{/if}
+</div>
diff --git a/src/lib/components/edra/onedark.css b/src/lib/components/edra/onedark.css
new file mode 100644
index 0000000..3399ae4
--- /dev/null
+++ b/src/lib/components/edra/onedark.css
@@ -0,0 +1,176 @@
+/* One Dark and Light Theme for Highlight.js using Pure CSS */
+/* Light Theme (Default) */
+.tiptap pre code {
+	color: #383a42;
+}
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+	font-style: italic;
+	color: #a0a1a7;
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+	color: #e45649;
+}
+
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+	color: #986801;
+}
+
+/* Yellow */
+.hljs-attribute {
+	color: #c18401;
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+	color: #50a14f;
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+	color: #4078f2;
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+	color: #a626a4;
+}
+
+/* Cyan */
+.hljs-emphasis {
+	font-style: italic;
+	color: #0184bc;
+}
+
+.hljs-strong {
+	font-weight: bold;
+}
+
+/* Base styles */
+.hljs-doctag,
+.hljs-formula {
+	color: #a626a4;
+}
+
+.hljs-attr,
+.hljs-subst {
+	color: #383a42;
+}
+
+/* Line highlights */
+.hljs-addition {
+	background-color: #e6ffed;
+}
+
+.hljs-deletion {
+	background-color: #ffeef0;
+}
+
+/* Dark Theme (All dark styles consolidated in one media query) */
+html.dark {
+	.tiptap pre code {
+		color: #abb2bf;
+	}
+
+	/* Comment */
+	.hljs-comment,
+	.hljs-quote {
+		color: #5c6370;
+	}
+
+	/* Red */
+	.hljs-variable,
+	.hljs-template-variable,
+	.hljs-tag,
+	.hljs-name,
+	.hljs-selector-id,
+	.hljs-selector-class,
+	.hljs-regexp,
+	.hljs-deletion {
+		color: #e06c75;
+	}
+
+	/* Orange */
+	.hljs-number,
+	.hljs-built_in,
+	.hljs-literal,
+	.hljs-type,
+	.hljs-params,
+	.hljs-meta,
+	.hljs-link {
+		color: #d19a66;
+	}
+
+	/* Yellow */
+	.hljs-attribute {
+		color: #e5c07b;
+	}
+
+	/* Green */
+	.hljs-string,
+	.hljs-symbol,
+	.hljs-bullet,
+	.hljs-addition {
+		color: #98c379;
+	}
+
+	/* Blue */
+	.hljs-title,
+	.hljs-section {
+		color: #61afef;
+	}
+
+	/* Purple */
+	.hljs-keyword,
+	.hljs-selector-tag {
+		color: #c678dd;
+	}
+
+	/* Cyan */
+	.hljs-emphasis {
+		color: #56b6c2;
+	}
+
+	/* Base styles */
+	.hljs-doctag,
+	.hljs-formula {
+		color: #c678dd;
+	}
+
+	.hljs-attr,
+	.hljs-subst {
+		color: #abb2bf;
+	}
+
+	/* Line highlights */
+	.hljs-addition {
+		background-color: #283428;
+	}
+
+	.hljs-deletion {
+		background-color: #342828;
+	}
+}
diff --git a/src/lib/components/edra/svelte-renderer.ts b/src/lib/components/edra/svelte-renderer.ts
new file mode 100644
index 0000000..1a088ca
--- /dev/null
+++ b/src/lib/components/edra/svelte-renderer.ts
@@ -0,0 +1,75 @@
+import { flushSync, mount, unmount } from 'svelte'
+import type { Editor, NodeViewProps } from '@tiptap/core'
+
+interface RendererOptions<P extends Record<string, unknown>> {
+	editor: Editor
+	props: P
+}
+
+type App = ReturnType<typeof mount>
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class SvelteRenderer<R = unknown, P extends Record<string, any> = object> {
+	id: string
+	component: App
+	editor: Editor
+	props: P
+	element: HTMLElement
+	ref: R | null = null
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	mnt: Record<any, any> | null = null
+
+	constructor(component: App, { props, editor }: RendererOptions<P>) {
+		this.id = Math.floor(Math.random() * 0xffffffff).toString()
+		this.component = component
+		this.props = props
+		this.editor = editor
+
+		this.element = document.createElement('div')
+		this.element.classList.add('svelte-renderer')
+
+		if (this.editor.isInitialized) {
+			// On first render, we need to flush the render synchronously
+			// Renders afterwards can be async, but this fixes a cursor positioning issue
+			flushSync(() => {
+				this.render()
+			})
+		} else {
+			this.render()
+		}
+	}
+
+	render(): void {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		this.mnt = mount(this.component as any, {
+			target: this.element,
+			props: {
+				props: this.props
+			}
+		})
+	}
+
+	updateProps(props: Partial<NodeViewProps>): void {
+		Object.assign(this.props, props)
+		this.destroy()
+		this.render()
+	}
+
+	updateAttributes(attributes: Record<string, string>): void {
+		Object.keys(attributes).forEach((key) => {
+			this.element.setAttribute(key, attributes[key])
+		})
+		this.destroy()
+		this.render()
+	}
+
+	destroy(): void {
+		if (this.mnt) {
+			unmount(this.mnt)
+		} else {
+			unmount(this.component)
+		}
+	}
+}
+
+export default SvelteRenderer
diff --git a/src/lib/components/edra/utils.ts b/src/lib/components/edra/utils.ts
new file mode 100644
index 0000000..4e89bd5
--- /dev/null
+++ b/src/lib/components/edra/utils.ts
@@ -0,0 +1,151 @@
+import type { Content, Editor } from '@tiptap/core'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import type { EditorState, Transaction } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+import { browser } from '$app/environment'
+import type { Snippet } from 'svelte'
+
+export interface ShouldShowProps {
+	editor: Editor
+	element: HTMLElement
+	view: EditorView
+	state: EditorState
+	oldState?: EditorState
+	from: number
+	to: number
+}
+
+export const findColors = (doc: Node) => {
+	const hexColor = /(#[0-9a-f]{3,6})\b/gi
+	const decorations: Decoration[] = []
+
+	doc.descendants((node, position) => {
+		if (!node.text) {
+			return
+		}
+
+		Array.from(node.text.matchAll(hexColor)).forEach((match) => {
+			const color = match[0]
+			const index = match.index || 0
+			const from = position + index
+			const to = from + color.length
+			const decoration = Decoration.inline(from, to, {
+				class: 'color',
+				style: `--color: ${color}`
+			})
+
+			decorations.push(decoration)
+		})
+	})
+
+	return DecorationSet.create(doc, decorations)
+}
+
+/**
+ * Check if the current browser is mac or not
+ */
+export const isMac = browser
+	? navigator.userAgent.includes('Macintosh') || navigator.userAgent.includes('Mac OS X')
+	: false
+
+/**
+ * Dupilcate content at the current selection
+ * @param editor Editor instance
+ * @param node Node to be duplicated
+ */
+export const duplicateContent = (editor: Editor, node: Node) => {
+	const { view } = editor
+	const { state } = view
+	const { selection } = state
+
+	editor
+		.chain()
+		.insertContentAt(selection.to, node.toJSON(), {
+			updateSelection: true
+		})
+		.focus(selection.to)
+		.run()
+}
+
+/**
+ * Function to handle paste event of an image
+ * @param editor Editor - editor instance
+ * @param maxSize number - max size of the image to be pasted in MB, default is 2MB
+ */
+export function getHandlePaste(editor: Editor, maxSize: number = 2) {
+	return (view: EditorView, event: ClipboardEvent) => {
+		const item = event.clipboardData?.items[0]
+
+		if (item?.type.indexOf('image') !== 0) {
+			return
+		}
+
+		const file = item.getAsFile()
+		if (file === null || file.size === undefined) return
+		const filesize = (file?.size / 1024 / 1024).toFixed(4)
+
+		if (filesize && Number(filesize) > maxSize) {
+			window.alert(`too large image! filesize: ${filesize} mb`)
+			return
+		}
+
+		const reader = new FileReader()
+		reader.readAsDataURL(file)
+		reader.onload = (e) => {
+			if (e.target?.result) {
+				editor.commands.setImage({ src: e.target.result as string })
+			}
+		}
+	}
+}
+
+/**
+ * Sets focus on the editor and moves the cursor to the clicked text position,
+ * defaulting to the end of the document if the click is outside any text.
+ *
+ * @param editor - Editor instance
+ * @param event - Optional MouseEvent or KeyboardEvent triggering the focus
+ */
+export function focusEditor(editor: Editor | undefined, event?: MouseEvent | KeyboardEvent) {
+	if (!editor) return
+	// Check if there is a text selection already (i.e. a non-empty selection)
+	const selection = window.getSelection()
+	if (selection && selection.toString().length > 0) {
+		// Focus the editor without modifying selection
+		editor.chain().focus().run()
+		return
+	}
+	if (event instanceof MouseEvent) {
+		const { clientX, clientY } = event
+		const pos = editor.view.posAtCoords({ left: clientX, top: clientY })?.pos
+		if (pos == null) {
+			// If not a valid position, move cursor to the end of the document
+			const endPos = editor.state.doc.content.size
+			editor.chain().focus().setTextSelection(endPos).run()
+		} else {
+			editor.chain().focus().setTextSelection(pos).run()
+		}
+	} else {
+		editor.chain().focus().run()
+	}
+}
+
+/**
+ * Props for Edra's editor component
+ */
+export interface EdraProps {
+	class?: string
+	content?: Content
+	editable?: boolean
+	limit?: number
+	editor?: Editor
+	showSlashCommands?: boolean
+	showLinkBubbleMenu?: boolean
+	showTableBubbleMenu?: boolean
+	/**
+	 * Callback function to be called when the content is updated
+	 * @param content
+	 */
+	onUpdate?: (props: { editor: Editor; transaction: Transaction }) => void
+	children?: Snippet<[]>
+}
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index e28131b..9cb9fdf 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -12,14 +12,16 @@ export interface Post {
 	content: string
 	excerpt?: string
 	images?: string[]
-	link?: {
-		url: string
-		title?: string
-		description?: string
-		image?: string
-		favicon?: string
-		siteName?: string
-	} | string
+	link?:
+		| {
+				url: string
+				title?: string
+				description?: string
+				image?: string
+				favicon?: string
+				siteName?: string
+		  }
+		| string
 }
 
 const postsDirectory = path.join(process.cwd(), 'src/lib/posts')
diff --git a/src/lib/posts/auto-metadata-link.md b/src/lib/posts/auto-metadata-link.md
index e681365..970b55a 100644
--- a/src/lib/posts/auto-metadata-link.md
+++ b/src/lib/posts/auto-metadata-link.md
@@ -1,9 +1,9 @@
 ---
-type: "link"
-date: "2024-01-22T09:00:00Z"
-slug: "auto-metadata-link"
+type: 'link'
+date: '2024-01-22T09:00:00Z'
+slug: 'auto-metadata-link'
 published: true
-link: "https://github.com/sveltejs/kit"
+link: 'https://github.com/sveltejs/kit'
 ---
 
-Check out the SvelteKit repository - the framework that powers this blog!
\ No newline at end of file
+Check out the SvelteKit repository - the framework that powers this blog!
diff --git a/src/lib/posts/beautiful-sunset-gallery.md b/src/lib/posts/beautiful-sunset-gallery.md
index c093c1e..4d55809 100644
--- a/src/lib/posts/beautiful-sunset-gallery.md
+++ b/src/lib/posts/beautiful-sunset-gallery.md
@@ -1,15 +1,15 @@
 ---
-title: "Beautiful Sunset Gallery"
-type: "image"
-date: "2024-01-19T18:30:00Z"
-slug: "beautiful-sunset-gallery"
+title: 'Beautiful Sunset Gallery'
+type: 'image'
+date: '2024-01-19T18:30:00Z'
+slug: 'beautiful-sunset-gallery'
 published: true
 images:
-  - "https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?w=800&h=600&fit=crop"
-  - "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop"
-  - "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=800&h=600&fit=crop"
-  - "https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=800&h=600&fit=crop"
-  - "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&h=600&fit=crop"
+  - 'https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?w=800&h=600&fit=crop'
+  - 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop'
+  - 'https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=800&h=600&fit=crop'
+  - 'https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=800&h=600&fit=crop'
+  - 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&h=600&fit=crop'
 ---
 
-Caught these stunning sunsets during my recent travels. Each one tells its own story of endings and beginnings.
\ No newline at end of file
+Caught these stunning sunsets during my recent travels. Each one tells its own story of endings and beginnings.
diff --git a/src/lib/posts/interesting-article.md b/src/lib/posts/interesting-article.md
index 2dae8c8..b287563 100644
--- a/src/lib/posts/interesting-article.md
+++ b/src/lib/posts/interesting-article.md
@@ -1,14 +1,14 @@
 ---
-title: "Interesting Read"
-type: "link"
-date: "2024-01-20T10:00:00Z"
-slug: "interesting-article"
+title: 'Interesting Read'
+type: 'link'
+date: '2024-01-20T10:00:00Z'
+slug: 'interesting-article'
 published: true
 link:
-  url: "https://example.com/article"
-  title: "The Future of Web Development"
-  description: "An in-depth look at emerging trends and technologies shaping the future of web development."
-  siteName: "Example Blog"
+  url: 'https://example.com/article'
+  title: 'The Future of Web Development'
+  description: 'An in-depth look at emerging trends and technologies shaping the future of web development.'
+  siteName: 'Example Blog'
 ---
 
-This article provides great insights into where web development is heading. The discussion about WebAssembly and edge computing is particularly fascinating.
\ No newline at end of file
+This article provides great insights into where web development is heading. The discussion about WebAssembly and edge computing is particularly fascinating.
diff --git a/src/lib/posts/minimalist-workspace.md b/src/lib/posts/minimalist-workspace.md
index f1030a7..ee7fb86 100644
--- a/src/lib/posts/minimalist-workspace.md
+++ b/src/lib/posts/minimalist-workspace.md
@@ -1,10 +1,10 @@
 ---
-type: "image"
-date: "2024-01-17T10:00:00Z"
-slug: "minimalist-workspace"
+type: 'image'
+date: '2024-01-17T10:00:00Z'
+slug: 'minimalist-workspace'
 published: true
 images:
-  - "https://images.unsplash.com/photo-1555212697-194d092e3b8f?w=800&h=600&fit=crop"
+  - 'https://images.unsplash.com/photo-1555212697-194d092e3b8f?w=800&h=600&fit=crop'
 ---
 
-My workspace this morning. Sometimes less really is more.
\ No newline at end of file
+My workspace this morning. Sometimes less really is more.
diff --git a/src/lib/schemas/project.ts b/src/lib/schemas/project.ts
new file mode 100644
index 0000000..957dc8a
--- /dev/null
+++ b/src/lib/schemas/project.ts
@@ -0,0 +1,39 @@
+import { z } from 'zod'
+
+export const projectSchema = z
+	.object({
+		title: z.string().min(1, 'Title is required'),
+		description: z.string().optional(),
+		year: z
+			.number()
+			.min(1990)
+			.max(new Date().getFullYear() + 1),
+		client: z.string().optional(),
+		externalUrl: z.string().url().optional().or(z.literal('')),
+		backgroundColor: z
+			.string()
+			.regex(/^#[0-9A-Fa-f]{6}$/)
+			.optional()
+			.or(z.literal('')),
+		highlightColor: z
+			.string()
+			.regex(/^#[0-9A-Fa-f]{6}$/)
+			.optional()
+			.or(z.literal('')),
+		status: z.enum(['draft', 'published', 'list-only', 'password-protected']),
+		password: z.string().optional()
+	})
+	.refine(
+		(data) => {
+			if (data.status === 'password-protected') {
+				return data.password && data.password.trim().length > 0
+			}
+			return true
+		},
+		{
+			message: 'Password is required when status is password-protected',
+			path: ['password']
+		}
+	)
+
+export type ProjectSchema = z.infer<typeof projectSchema>
diff --git a/src/lib/server/api-utils.ts b/src/lib/server/api-utils.ts
new file mode 100644
index 0000000..8273860
--- /dev/null
+++ b/src/lib/server/api-utils.ts
@@ -0,0 +1,99 @@
+import type { RequestEvent } from '@sveltejs/kit'
+
+// Response helpers
+export function jsonResponse(data: any, status = 200): Response {
+	return new Response(JSON.stringify(data), {
+		status,
+		headers: { 'Content-Type': 'application/json' }
+	})
+}
+
+export function errorResponse(message: string, status = 400): Response {
+	return jsonResponse({ error: message }, status)
+}
+
+// Pagination helper
+export interface PaginationParams {
+	page?: number
+	limit?: number
+}
+
+export function getPaginationParams(url: URL): PaginationParams {
+	const page = Math.max(1, parseInt(url.searchParams.get('page') || '1'))
+	const limit = Math.min(100, Math.max(1, parseInt(url.searchParams.get('limit') || '20')))
+
+	return { page, limit }
+}
+
+export function getPaginationMeta(total: number, page: number, limit: number) {
+	const totalPages = Math.ceil(total / limit)
+
+	return {
+		total,
+		page,
+		limit,
+		totalPages,
+		hasNext: page < totalPages,
+		hasPrev: page > 1
+	}
+}
+
+// Status validation
+export const VALID_STATUSES = ['draft', 'published'] as const
+export type Status = (typeof VALID_STATUSES)[number]
+
+export function isValidStatus(status: any): status is Status {
+	return VALID_STATUSES.includes(status)
+}
+
+// Post type validation
+export const VALID_POST_TYPES = ['post', 'essay'] as const
+export type PostType = (typeof VALID_POST_TYPES)[number]
+
+export function isValidPostType(type: any): type is PostType {
+	return VALID_POST_TYPES.includes(type)
+}
+
+// Request body parser with error handling
+export async function parseRequestBody<T>(request: Request): Promise<T | null> {
+	try {
+		const body = await request.json()
+		return body as T
+	} catch (error) {
+		return null
+	}
+}
+
+// Date helpers
+export function toISOString(date: Date | string | null | undefined): string | null {
+	if (!date) return null
+	return new Date(date).toISOString()
+}
+
+// Basic auth check (temporary until proper auth is implemented)
+export function checkAdminAuth(event: RequestEvent): boolean {
+	const authHeader = event.request.headers.get('Authorization')
+	if (!authHeader) return false
+
+	const [type, credentials] = authHeader.split(' ')
+	if (type !== 'Basic') return false
+
+	try {
+		const decoded = atob(credentials)
+		const [username, password] = decoded.split(':')
+
+		// For now, simple password check
+		// TODO: Implement proper authentication
+		const adminPassword = process.env.ADMIN_PASSWORD || 'changeme'
+		return username === 'admin' && password === adminPassword
+	} catch {
+		return false
+	}
+}
+
+// CORS headers for API routes
+export const corsHeaders = {
+	'Access-Control-Allow-Origin': '*', // Update this in production
+	'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+	'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+}
diff --git a/src/lib/server/cloudinary.ts b/src/lib/server/cloudinary.ts
new file mode 100644
index 0000000..a4d33ec
--- /dev/null
+++ b/src/lib/server/cloudinary.ts
@@ -0,0 +1,245 @@
+import { v2 as cloudinary } from 'cloudinary'
+import type { UploadApiResponse, UploadApiErrorResponse } from 'cloudinary'
+import { logger } from './logger'
+import { uploadFileLocally } from './local-storage'
+import { dev } from '$app/environment'
+
+// Configure Cloudinary
+cloudinary.config({
+	cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+	api_key: process.env.CLOUDINARY_API_KEY,
+	api_secret: process.env.CLOUDINARY_API_SECRET,
+	secure: true
+})
+
+// Check if Cloudinary is configured
+export function isCloudinaryConfigured(): boolean {
+	return !!(
+		process.env.CLOUDINARY_CLOUD_NAME &&
+		process.env.CLOUDINARY_API_KEY &&
+		process.env.CLOUDINARY_API_SECRET
+	)
+}
+
+// Upload options for different asset types
+const uploadPresets = {
+	// For general media uploads (blog posts, project images)
+	media: {
+		folder: 'jedmund/media',
+		resource_type: 'auto' as const,
+		allowed_formats: ['jpg', 'jpeg', 'png', 'webp', 'gif', 'svg'],
+		transformation: [{ quality: 'auto:good' }, { fetch_format: 'auto' }]
+	},
+
+	// For photo albums
+	photos: {
+		folder: 'jedmund/photos',
+		resource_type: 'image' as const,
+		allowed_formats: ['jpg', 'jpeg', 'png', 'webp'],
+		transformation: [{ quality: 'auto:best' }, { fetch_format: 'auto' }]
+	},
+
+	// For project galleries
+	projects: {
+		folder: 'jedmund/projects',
+		resource_type: 'image' as const,
+		allowed_formats: ['jpg', 'jpeg', 'png', 'webp', 'svg'],
+		transformation: [{ quality: 'auto:good' }, { fetch_format: 'auto' }]
+	}
+}
+
+// Image size variants (2025-appropriate sizes)
+export const imageSizes = {
+	thumbnail: { width: 800, height: 600, crop: 'fill' as const }, // Much larger thumbnails for modern displays
+	small: { width: 600, quality: 'auto:good' as const },
+	medium: { width: 1200, quality: 'auto:good' as const },
+	large: { width: 1920, quality: 'auto:good' as const },
+	xlarge: { width: 2560, quality: 'auto:good' as const }
+}
+
+export interface UploadResult {
+	success: boolean
+	publicId?: string
+	url?: string
+	secureUrl?: string
+	thumbnailUrl?: string
+	width?: number
+	height?: number
+	format?: string
+	size?: number
+	error?: string
+}
+
+// Upload a single file
+export async function uploadFile(
+	file: File,
+	type: 'media' | 'photos' | 'projects' = 'media',
+	customOptions?: any
+): Promise<UploadResult> {
+	try {
+		// Use local storage in development or when Cloudinary is not configured
+		if (dev || !isCloudinaryConfigured()) {
+			logger.info('Using local storage for file upload')
+			const localResult = await uploadFileLocally(file, type)
+
+			if (!localResult.success) {
+				return {
+					success: false,
+					error: localResult.error || 'Local upload failed'
+				}
+			}
+
+			return {
+				success: true,
+				publicId: `local/${localResult.filename}`,
+				url: localResult.url,
+				secureUrl: localResult.url,
+				thumbnailUrl: localResult.thumbnailUrl,
+				width: localResult.width,
+				height: localResult.height,
+				format: file.type.split('/')[1],
+				size: localResult.size
+			}
+		}
+
+		// Convert File to buffer
+		const arrayBuffer = await file.arrayBuffer()
+		const buffer = Buffer.from(arrayBuffer)
+
+		// Upload to Cloudinary
+		const result = await new Promise<UploadApiResponse>((resolve, reject) => {
+			const uploadStream = cloudinary.uploader.upload_stream(
+				{
+					...uploadPresets[type],
+					...customOptions,
+					public_id: `${Date.now()}-${file.name.replace(/\.[^/.]+$/, '')}`
+				},
+				(error, result) => {
+					if (error) reject(error)
+					else if (result) resolve(result)
+					else reject(new Error('Upload failed'))
+				}
+			)
+
+			uploadStream.end(buffer)
+		})
+
+		// Generate thumbnail URL
+		const thumbnailUrl = cloudinary.url(result.public_id, {
+			...imageSizes.thumbnail,
+			secure: true
+		})
+
+		logger.mediaUpload(file.name, file.size, file.type, true)
+
+		return {
+			success: true,
+			publicId: result.public_id,
+			url: result.url,
+			secureUrl: result.secure_url,
+			thumbnailUrl,
+			width: result.width,
+			height: result.height,
+			format: result.format,
+			size: result.bytes
+		}
+	} catch (error) {
+		logger.error('Cloudinary upload failed', error as Error)
+		logger.mediaUpload(file.name, file.size, file.type, false)
+
+		return {
+			success: false,
+			error: error instanceof Error ? error.message : 'Upload failed'
+		}
+	}
+}
+
+// Upload multiple files
+export async function uploadFiles(
+	files: File[],
+	type: 'media' | 'photos' | 'projects' = 'media'
+): Promise<UploadResult[]> {
+	const uploadPromises = files.map((file) => uploadFile(file, type))
+	return Promise.all(uploadPromises)
+}
+
+// Delete a file from Cloudinary
+export async function deleteFile(publicId: string): Promise<boolean> {
+	try {
+		if (!isCloudinaryConfigured()) {
+			throw new Error('Cloudinary is not configured')
+		}
+
+		const result = await cloudinary.uploader.destroy(publicId)
+		return result.result === 'ok'
+	} catch (error) {
+		logger.error('Cloudinary delete failed', error as Error)
+		return false
+	}
+}
+
+// Generate optimized URL for an image
+export function getOptimizedUrl(
+	publicId: string,
+	options?: {
+		width?: number
+		height?: number
+		quality?: string
+		format?: string
+		crop?: string
+	}
+): string {
+	return cloudinary.url(publicId, {
+		secure: true,
+		transformation: [
+			{
+				quality: options?.quality || 'auto:good',
+				fetch_format: options?.format || 'auto',
+				...(options?.width && { width: options.width }),
+				...(options?.height && { height: options.height }),
+				...(options?.crop && { crop: options.crop })
+			}
+		]
+	})
+}
+
+// Get responsive image URLs for different screen sizes
+export function getResponsiveUrls(publicId: string): Record<string, string> {
+	return {
+		thumbnail: getOptimizedUrl(publicId, imageSizes.thumbnail),
+		small: getOptimizedUrl(publicId, { width: imageSizes.small.width }),
+		medium: getOptimizedUrl(publicId, { width: imageSizes.medium.width }),
+		large: getOptimizedUrl(publicId, { width: imageSizes.large.width }),
+		xlarge: getOptimizedUrl(publicId, { width: imageSizes.xlarge.width }),
+		original: cloudinary.url(publicId, { secure: true })
+	}
+}
+
+// Smart image size selection based on container width
+export function getSmartImageUrl(publicId: string, containerWidth: number, retina = true): string {
+	// Account for retina displays
+	const targetWidth = retina ? containerWidth * 2 : containerWidth
+
+	// Select appropriate size
+	if (targetWidth <= 600) {
+		return getOptimizedUrl(publicId, { width: imageSizes.small.width })
+	} else if (targetWidth <= 1200) {
+		return getOptimizedUrl(publicId, { width: imageSizes.medium.width })
+	} else if (targetWidth <= 1920) {
+		return getOptimizedUrl(publicId, { width: imageSizes.large.width })
+	} else {
+		return getOptimizedUrl(publicId, { width: imageSizes.xlarge.width })
+	}
+}
+
+// Extract public ID from Cloudinary URL
+export function extractPublicId(url: string): string | null {
+	try {
+		// Cloudinary URLs typically follow this pattern:
+		// https://res.cloudinary.com/{cloud_name}/image/upload/{version}/{public_id}.{format}
+		const match = url.match(/\/v\d+\/(.+)\.[a-zA-Z]+$/)
+		return match ? match[1] : null
+	} catch {
+		return null
+	}
+}
diff --git a/src/lib/server/database.ts b/src/lib/server/database.ts
new file mode 100644
index 0000000..7cca4bc
--- /dev/null
+++ b/src/lib/server/database.ts
@@ -0,0 +1,95 @@
+import { PrismaClient } from '@prisma/client'
+import { dev } from '$app/environment'
+
+// Prevent multiple instances of Prisma Client in development
+const globalForPrisma = globalThis as unknown as {
+	prisma: PrismaClient | undefined
+}
+
+export const prisma =
+	globalForPrisma.prisma ??
+	new PrismaClient({
+		log: dev ? ['query', 'error', 'warn'] : ['error']
+	})
+
+if (dev) globalForPrisma.prisma = prisma
+
+// Utility function to handle database errors
+export function handleDatabaseError(error: unknown): Response {
+	console.error('Database error:', error)
+
+	if (error instanceof Error) {
+		// Check for unique constraint violations
+		if (error.message.includes('Unique constraint')) {
+			return new Response(
+				JSON.stringify({
+					error: 'A record with this identifier already exists'
+				}),
+				{
+					status: 409,
+					headers: { 'Content-Type': 'application/json' }
+				}
+			)
+		}
+
+		// Check for foreign key violations
+		if (error.message.includes('Foreign key constraint')) {
+			return new Response(
+				JSON.stringify({
+					error: 'Related record not found'
+				}),
+				{
+					status: 400,
+					headers: { 'Content-Type': 'application/json' }
+				}
+			)
+		}
+	}
+
+	// Generic error response
+	return new Response(
+		JSON.stringify({
+			error: 'An unexpected database error occurred'
+		}),
+		{
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		}
+	)
+}
+
+// Utility to create slugs from titles
+export function createSlug(title: string): string {
+	return title
+		.toLowerCase()
+		.trim()
+		.replace(/[^\w\s-]/g, '') // Remove special characters
+		.replace(/[\s_-]+/g, '-') // Replace spaces, underscores, hyphens with single hyphen
+		.replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
+}
+
+// Ensure unique slug by appending number if needed
+export async function ensureUniqueSlug(
+	slug: string,
+	model: 'project' | 'post' | 'album' | 'photo',
+	excludeId?: number
+): Promise<string> {
+	let uniqueSlug = slug
+	let counter = 1
+
+	while (true) {
+		const existingRecord = await prisma[model].findFirst({
+			where: {
+				slug: uniqueSlug,
+				...(excludeId ? { NOT: { id: excludeId } } : {})
+			}
+		})
+
+		if (!existingRecord) break
+
+		uniqueSlug = `${slug}-${counter}`
+		counter++
+	}
+
+	return uniqueSlug
+}
diff --git a/src/lib/server/local-storage.ts b/src/lib/server/local-storage.ts
new file mode 100644
index 0000000..9a856ab
--- /dev/null
+++ b/src/lib/server/local-storage.ts
@@ -0,0 +1,149 @@
+import { writeFile, mkdir } from 'fs/promises'
+import { existsSync } from 'fs'
+import path from 'path'
+import sharp from 'sharp'
+import { logger } from './logger'
+
+// Base directory for local uploads
+const UPLOAD_DIR = 'static/local-uploads'
+const PUBLIC_PATH = '/local-uploads'
+
+// Ensure upload directory exists
+async function ensureUploadDir(): Promise<void> {
+	const dirs = [
+		UPLOAD_DIR,
+		path.join(UPLOAD_DIR, 'media'),
+		path.join(UPLOAD_DIR, 'photos'),
+		path.join(UPLOAD_DIR, 'projects'),
+		path.join(UPLOAD_DIR, 'thumbnails')
+	]
+
+	for (const dir of dirs) {
+		if (!existsSync(dir)) {
+			await mkdir(dir, { recursive: true })
+		}
+	}
+}
+
+// Generate unique filename
+function generateFilename(originalName: string): string {
+	const timestamp = Date.now()
+	const random = Math.random().toString(36).substring(2, 8)
+	const ext = path.extname(originalName)
+	const name = path.basename(originalName, ext)
+	// Sanitize filename
+	const safeName = name.replace(/[^a-z0-9]/gi, '-').toLowerCase()
+	return `${timestamp}-${random}-${safeName}${ext}`
+}
+
+export interface LocalUploadResult {
+	success: boolean
+	filename?: string
+	url?: string
+	thumbnailUrl?: string
+	width?: number
+	height?: number
+	size?: number
+	error?: string
+}
+
+// Upload file locally (for development/testing)
+export async function uploadFileLocally(
+	file: File,
+	type: 'media' | 'photos' | 'projects' = 'media'
+): Promise<LocalUploadResult> {
+	try {
+		await ensureUploadDir()
+
+		// Generate unique filename
+		const filename = generateFilename(file.name)
+		const filepath = path.join(UPLOAD_DIR, type, filename)
+		const thumbnailPath = path.join(UPLOAD_DIR, 'thumbnails', `thumb-${filename}`)
+
+		// Convert File to buffer
+		const arrayBuffer = await file.arrayBuffer()
+		const buffer = Buffer.from(arrayBuffer)
+
+		// Process image with sharp to get dimensions
+		let width = 0
+		let height = 0
+
+		try {
+			const image = sharp(buffer)
+			const metadata = await image.metadata()
+			width = metadata.width || 0
+			height = metadata.height || 0
+
+			// Save original
+			await writeFile(filepath, buffer)
+
+			// Create thumbnail (800x600 for modern displays)
+			await image
+				.resize(800, 600, {
+					fit: 'cover',
+					position: 'center'
+				})
+				.jpeg({ quality: 85 }) // Good quality for larger thumbnails
+				.toFile(thumbnailPath)
+		} catch (imageError) {
+			// If sharp fails (e.g., for SVG), just save the original
+			logger.warn('Sharp processing failed, saving original only', imageError as Error)
+			await writeFile(filepath, buffer)
+		}
+
+		// Construct URLs
+		const url = `${PUBLIC_PATH}/${type}/${filename}`
+		const thumbnailUrl = `${PUBLIC_PATH}/thumbnails/thumb-${filename}`
+
+		logger.info('File uploaded locally', {
+			filename,
+			type,
+			size: file.size,
+			dimensions: `${width}x${height}`
+		})
+
+		return {
+			success: true,
+			filename,
+			url,
+			thumbnailUrl,
+			width,
+			height,
+			size: file.size
+		}
+	} catch (error) {
+		logger.error('Local upload failed', error as Error)
+		return {
+			success: false,
+			error: error instanceof Error ? error.message : 'Upload failed'
+		}
+	}
+}
+
+// Delete local file
+export async function deleteFileLocally(url: string): Promise<boolean> {
+	try {
+		// Extract path from URL
+		const relativePath = url.replace(PUBLIC_PATH, '')
+		const filepath = path.join(UPLOAD_DIR, relativePath)
+
+		// Check if file exists and delete
+		if (existsSync(filepath)) {
+			const { unlink } = await import('fs/promises')
+			await unlink(filepath)
+
+			// Try to delete thumbnail too
+			const filename = path.basename(filepath)
+			const thumbnailPath = path.join(UPLOAD_DIR, 'thumbnails', `thumb-${filename}`)
+			if (existsSync(thumbnailPath)) {
+				await unlink(thumbnailPath)
+			}
+
+			return true
+		}
+		return false
+	} catch (error) {
+		logger.error('Local delete failed', error as Error)
+		return false
+	}
+}
diff --git a/src/lib/server/logger.ts b/src/lib/server/logger.ts
new file mode 100644
index 0000000..82d297e
--- /dev/null
+++ b/src/lib/server/logger.ts
@@ -0,0 +1,135 @@
+import { dev } from '$app/environment'
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error'
+
+interface LogEntry {
+	level: LogLevel
+	message: string
+	timestamp: string
+	context?: Record<string, any>
+	error?: Error
+}
+
+class Logger {
+	private shouldLog(level: LogLevel): boolean {
+		// In development, log everything
+		if (dev) return true
+
+		// In production, only log warnings and errors
+		return level === 'warn' || level === 'error'
+	}
+
+	private formatLog(entry: LogEntry): string {
+		const parts = [`[${entry.timestamp}]`, `[${entry.level.toUpperCase()}]`, entry.message]
+
+		if (entry.context) {
+			parts.push(JSON.stringify(entry.context, null, 2))
+		}
+
+		if (entry.error) {
+			parts.push(`\nError: ${entry.error.message}`)
+			if (entry.error.stack) {
+				parts.push(`Stack: ${entry.error.stack}`)
+			}
+		}
+
+		return parts.join(' ')
+	}
+
+	private log(level: LogLevel, message: string, context?: Record<string, any>, error?: Error) {
+		if (!this.shouldLog(level)) return
+
+		const entry: LogEntry = {
+			level,
+			message,
+			timestamp: new Date().toISOString(),
+			context,
+			error
+		}
+
+		const formatted = this.formatLog(entry)
+
+		switch (level) {
+			case 'debug':
+			case 'info':
+				console.log(formatted)
+				break
+			case 'warn':
+				console.warn(formatted)
+				break
+			case 'error':
+				console.error(formatted)
+				break
+		}
+	}
+
+	debug(message: string, context?: Record<string, any>) {
+		this.log('debug', message, context)
+	}
+
+	info(message: string, context?: Record<string, any>) {
+		this.log('info', message, context)
+	}
+
+	warn(message: string, context?: Record<string, any>) {
+		this.log('warn', message, context)
+	}
+
+	error(message: string, error?: Error, context?: Record<string, any>) {
+		this.log('error', message, context, error)
+	}
+
+	// Log API requests
+	apiRequest(method: string, path: string, context?: Record<string, any>) {
+		this.info(`API Request: ${method} ${path}`, context)
+	}
+
+	// Log API responses
+	apiResponse(method: string, path: string, status: number, duration: number) {
+		const level = status >= 400 ? 'error' : 'info'
+		this.log(level, `API Response: ${method} ${path} - ${status} (${duration}ms)`, {
+			status,
+			duration
+		})
+	}
+
+	// Log database operations
+	dbQuery(operation: string, model: string, duration?: number, context?: Record<string, any>) {
+		this.debug(`DB Query: ${operation} on ${model}`, {
+			...context,
+			duration: duration ? `${duration}ms` : undefined
+		})
+	}
+
+	// Log media operations
+	mediaUpload(filename: string, size: number, mimeType: string, success: boolean) {
+		const level = success ? 'info' : 'error'
+		this.log(level, `Media Upload: ${filename}`, {
+			size: `${(size / 1024 / 1024).toFixed(2)} MB`,
+			mimeType,
+			success
+		})
+	}
+}
+
+export const logger = new Logger()
+
+// Middleware to log API requests
+export function createRequestLogger() {
+	return (event: any) => {
+		const start = Date.now()
+		const { method, url } = event.request
+		const path = new URL(url).pathname
+
+		logger.apiRequest(method, path, {
+			headers: Object.fromEntries(event.request.headers),
+			ip: event.getClientAddress()
+		})
+
+		// Log response after it's sent
+		event.locals.logResponse = (status: number) => {
+			const duration = Date.now() - start
+			logger.apiResponse(method, path, status, duration)
+		}
+	}
+}
diff --git a/src/lib/server/media-usage.ts b/src/lib/server/media-usage.ts
new file mode 100644
index 0000000..d5dfa79
--- /dev/null
+++ b/src/lib/server/media-usage.ts
@@ -0,0 +1,262 @@
+import { prisma } from './database.js'
+
+export interface MediaUsageReference {
+	mediaId: number
+	contentType: 'project' | 'post' | 'album'
+	contentId: number
+	fieldName: string
+}
+
+export interface MediaUsageDisplay {
+	contentType: string
+	contentId: number
+	contentTitle: string
+	fieldName: string
+	fieldDisplayName: string
+	contentUrl?: string
+	createdAt: Date
+}
+
+/**
+ * Track media usage for a piece of content
+ */
+export async function trackMediaUsage(references: MediaUsageReference[]) {
+	if (references.length === 0) return
+
+	// Use upsert to handle duplicates gracefully
+	const operations = references.map((ref) =>
+		prisma.mediaUsage.upsert({
+			where: {
+				mediaId_contentType_contentId_fieldName: {
+					mediaId: ref.mediaId,
+					contentType: ref.contentType,
+					contentId: ref.contentId,
+					fieldName: ref.fieldName
+				}
+			},
+			update: {
+				updatedAt: new Date()
+			},
+			create: {
+				mediaId: ref.mediaId,
+				contentType: ref.contentType,
+				contentId: ref.contentId,
+				fieldName: ref.fieldName
+			}
+		})
+	)
+
+	await prisma.$transaction(operations)
+}
+
+/**
+ * Remove media usage tracking for a piece of content
+ */
+export async function removeMediaUsage(contentType: string, contentId: number, fieldName?: string) {
+	await prisma.mediaUsage.deleteMany({
+		where: {
+			contentType,
+			contentId,
+			...(fieldName && { fieldName })
+		}
+	})
+}
+
+/**
+ * Update media usage for a piece of content (removes old, adds new)
+ */
+export async function updateMediaUsage(
+	contentType: 'project' | 'post' | 'album',
+	contentId: number,
+	fieldName: string,
+	mediaIds: number[]
+) {
+	await prisma.$transaction(async (tx) => {
+		// Remove existing usage for this field
+		await tx.mediaUsage.deleteMany({
+			where: {
+				contentType,
+				contentId,
+				fieldName
+			}
+		})
+
+		// Add new usage references
+		if (mediaIds.length > 0) {
+			await tx.mediaUsage.createMany({
+				data: mediaIds.map((mediaId) => ({
+					mediaId,
+					contentType,
+					contentId,
+					fieldName
+				}))
+			})
+		}
+	})
+}
+
+/**
+ * Get usage information for a specific media item
+ */
+export async function getMediaUsage(mediaId: number): Promise<MediaUsageDisplay[]> {
+	const usage = await prisma.mediaUsage.findMany({
+		where: { mediaId },
+		orderBy: { createdAt: 'desc' }
+	})
+
+	const results: MediaUsageDisplay[] = []
+
+	for (const record of usage) {
+		let contentTitle = 'Unknown'
+		let contentUrl = undefined
+
+		// Fetch content details based on type
+		try {
+			switch (record.contentType) {
+				case 'project': {
+					const project = await prisma.project.findUnique({
+						where: { id: record.contentId },
+						select: { title: true, slug: true }
+					})
+					if (project) {
+						contentTitle = project.title
+						contentUrl = `/work/${project.slug}`
+					}
+					break
+				}
+				case 'post': {
+					const post = await prisma.post.findUnique({
+						where: { id: record.contentId },
+						select: { title: true, slug: true, postType: true }
+					})
+					if (post) {
+						contentTitle = post.title || `${post.postType} post`
+						contentUrl = `/universe/${post.slug}`
+					}
+					break
+				}
+				case 'album': {
+					const album = await prisma.album.findUnique({
+						where: { id: record.contentId },
+						select: { title: true, slug: true }
+					})
+					if (album) {
+						contentTitle = album.title
+						contentUrl = `/photos/${album.slug}`
+					}
+					break
+				}
+			}
+		} catch (error) {
+			console.error(`Error fetching ${record.contentType} ${record.contentId}:`, error)
+		}
+
+		results.push({
+			contentType: record.contentType,
+			contentId: record.contentId,
+			contentTitle,
+			fieldName: record.fieldName,
+			fieldDisplayName: getFieldDisplayName(record.fieldName),
+			contentUrl,
+			createdAt: record.createdAt
+		})
+	}
+
+	return results
+}
+
+/**
+ * Get friendly field names for display
+ */
+function getFieldDisplayName(fieldName: string): string {
+	const displayNames: Record<string, string> = {
+		featuredImage: 'Featured Image',
+		logoUrl: 'Logo',
+		gallery: 'Gallery',
+		content: 'Content',
+		coverPhotoId: 'Cover Photo',
+		photoId: 'Photo',
+		attachments: 'Attachments'
+	}
+
+	return displayNames[fieldName] || fieldName
+}
+
+/**
+ * Extract media IDs from various data structures
+ */
+export function extractMediaIds(data: any, fieldName: string): number[] {
+	const value = data[fieldName]
+	if (!value) return []
+
+	switch (fieldName) {
+		case 'gallery':
+		case 'attachments':
+			// Gallery/attachments are arrays of media objects with id property
+			if (Array.isArray(value)) {
+				return value
+					.map((item) => (typeof item === 'object' ? item.id : parseInt(item)))
+					.filter((id) => !isNaN(id))
+			}
+			return []
+
+		case 'featuredImage':
+		case 'logoUrl':
+			// Single media URL - extract ID from URL or assume it's an ID
+			if (typeof value === 'string') {
+				// Try to extract ID from URL pattern (e.g., /api/media/123/...)
+				const match = value.match(/\/api\/media\/(\d+)/)
+				return match ? [parseInt(match[1])] : []
+			} else if (typeof value === 'number') {
+				return [value]
+			}
+			return []
+
+		case 'content':
+			// Extract from rich text content (Edra editor)
+			return extractMediaFromRichText(value)
+
+		default:
+			return []
+	}
+}
+
+/**
+ * Extract media IDs from rich text content (TipTap/Edra JSON)
+ */
+function extractMediaFromRichText(content: any): number[] {
+	if (!content || typeof content !== 'object') return []
+
+	const mediaIds: number[] = []
+
+	function traverse(node: any) {
+		if (!node) return
+
+		// Handle image nodes
+		if (node.type === 'image' && node.attrs?.src) {
+			const match = node.attrs.src.match(/\/api\/media\/(\d+)/)
+			if (match) {
+				mediaIds.push(parseInt(match[1]))
+			}
+		}
+
+		// Handle gallery nodes
+		if (node.type === 'gallery' && node.attrs?.images) {
+			for (const image of node.attrs.images) {
+				if (image.id) {
+					mediaIds.push(image.id)
+				}
+			}
+		}
+
+		// Recursively traverse child nodes
+		if (node.content) {
+			for (const child of node.content) {
+				traverse(child)
+			}
+		}
+	}
+
+	traverse(content)
+	return [...new Set(mediaIds)] // Remove duplicates
+}
diff --git a/src/lib/types/editor.ts b/src/lib/types/editor.ts
new file mode 100644
index 0000000..a931c89
--- /dev/null
+++ b/src/lib/types/editor.ts
@@ -0,0 +1,43 @@
+import type { JSONContent } from '@tiptap/core'
+
+export interface EditorData extends JSONContent {}
+
+export interface EditorProps {
+	data?: EditorData
+	readOnly?: boolean
+	placeholder?: string
+	onChange?: (data: EditorData) => void
+}
+
+// Legacy EditorJS format support (for migration)
+export interface EditorBlock {
+	id?: string
+	type: string
+	data: {
+		text?: string
+		level?: number
+		style?: string
+		items?: string[]
+		caption?: string
+		url?: string
+		[key: string]: any
+	}
+}
+
+export interface EditorSaveData {
+	time: number
+	blocks: EditorBlock[]
+	version: string
+}
+
+// Tiptap/Edra content nodes
+export interface TiptapNode {
+	type: string
+	attrs?: Record<string, any>
+	content?: TiptapNode[]
+	marks?: Array<{
+		type: string
+		attrs?: Record<string, any>
+	}>
+	text?: string
+}
diff --git a/src/lib/types/labs.ts b/src/lib/types/labs.ts
index 57216cc..2e9f771 100644
--- a/src/lib/types/labs.ts
+++ b/src/lib/types/labs.ts
@@ -11,4 +11,4 @@ export interface LabProject {
 	year: number
 }
 
-export type ProjectStatus = 'active' | 'maintenance' | 'archived'
\ No newline at end of file
+export type ProjectStatus = 'active' | 'maintenance' | 'archived'
diff --git a/src/lib/types/photos.ts b/src/lib/types/photos.ts
index 45c21e4..fe03a98 100644
--- a/src/lib/types/photos.ts
+++ b/src/lib/types/photos.ts
@@ -21,6 +21,7 @@ export interface Photo {
 
 export interface PhotoAlbum {
 	id: string
+	slug: string
 	title: string
 	description?: string
 	coverPhoto: Photo
@@ -32,4 +33,4 @@ export type PhotoItem = Photo | PhotoAlbum
 
 export function isAlbum(item: PhotoItem): item is PhotoAlbum {
 	return 'photos' in item && Array.isArray(item.photos)
-}
\ No newline at end of file
+}
diff --git a/src/lib/types/project.ts b/src/lib/types/project.ts
new file mode 100644
index 0000000..e11df9a
--- /dev/null
+++ b/src/lib/types/project.ts
@@ -0,0 +1,68 @@
+export type ProjectStatus = 'draft' | 'published' | 'list-only' | 'password-protected'
+export type ProjectType = 'work' | 'labs'
+
+export interface Project {
+	id: number
+	slug: string
+	title: string
+	subtitle: string | null
+	description: string | null
+	year: number
+	client: string | null
+	role: string | null
+	featuredImage: string | null
+	logoUrl: string | null
+	gallery: any[] | null
+	externalUrl: string | null
+	caseStudyContent: any | null
+	backgroundColor: string | null
+	highlightColor: string | null
+	projectType: ProjectType
+	displayOrder: number
+	status: ProjectStatus
+	password: string | null
+	createdAt?: string
+	updatedAt?: string
+	publishedAt?: string | null
+}
+
+export interface ProjectFormData {
+	title: string
+	subtitle: string
+	description: string
+	year: number
+	client: string
+	role: string
+	projectType: ProjectType
+	externalUrl: string
+	featuredImage: string | null
+	backgroundColor: string
+	highlightColor: string
+	logoUrl: string
+	gallery: any[] | null
+	status: ProjectStatus
+	password: string
+	caseStudyContent: any
+}
+
+export const defaultProjectFormData: ProjectFormData = {
+	title: '',
+	subtitle: '',
+	description: '',
+	year: new Date().getFullYear(),
+	client: '',
+	role: '',
+	projectType: 'work',
+	externalUrl: '',
+	featuredImage: null,
+	backgroundColor: '',
+	highlightColor: '',
+	logoUrl: '',
+	gallery: null,
+	status: 'draft',
+	password: '',
+	caseStudyContent: {
+		type: 'doc',
+		content: [{ type: 'paragraph' }]
+	}
+}
diff --git a/src/lib/utils/content.ts b/src/lib/utils/content.ts
new file mode 100644
index 0000000..cfebb78
--- /dev/null
+++ b/src/lib/utils/content.ts
@@ -0,0 +1,277 @@
+// Render Edra/BlockNote JSON content to HTML
+export const renderEdraContent = (content: any): string => {
+	if (!content) return ''
+
+	// Handle Tiptap format first (has type: 'doc')
+	if (content.type === 'doc' && content.content) {
+		return renderTiptapContent(content)
+	}
+
+	// Handle both { blocks: [...] } and { content: [...] } formats
+	const blocks = content.blocks || content.content || []
+	if (!Array.isArray(blocks)) return ''
+
+	const renderBlock = (block: any): string => {
+		switch (block.type) {
+			case 'heading': {
+				const level = block.attrs?.level || block.level || 1
+				const headingText = block.content || block.text || ''
+				return `<h${level}>${headingText}</h${level}>`
+			}
+
+			case 'paragraph': {
+				const paragraphText = block.content || block.text || ''
+				if (!paragraphText) return '<p><br></p>'
+				return `<p>${paragraphText}</p>`
+			}
+
+			case 'bulletList':
+			case 'ul': {
+				const listItems = (block.content || [])
+					.map((item: any) => {
+						const itemText = item.content || item.text || ''
+						return `<li>${itemText}</li>`
+					})
+					.join('')
+				return `<ul>${listItems}</ul>`
+			}
+
+			case 'orderedList':
+			case 'ol': {
+				const orderedItems = (block.content || [])
+					.map((item: any) => {
+						const itemText = item.content || item.text || ''
+						return `<li>${itemText}</li>`
+					})
+					.join('')
+				return `<ol>${orderedItems}</ol>`
+			}
+
+			case 'blockquote': {
+				const quoteText = block.content || block.text || ''
+				return `<blockquote><p>${quoteText}</p></blockquote>`
+			}
+
+			case 'codeBlock':
+			case 'code': {
+				const codeText = block.content || block.text || ''
+				const language = block.attrs?.language || block.language || ''
+				return `<pre><code class="language-${language}">${codeText}</code></pre>`
+			}
+
+			case 'image': {
+				const src = block.attrs?.src || block.src || ''
+				const alt = block.attrs?.alt || block.alt || ''
+				const caption = block.attrs?.caption || block.caption || ''
+				return `<figure><img src="${src}" alt="${alt}" />${caption ? `<figcaption>${caption}</figcaption>` : ''}</figure>`
+			}
+
+			case 'hr':
+			case 'horizontalRule':
+				return '<hr>'
+
+			default: {
+				// For simple text content
+				const text = block.content || block.text || ''
+				if (text) {
+					return `<p>${text}</p>`
+				}
+				return ''
+			}
+		}
+	}
+
+	return blocks.map(renderBlock).join('')
+}
+
+// Render Tiptap JSON content to HTML
+function renderTiptapContent(doc: any): string {
+	if (!doc || !doc.content) return ''
+
+	const renderNode = (node: any): string => {
+		switch (node.type) {
+			case 'paragraph': {
+				const content = renderInlineContent(node.content || [])
+				if (!content) return '<p><br></p>'
+				return `<p>${content}</p>`
+			}
+
+			case 'heading': {
+				const level = node.attrs?.level || 1
+				const content = renderInlineContent(node.content || [])
+				return `<h${level}>${content}</h${level}>`
+			}
+
+			case 'bulletList': {
+				const items = (node.content || [])
+					.map((item: any) => {
+						const itemContent = item.content?.map(renderNode).join('') || ''
+						return `<li>${itemContent}</li>`
+					})
+					.join('')
+				return `<ul>${items}</ul>`
+			}
+
+			case 'orderedList': {
+				const items = (node.content || [])
+					.map((item: any) => {
+						const itemContent = item.content?.map(renderNode).join('') || ''
+						return `<li>${itemContent}</li>`
+					})
+					.join('')
+				return `<ol>${items}</ol>`
+			}
+
+			case 'listItem': {
+				// List items are handled by their parent list
+				return node.content?.map(renderNode).join('') || ''
+			}
+
+			case 'blockquote': {
+				const content = node.content?.map(renderNode).join('') || ''
+				return `<blockquote>${content}</blockquote>`
+			}
+
+			case 'codeBlock': {
+				const language = node.attrs?.language || ''
+				const content = node.content?.[0]?.text || ''
+				return `<pre><code class="language-${language}">${escapeHtml(content)}</code></pre>`
+			}
+
+			case 'image': {
+				const src = node.attrs?.src || ''
+				const alt = node.attrs?.alt || ''
+				const title = node.attrs?.title || ''
+				const width = node.attrs?.width
+				const height = node.attrs?.height
+				const widthAttr = width ? ` width="${width}"` : ''
+				const heightAttr = height ? ` height="${height}"` : ''
+				return `<figure><img src="${src}" alt="${alt}"${widthAttr}${heightAttr} />${title ? `<figcaption>${title}</figcaption>` : ''}</figure>`
+			}
+
+			case 'horizontalRule': {
+				return '<hr>'
+			}
+
+			case 'hardBreak': {
+				return '<br>'
+			}
+
+			default: {
+				// For any unknown block types, try to render their content
+				if (node.content) {
+					return node.content.map(renderNode).join('')
+				}
+				return ''
+			}
+		}
+	}
+
+	// Render inline content (text nodes with marks)
+	const renderInlineContent = (content: any[]): string => {
+		return content.map((node: any) => {
+			if (node.type === 'text') {
+				let text = escapeHtml(node.text || '')
+				
+				// Apply marks (bold, italic, etc.)
+				if (node.marks) {
+					node.marks.forEach((mark: any) => {
+						switch (mark.type) {
+							case 'bold':
+								text = `<strong>${text}</strong>`
+								break
+							case 'italic':
+								text = `<em>${text}</em>`
+								break
+							case 'underline':
+								text = `<u>${text}</u>`
+								break
+							case 'strike':
+								text = `<s>${text}</s>`
+								break
+							case 'code':
+								text = `<code>${text}</code>`
+								break
+							case 'link':
+								const href = mark.attrs?.href || '#'
+								const target = mark.attrs?.target || '_blank'
+								text = `<a href="${href}" target="${target}" rel="noopener noreferrer">${text}</a>`
+								break
+							case 'highlight':
+								text = `<mark>${text}</mark>`
+								break
+						}
+					})
+				}
+				
+				return text
+			}
+			
+			// Handle other inline nodes
+			return renderNode(node)
+		}).join('')
+	}
+
+	// Helper to escape HTML
+	const escapeHtml = (str: string): string => {
+		return str
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#039;')
+	}
+
+	return doc.content.map(renderNode).join('')
+}
+
+// Extract text content from Edra JSON for excerpt
+export const getContentExcerpt = (content: any, maxLength = 200): string => {
+	if (!content) return ''
+	
+	// Handle Tiptap format first (has type: 'doc')
+	if (content.type === 'doc' && content.content) {
+		return extractTiptapText(content, maxLength)
+	}
+
+	// Handle both { blocks: [...] } and { content: [...] } formats
+	const blocks = content.blocks || content.content || []
+	if (!Array.isArray(blocks)) return ''
+
+	const extractText = (node: any): string => {
+		// For block-level content
+		if (node.type && node.content && typeof node.content === 'string') {
+			return node.content
+		}
+		// For inline content with text property
+		if (node.text) return node.text
+		// For nested content
+		if (node.content && Array.isArray(node.content)) {
+			return node.content.map(extractText).join(' ')
+		}
+		return ''
+	}
+
+	const text = blocks.map(extractText).join(' ').trim()
+	if (text.length <= maxLength) return text
+	return text.substring(0, maxLength).trim() + '...'
+}
+
+// Extract text from Tiptap content
+function extractTiptapText(doc: any, maxLength: number): string {
+	const extractFromNode = (node: any): string => {
+		if (node.type === 'text') {
+			return node.text || ''
+		}
+		
+		if (node.content && Array.isArray(node.content)) {
+			return node.content.map(extractFromNode).join(' ')
+		}
+		
+		return ''
+	}
+	
+	const text = doc.content.map(extractFromNode).join(' ').trim()
+	if (text.length <= maxLength) return text
+	return text.substring(0, maxLength).trim() + '...'
+}
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
new file mode 100644
index 0000000..a97f509
--- /dev/null
+++ b/src/lib/utils/date.ts
@@ -0,0 +1,8 @@
+export function formatDate(dateString: string): string {
+	const date = new Date(dateString)
+	return date.toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric'
+	})
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5fc3620..52fb3c0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { page } from '$app/stores'
 	import Header from '$components/Header.svelte'
 	import Footer from '$components/Footer.svelte'
+
+	$: isAdminRoute = $page.url.pathname.startsWith('/admin')
 </script>
 
 <svelte:head>
@@ -8,18 +11,21 @@
 	<meta name="description" content="Justin Edmund is a software designer based in San Francisco." />
 	<meta
 		name="viewport"
-		content="width=device-width, initial-scale=1.0, 
-user-scalable=no"
+		content="width=device-width, initial-scale=1.0, user-scalable=no"
 	/>
 </svelte:head>
 
-<Header />
+{#if !isAdminRoute}
+	<Header />
+{/if}
 
-<main>
+<main class:admin-route={isAdminRoute}>
 	<slot />
 </main>
 
-<Footer />
+{#if !isAdminRoute}
+	<Footer />
+{/if}
 
 <style lang="scss">
 	@import '../assets/styles/reset.css';
@@ -28,18 +34,21 @@ user-scalable=no"
 	:global(html) {
 		background: var(--bg-color);
 		color: var(--text-color);
-		font-family: 'cstd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		font-size: 16px;
 		width: 100%;
 	}
-	
+
 	:global(body) {
 		margin: 0;
 		padding: 0;
 	}
-	
+
 	main {
 		min-height: 100vh;
+
+		&.admin-route {
+			min-height: auto;
+		}
 	}
 
 	@include breakpoint('phone') {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e8b87b2..1e3ab66 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import ProjectList from '$components/ProjectList.svelte'
+	import type { PageData } from './$types'
+
+	let { data } = $props<{ data: PageData }>()
 </script>
 
-<ProjectList />
+<ProjectList projects={data?.projects || []} />
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 5fc27f9..2837328 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,36 +1,34 @@
 import type { PageLoad } from './$types'
 import type { Album } from '$lib/types/lastfm'
+import type { Project } from '$lib/types/project'
 
 export const load: PageLoad = async ({ fetch }) => {
 	try {
-		// const [albums, steamGames, psnGames] = await Promise.all([
-		const [albums] = await Promise.all([
-			fetchRecentAlbums(fetch)
-			// fetchRecentSteamGames(fetch),
-			// fetchRecentPSNGames(fetch)
-		])
+		// Fetch albums first
+		let albums: Album[] = []
+		try {
+			albums = await fetchRecentAlbums(fetch)
+		} catch (albumError) {
+			console.error('Error fetching albums:', albumError)
+		}
 
-		// const response = await fetch('/api/giantbomb', {
-		// 	method: 'POST',
-		// 	body: JSON.stringify({ games: psnGames }),
-		// 	headers: {
-		// 		'Content-Type': 'application/json'
-		// 	}
-		// })
+		// Fetch projects
+		let projectsData = { projects: [] as Project[], pagination: null }
+		try {
+			projectsData = await fetchProjects(fetch)
+		} catch (projectError) {
+			console.error('Error fetching projects:', projectError)
+		}
 
-		// const games = await response.json()
 		return {
-			albums
-			// games: games,
-			// steamGames: steamGames,
-			// psnGames: psnGames
+			albums,
+			projects: projectsData.projects || []
 		}
 	} catch (err) {
-		console.error('Error fetching data:', err)
+		console.error('Error in load function:', err)
 		return {
 			albums: [],
-			games: [],
-			error: err instanceof Error ? err.message : 'An unknown error occurred'
+			projects: []
 		}
 	}
 }
@@ -57,3 +55,15 @@ async function fetchRecentPSNGames(fetch: typeof window.fetch): Promise<Serializ
 	}
 	return await response.json()
 }
+
+async function fetchProjects(
+	fetch: typeof window.fetch
+): Promise<{ projects: Project[]; pagination: any }> {
+	const response = await fetch(
+		'/api/projects?projectType=work&includeListOnly=true&includePasswordProtected=true'
+	)
+	if (!response.ok) {
+		throw new Error(`Failed to fetch projects: ${response.status}`)
+	}
+	return await response.json()
+}
diff --git a/src/routes/about/+page.ts b/src/routes/about/+page.ts
index feeb82c..4491e8a 100644
--- a/src/routes/about/+page.ts
+++ b/src/routes/about/+page.ts
@@ -3,9 +3,7 @@ import type { Album } from '$lib/types/lastfm'
 
 export const load: PageLoad = async ({ fetch }) => {
 	try {
-		const [albums] = await Promise.all([
-			fetchRecentAlbums(fetch)
-		])
+		const [albums] = await Promise.all([fetchRecentAlbums(fetch)])
 
 		return {
 			albums
@@ -25,4 +23,4 @@ async function fetchRecentAlbums(fetch: typeof window.fetch): Promise<Album[]> {
 	if (!response.ok) throw new Error(`Failed to fetch albums: ${response.status}`)
 	const musicData: { albums: Album[] } = await response.json()
 	return musicData.albums
-}
\ No newline at end of file
+}
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
new file mode 100644
index 0000000..2b98f94
--- /dev/null
+++ b/src/routes/admin/+layout.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import AdminNavBar from '$lib/components/admin/AdminNavBar.svelte'
+
+	let { children } = $props()
+
+	// Check if user is authenticated
+	let isAuthenticated = $state(false)
+	let isLoading = $state(true)
+
+	onMount(() => {
+		// Check localStorage for auth token
+		const auth = localStorage.getItem('admin_auth')
+		if (auth) {
+			isAuthenticated = true
+		} else if ($page.url.pathname !== '/admin/login') {
+			// Redirect to login if not authenticated
+			goto('/admin/login')
+		}
+		isLoading = false
+	})
+
+	const currentPath = $derived($page.url.pathname)
+
+	// Pages that should use the card metaphor (no .admin-content wrapper)
+	const cardLayoutPages = ['/admin']
+	const useCardLayout = $derived(cardLayoutPages.includes(currentPath))
+</script>
+
+{#if isLoading}
+	<div class="loading">Loading...</div>
+{:else if !isAuthenticated && currentPath !== '/admin/login'}
+	<!-- Not authenticated and not on login page, redirect will happen in onMount -->
+	<div class="loading">Redirecting to login...</div>
+{:else if currentPath === '/admin/login'}
+	<!-- On login page, show children without layout -->
+	{@render children()}
+{:else}
+	<!-- Authenticated, show admin layout -->
+	<div class="admin-container">
+		<AdminNavBar />
+
+		{#if useCardLayout}
+			<main class="admin-card-layout">
+				{@render children()}
+			</main>
+		{:else}
+			<main class="admin-content">
+				{@render children()}
+			</main>
+		{/if}
+	</div>
+{/if}
+
+<style lang="scss">
+	.loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100vh;
+		font-size: 1.125rem;
+		color: $grey-40;
+	}
+
+	.admin-container {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background-color: $bg-color;
+	}
+
+	.admin-content {
+		flex: 1;
+	}
+
+	.admin-card-layout {
+		flex: 1;
+		background: $grey-90;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+		padding: $unit-6x $unit-4x;
+		min-height: calc(100vh - 60px); // Account for navbar
+	}
+</style>
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
new file mode 100644
index 0000000..c3eface
--- /dev/null
+++ b/src/routes/admin/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { onMount } from 'svelte'
+
+	onMount(() => {
+		goto('/admin/projects', { replaceState: true })
+	})
+</script>
diff --git a/src/routes/admin/albums/+page.svelte b/src/routes/admin/albums/+page.svelte
new file mode 100644
index 0000000..cc0e006
--- /dev/null
+++ b/src/routes/admin/albums/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import { onMount } from 'svelte'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
+	import AlbumListItem from '$lib/components/admin/AlbumListItem.svelte'
+	import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import Select from '$lib/components/admin/Select.svelte'
+
+	interface Photo {
+		id: number
+		url: string
+		thumbnailUrl: string | null
+		caption: string | null
+	}
+
+	interface Album {
+		id: number
+		slug: string
+		title: string
+		description: string | null
+		date: string | null
+		location: string | null
+		coverPhotoId: number | null
+		isPhotography: boolean
+		status: string
+		showInUniverse: boolean
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+		photos: Photo[]
+		_count: {
+			photos: number
+		}
+	}
+
+	// State
+	let albums = $state<Album[]>([])
+	let filteredAlbums = $state<Album[]>([])
+	let isLoading = $state(true)
+	let error = $state('')
+	let total = $state(0)
+	let albumTypeCounts = $state<Record<string, number>>({})
+	let showDeleteModal = $state(false)
+	let albumToDelete = $state<Album | null>(null)
+	let activeDropdown = $state<number | null>(null)
+
+	// Filter state
+	let photographyFilter = $state<string>('all')
+
+	// Filter options
+	const filterOptions = [
+		{ value: 'all', label: 'All albums' },
+		{ value: 'true', label: 'Photography albums' },
+		{ value: 'false', label: 'Regular albums' }
+	]
+
+	onMount(async () => {
+		await loadAlbums()
+		// Close dropdown when clicking outside
+		document.addEventListener('click', handleOutsideClick)
+		return () => document.removeEventListener('click', handleOutsideClick)
+	})
+
+	function handleOutsideClick(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.dropdown-container')) {
+			activeDropdown = null
+		}
+	}
+
+	async function loadAlbums() {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch('/api/albums', {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				if (response.status === 401) {
+					goto('/admin/login')
+					return
+				}
+				throw new Error('Failed to load albums')
+			}
+
+			const data = await response.json()
+			albums = data.albums || []
+			total = data.pagination?.total || albums.length
+
+			// Calculate album type counts
+			const counts: Record<string, number> = {
+				all: albums.length,
+				photography: albums.filter((a) => a.isPhotography).length,
+				regular: albums.filter((a) => !a.isPhotography).length
+			}
+			albumTypeCounts = counts
+
+			// Apply initial filter
+			applyFilter()
+		} catch (err) {
+			error = 'Failed to load albums'
+			console.error(err)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	function applyFilter() {
+		if (photographyFilter === 'all') {
+			filteredAlbums = albums
+		} else if (photographyFilter === 'true') {
+			filteredAlbums = albums.filter((album) => album.isPhotography === true)
+		} else if (photographyFilter === 'false') {
+			filteredAlbums = albums.filter((album) => album.isPhotography === false)
+		}
+	}
+
+	function handleToggleDropdown(event: CustomEvent<{ albumId: number; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		activeDropdown = activeDropdown === event.detail.albumId ? null : event.detail.albumId
+	}
+
+	function handleEdit(event: CustomEvent<{ album: Album; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		goto(`/admin/albums/${event.detail.album.id}/edit`)
+	}
+
+	async function handleTogglePublish(event: CustomEvent<{ album: Album; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		activeDropdown = null
+
+		const album = event.detail.album
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			const newStatus = album.status === 'published' ? 'draft' : 'published'
+
+			const response = await fetch(`/api/albums/${album.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Basic ${auth}`
+				},
+				body: JSON.stringify({ status: newStatus })
+			})
+
+			if (response.ok) {
+				await loadAlbums()
+			}
+		} catch (err) {
+			console.error('Failed to update album status:', err)
+		}
+	}
+
+	function handleDelete(event: CustomEvent<{ album: Album; event: MouseEvent }>) {
+		event.detail.event.stopPropagation()
+		activeDropdown = null
+		albumToDelete = event.detail.album
+		showDeleteModal = true
+	}
+
+	async function confirmDelete() {
+		if (!albumToDelete) return
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+
+			const response = await fetch(`/api/albums/${albumToDelete.id}`, {
+				method: 'DELETE',
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (response.ok) {
+				await loadAlbums()
+			}
+		} catch (err) {
+			console.error('Failed to delete album:', err)
+		} finally {
+			showDeleteModal = false
+			albumToDelete = null
+		}
+	}
+
+	function cancelDelete() {
+		showDeleteModal = false
+		albumToDelete = null
+	}
+
+	function handleFilterChange() {
+		applyFilter()
+	}
+
+	function handleNewAlbum() {
+		goto('/admin/albums/new')
+	}
+</script>
+
+<AdminPage>
+	<AdminHeader title="Albums" slot="header">
+		{#snippet actions()}
+			<Button variant="primary" buttonSize="large" onclick={handleNewAlbum}>New Album</Button>
+		{/snippet}
+	</AdminHeader>
+
+	{#if error}
+		<div class="error">{error}</div>
+	{:else}
+		<!-- Filters -->
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={photographyFilter}
+					options={filterOptions}
+					buttonSize="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+			{/snippet}
+		</AdminFilters>
+
+		<!-- Albums List -->
+		{#if isLoading}
+			<div class="loading">
+				<div class="spinner"></div>
+				<p>Loading albums...</p>
+			</div>
+		{:else if filteredAlbums.length === 0}
+			<div class="empty-state">
+				<p>
+					{#if photographyFilter === 'all'}
+						No albums found. Create your first album!
+					{:else}
+						No albums found matching the current filters. Try adjusting your filters or create a new
+						album.
+					{/if}
+				</p>
+			</div>
+		{:else}
+			<div class="albums-list">
+				{#each filteredAlbums as album}
+					<AlbumListItem
+						{album}
+						isDropdownActive={activeDropdown === album.id}
+						ontoggleDropdown={handleToggleDropdown}
+						onedit={handleEdit}
+						ontogglePublish={handleTogglePublish}
+						ondelete={handleDelete}
+					/>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</AdminPage>
+
+<DeleteConfirmationModal
+	bind:isOpen={showDeleteModal}
+	title="Delete album?"
+	message={albumToDelete
+		? `Are you sure you want to delete "${albumToDelete.title}"? This action cannot be undone.`
+		: ''}
+	onConfirm={confirmDelete}
+	onCancel={cancelDelete}
+/>
+
+<style lang="scss">
+	.error {
+		text-align: center;
+		padding: $unit-6x;
+		color: #d33;
+	}
+
+	.loading {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		.spinner {
+			width: 32px;
+			height: 32px;
+			border: 3px solid $grey-80;
+			border-top-color: $primary-color;
+			border-radius: 50%;
+			margin: 0 auto $unit-2x;
+			animation: spin 0.8s linear infinite;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.empty-state {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.albums-list {
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/src/routes/admin/albums/[id]/edit/+page.svelte b/src/routes/admin/albums/[id]/edit/+page.svelte
new file mode 100644
index 0000000..dd78a55
--- /dev/null
+++ b/src/routes/admin/albums/[id]/edit/+page.svelte
@@ -0,0 +1,1171 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
+	import { onMount } from 'svelte'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import Input from '$lib/components/admin/Input.svelte'
+	import FormFieldWrapper from '$lib/components/admin/FormFieldWrapper.svelte'
+	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
+	import MediaLibraryModal from '$lib/components/admin/MediaLibraryModal.svelte'
+	import MediaDetailsModal from '$lib/components/admin/MediaDetailsModal.svelte'
+	import GalleryUploader from '$lib/components/admin/GalleryUploader.svelte'
+	import SaveActionsGroup from '$lib/components/admin/SaveActionsGroup.svelte'
+	import AlbumMetadataPopover from '$lib/components/admin/AlbumMetadataPopover.svelte'
+
+	// Form state
+	let album = $state<any>(null)
+	let title = $state('')
+	let slug = $state('')
+	let description = $state('')
+	let date = $state('')
+	let location = $state('')
+	let isPhotography = $state(false)
+	let showInUniverse = $state(false)
+	let status = $state<'draft' | 'published'>('draft')
+
+	// UI state
+	let isLoading = $state(true)
+	let isSaving = $state(false)
+	let error = $state('')
+
+	// Photo management state
+	let isMediaLibraryOpen = $state(false)
+	let albumPhotos = $state<any[]>([])
+	let isManagingPhotos = $state(false)
+
+	// Media details modal state
+	let isMediaDetailsOpen = $state(false)
+	let selectedMedia = $state<any>(null)
+
+	// Metadata popover state
+	let isMetadataOpen = $state(false)
+	let metadataButtonElement: HTMLButtonElement
+
+	onMount(async () => {
+		await loadAlbum()
+	})
+
+	async function loadAlbum() {
+		try {
+			isLoading = true
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch(`/api/albums/${$page.params.id}`, {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				if (response.status === 404) {
+					error = 'Album not found'
+					return
+				}
+				if (response.status === 401) {
+					goto('/admin/login')
+					return
+				}
+				throw new Error('Failed to load album')
+			}
+
+			album = await response.json()
+
+			// Populate form fields
+			title = album.title || ''
+			slug = album.slug || ''
+			description = album.description || ''
+			date = album.date ? new Date(album.date).toISOString().split('T')[0] : ''
+			location = album.location || ''
+			isPhotography = album.isPhotography || false
+			showInUniverse = album.showInUniverse || false
+			status = album.status || 'draft'
+
+			// Populate photos
+			albumPhotos = album.photos || []
+		} catch (err) {
+			error = 'Failed to load album'
+			console.error('Failed to load album:', err)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	async function handleSave(publishStatus?: 'draft' | 'published') {
+		if (!title.trim()) {
+			error = 'Title is required'
+			return
+		}
+
+		if (!slug.trim()) {
+			error = 'Slug is required'
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const albumData = {
+				title: title.trim(),
+				slug: slug.trim(),
+				description: description.trim() || null,
+				date: date ? new Date(date).toISOString() : null,
+				location: location.trim() || null,
+				isPhotography,
+				showInUniverse,
+				status: publishStatus || status
+			}
+
+			const response = await fetch(`/api/albums/${album.id}`, {
+				method: 'PUT',
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(albumData)
+			})
+
+			if (!response.ok) {
+				const errorData = await response.json()
+				throw new Error(errorData.message || 'Failed to update album')
+			}
+
+			const updatedAlbum = await response.json()
+			album = updatedAlbum
+
+			if (publishStatus) {
+				status = publishStatus
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to update album'
+			console.error('Failed to update album:', err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+	async function handleDelete() {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch(`/api/albums/${album.id}`, {
+				method: 'DELETE',
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				const errorData = await response.json()
+				throw new Error(errorData.message || 'Failed to delete album')
+			}
+
+			goto('/admin/albums')
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to delete album'
+			console.error('Failed to delete album:', err)
+		}
+	}
+
+	function handleCancel() {
+		goto('/admin/albums')
+	}
+
+	// Photo management functions
+	async function handleAddPhotos(selectedMedia: any | any[]) {
+		const mediaArray = Array.isArray(selectedMedia) ? selectedMedia : [selectedMedia]
+
+		try {
+			isManagingPhotos = true
+			error = '' // Clear any previous errors
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			// Check for duplicates before adding
+			const existingMediaIds = albumPhotos.map((p) => p.mediaId).filter(Boolean)
+			const newMedia = mediaArray.filter((media) => !existingMediaIds.includes(media.id))
+
+			if (newMedia.length === 0) {
+				error = 'All selected photos are already in this album'
+				return
+			}
+
+			if (newMedia.length < mediaArray.length) {
+				console.log(
+					`Skipping ${mediaArray.length - newMedia.length} photos that are already in the album`
+				)
+			}
+
+			// Add photos to album via API
+			const addedPhotos = []
+			console.log('Adding photos to album:', newMedia.map(m => ({ id: m.id, filename: m.filename })))
+			
+			for (const media of newMedia) {
+				console.log(`Adding photo ${media.id} (${media.filename}) to album ${album.id}`)
+				
+				const response = await fetch(`/api/albums/${album.id}/photos`, {
+					method: 'POST',
+					headers: {
+						Authorization: `Basic ${auth}`,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({
+						mediaId: media.id,
+						displayOrder: albumPhotos.length + addedPhotos.length
+					})
+				})
+
+				console.log(`API response for media ${media.id}:`, response.status, response.statusText)
+
+				if (!response.ok) {
+					const errorData = await response.text()
+					console.error(`Failed to add photo ${media.filename}:`, response.status, errorData)
+					throw new Error(`Failed to add photo ${media.filename}: ${response.status} ${errorData}`)
+				}
+
+				const photo = await response.json()
+				console.log('Photo added successfully:', photo)
+				addedPhotos.push(photo)
+			}
+
+			console.log('All photos added, updating local state. Added photos:', addedPhotos)
+			// Update local state with all added photos
+			albumPhotos = [...albumPhotos, ...addedPhotos]
+			console.log('Updated albumPhotos array:', albumPhotos.length, 'photos')
+
+			// Update album photo count
+			if (album._count) {
+				album._count.photos = albumPhotos.length
+			}
+
+			console.log(`Successfully added ${addedPhotos.length} photos to album`)
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to add photos'
+			console.error('Failed to add photos:', err)
+		} finally {
+			isManagingPhotos = false
+			isMediaLibraryOpen = false
+		}
+	}
+
+	async function handleRemovePhoto(photoId: number, skipConfirmation = false) {
+		const photoToRemove = albumPhotos.find((p) => p.id === photoId)
+		if (!photoToRemove) {
+			error = 'Photo not found in album'
+			return false
+		}
+
+		if (
+			!skipConfirmation &&
+			!confirm(
+				`Remove "${photoToRemove.filename || 'this photo'}" from this album?\n\nNote: This will only remove it from the album. The original photo will remain in your media library.`
+			)
+		) {
+			return false
+		}
+
+		try {
+			isManagingPhotos = true
+			error = '' // Clear any previous errors
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return false
+			}
+
+			console.log(`Attempting to remove photo with ID: ${photoId} from album ${album.id}`)
+			console.log('Photo to remove:', photoToRemove)
+
+			const response = await fetch(`/api/albums/${album.id}/photos?photoId=${photoId}`, {
+				method: 'DELETE',
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			console.log(`DELETE response status: ${response.status}`)
+
+			if (!response.ok) {
+				const errorData = await response.text()
+				console.error(`Delete failed: ${response.status} ${errorData}`)
+				throw new Error(`Failed to remove photo: ${response.status} ${errorData}`)
+			}
+
+			// Remove from local state only after successful API call
+			albumPhotos = albumPhotos.filter((photo) => photo.id !== photoId)
+
+			// Update album photo count
+			if (album._count) {
+				album._count.photos = albumPhotos.length
+			}
+
+			console.log(`Successfully removed photo ${photoId} from album`)
+			return true
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to remove photo from album'
+			console.error('Failed to remove photo:', err)
+			return false
+		} finally {
+			isManagingPhotos = false
+		}
+	}
+
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	function handlePhotoClick(photo: any) {
+		// Convert album photo to media format for MediaDetailsModal
+		selectedMedia = {
+			id: photo.mediaId || photo.id,
+			filename: photo.filename,
+			originalName: photo.filename,
+			mimeType: photo.mimeType || 'image/jpeg',
+			size: photo.size || 0,
+			url: photo.url,
+			thumbnailUrl: photo.thumbnailUrl,
+			width: photo.width,
+			height: photo.height,
+			altText: photo.altText || '',
+			description: photo.description || '',
+			isPhotography: photo.isPhotography || false,
+			createdAt: photo.createdAt,
+			updatedAt: photo.updatedAt
+		}
+		isMediaDetailsOpen = true
+	}
+
+	function handleMediaDetailsClose() {
+		isMediaDetailsOpen = false
+		selectedMedia = null
+	}
+
+	function handleMediaUpdate(updatedMedia: any) {
+		// Update the photo in the album photos list
+		const photoIndex = albumPhotos.findIndex(
+			(photo) => (photo.mediaId || photo.id) === updatedMedia.id
+		)
+		if (photoIndex !== -1) {
+			// Update the photo with new media information
+			albumPhotos[photoIndex] = {
+				...albumPhotos[photoIndex],
+				filename: updatedMedia.filename,
+				altText: updatedMedia.altText,
+				description: updatedMedia.description,
+				isPhotography: updatedMedia.isPhotography
+			}
+			albumPhotos = [...albumPhotos] // Trigger reactivity
+		}
+
+		// Update selectedMedia for the modal
+		selectedMedia = updatedMedia
+	}
+
+	async function handlePhotoReorder(reorderedPhotos: any[]) {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			// Update display order for each photo
+			const updatePromises = reorderedPhotos.map((photo, index) =>
+				fetch(`/api/albums/${album.id}/photos`, {
+					method: 'PUT',
+					headers: {
+						Authorization: `Basic ${auth}`,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({
+						photoId: photo.id,
+						displayOrder: index
+					})
+				})
+			)
+
+			await Promise.all(updatePromises)
+
+			// Update local state
+			albumPhotos = reorderedPhotos
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to reorder photos'
+			console.error('Failed to reorder photos:', err)
+		}
+	}
+
+	async function handleAddPhotosFromUpload(uploadedMedia: any[]) {
+		try {
+			isManagingPhotos = true
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			// Add each uploaded media item to the album
+			for (const media of uploadedMedia) {
+				const response = await fetch(`/api/albums/${album.id}/photos`, {
+					method: 'POST',
+					headers: {
+						Authorization: `Basic ${auth}`,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({
+						mediaId: media.id,
+						displayOrder: albumPhotos.length
+					})
+				})
+
+				if (!response.ok) {
+					throw new Error(`Failed to add photo ${media.filename}`)
+				}
+
+				const photo = await response.json()
+				albumPhotos = [...albumPhotos, photo]
+			}
+
+			// Update album photo count
+			if (album._count) {
+				album._count.photos = albumPhotos.length
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to add photos to album'
+			console.error('Failed to add photos to album:', err)
+		} finally {
+			isManagingPhotos = false
+		}
+	}
+
+	// Handle new photos added through GalleryUploader (uploads or library selections)
+	async function handleGalleryAdd(newPhotos: any[]) {
+		try {
+			if (newPhotos.length > 0) {
+				// Check if these are new uploads (have File objects) or library selections (have media IDs)
+				const uploadsToAdd = newPhotos.filter((photo) => photo instanceof File || !photo.id)
+				const libraryPhotosToAdd = newPhotos.filter((photo) => photo.id && !(photo instanceof File))
+
+				// Handle new uploads
+				if (uploadsToAdd.length > 0) {
+					await handleAddPhotosFromUpload(uploadsToAdd)
+				}
+
+				// Handle library selections
+				if (libraryPhotosToAdd.length > 0) {
+					await handleAddPhotos(libraryPhotosToAdd)
+				}
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to add photos'
+			console.error('Failed to add photos:', err)
+		}
+	}
+
+	// Handle photo removal from GalleryUploader
+	async function handleGalleryRemove(itemToRemove: any, index: number) {
+		try {
+			// Find the photo ID to remove
+			const photoId = itemToRemove.id
+			if (!photoId) {
+				error = 'Cannot remove photo: no photo ID found'
+				return
+			}
+
+			// Call the existing remove photo function
+			const success = await handleRemovePhoto(photoId, true) // Skip confirmation since user clicked remove
+			if (!success) {
+				// If removal failed, we need to reset the gallery state
+				// Force a reactivity update
+				albumPhotos = [...albumPhotos]
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to remove photo'
+			console.error('Failed to remove photo:', err)
+			// Reset gallery state on error
+			albumPhotos = [...albumPhotos]
+		}
+	}
+
+	function generateSlug(text: string): string {
+		return text
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	}
+
+	// Auto-update slug when title changes (only if slug is empty)
+	$effect(() => {
+		if (title && !slug) {
+			slug = generateSlug(title)
+		}
+	})
+
+	const canSave = $derived(title.trim().length > 0 && slug.trim().length > 0)
+
+	// Metadata popover handlers
+	function handleMetadataUpdate(key: string, value: any) {
+		if (key === 'date') {
+			date = value ? new Date(value).toISOString().split('T')[0] : ''
+		} else {
+			// Update the form state variable
+			switch (key) {
+				case 'slug':
+					slug = value
+					break
+				case 'location':
+					location = value
+					break
+				case 'isPhotography':
+					isPhotography = value
+					break
+				case 'showInUniverse':
+					showInUniverse = value
+					break
+			}
+		}
+	}
+
+	function handleMetadataDelete() {
+		isMetadataOpen = false
+		handleDelete()
+	}
+</script>
+
+<AdminPage>
+	<header slot="header">
+		{#if !isLoading && album}
+			<div class="header-left">
+				<button class="btn-icon" onclick={handleCancel}>
+					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+						<path
+							d="M12.5 15L7.5 10L12.5 5"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</div>
+			<div class="header-actions">
+				<div class="metadata-popover-container">
+					<button
+						bind:this={metadataButtonElement}
+						class="btn btn-text"
+						onclick={(e) => {
+							e.stopPropagation()
+							isMetadataOpen = !isMetadataOpen
+						}}
+						disabled={isSaving}
+					>
+						<svg width="16" height="16" viewBox="0 0 56 56" fill="none">
+							<path
+								fill="currentColor"
+								d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"
+							/>
+						</svg>
+						Metadata
+					</button>
+
+					{#if isMetadataOpen && metadataButtonElement && album}
+						<AlbumMetadataPopover
+							bind:album
+							triggerElement={metadataButtonElement}
+							onUpdate={handleMetadataUpdate}
+							onDelete={handleMetadataDelete}
+							onClose={() => (isMetadataOpen = false)}
+						/>
+					{/if}
+				</div>
+				<SaveActionsGroup
+					{status}
+					onSave={handleSave}
+					disabled={isSaving}
+					isLoading={isSaving}
+					{canSave}
+				/>
+			</div>
+		{/if}
+	</header>
+
+	{#if isLoading}
+		<div class="loading-container">
+			<LoadingSpinner />
+		</div>
+	{:else if error && !album}
+		<div class="error-container">
+			<div class="error-message">{error}</div>
+			<Button variant="secondary" onclick={handleCancel}>Back to Albums</Button>
+		</div>
+	{:else if album}
+		<div class="album-form">
+			{#if error}
+				<div class="error-message">{error}</div>
+			{/if}
+
+			<div class="form-section">
+				<h2>Album Details</h2>
+
+				<Input
+					label="Title"
+					bind:value={title}
+					placeholder="Enter album title"
+					required
+					disabled={isSaving}
+					fullWidth
+				/>
+
+				<Input
+					type="textarea"
+					label="Description"
+					bind:value={description}
+					placeholder="Describe this album..."
+					rows={3}
+					disabled={isSaving}
+					fullWidth
+				/>
+			</div>
+
+			<!-- Photo Management -->
+			<div class="form-section">
+				<h2>Photos ({albumPhotos.length})</h2>
+
+				<GalleryUploader
+					label="Album Photos"
+					bind:value={albumPhotos}
+					onUpload={handleGalleryAdd}
+					onReorder={handlePhotoReorder}
+					onRemove={handleGalleryRemove}
+					showBrowseLibrary={true}
+					placeholder="Add photos to this album by uploading or selecting from your media library"
+					helpText="Drag photos to reorder them. Click on photos to edit metadata."
+				/>
+			</div>
+
+			<!-- Album Stats -->
+			<div class="form-section">
+				<h2>Album Statistics</h2>
+				<div class="album-stats">
+					<div class="stat">
+						<span class="stat-value">{album._count?.photos || 0}</span>
+						<span class="stat-label">Photos</span>
+					</div>
+					<div class="stat">
+						<span class="stat-value">{status === 'published' ? 'Published' : 'Draft'}</span>
+						<span class="stat-label">Status</span>
+					</div>
+					<div class="stat">
+						<span class="stat-value">{new Date(album.createdAt).toLocaleDateString()}</span>
+						<span class="stat-label">Created</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+</AdminPage>
+
+<!-- Media Library Modal -->
+<MediaLibraryModal
+	bind:isOpen={isMediaLibraryOpen}
+	mode="multiple"
+	fileType="image"
+	onSelect={handleAddPhotos}
+	onClose={handleMediaLibraryClose}
+/>
+
+<!-- Media Details Modal -->
+<MediaDetailsModal
+	bind:isOpen={isMediaDetailsOpen}
+	media={selectedMedia}
+	onClose={handleMediaDetailsClose}
+	onUpdate={handleMediaUpdate}
+/>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+
+		h1 {
+			font-size: 1.5rem;
+			font-weight: 700;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+
+		&.metadata-btn {
+			&:hover {
+				background: $blue-60;
+				color: white;
+			}
+		}
+	}
+
+	.btn-text {
+		padding: $unit $unit-2x;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		border-radius: 8px;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+	}
+
+	.loading-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 400px;
+	}
+
+	.error-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit-4x;
+		padding: $unit-6x;
+	}
+
+	.album-form {
+		max-width: 800px;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-6x;
+	}
+
+	.error-message {
+		background: rgba(239, 68, 68, 0.1);
+		color: #dc2626;
+		padding: $unit-3x;
+		border-radius: $unit-2x;
+		border: 1px solid rgba(239, 68, 68, 0.2);
+	}
+
+	.form-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+
+		h2 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-10;
+			padding-bottom: $unit-2x;
+		}
+
+		.section-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			h2 {
+				border-bottom: none;
+				padding-bottom: 0;
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	.form-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: $unit-3x;
+
+		@include breakpoint('tablet') {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.photography-toggle,
+	.universe-toggle {
+		.toggle-label {
+			display: flex;
+			align-items: center;
+			gap: $unit-3x;
+			cursor: pointer;
+			user-select: none;
+		}
+
+		.toggle-input {
+			position: absolute;
+			opacity: 0;
+			pointer-events: none;
+
+			&:checked + .toggle-slider {
+				background-color: $blue-60;
+
+				&::before {
+					transform: translateX(20px);
+				}
+			}
+
+			&:disabled + .toggle-slider {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.toggle-slider {
+			position: relative;
+			width: 44px;
+			height: 24px;
+			background-color: $grey-80;
+			border-radius: 12px;
+			transition: background-color 0.2s ease;
+			flex-shrink: 0;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 2px;
+				width: 20px;
+				height: 20px;
+				background-color: white;
+				border-radius: 50%;
+				transition: transform 0.2s ease;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+			}
+		}
+
+		.toggle-content {
+			display: flex;
+			flex-direction: column;
+			gap: $unit-half;
+
+			.toggle-title {
+				font-weight: 500;
+				color: $grey-10;
+				font-size: 0.875rem;
+			}
+
+			.toggle-description {
+				font-size: 0.75rem;
+				color: $grey-50;
+				line-height: 1.4;
+			}
+		}
+	}
+
+	// Photo management styles
+	.empty-photos {
+		text-align: center;
+		padding: $unit-6x $unit-4x;
+		background: $grey-97;
+		border-radius: $unit-2x;
+		border: 2px dashed $grey-85;
+
+		.empty-icon {
+			font-size: 3rem;
+			margin-bottom: $unit-2x;
+		}
+
+		h3 {
+			font-size: 1.125rem;
+			font-weight: 600;
+			margin: 0 0 $unit;
+			color: $grey-20;
+		}
+
+		p {
+			margin: 0 0 $unit-3x;
+			color: $grey-50;
+		}
+	}
+
+	.photos-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: $unit-3x;
+	}
+
+	.photo-item {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+		background: white;
+		border-radius: $unit-2x;
+		overflow: hidden;
+		border: 1px solid $grey-90;
+		transition: all 0.2s ease;
+
+		&:hover {
+			border-color: $grey-70;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+			.remove-photo-btn {
+				opacity: 1;
+			}
+		}
+	}
+
+	.photo-preview {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+		aspect-ratio: 1;
+		overflow: hidden;
+
+		// Both elements occupy the same grid cell
+		.photo-click-area,
+		.remove-photo-btn {
+			grid-column: 1;
+			grid-row: 1;
+		}
+
+		.photo-click-area {
+			width: 100%;
+			height: 100%;
+			border: none;
+			padding: 0;
+			background: none;
+			cursor: pointer;
+			display: block;
+			z-index: 1;
+
+			&:disabled {
+				cursor: not-allowed;
+			}
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				display: block;
+			}
+		}
+
+		.remove-photo-btn {
+			justify-self: end;
+			align-self: start;
+			margin: $unit;
+			z-index: 2;
+			background: rgba(255, 255, 255, 0.9);
+			border: none;
+			border-radius: 50%;
+			width: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			color: #dc2626;
+			transition: all 0.2s ease;
+			opacity: 0;
+			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+			&:hover {
+				background: #dc2626;
+				color: white;
+				transform: scale(1.1);
+			}
+
+			&:disabled {
+				opacity: 0.3;
+				cursor: not-allowed;
+			}
+
+			svg {
+				width: 12px;
+				height: 12px;
+			}
+		}
+	}
+
+	.photo-info {
+		padding: $unit-2x;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+
+		.photo-filename {
+			font-size: 0.75rem;
+			color: $grey-20;
+			font-weight: 500;
+			word-break: break-all;
+		}
+
+		.photo-caption {
+			font-size: 0.75rem;
+			color: $grey-50;
+			font-style: italic;
+		}
+	}
+
+	.album-stats {
+		display: flex;
+		gap: $unit-6x;
+		padding: $unit-4x;
+		background: $grey-95;
+		border-radius: $unit-2x;
+
+		.stat {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: $unit-half;
+
+			.stat-value {
+				font-size: 1.5rem;
+				font-weight: 600;
+				color: $grey-10;
+			}
+
+			.stat-label {
+				font-size: 0.875rem;
+				color: $grey-40;
+			}
+		}
+	}
+
+	// Upload status styles
+	.upload-status {
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit-2x;
+		padding: $unit-3x;
+		margin-top: $unit-3x;
+
+		h4 {
+			margin: 0 0 $unit-2x 0;
+			color: $grey-20;
+			font-size: 0.925rem;
+			font-weight: 600;
+		}
+	}
+
+	.upload-progress {
+		margin-bottom: $unit-3x;
+
+		.progress-item {
+			display: flex;
+			align-items: center;
+			gap: $unit-2x;
+			margin-bottom: $unit-2x;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.progress-filename {
+			flex: 1;
+			font-size: 0.875rem;
+			color: $grey-30;
+			font-weight: 500;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.progress-bar {
+			flex: 2;
+			height: 8px;
+			background: $grey-90;
+			border-radius: 4px;
+			overflow: hidden;
+
+			.progress-fill {
+				height: 100%;
+				background: #3b82f6;
+				transition: width 0.3s ease;
+				border-radius: 4px;
+			}
+		}
+
+		.progress-percentage {
+			font-size: 0.75rem;
+			color: $grey-40;
+			font-weight: 500;
+			width: 40px;
+			text-align: right;
+		}
+	}
+
+	.upload-errors {
+		.error-item {
+			color: #dc2626;
+			font-size: 0.875rem;
+			margin-bottom: $unit;
+			padding: $unit;
+			background: rgba(239, 68, 68, 0.05);
+			border-radius: $unit;
+			border: 1px solid rgba(239, 68, 68, 0.1);
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/admin/albums/new/+page.svelte b/src/routes/admin/albums/new/+page.svelte
new file mode 100644
index 0000000..f730092
--- /dev/null
+++ b/src/routes/admin/albums/new/+page.svelte
@@ -0,0 +1,488 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import Input from '$lib/components/admin/Input.svelte'
+	import FormFieldWrapper from '$lib/components/admin/FormFieldWrapper.svelte'
+	import MediaLibraryModal from '$lib/components/admin/MediaLibraryModal.svelte'
+	import MediaDetailsModal from '$lib/components/admin/MediaDetailsModal.svelte'
+	import GalleryUploader from '$lib/components/admin/GalleryUploader.svelte'
+	import SaveActionsGroup from '$lib/components/admin/SaveActionsGroup.svelte'
+	import AlbumMetadataPopover from '$lib/components/admin/AlbumMetadataPopover.svelte'
+
+	// Form state
+	let title = $state('')
+	let slug = $state('')
+	let description = $state('')
+	let date = $state('')
+	let location = $state('')
+	let isPhotography = $state(false)
+	let showInUniverse = $state(false)
+	let status = $state<'draft' | 'published'>('draft')
+
+	// UI state
+	let isSaving = $state(false)
+	let error = $state('')
+
+	// Photo management state
+	let isMediaLibraryOpen = $state(false)
+	let albumPhotos = $state<any[]>([])
+	let isManagingPhotos = $state(false)
+
+	// Media details modal state
+	let isMediaDetailsOpen = $state(false)
+	let selectedMedia = $state<any>(null)
+
+	// Metadata popover state
+	let isMetadataOpen = $state(false)
+	let metadataButtonElement: HTMLButtonElement
+
+	// Auto-generate slug from title
+	$effect(() => {
+		if (title && !slug) {
+			slug = generateSlug(title)
+		}
+	})
+
+	function generateSlug(text: string): string {
+		return text
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	}
+
+	async function handleSave(publishStatus: 'draft' | 'published') {
+		if (!title.trim()) {
+			error = 'Title is required'
+			return
+		}
+
+		if (!slug.trim()) {
+			error = 'Slug is required'
+			return
+		}
+
+		try {
+			isSaving = true
+			error = ''
+
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const albumData = {
+				title: title.trim(),
+				slug: slug.trim(),
+				description: description.trim() || null,
+				date: date ? new Date(date).toISOString() : null,
+				location: location.trim() || null,
+				isPhotography,
+				showInUniverse,
+				status: publishStatus
+			}
+
+			const response = await fetch('/api/albums', {
+				method: 'POST',
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(albumData)
+			})
+
+			if (!response.ok) {
+				const errorData = await response.json()
+				throw new Error(errorData.message || 'Failed to create album')
+			}
+
+			const album = await response.json()
+
+			// Add selected photos to the newly created album
+			if (albumPhotos.length > 0) {
+				console.log(`Adding ${albumPhotos.length} photos to newly created album ${album.id}`)
+				
+				try {
+					const addedPhotos = []
+					for (let i = 0; i < albumPhotos.length; i++) {
+						const media = albumPhotos[i]
+						console.log(`Adding photo ${media.id} to album ${album.id}`)
+						
+						const photoResponse = await fetch(`/api/albums/${album.id}/photos`, {
+							method: 'POST',
+							headers: {
+								Authorization: `Basic ${auth}`,
+								'Content-Type': 'application/json'
+							},
+							body: JSON.stringify({
+								mediaId: media.id,
+								displayOrder: i
+							})
+						})
+
+						if (!photoResponse.ok) {
+							const errorData = await photoResponse.text()
+							console.error(`Failed to add photo ${media.filename}:`, photoResponse.status, errorData)
+							// Continue with other photos even if one fails
+						} else {
+							const photo = await photoResponse.json()
+							addedPhotos.push(photo)
+							console.log(`Successfully added photo ${photo.id} to album`)
+						}
+					}
+					
+					console.log(`Successfully added ${addedPhotos.length} out of ${albumPhotos.length} photos to album`)
+				} catch (photoError) {
+					console.error('Error adding photos to album:', photoError)
+					// Don't fail the whole creation - just log the error
+				}
+			}
+
+			// Redirect to album edit page
+			goto(`/admin/albums/${album.id}/edit`)
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to create album'
+			console.error('Failed to create album:', err)
+		} finally {
+			isSaving = false
+		}
+	}
+
+	function handleCancel() {
+		goto('/admin/albums')
+	}
+
+	// Photo management functions (simplified for new album - no API calls yet)
+	function handleMediaLibraryClose() {
+		isMediaLibraryOpen = false
+	}
+
+	function handlePhotoClick(photo: any) {
+		// Convert album photo to media format for MediaDetailsModal
+		selectedMedia = {
+			id: photo.mediaId || photo.id,
+			filename: photo.filename,
+			originalName: photo.filename,
+			mimeType: photo.mimeType || 'image/jpeg',
+			size: photo.size || 0,
+			url: photo.url,
+			thumbnailUrl: photo.thumbnailUrl,
+			width: photo.width,
+			height: photo.height,
+			altText: photo.altText || '',
+			description: photo.description || '',
+			isPhotography: photo.isPhotography || false,
+			createdAt: photo.createdAt,
+			updatedAt: photo.updatedAt
+		}
+		isMediaDetailsOpen = true
+	}
+
+	function handleMediaDetailsClose() {
+		isMediaDetailsOpen = false
+		selectedMedia = null
+	}
+
+	function handleMediaUpdate(updatedMedia: any) {
+		// Update the photo in the album photos list
+		const photoIndex = albumPhotos.findIndex(
+			(photo) => (photo.mediaId || photo.id) === updatedMedia.id
+		)
+		if (photoIndex !== -1) {
+			albumPhotos[photoIndex] = {
+				...albumPhotos[photoIndex],
+				filename: updatedMedia.filename,
+				altText: updatedMedia.altText,
+				description: updatedMedia.description,
+				isPhotography: updatedMedia.isPhotography
+			}
+			albumPhotos = [...albumPhotos] // Trigger reactivity
+		}
+		selectedMedia = updatedMedia
+	}
+
+	function handlePhotoReorder(reorderedPhotos: any[]) {
+		albumPhotos = reorderedPhotos
+	}
+
+	function handleGalleryAdd(newPhotos: any[]) {
+		if (newPhotos.length > 0) {
+			albumPhotos = [...albumPhotos, ...newPhotos]
+		}
+	}
+
+	function handleGalleryRemove(itemToRemove: any, index: number) {
+		albumPhotos = albumPhotos.filter((_, i) => i !== index)
+	}
+
+	// Metadata popover handlers
+	function handleMetadataUpdate(key: string, value: any) {
+		if (key === 'date') {
+			date = value ? new Date(value).toISOString().split('T')[0] : ''
+		} else {
+			// Update the form state variable
+			switch (key) {
+				case 'slug':
+					slug = value
+					break
+				case 'location':
+					location = value
+					break
+				case 'isPhotography':
+					isPhotography = value
+					break
+				case 'showInUniverse':
+					showInUniverse = value
+					break
+			}
+		}
+	}
+
+	// Mock album object for metadata popover
+	const mockAlbum = $derived({
+		id: null,
+		title,
+		slug,
+		description,
+		date: date ? new Date(date).toISOString() : null,
+		location,
+		isPhotography,
+		showInUniverse,
+		status,
+		createdAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString()
+	})
+
+	const canSave = $derived(title.trim().length > 0 && slug.trim().length > 0)
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-left">
+			<button class="btn-icon" onclick={handleCancel}>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div class="header-actions">
+			<div class="metadata-popover-container">
+				<button
+					bind:this={metadataButtonElement}
+					class="btn btn-text"
+					onclick={(e) => {
+						e.stopPropagation()
+						isMetadataOpen = !isMetadataOpen
+					}}
+					disabled={isSaving}
+				>
+					<svg width="16" height="16" viewBox="0 0 56 56" fill="none">
+						<path
+							fill="currentColor"
+							d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"
+						/>
+					</svg>
+					Metadata
+				</button>
+
+				{#if isMetadataOpen && metadataButtonElement}
+					<AlbumMetadataPopover
+						album={mockAlbum}
+						triggerElement={metadataButtonElement}
+						onUpdate={handleMetadataUpdate}
+						onDelete={() => {}}
+						onClose={() => (isMetadataOpen = false)}
+					/>
+				{/if}
+			</div>
+			<SaveActionsGroup
+				{status}
+				onSave={handleSave}
+				disabled={isSaving}
+				isLoading={isSaving}
+				{canSave}
+			/>
+		</div>
+	</header>
+
+	<div class="album-form">
+		{#if error}
+			<div class="error-message">{error}</div>
+		{/if}
+
+		<div class="form-section">
+			<h2>Album Details</h2>
+
+			<Input
+				label="Title"
+				bind:value={title}
+				placeholder="Enter album title"
+				required
+				disabled={isSaving}
+				fullWidth
+			/>
+
+			<Input
+				type="textarea"
+				label="Description"
+				bind:value={description}
+				placeholder="Describe this album..."
+				rows={3}
+				disabled={isSaving}
+				fullWidth
+			/>
+		</div>
+
+		<!-- Photo Management -->
+		<div class="form-section">
+			<h2>Photos ({albumPhotos.length})</h2>
+
+			<GalleryUploader
+				label="Album Photos"
+				bind:value={albumPhotos}
+				onUpload={handleGalleryAdd}
+				onReorder={handlePhotoReorder}
+				onRemove={handleGalleryRemove}
+				showBrowseLibrary={true}
+				placeholder="Add photos to this album by uploading or selecting from your media library"
+				helpText="Drag photos to reorder them. Click on photos to edit metadata."
+			/>
+		</div>
+	</div>
+</AdminPage>
+
+<!-- Media Library Modal -->
+<MediaLibraryModal
+	bind:isOpen={isMediaLibraryOpen}
+	mode="multiple"
+	fileType="image"
+	onSelect={handleGalleryAdd}
+	onClose={handleMediaLibraryClose}
+/>
+
+<!-- Media Details Modal -->
+<MediaDetailsModal
+	bind:isOpen={isMediaDetailsOpen}
+	media={selectedMedia}
+	onClose={handleMediaDetailsClose}
+	onUpdate={handleMediaUpdate}
+/>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+
+		h1 {
+			font-size: 1.5rem;
+			font-weight: 700;
+			margin: 0;
+			color: $grey-10;
+		}
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn-text {
+		padding: $unit $unit-2x;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		border-radius: 8px;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+	}
+
+	.metadata-popover-container {
+		position: relative;
+	}
+
+	.album-form {
+		max-width: 800px;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-6x;
+	}
+
+	.error-message {
+		background: rgba(239, 68, 68, 0.1);
+		color: #dc2626;
+		padding: $unit-3x;
+		border-radius: $unit-2x;
+		border: 1px solid rgba(239, 68, 68, 0.2);
+	}
+
+	.form-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+
+		h2 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0;
+			color: $grey-10;
+			padding-bottom: $unit-2x;
+		}
+	}
+</style>
diff --git a/src/routes/admin/buttons/+page.svelte b/src/routes/admin/buttons/+page.svelte
new file mode 100644
index 0000000..b11f284
--- /dev/null
+++ b/src/routes/admin/buttons/+page.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+</script>
+
+<AdminPage title="Button Components Demo">
+	<div class="button-demo">
+		<section>
+			<h2>Variants</h2>
+			<div class="button-group">
+				<Button>Primary</Button>
+				<Button variant="secondary">Secondary</Button>
+				<Button variant="danger">Danger</Button>
+				<Button variant="ghost">Ghost</Button>
+				<Button variant="text">Text</Button>
+			</div>
+		</section>
+
+		<section>
+			<h2>Sizes</h2>
+			<div class="button-group">
+				<Button buttonSize="small">Small</Button>
+				<Button buttonSize="medium">Medium</Button>
+				<Button buttonSize="large">Large</Button>
+			</div>
+		</section>
+
+		<section>
+			<h2>Icon Buttons</h2>
+			<div class="button-group">
+				<Button buttonSize="small" iconOnly>
+					<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<path
+							d="M8 4v8m4-4H4"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Button>
+				<Button buttonSize="medium" iconOnly>
+					<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+						<path
+							d="M9 5v8m4-4H5"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Button>
+				<Button buttonSize="large" iconOnly>
+					<svg slot="icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+						<path
+							d="M10 6v8m4-4H6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Button>
+				<Button buttonSize="icon" iconOnly variant="ghost">
+					<svg slot="icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
+						<path
+							d="M6 6l6 6m0-6l-6 6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Button>
+			</div>
+		</section>
+
+		<section>
+			<h2>Buttons with Icons</h2>
+			<div class="button-group">
+				<Button>
+					<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<path
+							d="M8 4v8m4-4H4"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+					Add Item
+				</Button>
+				<Button iconPosition="right" variant="secondary">
+					Next
+					<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<path
+							d="M6 4l4 4-4 4"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</Button>
+			</div>
+		</section>
+
+		<section>
+			<h2>States</h2>
+			<div class="button-group">
+				<Button disabled>Disabled</Button>
+				<Button loading>Loading</Button>
+				<Button active variant="ghost">Active</Button>
+			</div>
+		</section>
+
+		<section>
+			<h2>Square Buttons</h2>
+			<div class="button-group">
+				<Button pill={false} buttonSize="small">Small Square</Button>
+				<Button pill={false}>Medium Square</Button>
+				<Button pill={false} buttonSize="large">Large Square</Button>
+			</div>
+		</section>
+
+		<section>
+			<h2>Full Width</h2>
+			<Button fullWidth>Full Width Button</Button>
+		</section>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	.button-demo {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+		max-width: 800px;
+	}
+
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+
+		h2 {
+			font-size: 18px;
+			font-weight: 600;
+			color: $grey-20;
+			margin: 0;
+		}
+	}
+
+	.button-group {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+		flex-wrap: wrap;
+	}
+</style>
diff --git a/src/routes/admin/form-components-test/+page.svelte b/src/routes/admin/form-components-test/+page.svelte
new file mode 100644
index 0000000..2bba19b
--- /dev/null
+++ b/src/routes/admin/form-components-test/+page.svelte
@@ -0,0 +1,293 @@
+<script lang="ts">
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import MediaInput from '$lib/components/admin/MediaInput.svelte'
+	import ImagePicker from '$lib/components/admin/ImagePicker.svelte'
+	import GalleryManager from '$lib/components/admin/GalleryManager.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import type { Media } from '@prisma/client'
+
+	// State for different components
+	let singleMedia = $state<Media | null>(null)
+	let multipleMedia = $state<Media[]>([])
+	let logoImage = $state<Media | null>(null)
+	let featuredImage = $state<Media | null>(null)
+	let galleryImages = $state<Media[]>([])
+	let projectGallery = $state<Media[]>([])
+
+	function handleSingleMediaSelect(media: Media | null) {
+		singleMedia = media
+		console.log('Single media selected:', media)
+	}
+
+	function handleMultipleMediaSelect(media: Media[]) {
+		multipleMedia = media
+		console.log('Multiple media selected:', media)
+	}
+
+	function handleLogoSelect(media: Media | null) {
+		logoImage = media
+		console.log('Logo selected:', media)
+	}
+
+	function handleFeaturedImageSelect(media: Media | null) {
+		featuredImage = media
+		console.log('Featured image selected:', media)
+	}
+
+	function handleGallerySelect(media: Media[]) {
+		galleryImages = media
+		console.log('Gallery images selected:', media)
+	}
+
+	function handleProjectGallerySelect(media: Media[]) {
+		projectGallery = media
+		console.log('Project gallery selected:', media)
+	}
+
+	function logAllValues() {
+		console.log('All form values:', {
+			singleMedia,
+			multipleMedia,
+			logoImage,
+			featuredImage,
+			galleryImages,
+			projectGallery
+		})
+	}
+
+	function clearAllValues() {
+		singleMedia = null
+		multipleMedia = []
+		logoImage = null
+		featuredImage = null
+		galleryImages = []
+		projectGallery = []
+	}
+</script>
+
+<AdminPage title="Form Components Test" subtitle="Test all media form integration components">
+	<div class="test-container">
+		<!-- MediaInput Tests -->
+		<section class="test-section">
+			<h2>MediaInput Component</h2>
+			<p>Generic input component for media selection with preview.</p>
+
+			<div class="form-grid">
+				<MediaInput
+					label="Single Media File"
+					bind:value={singleMedia}
+					mode="single"
+					fileType="all"
+					placeholder="Choose any media file"
+				/>
+
+				<MediaInput
+					label="Multiple Media Files"
+					bind:value={multipleMedia}
+					mode="multiple"
+					fileType="all"
+					placeholder="Choose multiple files"
+				/>
+
+				<MediaInput
+					label="Single Image Only"
+					bind:value={logoImage}
+					mode="single"
+					fileType="image"
+					placeholder="Choose an image"
+					required={true}
+				/>
+			</div>
+		</section>
+
+		<!-- ImagePicker Tests -->
+		<section class="test-section">
+			<h2>ImagePicker Component</h2>
+			<p>Specialized image picker with enhanced preview and aspect ratio support.</p>
+
+			<div class="form-grid">
+				<ImagePicker
+					label="Featured Image"
+					bind:value={featuredImage}
+					aspectRatio="16:9"
+					placeholder="Select a featured image"
+					showDimensions={true}
+				/>
+
+				<ImagePicker
+					label="Square Logo"
+					bind:value={logoImage}
+					aspectRatio="1:1"
+					placeholder="Select a square logo"
+					required={true}
+				/>
+			</div>
+		</section>
+
+		<!-- GalleryManager Tests -->
+		<section class="test-section">
+			<h2>GalleryManager Component</h2>
+			<p>Multiple image management with drag-and-drop reordering.</p>
+
+			<div class="form-column">
+				<GalleryManager label="Image Gallery" bind:value={galleryImages} showFileInfo={false} />
+
+				<GalleryManager
+					label="Project Gallery (Max 6 images)"
+					bind:value={projectGallery}
+					maxItems={6}
+					showFileInfo={true}
+				/>
+			</div>
+		</section>
+
+		<!-- Form Actions -->
+		<section class="test-section">
+			<h2>Form Actions</h2>
+			<div class="actions-grid">
+				<Button variant="primary" onclick={logAllValues}>Log All Values</Button>
+				<Button variant="ghost" onclick={clearAllValues}>Clear All</Button>
+			</div>
+		</section>
+
+		<!-- Values Display -->
+		<section class="test-section">
+			<h2>Current Values</h2>
+			<div class="values-display">
+				<div class="value-item">
+					<h4>Single Media:</h4>
+					<pre>{JSON.stringify(singleMedia?.filename || null, null, 2)}</pre>
+				</div>
+
+				<div class="value-item">
+					<h4>Multiple Media ({multipleMedia.length}):</h4>
+					<pre>{JSON.stringify(
+							multipleMedia.map((m) => m.filename),
+							null,
+							2
+						)}</pre>
+				</div>
+
+				<div class="value-item">
+					<h4>Featured Image:</h4>
+					<pre>{JSON.stringify(featuredImage?.filename || null, null, 2)}</pre>
+				</div>
+
+				<div class="value-item">
+					<h4>Gallery Images ({galleryImages.length}):</h4>
+					<pre>{JSON.stringify(
+							galleryImages.map((m) => m.filename),
+							null,
+							2
+						)}</pre>
+				</div>
+
+				<div class="value-item">
+					<h4>Project Gallery ({projectGallery.length}):</h4>
+					<pre>{JSON.stringify(
+							projectGallery.map((m) => m.filename),
+							null,
+							2
+						)}</pre>
+				</div>
+			</div>
+		</section>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	.test-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: $unit-4x;
+	}
+
+	.test-section {
+		margin-bottom: $unit-6x;
+		padding: $unit-4x;
+		background-color: white;
+		border-radius: $card-corner-radius;
+		border: 1px solid $grey-90;
+
+		h2 {
+			margin: 0 0 $unit 0;
+			font-size: 1.25rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		p {
+			margin: 0 0 $unit-3x 0;
+			color: $grey-30;
+			font-size: 0.875rem;
+		}
+	}
+
+	.form-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: $unit-4x;
+	}
+
+	.form-column {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+	}
+
+	.actions-grid {
+		display: flex;
+		gap: $unit-2x;
+		justify-content: center;
+	}
+
+	.values-display {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: $unit-3x;
+	}
+
+	.value-item {
+		h4 {
+			margin: 0 0 $unit 0;
+			font-size: 0.875rem;
+			font-weight: 600;
+			color: $grey-20;
+		}
+
+		pre {
+			background-color: $grey-95;
+			padding: $unit-2x;
+			border-radius: $card-corner-radius;
+			font-size: 0.75rem;
+			color: $grey-10;
+			overflow-x: auto;
+			margin: 0;
+			white-space: pre-wrap;
+			word-break: break-all;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.test-container {
+			padding: $unit-2x;
+		}
+
+		.test-section {
+			padding: $unit-3x;
+		}
+
+		.form-grid {
+			grid-template-columns: 1fr;
+			gap: $unit-3x;
+		}
+
+		.actions-grid {
+			flex-direction: column;
+		}
+
+		.values-display {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/routes/admin/image-uploader-test/+page.svelte b/src/routes/admin/image-uploader-test/+page.svelte
new file mode 100644
index 0000000..675a0ed
--- /dev/null
+++ b/src/routes/admin/image-uploader-test/+page.svelte
@@ -0,0 +1,272 @@
+<script lang="ts">
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import ImageUploader from '$lib/components/admin/ImageUploader.svelte'
+	import type { Media } from '@prisma/client'
+
+	let singleImage = $state<Media | null>(null)
+	let logoImage = $state<Media | null>(null)
+	let bannerImage = $state<Media | null>(null)
+
+	function handleSingleImageUpload(media: Media) {
+		singleImage = media
+		console.log('Single image uploaded:', media)
+	}
+
+	function handleLogoUpload(media: Media) {
+		logoImage = media
+		console.log('Logo uploaded:', media)
+	}
+
+	function handleBannerUpload(media: Media) {
+		bannerImage = media
+		console.log('Banner uploaded:', media)
+	}
+
+	function logAllValues() {
+		console.log('All uploaded images:', {
+			singleImage,
+			logoImage,
+			bannerImage
+		})
+	}
+
+	function clearAll() {
+		singleImage = null
+		logoImage = null
+		bannerImage = null
+	}
+</script>
+
+<AdminPage title="ImageUploader Test" subtitle="Test the new direct upload functionality">
+	<div class="test-container">
+		<!-- Basic Image Upload -->
+		<section class="test-section">
+			<h2>Basic Image Upload</h2>
+			<p>Standard image upload with alt text support.</p>
+
+			<ImageUploader
+				label="Featured Image"
+				bind:value={singleImage}
+				onUpload={handleSingleImageUpload}
+				allowAltText={true}
+				helpText="Upload any image to test the basic functionality."
+			/>
+		</section>
+
+		<!-- Square Logo Upload -->
+		<section class="test-section">
+			<h2>Square Logo Upload</h2>
+			<p>Image upload with 1:1 aspect ratio constraint.</p>
+
+			<ImageUploader
+				label="Company Logo"
+				bind:value={logoImage}
+				onUpload={handleLogoUpload}
+				aspectRatio="1:1"
+				allowAltText={true}
+				required={true}
+				maxFileSize={2}
+				helpText="Upload a square logo (1:1 aspect ratio). Max 2MB."
+			/>
+		</section>
+
+		<!-- Banner Image Upload -->
+		<section class="test-section">
+			<h2>Banner Image Upload</h2>
+			<p>Wide banner image with 16:9 aspect ratio.</p>
+
+			<ImageUploader
+				label="Hero Banner"
+				bind:value={bannerImage}
+				onUpload={handleBannerUpload}
+				aspectRatio="16:9"
+				allowAltText={true}
+				showBrowseLibrary={true}
+				placeholder="Drag and drop a banner image here"
+				helpText="Recommended size: 1920x1080 pixels for best quality."
+			/>
+		</section>
+
+		<!-- Form Actions -->
+		<section class="test-section">
+			<h2>Actions</h2>
+			<div class="actions-grid">
+				<button type="button" class="btn btn-primary" onclick={logAllValues}>
+					Log All Values
+				</button>
+				<button type="button" class="btn btn-ghost" onclick={clearAll}> Clear All </button>
+			</div>
+		</section>
+
+		<!-- Values Display -->
+		<section class="test-section">
+			<h2>Current Values</h2>
+			<div class="values-display">
+				<div class="value-item">
+					<h4>Single Image:</h4>
+					<pre>{JSON.stringify(
+							singleImage
+								? {
+										id: singleImage.id,
+										filename: singleImage.filename,
+										altText: singleImage.altText,
+										description: singleImage.description
+									}
+								: null,
+							null,
+							2
+						)}</pre>
+				</div>
+
+				<div class="value-item">
+					<h4>Logo Image:</h4>
+					<pre>{JSON.stringify(
+							logoImage
+								? {
+										id: logoImage.id,
+										filename: logoImage.filename,
+										altText: logoImage.altText,
+										description: logoImage.description
+									}
+								: null,
+							null,
+							2
+						)}</pre>
+				</div>
+
+				<div class="value-item">
+					<h4>Banner Image:</h4>
+					<pre>{JSON.stringify(
+							bannerImage
+								? {
+										id: bannerImage.id,
+										filename: bannerImage.filename,
+										altText: bannerImage.altText,
+										description: bannerImage.description
+									}
+								: null,
+							null,
+							2
+						)}</pre>
+				</div>
+			</div>
+		</section>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	.test-container {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: $unit-4x;
+	}
+
+	.test-section {
+		margin-bottom: $unit-6x;
+		padding: $unit-4x;
+		background-color: white;
+		border-radius: $card-corner-radius;
+		border: 1px solid $grey-90;
+
+		h2 {
+			margin: 0 0 $unit 0;
+			font-size: 1.25rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		p {
+			margin: 0 0 $unit-3x 0;
+			color: $grey-30;
+			font-size: 0.875rem;
+		}
+	}
+
+	.actions-grid {
+		display: flex;
+		gap: $unit-2x;
+		justify-content: center;
+	}
+
+	.values-display {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: $unit-3x;
+	}
+
+	.value-item {
+		h4 {
+			margin: 0 0 $unit 0;
+			font-size: 0.875rem;
+			font-weight: 600;
+			color: $grey-20;
+		}
+
+		pre {
+			background-color: $grey-95;
+			padding: $unit-2x;
+			border-radius: $card-corner-radius;
+			font-size: 0.75rem;
+			color: $grey-10;
+			overflow-x: auto;
+			margin: 0;
+			white-space: pre-wrap;
+			word-break: break-all;
+		}
+	}
+
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		font-weight: 500;
+		border: none;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		outline: none;
+		position: relative;
+		white-space: nowrap;
+		padding: $unit $unit-2x;
+		font-size: 14px;
+		border-radius: 24px;
+		min-height: 36px;
+
+		&.btn-primary {
+			background-color: $red-60;
+			color: white;
+
+			&:hover {
+				background-color: $red-80;
+			}
+		}
+
+		&.btn-ghost {
+			background-color: transparent;
+			color: $grey-20;
+
+			&:hover {
+				background-color: $grey-5;
+				color: $grey-00;
+			}
+		}
+	}
+
+	@media (max-width: 768px) {
+		.test-container {
+			padding: $unit-2x;
+		}
+
+		.test-section {
+			padding: $unit-3x;
+		}
+
+		.actions-grid {
+			flex-direction: column;
+		}
+
+		.values-display {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/routes/admin/inputs/+page.svelte b/src/routes/admin/inputs/+page.svelte
new file mode 100644
index 0000000..226f9d3
--- /dev/null
+++ b/src/routes/admin/inputs/+page.svelte
@@ -0,0 +1,257 @@
+<script lang="ts">
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Input from '$lib/components/admin/Input.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+
+	let textValue = $state('')
+	let emailValue = $state('')
+	let passwordValue = $state('')
+	let urlValue = $state('https://')
+	let searchValue = $state('')
+	let numberValue = $state(0)
+	let textareaValue = $state('')
+	let colorValue = $state('#ff0000')
+	let withErrorValue = $state('')
+	let disabledValue = $state('Disabled input')
+	let readonlyValue = $state('Readonly input')
+	let charLimitValue = $state('')
+</script>
+
+<AdminPage title="Input Components Demo">
+	<div class="input-demo">
+		<section>
+			<h2>Basic Inputs</h2>
+			<div class="input-group">
+				<Input
+					label="Text Input"
+					placeholder="Enter some text"
+					bind:value={textValue}
+					helpText="This is a helpful hint"
+				/>
+
+				<Input
+					type="email"
+					label="Email Input"
+					placeholder="email@example.com"
+					bind:value={emailValue}
+					required
+				/>
+
+				<Input
+					type="password"
+					label="Password Input"
+					placeholder="Enter password"
+					bind:value={passwordValue}
+					required
+				/>
+			</div>
+		</section>
+
+		<section>
+			<h2>Specialized Inputs</h2>
+			<div class="input-group">
+				<Input
+					type="url"
+					label="URL Input"
+					placeholder="https://example.com"
+					bind:value={urlValue}
+				/>
+
+				<Input
+					type="search"
+					label="Search Input"
+					placeholder="Search..."
+					bind:value={searchValue}
+					prefixIcon
+				>
+					<svg slot="prefix" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5" />
+						<path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+					</svg>
+				</Input>
+
+				<Input
+					type="number"
+					label="Number Input"
+					bind:value={numberValue}
+					min={0}
+					max={100}
+					step={5}
+				/>
+
+				<Input type="color" label="Color Input" bind:value={colorValue} />
+			</div>
+		</section>
+
+		<section>
+			<h2>Textarea</h2>
+			<Input
+				type="textarea"
+				label="Description"
+				placeholder="Enter a detailed description..."
+				bind:value={textareaValue}
+				rows={4}
+				helpText="Markdown is supported"
+			/>
+		</section>
+
+		<section>
+			<h2>Input Sizes</h2>
+			<div class="input-group">
+				<Input buttonSize="small" label="Small Input" placeholder="Small size" />
+
+				<Input buttonSize="medium" label="Medium Input" placeholder="Medium size (default)" />
+
+				<Input buttonSize="large" label="Large Input" placeholder="Large size" />
+			</div>
+		</section>
+
+		<section>
+			<h2>Input States</h2>
+			<div class="input-group">
+				<Input
+					label="Input with Error"
+					placeholder="Try typing something"
+					bind:value={withErrorValue}
+					error={withErrorValue.length > 0 && withErrorValue.length < 3
+						? 'Too short! Minimum 3 characters'
+						: ''}
+				/>
+
+				<Input label="Disabled Input" bind:value={disabledValue} disabled />
+
+				<Input label="Readonly Input" bind:value={readonlyValue} readonly />
+			</div>
+		</section>
+
+		<section>
+			<h2>Input with Icons</h2>
+			<div class="input-group">
+				<Input label="With Prefix Icon" placeholder="Username" prefixIcon>
+					<svg slot="prefix" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="M4 14c0-2.21 1.79-4 4-4s4 1.79 4 4"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Input>
+
+				<Input label="With Suffix Icon" placeholder="Email" type="email" suffixIcon>
+					<svg slot="suffix" width="16" height="16" viewBox="0 0 16 16" fill="none">
+						<rect
+							x="2"
+							y="4"
+							width="12"
+							height="8"
+							rx="1"
+							stroke="currentColor"
+							stroke-width="1.5"
+						/>
+						<path
+							d="M2 5l6 3 6-3"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</Input>
+			</div>
+		</section>
+
+		<section>
+			<h2>Character Limit</h2>
+			<Input
+				label="Bio"
+				placeholder="Tell us about yourself..."
+				bind:value={charLimitValue}
+				maxLength={100}
+				showCharCount
+				helpText="Keep it brief"
+			/>
+
+			<Input
+				type="textarea"
+				label="Tweet-style Input"
+				placeholder="What's happening?"
+				maxLength={280}
+				showCharCount
+				rows={3}
+			/>
+		</section>
+
+		<section>
+			<h2>Form Example</h2>
+			<form class="demo-form" on:submit|preventDefault>
+				<Input label="Project Name" placeholder="My Awesome Project" required />
+
+				<Input
+					type="url"
+					label="Project URL"
+					placeholder="https://example.com"
+					helpText="Include the full URL with https://"
+				/>
+
+				<Input
+					type="textarea"
+					label="Project Description"
+					placeholder="Describe your project..."
+					rows={4}
+					maxLength={500}
+					showCharCount
+				/>
+
+				<div class="form-actions">
+					<Button variant="secondary">Cancel</Button>
+					<Button variant="primary" type="submit">Save Project</Button>
+				</div>
+			</form>
+		</section>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	.input-demo {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-5x;
+		max-width: 800px;
+	}
+
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+
+		h2 {
+			font-size: 18px;
+			font-weight: 600;
+			color: $grey-20;
+			margin: 0;
+		}
+	}
+
+	.input-group {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: $unit-3x;
+	}
+
+	.demo-form {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+		padding: $unit-3x;
+		background-color: $grey-97;
+		border-radius: 8px;
+	}
+
+	.form-actions {
+		display: flex;
+		gap: $unit-2x;
+		justify-content: flex-end;
+		margin-top: $unit-2x;
+	}
+</style>
diff --git a/src/routes/admin/login/+page.svelte b/src/routes/admin/login/+page.svelte
new file mode 100644
index 0000000..26025c6
--- /dev/null
+++ b/src/routes/admin/login/+page.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import Input from '$lib/components/admin/Input.svelte'
+
+	let password = $state('')
+	let error = $state('')
+	let isLoading = $state(false)
+
+	async function handleLogin(e: Event) {
+		e.preventDefault()
+		error = ''
+		isLoading = true
+
+		try {
+			// Test the password by making an authenticated request
+			const response = await fetch('/api/media', {
+				headers: {
+					Authorization: `Basic ${btoa(`admin:${password}`)}`
+				}
+			})
+
+			if (response.ok) {
+				// Store auth in localStorage
+				localStorage.setItem('admin_auth', btoa(`admin:${password}`))
+				goto('/admin')
+			} else if (response.status === 401) {
+				error = 'Invalid password'
+			} else {
+				error = 'Something went wrong'
+			}
+		} catch (err) {
+			error = 'Failed to connect to server'
+		} finally {
+			isLoading = false
+		}
+	}
+</script>
+
+<div class="login-page">
+	<div class="login-card">
+		<form onsubmit={handleLogin}>
+			<Input
+				type="password"
+				label="Password"
+				bind:value={password}
+				required
+				autofocus
+				placeholder="Enter password"
+				disabled={isLoading}
+			/>
+
+			{#if error}
+				<div class="error-message">{error}</div>
+			{/if}
+
+			<button type="submit" disabled={isLoading} class="login-btn">
+				{isLoading ? 'Logging in...' : 'Login'}
+			</button>
+		</form>
+	</div>
+</div>
+
+<style lang="scss">
+	.login-page {
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+
+	.login-card {
+		width: 100%;
+		max-width: 320px;
+
+		form {
+			display: flex;
+			flex-direction: column;
+			gap: $unit;
+		}
+	}
+
+	// Input component handles its own styling
+
+	.error-message {
+		background-color: rgba(255, 0, 0, 0.1);
+		color: #d33;
+		padding: $unit $unit-2x;
+		border-radius: 50px;
+		text-align: center;
+		font-size: 0.875rem;
+	}
+
+	.login-btn {
+		padding: $unit-2x $unit-3x;
+		background-color: #ff3333;
+		color: white;
+		border: none;
+		border-radius: 50px;
+		font-size: 1rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition:
+			background-color 0.2s ease,
+			transform 0.1s ease;
+
+		&:hover:not(:disabled) {
+			background-color: #e62e2e;
+			transform: translateY(-1px);
+		}
+
+		&:active:not(:disabled) {
+			transform: translateY(0);
+		}
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+			transform: none;
+		}
+	}
+</style>
diff --git a/src/routes/admin/media-library-test/+page.svelte b/src/routes/admin/media-library-test/+page.svelte
new file mode 100644
index 0000000..a38ccb1
--- /dev/null
+++ b/src/routes/admin/media-library-test/+page.svelte
@@ -0,0 +1,258 @@
+<script lang="ts">
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import MediaLibraryModal from '$lib/components/admin/MediaLibraryModal.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import type { Media } from '@prisma/client'
+
+	let showSingleModal = $state(false)
+	let showMultipleModal = $state(false)
+	let selectedSingleMedia = $state<Media | null>(null)
+	let selectedMultipleMedia = $state<Media[]>([])
+
+	function handleSingleSelect(media: Media) {
+		selectedSingleMedia = media
+		console.log('Single media selected:', media)
+	}
+
+	function handleMultipleSelect(media: Media[]) {
+		selectedMultipleMedia = media
+		console.log('Multiple media selected:', media)
+	}
+
+	function openSingleModal() {
+		showSingleModal = true
+	}
+
+	function openMultipleModal() {
+		showMultipleModal = true
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+	}
+</script>
+
+<AdminPage title="Media Library Test" subtitle="Test the MediaLibraryModal component">
+	<div class="test-container">
+		<section class="test-section">
+			<h2>Single Selection Mode</h2>
+			<p>Test selecting a single media item.</p>
+
+			<Button variant="primary" onclick={openSingleModal}>Open Single Selection Modal</Button>
+
+			{#if selectedSingleMedia}
+				<div class="selected-media">
+					<h3>Selected Media:</h3>
+					<div class="media-preview">
+						{#if selectedSingleMedia.thumbnailUrl}
+							<img src={selectedSingleMedia.thumbnailUrl} alt={selectedSingleMedia.filename} />
+						{/if}
+						<div class="media-details">
+							<p><strong>Filename:</strong> {selectedSingleMedia.filename}</p>
+							<p><strong>Size:</strong> {formatFileSize(selectedSingleMedia.size)}</p>
+							<p><strong>Type:</strong> {selectedSingleMedia.mimeType}</p>
+							{#if selectedSingleMedia.width && selectedSingleMedia.height}
+								<p>
+									<strong>Dimensions:</strong>
+									{selectedSingleMedia.width}×{selectedSingleMedia.height}
+								</p>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/if}
+		</section>
+
+		<section class="test-section">
+			<h2>Multiple Selection Mode</h2>
+			<p>Test selecting multiple media items.</p>
+
+			<Button variant="primary" onclick={openMultipleModal}>Open Multiple Selection Modal</Button>
+
+			{#if selectedMultipleMedia.length > 0}
+				<div class="selected-media">
+					<h3>Selected Media ({selectedMultipleMedia.length} items):</h3>
+					<div class="media-grid">
+						{#each selectedMultipleMedia as media}
+							<div class="media-item">
+								{#if media.thumbnailUrl}
+									<img src={media.thumbnailUrl} alt={media.filename} />
+								{/if}
+								<div class="media-info">
+									<p class="filename">{media.filename}</p>
+									<p class="size">{formatFileSize(media.size)}</p>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</section>
+
+		<section class="test-section">
+			<h2>Image Only Selection</h2>
+			<p>Test selecting only image files.</p>
+
+			<Button
+				variant="secondary"
+				onclick={() => {
+					showSingleModal = true
+					// This will be passed to the modal for image-only filtering
+				}}
+			>
+				Open Image Selection Modal
+			</Button>
+		</section>
+	</div>
+
+	<!-- Modals -->
+	<MediaLibraryModal
+		bind:isOpen={showSingleModal}
+		mode="single"
+		fileType="all"
+		title="Select a Media File"
+		confirmText="Select File"
+		onselect={handleSingleSelect}
+	/>
+
+	<MediaLibraryModal
+		bind:isOpen={showMultipleModal}
+		mode="multiple"
+		fileType="all"
+		title="Select Media Files"
+		confirmText="Select Files"
+		onselect={handleMultipleSelect}
+	/>
+</AdminPage>
+
+<style lang="scss">
+	.test-container {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: $unit-4x;
+	}
+
+	.test-section {
+		margin-bottom: $unit-6x;
+		padding: $unit-4x;
+		background-color: white;
+		border-radius: $card-corner-radius;
+		border: 1px solid $grey-90;
+
+		h2 {
+			margin: 0 0 $unit 0;
+			font-size: 1.25rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+
+		p {
+			margin: 0 0 $unit-3x 0;
+			color: $grey-30;
+		}
+	}
+
+	.selected-media {
+		margin-top: $unit-4x;
+		padding: $unit-3x;
+		background-color: $grey-95;
+		border-radius: $card-corner-radius;
+
+		h3 {
+			margin: 0 0 $unit-2x 0;
+			font-size: 1.125rem;
+			font-weight: 600;
+			color: $grey-10;
+		}
+	}
+
+	.media-preview {
+		display: flex;
+		gap: $unit-3x;
+		align-items: flex-start;
+
+		img {
+			width: 120px;
+			height: 120px;
+			object-fit: cover;
+			border-radius: $card-corner-radius;
+			border: 1px solid $grey-80;
+		}
+
+		.media-details {
+			flex: 1;
+
+			p {
+				margin: 0 0 $unit-half 0;
+				font-size: 0.875rem;
+				color: $grey-20;
+
+				strong {
+					font-weight: 600;
+					color: $grey-10;
+				}
+			}
+		}
+	}
+
+	.media-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+		gap: $unit-2x;
+	}
+
+	.media-item {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+
+		img {
+			width: 100%;
+			height: 80px;
+			object-fit: cover;
+			border-radius: $card-corner-radius;
+			border: 1px solid $grey-80;
+		}
+
+		.media-info {
+			.filename {
+				margin: 0;
+				font-size: 0.75rem;
+				font-weight: 500;
+				color: $grey-10;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.size {
+				margin: 0;
+				font-size: 0.625rem;
+				color: $grey-40;
+			}
+		}
+	}
+
+	@media (max-width: 768px) {
+		.test-container {
+			padding: $unit-2x;
+		}
+
+		.test-section {
+			padding: $unit-3x;
+		}
+
+		.media-preview {
+			flex-direction: column;
+
+			img {
+				width: 100%;
+				height: 200px;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/admin/media/+page.svelte b/src/routes/admin/media/+page.svelte
new file mode 100644
index 0000000..049cc39
--- /dev/null
+++ b/src/routes/admin/media/+page.svelte
@@ -0,0 +1,1106 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
+	import Input from '$lib/components/admin/Input.svelte'
+	import Select from '$lib/components/admin/Select.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import MediaDetailsModal from '$lib/components/admin/MediaDetailsModal.svelte'
+	import MediaUploadModal from '$lib/components/admin/MediaUploadModal.svelte'
+	import type { Media } from '@prisma/client'
+
+	let media = $state<Media[]>([])
+	let isLoading = $state(true)
+	let error = $state('')
+	let currentPage = $state(1)
+	let totalPages = $state(1)
+	let total = $state(0)
+	let viewMode = $state<'grid' | 'list'>('grid')
+
+	// Filter states
+	let filterType = $state<string>('all')
+	let photographyFilter = $state<string>('all')
+	let searchQuery = $state('')
+	let searchTimeout: ReturnType<typeof setTimeout>
+
+	// Filter options
+	const typeFilterOptions = [
+		{ value: 'all', label: 'All types' },
+		{ value: 'image', label: 'Images' },
+		{ value: 'video', label: 'Videos' },
+		{ value: 'audio', label: 'Audio' },
+		{ value: 'application/pdf', label: 'PDFs' }
+	]
+
+	const photographyFilterOptions = [
+		{ value: 'all', label: 'All media' },
+		{ value: 'true', label: 'Photography only' },
+		{ value: 'false', label: 'Non-photography' }
+	]
+
+	// Modal states
+	let selectedMedia = $state<Media | null>(null)
+	let isDetailsModalOpen = $state(false)
+	let isUploadModalOpen = $state(false)
+
+	// Multiselect states
+	let selectedMediaIds = $state<Set<number>>(new Set())
+	let isMultiSelectMode = $state(false)
+	let isDeleting = $state(false)
+
+	onMount(async () => {
+		await loadMedia()
+	})
+
+	// Watch for search query changes with debounce
+	$effect(() => {
+		if (searchQuery !== undefined) {
+			clearTimeout(searchTimeout)
+			searchTimeout = setTimeout(() => {
+				handleSearch()
+			}, 300)
+		}
+	})
+
+	async function loadMedia(page = 1) {
+		try {
+			isLoading = true
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			let url = `/api/media?page=${page}&limit=24`
+			if (filterType !== 'all') {
+				url += `&mimeType=${filterType}`
+			}
+			if (photographyFilter !== 'all') {
+				url += `&isPhotography=${photographyFilter}`
+			}
+			if (searchQuery) {
+				url += `&search=${encodeURIComponent(searchQuery)}`
+			}
+
+			const response = await fetch(url, {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) throw new Error('Failed to load media')
+
+			const data = await response.json()
+			media = data.media
+			currentPage = data.pagination.page
+			totalPages = data.pagination.totalPages
+			total = data.pagination.total
+		} catch (err) {
+			error = 'Failed to load media'
+			console.error(err)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	function handlePageChange(page: number) {
+		loadMedia(page)
+	}
+
+	function handleFilterChange() {
+		currentPage = 1
+		loadMedia(1)
+	}
+
+	function handleSearch() {
+		currentPage = 1
+		loadMedia(1)
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 Bytes'
+		const k = 1024
+		const sizes = ['Bytes', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+	}
+
+	function getFileType(mimeType: string): string {
+		if (mimeType.startsWith('image/')) return 'Image'
+		if (mimeType.startsWith('video/')) return 'Video'
+		if (mimeType.startsWith('audio/')) return 'Audio'
+		if (mimeType.includes('pdf')) return 'PDF'
+		return 'File'
+	}
+
+	function handleMediaClick(item: Media) {
+		selectedMedia = item
+		isDetailsModalOpen = true
+	}
+
+	function handleModalClose() {
+		selectedMedia = null
+		isDetailsModalOpen = false
+	}
+
+	function handleMediaUpdate(updatedMedia: Media) {
+		// Update the media item in the list
+		const index = media.findIndex((m) => m.id === updatedMedia.id)
+		if (index !== -1) {
+			media[index] = updatedMedia
+		}
+	}
+
+	function handleUploadComplete() {
+		// Reload media list after successful upload
+		loadMedia(currentPage)
+	}
+
+	function openUploadModal() {
+		isUploadModalOpen = true
+	}
+
+	// Multiselect functions
+	function toggleMultiSelectMode() {
+		isMultiSelectMode = !isMultiSelectMode
+		if (!isMultiSelectMode) {
+			selectedMediaIds.clear()
+			selectedMediaIds = new Set()
+		}
+	}
+
+	function toggleMediaSelection(mediaId: number) {
+		if (selectedMediaIds.has(mediaId)) {
+			selectedMediaIds.delete(mediaId)
+		} else {
+			selectedMediaIds.add(mediaId)
+		}
+		selectedMediaIds = new Set(selectedMediaIds) // Trigger reactivity
+	}
+
+	function selectAllMedia() {
+		selectedMediaIds = new Set(media.map((m) => m.id))
+	}
+
+	function clearSelection() {
+		selectedMediaIds.clear()
+		selectedMediaIds = new Set()
+	}
+
+	async function handleBulkDelete() {
+		if (selectedMediaIds.size === 0) return
+
+		const confirmation = confirm(
+			`Are you sure you want to delete ${selectedMediaIds.size} media file${selectedMediaIds.size > 1 ? 's' : ''}? This action cannot be undone and will remove these files from any content that references them.`
+		)
+
+		if (!confirmation) return
+
+		try {
+			isDeleting = true
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			const response = await fetch('/api/media/bulk-delete', {
+				method: 'DELETE',
+				headers: {
+					Authorization: `Basic ${auth}`,
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					mediaIds: Array.from(selectedMediaIds)
+				})
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to delete media files')
+			}
+
+			const result = await response.json()
+
+			// Remove deleted media from the list
+			media = media.filter((m) => !selectedMediaIds.has(m.id))
+
+			// Clear selection and exit multiselect mode
+			selectedMediaIds.clear()
+			selectedMediaIds = new Set()
+			isMultiSelectMode = false
+
+			// Reload to get updated total count
+			await loadMedia(currentPage)
+		} catch (err) {
+			error = 'Failed to delete media files. Please try again.'
+			console.error('Failed to delete media:', err)
+		} finally {
+			isDeleting = false
+		}
+	}
+
+	async function handleBulkMarkPhotography() {
+		if (selectedMediaIds.size === 0) return
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			// Update each selected media item
+			const promises = Array.from(selectedMediaIds).map(async (mediaId) => {
+				const response = await fetch(`/api/media/${mediaId}`, {
+					method: 'PUT',
+					headers: {
+						Authorization: `Basic ${auth}`,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({ isPhotography: true })
+				})
+
+				if (!response.ok) {
+					throw new Error(`Failed to update media ${mediaId}`)
+				}
+				return response.json()
+			})
+
+			await Promise.all(promises)
+
+			// Update local media items
+			media = media.map((item) =>
+				selectedMediaIds.has(item.id) ? { ...item, isPhotography: true } : item
+			)
+
+			// Clear selection
+			selectedMediaIds.clear()
+			selectedMediaIds = new Set()
+			isMultiSelectMode = false
+		} catch (err) {
+			error = 'Failed to mark items as photography. Please try again.'
+			console.error('Failed to mark as photography:', err)
+		}
+	}
+
+	async function handleBulkUnmarkPhotography() {
+		if (selectedMediaIds.size === 0) return
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			// Update each selected media item
+			const promises = Array.from(selectedMediaIds).map(async (mediaId) => {
+				const response = await fetch(`/api/media/${mediaId}`, {
+					method: 'PUT',
+					headers: {
+						Authorization: `Basic ${auth}`,
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({ isPhotography: false })
+				})
+
+				if (!response.ok) {
+					throw new Error(`Failed to update media ${mediaId}`)
+				}
+				return response.json()
+			})
+
+			await Promise.all(promises)
+
+			// Update local media items
+			media = media.map((item) =>
+				selectedMediaIds.has(item.id) ? { ...item, isPhotography: false } : item
+			)
+
+			// Clear selection
+			selectedMediaIds.clear()
+			selectedMediaIds = new Set()
+			isMultiSelectMode = false
+		} catch (err) {
+			error = 'Failed to remove photography status. Please try again.'
+			console.error('Failed to unmark photography:', err)
+		}
+	}
+</script>
+
+<AdminPage>
+	<AdminHeader title="Media Library" slot="header">
+		{#snippet actions()}
+			<Button
+				variant="secondary"
+				buttonSize="large"
+				onclick={toggleMultiSelectMode}
+				class={isMultiSelectMode ? 'active' : ''}
+			>
+				{isMultiSelectMode ? '✓' : '☐'}
+				{isMultiSelectMode ? 'Exit Select' : 'Select'}
+			</Button>
+			<Button
+				variant="secondary"
+				buttonSize="large"
+				onclick={() => (viewMode = viewMode === 'grid' ? 'list' : 'grid')}
+			>
+				{viewMode === 'grid' ? '📋' : '🖼️'}
+				{viewMode === 'grid' ? 'List' : 'Grid'}
+			</Button>
+			<Button variant="primary" buttonSize="large" onclick={openUploadModal}>Upload...</Button>
+		{/snippet}
+	</AdminHeader>
+
+	{#if error}
+		<div class="error">{error}</div>
+	{:else}
+		<!-- Filters -->
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={filterType}
+					options={typeFilterOptions}
+					buttonSize="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+				<Select
+					bind:value={photographyFilter}
+					options={photographyFilterOptions}
+					buttonSize="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+			{/snippet}
+			{#snippet right()}
+				<Input
+					type="search"
+					bind:value={searchQuery}
+					onkeydown={(e) => e.key === 'Enter' && handleSearch()}
+					placeholder="Search files..."
+					buttonSize="small"
+					fullWidth={false}
+					pill={true}
+					prefixIcon
+				>
+					<svg
+						slot="prefix"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+						/>
+					</svg>
+				</Input>
+			{/snippet}
+		</AdminFilters>
+
+		{#if isMultiSelectMode && media.length > 0}
+			<div class="bulk-actions">
+				<div class="bulk-actions-left">
+					<button
+						onclick={selectAllMedia}
+						class="btn btn-secondary btn-small"
+						disabled={selectedMediaIds.size === media.length}
+					>
+						Select All ({media.length})
+					</button>
+					<button
+						onclick={clearSelection}
+						class="btn btn-secondary btn-small"
+						disabled={selectedMediaIds.size === 0}
+					>
+						Clear Selection
+					</button>
+				</div>
+				<div class="bulk-actions-right">
+					{#if selectedMediaIds.size > 0}
+						<button
+							onclick={handleBulkMarkPhotography}
+							class="btn btn-secondary btn-small"
+							title="Mark selected items as photography"
+						>
+							📸 Mark Photography
+						</button>
+						<button
+							onclick={handleBulkUnmarkPhotography}
+							class="btn btn-secondary btn-small"
+							title="Remove photography status from selected items"
+						>
+							🚫 Remove Photography
+						</button>
+						<button
+							onclick={handleBulkDelete}
+							class="btn btn-danger btn-small"
+							disabled={isDeleting}
+						>
+							{isDeleting
+								? 'Deleting...'
+								: `Delete ${selectedMediaIds.size} file${selectedMediaIds.size > 1 ? 's' : ''}`}
+						</button>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if isLoading}
+			<div class="loading">Loading media...</div>
+		{:else if media.length === 0}
+			<div class="empty-state">
+				<p>No media files found.</p>
+				<Button variant="primary" onclick={openUploadModal}>Upload your first file</Button>
+			</div>
+		{:else if viewMode === 'grid'}
+			<div class="media-grid">
+				{#each media as item}
+					<div class="media-item-wrapper" class:multiselect={isMultiSelectMode}>
+						{#if isMultiSelectMode}
+							<div class="selection-checkbox">
+								<input
+									type="checkbox"
+									checked={selectedMediaIds.has(item.id)}
+									onchange={() => toggleMediaSelection(item.id)}
+									id="media-{item.id}"
+								/>
+								<label for="media-{item.id}" class="checkbox-label"></label>
+							</div>
+						{/if}
+						<button
+							class="media-item"
+							type="button"
+							onclick={() =>
+								isMultiSelectMode ? toggleMediaSelection(item.id) : handleMediaClick(item)}
+							title="{isMultiSelectMode ? 'Click to select' : 'Click to edit'} {item.filename}"
+							class:selected={isMultiSelectMode && selectedMediaIds.has(item.id)}
+						>
+							{#if item.mimeType.startsWith('image/')}
+								<img
+									src={item.mimeType === 'image/svg+xml' ? item.url : item.thumbnailUrl || item.url}
+									alt={item.altText || item.filename}
+								/>
+							{:else}
+								<div class="file-placeholder">
+									<span class="file-type">{getFileType(item.mimeType)}</span>
+								</div>
+							{/if}
+							<div class="media-info">
+								<span class="filename">{item.filename}</span>
+								<div class="media-indicators">
+									{#if item.isPhotography}
+										<span class="indicator-pill photography" title="Photography">
+											<svg
+												width="12"
+												height="12"
+												viewBox="0 0 24 24"
+												fill="none"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<polygon
+													points="12,2 15.09,8.26 22,9 17,14.74 18.18,21.02 12,17.77 5.82,21.02 7,14.74 2,9 8.91,8.26"
+													fill="currentColor"
+												/>
+											</svg>
+											Photo
+										</span>
+									{/if}
+									{#if item.altText}
+										<span class="indicator-pill alt-text" title="Alt text: {item.altText}">
+											Alt
+										</span>
+									{:else}
+										<span class="indicator-pill no-alt-text" title="No alt text"> No Alt </span>
+									{/if}
+								</div>
+								<span class="filesize">{formatFileSize(item.size)}</span>
+							</div>
+						</button>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="media-list">
+				{#each media as item}
+					<div class="media-row-wrapper" class:multiselect={isMultiSelectMode}>
+						{#if isMultiSelectMode}
+							<div class="selection-checkbox">
+								<input
+									type="checkbox"
+									checked={selectedMediaIds.has(item.id)}
+									onchange={() => toggleMediaSelection(item.id)}
+									id="media-row-{item.id}"
+								/>
+								<label for="media-row-{item.id}" class="checkbox-label"></label>
+							</div>
+						{/if}
+						<button
+							class="media-row"
+							type="button"
+							onclick={() =>
+								isMultiSelectMode ? toggleMediaSelection(item.id) : handleMediaClick(item)}
+							title="{isMultiSelectMode ? 'Click to select' : 'Click to edit'} {item.filename}"
+							class:selected={isMultiSelectMode && selectedMediaIds.has(item.id)}
+						>
+							<div class="media-preview">
+								{#if item.mimeType.startsWith('image/')}
+									<img
+										src={item.mimeType === 'image/svg+xml'
+											? item.url
+											: item.thumbnailUrl || item.url}
+										alt={item.altText || item.filename}
+									/>
+								{:else}
+									<div class="file-icon">{getFileType(item.mimeType)}</div>
+								{/if}
+							</div>
+							<div class="media-details">
+								<div class="filename-row">
+									<span class="filename">{item.filename}</span>
+									<div class="media-indicators">
+										{#if item.isPhotography}
+											<span class="indicator-pill photography" title="Photography">
+												<svg
+													width="12"
+													height="12"
+													viewBox="0 0 24 24"
+													fill="none"
+													xmlns="http://www.w3.org/2000/svg"
+												>
+													<polygon
+														points="12,2 15.09,8.26 22,9 17,14.74 18.18,21.02 12,17.77 5.82,21.02 7,14.74 2,9 8.91,8.26"
+														fill="currentColor"
+													/>
+												</svg>
+												Photo
+											</span>
+										{/if}
+										{#if item.altText}
+											<span class="indicator-pill alt-text" title="Alt text: {item.altText}">
+												Alt
+											</span>
+										{:else}
+											<span class="indicator-pill no-alt-text" title="No alt text"> No Alt </span>
+										{/if}
+									</div>
+								</div>
+								<span class="file-meta">
+									{getFileType(item.mimeType)} • {formatFileSize(item.size)}
+									{#if item.width && item.height}
+										• {item.width}×{item.height}px
+									{/if}
+								</span>
+								{#if item.altText}
+									<span class="alt-text-preview">
+										Alt: {item.altText}
+									</span>
+								{:else}
+									<span class="no-alt-text-preview">No alt text</span>
+								{/if}
+							</div>
+							<div class="media-indicator">
+								{#if !isMultiSelectMode}
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											d="M9 18L15 12L9 6"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								{/if}
+							</div>
+						</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		{#if totalPages > 1}
+			<div class="pagination">
+				<button
+					onclick={() => handlePageChange(currentPage - 1)}
+					disabled={currentPage === 1}
+					class="pagination-btn"
+				>
+					Previous
+				</button>
+				<span class="pagination-info">
+					Page {currentPage} of {totalPages}
+				</span>
+				<button
+					onclick={() => handlePageChange(currentPage + 1)}
+					disabled={currentPage === totalPages}
+					class="pagination-btn"
+				>
+					Next
+				</button>
+			</div>
+		{/if}
+	{/if}
+</AdminPage>
+
+<!-- Media Details Modal -->
+<MediaDetailsModal
+	bind:isOpen={isDetailsModalOpen}
+	media={selectedMedia}
+	onClose={handleModalClose}
+	onUpdate={handleMediaUpdate}
+/>
+
+<!-- Media Upload Modal -->
+<MediaUploadModal
+	bind:isOpen={isUploadModalOpen}
+	onClose={() => (isUploadModalOpen = false)}
+	onUploadComplete={handleUploadComplete}
+/>
+
+<style lang="scss">
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border-radius: 50px;
+		text-decoration: none;
+		font-size: 0.925rem;
+		transition: all 0.2s ease;
+		border: none;
+		cursor: pointer;
+
+		&.btn-primary {
+			background-color: $grey-10;
+			color: white;
+
+			&:hover {
+				background-color: $grey-20;
+			}
+		}
+
+		&.btn-secondary {
+			background-color: $grey-95;
+			color: $grey-20;
+
+			&:hover {
+				background-color: $grey-90;
+				color: $grey-10;
+			}
+		}
+	}
+
+	.error {
+		text-align: center;
+		padding: $unit-6x;
+		color: #d33;
+	}
+
+	.loading {
+		text-align: center;
+		padding: $unit-6x;
+		color: $grey-40;
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: $unit-8x;
+		color: $grey-40;
+
+		p {
+			margin-bottom: $unit-3x;
+		}
+	}
+
+	.media-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: $unit-3x;
+		margin-bottom: $unit-4x;
+	}
+
+	.media-item {
+		background: $grey-95;
+		border: none;
+		border-radius: $unit-2x;
+		overflow: hidden;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		text-align: left;
+		width: 100%;
+		padding: 0;
+
+		&:hover {
+			background-color: $grey-90;
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		}
+
+		&:focus {
+			outline: 2px solid #3b82f6;
+			outline-offset: 2px;
+		}
+
+		img {
+			width: 100%;
+			height: 150px;
+			object-fit: cover;
+		}
+
+		.file-placeholder {
+			width: 100%;
+			height: 150px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: $grey-90;
+
+			.file-type {
+				font-size: 0.875rem;
+				color: $grey-40;
+			}
+		}
+
+		.media-info {
+			padding: $unit-2x;
+			display: flex;
+			flex-direction: column;
+			gap: $unit-half;
+
+			.filename {
+				font-size: 0.875rem;
+				color: $grey-20;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.filesize {
+				font-size: 0.75rem;
+				color: $grey-40;
+			}
+
+			.media-indicators {
+				display: flex;
+				gap: $unit-half;
+				flex-wrap: wrap;
+				margin: $unit-half 0;
+			}
+		}
+	}
+
+	.media-list {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+		margin-bottom: $unit-4x;
+	}
+
+	.media-row {
+		display: flex;
+		align-items: center;
+		gap: $unit-3x;
+		padding: $unit-2x;
+		background: $grey-95;
+		border: none;
+		border-radius: $unit-2x;
+		transition: all 0.2s ease;
+		cursor: pointer;
+		text-align: left;
+		width: 100%;
+
+		&:hover {
+			background-color: $grey-90;
+			transform: translateY(-1px);
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		}
+
+		&:focus {
+			outline: 2px solid #3b82f6;
+			outline-offset: 2px;
+		}
+
+		.media-preview {
+			width: 60px;
+			height: 60px;
+			flex-shrink: 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				border-radius: $unit;
+			}
+
+			.file-icon {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: $grey-90;
+				border-radius: $unit;
+				font-size: 0.75rem;
+				color: $grey-40;
+			}
+		}
+
+		.media-details {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			gap: $unit-half;
+
+			.filename-row {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: $unit-2x;
+
+				.filename {
+					font-size: 0.925rem;
+					color: $grey-20;
+					font-weight: 500;
+					flex: 1;
+				}
+
+				.media-indicators {
+					display: flex;
+					gap: $unit-half;
+					flex-wrap: wrap;
+					flex-shrink: 0;
+				}
+			}
+
+			.file-meta {
+				font-size: 0.75rem;
+				color: $grey-40;
+			}
+
+			.alt-text-preview {
+				font-size: 0.75rem;
+				color: $grey-30;
+				font-style: italic;
+			}
+
+			.no-alt-text-preview {
+				font-size: 0.75rem;
+				color: $red-60;
+				font-style: italic;
+			}
+		}
+
+		.media-indicator {
+			color: $grey-50;
+			flex-shrink: 0;
+		}
+
+		.media-actions {
+			display: flex;
+			gap: $unit;
+
+			.action-btn {
+				padding: $unit $unit-2x;
+				background: transparent;
+				border: 1px solid $grey-80;
+				border-radius: 50px;
+				font-size: 0.75rem;
+				color: $grey-30;
+				cursor: pointer;
+				transition: all 0.2s ease;
+
+				&:hover {
+					border-color: $grey-40;
+					color: $grey-10;
+				}
+			}
+		}
+	}
+
+	.pagination {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: $unit-3x;
+		margin-top: $unit-4x;
+
+		.pagination-btn {
+			padding: $unit $unit-3x;
+			background: $grey-95;
+			border: none;
+			border-radius: 50px;
+			color: $grey-20;
+			font-size: 0.875rem;
+			cursor: pointer;
+			transition: all 0.2s ease;
+
+			&:hover:not(:disabled) {
+				background: $grey-90;
+				color: $grey-10;
+			}
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.pagination-info {
+			font-size: 0.875rem;
+			color: $grey-40;
+		}
+	}
+
+	// Multiselect styles
+	.bulk-actions {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: $unit-2x $unit-3x;
+		background: $grey-95;
+		border-radius: $unit;
+		margin-bottom: $unit-3x;
+		gap: $unit-2x;
+
+		.bulk-actions-left,
+		.bulk-actions-right {
+			display: flex;
+			gap: $unit;
+		}
+
+		.btn-small {
+			padding: $unit $unit-2x;
+			font-size: 0.8rem;
+		}
+
+		.btn-danger {
+			background-color: $red-60;
+			color: white;
+
+			&:hover:not(:disabled) {
+				background-color: $red-50;
+			}
+
+			&:disabled {
+				opacity: 0.6;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.media-item-wrapper,
+	.media-row-wrapper {
+		position: relative;
+
+		&.multiselect {
+			.selection-checkbox {
+				position: absolute;
+				top: $unit;
+				left: $unit;
+				z-index: 10;
+
+				input[type='checkbox'] {
+					opacity: 0;
+					position: absolute;
+					pointer-events: none;
+				}
+
+				.checkbox-label {
+					display: block;
+					width: 20px;
+					height: 20px;
+					border: 2px solid white;
+					border-radius: 4px;
+					background: rgba(0, 0, 0, 0.5);
+					cursor: pointer;
+					position: relative;
+					transition: all 0.2s ease;
+
+					&::after {
+						content: '';
+						position: absolute;
+						top: 2px;
+						left: 6px;
+						width: 4px;
+						height: 8px;
+						border: solid white;
+						border-width: 0 2px 2px 0;
+						transform: rotate(45deg);
+						opacity: 0;
+						transition: opacity 0.2s ease;
+					}
+				}
+
+				input:checked + .checkbox-label {
+					background: #3b82f6;
+					border-color: #3b82f6;
+
+					&::after {
+						opacity: 1;
+					}
+				}
+			}
+
+			.media-item,
+			.media-row {
+				&.selected {
+					background-color: rgba(59, 130, 246, 0.1);
+					border: 2px solid #3b82f6;
+				}
+			}
+		}
+	}
+
+	.media-row-wrapper.multiselect {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+
+		.selection-checkbox {
+			position: static;
+			top: auto;
+			left: auto;
+			z-index: auto;
+		}
+
+		.media-row {
+			flex: 1;
+		}
+	}
+
+	// Indicator pill styles
+	.indicator-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: $unit-half;
+		padding: 2px $unit;
+		border-radius: 4px;
+		font-size: 0.625rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		line-height: 1;
+
+		svg {
+			width: 10px;
+			height: 10px;
+			flex-shrink: 0;
+		}
+
+		&.photography {
+			background-color: rgba(139, 92, 246, 0.1);
+			color: #7c3aed;
+			border: 1px solid rgba(139, 92, 246, 0.2);
+
+			svg {
+				fill: #7c3aed;
+			}
+		}
+
+		&.alt-text {
+			background-color: rgba(34, 197, 94, 0.1);
+			color: #16a34a;
+			border: 1px solid rgba(34, 197, 94, 0.2);
+		}
+
+		&.no-alt-text {
+			background-color: rgba(239, 68, 68, 0.1);
+			color: #dc2626;
+			border: 1px solid rgba(239, 68, 68, 0.2);
+		}
+	}
+</style>
diff --git a/src/routes/admin/media/upload/+page.svelte b/src/routes/admin/media/upload/+page.svelte
new file mode 100644
index 0000000..32514b9
--- /dev/null
+++ b/src/routes/admin/media/upload/+page.svelte
@@ -0,0 +1,571 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
+	import { onMount } from 'svelte'
+
+	let files = $state<File[]>([])
+	let dragActive = $state(false)
+	let isUploading = $state(false)
+	let uploadProgress = $state<Record<string, number>>({})
+	let uploadErrors = $state<string[]>([])
+	let successCount = $state(0)
+	let fileInput: HTMLInputElement
+
+	onMount(() => {
+		// Check authentication
+		const auth = localStorage.getItem('admin_auth')
+		if (!auth) {
+			goto('/admin/login')
+		}
+	})
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault()
+		dragActive = true
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault()
+		dragActive = false
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		dragActive = false
+
+		const droppedFiles = Array.from(event.dataTransfer?.files || [])
+		addFiles(droppedFiles)
+	}
+
+	function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement
+		const selectedFiles = Array.from(target.files || [])
+		addFiles(selectedFiles)
+	}
+
+	function addFiles(newFiles: File[]) {
+		// Filter for image files
+		const imageFiles = newFiles.filter((file) => file.type.startsWith('image/'))
+
+		if (imageFiles.length !== newFiles.length) {
+			uploadErrors = [
+				...uploadErrors,
+				`${newFiles.length - imageFiles.length} non-image files were skipped`
+			]
+		}
+
+		files = [...files, ...imageFiles]
+	}
+
+	function removeFile(index: number) {
+		files = files.filter((_, i) => i !== index)
+		// Clear any related upload progress
+		const fileName = files[index]?.name
+		if (fileName && uploadProgress[fileName]) {
+			const { [fileName]: removed, ...rest } = uploadProgress
+			uploadProgress = rest
+		}
+	}
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 Bytes'
+		const k = 1024
+		const sizes = ['Bytes', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+	}
+
+	async function uploadFiles() {
+		if (files.length === 0) return
+
+		isUploading = true
+		uploadErrors = []
+		successCount = 0
+		uploadProgress = {}
+
+		const auth = localStorage.getItem('admin_auth')
+		if (!auth) {
+			uploadErrors = ['Authentication required']
+			isUploading = false
+			return
+		}
+
+		// Upload files individually to show progress
+		for (const file of files) {
+			try {
+				const formData = new FormData()
+				formData.append('file', file)
+
+				const response = await fetch('/api/media/upload', {
+					method: 'POST',
+					headers: {
+						Authorization: `Basic ${auth}`
+					},
+					body: formData
+				})
+
+				if (!response.ok) {
+					const error = await response.json()
+					uploadErrors = [...uploadErrors, `${file.name}: ${error.message || 'Upload failed'}`]
+				} else {
+					successCount++
+					uploadProgress = { ...uploadProgress, [file.name]: 100 }
+				}
+			} catch (error) {
+				uploadErrors = [...uploadErrors, `${file.name}: Network error`]
+			}
+		}
+
+		isUploading = false
+
+		// If all uploads succeeded, redirect back to media library
+		if (successCount === files.length && uploadErrors.length === 0) {
+			setTimeout(() => {
+				goto('/admin/media')
+			}, 1500)
+		}
+	}
+
+	function clearAll() {
+		files = []
+		uploadProgress = {}
+		uploadErrors = []
+		successCount = 0
+	}
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<h1>Upload Media</h1>
+		<div class="header-actions">
+			<Button variant="secondary" onclick={() => goto('/admin/media')}>
+				← Back to Media Library
+			</Button>
+		</div>
+	</header>
+
+	<div class="upload-container">
+		<!-- Drop Zone -->
+		<div
+			class="drop-zone"
+			class:active={dragActive}
+			class:has-files={files.length > 0}
+			ondragover={handleDragOver}
+			ondragleave={handleDragLeave}
+			ondrop={handleDrop}
+		>
+			<div class="drop-zone-content">
+				{#if files.length === 0}
+					<div class="upload-icon">
+						<svg
+							width="48"
+							height="48"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<polyline
+								points="14,2 14,8 20,8"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<line
+								x1="16"
+								y1="13"
+								x2="8"
+								y2="13"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<line
+								x1="16"
+								y1="17"
+								x2="8"
+								y2="17"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<polyline
+								points="10,9 9,9 8,9"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</div>
+					<h3>Drop images here</h3>
+					<p>or click to browse and select files</p>
+					<p class="upload-hint">Supports JPG, PNG, GIF, WebP, and SVG files</p>
+				{:else}
+					<div class="file-count">
+						<strong>{files.length} file{files.length !== 1 ? 's' : ''} selected</strong>
+						<p>Drop more files to add them, or click to browse</p>
+					</div>
+				{/if}
+			</div>
+
+			<input
+				bind:this={fileInput}
+				type="file"
+				multiple
+				accept="image/*"
+				onchange={handleFileSelect}
+				class="hidden-input"
+			/>
+
+			<button
+				type="button"
+				class="drop-zone-button"
+				onclick={() => fileInput.click()}
+				disabled={isUploading}
+			>
+				{dragActive ? 'Drop files' : 'Click to browse'}
+			</button>
+		</div>
+
+		<!-- File List -->
+		{#if files.length > 0}
+			<div class="file-list">
+				<div class="file-list-header">
+					<h3>Files to Upload</h3>
+					<div class="file-actions">
+						<Button
+							variant="secondary"
+							buttonSize="small"
+							onclick={clearAll}
+							disabled={isUploading}
+						>
+							Clear All
+						</Button>
+						<Button
+							variant="primary"
+							buttonSize="small"
+							onclick={uploadFiles}
+							disabled={isUploading || files.length === 0}
+						>
+							{#if isUploading}
+								<LoadingSpinner buttonSize="small" />
+								Uploading...
+							{:else}
+								Upload {files.length} File{files.length !== 1 ? 's' : ''}
+							{/if}
+						</Button>
+					</div>
+				</div>
+
+				<div class="files">
+					{#each files as file, index}
+						<div class="file-item">
+							<div class="file-preview">
+								{#if file.type.startsWith('image/')}
+									<img src={URL.createObjectURL(file)} alt={file.name} />
+								{:else}
+									<div class="file-icon">📄</div>
+								{/if}
+							</div>
+
+							<div class="file-info">
+								<div class="file-name">{file.name}</div>
+								<div class="file-size">{formatFileSize(file.size)}</div>
+
+								{#if uploadProgress[file.name]}
+									<div class="progress-bar">
+										<div class="progress-fill" style="width: {uploadProgress[file.name]}%"></div>
+									</div>
+								{/if}
+							</div>
+
+							{#if !isUploading}
+								<button
+									type="button"
+									class="remove-button"
+									onclick={() => removeFile(index)}
+									title="Remove file"
+								>
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<line x1="18" y1="6" x2="6" y2="18"></line>
+										<line x1="6" y1="6" x2="18" y2="18"></line>
+									</svg>
+								</button>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Upload Results -->
+		{#if successCount > 0 || uploadErrors.length > 0}
+			<div class="upload-results">
+				{#if successCount > 0}
+					<div class="success-message">
+						✅ Successfully uploaded {successCount} file{successCount !== 1 ? 's' : ''}
+						{#if successCount === files.length && uploadErrors.length === 0}
+							<br /><small>Redirecting to media library...</small>
+						{/if}
+					</div>
+				{/if}
+
+				{#if uploadErrors.length > 0}
+					<div class="error-messages">
+						<h4>Upload Errors:</h4>
+						{#each uploadErrors as error}
+							<div class="error-item">❌ {error}</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	.upload-container {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: $unit-4x;
+	}
+
+	.header-actions {
+		display: flex;
+		gap: $unit-2x;
+	}
+
+	.drop-zone {
+		border: 2px dashed $grey-80;
+		border-radius: $unit-2x;
+		padding: $unit-6x $unit-4x;
+		text-align: center;
+		position: relative;
+		background: $grey-95;
+		transition: all 0.2s ease;
+		margin-bottom: $unit-4x;
+
+		&.active {
+			border-color: #3b82f6;
+			background: rgba(59, 130, 246, 0.05);
+		}
+
+		&.has-files {
+			padding: $unit-4x;
+		}
+
+		&:hover {
+			border-color: $grey-60;
+			background: $grey-90;
+		}
+	}
+
+	.drop-zone-content {
+		pointer-events: none;
+
+		.upload-icon {
+			color: $grey-50;
+			margin-bottom: $unit-2x;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+			color: $grey-20;
+			margin-bottom: $unit;
+		}
+
+		p {
+			color: $grey-40;
+			margin-bottom: $unit-half;
+		}
+
+		.upload-hint {
+			font-size: 0.875rem;
+			color: $grey-50;
+		}
+
+		.file-count {
+			strong {
+				color: $grey-20;
+				font-size: 1.1rem;
+			}
+		}
+	}
+
+	.hidden-input {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.drop-zone-button {
+		position: absolute;
+		inset: 0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: transparent;
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+
+	.file-list {
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit-2x;
+		padding: $unit-3x;
+		margin-bottom: $unit-4x;
+	}
+
+	.file-list-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: $unit-3x;
+		padding-bottom: $unit-2x;
+		border-bottom: 1px solid $grey-85;
+
+		h3 {
+			margin: 0;
+			color: $grey-20;
+		}
+
+		.file-actions {
+			display: flex;
+			gap: $unit-2x;
+		}
+	}
+
+	.files {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.file-item {
+		display: flex;
+		align-items: center;
+		gap: $unit-3x;
+		padding: $unit-2x;
+		background: $grey-95;
+		border-radius: $unit;
+		border: 1px solid $grey-85;
+	}
+
+	.file-preview {
+		width: 60px;
+		height: 60px;
+		border-radius: $unit;
+		overflow: hidden;
+		background: $grey-90;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.file-icon {
+			font-size: 1.5rem;
+		}
+	}
+
+	.file-info {
+		flex: 1;
+
+		.file-name {
+			font-weight: 500;
+			color: $grey-20;
+			margin-bottom: $unit-half;
+		}
+
+		.file-size {
+			font-size: 0.875rem;
+			color: $grey-50;
+			margin-bottom: $unit-half;
+		}
+	}
+
+	.progress-bar {
+		width: 100%;
+		height: 4px;
+		background: $grey-85;
+		border-radius: 2px;
+		overflow: hidden;
+
+		.progress-fill {
+			height: 100%;
+			background: #3b82f6;
+			transition: width 0.3s ease;
+		}
+	}
+
+	.remove-button {
+		background: none;
+		border: none;
+		color: $grey-50;
+		cursor: pointer;
+		padding: $unit;
+		border-radius: 50%;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $red-60;
+			color: white;
+		}
+	}
+
+	.upload-results {
+		background: white;
+		border: 1px solid $grey-85;
+		border-radius: $unit-2x;
+		padding: $unit-3x;
+
+		.success-message {
+			color: #16a34a;
+			margin-bottom: $unit-2x;
+
+			small {
+				color: $grey-50;
+			}
+		}
+
+		.error-messages {
+			h4 {
+				color: $red-60;
+				margin-bottom: $unit-2x;
+			}
+
+			.error-item {
+				color: $red-60;
+				margin-bottom: $unit;
+				font-size: 0.925rem;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/admin/posts/+page.svelte b/src/routes/admin/posts/+page.svelte
new file mode 100644
index 0000000..11f641e
--- /dev/null
+++ b/src/routes/admin/posts/+page.svelte
@@ -0,0 +1,264 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
+	import PostListItem from '$lib/components/admin/PostListItem.svelte'
+	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
+	import Select from '$lib/components/admin/Select.svelte'
+	import UniverseComposer from '$lib/components/admin/UniverseComposer.svelte'
+
+	interface Post {
+		id: number
+		slug: string
+		postType: string
+		title: string | null
+		content: any // JSON content
+		excerpt: string | null
+		status: string
+		tags: string[] | null
+		linkUrl: string | null
+		linkDescription: string | null
+		featuredImage: string | null
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+	}
+
+	let posts = $state<Post[]>([])
+	let filteredPosts = $state<Post[]>([])
+	let isLoading = $state(true)
+	let error = $state('')
+	let total = $state(0)
+	let postTypeCounts = $state<Record<string, number>>({})
+
+	// Filter state
+	let selectedFilter = $state<string>('all')
+
+	// Composer state
+	let showInlineComposer = $state(true)
+
+	// Create filter options
+	const filterOptions = $derived([
+		{ value: 'all', label: 'All posts' },
+		{ value: 'post', label: 'Posts' },
+		{ value: 'essay', label: 'Essays' }
+	])
+
+	const postTypeIcons: Record<string, string> = {
+		post: '💭',
+		essay: '📝',
+		// Legacy types for backward compatibility
+		blog: '📝',
+		microblog: '💭',
+		link: '🔗',
+		photo: '📷',
+		album: '🖼️'
+	}
+
+	const postTypeLabels: Record<string, string> = {
+		post: 'Post',
+		essay: 'Essay',
+		// Legacy types for backward compatibility
+		blog: 'Essay',
+		microblog: 'Post',
+		link: 'Post',
+		photo: 'Post',
+		album: 'Album'
+	}
+
+	onMount(async () => {
+		await loadPosts()
+	})
+
+	async function loadPosts() {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch('/api/posts', {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				if (response.status === 401) {
+					goto('/admin/login')
+					return
+				}
+				throw new Error('Failed to load posts')
+			}
+
+			const data = await response.json()
+			posts = data.posts || []
+			total = data.pagination?.total || posts.length
+
+			// Calculate post type counts and normalize types
+			const counts: Record<string, number> = {
+				all: posts.length,
+				post: 0,
+				essay: 0
+			}
+
+			posts.forEach((post) => {
+				// Normalize legacy types to simplified types
+				if (post.postType === 'blog') {
+					counts.essay = (counts.essay || 0) + 1
+				} else if (['microblog', 'link', 'photo'].includes(post.postType)) {
+					counts.post = (counts.post || 0) + 1
+				} else {
+					counts[post.postType] = (counts[post.postType] || 0) + 1
+				}
+			})
+			postTypeCounts = counts
+
+			// Apply initial filter
+			applyFilter()
+		} catch (err) {
+			error = 'Failed to load posts'
+			console.error(err)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	function applyFilter() {
+		if (selectedFilter === 'all') {
+			filteredPosts = posts
+		} else if (selectedFilter === 'post') {
+			filteredPosts = posts.filter((post) =>
+				['post', 'microblog', 'link', 'photo'].includes(post.postType)
+			)
+		} else if (selectedFilter === 'essay') {
+			filteredPosts = posts.filter((post) => ['essay', 'blog'].includes(post.postType))
+		} else {
+			filteredPosts = posts.filter((post) => post.postType === selectedFilter)
+		}
+	}
+
+	function handleFilterChange() {
+		applyFilter()
+	}
+
+	function handleComposerSaved() {
+		// Reload posts when a new post is created
+		loadPosts()
+	}
+</script>
+
+<AdminPage>
+	<AdminHeader title="Universe" slot="header" />
+
+	{#if error}
+		<div class="error-message">{error}</div>
+	{:else}
+		<!-- Inline Composer -->
+		{#if showInlineComposer}
+			<div class="composer-section">
+				<UniverseComposer
+					isOpen={true}
+					initialMode="page"
+					initialPostType="post"
+					closeOnSave={false}
+					on:saved={handleComposerSaved}
+				/>
+			</div>
+		{/if}
+
+		<!-- Filters -->
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={selectedFilter}
+					options={filterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleFilterChange}
+				/>
+			{/snippet}
+		</AdminFilters>
+
+		<!-- Posts List -->
+		{#if isLoading}
+			<div class="loading-container">
+				<LoadingSpinner />
+			</div>
+		{:else if filteredPosts.length === 0}
+			<div class="empty-state">
+				<div class="empty-icon">📝</div>
+				<h3>No posts found</h3>
+				<p>
+					{#if selectedFilter === 'all'}
+						Create your first post to get started!
+					{:else}
+						No {selectedFilter}s found. Try a different filter or create a new {selectedFilter}.
+					{/if}
+				</p>
+			</div>
+		{:else}
+			<div class="posts-list">
+				{#each filteredPosts as post}
+					<PostListItem {post} />
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</AdminPage>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.error-message {
+		background: rgba(239, 68, 68, 0.1);
+		color: #dc2626;
+		padding: $unit-3x;
+		border-radius: $unit-2x;
+		border: 1px solid rgba(239, 68, 68, 0.2);
+		text-align: center;
+		margin-bottom: $unit-4x;
+	}
+
+	.loading-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 300px;
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: $unit-8x $unit-4x;
+		color: $grey-40;
+
+		.empty-icon {
+			font-size: 3rem;
+			margin-bottom: $unit-3x;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $grey-20;
+		}
+
+		p {
+			margin: 0;
+			line-height: 1.5;
+		}
+	}
+
+	.posts-list {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.composer-section {
+		margin-bottom: $unit-4x;
+		padding: 0 $unit;
+	}
+</style>
diff --git a/src/routes/admin/posts/[id]/edit/+page.svelte b/src/routes/admin/posts/[id]/edit/+page.svelte
new file mode 100644
index 0000000..efdd953
--- /dev/null
+++ b/src/routes/admin/posts/[id]/edit/+page.svelte
@@ -0,0 +1,663 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
+	import { onMount } from 'svelte'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Editor from '$lib/components/admin/Editor.svelte'
+	import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
+	import PostMetadataPopover from '$lib/components/admin/PostMetadataPopover.svelte'
+	import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import SaveActionsGroup from '$lib/components/admin/SaveActionsGroup.svelte'
+	import type { JSONContent } from '@tiptap/core'
+
+	let post = $state<any>(null)
+	let loading = $state(true)
+	let saving = $state(false)
+	let loadError = $state('')
+
+	let title = $state('')
+	let postType = $state<'post' | 'essay'>('post')
+	let status = $state<'draft' | 'published'>('draft')
+	let slug = $state('')
+	let excerpt = $state('')
+	let content = $state<JSONContent>({ type: 'doc', content: [] })
+	let tags = $state<string[]>([])
+	let tagInput = $state('')
+	let showMetadata = $state(false)
+	let metadataButtonRef: HTMLButtonElement
+	let showDeleteConfirmation = $state(false)
+
+	const postTypeConfig = {
+		post: { icon: '💭', label: 'Post', showTitle: false, showContent: true },
+		essay: { icon: '📝', label: 'Essay', showTitle: true, showContent: true }
+	}
+
+	let config = $derived(postTypeConfig[postType])
+
+	// Convert blocks format (from database) to Tiptap format
+	function convertBlocksToTiptap(blocksContent: any): JSONContent {
+		if (!blocksContent || !blocksContent.blocks) {
+			return { type: 'doc', content: [] }
+		}
+
+		const tiptapContent = blocksContent.blocks.map((block: any) => {
+			switch (block.type) {
+				case 'paragraph':
+					return {
+						type: 'paragraph',
+						content: block.content ? [{ type: 'text', text: block.content }] : []
+					}
+				
+				case 'heading':
+					return {
+						type: 'heading',
+						attrs: { level: block.level || 1 },
+						content: block.content ? [{ type: 'text', text: block.content }] : []
+					}
+				
+				case 'bulletList':
+				case 'ul':
+					return {
+						type: 'bulletList',
+						content: (block.content || []).map((item: any) => ({
+							type: 'listItem',
+							content: [{
+								type: 'paragraph',
+								content: [{ type: 'text', text: item.content || item }]
+							}]
+						}))
+					}
+				
+				case 'orderedList':
+				case 'ol':
+					return {
+						type: 'orderedList',
+						content: (block.content || []).map((item: any) => ({
+							type: 'listItem',
+							content: [{
+								type: 'paragraph',
+								content: [{ type: 'text', text: item.content || item }]
+							}]
+						}))
+					}
+				
+				case 'blockquote':
+					return {
+						type: 'blockquote',
+						content: [{
+							type: 'paragraph',
+							content: [{ type: 'text', text: block.content || '' }]
+						}]
+					}
+				
+				case 'codeBlock':
+				case 'code':
+					return {
+						type: 'codeBlock',
+						attrs: { language: block.language || '' },
+						content: [{ type: 'text', text: block.content || '' }]
+					}
+				
+				case 'image':
+					return {
+						type: 'image',
+						attrs: {
+							src: block.src || '',
+							alt: block.alt || '',
+							title: block.caption || ''
+						}
+					}
+				
+				case 'hr':
+				case 'horizontalRule':
+					return { type: 'horizontalRule' }
+				
+				default:
+					// Default to paragraph for unknown types
+					return {
+						type: 'paragraph',
+						content: block.content ? [{ type: 'text', text: block.content }] : []
+					}
+			}
+		})
+
+		return {
+			type: 'doc',
+			content: tiptapContent
+		}
+	}
+
+	// Convert Tiptap format back to blocks format for saving
+	function convertTiptapToBlocks(tiptapContent: JSONContent): any {
+		if (!tiptapContent || !tiptapContent.content) {
+			return { blocks: [] }
+		}
+
+		const blocks = tiptapContent.content.map((node: any) => {
+			switch (node.type) {
+				case 'paragraph':
+					const text = extractTextFromNode(node)
+					return text ? { type: 'paragraph', content: text } : null
+				
+				case 'heading':
+					return {
+						type: 'heading',
+						level: node.attrs?.level || 1,
+						content: extractTextFromNode(node)
+					}
+				
+				case 'bulletList':
+					return {
+						type: 'bulletList',
+						content: node.content?.map((item: any) => {
+							const itemText = extractTextFromNode(item.content?.[0])
+							return itemText
+						}).filter(Boolean) || []
+					}
+				
+				case 'orderedList':
+					return {
+						type: 'orderedList',
+						content: node.content?.map((item: any) => {
+							const itemText = extractTextFromNode(item.content?.[0])
+							return itemText
+						}).filter(Boolean) || []
+					}
+				
+				case 'blockquote':
+					return {
+						type: 'blockquote',
+						content: extractTextFromNode(node.content?.[0])
+					}
+				
+				case 'codeBlock':
+					return {
+						type: 'codeBlock',
+						language: node.attrs?.language || '',
+						content: node.content?.[0]?.text || ''
+					}
+				
+				case 'image':
+					return {
+						type: 'image',
+						src: node.attrs?.src || '',
+						alt: node.attrs?.alt || '',
+						caption: node.attrs?.title || ''
+					}
+				
+				case 'horizontalRule':
+					return { type: 'hr' }
+				
+				default:
+					// Skip unknown types
+					return null
+			}
+		}).filter(Boolean)
+
+		return { blocks }
+	}
+
+	// Helper function to extract text from a node
+	function extractTextFromNode(node: any): string {
+		if (!node) return ''
+		if (node.text) return node.text
+		if (node.content && Array.isArray(node.content)) {
+			return node.content.map((n: any) => extractTextFromNode(n)).join('')
+		}
+		return ''
+	}
+
+	onMount(async () => {
+		// Wait a tick to ensure page params are loaded
+		await new Promise((resolve) => setTimeout(resolve, 0))
+		await loadPost()
+	})
+
+	async function loadPost() {
+		const postId = $page.params.id
+
+		if (!postId) {
+			loadError = 'No post ID provided'
+			loading = false
+			return
+		}
+
+		const auth = localStorage.getItem('admin_auth')
+
+		if (!auth) {
+			goto('/admin/login')
+			return
+		}
+
+		try {
+			const response = await fetch(`/api/posts/${postId}`, {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (response.ok) {
+				post = await response.json()
+
+				// Populate form fields
+				title = post.title || ''
+				postType = post.postType || 'post'
+				status = post.status || 'draft'
+				slug = post.slug || ''
+				excerpt = post.excerpt || ''
+				
+				// Convert blocks format to Tiptap format if needed
+				if (post.content && post.content.blocks) {
+					content = convertBlocksToTiptap(post.content)
+				} else if (post.content && post.content.type === 'doc') {
+					content = post.content
+				} else {
+					content = { type: 'doc', content: [] }
+				}
+				
+				tags = post.tags || []
+			} else {
+				if (response.status === 404) {
+					loadError = 'Post not found'
+				} else if (response.status === 401) {
+					goto('/admin/login')
+					return
+				} else {
+					loadError = `Failed to load post: ${response.status} ${response.statusText}`
+				}
+			}
+		} catch (error) {
+			loadError = 'Network error occurred while loading post'
+		} finally {
+			loading = false
+		}
+	}
+
+	function addTag() {
+		if (tagInput && !tags.includes(tagInput)) {
+			tags = [...tags, tagInput]
+			tagInput = ''
+		}
+	}
+
+	function removeTag(tag: string) {
+		tags = tags.filter((t) => t !== tag)
+	}
+
+	async function handleSave(publishStatus?: 'draft' | 'published') {
+		const auth = localStorage.getItem('admin_auth')
+		if (!auth) {
+			goto('/admin/login')
+			return
+		}
+
+		saving = true
+		
+		// Convert content to blocks format if it's in Tiptap format
+		let saveContent = content
+		if (config?.showContent && content && content.type === 'doc') {
+			saveContent = convertTiptapToBlocks(content)
+		}
+		
+		const postData = {
+			title: config?.showTitle ? title : null,
+			slug,
+			type: postType,
+			status: publishStatus || status,
+			content: config?.showContent ? saveContent : null,
+			excerpt: postType === 'essay' ? excerpt : undefined,
+			link_url: undefined,
+			linkDescription: undefined,
+			tags
+		}
+
+		try {
+			const response = await fetch(`/api/posts/${$page.params.id}`, {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Basic ${auth}`
+				},
+				body: JSON.stringify(postData)
+			})
+
+			if (response.ok) {
+				post = await response.json()
+				if (publishStatus) {
+					status = publishStatus
+				}
+			}
+		} catch (error) {
+			console.error('Failed to save post:', error)
+		} finally {
+			saving = false
+		}
+	}
+
+	function openDeleteConfirmation() {
+		showMetadata = false
+		showDeleteConfirmation = true
+	}
+
+	async function handleDelete() {
+		const auth = localStorage.getItem('admin_auth')
+		if (!auth) {
+			goto('/admin/login')
+			return
+		}
+
+		try {
+			const response = await fetch(`/api/posts/${$page.params.id}`, {
+				method: 'DELETE',
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (response.ok) {
+				showDeleteConfirmation = false
+				goto('/admin/posts')
+			}
+		} catch (error) {
+			console.error('Failed to delete post:', error)
+		}
+	}
+
+	function handleMetadataPopover(event: MouseEvent) {
+		const target = event.target as Node
+		// Don't close if clicking inside the metadata button or anywhere in a metadata popover
+		if (
+			metadataButtonRef?.contains(target) ||
+			document.querySelector('.metadata-popover')?.contains(target)
+		) {
+			return
+		}
+		showMetadata = false
+	}
+
+	$effect(() => {
+		if (showMetadata) {
+			document.addEventListener('click', handleMetadataPopover)
+			return () => document.removeEventListener('click', handleMetadataPopover)
+		}
+	})
+</script>
+
+<AdminPage>
+	<header slot="header">
+		{#if !loading && post}
+			<div class="header-left">
+				<button class="btn-icon" onclick={() => goto('/admin/posts')}>
+					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+						<path
+							d="M12.5 15L7.5 10L12.5 5"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+			</div>
+			<div class="header-actions">
+				<div class="metadata-popover-container">
+					<button
+						class="btn btn-text"
+						onclick={(e) => {
+							e.stopPropagation()
+							showMetadata = !showMetadata
+						}}
+						bind:this={metadataButtonRef}
+					>
+						<svg width="16" height="16" viewBox="0 0 56 56" fill="none">
+							<path
+								fill="currentColor"
+								d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"
+							/>
+						</svg>
+						Metadata
+					</button>
+
+					{#if showMetadata && metadataButtonRef}
+						<PostMetadataPopover
+							{post}
+							{postType}
+							triggerElement={metadataButtonRef}
+							bind:slug
+							bind:excerpt
+							bind:tags
+							bind:tagInput
+							onAddTag={addTag}
+							onRemoveTag={removeTag}
+							onDelete={openDeleteConfirmation}
+							onClose={() => (showMetadata = false)}
+						/>
+					{/if}
+				</div>
+				<SaveActionsGroup
+					{status}
+					onSave={handleSave}
+					disabled={saving}
+					isLoading={saving}
+					canSave={true}
+				/>
+			</div>
+		{/if}
+	</header>
+
+	{#if loading}
+		<div class="loading-container">
+			<LoadingSpinner />
+		</div>
+	{:else if loadError}
+		<div class="error-container">
+			<h2>Error Loading Post</h2>
+			<p>{loadError}</p>
+			<button class="btn btn-primary" onclick={() => loadPost()}>Try Again</button>
+		</div>
+	{:else if post}
+		<div class="post-composer">
+			<div class="main-content">
+				{#if config?.showTitle}
+					<input type="text" bind:value={title} placeholder="Title" class="title-input" />
+				{/if}
+
+				{#if config?.showContent}
+					<div class="editor-wrapper">
+						<Editor bind:data={content} placeholder="Continue writing..." />
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="error">Post not found</div>
+	{/if}
+</AdminPage>
+
+<DeleteConfirmationModal
+	bind:isOpen={showDeleteConfirmation}
+	title="Delete Post?"
+	message="Are you sure you want to delete this post? This action cannot be undone."
+	confirmText="Delete Post"
+	onConfirm={handleDelete}
+	onCancel={() => (showDeleteConfirmation = false)}
+/>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.loading-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 400px;
+	}
+
+	.error-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: 400px;
+		text-align: center;
+		gap: $unit-2x;
+
+		h2 {
+			color: $grey-20;
+			margin: 0;
+		}
+
+		p {
+			color: $grey-40;
+			margin: 0;
+		}
+	}
+
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn-text {
+		padding: $unit $unit-2x;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		border-radius: 8px;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.btn-small {
+			padding: $unit $unit-2x;
+			font-size: 0.875rem;
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + $unit);
+		right: 0;
+		background: white;
+		border: 1px solid $grey-80;
+		border-radius: 8px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		min-width: 150px;
+		z-index: 100;
+		overflow: hidden;
+	}
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x;
+		border: none;
+		background: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.2s ease;
+		font-size: 0.875rem;
+		color: $grey-10;
+
+		&:hover {
+			background: $grey-95;
+		}
+
+		&:not(:last-child) {
+			border-bottom: 1px solid $grey-90;
+		}
+	}
+
+	.post-composer {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: $unit-4x;
+	}
+
+	.main-content {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+		min-width: 0;
+	}
+
+	.title-input {
+		width: 100%;
+		padding: 0 $unit-2x;
+		border: none;
+		font-size: 2.5rem;
+		font-weight: 700;
+		color: $grey-10;
+		background: none;
+
+		&:focus {
+			outline: none;
+		}
+
+		&::placeholder {
+			color: $grey-60;
+		}
+	}
+
+	.editor-wrapper {
+		width: 100%;
+		min-height: 400px;
+	}
+
+	.metadata-popover-container {
+		position: relative;
+	}
+
+	.error {
+		text-align: center;
+		color: $grey-40;
+		padding: 2rem;
+	}
+</style>
diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte
new file mode 100644
index 0000000..0819280
--- /dev/null
+++ b/src/routes/admin/posts/new/+page.svelte
@@ -0,0 +1,342 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
+	import { onMount } from 'svelte'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Editor from '$lib/components/admin/Editor.svelte'
+	import PostMetadataPopover from '$lib/components/admin/PostMetadataPopover.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import PublishDropdown from '$lib/components/admin/PublishDropdown.svelte'
+	import type { JSONContent } from '@tiptap/core'
+
+	let loading = $state(false)
+	let saving = $state(false)
+
+	let title = $state('')
+	let postType = $state<'post' | 'essay'>('post')
+	let status = $state<'draft' | 'published'>('draft')
+	let slug = $state('')
+	let excerpt = $state('')
+	let content = $state<JSONContent>({ type: 'doc', content: [] })
+	let tags = $state<string[]>([])
+	let tagInput = $state('')
+	let showMetadata = $state(false)
+	let metadataButtonRef: HTMLButtonElement
+
+	const postTypeConfig = {
+		post: { icon: '💭', label: 'Post', showTitle: false, showContent: true },
+		essay: { icon: '📝', label: 'Essay', showTitle: true, showContent: true }
+	}
+
+	let config = $derived(postTypeConfig[postType])
+
+	onMount(() => {
+		// Get post type from URL params
+		const type = $page.url.searchParams.get('type')
+		if (type && ['post', 'essay'].includes(type)) {
+			postType = type as typeof postType
+		}
+
+		// Generate initial slug based on title
+		generateSlug()
+	})
+
+	function generateSlug() {
+		if (title) {
+			slug = title
+				.toLowerCase()
+				.replace(/[^a-z0-9]+/g, '-')
+				.replace(/^-+|-+$/g, '')
+		}
+	}
+
+	// Auto-generate slug when title changes (only if slug is empty)
+	$effect(() => {
+		if (title && (!slug || slug === '')) {
+			generateSlug()
+		}
+	})
+
+	function addTag() {
+		if (tagInput && !tags.includes(tagInput)) {
+			tags = [...tags, tagInput]
+			tagInput = ''
+		}
+	}
+
+	function removeTag(tag: string) {
+		tags = tags.filter((t) => t !== tag)
+	}
+
+	async function handleSave(publishStatus?: 'draft' | 'published') {
+		const auth = localStorage.getItem('admin_auth')
+		if (!auth) {
+			goto('/admin/login')
+			return
+		}
+
+		if (!slug) {
+			generateSlug()
+		}
+
+		saving = true
+		const postData = {
+			title: config?.showTitle ? title : null,
+			slug: slug || `post-${Date.now()}`,
+			postType,
+			status: publishStatus || status,
+			content: config?.showContent ? content : null,
+			excerpt: postType === 'essay' ? excerpt : undefined,
+			tags
+		}
+
+		try {
+			const response = await fetch('/api/posts', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Basic ${auth}`
+				},
+				body: JSON.stringify(postData)
+			})
+
+			if (response.ok) {
+				const newPost = await response.json()
+				// Redirect to edit page after creation
+				goto(`/admin/posts/${newPost.id}/edit`)
+			} else {
+				console.error('Failed to create post:', response.statusText)
+			}
+		} catch (error) {
+			console.error('Failed to create post:', error)
+		} finally {
+			saving = false
+		}
+	}
+
+	// Mock post object for metadata popover
+	const mockPost = $derived({
+		id: null,
+		createdAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString(),
+		publishedAt: null
+	})
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<div class="header-left">
+			<button class="btn-icon" onclick={() => goto('/admin/posts')}>
+				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+					<path
+						d="M12.5 15L7.5 10L12.5 5"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div class="header-actions">
+			<div class="metadata-popover-container">
+				<button
+					class="btn btn-text"
+					onclick={(e) => {
+						e.stopPropagation()
+						showMetadata = !showMetadata
+					}}
+					bind:this={metadataButtonRef}
+				>
+					<svg width="16" height="16" viewBox="0 0 56 56" fill="none">
+						<path
+							fill="currentColor"
+							d="M 36.4023 19.3164 C 38.8398 19.3164 40.9257 17.7461 41.6992 15.5898 L 49.8085 15.5898 C 50.7695 15.5898 51.6133 14.7461 51.6133 13.6914 C 51.6133 12.6367 50.7695 11.8164 49.8085 11.8164 L 41.7226 11.8164 C 40.9257 9.6367 38.8398 8.0430 36.4023 8.0430 C 33.9648 8.0430 31.8789 9.6367 31.1054 11.8164 L 6.2851 11.8164 C 5.2304 11.8164 4.3867 12.6367 4.3867 13.6914 C 4.3867 14.7461 5.2304 15.5898 6.2851 15.5898 L 31.1054 15.5898 C 31.8789 17.7461 33.9648 19.3164 36.4023 19.3164 Z M 6.1913 26.1133 C 5.2304 26.1133 4.3867 26.9570 4.3867 28.0117 C 4.3867 29.0664 5.2304 29.8867 6.1913 29.8867 L 14.5586 29.8867 C 15.3320 32.0898 17.4179 33.6601 19.8554 33.6601 C 22.3164 33.6601 24.4023 32.0898 25.1757 29.8867 L 49.7149 29.8867 C 50.7695 29.8867 51.6133 29.0664 51.6133 28.0117 C 51.6133 26.9570 50.7695 26.1133 49.7149 26.1133 L 25.1757 26.1133 C 24.3789 23.9570 22.2929 22.3867 19.8554 22.3867 C 17.4413 22.3867 15.3554 23.9570 14.5586 26.1133 Z M 36.4023 47.9570 C 38.8398 47.9570 40.9257 46.3867 41.6992 44.2070 L 49.8085 44.2070 C 50.7695 44.2070 51.6133 43.3867 51.6133 42.3320 C 51.6133 41.2773 50.7695 40.4336 49.8085 40.4336 L 41.6992 40.4336 C 40.9257 38.2539 38.8398 36.7070 36.4023 36.7070 C 33.9648 36.7070 31.8789 38.2539 31.1054 40.4336 L 6.2851 40.4336 C 5.2304 40.4336 4.3867 41.2773 4.3867 42.3320 C 4.3867 43.3867 5.2304 44.2070 6.2851 44.2070 L 31.1054 44.2070 C 31.8789 46.3867 33.9648 47.9570 36.4023 47.9570 Z"
+						/>
+					</svg>
+					Metadata
+				</button>
+
+				{#if showMetadata && metadataButtonRef}
+					<PostMetadataPopover
+						post={mockPost}
+						{postType}
+						triggerElement={metadataButtonRef}
+						bind:slug
+						bind:excerpt
+						bind:tags
+						bind:tagInput
+						onAddTag={addTag}
+						onRemoveTag={removeTag}
+						onDelete={() => {}}
+						onClose={() => (showMetadata = false)}
+					/>
+				{/if}
+			</div>
+			<PublishDropdown
+				onPublish={() => handleSave('published')}
+				onSaveDraft={() => handleSave('draft')}
+				disabled={saving}
+				isLoading={saving}
+			/>
+		</div>
+	</header>
+
+	<div class="post-composer">
+		<div class="main-content">
+			{#if config?.showTitle}
+				<input type="text" bind:value={title} placeholder="Title" class="title-input" />
+			{/if}
+
+			{#if config?.showContent}
+				<div class="editor-wrapper">
+					<Editor bind:data={content} placeholder="Start writing..." />
+				</div>
+			{/if}
+		</div>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+	}
+
+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn-text {
+		padding: $unit $unit-2x;
+		border: none;
+		background: none;
+		color: $grey-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		border-radius: 8px;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $grey-90;
+			color: $grey-10;
+		}
+	}
+
+	.btn {
+		padding: $unit-2x $unit-3x;
+		border: none;
+		border-radius: 50px;
+		font-size: 0.925rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+
+		&:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + $unit);
+		right: 0;
+		background: white;
+		border: 1px solid $grey-80;
+		border-radius: 8px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		min-width: 150px;
+		z-index: 100;
+		overflow: hidden;
+	}
+
+	.dropdown-item {
+		width: 100%;
+		padding: $unit-2x;
+		border: none;
+		background: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.2s ease;
+		font-size: 0.875rem;
+		color: $grey-10;
+
+		&:hover {
+			background: $grey-95;
+		}
+
+		&:not(:last-child) {
+			border-bottom: 1px solid $grey-90;
+		}
+	}
+
+	.post-composer {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: $unit-4x;
+	}
+
+	.main-content {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+		min-width: 0;
+	}
+
+	.title-input {
+		width: 100%;
+		padding: 0 $unit-2x;
+		border: none;
+		font-size: 2.5rem;
+		font-weight: 700;
+		color: $grey-10;
+		background: none;
+
+		&:focus {
+			outline: none;
+		}
+
+		&::placeholder {
+			color: $grey-60;
+		}
+	}
+
+	.editor-wrapper {
+		width: 100%;
+		min-height: 400px;
+	}
+
+	.metadata-popover-container {
+		position: relative;
+	}
+</style>
diff --git a/src/routes/admin/projects/+page.svelte b/src/routes/admin/projects/+page.svelte
new file mode 100644
index 0000000..082bcd0
--- /dev/null
+++ b/src/routes/admin/projects/+page.svelte
@@ -0,0 +1,313 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import AdminHeader from '$lib/components/admin/AdminHeader.svelte'
+	import AdminFilters from '$lib/components/admin/AdminFilters.svelte'
+	import ProjectListItem from '$lib/components/admin/ProjectListItem.svelte'
+	import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
+	import Button from '$lib/components/admin/Button.svelte'
+	import Select from '$lib/components/admin/Select.svelte'
+
+	interface Project {
+		id: number
+		title: string
+		subtitle: string | null
+		year: number
+		client: string | null
+		status: string
+		projectType: string
+		logoUrl: string | null
+		backgroundColor: string | null
+		highlightColor: string | null
+		publishedAt: string | null
+		createdAt: string
+		updatedAt: string
+	}
+
+	let projects = $state<Project[]>([])
+	let filteredProjects = $state<Project[]>([])
+	let isLoading = $state(true)
+	let error = $state('')
+	let showDeleteModal = $state(false)
+	let projectToDelete = $state<Project | null>(null)
+	let statusCounts = $state<Record<string, number>>({})
+
+	// Filter state
+	let selectedStatusFilter = $state<string>('all')
+	let selectedTypeFilter = $state<string>('all')
+
+	// Create filter options
+	const statusFilterOptions = $derived([
+		{ value: 'all', label: 'All projects' },
+		{ value: 'published', label: 'Published' },
+		{ value: 'draft', label: 'Draft' }
+	])
+
+	const typeFilterOptions = [
+		{ value: 'all', label: 'All types' },
+		{ value: 'work', label: 'Work' },
+		{ value: 'labs', label: 'Labs' }
+	]
+
+	onMount(async () => {
+		await loadProjects()
+		// Handle clicks outside dropdowns
+		document.addEventListener('click', handleOutsideClick)
+		return () => document.removeEventListener('click', handleOutsideClick)
+	})
+
+	function handleOutsideClick(event: MouseEvent) {
+		const target = event.target as HTMLElement
+		if (!target.closest('.dropdown-container')) {
+			// Close any open dropdowns by telling all ProjectListItems
+			document.dispatchEvent(new CustomEvent('closeDropdowns'))
+		}
+	}
+
+	async function loadProjects() {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch('/api/projects', {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				if (response.status === 401) {
+					goto('/admin/login')
+					return
+				}
+				throw new Error('Failed to load projects')
+			}
+
+			const data = await response.json()
+			projects = data.projects
+
+			// Calculate status counts
+			const counts: Record<string, number> = {
+				all: projects.length,
+				published: projects.filter((p) => p.status === 'published').length,
+				draft: projects.filter((p) => p.status === 'draft').length
+			}
+			statusCounts = counts
+
+			// Apply initial filter
+			applyFilter()
+		} catch (err) {
+			error = 'Failed to load projects'
+			console.error(err)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	function handleEdit(event: CustomEvent<{ project: Project }>) {
+		goto(`/admin/projects/${event.detail.project.id}/edit`)
+	}
+
+	async function handleTogglePublish(event: CustomEvent<{ project: Project }>) {
+		const project = event.detail.project
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			const newStatus = project.status === 'published' ? 'draft' : 'published'
+
+			const response = await fetch(`/api/projects/${project.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Basic ${auth}`
+				},
+				body: JSON.stringify({ status: newStatus })
+			})
+
+			if (response.ok) {
+				await loadProjects()
+			}
+		} catch (err) {
+			console.error('Failed to update project status:', err)
+		}
+	}
+
+	function handleDelete(event: CustomEvent<{ project: Project }>) {
+		projectToDelete = event.detail.project
+		showDeleteModal = true
+	}
+
+	async function confirmDelete() {
+		if (!projectToDelete) return
+
+		try {
+			const auth = localStorage.getItem('admin_auth')
+
+			const response = await fetch(`/api/projects/${projectToDelete.id}`, {
+				method: 'DELETE',
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (response.ok) {
+				await loadProjects()
+			}
+		} catch (err) {
+			console.error('Failed to delete project:', err)
+		} finally {
+			showDeleteModal = false
+			projectToDelete = null
+		}
+	}
+
+	function cancelDelete() {
+		showDeleteModal = false
+		projectToDelete = null
+	}
+
+	function applyFilter() {
+		let filtered = projects
+
+		// Apply status filter
+		if (selectedStatusFilter !== 'all') {
+			filtered = filtered.filter((project) => project.status === selectedStatusFilter)
+		}
+
+		// Apply type filter based on projectType field
+		if (selectedTypeFilter !== 'all') {
+			filtered = filtered.filter((project) => project.projectType === selectedTypeFilter)
+		}
+
+		filteredProjects = filtered
+	}
+
+	function handleStatusFilterChange() {
+		applyFilter()
+	}
+
+	function handleTypeFilterChange() {
+		applyFilter()
+	}
+</script>
+
+<AdminPage>
+	<AdminHeader title="Projects" slot="header">
+		{#snippet actions()}
+			<Button variant="primary" buttonSize="large" href="/admin/projects/new">New Project</Button>
+		{/snippet}
+	</AdminHeader>
+
+	{#if error}
+		<div class="error">{error}</div>
+	{:else}
+		<!-- Filters -->
+		<AdminFilters>
+			{#snippet left()}
+				<Select
+					bind:value={selectedStatusFilter}
+					options={statusFilterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleStatusFilterChange}
+				/>
+				<Select
+					bind:value={selectedTypeFilter}
+					options={typeFilterOptions}
+					size="small"
+					variant="minimal"
+					onchange={handleTypeFilterChange}
+				/>
+			{/snippet}
+		</AdminFilters>
+
+		<!-- Projects List -->
+		{#if isLoading}
+			<div class="loading">
+				<div class="spinner"></div>
+				<p>Loading projects...</p>
+			</div>
+		{:else if filteredProjects.length === 0}
+			<div class="empty-state">
+				<p>
+					{#if selectedStatusFilter === 'all' && selectedTypeFilter === 'all'}
+						No projects found. Create your first project!
+					{:else}
+						No projects found matching the current filters. Try adjusting your filters or create a
+						new project.
+					{/if}
+				</p>
+			</div>
+		{:else}
+			<div class="projects-list">
+				{#each filteredProjects as project}
+					<ProjectListItem
+						{project}
+						onedit={handleEdit}
+						ontogglePublish={handleTogglePublish}
+						ondelete={handleDelete}
+					/>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</AdminPage>
+
+<DeleteConfirmationModal
+	bind:isOpen={showDeleteModal}
+	title="Delete project?"
+	message={projectToDelete
+		? `Are you sure you want to delete "${projectToDelete.title}"? This action cannot be undone.`
+		: ''}
+	onConfirm={confirmDelete}
+	onCancel={cancelDelete}
+/>
+
+<style lang="scss">
+	.error {
+		text-align: center;
+		padding: $unit-6x;
+		color: #d33;
+	}
+
+	.loading {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		.spinner {
+			width: 32px;
+			height: 32px;
+			border: 3px solid $grey-80;
+			border-top-color: $primary-color;
+			border-radius: 50%;
+			margin: 0 auto $unit-2x;
+			animation: spin 0.8s linear infinite;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.empty-state {
+		padding: $unit-8x;
+		text-align: center;
+		color: $grey-40;
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.projects-list {
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/src/routes/admin/projects/[id]/edit/+page.svelte b/src/routes/admin/projects/[id]/edit/+page.svelte
new file mode 100644
index 0000000..2e98dcb
--- /dev/null
+++ b/src/routes/admin/projects/[id]/edit/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+	import ProjectForm from '$lib/components/admin/ProjectForm.svelte'
+	import type { Project } from '$lib/types/project'
+
+	let project = $state<Project | null>(null)
+	let isLoading = $state(true)
+	let error = $state('')
+
+	const projectId = $derived($page.params.id)
+
+	onMount(async () => {
+		await loadProject()
+	})
+
+	async function loadProject() {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) {
+				goto('/admin/login')
+				return
+			}
+
+			const response = await fetch(`/api/projects/${projectId}`, {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to load project')
+			}
+
+			const data = await response.json()
+			project = data
+		} catch (err) {
+			error = 'Failed to load project'
+			console.error(err)
+		} finally {
+			isLoading = false
+		}
+	}
+</script>
+
+{#if isLoading}
+	<div class="loading">Loading project...</div>
+{:else if error}
+	<div class="error">{error}</div>
+{:else if !project}
+	<div class="error">Project not found</div>
+{:else}
+	<ProjectForm {project} mode="edit" />
+{/if}
+
+<style lang="scss">
+	.loading,
+	.error {
+		text-align: center;
+		padding: $unit-6x;
+		color: $grey-40;
+	}
+
+	.error {
+		color: #d33;
+	}
+</style>
diff --git a/src/routes/admin/projects/new/+page.svelte b/src/routes/admin/projects/new/+page.svelte
new file mode 100644
index 0000000..13e9a21
--- /dev/null
+++ b/src/routes/admin/projects/new/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import ProjectForm from '$lib/components/admin/ProjectForm.svelte'
+</script>
+
+<ProjectForm mode="create" />
diff --git a/src/routes/admin/test-upload/+page.svelte b/src/routes/admin/test-upload/+page.svelte
new file mode 100644
index 0000000..c435e89
--- /dev/null
+++ b/src/routes/admin/test-upload/+page.svelte
@@ -0,0 +1,371 @@
+<script lang="ts">
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+	import Editor from '$lib/components/admin/Editor.svelte'
+	import type { JSONContent } from '@tiptap/core'
+
+	let testContent = $state<JSONContent>({
+		type: 'doc',
+		content: [
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: 'Test the image upload functionality:'
+					}
+				]
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: '1. Try pasting an image from clipboard (Cmd+V)'
+					}
+				]
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: '2. Click the image placeholder below to upload'
+					}
+				]
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: '3. Drag and drop an image onto the placeholder'
+					}
+				]
+			},
+			{
+				type: 'image-placeholder'
+			}
+		]
+	})
+
+	let uploadedImages = $state<Array<{ url: string; timestamp: string }>>([])
+
+	function handleEditorChange(content: JSONContent) {
+		testContent = content
+
+		// Extract images from content
+		const images: Array<{ url: string; timestamp: string }> = []
+
+		function extractImages(node: any) {
+			if (node.type === 'image' && node.attrs?.src) {
+				images.push({
+					url: node.attrs.src,
+					timestamp: new Date().toLocaleTimeString()
+				})
+			}
+			if (node.content) {
+				node.content.forEach(extractImages)
+			}
+		}
+
+		if (content.content) {
+			content.content.forEach(extractImages)
+		}
+
+		uploadedImages = images
+	}
+
+	// Check local uploads directory
+	let localUploadsExist = $state(false)
+
+	async function checkLocalUploads() {
+		try {
+			const auth = localStorage.getItem('admin_auth')
+			if (!auth) return
+
+			const response = await fetch('/api/media?limit=10', {
+				headers: { Authorization: `Basic ${auth}` }
+			})
+			if (response.ok) {
+				const data = await response.json()
+				localUploadsExist = data.media.some((m: any) => m.url.includes('/local-uploads/'))
+			}
+		} catch (error) {
+			console.error('Failed to check uploads:', error)
+		}
+	}
+
+	// Check on mount and when images change
+	$effect(() => {
+		checkLocalUploads()
+	})
+
+	// Re-check when new images are uploaded
+	$effect(() => {
+		if (uploadedImages.length > 0) {
+			setTimeout(checkLocalUploads, 500) // Small delay to ensure DB is updated
+		}
+	})
+</script>
+
+<AdminPage>
+	<header slot="header">
+		<h1>Upload Test</h1>
+		<a href="/admin/projects" class="back-link">← Back to Projects</a>
+	</header>
+
+	<div class="test-container">
+		<div class="info-section">
+			<h2>Image Upload Test</h2>
+			<p>This page helps you test that image uploads are working correctly.</p>
+
+			{#if localUploadsExist}
+				<div class="status success">✅ Local uploads directory is configured</div>
+			{:else}
+				<div class="status warning">⚠️ No local uploads found yet</div>
+			{/if}
+
+			<div class="instructions">
+				<h3>How to test:</h3>
+				<ol>
+					<li>Copy an image to your clipboard</li>
+					<li>Click in the editor below and paste (Cmd+V)</li>
+					<li>Or click the image placeholder to browse files</li>
+					<li>Or drag and drop an image onto the placeholder</li>
+				</ol>
+			</div>
+		</div>
+
+		<div class="editor-section">
+			<h3>Editor with Image Upload</h3>
+			<Editor
+				bind:data={testContent}
+				onChange={handleEditorChange}
+				placeholder="Start typing or paste an image..."
+				minHeight={400}
+			/>
+		</div>
+
+		{#if uploadedImages.length > 0}
+			<div class="results-section">
+				<h3>Uploaded Images</h3>
+				<div class="image-grid">
+					{#each uploadedImages as image}
+						<div class="uploaded-image">
+							<img src={image.url} alt="Uploaded" />
+							<div class="image-info">
+								<span class="timestamp">{image.timestamp}</span>
+								<code class="url">{image.url}</code>
+								{#if image.url.includes('/local-uploads/')}
+									<span class="badge local">Local</span>
+								{:else if image.url.includes('cloudinary')}
+									<span class="badge cloud">Cloudinary</span>
+								{:else}
+									<span class="badge">Unknown</span>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<div class="json-section">
+			<h3>Editor Content (JSON)</h3>
+			<pre>{JSON.stringify(testContent, null, 2)}</pre>
+		</div>
+	</div>
+</AdminPage>
+
+<style lang="scss">
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+
+		h1 {
+			font-size: 1.75rem;
+			font-weight: 700;
+			margin: 0;
+			color: $grey-10;
+		}
+
+		.back-link {
+			color: $grey-40;
+			text-decoration: none;
+
+			&:hover {
+				color: $grey-20;
+			}
+		}
+	}
+
+	.test-container {
+		max-width: 800px;
+		margin: 0 auto;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.info-section {
+		background: white;
+		padding: $unit-4x;
+		border-radius: $unit-2x;
+		margin-bottom: $unit-4x;
+		box-sizing: border-box;
+		overflow: hidden;
+
+		h2 {
+			margin: 0 0 $unit-2x;
+		}
+
+		p {
+			color: $grey-30;
+			margin-bottom: $unit-3x;
+		}
+	}
+
+	.status {
+		padding: $unit-2x $unit-3x;
+		border-radius: $unit;
+		margin-bottom: $unit-3x;
+
+		&.success {
+			background: #e6f7e6;
+			color: #2d662d;
+		}
+
+		&.warning {
+			background: #fff4e6;
+			color: #996600;
+		}
+	}
+
+	.instructions {
+		h3 {
+			font-size: 1rem;
+			margin-bottom: $unit-2x;
+		}
+
+		ol {
+			margin: 0;
+			padding-left: $unit-4x;
+
+			li {
+				margin-bottom: $unit;
+				color: $grey-30;
+			}
+		}
+	}
+
+	.editor-section {
+		background: white;
+		padding: $unit-4x;
+		border-radius: $unit-2x;
+		margin-bottom: $unit-4x;
+		box-sizing: border-box;
+		overflow: hidden;
+
+		h3 {
+			margin: 0 0 $unit-3x;
+		}
+	}
+
+	.results-section {
+		background: white;
+		padding: $unit-4x;
+		border-radius: $unit-2x;
+		margin-bottom: $unit-4x;
+		box-sizing: border-box;
+		overflow: hidden;
+
+		h3 {
+			margin: 0 0 $unit-3x;
+		}
+	}
+
+	.image-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		gap: $unit-3x;
+	}
+
+	.uploaded-image {
+		border: 1px solid $grey-80;
+		border-radius: $unit;
+		overflow: hidden;
+
+		img {
+			width: 100%;
+			height: 150px;
+			object-fit: cover;
+		}
+
+		.image-info {
+			padding: $unit-2x;
+			background: $grey-95;
+
+			.timestamp {
+				display: block;
+				font-size: 0.875rem;
+				color: $grey-40;
+				margin-bottom: $unit;
+			}
+
+			.url {
+				display: block;
+				font-size: 0.75rem;
+				word-break: break-all;
+				color: $grey-30;
+				margin-bottom: $unit;
+				overflow-wrap: break-word;
+				max-width: 100%;
+			}
+
+			.badge {
+				display: inline-block;
+				padding: 2px 8px;
+				font-size: 0.75rem;
+				border-radius: 4px;
+
+				&.local {
+					background: #e6f0ff;
+					color: #0066cc;
+				}
+
+				&.cloud {
+					background: #f0e6ff;
+					color: #6600cc;
+				}
+			}
+		}
+	}
+
+	.json-section {
+		background: white;
+		padding: $unit-4x;
+		border-radius: $unit-2x;
+		box-sizing: border-box;
+		overflow: hidden;
+
+		h3 {
+			margin: 0 0 $unit-3x;
+		}
+
+		pre {
+			background: $grey-95;
+			padding: $unit-3x;
+			border-radius: $unit;
+			overflow-x: auto;
+			overflow-y: auto;
+			max-height: 400px;
+			font-size: 0.875rem;
+			line-height: 1.5;
+			margin: 0;
+			color: $grey-10;
+			white-space: pre-wrap;
+			word-wrap: break-word;
+		}
+	}
+</style>
diff --git a/src/routes/admin/universe/compose/+page.svelte b/src/routes/admin/universe/compose/+page.svelte
new file mode 100644
index 0000000..be51d97
--- /dev/null
+++ b/src/routes/admin/universe/compose/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import UniverseComposer from '$lib/components/admin/UniverseComposer.svelte'
+	import AdminPage from '$lib/components/admin/AdminPage.svelte'
+
+	// Get initial state from URL params
+	$: postType = ($page.url.searchParams.get('type') as 'post' | 'essay') || 'essay'
+	$: initialContent = $page.url.searchParams.get('content')
+		? JSON.parse($page.url.searchParams.get('content')!)
+		: undefined
+</script>
+
+<AdminPage>
+	<UniverseComposer isOpen={true} initialMode="page" initialPostType={postType} {initialContent} />
+</AdminPage>
diff --git a/src/routes/api/albums/+server.ts b/src/routes/api/albums/+server.ts
new file mode 100644
index 0000000..6850832
--- /dev/null
+++ b/src/routes/api/albums/+server.ts
@@ -0,0 +1,128 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	getPaginationParams,
+	getPaginationMeta,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/albums - List all albums
+export const GET: RequestHandler = async (event) => {
+	try {
+		const { page, limit } = getPaginationParams(event.url)
+		const skip = (page - 1) * limit
+
+		// Get filter parameters
+		const status = event.url.searchParams.get('status')
+		const isPhotography = event.url.searchParams.get('isPhotography')
+
+		// Build where clause
+		const where: any = {}
+		if (status) {
+			where.status = status
+		}
+
+		if (isPhotography !== null) {
+			where.isPhotography = isPhotography === 'true'
+		}
+
+		// Get total count
+		const total = await prisma.album.count({ where })
+
+		// Get albums with photo count and photos for thumbnails
+		const albums = await prisma.album.findMany({
+			where,
+			orderBy: { createdAt: 'desc' },
+			skip,
+			take: limit,
+			include: {
+				photos: {
+					select: {
+						id: true,
+						url: true,
+						thumbnailUrl: true,
+						caption: true
+					},
+					orderBy: { displayOrder: 'asc' },
+					take: 5 // Only get first 5 photos for thumbnails
+				},
+				_count: {
+					select: { photos: true }
+				}
+			}
+		})
+
+		const pagination = getPaginationMeta(total, page, limit)
+
+		logger.info('Albums list retrieved', { total, page, limit })
+
+		return jsonResponse({
+			albums,
+			pagination
+		})
+	} catch (error) {
+		logger.error('Failed to retrieve albums', error as Error)
+		return errorResponse('Failed to retrieve albums', 500)
+	}
+}
+
+// POST /api/albums - Create a new album
+export const POST: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const body = await parseRequestBody<{
+			slug: string
+			title: string
+			description?: string
+			date?: string
+			location?: string
+			coverPhotoId?: number
+			isPhotography?: boolean
+			status?: string
+			showInUniverse?: boolean
+		}>(event.request)
+
+		if (!body || !body.slug || !body.title) {
+			return errorResponse('Missing required fields: slug, title', 400)
+		}
+
+		// Check if slug already exists
+		const existing = await prisma.album.findUnique({
+			where: { slug: body.slug }
+		})
+
+		if (existing) {
+			return errorResponse('Album with this slug already exists', 409)
+		}
+
+		// Create album
+		const album = await prisma.album.create({
+			data: {
+				slug: body.slug,
+				title: body.title,
+				description: body.description,
+				date: body.date ? new Date(body.date) : null,
+				location: body.location,
+				coverPhotoId: body.coverPhotoId,
+				isPhotography: body.isPhotography ?? false,
+				status: body.status ?? 'draft',
+				showInUniverse: body.showInUniverse ?? false
+			}
+		})
+
+		logger.info('Album created', { id: album.id, slug: album.slug })
+
+		return jsonResponse(album, 201)
+	} catch (error) {
+		logger.error('Failed to create album', error as Error)
+		return errorResponse('Failed to create album', 500)
+	}
+}
diff --git a/src/routes/api/albums/[id]/+server.ts b/src/routes/api/albums/[id]/+server.ts
new file mode 100644
index 0000000..33d6d59
--- /dev/null
+++ b/src/routes/api/albums/[id]/+server.ts
@@ -0,0 +1,202 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/albums/[id] - Get a single album
+export const GET: RequestHandler = async (event) => {
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid album ID', 400)
+	}
+
+	try {
+		const album = await prisma.album.findUnique({
+			where: { id },
+			include: {
+				photos: {
+					orderBy: { displayOrder: 'asc' }
+				},
+				_count: {
+					select: { photos: true }
+				}
+			}
+		})
+
+		if (!album) {
+			return errorResponse('Album not found', 404)
+		}
+
+		// Get all media usage records for this album's photos in one query
+		const mediaUsages = await prisma.mediaUsage.findMany({
+			where: {
+				contentType: 'album',
+				contentId: album.id,
+				fieldName: 'photos'
+			},
+			include: {
+				media: true
+			}
+		})
+
+		// Create a map of media by mediaId for efficient lookup
+		const mediaMap = new Map()
+		mediaUsages.forEach((usage) => {
+			if (usage.media) {
+				mediaMap.set(usage.mediaId, usage.media)
+			}
+		})
+
+		// Enrich photos with media information using proper media usage tracking
+		const photosWithMedia = album.photos.map((photo) => {
+			// Find the corresponding media usage record for this photo
+			const usage = mediaUsages.find((u) => u.media && u.media.filename === photo.filename)
+			const media = usage?.media
+
+			return {
+				...photo,
+				mediaId: media?.id || null,
+				altText: media?.altText || '',
+				description: media?.description || photo.caption || '',
+				isPhotography: media?.isPhotography || false,
+				mimeType: media?.mimeType || 'image/jpeg',
+				size: media?.size || 0
+			}
+		})
+
+		const albumWithEnrichedPhotos = {
+			...album,
+			photos: photosWithMedia
+		}
+
+		return jsonResponse(albumWithEnrichedPhotos)
+	} catch (error) {
+		logger.error('Failed to retrieve album', error as Error)
+		return errorResponse('Failed to retrieve album', 500)
+	}
+}
+
+// PUT /api/albums/[id] - Update an album
+export const PUT: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid album ID', 400)
+	}
+
+	try {
+		const body = await parseRequestBody<{
+			slug?: string
+			title?: string
+			description?: string
+			date?: string
+			location?: string
+			coverPhotoId?: number
+			isPhotography?: boolean
+			status?: string
+			showInUniverse?: boolean
+		}>(event.request)
+
+		if (!body) {
+			return errorResponse('Invalid request body', 400)
+		}
+
+		// Check if album exists
+		const existing = await prisma.album.findUnique({
+			where: { id }
+		})
+
+		if (!existing) {
+			return errorResponse('Album not found', 404)
+		}
+
+		// If slug is being updated, check for conflicts
+		if (body.slug && body.slug !== existing.slug) {
+			const slugExists = await prisma.album.findUnique({
+				where: { slug: body.slug }
+			})
+
+			if (slugExists) {
+				return errorResponse('Album with this slug already exists', 409)
+			}
+		}
+
+		// Update album
+		const album = await prisma.album.update({
+			where: { id },
+			data: {
+				slug: body.slug ?? existing.slug,
+				title: body.title ?? existing.title,
+				description: body.description !== undefined ? body.description : existing.description,
+				date: body.date !== undefined ? (body.date ? new Date(body.date) : null) : existing.date,
+				location: body.location !== undefined ? body.location : existing.location,
+				coverPhotoId: body.coverPhotoId !== undefined ? body.coverPhotoId : existing.coverPhotoId,
+				isPhotography: body.isPhotography ?? existing.isPhotography,
+				status: body.status ?? existing.status,
+				showInUniverse: body.showInUniverse ?? existing.showInUniverse
+			}
+		})
+
+		logger.info('Album updated', { id, slug: album.slug })
+
+		return jsonResponse(album)
+	} catch (error) {
+		logger.error('Failed to update album', error as Error)
+		return errorResponse('Failed to update album', 500)
+	}
+}
+
+// DELETE /api/albums/[id] - Delete an album
+export const DELETE: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid album ID', 400)
+	}
+
+	try {
+		// Check if album exists
+		const album = await prisma.album.findUnique({
+			where: { id },
+			include: {
+				_count: {
+					select: { photos: true }
+				}
+			}
+		})
+
+		if (!album) {
+			return errorResponse('Album not found', 404)
+		}
+
+		// Check if album has photos
+		if (album._count.photos > 0) {
+			return errorResponse('Cannot delete album that contains photos', 409)
+		}
+
+		// Delete album
+		await prisma.album.delete({
+			where: { id }
+		})
+
+		logger.info('Album deleted', { id, slug: album.slug })
+
+		return new Response(null, { status: 204 })
+	} catch (error) {
+		logger.error('Failed to delete album', error as Error)
+		return errorResponse('Failed to delete album', 500)
+	}
+}
diff --git a/src/routes/api/albums/[id]/photos/+server.ts b/src/routes/api/albums/[id]/photos/+server.ts
new file mode 100644
index 0000000..57fe259
--- /dev/null
+++ b/src/routes/api/albums/[id]/photos/+server.ts
@@ -0,0 +1,254 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// POST /api/albums/[id]/photos - Add a photo to an album
+export const POST: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const albumId = parseInt(event.params.id)
+	if (isNaN(albumId)) {
+		return errorResponse('Invalid album ID', 400)
+	}
+
+	try {
+		const body = await parseRequestBody<{
+			mediaId: number
+			displayOrder?: number
+		}>(event.request)
+
+		if (!body || !body.mediaId) {
+			return errorResponse('Media ID is required', 400)
+		}
+
+		// Check if album exists
+		const album = await prisma.album.findUnique({
+			where: { id: albumId }
+		})
+
+		if (!album) {
+			return errorResponse('Album not found', 404)
+		}
+
+		// Check if media exists
+		const media = await prisma.media.findUnique({
+			where: { id: body.mediaId }
+		})
+
+		if (!media) {
+			return errorResponse('Media not found', 404)
+		}
+
+		// Check if media is already an image type
+		if (!media.mimeType.startsWith('image/')) {
+			return errorResponse('Only images can be added to albums', 400)
+		}
+
+		// Get the next display order if not provided
+		let displayOrder = body.displayOrder
+		if (displayOrder === undefined) {
+			const lastPhoto = await prisma.photo.findFirst({
+				where: { albumId },
+				orderBy: { displayOrder: 'desc' }
+			})
+			displayOrder = (lastPhoto?.displayOrder || 0) + 1
+		}
+
+		// Create photo record from media
+		const photo = await prisma.photo.create({
+			data: {
+				albumId,
+				filename: media.filename,
+				url: media.url,
+				thumbnailUrl: media.thumbnailUrl,
+				width: media.width,
+				height: media.height,
+				caption: media.description, // Use media description as initial caption
+				displayOrder,
+				status: 'published', // Photos in albums are published by default
+				showInPhotos: true
+			}
+		})
+
+		// Track media usage
+		await prisma.mediaUsage.create({
+			data: {
+				mediaId: body.mediaId,
+				contentType: 'album',
+				contentId: albumId,
+				fieldName: 'photos'
+			}
+		})
+
+		logger.info('Photo added to album', {
+			albumId,
+			photoId: photo.id,
+			mediaId: body.mediaId
+		})
+
+		// Return photo with media information for frontend compatibility
+		const photoWithMedia = {
+			...photo,
+			mediaId: body.mediaId,
+			altText: media.altText,
+			description: media.description,
+			isPhotography: media.isPhotography,
+			mimeType: media.mimeType,
+			size: media.size
+		}
+
+		return jsonResponse(photoWithMedia)
+	} catch (error) {
+		logger.error('Failed to add photo to album', error as Error)
+		return errorResponse('Failed to add photo to album', 500)
+	}
+}
+
+// PUT /api/albums/[id]/photos - Update photo order in album
+export const PUT: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const albumId = parseInt(event.params.id)
+	if (isNaN(albumId)) {
+		return errorResponse('Invalid album ID', 400)
+	}
+
+	try {
+		const body = await parseRequestBody<{
+			photoId: number
+			displayOrder: number
+		}>(event.request)
+
+		if (!body || !body.photoId || body.displayOrder === undefined) {
+			return errorResponse('Photo ID and display order are required', 400)
+		}
+
+		// Check if album exists
+		const album = await prisma.album.findUnique({
+			where: { id: albumId }
+		})
+
+		if (!album) {
+			return errorResponse('Album not found', 404)
+		}
+
+		// Update photo display order
+		const photo = await prisma.photo.update({
+			where: {
+				id: body.photoId,
+				albumId // Ensure photo belongs to this album
+			},
+			data: {
+				displayOrder: body.displayOrder
+			}
+		})
+
+		logger.info('Photo order updated', {
+			albumId,
+			photoId: body.photoId,
+			displayOrder: body.displayOrder
+		})
+
+		return jsonResponse(photo)
+	} catch (error) {
+		logger.error('Failed to update photo order', error as Error)
+		return errorResponse('Failed to update photo order', 500)
+	}
+}
+
+// DELETE /api/albums/[id]/photos - Remove a photo from an album (without deleting the media)
+export const DELETE: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const albumId = parseInt(event.params.id)
+	if (isNaN(albumId)) {
+		return errorResponse('Invalid album ID', 400)
+	}
+
+	try {
+		const url = new URL(event.request.url)
+		const photoId = url.searchParams.get('photoId')
+
+		logger.info('DELETE photo request', { albumId, photoId })
+
+		if (!photoId || isNaN(parseInt(photoId))) {
+			return errorResponse('Photo ID is required as query parameter', 400)
+		}
+
+		const photoIdNum = parseInt(photoId)
+
+		// Check if album exists
+		const album = await prisma.album.findUnique({
+			where: { id: albumId }
+		})
+
+		if (!album) {
+			logger.error('Album not found', { albumId })
+			return errorResponse('Album not found', 404)
+		}
+
+		// Check if photo exists in this album
+		const photo = await prisma.photo.findFirst({
+			where: {
+				id: photoIdNum,
+				albumId: albumId // Ensure photo belongs to this album
+			}
+		})
+
+		logger.info('Photo lookup result', { photoIdNum, albumId, found: !!photo })
+
+		if (!photo) {
+			logger.error('Photo not found in album', { photoIdNum, albumId })
+			return errorResponse('Photo not found in this album', 404)
+		}
+
+		// Find and remove the specific media usage record for this photo
+		// We need to find the media ID associated with this photo to remove the correct usage record
+		const mediaUsage = await prisma.mediaUsage.findFirst({
+			where: {
+				contentType: 'album',
+				contentId: albumId,
+				fieldName: 'photos',
+				media: {
+					filename: photo.filename // Match by filename since that's how they're linked
+				}
+			}
+		})
+
+		if (mediaUsage) {
+			await prisma.mediaUsage.delete({
+				where: { id: mediaUsage.id }
+			})
+		}
+
+		// Delete the photo record (this removes it from the album but keeps the media)
+		await prisma.photo.delete({
+			where: { id: photoIdNum }
+		})
+
+		logger.info('Photo removed from album', {
+			photoId: photoIdNum,
+			albumId: albumId
+		})
+
+		return new Response(null, { status: 204 })
+	} catch (error) {
+		logger.error('Failed to remove photo from album', error as Error)
+		return errorResponse('Failed to remove photo from album', 500)
+	}
+}
diff --git a/src/routes/api/albums/by-slug/[slug]/+server.ts b/src/routes/api/albums/by-slug/[slug]/+server.ts
new file mode 100644
index 0000000..8937091
--- /dev/null
+++ b/src/routes/api/albums/by-slug/[slug]/+server.ts
@@ -0,0 +1,57 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/albums/by-slug/[slug] - Get album by slug including photos
+export const GET: RequestHandler = async (event) => {
+	const slug = event.params.slug
+
+	if (!slug) {
+		return errorResponse('Invalid album slug', 400)
+	}
+
+	try {
+		const album = await prisma.album.findUnique({
+			where: { slug },
+			include: {
+				photos: {
+					where: {
+						status: 'published',
+						showInPhotos: true
+					},
+					orderBy: { displayOrder: 'asc' },
+					select: {
+						id: true,
+						filename: true,
+						url: true,
+						thumbnailUrl: true,
+						width: true,
+						height: true,
+						caption: true,
+						displayOrder: true
+					}
+				},
+				_count: {
+					select: {
+						photos: {
+							where: {
+								status: 'published',
+								showInPhotos: true
+							}
+						}
+					}
+				}
+			}
+		})
+
+		if (!album) {
+			return errorResponse('Album not found', 404)
+		}
+
+		return jsonResponse(album)
+	} catch (error) {
+		logger.error('Failed to retrieve album by slug', error as Error)
+		return errorResponse('Failed to retrieve album', 500)
+	}
+}
diff --git a/src/routes/api/health/+server.ts b/src/routes/api/health/+server.ts
new file mode 100644
index 0000000..60d1737
--- /dev/null
+++ b/src/routes/api/health/+server.ts
@@ -0,0 +1,28 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { isCloudinaryConfigured } from '$lib/server/cloudinary'
+import { jsonResponse, errorResponse } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+export const GET: RequestHandler = async () => {
+	try {
+		// Test database connection
+		await prisma.$queryRaw`SELECT 1`
+
+		const health = {
+			status: 'ok',
+			timestamp: new Date().toISOString(),
+			services: {
+				database: 'connected',
+				redis: 'not configured', // We'll add this later
+				cloudinary: isCloudinaryConfigured() ? 'configured' : 'not configured'
+			}
+		}
+
+		logger.info('Health check passed', health)
+		return jsonResponse(health)
+	} catch (error) {
+		logger.error('Health check failed', error as Error)
+		return errorResponse('Service unavailable', 503)
+	}
+}
diff --git a/src/routes/api/media/+server.ts b/src/routes/api/media/+server.ts
new file mode 100644
index 0000000..86f520c
--- /dev/null
+++ b/src/routes/api/media/+server.ts
@@ -0,0 +1,84 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	getPaginationParams,
+	getPaginationMeta,
+	checkAdminAuth
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/media - List all media with pagination and filters
+export const GET: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const { page, limit } = getPaginationParams(event.url)
+		const skip = (page - 1) * limit
+
+		// Get filter parameters
+		const mimeType = event.url.searchParams.get('mimeType')
+		const unused = event.url.searchParams.get('unused') === 'true'
+		const search = event.url.searchParams.get('search')
+		const isPhotography = event.url.searchParams.get('isPhotography')
+
+		// Build where clause
+		const where: any = {}
+
+		if (mimeType) {
+			where.mimeType = { startsWith: mimeType }
+		}
+
+		if (unused) {
+			where.usedIn = { equals: [] }
+		}
+
+		if (search) {
+			where.filename = { contains: search, mode: 'insensitive' }
+		}
+
+		if (isPhotography !== null) {
+			where.isPhotography = isPhotography === 'true'
+		}
+
+		// Get total count
+		const total = await prisma.media.count({ where })
+
+		// Get media items
+		const media = await prisma.media.findMany({
+			where,
+			orderBy: { createdAt: 'desc' },
+			skip,
+			take: limit,
+			select: {
+				id: true,
+				filename: true,
+				mimeType: true,
+				size: true,
+				url: true,
+				thumbnailUrl: true,
+				width: true,
+				height: true,
+				usedIn: true,
+				isPhotography: true,
+				createdAt: true
+			}
+		})
+
+		const pagination = getPaginationMeta(total, page, limit)
+
+		logger.info('Media list retrieved', { total, page, limit })
+
+		return jsonResponse({
+			media,
+			pagination
+		})
+	} catch (error) {
+		logger.error('Failed to retrieve media', error as Error)
+		return errorResponse('Failed to retrieve media', 500)
+	}
+}
diff --git a/src/routes/api/media/[id]/+server.ts b/src/routes/api/media/[id]/+server.ts
new file mode 100644
index 0000000..4c59496
--- /dev/null
+++ b/src/routes/api/media/[id]/+server.ts
@@ -0,0 +1,134 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { deleteFile, extractPublicId } from '$lib/server/cloudinary'
+import {
+	jsonResponse,
+	errorResponse,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/media/[id] - Get a single media item
+export const GET: RequestHandler = async (event) => {
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid media ID', 400)
+	}
+
+	try {
+		const media = await prisma.media.findUnique({
+			where: { id }
+		})
+
+		if (!media) {
+			return errorResponse('Media not found', 404)
+		}
+
+		return jsonResponse(media)
+	} catch (error) {
+		logger.error('Failed to retrieve media', error as Error)
+		return errorResponse('Failed to retrieve media', 500)
+	}
+}
+
+// PUT /api/media/[id] - Update a media item
+export const PUT: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid media ID', 400)
+	}
+
+	try {
+		const body = await parseRequestBody<{
+			altText?: string
+			description?: string
+			isPhotography?: boolean
+		}>(event.request)
+
+		if (!body) {
+			return errorResponse('Invalid request body', 400)
+		}
+
+		// Check if media exists
+		const existing = await prisma.media.findUnique({
+			where: { id }
+		})
+
+		if (!existing) {
+			return errorResponse('Media not found', 404)
+		}
+
+		// Update media
+		const media = await prisma.media.update({
+			where: { id },
+			data: {
+				altText: body.altText ?? existing.altText,
+				description: body.description ?? existing.description,
+				isPhotography: body.isPhotography ?? existing.isPhotography
+			}
+		})
+
+		logger.info('Media updated', { id, filename: media.filename })
+
+		return jsonResponse(media)
+	} catch (error) {
+		logger.error('Failed to update media', error as Error)
+		return errorResponse('Failed to update media', 500)
+	}
+}
+
+// DELETE /api/media/[id] - Delete a media item
+export const DELETE: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid media ID', 400)
+	}
+
+	try {
+		// Get the media item
+		const media = await prisma.media.findUnique({
+			where: { id }
+		})
+
+		if (!media) {
+			return errorResponse('Media not found', 404)
+		}
+
+		// Check if media is in use
+		if (media.usedIn && (media.usedIn as any[]).length > 0) {
+			return errorResponse('Cannot delete media that is in use', 409)
+		}
+
+		// Delete from Cloudinary
+		const publicId = extractPublicId(media.url)
+		if (publicId) {
+			const deleted = await deleteFile(publicId)
+			if (!deleted) {
+				logger.warn('Failed to delete from Cloudinary', { publicId, mediaId: id })
+			}
+		}
+
+		// Delete from database
+		await prisma.media.delete({
+			where: { id }
+		})
+
+		logger.info('Media deleted', { id, filename: media.filename })
+
+		return new Response(null, { status: 204 })
+	} catch (error) {
+		logger.error('Failed to delete media', error as Error)
+		return errorResponse('Failed to delete media', 500)
+	}
+}
diff --git a/src/routes/api/media/[id]/metadata/+server.ts b/src/routes/api/media/[id]/metadata/+server.ts
new file mode 100644
index 0000000..d879cac
--- /dev/null
+++ b/src/routes/api/media/[id]/metadata/+server.ts
@@ -0,0 +1,76 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// Update media metadata (alt text, description)
+export const PATCH: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const { id } = event.params
+		const mediaId = parseInt(id)
+
+		if (isNaN(mediaId)) {
+			return errorResponse('Invalid media ID', 400)
+		}
+
+		const body = await event.request.json()
+		const { altText, description } = body
+
+		// Validate input
+		if (typeof altText !== 'string' && typeof description !== 'string') {
+			return errorResponse('Either altText or description must be provided', 400)
+		}
+
+		// Check if media exists
+		const existingMedia = await prisma.media.findUnique({
+			where: { id: mediaId }
+		})
+
+		if (!existingMedia) {
+			return errorResponse('Media not found', 404)
+		}
+
+		// Update media metadata
+		const updatedMedia = await prisma.media.update({
+			where: { id: mediaId },
+			data: {
+				...(typeof altText === 'string' && { altText: altText.trim() || null }),
+				...(typeof description === 'string' && { description: description.trim() || null })
+			}
+		})
+
+		logger.info('Media metadata updated', {
+			id: mediaId,
+			filename: updatedMedia.filename,
+			hasAltText: !!updatedMedia.altText,
+			hasDescription: !!updatedMedia.description
+		})
+
+		return jsonResponse({
+			id: updatedMedia.id,
+			altText: updatedMedia.altText,
+			description: updatedMedia.description,
+			updatedAt: updatedMedia.updatedAt
+		})
+	} catch (error) {
+		logger.error('Media metadata update error', error as Error)
+		return errorResponse('Failed to update media metadata', 500)
+	}
+}
+
+// Handle preflight requests
+export const OPTIONS: RequestHandler = async () => {
+	return new Response(null, {
+		status: 204,
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': 'PATCH, OPTIONS',
+			'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+		}
+	})
+}
diff --git a/src/routes/api/media/[id]/usage/+server.ts b/src/routes/api/media/[id]/usage/+server.ts
new file mode 100644
index 0000000..e715977
--- /dev/null
+++ b/src/routes/api/media/[id]/usage/+server.ts
@@ -0,0 +1,55 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import { getMediaUsage } from '$lib/server/media-usage.js'
+
+// GET /api/media/[id]/usage - Check where media is used
+export const GET: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid media ID', 400)
+	}
+
+	try {
+		const media = await prisma.media.findUnique({
+			where: { id },
+			select: {
+				id: true,
+				filename: true,
+				url: true,
+				altText: true,
+				description: true,
+				isPhotography: true
+			}
+		})
+
+		if (!media) {
+			return errorResponse('Media not found', 404)
+		}
+
+		// Get detailed usage information using our new tracking system
+		const usage = await getMediaUsage(id)
+
+		return jsonResponse({
+			media: {
+				id: media.id,
+				filename: media.filename,
+				url: media.url,
+				altText: media.altText,
+				description: media.description,
+				isPhotography: media.isPhotography
+			},
+			usage: usage,
+			isUsed: usage.length > 0
+		})
+	} catch (error) {
+		logger.error('Failed to check media usage', error as Error)
+		return errorResponse('Failed to check media usage', 500)
+	}
+}
diff --git a/src/routes/api/media/backfill-usage/+server.ts b/src/routes/api/media/backfill-usage/+server.ts
new file mode 100644
index 0000000..4b365cc
--- /dev/null
+++ b/src/routes/api/media/backfill-usage/+server.ts
@@ -0,0 +1,147 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import {
+	trackMediaUsage,
+	extractMediaIds,
+	removeMediaUsage,
+	type MediaUsageReference
+} from '$lib/server/media-usage.js'
+
+// POST /api/media/backfill-usage - Backfill media usage tracking for all content
+export const POST: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		let totalTracked = 0
+		const usageReferences: MediaUsageReference[] = []
+
+		// Clear all existing usage tracking
+		await prisma.mediaUsage.deleteMany({})
+
+		// Backfill projects
+		const projects = await prisma.project.findMany({
+			select: {
+				id: true,
+				featuredImage: true,
+				logoUrl: true,
+				gallery: true,
+				caseStudyContent: true
+			}
+		})
+
+		for (const project of projects) {
+			// Track featured image
+			const featuredImageIds = extractMediaIds(project, 'featuredImage')
+			featuredImageIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'featuredImage'
+				})
+			})
+
+			// Track logo
+			const logoIds = extractMediaIds(project, 'logoUrl')
+			logoIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'logoUrl'
+				})
+			})
+
+			// Track gallery images
+			const galleryIds = extractMediaIds(project, 'gallery')
+			galleryIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'gallery'
+				})
+			})
+
+			// Track media in case study content
+			const contentIds = extractMediaIds(project, 'caseStudyContent')
+			contentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'content'
+				})
+			})
+		}
+
+		// Backfill posts
+		const posts = await prisma.post.findMany({
+			select: {
+				id: true,
+				featuredImage: true,
+				content: true,
+				attachments: true
+			}
+		})
+
+		for (const post of posts) {
+			// Track featured image
+			const featuredImageIds = extractMediaIds(post, 'featuredImage')
+			featuredImageIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: post.id,
+					fieldName: 'featuredImage'
+				})
+			})
+
+			// Track attachments
+			const attachmentIds = extractMediaIds(post, 'attachments')
+			attachmentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: post.id,
+					fieldName: 'attachments'
+				})
+			})
+
+			// Track media in post content
+			const contentIds = extractMediaIds(post, 'content')
+			contentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: post.id,
+					fieldName: 'content'
+				})
+			})
+		}
+
+		// Save all usage references
+		if (usageReferences.length > 0) {
+			await trackMediaUsage(usageReferences)
+			totalTracked = usageReferences.length
+		}
+
+		logger.info('Media usage backfill completed', { totalTracked })
+
+		return jsonResponse({
+			success: true,
+			message: 'Media usage tracking backfilled successfully',
+			totalTracked,
+			projectsProcessed: projects.length,
+			postsProcessed: posts.length
+		})
+	} catch (error) {
+		logger.error('Failed to backfill media usage', error as Error)
+		return errorResponse('Failed to backfill media usage', 500)
+	}
+}
diff --git a/src/routes/api/media/bulk-delete/+server.ts b/src/routes/api/media/bulk-delete/+server.ts
new file mode 100644
index 0000000..815739f
--- /dev/null
+++ b/src/routes/api/media/bulk-delete/+server.ts
@@ -0,0 +1,239 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import { removeMediaUsage, extractMediaIds } from '$lib/server/media-usage.js'
+
+// DELETE /api/media/bulk-delete - Delete multiple media files and clean up references
+export const DELETE: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const body = await parseRequestBody<{ mediaIds: number[] }>(event.request)
+		if (!body || !Array.isArray(body.mediaIds) || body.mediaIds.length === 0) {
+			return errorResponse('Invalid request body. Expected array of media IDs.', 400)
+		}
+
+		const mediaIds = body.mediaIds.filter((id) => typeof id === 'number' && !isNaN(id))
+		if (mediaIds.length === 0) {
+			return errorResponse('No valid media IDs provided', 400)
+		}
+
+		// Get media records before deletion to extract URLs for cleanup
+		const mediaRecords = await prisma.media.findMany({
+			where: { id: { in: mediaIds } },
+			select: { id: true, url: true, thumbnailUrl: true, filename: true }
+		})
+
+		if (mediaRecords.length === 0) {
+			return errorResponse('No media files found with the provided IDs', 404)
+		}
+
+		// Remove media usage tracking for all affected media
+		for (const mediaId of mediaIds) {
+			await prisma.mediaUsage.deleteMany({
+				where: { mediaId }
+			})
+		}
+
+		// Clean up references in content that uses these media files
+		await cleanupMediaReferences(mediaIds)
+
+		// Delete the media records from database
+		const deleteResult = await prisma.media.deleteMany({
+			where: { id: { in: mediaIds } }
+		})
+
+		logger.info('Bulk media deletion completed', {
+			deletedCount: deleteResult.count,
+			mediaIds,
+			filenames: mediaRecords.map((m) => m.filename)
+		})
+
+		return jsonResponse({
+			success: true,
+			message: `Successfully deleted ${deleteResult.count} media file${deleteResult.count > 1 ? 's' : ''}`,
+			deletedCount: deleteResult.count,
+			deletedFiles: mediaRecords.map((m) => ({ id: m.id, filename: m.filename }))
+		})
+	} catch (error) {
+		logger.error('Failed to bulk delete media files', error as Error)
+		return errorResponse('Failed to delete media files', 500)
+	}
+}
+
+/**
+ * Clean up references to deleted media in all content types
+ */
+async function cleanupMediaReferences(mediaIds: number[]) {
+	const mediaUrls = await prisma.media.findMany({
+		where: { id: { in: mediaIds } },
+		select: { url: true }
+	})
+	const urlsToRemove = mediaUrls.map((m) => m.url)
+
+	// Clean up projects
+	const projects = await prisma.project.findMany({
+		select: {
+			id: true,
+			featuredImage: true,
+			logoUrl: true,
+			gallery: true,
+			caseStudyContent: true
+		}
+	})
+
+	for (const project of projects) {
+		let needsUpdate = false
+		const updateData: any = {}
+
+		// Check featured image
+		if (project.featuredImage && urlsToRemove.includes(project.featuredImage)) {
+			updateData.featuredImage = null
+			needsUpdate = true
+		}
+
+		// Check logo URL
+		if (project.logoUrl && urlsToRemove.includes(project.logoUrl)) {
+			updateData.logoUrl = null
+			needsUpdate = true
+		}
+
+		// Check gallery
+		if (project.gallery && Array.isArray(project.gallery)) {
+			const filteredGallery = project.gallery.filter((item: any) => {
+				const itemId = typeof item === 'object' ? item.id : parseInt(item)
+				return !mediaIds.includes(itemId)
+			})
+			if (filteredGallery.length !== project.gallery.length) {
+				updateData.gallery = filteredGallery.length > 0 ? filteredGallery : null
+				needsUpdate = true
+			}
+		}
+
+		// Check case study content
+		if (project.caseStudyContent) {
+			const cleanedContent = cleanContentFromMedia(project.caseStudyContent, mediaIds, urlsToRemove)
+			if (cleanedContent !== project.caseStudyContent) {
+				updateData.caseStudyContent = cleanedContent
+				needsUpdate = true
+			}
+		}
+
+		if (needsUpdate) {
+			await prisma.project.update({
+				where: { id: project.id },
+				data: updateData
+			})
+			logger.info('Cleaned up media references in project', { projectId: project.id })
+		}
+	}
+
+	// Clean up posts
+	const posts = await prisma.post.findMany({
+		select: {
+			id: true,
+			featuredImage: true,
+			content: true,
+			attachments: true
+		}
+	})
+
+	for (const post of posts) {
+		let needsUpdate = false
+		const updateData: any = {}
+
+		// Check featured image
+		if (post.featuredImage && urlsToRemove.includes(post.featuredImage)) {
+			updateData.featuredImage = null
+			needsUpdate = true
+		}
+
+		// Check attachments
+		if (post.attachments && Array.isArray(post.attachments)) {
+			const filteredAttachments = post.attachments.filter((item: any) => {
+				const itemId = typeof item === 'object' ? item.id : parseInt(item)
+				return !mediaIds.includes(itemId)
+			})
+			if (filteredAttachments.length !== post.attachments.length) {
+				updateData.attachments = filteredAttachments.length > 0 ? filteredAttachments : null
+				needsUpdate = true
+			}
+		}
+
+		// Check post content
+		if (post.content) {
+			const cleanedContent = cleanContentFromMedia(post.content, mediaIds, urlsToRemove)
+			if (cleanedContent !== post.content) {
+				updateData.content = cleanedContent
+				needsUpdate = true
+			}
+		}
+
+		if (needsUpdate) {
+			await prisma.post.update({
+				where: { id: post.id },
+				data: updateData
+			})
+			logger.info('Cleaned up media references in post', { postId: post.id })
+		}
+	}
+}
+
+/**
+ * Remove media references from rich text content
+ */
+function cleanContentFromMedia(content: any, mediaIds: number[], urlsToRemove: string[]): any {
+	if (!content || typeof content !== 'object') return content
+
+	function cleanNode(node: any): any {
+		if (!node) return node
+
+		// Remove image nodes that reference deleted media
+		if (node.type === 'image' && node.attrs?.src) {
+			const shouldRemove = urlsToRemove.some((url) => node.attrs.src.includes(url))
+			if (shouldRemove) {
+				return null // Mark for removal
+			}
+		}
+
+		// Clean gallery nodes
+		if (node.type === 'gallery' && node.attrs?.images) {
+			const filteredImages = node.attrs.images.filter((image: any) => !mediaIds.includes(image.id))
+
+			if (filteredImages.length === 0) {
+				return null // Remove empty gallery
+			} else if (filteredImages.length !== node.attrs.images.length) {
+				return {
+					...node,
+					attrs: {
+						...node.attrs,
+						images: filteredImages
+					}
+				}
+			}
+		}
+
+		// Recursively clean child nodes
+		if (node.content) {
+			const cleanedContent = node.content.map(cleanNode).filter((child: any) => child !== null)
+
+			return {
+				...node,
+				content: cleanedContent
+			}
+		}
+
+		return node
+	}
+
+	return cleanNode(content)
+}
diff --git a/src/routes/api/media/bulk-upload/+server.ts b/src/routes/api/media/bulk-upload/+server.ts
new file mode 100644
index 0000000..066c697
--- /dev/null
+++ b/src/routes/api/media/bulk-upload/+server.ts
@@ -0,0 +1,131 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { uploadFiles, isCloudinaryConfigured } from '$lib/server/cloudinary'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+export const POST: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	// Check if Cloudinary is configured
+	if (!isCloudinaryConfigured()) {
+		return errorResponse('Media upload service not configured', 503)
+	}
+
+	try {
+		const formData = await event.request.formData()
+		const files = formData.getAll('files') as File[]
+		const context = (formData.get('context') as string) || 'media'
+
+		if (!files || files.length === 0) {
+			return errorResponse('No files provided', 400)
+		}
+
+		// Validate all files
+		const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+		const maxSize = 10 * 1024 * 1024 // 10MB per file
+		const maxFiles = 50 // Maximum 50 files at once
+
+		if (files.length > maxFiles) {
+			return errorResponse(`Too many files. Maximum ${maxFiles} files allowed`, 400)
+		}
+
+		for (const file of files) {
+			if (!(file instanceof File)) {
+				return errorResponse('Invalid file format', 400)
+			}
+
+			if (!allowedTypes.includes(file.type)) {
+				return errorResponse(
+					`Invalid file type for ${file.name}. Allowed types: JPEG, PNG, WebP`,
+					400
+				)
+			}
+
+			if (file.size > maxSize) {
+				return errorResponse(`File ${file.name} is too large. Maximum size is 10MB`, 400)
+			}
+		}
+
+		logger.info(`Starting bulk upload of ${files.length} files`)
+
+		// Upload all files to Cloudinary
+		const uploadResults = await uploadFiles(files, context as 'media' | 'photos' | 'projects')
+
+		// Process results and save to database
+		const mediaRecords = []
+		const errors = []
+
+		for (let i = 0; i < uploadResults.length; i++) {
+			const result = uploadResults[i]
+			const file = files[i]
+
+			if (result.success) {
+				try {
+					const media = await prisma.media.create({
+						data: {
+							filename: file.name,
+							mimeType: file.type,
+							size: file.size,
+							url: result.secureUrl!,
+							thumbnailUrl: result.thumbnailUrl,
+							width: result.width,
+							height: result.height,
+							usedIn: []
+						}
+					})
+
+					mediaRecords.push({
+						id: media.id,
+						url: media.url,
+						thumbnailUrl: media.thumbnailUrl,
+						width: media.width,
+						height: media.height,
+						filename: media.filename
+					})
+				} catch (dbError) {
+					errors.push({
+						filename: file.name,
+						error: 'Failed to save to database'
+					})
+				}
+			} else {
+				errors.push({
+					filename: file.name,
+					error: result.error || 'Upload failed'
+				})
+			}
+		}
+
+		logger.info(`Bulk upload completed: ${mediaRecords.length} successful, ${errors.length} failed`)
+
+		return jsonResponse(
+			{
+				success: mediaRecords.length,
+				failed: errors.length,
+				total: files.length,
+				media: mediaRecords,
+				errors: errors.length > 0 ? errors : undefined
+			},
+			201
+		)
+	} catch (error) {
+		logger.error('Bulk upload error', error as Error)
+		return errorResponse('Failed to upload files', 500)
+	}
+}
+
+// Handle preflight requests
+export const OPTIONS: RequestHandler = async () => {
+	return new Response(null, {
+		status: 204,
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': 'POST, OPTIONS',
+			'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+		}
+	})
+}
diff --git a/src/routes/api/media/upload/+server.ts b/src/routes/api/media/upload/+server.ts
new file mode 100644
index 0000000..9eac994
--- /dev/null
+++ b/src/routes/api/media/upload/+server.ts
@@ -0,0 +1,217 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { uploadFile, isCloudinaryConfigured } from '$lib/server/cloudinary'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import { dev } from '$app/environment'
+import exifr from 'exifr'
+
+// Helper function to extract and format EXIF data
+async function extractExifData(file: File): Promise<any> {
+	try {
+		const buffer = await file.arrayBuffer()
+		const exif = await exifr.parse(buffer, {
+			pick: [
+				'Make',
+				'Model',
+				'LensModel',
+				'FocalLength',
+				'FNumber',
+				'ExposureTime',
+				'ISO',
+				'DateTime',
+				'DateTimeOriginal',
+				'CreateDate',
+				'GPSLatitude',
+				'GPSLongitude',
+				'GPSAltitude',
+				'Orientation',
+				'ColorSpace'
+			]
+		})
+
+		if (!exif) return null
+
+		// Format the data into a more usable structure
+		const formattedExif: any = {}
+
+		if (exif.Make && exif.Model) {
+			formattedExif.camera = `${exif.Make} ${exif.Model}`.trim()
+		}
+
+		if (exif.LensModel) {
+			formattedExif.lens = exif.LensModel
+		}
+
+		if (exif.FocalLength) {
+			formattedExif.focalLength = `${exif.FocalLength}mm`
+		}
+
+		if (exif.FNumber) {
+			formattedExif.aperture = `f/${exif.FNumber}`
+		}
+
+		if (exif.ExposureTime) {
+			if (exif.ExposureTime < 1) {
+				formattedExif.shutterSpeed = `1/${Math.round(1 / exif.ExposureTime)}`
+			} else {
+				formattedExif.shutterSpeed = `${exif.ExposureTime}s`
+			}
+		}
+
+		if (exif.ISO) {
+			formattedExif.iso = `ISO ${exif.ISO}`
+		}
+
+		// Use the most reliable date field available
+		const dateField = exif.DateTimeOriginal || exif.CreateDate || exif.DateTime
+		if (dateField) {
+			formattedExif.dateTaken = dateField.toISOString()
+		}
+
+		// GPS coordinates
+		if (exif.GPSLatitude && exif.GPSLongitude) {
+			formattedExif.coordinates = {
+				latitude: exif.GPSLatitude,
+				longitude: exif.GPSLongitude,
+				altitude: exif.GPSAltitude || null
+			}
+		}
+
+		// Additional metadata
+		if (exif.Orientation) {
+			formattedExif.orientation = exif.Orientation
+		}
+
+		if (exif.ColorSpace) {
+			formattedExif.colorSpace = exif.ColorSpace
+		}
+
+		return Object.keys(formattedExif).length > 0 ? formattedExif : null
+	} catch (error) {
+		logger.warn('Failed to extract EXIF data', {
+			error: error instanceof Error ? error.message : 'Unknown error'
+		})
+		return null
+	}
+}
+
+export const POST: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	// Check if Cloudinary is configured (skip in dev mode)
+	if (!dev && !isCloudinaryConfigured()) {
+		return errorResponse('Media upload service not configured', 503)
+	}
+
+	try {
+		const formData = await event.request.formData()
+		const file = formData.get('file') as File
+		const context = (formData.get('context') as string) || 'media'
+		const altText = (formData.get('altText') as string) || null
+		const description = (formData.get('description') as string) || null
+		const isPhotography = formData.get('isPhotography') === 'true'
+
+		if (!file || !(file instanceof File)) {
+			return errorResponse('No file provided', 400)
+		}
+
+		// Validate file type
+		const allowedTypes = [
+			'image/jpeg',
+			'image/jpg',
+			'image/png',
+			'image/webp',
+			'image/gif',
+			'image/svg+xml'
+		]
+		if (!allowedTypes.includes(file.type)) {
+			return errorResponse('Invalid file type. Allowed types: JPEG, PNG, WebP, GIF, SVG', 400)
+		}
+
+		// Validate file size (max 10MB)
+		const maxSize = 10 * 1024 * 1024 // 10MB
+		if (file.size > maxSize) {
+			return errorResponse('File too large. Maximum size is 10MB', 400)
+		}
+
+		// Extract EXIF data for image files (but don't block upload if it fails)
+		let exifData = null
+		if (file.type.startsWith('image/') && file.type !== 'image/svg+xml') {
+			exifData = await extractExifData(file)
+		}
+
+		// Upload to Cloudinary
+		const uploadResult = await uploadFile(file, context as 'media' | 'photos' | 'projects')
+
+		if (!uploadResult.success) {
+			return errorResponse(uploadResult.error || 'Upload failed', 500)
+		}
+
+		// Save to database
+		const media = await prisma.media.create({
+			data: {
+				filename: file.name,
+				originalName: file.name,
+				mimeType: file.type,
+				size: file.size,
+				url: uploadResult.secureUrl!,
+				thumbnailUrl: uploadResult.thumbnailUrl,
+				width: uploadResult.width,
+				height: uploadResult.height,
+				exifData: exifData,
+				altText: altText?.trim() || null,
+				description: description?.trim() || null,
+				isPhotography: isPhotography,
+				usedIn: []
+			}
+		})
+
+		logger.info('Media uploaded successfully', {
+			id: media.id,
+			filename: media.filename,
+			size: media.size
+		})
+
+		return jsonResponse(
+			{
+				id: media.id,
+				url: media.url,
+				thumbnailUrl: media.thumbnailUrl,
+				width: media.width,
+				height: media.height,
+				filename: media.filename,
+				originalName: media.originalName,
+				mimeType: media.mimeType,
+				size: media.size,
+				altText: media.altText,
+				description: media.description,
+				createdAt: media.createdAt,
+				updatedAt: media.updatedAt
+			},
+			201
+		)
+	} catch (error) {
+		logger.error('Media upload error', error as Error)
+		console.error('Detailed upload error:', error)
+		return errorResponse(
+			`Upload failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+			500
+		)
+	}
+}
+
+// Handle preflight requests
+export const OPTIONS: RequestHandler = async () => {
+	return new Response(null, {
+		status: 204,
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': 'POST, OPTIONS',
+			'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+		}
+	})
+}
diff --git a/src/routes/api/og-metadata/+server.ts b/src/routes/api/og-metadata/+server.ts
index 8644eca..44e31c3 100644
--- a/src/routes/api/og-metadata/+server.ts
+++ b/src/routes/api/og-metadata/+server.ts
@@ -3,11 +3,11 @@ import type { RequestHandler } from './$types'
 
 export const GET: RequestHandler = async ({ url }) => {
 	const targetUrl = url.searchParams.get('url')
-	
+
 	if (!targetUrl) {
 		return json({ error: 'URL parameter is required' }, { status: 400 })
 	}
-	
+
 	try {
 		// Fetch the HTML content
 		const response = await fetch(targetUrl, {
@@ -15,30 +15,34 @@ export const GET: RequestHandler = async ({ url }) => {
 				'User-Agent': 'Mozilla/5.0 (compatible; OpenGraphBot/1.0)'
 			}
 		})
-		
+
 		if (!response.ok) {
 			throw new Error(`Failed to fetch URL: ${response.status}`)
 		}
-		
+
 		const html = await response.text()
-		
+
 		// Parse OpenGraph tags
 		const ogData = {
 			url: targetUrl,
 			title: extractMetaContent(html, 'og:title') || extractTitle(html),
-			description: extractMetaContent(html, 'og:description') || extractMetaContent(html, 'description'),
+			description:
+				extractMetaContent(html, 'og:description') || extractMetaContent(html, 'description'),
 			image: extractMetaContent(html, 'og:image'),
 			siteName: extractMetaContent(html, 'og:site_name'),
 			favicon: extractFavicon(targetUrl, html)
 		}
-		
+
 		return json(ogData)
 	} catch (error) {
 		console.error('Error fetching OpenGraph data:', error)
-		return json({ 
-			error: 'Failed to fetch metadata',
-			url: targetUrl 
-		}, { status: 500 })
+		return json(
+			{
+				error: 'Failed to fetch metadata',
+				url: targetUrl
+			},
+			{ status: 500 }
+		)
 	}
 }
 
@@ -48,19 +52,19 @@ function extractMetaContent(html: string, property: string): string | null {
 		new RegExp(`<meta[^>]*property=["']${property}["'][^>]*content=["']([^"']+)["']`, 'i')
 	)
 	if (propertyMatch) return propertyMatch[1]
-	
+
 	// Try name attribute (for description)
 	const nameMatch = html.match(
 		new RegExp(`<meta[^>]*name=["']${property}["'][^>]*content=["']([^"']+)["']`, 'i')
 	)
 	if (nameMatch) return nameMatch[1]
-	
+
 	// Try content first pattern
 	const contentFirstMatch = html.match(
 		new RegExp(`<meta[^>]*content=["']([^"']+)["'][^>]*(?:property|name)=["']${property}["']`, 'i')
 	)
 	if (contentFirstMatch) return contentFirstMatch[1]
-	
+
 	return null
 }
 
@@ -74,14 +78,14 @@ function extractFavicon(baseUrl: string, html: string): string | null {
 	if (baseUrl.includes('github.com')) {
 		return 'https://github.githubassets.com/favicons/favicon.svg'
 	}
-	
+
 	// Try various favicon patterns
 	const patterns = [
 		/<link[^>]*rel=["'](?:shortcut )?icon["'][^>]*href=["']([^"']+)["']/i,
 		/<link[^>]*href=["']([^"']+)["'][^>]*rel=["'](?:shortcut )?icon["']/i,
 		/<link[^>]*rel=["']apple-touch-icon["'][^>]*href=["']([^"']+)["']/i
 	]
-	
+
 	for (const pattern of patterns) {
 		const match = html.match(pattern)
 		if (match) {
@@ -100,7 +104,7 @@ function extractFavicon(baseUrl: string, html: string): string | null {
 			}
 		}
 	}
-	
+
 	// Default favicon path
 	try {
 		const url = new URL(baseUrl)
@@ -108,4 +112,54 @@ function extractFavicon(baseUrl: string, html: string): string | null {
 	} catch {
 		return null
 	}
-}
\ No newline at end of file
+}
+
+// Add POST handler for Editor.js link tool
+export const POST: RequestHandler = async ({ request }) => {
+	const { url: targetUrl } = await request.json()
+
+	if (!targetUrl) {
+		return json({ success: 0 }, { status: 400 })
+	}
+
+	try {
+		// Fetch the HTML content
+		const response = await fetch(targetUrl, {
+			headers: {
+				'User-Agent': 'Mozilla/5.0 (compatible; OpenGraphBot/1.0)'
+			}
+		})
+
+		if (!response.ok) {
+			throw new Error(`Failed to fetch URL: ${response.status}`)
+		}
+
+		const html = await response.text()
+
+		// Parse OpenGraph tags and return in Editor.js format
+		const title = extractMetaContent(html, 'og:title') || extractTitle(html)
+		const description =
+			extractMetaContent(html, 'og:description') || extractMetaContent(html, 'description')
+		const image = extractMetaContent(html, 'og:image')
+
+		return json({
+			success: 1,
+			link: targetUrl,
+			meta: {
+				title: title || '',
+				description: description || '',
+				image: {
+					url: image || ''
+				}
+			}
+		})
+	} catch (error) {
+		console.error('Error fetching OpenGraph data:', error)
+		return json(
+			{
+				success: 0
+			},
+			{ status: 500 }
+		)
+	}
+}
diff --git a/src/routes/api/photos/+server.ts b/src/routes/api/photos/+server.ts
new file mode 100644
index 0000000..9f646cc
--- /dev/null
+++ b/src/routes/api/photos/+server.ts
@@ -0,0 +1,129 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import type { PhotoItem, PhotoAlbum, Photo } from '$lib/types/photos'
+
+// GET /api/photos - Get published photography albums and individual photos
+export const GET: RequestHandler = async (event) => {
+	try {
+		const url = new URL(event.request.url)
+		const limit = parseInt(url.searchParams.get('limit') || '50')
+		const offset = parseInt(url.searchParams.get('offset') || '0')
+
+		// Fetch published photography albums
+		const albums = await prisma.album.findMany({
+			where: {
+				status: 'published',
+				isPhotography: true
+			},
+			include: {
+				photos: {
+					where: {
+						status: 'published'
+					},
+					orderBy: { displayOrder: 'asc' },
+					select: {
+						id: true,
+						filename: true,
+						url: true,
+						thumbnailUrl: true,
+						width: true,
+						height: true,
+						caption: true,
+						displayOrder: true
+					}
+				}
+			},
+			orderBy: { createdAt: 'desc' },
+			skip: offset,
+			take: limit
+		})
+
+		// Fetch individual published photos (not in albums, marked for photography)
+		const individualPhotos = await prisma.photo.findMany({
+			where: {
+				status: 'published',
+				showInPhotos: true,
+				albumId: null // Only photos not in albums
+			},
+			select: {
+				id: true,
+				slug: true,
+				filename: true,
+				url: true,
+				thumbnailUrl: true,
+				width: true,
+				height: true,
+				caption: true,
+				title: true,
+				description: true
+			},
+			orderBy: { createdAt: 'desc' },
+			skip: offset,
+			take: limit
+		})
+
+		// Transform albums to PhotoAlbum format
+		const photoAlbums: PhotoAlbum[] = albums
+			.filter((album) => album.photos.length > 0) // Only include albums with published photos
+			.map((album) => ({
+				id: `album-${album.id}`,
+				slug: album.slug, // Add slug for navigation
+				title: album.title,
+				description: album.description || undefined,
+				coverPhoto: {
+					id: `cover-${album.photos[0].id}`,
+					src: album.photos[0].url,
+					alt: album.photos[0].caption || album.title,
+					caption: album.photos[0].caption || undefined,
+					width: album.photos[0].width || 400,
+					height: album.photos[0].height || 400
+				},
+				photos: album.photos.map((photo) => ({
+					id: `photo-${photo.id}`,
+					src: photo.url,
+					alt: photo.caption || photo.filename,
+					caption: photo.caption || undefined,
+					width: photo.width || 400,
+					height: photo.height || 400
+				})),
+				createdAt: album.createdAt.toISOString()
+			}))
+
+		// Transform individual photos to Photo format
+		const photos: Photo[] = individualPhotos.map((photo) => ({
+			id: `photo-${photo.id}`,
+			src: photo.url,
+			alt: photo.title || photo.caption || photo.filename,
+			caption: photo.caption || undefined,
+			width: photo.width || 400,
+			height: photo.height || 400
+		}))
+
+		// Combine albums and individual photos
+		const photoItems: PhotoItem[] = [...photoAlbums, ...photos]
+
+		// Sort by creation date (albums use createdAt, individual photos would need publishedAt or createdAt)
+		photoItems.sort((a, b) => {
+			const dateA = 'createdAt' in a ? new Date(a.createdAt) : new Date()
+			const dateB = 'createdAt' in b ? new Date(b.createdAt) : new Date()
+			return dateB.getTime() - dateA.getTime()
+		})
+
+		const response = {
+			photoItems,
+			pagination: {
+				total: photoItems.length,
+				limit,
+				offset,
+				hasMore: photoItems.length === limit // Simple check, could be more sophisticated
+			}
+		}
+
+		return jsonResponse(response)
+	} catch (error) {
+		logger.error('Failed to fetch photos', error as Error)
+		return errorResponse('Failed to fetch photos', 500)
+	}
+}
diff --git a/src/routes/api/photos/[albumSlug]/[photoId]/+server.ts b/src/routes/api/photos/[albumSlug]/[photoId]/+server.ts
new file mode 100644
index 0000000..53942f2
--- /dev/null
+++ b/src/routes/api/photos/[albumSlug]/[photoId]/+server.ts
@@ -0,0 +1,80 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/photos/[albumSlug]/[photoId] - Get individual photo with album context
+export const GET: RequestHandler = async (event) => {
+	const albumSlug = event.params.albumSlug
+	const photoId = parseInt(event.params.photoId)
+
+	if (!albumSlug || isNaN(photoId)) {
+		return errorResponse('Invalid album slug or photo ID', 400)
+	}
+
+	try {
+		// First find the album
+		const album = await prisma.album.findUnique({
+			where: {
+				slug: albumSlug,
+				status: 'published',
+				isPhotography: true
+			},
+			include: {
+				photos: {
+					orderBy: { displayOrder: 'asc' },
+					select: {
+						id: true,
+						filename: true,
+						url: true,
+						thumbnailUrl: true,
+						width: true,
+						height: true,
+						caption: true,
+						title: true,
+						description: true,
+						displayOrder: true,
+						exifData: true
+					}
+				}
+			}
+		})
+
+		if (!album) {
+			return errorResponse('Album not found', 404)
+		}
+
+		// Find the specific photo
+		const photo = album.photos.find((p) => p.id === photoId)
+		if (!photo) {
+			return errorResponse('Photo not found in album', 404)
+		}
+
+		// Get photo index for navigation
+		const photoIndex = album.photos.findIndex((p) => p.id === photoId)
+		const prevPhoto = photoIndex > 0 ? album.photos[photoIndex - 1] : null
+		const nextPhoto = photoIndex < album.photos.length - 1 ? album.photos[photoIndex + 1] : null
+
+		return jsonResponse({
+			photo,
+			album: {
+				id: album.id,
+				slug: album.slug,
+				title: album.title,
+				description: album.description,
+				location: album.location,
+				date: album.date,
+				totalPhotos: album.photos.length
+			},
+			navigation: {
+				currentIndex: photoIndex + 1, // 1-based for display
+				totalCount: album.photos.length,
+				prevPhoto: prevPhoto ? { id: prevPhoto.id, url: prevPhoto.thumbnailUrl } : null,
+				nextPhoto: nextPhoto ? { id: nextPhoto.id, url: nextPhoto.thumbnailUrl } : null
+			}
+		})
+	} catch (error) {
+		logger.error('Failed to retrieve photo', error as Error)
+		return errorResponse('Failed to retrieve photo', 500)
+	}
+}
diff --git a/src/routes/api/photos/[id]/+server.ts b/src/routes/api/photos/[id]/+server.ts
new file mode 100644
index 0000000..3ecccdc
--- /dev/null
+++ b/src/routes/api/photos/[id]/+server.ts
@@ -0,0 +1,129 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/photos/[id] - Get a single photo
+export const GET: RequestHandler = async (event) => {
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid photo ID', 400)
+	}
+
+	try {
+		const photo = await prisma.photo.findUnique({
+			where: { id },
+			include: {
+				album: {
+					select: { id: true, title: true, slug: true }
+				}
+			}
+		})
+
+		if (!photo) {
+			return errorResponse('Photo not found', 404)
+		}
+
+		return jsonResponse(photo)
+	} catch (error) {
+		logger.error('Failed to retrieve photo', error as Error)
+		return errorResponse('Failed to retrieve photo', 500)
+	}
+}
+
+// DELETE /api/photos/[id] - Delete a photo completely (removes photo record and media usage)
+// NOTE: This deletes the photo entirely. Use DELETE /api/albums/[id]/photos to remove from album only.
+export const DELETE: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid photo ID', 400)
+	}
+
+	try {
+		// Check if photo exists
+		const photo = await prisma.photo.findUnique({
+			where: { id }
+		})
+
+		if (!photo) {
+			return errorResponse('Photo not found', 404)
+		}
+
+		// Remove media usage tracking for this photo
+		if (photo.albumId) {
+			await prisma.mediaUsage.deleteMany({
+				where: {
+					contentType: 'album',
+					contentId: photo.albumId,
+					fieldName: 'photos'
+				}
+			})
+		}
+
+		// Delete the photo record
+		await prisma.photo.delete({
+			where: { id }
+		})
+
+		logger.info('Photo deleted from album', {
+			photoId: id,
+			albumId: photo.albumId
+		})
+
+		return new Response(null, { status: 204 })
+	} catch (error) {
+		logger.error('Failed to delete photo', error as Error)
+		return errorResponse('Failed to delete photo', 500)
+	}
+}
+
+// PUT /api/photos/[id] - Update photo metadata
+export const PUT: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid photo ID', 400)
+	}
+
+	try {
+		const body = await event.request.json()
+
+		// Check if photo exists
+		const existing = await prisma.photo.findUnique({
+			where: { id }
+		})
+
+		if (!existing) {
+			return errorResponse('Photo not found', 404)
+		}
+
+		// Update photo
+		const photo = await prisma.photo.update({
+			where: { id },
+			data: {
+				caption: body.caption !== undefined ? body.caption : existing.caption,
+				title: body.title !== undefined ? body.title : existing.title,
+				description: body.description !== undefined ? body.description : existing.description,
+				displayOrder: body.displayOrder !== undefined ? body.displayOrder : existing.displayOrder,
+				status: body.status !== undefined ? body.status : existing.status,
+				showInPhotos: body.showInPhotos !== undefined ? body.showInPhotos : existing.showInPhotos
+			}
+		})
+
+		logger.info('Photo updated', { photoId: id })
+
+		return jsonResponse(photo)
+	} catch (error) {
+		logger.error('Failed to update photo', error as Error)
+		return errorResponse('Failed to update photo', 500)
+	}
+}
diff --git a/src/routes/api/posts/+server.ts b/src/routes/api/posts/+server.ts
new file mode 100644
index 0000000..406930e
--- /dev/null
+++ b/src/routes/api/posts/+server.ts
@@ -0,0 +1,202 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	getPaginationParams,
+	getPaginationMeta,
+	checkAdminAuth
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import {
+	trackMediaUsage,
+	extractMediaIds,
+	type MediaUsageReference
+} from '$lib/server/media-usage.js'
+
+// GET /api/posts - List all posts
+export const GET: RequestHandler = async (event) => {
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const { page, limit } = getPaginationParams(event.url)
+		const skip = (page - 1) * limit
+
+		// Get filter parameters
+		const status = event.url.searchParams.get('status')
+		const postType = event.url.searchParams.get('postType')
+
+		// Build where clause
+		const where: any = {}
+		if (status) {
+			where.status = status
+		}
+		if (postType) {
+			where.postType = postType
+		}
+
+		// Get total count
+		const total = await prisma.post.count({ where })
+
+		// Get posts
+		const posts = await prisma.post.findMany({
+			where,
+			orderBy: { createdAt: 'desc' },
+			skip,
+			take: limit
+		})
+
+		const pagination = getPaginationMeta(total, page, limit)
+
+		logger.info('Posts list retrieved', { total, page, limit })
+
+		return jsonResponse({
+			posts,
+			pagination
+		})
+	} catch (error) {
+		logger.error('Failed to retrieve posts', error as Error)
+		return errorResponse('Failed to retrieve posts', 500)
+	}
+}
+
+// POST /api/posts - Create a new post
+export const POST: RequestHandler = async (event) => {
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const data = await event.request.json()
+
+		// Generate slug if not provided
+		if (!data.slug) {
+			if (data.title) {
+				// Generate slug from title
+				data.slug = data.title
+					.toLowerCase()
+					.replace(/[^a-z0-9]+/g, '-')
+					.replace(/^-+|-+$/g, '')
+			} else {
+				// Generate timestamp-based slug for posts without titles
+				data.slug = `post-${Date.now()}`
+			}
+		}
+
+		// Set publishedAt if status is published
+		if (data.status === 'published') {
+			data.publishedAt = new Date()
+		}
+
+		// Handle photo attachments for posts
+		let featuredImageId = data.featuredImage
+		if (data.attachedPhotos && data.attachedPhotos.length > 0 && !featuredImageId) {
+			// Use first attached photo as featured image for photo posts
+			featuredImageId = data.attachedPhotos[0]
+		}
+
+		// Handle album gallery - use first image as featured image
+		if (data.gallery && data.gallery.length > 0 && !featuredImageId) {
+			// Get the media URL for the first gallery item
+			const firstMedia = await prisma.media.findUnique({
+				where: { id: data.gallery[0] },
+				select: { url: true }
+			})
+			if (firstMedia) {
+				featuredImageId = firstMedia.url
+			}
+		}
+
+		// For albums, store gallery IDs in content field as a special structure
+		let postContent = data.content
+		if (data.type === 'album' && data.gallery) {
+			postContent = {
+				type: 'album',
+				gallery: data.gallery,
+				description: data.content
+			}
+		}
+
+		const post = await prisma.post.create({
+			data: {
+				title: data.title,
+				slug: data.slug,
+				postType: data.type,
+				status: data.status,
+				content: postContent,
+				linkUrl: data.link_url,
+				linkDescription: data.linkDescription,
+				featuredImage: featuredImageId,
+				attachments:
+					data.attachedPhotos && data.attachedPhotos.length > 0 ? data.attachedPhotos : null,
+				tags: data.tags,
+				publishedAt: data.publishedAt
+			}
+		})
+
+		// Track media usage
+		try {
+			const usageReferences: MediaUsageReference[] = []
+
+			// Track featured image
+			const featuredImageIds = extractMediaIds({ featuredImage: featuredImageId }, 'featuredImage')
+			featuredImageIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: post.id,
+					fieldName: 'featuredImage'
+				})
+			})
+
+			// Track attached photos (for photo posts)
+			if (data.attachedPhotos && Array.isArray(data.attachedPhotos)) {
+				data.attachedPhotos.forEach((mediaId: number) => {
+					usageReferences.push({
+						mediaId,
+						contentType: 'post',
+						contentId: post.id,
+						fieldName: 'attachments'
+					})
+				})
+			}
+
+			// Track gallery (for album posts)
+			if (data.gallery && Array.isArray(data.gallery)) {
+				data.gallery.forEach((mediaId: number) => {
+					usageReferences.push({
+						mediaId,
+						contentType: 'post',
+						contentId: post.id,
+						fieldName: 'gallery'
+					})
+				})
+			}
+
+			// Track media in post content
+			const contentIds = extractMediaIds({ content: postContent }, 'content')
+			contentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: post.id,
+					fieldName: 'content'
+				})
+			})
+
+			if (usageReferences.length > 0) {
+				await trackMediaUsage(usageReferences)
+			}
+		} catch (error) {
+			logger.warn('Failed to track media usage for post', { postId: post.id, error })
+		}
+
+		logger.info('Post created', { id: post.id, title: post.title })
+		return jsonResponse(post)
+	} catch (error) {
+		logger.error('Failed to create post', error as Error)
+		return errorResponse('Failed to create post', 500)
+	}
+}
diff --git a/src/routes/api/posts/[id]/+server.ts b/src/routes/api/posts/[id]/+server.ts
new file mode 100644
index 0000000..37f5f60
--- /dev/null
+++ b/src/routes/api/posts/[id]/+server.ts
@@ -0,0 +1,191 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse, checkAdminAuth } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import {
+	updateMediaUsage,
+	removeMediaUsage,
+	extractMediaIds,
+	trackMediaUsage,
+	type MediaUsageReference
+} from '$lib/server/media-usage.js'
+
+// GET /api/posts/[id] - Get a single post
+export const GET: RequestHandler = async (event) => {
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const id = parseInt(event.params.id)
+		if (isNaN(id)) {
+			return errorResponse('Invalid post ID', 400)
+		}
+
+		const post = await prisma.post.findUnique({
+			where: { id }
+		})
+
+		if (!post) {
+			return errorResponse('Post not found', 404)
+		}
+
+		logger.info('Post retrieved', { id })
+		return jsonResponse(post)
+	} catch (error) {
+		logger.error('Failed to retrieve post', error as Error)
+		return errorResponse('Failed to retrieve post', 500)
+	}
+}
+
+// PUT /api/posts/[id] - Update a post
+export const PUT: RequestHandler = async (event) => {
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const id = parseInt(event.params.id)
+		if (isNaN(id)) {
+			return errorResponse('Invalid post ID', 400)
+		}
+
+		const data = await event.request.json()
+
+		// Update publishedAt if status is changing to published
+		if (data.status === 'published') {
+			const currentPost = await prisma.post.findUnique({
+				where: { id },
+				select: { status: true, publishedAt: true }
+			})
+
+			if (currentPost && currentPost.status !== 'published' && !currentPost.publishedAt) {
+				data.publishedAt = new Date()
+			}
+		}
+
+		// Handle album gallery updates
+		let featuredImageId = data.featuredImage
+		if (data.gallery && data.gallery.length > 0 && !featuredImageId) {
+			// Get the media URL for the first gallery item
+			const firstMedia = await prisma.media.findUnique({
+				where: { id: data.gallery[0] },
+				select: { url: true }
+			})
+			if (firstMedia) {
+				featuredImageId = firstMedia.url
+			}
+		}
+
+		// For albums, store gallery IDs in content field as a special structure
+		let postContent = data.content
+		if (data.type === 'album' && data.gallery) {
+			postContent = {
+				type: 'album',
+				gallery: data.gallery,
+				description: data.content
+			}
+		}
+
+		const post = await prisma.post.update({
+			where: { id },
+			data: {
+				title: data.title,
+				slug: data.slug,
+				postType: data.type,
+				status: data.status,
+				content: postContent,
+				linkUrl: data.link_url,
+				linkDescription: data.linkDescription,
+				featuredImage: featuredImageId,
+				attachments:
+					data.attachedPhotos && data.attachedPhotos.length > 0 ? data.attachedPhotos : null,
+				tags: data.tags,
+				publishedAt: data.publishedAt
+			}
+		})
+
+		// Update media usage tracking
+		try {
+			// Remove all existing usage for this post first
+			await removeMediaUsage('post', id)
+
+			// Track all current media usage in the updated post
+			const usageReferences: MediaUsageReference[] = []
+
+			// Track featured image
+			const featuredImageIds = extractMediaIds(post, 'featuredImage')
+			featuredImageIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: id,
+					fieldName: 'featuredImage'
+				})
+			})
+
+			// Track attachments
+			const attachmentIds = extractMediaIds(post, 'attachments')
+			attachmentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: id,
+					fieldName: 'attachments'
+				})
+			})
+
+			// Track media in post content
+			const contentIds = extractMediaIds(post, 'content')
+			contentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'post',
+					contentId: id,
+					fieldName: 'content'
+				})
+			})
+
+			// Add new usage references
+			if (usageReferences.length > 0) {
+				await trackMediaUsage(usageReferences)
+			}
+		} catch (error) {
+			logger.warn('Failed to update media usage for post', { postId: id, error })
+		}
+
+		logger.info('Post updated', { id })
+		return jsonResponse(post)
+	} catch (error) {
+		logger.error('Failed to update post', error as Error)
+		return errorResponse('Failed to update post', 500)
+	}
+}
+
+// DELETE /api/posts/[id] - Delete a post
+export const DELETE: RequestHandler = async (event) => {
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const id = parseInt(event.params.id)
+		if (isNaN(id)) {
+			return errorResponse('Invalid post ID', 400)
+		}
+
+		// Remove media usage tracking first
+		await removeMediaUsage('post', id)
+
+		// Delete the post
+		await prisma.post.delete({
+			where: { id }
+		})
+
+		logger.info('Post deleted', { id })
+		return jsonResponse({ message: 'Post deleted successfully' })
+	} catch (error) {
+		logger.error('Failed to delete post', error as Error)
+		return errorResponse('Failed to delete post', 500)
+	}
+}
diff --git a/src/routes/api/posts/by-slug/[slug]/+server.ts b/src/routes/api/posts/by-slug/[slug]/+server.ts
new file mode 100644
index 0000000..738cf44
--- /dev/null
+++ b/src/routes/api/posts/by-slug/[slug]/+server.ts
@@ -0,0 +1,64 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+// GET /api/posts/by-slug/[slug] - Get post by slug
+export const GET: RequestHandler = async (event) => {
+	const slug = event.params.slug
+
+	if (!slug) {
+		return errorResponse('Invalid post slug', 400)
+	}
+
+	try {
+		const post = await prisma.post.findUnique({
+			where: { slug },
+			include: {
+				album: {
+					select: {
+						id: true,
+						slug: true,
+						title: true,
+						description: true,
+						photos: {
+							orderBy: { displayOrder: 'asc' },
+							select: {
+								id: true,
+								url: true,
+								thumbnailUrl: true,
+								caption: true,
+								width: true,
+								height: true
+							}
+						}
+					}
+				},
+				photo: {
+					select: {
+						id: true,
+						url: true,
+						thumbnailUrl: true,
+						caption: true,
+						width: true,
+						height: true
+					}
+				}
+			}
+		})
+
+		if (!post) {
+			return errorResponse('Post not found', 404)
+		}
+
+		// Only return published posts
+		if (post.status !== 'published' || !post.publishedAt) {
+			return errorResponse('Post not found', 404)
+		}
+
+		return jsonResponse(post)
+	} catch (error) {
+		logger.error('Failed to retrieve post by slug', error as Error)
+		return errorResponse('Failed to retrieve post', 500)
+	}
+}
diff --git a/src/routes/api/projects/+server.ts b/src/routes/api/projects/+server.ts
new file mode 100644
index 0000000..cdf037b
--- /dev/null
+++ b/src/routes/api/projects/+server.ts
@@ -0,0 +1,190 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	getPaginationParams,
+	getPaginationMeta,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import { createSlug, ensureUniqueSlug } from '$lib/server/database'
+import {
+	trackMediaUsage,
+	extractMediaIds,
+	type MediaUsageReference
+} from '$lib/server/media-usage.js'
+
+// GET /api/projects - List all projects
+export const GET: RequestHandler = async (event) => {
+	try {
+		const { page, limit } = getPaginationParams(event.url)
+		const skip = (page - 1) * limit
+
+		// Get filter parameters
+		const status = event.url.searchParams.get('status')
+		const projectType = event.url.searchParams.get('projectType')
+		const includeListOnly = event.url.searchParams.get('includeListOnly') === 'true'
+		const includePasswordProtected =
+			event.url.searchParams.get('includePasswordProtected') === 'true'
+
+		// Build where clause
+		const where: any = {}
+
+		if (status) {
+			where.status = status
+		} else {
+			// Default behavior: determine which statuses to include
+			const allowedStatuses = ['published']
+
+			if (includeListOnly) {
+				allowedStatuses.push('list-only')
+			}
+
+			if (includePasswordProtected) {
+				allowedStatuses.push('password-protected')
+			}
+
+			where.status = { in: allowedStatuses }
+		}
+
+		if (projectType) {
+			where.projectType = projectType
+		}
+
+		// Get total count
+		const total = await prisma.project.count({ where })
+
+		// Get projects
+		const projects = await prisma.project.findMany({
+			where,
+			orderBy: [{ displayOrder: 'asc' }, { year: 'desc' }, { createdAt: 'desc' }],
+			skip,
+			take: limit
+		})
+
+		const pagination = getPaginationMeta(total, page, limit)
+
+		logger.info('Projects list retrieved', { total, page, limit })
+
+		return jsonResponse({
+			projects,
+			pagination
+		})
+	} catch (error) {
+		logger.error('Failed to retrieve projects', error as Error)
+		return errorResponse('Failed to retrieve projects', 500)
+	}
+}
+
+// POST /api/projects - Create a new project
+export const POST: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	try {
+		const body = await parseRequestBody<any>(event.request)
+		if (!body) {
+			return errorResponse('Invalid request body', 400)
+		}
+
+		// Validate required fields
+		if (!body.title || !body.year) {
+			return errorResponse('Title and year are required', 400)
+		}
+
+		// Generate slug
+		const baseSlug = body.slug || createSlug(body.title)
+		const slug = await ensureUniqueSlug(baseSlug, 'project')
+
+		// Create project
+		const project = await prisma.project.create({
+			data: {
+				slug,
+				title: body.title,
+				subtitle: body.subtitle,
+				description: body.description,
+				year: body.year,
+				client: body.client,
+				role: body.role,
+				featuredImage: body.featuredImage,
+				logoUrl: body.logoUrl,
+				gallery: body.gallery || [],
+				externalUrl: body.externalUrl,
+				caseStudyContent: body.caseStudyContent,
+				backgroundColor: body.backgroundColor,
+				highlightColor: body.highlightColor,
+				projectType: body.projectType || 'work',
+				displayOrder: body.displayOrder || 0,
+				status: body.status || 'draft',
+				password: body.password || null,
+				publishedAt: body.status === 'published' ? new Date() : null
+			}
+		})
+
+		// Track media usage
+		try {
+			const usageReferences: MediaUsageReference[] = []
+
+			// Track featured image
+			const featuredImageIds = extractMediaIds(body, 'featuredImage')
+			featuredImageIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'featuredImage'
+				})
+			})
+
+			// Track logo
+			const logoIds = extractMediaIds(body, 'logoUrl')
+			logoIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'logoUrl'
+				})
+			})
+
+			// Track gallery images
+			const galleryIds = extractMediaIds(body, 'gallery')
+			galleryIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'gallery'
+				})
+			})
+
+			// Track media in case study content
+			const contentIds = extractMediaIds(body, 'caseStudyContent')
+			contentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: project.id,
+					fieldName: 'content'
+				})
+			})
+
+			if (usageReferences.length > 0) {
+				await trackMediaUsage(usageReferences)
+			}
+		} catch (error) {
+			logger.warn('Failed to track media usage for project', { projectId: project.id, error })
+		}
+
+		logger.info('Project created', { id: project.id, slug: project.slug })
+
+		return jsonResponse(project, 201)
+	} catch (error) {
+		logger.error('Failed to create project', error as Error)
+		return errorResponse('Failed to create project', 500)
+	}
+}
diff --git a/src/routes/api/projects/[id]/+server.ts b/src/routes/api/projects/[id]/+server.ts
new file mode 100644
index 0000000..702c86a
--- /dev/null
+++ b/src/routes/api/projects/[id]/+server.ts
@@ -0,0 +1,197 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import {
+	jsonResponse,
+	errorResponse,
+	checkAdminAuth,
+	parseRequestBody
+} from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+import { ensureUniqueSlug } from '$lib/server/database'
+import {
+	updateMediaUsage,
+	removeMediaUsage,
+	extractMediaIds,
+	type MediaUsageReference
+} from '$lib/server/media-usage.js'
+
+// GET /api/projects/[id] - Get a single project
+export const GET: RequestHandler = async (event) => {
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid project ID', 400)
+	}
+
+	try {
+		const project = await prisma.project.findUnique({
+			where: { id }
+		})
+
+		if (!project) {
+			return errorResponse('Project not found', 404)
+		}
+
+		return jsonResponse(project)
+	} catch (error) {
+		logger.error('Failed to retrieve project', error as Error)
+		return errorResponse('Failed to retrieve project', 500)
+	}
+}
+
+// PUT /api/projects/[id] - Update a project
+export const PUT: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid project ID', 400)
+	}
+
+	try {
+		const body = await parseRequestBody<any>(event.request)
+		if (!body) {
+			return errorResponse('Invalid request body', 400)
+		}
+
+		// Check if project exists
+		const existing = await prisma.project.findUnique({
+			where: { id }
+		})
+
+		if (!existing) {
+			return errorResponse('Project not found', 404)
+		}
+
+		// Handle slug update
+		let slug = existing.slug
+		if (body.slug && body.slug !== existing.slug) {
+			slug = await ensureUniqueSlug(body.slug, 'project', id)
+		}
+
+		// Update project
+		const project = await prisma.project.update({
+			where: { id },
+			data: {
+				slug,
+				title: body.title ?? existing.title,
+				subtitle: body.subtitle ?? existing.subtitle,
+				description: body.description ?? existing.description,
+				year: body.year ?? existing.year,
+				client: body.client ?? existing.client,
+				role: body.role ?? existing.role,
+				featuredImage: body.featuredImage ?? existing.featuredImage,
+				logoUrl: body.logoUrl ?? existing.logoUrl,
+				gallery: body.gallery ?? existing.gallery,
+				externalUrl: body.externalUrl ?? existing.externalUrl,
+				caseStudyContent: body.caseStudyContent ?? existing.caseStudyContent,
+				backgroundColor: body.backgroundColor ?? existing.backgroundColor,
+				highlightColor: body.highlightColor ?? existing.highlightColor,
+				projectType: body.projectType ?? existing.projectType,
+				displayOrder: body.displayOrder ?? existing.displayOrder,
+				status: body.status ?? existing.status,
+				password: body.password ?? existing.password,
+				publishedAt:
+					body.status === 'published' && !existing.publishedAt ? new Date() : existing.publishedAt
+			}
+		})
+
+		// Update media usage tracking
+		try {
+			// Remove all existing usage for this project first
+			await removeMediaUsage('project', id)
+
+			// Track all current media usage in the updated project
+			const usageReferences: MediaUsageReference[] = []
+
+			// Track featured image
+			const featuredImageIds = extractMediaIds(project, 'featuredImage')
+			featuredImageIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: id,
+					fieldName: 'featuredImage'
+				})
+			})
+
+			// Track logo
+			const logoIds = extractMediaIds(project, 'logoUrl')
+			logoIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: id,
+					fieldName: 'logoUrl'
+				})
+			})
+
+			// Track gallery images
+			const galleryIds = extractMediaIds(project, 'gallery')
+			galleryIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: id,
+					fieldName: 'gallery'
+				})
+			})
+
+			// Track media in case study content
+			const contentIds = extractMediaIds(project, 'caseStudyContent')
+			contentIds.forEach((mediaId) => {
+				usageReferences.push({
+					mediaId,
+					contentType: 'project',
+					contentId: id,
+					fieldName: 'content'
+				})
+			})
+
+			if (usageReferences.length > 0) {
+				await trackMediaUsage(usageReferences)
+			}
+		} catch (error) {
+			logger.warn('Failed to update media usage tracking for project', { projectId: id, error })
+		}
+
+		logger.info('Project updated', { id: project.id, slug: project.slug })
+
+		return jsonResponse(project)
+	} catch (error) {
+		logger.error('Failed to update project', error as Error)
+		return errorResponse('Failed to update project', 500)
+	}
+}
+
+// DELETE /api/projects/[id] - Delete a project
+export const DELETE: RequestHandler = async (event) => {
+	// Check authentication
+	if (!checkAdminAuth(event)) {
+		return errorResponse('Unauthorized', 401)
+	}
+
+	const id = parseInt(event.params.id)
+	if (isNaN(id)) {
+		return errorResponse('Invalid project ID', 400)
+	}
+
+	try {
+		// Remove media usage tracking first
+		await removeMediaUsage('project', id)
+
+		// Delete the project
+		await prisma.project.delete({
+			where: { id }
+		})
+
+		logger.info('Project deleted', { id })
+
+		return new Response(null, { status: 204 })
+	} catch (error) {
+		logger.error('Failed to delete project', error as Error)
+		return errorResponse('Failed to delete project', 500)
+	}
+}
diff --git a/src/routes/api/steam/+server.ts b/src/routes/api/steam/+server.ts
index 8d731f6..72f34c2 100644
--- a/src/routes/api/steam/+server.ts
+++ b/src/routes/api/steam/+server.ts
@@ -1,7 +1,7 @@
 import 'dotenv/config'
 import { error, json } from '@sveltejs/kit'
 import redis from '../redis-client'
-import SteamAPI, { Game, GameInfo, GameInfoExtended, UserPlaytime } from 'steamapi'
+import SteamAPI from 'steamapi'
 
 import type { RequestHandler } from './$types'
 
diff --git a/src/routes/api/universe/+server.ts b/src/routes/api/universe/+server.ts
new file mode 100644
index 0000000..ebe6511
--- /dev/null
+++ b/src/routes/api/universe/+server.ts
@@ -0,0 +1,146 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { jsonResponse, errorResponse } from '$lib/server/api-utils'
+import { logger } from '$lib/server/logger'
+
+export interface UniverseItem {
+	id: number
+	type: 'post' | 'album'
+	slug: string
+	title?: string
+	content?: any
+	publishedAt: string
+	createdAt: string
+
+	// Post-specific fields
+	postType?: string
+	linkUrl?: string
+	linkDescription?: string
+	attachments?: any
+
+	// Album-specific fields
+	description?: string
+	location?: string
+	date?: string
+	photosCount?: number
+	coverPhoto?: any
+	photos?: any[]
+}
+
+// GET /api/universe - Get mixed feed of published posts and albums
+export const GET: RequestHandler = async (event) => {
+	try {
+		const url = new URL(event.request.url)
+		const limit = parseInt(url.searchParams.get('limit') || '20')
+		const offset = parseInt(url.searchParams.get('offset') || '0')
+
+		// Fetch published posts
+		const posts = await prisma.post.findMany({
+			where: {
+				status: 'published',
+				publishedAt: { not: null }
+			},
+			select: {
+				id: true,
+				slug: true,
+				postType: true,
+				title: true,
+				content: true,
+				linkUrl: true,
+				linkDescription: true,
+				attachments: true,
+				publishedAt: true,
+				createdAt: true
+			},
+			orderBy: { publishedAt: 'desc' }
+		})
+
+		// Fetch published albums marked for Universe
+		const albums = await prisma.album.findMany({
+			where: {
+				status: 'published',
+				showInUniverse: true
+			},
+			select: {
+				id: true,
+				slug: true,
+				title: true,
+				description: true,
+				date: true,
+				location: true,
+				createdAt: true,
+				_count: {
+					select: { photos: true }
+				},
+				photos: {
+					take: 6, // Fetch enough for 5 thumbnails + 1 background
+					orderBy: { displayOrder: 'asc' },
+					select: {
+						id: true,
+						url: true,
+						thumbnailUrl: true,
+						caption: true,
+						width: true,
+						height: true
+					}
+				}
+			},
+			orderBy: { createdAt: 'desc' }
+		})
+
+		// Transform posts to universe items
+		const postItems: UniverseItem[] = posts.map((post) => ({
+			id: post.id,
+			type: 'post' as const,
+			slug: post.slug,
+			title: post.title || undefined,
+			content: post.content,
+			postType: post.postType,
+			linkUrl: post.linkUrl || undefined,
+			linkDescription: post.linkDescription || undefined,
+			attachments: post.attachments,
+			publishedAt: post.publishedAt!.toISOString(),
+			createdAt: post.createdAt.toISOString()
+		}))
+
+		// Transform albums to universe items
+		const albumItems: UniverseItem[] = albums.map((album) => ({
+			id: album.id,
+			type: 'album' as const,
+			slug: album.slug,
+			title: album.title,
+			description: album.description || undefined,
+			location: album.location || undefined,
+			date: album.date?.toISOString(),
+			photosCount: album._count.photos,
+			coverPhoto: album.photos[0] || null, // Keep for backward compatibility
+			photos: album.photos, // Add all photos for slideshow
+			publishedAt: album.createdAt.toISOString(), // Albums use createdAt as publishedAt
+			createdAt: album.createdAt.toISOString()
+		}))
+
+		// Combine and sort by publishedAt
+		const allItems = [...postItems, ...albumItems].sort(
+			(a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+		)
+
+		// Apply pagination
+		const paginatedItems = allItems.slice(offset, offset + limit)
+		const hasMore = allItems.length > offset + limit
+
+		const response = {
+			items: paginatedItems,
+			pagination: {
+				total: allItems.length,
+				limit,
+				offset,
+				hasMore
+			}
+		}
+
+		return jsonResponse(response)
+	} catch (error) {
+		logger.error('Failed to fetch universe feed', error as Error)
+		return errorResponse('Failed to fetch universe feed', 500)
+	}
+}
diff --git a/src/routes/labs/+page.svelte b/src/routes/labs/+page.svelte
index ef45071..15b3406 100644
--- a/src/routes/labs/+page.svelte
+++ b/src/routes/labs/+page.svelte
@@ -4,15 +4,28 @@
 
 	const { data }: { data: PageData } = $props()
 
-	const projects = $derived(data.projects)
+	const projects = $derived(data.projects || [])
+	const error = $derived(data.error)
 </script>
 
 <div class="labs-container">
-	<div class="projects-grid">
-		{#each projects as project}
-			<LabCard {project} />
-		{/each}
-	</div>
+	{#if error}
+		<div class="error-message">
+			<h2>Unable to load projects</h2>
+			<p>{error}</p>
+		</div>
+	{:else if projects.length === 0}
+		<div class="empty-message">
+			<h2>No projects yet</h2>
+			<p>Labs projects will appear here once published.</p>
+		</div>
+	{:else}
+		<div class="projects-grid">
+			{#each projects as project}
+				<LabCard {project} />
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style lang="scss">
@@ -35,4 +48,27 @@
 			gap: $unit-2x;
 		}
 	}
+
+	.error-message,
+	.empty-message {
+		text-align: center;
+		padding: $unit-6x $unit-3x;
+
+		h2 {
+			font-size: 1.5rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $grey-10;
+		}
+
+		p {
+			margin: 0;
+			color: $grey-40;
+			line-height: 1.5;
+		}
+	}
+
+	.error-message h2 {
+		color: $red-60;
+	}
 </style>
diff --git a/src/routes/labs/+page.ts b/src/routes/labs/+page.ts
index e609f99..03fa403 100644
--- a/src/routes/labs/+page.ts
+++ b/src/routes/labs/+page.ts
@@ -1,52 +1,23 @@
 import type { PageLoad } from './$types'
-import type { LabProject } from '$lib/types/labs'
 
-export const load: PageLoad = async () => {
-	const projects: LabProject[] = [
-		{
-			id: 'granblue-team',
-			title: 'granblue.team',
-			description: 'A comprehensive web application for Granblue Fantasy players to track raids, manage crews, and optimize team compositions. Features real-time raid tracking, character databases, and community tools.',
-			status: 'active',
-			technologies: [],
-			url: 'https://granblue.team',
-			github: 'https://github.com/jedmund/granblue-team',
-			year: 2022,
-			featured: true
-		},
-		{
-			id: 'subway-board',
-			title: 'Subway Board',
-			description: 'A beautiful, minimalist dashboard displaying real-time NYC subway arrival times. Clean interface inspired by the classic subway map design with live MTA data integration.',
-			status: 'maintenance',
-			technologies: [],
-			github: 'https://github.com/jedmund/subway-board',
-			year: 2023,
-			featured: true
-		},
-		{
-			id: 'siero-discord',
-			title: 'Siero for Discord',
-			description: 'A Discord bot for Granblue Fantasy communities providing character lookups, raid notifications, and server management tools. Serves thousands of users across multiple servers.',
-			status: 'active',
-			technologies: [],
-			github: 'https://github.com/jedmund/siero-bot',
-			year: 2021,
-			featured: true
-		},
-		{
-			id: 'homelab',
-			title: 'Homelab',
-			description: 'Self-hosted infrastructure running on Kubernetes with monitoring, media servers, and development environments. Includes automated deployments and backup strategies.',
-			status: 'active',
-			technologies: [],
-			github: 'https://github.com/jedmund/homelab',
-			year: 2023,
-			featured: false
+export const load: PageLoad = async ({ fetch }) => {
+	try {
+		const response = await fetch(
+			'/api/projects?projectType=labs&includeListOnly=true&includePasswordProtected=true'
+		)
+		if (!response.ok) {
+			throw new Error('Failed to fetch labs projects')
 		}
-	]
 
-	return {
-		projects
+		const data = await response.json()
+		return {
+			projects: data.projects || []
+		}
+	} catch (error) {
+		console.error('Error loading labs projects:', error)
+		return {
+			projects: [],
+			error: 'Failed to load projects'
+		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte
new file mode 100644
index 0000000..7f4f44e
--- /dev/null
+++ b/src/routes/labs/[slug]/+page.svelte
@@ -0,0 +1,159 @@
+<script lang="ts">
+	import Page from '$components/Page.svelte'
+	import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
+	import ProjectContent from '$lib/components/ProjectContent.svelte'
+	import type { PageData } from './$types'
+	import type { Project } from '$lib/types/project'
+
+	let { data } = $props<{ data: PageData }>()
+
+	const project = $derived(data.project as Project | null)
+	const error = $derived(data.error as string | undefined)
+</script>
+
+{#if error}
+	<Page>
+		<div slot="header" class="error-header">
+			<h1>Error</h1>
+		</div>
+		<div class="error-content">
+			<p>{error}</p>
+			<a href="/labs" class="back-link">← Back to labs</a>
+		</div>
+	</Page>
+{:else if !project}
+	<Page>
+		<div class="loading">Loading project...</div>
+	</Page>
+{:else if project.status === 'list-only'}
+	<Page>
+		<div slot="header" class="error-header">
+			<h1>Project Not Available</h1>
+		</div>
+		<div class="error-content">
+			<p>This project is not yet available for viewing. Please check back later.</p>
+			<a href="/labs" class="back-link">← Back to labs</a>
+		</div>
+	</Page>
+{:else if project.status === 'password-protected'}
+	<Page>
+		<ProjectPasswordProtection
+			projectSlug={project.slug}
+			correctPassword={project.password || ''}
+			projectType="labs"
+		>
+			{#snippet children()}
+				<div slot="header" class="project-header">
+					{#if project.logoUrl}
+						<div
+							class="project-logo"
+							style="background-color: {project.backgroundColor || '#f5f5f5'}"
+						>
+							<img src={project.logoUrl} alt="{project.title} logo" />
+						</div>
+					{/if}
+					<h1 class="project-title">{project.title}</h1>
+					{#if project.subtitle}
+						<p class="project-subtitle">{project.subtitle}</p>
+					{/if}
+				</div>
+				<ProjectContent {project} />
+			{/snippet}
+		</ProjectPasswordProtection>
+	</Page>
+{:else}
+	<Page>
+		<div slot="header" class="project-header">
+			{#if project.logoUrl}
+				<div class="project-logo" style="background-color: {project.backgroundColor || '#f5f5f5'}">
+					<img src={project.logoUrl} alt="{project.title} logo" />
+				</div>
+			{/if}
+			<h1 class="project-title">{project.title}</h1>
+			{#if project.subtitle}
+				<p class="project-subtitle">{project.subtitle}</p>
+			{/if}
+		</div>
+		<ProjectContent {project} />
+	</Page>
+{/if}
+
+<style lang="scss">
+	/* Error and Loading States */
+	.error-header h1 {
+		color: $red-60;
+		font-size: 2rem;
+		margin: 0;
+	}
+
+	.error-content {
+		text-align: center;
+
+		p {
+			color: $grey-40;
+			margin-bottom: $unit-2x;
+		}
+	}
+
+	.loading {
+		text-align: center;
+		color: $grey-40;
+		padding: $unit-4x;
+	}
+
+	.back-link {
+		color: $grey-40;
+		text-decoration: none;
+		font-size: 0.925rem;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+	}
+
+	/* Project Header */
+	.project-header {
+		text-align: center;
+		width: 100%;
+	}
+
+	.project-logo {
+		width: 100px;
+		height: 100px;
+		margin: 0 auto $unit-2x;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: $unit-2x;
+		padding: $unit-2x;
+		box-sizing: border-box;
+
+		img {
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+		}
+	}
+
+	.project-title {
+		font-size: 2.5rem;
+		font-weight: 700;
+		margin: 0 0 $unit;
+		color: $grey-10;
+
+		@include breakpoint('phone') {
+			font-size: 2rem;
+		}
+	}
+
+	.project-subtitle {
+		font-size: 1.25rem;
+		color: $grey-40;
+		margin: 0;
+
+		@include breakpoint('phone') {
+			font-size: 1.125rem;
+		}
+	}
+</style>
diff --git a/src/routes/labs/[slug]/+page.ts b/src/routes/labs/[slug]/+page.ts
new file mode 100644
index 0000000..9d74553
--- /dev/null
+++ b/src/routes/labs/[slug]/+page.ts
@@ -0,0 +1,36 @@
+import type { PageLoad } from './$types'
+import type { Project } from '$lib/types/project'
+
+export const load: PageLoad = async ({ params, fetch }) => {
+	try {
+		// Find project by slug - we'll fetch all published, list-only, and password-protected projects
+		const response = await fetch(
+			`/api/projects?projectType=labs&includeListOnly=true&includePasswordProtected=true`
+		)
+		if (!response.ok) {
+			throw new Error('Failed to fetch projects')
+		}
+
+		const data = await response.json()
+		const project = data.projects.find((p: Project) => p.slug === params.slug)
+
+		if (!project) {
+			throw new Error('Project not found')
+		}
+
+		// Handle different project statuses
+		if (project.status === 'draft') {
+			throw new Error('Project not found')
+		}
+
+		return {
+			project
+		}
+	} catch (error) {
+		console.error('Error loading project:', error)
+		return {
+			project: null,
+			error: error instanceof Error ? error.message : 'Failed to load project'
+		}
+	}
+}
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index e64eab4..deeb722 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -4,13 +4,72 @@
 
 	const { data }: { data: PageData } = $props()
 
-	const photoItems = $derived(data.photoItems)
+	const photoItems = $derived(data.photoItems || [])
+	const error = $derived(data.error)
 </script>
 
-<PhotoGrid {photoItems} />
+<div class="photos-page">
+	{#if error}
+		<div class="error-container">
+			<div class="error-message">
+				<h2>Unable to load photos</h2>
+				<p>{error}</p>
+			</div>
+		</div>
+	{:else if photoItems.length === 0}
+		<div class="empty-container">
+			<div class="empty-message">
+				<h2>No photos yet</h2>
+				<p>Photography albums will appear here once published.</p>
+			</div>
+		</div>
+	{:else}
+		<PhotoGrid {photoItems} />
+	{/if}
+</div>
 
 <style lang="scss">
-	:global(main) {
-		padding: 0;
+	.photos-page {
+		width: 100%;
+		max-width: 900px;
+		margin: 0 auto;
+		padding: 0 $unit-3x;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x $unit-2x;
+		}
 	}
-</style>
\ No newline at end of file
+
+	.error-container,
+	.empty-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 60vh;
+	}
+
+	.error-message,
+	.empty-message {
+		text-align: center;
+		max-width: 500px;
+
+		h2 {
+			font-size: 1.5rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $grey-10;
+		}
+
+		p {
+			margin: 0;
+			color: $grey-40;
+			line-height: 1.5;
+		}
+	}
+
+	.error-message {
+		h2 {
+			color: $red-60;
+		}
+	}
+</style>
diff --git a/src/routes/photos/+page.ts b/src/routes/photos/+page.ts
index f08f442..c5fa813 100644
--- a/src/routes/photos/+page.ts
+++ b/src/routes/photos/+page.ts
@@ -1,413 +1,25 @@
 import type { PageLoad } from './$types'
-import type { PhotoItem } from '$lib/types/photos'
 
-export const load: PageLoad = async () => {
-	// Mock data for now - in a real app this would come from an API or CMS
-	const photoItems: PhotoItem[] = [
-		{
-			id: 'photo-1',
-			src: 'https://picsum.photos/400/600?random=1',
-			alt: 'Mountain landscape at sunset',
-			caption: 'A beautiful landscape captured during golden hour',
-			width: 400,
-			height: 600,
-			exif: {
-				camera: 'Canon EOS R5',
-				lens: '24-70mm f/2.8',
-				focalLength: '35mm',
-				aperture: 'f/5.6',
-				shutterSpeed: '1/250s',
-				iso: '100',
-				dateTaken: '2024-01-15',
-				location: 'Yosemite National Park'
-			}
-		},
-		{
-			id: 'album-1',
-			title: 'Tokyo Street Photography',
-			description: 'A collection of street photography from Tokyo',
-			coverPhoto: {
-				id: 'album-1-cover',
-				src: 'https://picsum.photos/500/400?random=2',
-				alt: 'Tokyo street scene',
-				width: 500,
-				height: 400
-			},
-			photos: [
-				{
-					id: 'album-1-1',
-					src: 'https://picsum.photos/500/400?random=2',
-					alt: 'Tokyo street scene',
-					caption: 'Busy intersection in Shibuya',
-					width: 500,
-					height: 400,
-					exif: {
-						camera: 'Fujifilm X-T4',
-						lens: '23mm f/1.4',
-						focalLength: '23mm',
-						aperture: 'f/2.8',
-						shutterSpeed: '1/60s',
-						iso: '800',
-						dateTaken: '2024-02-10'
-					}
-				},
-				{
-					id: 'album-1-2',
-					src: 'https://picsum.photos/600/400?random=25',
-					alt: 'Tokyo alley',
-					caption: 'Quiet alley in Shinjuku',
-					width: 600,
-					height: 400
-				},
-				{
-					id: 'album-1-3',
-					src: 'https://picsum.photos/500/700?random=26',
-					alt: 'Neon signs',
-					caption: 'Colorful neon signs in Harajuku',
-					width: 500,
-					height: 700,
-					exif: {
-						camera: 'Fujifilm X-T4',
-						lens: '56mm f/1.2',
-						focalLength: '56mm',
-						aperture: 'f/1.8',
-						shutterSpeed: '1/30s',
-						iso: '1600',
-						dateTaken: '2024-02-11'
-					}
-				}
-			],
-			createdAt: '2024-02-10'
-		},
-		{
-			id: 'photo-2',
-			src: 'https://picsum.photos/300/500?random=4',
-			alt: 'Modern building',
-			caption: 'Urban architecture study',
-			width: 300,
-			height: 500,
-			exif: {
-				camera: 'Sony A7IV',
-				lens: '85mm f/1.8',
-				focalLength: '85mm',
-				aperture: 'f/2.8',
-				shutterSpeed: '1/125s',
-				iso: '200',
-				dateTaken: '2024-01-20'
-			}
-		},
-		{
-			id: 'photo-3',
-			src: 'https://picsum.photos/600/300?random=5',
-			alt: 'Ocean waves',
-			caption: 'Minimalist seascape composition',
-			width: 600,
-			height: 300
-		},
-		{
-			id: 'photo-4',
-			src: 'https://picsum.photos/400/500?random=6',
-			alt: 'Forest path',
-			caption: 'Morning light through the trees',
-			width: 400,
-			height: 500,
-			exif: {
-				camera: 'Nikon Z6II',
-				lens: '24-120mm f/4',
-				focalLength: '50mm',
-				aperture: 'f/8',
-				shutterSpeed: '1/60s',
-				iso: '400',
-				dateTaken: '2024-03-05',
-				location: 'Redwood National Park'
-			}
-		},
-		{
-			id: 'album-2',
-			title: 'Portrait Series',
-			description: 'A collection of environmental portraits',
-			coverPhoto: {
-				id: 'album-2-cover',
-				src: 'https://picsum.photos/400/600?random=7',
-				alt: 'Portrait of a musician',
-				width: 400,
-				height: 600
-			},
-			photos: [
-				{
-					id: 'album-2-1',
-					src: 'https://picsum.photos/400/600?random=7',
-					alt: 'Portrait of a musician',
-					caption: 'Jazz musician in his studio',
-					width: 400,
-					height: 600,
-					exif: {
-						camera: 'Canon EOS R6',
-						lens: '85mm f/1.2',
-						focalLength: '85mm',
-						aperture: 'f/1.8',
-						shutterSpeed: '1/125s',
-						iso: '640',
-						dateTaken: '2024-02-20'
-					}
-				},
-				{
-					id: 'album-2-2',
-					src: 'https://picsum.photos/500/650?random=27',
-					alt: 'Artist in gallery',
-					caption: 'Painter surrounded by her work',
-					width: 500,
-					height: 650
-				},
-				{
-					id: 'album-2-3',
-					src: 'https://picsum.photos/450/600?random=28',
-					alt: 'Chef in kitchen',
-					caption: 'Chef preparing for evening service',
-					width: 450,
-					height: 600
-				}
-			],
-			createdAt: '2024-02-20'
-		},
-		{
-			id: 'photo-5',
-			src: 'https://picsum.photos/500/350?random=8',
-			alt: 'City skyline',
-			caption: 'Downtown at blue hour',
-			width: 500,
-			height: 350,
-			exif: {
-				camera: 'Sony A7R V',
-				lens: '16-35mm f/2.8',
-				focalLength: '24mm',
-				aperture: 'f/11',
-				shutterSpeed: '8s',
-				iso: '100',
-				dateTaken: '2024-01-30',
-				location: 'San Francisco'
-			}
-		},
-		{
-			id: 'photo-6',
-			src: 'https://picsum.photos/350/550?random=9',
-			alt: 'Vintage motorcycle',
-			caption: 'Classic bike restoration project',
-			width: 350,
-			height: 550
-		},
-		{
-			id: 'photo-7',
-			src: 'https://picsum.photos/450/300?random=10',
-			alt: 'Coffee and books',
-			caption: 'Quiet morning ritual',
-			width: 450,
-			height: 300,
-			exif: {
-				camera: 'Fujifilm X100V',
-				lens: '23mm f/2',
-				focalLength: '23mm',
-				aperture: 'f/2.8',
-				shutterSpeed: '1/60s',
-				iso: '320',
-				dateTaken: '2024-03-01'
-			}
-		},
-		{
-			id: 'album-3',
-			title: 'Nature Macro',
-			description: 'Close-up studies of natural details',
-			coverPhoto: {
-				id: 'album-3-cover',
-				src: 'https://picsum.photos/400/400?random=11',
-				alt: 'Dewdrop on leaf',
-				width: 400,
-				height: 400
-			},
-			photos: [
-				{
-					id: 'album-3-1',
-					src: 'https://picsum.photos/400/400?random=11',
-					alt: 'Dewdrop on leaf',
-					caption: 'Morning dew captured with macro lens',
-					width: 400,
-					height: 400,
-					exif: {
-						camera: 'Canon EOS R5',
-						lens: '100mm f/2.8 Macro',
-						focalLength: '100mm',
-						aperture: 'f/5.6',
-						shutterSpeed: '1/250s',
-						iso: '200',
-						dateTaken: '2024-03-15'
-					}
-				},
-				{
-					id: 'album-3-2',
-					src: 'https://picsum.photos/500/500?random=29',
-					alt: 'Butterfly wing detail',
-					caption: 'Intricate patterns on butterfly wing',
-					width: 500,
-					height: 500
-				},
-				{
-					id: 'album-3-3',
-					src: 'https://picsum.photos/400/600?random=30',
-					alt: 'Tree bark texture',
-					caption: 'Ancient oak bark patterns',
-					width: 400,
-					height: 600
-				},
-				{
-					id: 'album-3-4',
-					src: 'https://picsum.photos/350/500?random=31',
-					alt: 'Flower stamen',
-					caption: 'Lily stamen in soft light',
-					width: 350,
-					height: 500
-				}
-			],
-			createdAt: '2024-03-15'
-		},
-		{
-			id: 'photo-8',
-			src: 'https://picsum.photos/600/400?random=12',
-			alt: 'Desert landscape',
-			caption: 'Vast desert under starry sky',
-			width: 600,
-			height: 400,
-			exif: {
-				camera: 'Nikon D850',
-				lens: '14-24mm f/2.8',
-				focalLength: '14mm',
-				aperture: 'f/2.8',
-				shutterSpeed: '25s',
-				iso: '3200',
-				dateTaken: '2024-02-25',
-				location: 'Death Valley'
-			}
-		},
-		{
-			id: 'photo-9',
-			src: 'https://picsum.photos/300/450?random=13',
-			alt: 'Vintage camera',
-			caption: 'My grandfather\'s Leica',
-			width: 300,
-			height: 450
-		},
-		{
-			id: 'photo-10',
-			src: 'https://picsum.photos/550/350?random=14',
-			alt: 'Market scene',
-			caption: 'Colorful spices at local market',
-			width: 550,
-			height: 350,
-			exif: {
-				camera: 'Fujifilm X-T5',
-				lens: '18-55mm f/2.8-4',
-				focalLength: '35mm',
-				aperture: 'f/4',
-				shutterSpeed: '1/125s',
-				iso: '800',
-				dateTaken: '2024-03-10',
-				location: 'Marrakech, Morocco'
-			}
-		},
-		{
-			id: 'photo-11',
-			src: 'https://picsum.photos/400/600?random=15',
-			alt: 'Lighthouse at dawn',
-			caption: 'Coastal beacon in morning mist',
-			width: 400,
-			height: 600,
-			exif: {
-				camera: 'Sony A7III',
-				lens: '70-200mm f/2.8',
-				focalLength: '135mm',
-				aperture: 'f/8',
-				shutterSpeed: '1/200s',
-				iso: '400',
-				dateTaken: '2024-02-28',
-				location: 'Big Sur, California'
-			}
-		},
-		{
-			id: 'photo-12',
-			src: 'https://picsum.photos/500/300?random=16',
-			alt: 'Train station',
-			caption: 'Rush hour commuters',
-			width: 500,
-			height: 300
-		},
-		{
-			id: 'album-4',
-			title: 'Black & White',
-			description: 'Monochrome photography collection',
-			coverPhoto: {
-				id: 'album-4-cover',
-				src: 'https://picsum.photos/450/600?random=17',
-				alt: 'Urban shadows',
-				width: 450,
-				height: 600
-			},
-			photos: [
-				{
-					id: 'album-4-1',
-					src: 'https://picsum.photos/450/600?random=17',
-					alt: 'Urban shadows',
-					caption: 'Dramatic shadows in the financial district',
-					width: 450,
-					height: 600,
-					exif: {
-						camera: 'Leica M11 Monochrom',
-						lens: '35mm f/1.4',
-						focalLength: '35mm',
-						aperture: 'f/5.6',
-						shutterSpeed: '1/250s',
-						iso: '200',
-						dateTaken: '2024-03-20'
-					}
-				},
-				{
-					id: 'album-4-2',
-					src: 'https://picsum.photos/600/400?random=32',
-					alt: 'Elderly man reading',
-					caption: 'Contemplation in the park',
-					width: 600,
-					height: 400
-				},
-				{
-					id: 'album-4-3',
-					src: 'https://picsum.photos/400/500?random=33',
-					alt: 'Rain on window',
-					caption: 'Storm patterns on glass',
-					width: 400,
-					height: 500
-				}
-			],
-			createdAt: '2024-03-20'
-		},
-		{
-			id: 'photo-13',
-			src: 'https://picsum.photos/350/500?random=18',
-			alt: 'Street art mural',
-			caption: 'Vibrant wall art in the Mission District',
-			width: 350,
-			height: 500,
-			exif: {
-				camera: 'iPhone 15 Pro',
-				lens: '24mm f/1.8',
-				focalLength: '24mm',
-				aperture: 'f/1.8',
-				shutterSpeed: '1/120s',
-				iso: '64',
-				dateTaken: '2024-03-25',
-				location: 'San Francisco'
-			}
+export const load: PageLoad = async ({ fetch }) => {
+	try {
+		const response = await fetch('/api/photos?limit=50')
+		if (!response.ok) {
+			throw new Error('Failed to fetch photos')
 		}
-	]
 
-	return {
-		photoItems
+		const data = await response.json()
+		return {
+			photoItems: data.photoItems || [],
+			pagination: data.pagination || null
+		}
+	} catch (error) {
+		console.error('Error loading photos:', error)
+
+		// Fallback to empty array if API fails
+		return {
+			photoItems: [],
+			pagination: null,
+			error: 'Failed to load photos'
+		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
new file mode 100644
index 0000000..ad0d194
--- /dev/null
+++ b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
@@ -0,0 +1,510 @@
+<script lang="ts">
+	import type { PageData } from './$types'
+
+	let { data }: { data: PageData } = $props()
+
+	const photo = $derived(data.photo)
+	const album = $derived(data.album)
+	const navigation = $derived(data.navigation)
+	const error = $derived(data.error)
+
+	const formatDate = (dateString: string) => {
+		const date = new Date(dateString)
+		return date.toLocaleDateString('en-US', {
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric'
+		})
+	}
+
+	const formatExif = (exifData: any) => {
+		if (!exifData) return null
+
+		const formatSpeed = (speed: string) => {
+			if (speed?.includes('/')) return speed
+			if (speed?.includes('s')) return speed
+			return speed ? `1/${speed}s` : null
+		}
+
+		return {
+			camera: exifData.camera,
+			lens: exifData.lens,
+			settings: [
+				exifData.focalLength,
+				exifData.aperture,
+				formatSpeed(exifData.shutterSpeed),
+				exifData.iso ? `ISO ${exifData.iso}` : null
+			]
+				.filter(Boolean)
+				.join(' • '),
+			location: exifData.location,
+			dateTaken: exifData.dateTaken
+		}
+	}
+
+	const exif = $derived(photo ? formatExif(photo.exifData) : null)
+</script>
+
+<svelte:head>
+	{#if photo && album}
+		<title
+			>{photo.title || photo.caption || `Photo ${navigation?.currentIndex}`} - {album.title}</title
+		>
+		<meta
+			name="description"
+			content={photo.description || photo.caption || `Photo from ${album.title}`}
+		/>
+
+		<!-- Open Graph meta tags -->
+		<meta
+			property="og:title"
+			content="{photo.title ||
+				photo.caption ||
+				`Photo ${navigation?.currentIndex}`} - {album.title}"
+		/>
+		<meta
+			property="og:description"
+			content={photo.description || photo.caption || `Photo from ${album.title}`}
+		/>
+		<meta property="og:type" content="article" />
+		<meta property="og:image" content={photo.url} />
+
+		<!-- Article meta -->
+		<meta property="article:author" content="jedmund" />
+		{#if exif?.dateTaken}
+			<meta property="article:published_time" content={exif.dateTaken} />
+		{/if}
+	{:else}
+		<title>Photo Not Found</title>
+	{/if}
+</svelte:head>
+
+{#if error || !photo || !album}
+	<div class="error-container">
+		<div class="error-content">
+			<h1>Photo Not Found</h1>
+			<p>{error || "The photo you're looking for doesn't exist."}</p>
+			<a href="/photos" class="back-link">← Back to Photos</a>
+		</div>
+	</div>
+{:else}
+	<div class="photo-page">
+		<!-- Navigation Header -->
+		<header class="photo-header">
+			<nav class="breadcrumb">
+				<a href="/photos">Photos</a>
+				<span class="separator">→</span>
+				<a href="/photos/{album.slug}">{album.title}</a>
+				<span class="separator">→</span>
+				<span class="current">Photo {navigation.currentIndex} of {navigation.totalCount}</span>
+			</nav>
+
+			<div class="photo-nav">
+				{#if navigation.prevPhoto}
+					<a href="/photos/{album.slug}/{navigation.prevPhoto.id}" class="nav-btn prev">
+						<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path
+								d="M12.5 15L7.5 10L12.5 5"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+						Previous
+					</a>
+				{:else}
+					<div class="nav-btn disabled">
+						<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path
+								d="M12.5 15L7.5 10L12.5 5"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+						Previous
+					</div>
+				{/if}
+
+				{#if navigation.nextPhoto}
+					<a href="/photos/{album.slug}/{navigation.nextPhoto.id}" class="nav-btn next">
+						Next
+						<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path
+								d="M7.5 5L12.5 10L7.5 15"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</a>
+				{:else}
+					<div class="nav-btn disabled">
+						Next
+						<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path
+								d="M7.5 5L12.5 10L7.5 15"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</div>
+				{/if}
+			</div>
+		</header>
+
+		<!-- Photo Display -->
+		<main class="photo-main">
+			<div class="photo-container">
+				<img
+					src={photo.url}
+					alt={photo.caption || photo.title || 'Photo'}
+					class="main-photo"
+					loading="eager"
+				/>
+			</div>
+		</main>
+
+		<!-- Photo Details -->
+		<aside class="photo-details">
+			<div class="details-content">
+				{#if photo.title}
+					<h1 class="photo-title">{photo.title}</h1>
+				{/if}
+
+				{#if photo.caption}
+					<p class="photo-caption">{photo.caption}</p>
+				{/if}
+
+				{#if photo.description}
+					<p class="photo-description">{photo.description}</p>
+				{/if}
+
+				{#if exif}
+					<div class="photo-exif">
+						<h3>Photo Details</h3>
+
+						{#if exif.camera}
+							<div class="exif-item">
+								<span class="label">Camera</span>
+								<span class="value">{exif.camera}</span>
+							</div>
+						{/if}
+
+						{#if exif.lens}
+							<div class="exif-item">
+								<span class="label">Lens</span>
+								<span class="value">{exif.lens}</span>
+							</div>
+						{/if}
+
+						{#if exif.settings}
+							<div class="exif-item">
+								<span class="label">Settings</span>
+								<span class="value">{exif.settings}</span>
+							</div>
+						{/if}
+
+						{#if exif.location}
+							<div class="exif-item">
+								<span class="label">Location</span>
+								<span class="value">{exif.location}</span>
+							</div>
+						{/if}
+
+						{#if exif.dateTaken}
+							<div class="exif-item">
+								<span class="label">Date Taken</span>
+								<span class="value">{formatDate(exif.dateTaken)}</span>
+							</div>
+						{/if}
+					</div>
+				{/if}
+
+				<div class="photo-actions">
+					<a href="/photos/{album.slug}" class="back-to-album">← Back to {album.title}</a>
+				</div>
+			</div>
+		</aside>
+	</div>
+{/if}
+
+<style lang="scss">
+	:global(main) {
+		padding: 0;
+	}
+
+	.error-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 60vh;
+		padding: $unit-6x $unit-3x;
+	}
+
+	.error-content {
+		text-align: center;
+		max-width: 500px;
+
+		h1 {
+			font-size: 1.75rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $red-60;
+		}
+
+		p {
+			margin: 0 0 $unit-3x;
+			color: $grey-40;
+			line-height: 1.5;
+		}
+	}
+
+	.back-link {
+		color: $grey-40;
+		text-decoration: none;
+		font-size: 0.925rem;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+	}
+
+	.photo-page {
+		min-height: 100vh;
+		display: grid;
+		grid-template-areas:
+			'header header'
+			'main details';
+		grid-template-columns: 1fr 400px;
+		grid-template-rows: auto 1fr;
+
+		@include breakpoint('tablet') {
+			grid-template-areas:
+				'header'
+				'main'
+				'details';
+			grid-template-columns: 1fr;
+			grid-template-rows: auto 1fr auto;
+		}
+	}
+
+	.photo-header {
+		grid-area: header;
+		background: $grey-100;
+		border-bottom: 1px solid $grey-90;
+		padding: $unit-3x $unit-4x;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		@include breakpoint('phone') {
+			padding: $unit-2x;
+			flex-direction: column;
+			gap: $unit-2x;
+			align-items: stretch;
+		}
+	}
+
+	.breadcrumb {
+		font-size: 0.875rem;
+		color: $grey-40;
+
+		a {
+			color: $grey-40;
+			text-decoration: none;
+			transition: color 0.2s ease;
+
+			&:hover {
+				color: $grey-20;
+			}
+		}
+
+		.separator {
+			margin: 0 $unit;
+		}
+
+		.current {
+			color: $grey-20;
+		}
+	}
+
+	.photo-nav {
+		display: flex;
+		gap: $unit-2x;
+
+		@include breakpoint('phone') {
+			justify-content: space-between;
+		}
+	}
+
+	.nav-btn {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		padding: $unit $unit-2x;
+		border-radius: $unit;
+		border: 1px solid $grey-85;
+		background: $grey-100;
+		color: $grey-20;
+		text-decoration: none;
+		font-size: 0.875rem;
+		font-weight: 500;
+		transition: all 0.2s ease;
+
+		&:hover:not(.disabled) {
+			border-color: $grey-70;
+			background: $grey-95;
+		}
+
+		&.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		&.prev svg {
+			order: -1;
+		}
+
+		&.next svg {
+			order: 1;
+		}
+	}
+
+	.photo-main {
+		grid-area: main;
+		background: $grey-95;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: $unit-4x;
+		min-height: 60vh;
+
+		@include breakpoint('tablet') {
+			min-height: 50vh;
+		}
+
+		@include breakpoint('phone') {
+			padding: $unit-2x;
+		}
+	}
+
+	.photo-container {
+		max-width: 100%;
+		max-height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.main-photo {
+		max-width: 100%;
+		max-height: 80vh;
+		width: auto;
+		height: auto;
+		border-radius: $unit;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+		object-fit: contain;
+
+		@include breakpoint('tablet') {
+			max-height: 60vh;
+		}
+	}
+
+	.photo-details {
+		grid-area: details;
+		background: $grey-100;
+		border-left: 1px solid $grey-90;
+		overflow-y: auto;
+
+		@include breakpoint('tablet') {
+			border-left: none;
+			border-top: 1px solid $grey-90;
+		}
+	}
+
+	.details-content {
+		padding: $unit-4x;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x $unit-2x;
+		}
+	}
+
+	.photo-title {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0 0 $unit-2x;
+		color: $grey-10;
+	}
+
+	.photo-caption {
+		font-size: 1.125rem;
+		color: $grey-20;
+		margin: 0 0 $unit-3x;
+		line-height: 1.5;
+	}
+
+	.photo-description {
+		font-size: 1rem;
+		color: $grey-30;
+		margin: 0 0 $unit-4x;
+		line-height: 1.6;
+	}
+
+	.photo-exif {
+		margin-bottom: $unit-4x;
+
+		h3 {
+			font-size: 1rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $grey-10;
+		}
+	}
+
+	.exif-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		margin-bottom: $unit;
+		gap: $unit-2x;
+
+		.label {
+			font-size: 0.875rem;
+			color: $grey-50;
+			font-weight: 500;
+			flex-shrink: 0;
+		}
+
+		.value {
+			font-size: 0.875rem;
+			color: $grey-20;
+			text-align: right;
+			word-break: break-word;
+		}
+	}
+
+	.photo-actions {
+		padding-top: $unit-3x;
+		border-top: 1px solid $grey-90;
+	}
+
+	.back-to-album {
+		color: $grey-40;
+		text-decoration: none;
+		font-size: 0.925rem;
+		font-weight: 500;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+	}
+</style>
diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.ts b/src/routes/photos/[albumSlug]/[photoId]/+page.ts
new file mode 100644
index 0000000..e22c5c2
--- /dev/null
+++ b/src/routes/photos/[albumSlug]/[photoId]/+page.ts
@@ -0,0 +1,30 @@
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, fetch }) => {
+	try {
+		const response = await fetch(`/api/photos/${params.albumSlug}/${params.photoId}`)
+
+		if (!response.ok) {
+			if (response.status === 404) {
+				throw new Error('Photo not found')
+			}
+			throw new Error('Failed to fetch photo')
+		}
+
+		const data = await response.json()
+
+		return {
+			photo: data.photo,
+			album: data.album,
+			navigation: data.navigation
+		}
+	} catch (error) {
+		console.error('Error loading photo:', error)
+		return {
+			photo: null,
+			album: null,
+			navigation: null,
+			error: error instanceof Error ? error.message : 'Failed to load photo'
+		}
+	}
+}
diff --git a/src/routes/photos/[slug]/+page.svelte b/src/routes/photos/[slug]/+page.svelte
new file mode 100644
index 0000000..4f5b75b
--- /dev/null
+++ b/src/routes/photos/[slug]/+page.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+	import PhotoGrid from '$components/PhotoGrid.svelte'
+	import type { PageData } from './$types'
+
+	let { data }: { data: PageData } = $props()
+
+	const album = $derived(data.album)
+	const error = $derived(data.error)
+
+	// Transform album data to PhotoItem format for PhotoGrid
+	const photoItems = $derived(
+		album?.photos?.map((photo: any) => ({
+			id: `photo-${photo.id}`,
+			src: photo.url,
+			alt: photo.caption || photo.filename,
+			caption: photo.caption,
+			width: photo.width || 400,
+			height: photo.height || 400
+		})) ?? []
+	)
+
+	const formatDate = (dateString: string) => {
+		const date = new Date(dateString)
+		return date.toLocaleDateString('en-US', {
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric'
+		})
+	}
+</script>
+
+<svelte:head>
+	{#if album}
+		<title>{album.title} - Photos</title>
+		<meta name="description" content={album.description || `Photo album: ${album.title}`} />
+	{:else}
+		<title>Album Not Found - Photos</title>
+	{/if}
+</svelte:head>
+
+{#if error}
+	<div class="error-container">
+		<div class="error-message">
+			<h1>Album Not Found</h1>
+			<p>{error}</p>
+			<a href="/photos" class="back-link">← Back to Photos</a>
+		</div>
+	</div>
+{:else if album}
+	<div class="album-page">
+		<!-- Album Card -->
+		<div class="album-card">
+			<h1 class="album-title">{album.title}</h1>
+
+			{#if album.description}
+				<p class="album-description">{album.description}</p>
+			{/if}
+
+			<div class="album-meta">
+				{#if album.date}
+					<span class="meta-item">📅 {formatDate(album.date)}</span>
+				{/if}
+				{#if album.location}
+					<span class="meta-item">📍 {album.location}</span>
+				{/if}
+				<span class="meta-item"
+					>📷 {album.photos?.length || 0} photo{(album.photos?.length || 0) !== 1 ? 's' : ''}</span
+				>
+			</div>
+		</div>
+
+		<!-- Photo Grid -->
+		{#if photoItems.length > 0}
+			<PhotoGrid {photoItems} albumSlug={album.slug} />
+		{:else}
+			<div class="empty-album">
+				<p>This album doesn't contain any photos yet.</p>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style lang="scss">
+	.error-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 60vh;
+		padding: $unit-6x $unit-3x;
+	}
+
+	.error-message {
+		text-align: center;
+		max-width: 500px;
+
+		h1 {
+			font-size: 1.75rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $red-60;
+		}
+
+		p {
+			margin: 0 0 $unit-3x;
+			color: $grey-40;
+			line-height: 1.5;
+		}
+	}
+
+	.back-link {
+		color: $grey-40;
+		text-decoration: none;
+		font-size: 0.925rem;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+	}
+
+	.album-page {
+		width: 100%;
+		max-width: 900px;
+		margin: 0 auto;
+		padding: $unit-4x $unit-3x;
+
+		@include breakpoint('phone') {
+			padding: $unit-3x $unit-2x;
+		}
+	}
+
+	.album-card {
+		background: $grey-100;
+		border: 1px solid $grey-90;
+		border-radius: $card-corner-radius;
+		padding: $unit-6x;
+		margin-bottom: $unit-3x;
+		text-align: center;
+
+		@include breakpoint('tablet') {
+			margin-bottom: $unit-2x;
+		}
+
+		@include breakpoint('phone') {
+			padding: $unit-4x $unit-3x;
+		}
+	}
+
+	.album-title {
+		font-size: 2.25rem;
+		font-weight: 700;
+		margin: 0 0 $unit-2x;
+		color: $grey-10;
+
+		@include breakpoint('phone') {
+			font-size: 1.875rem;
+		}
+	}
+
+	.album-description {
+		font-size: 1.125rem;
+		color: $grey-30;
+		margin: 0 0 $unit-4x;
+		line-height: 1.5;
+		max-width: 600px;
+		margin-left: auto;
+		margin-right: auto;
+
+		@include breakpoint('phone') {
+			font-size: 1rem;
+			margin-bottom: $unit-3x;
+		}
+	}
+
+	.album-meta {
+		display: flex;
+		justify-content: center;
+		gap: $unit-3x;
+		flex-wrap: wrap;
+
+		.meta-item {
+			font-size: 0.875rem;
+			color: $grey-40;
+			display: flex;
+			align-items: center;
+			gap: $unit-half;
+		}
+
+		@include breakpoint('phone') {
+			gap: $unit-2x;
+		}
+	}
+
+	.empty-album {
+		text-align: center;
+		padding: $unit-6x $unit-3x;
+		color: $grey-40;
+	}
+</style>
diff --git a/src/routes/photos/[slug]/+page.ts b/src/routes/photos/[slug]/+page.ts
new file mode 100644
index 0000000..e3ef1b1
--- /dev/null
+++ b/src/routes/photos/[slug]/+page.ts
@@ -0,0 +1,31 @@
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, fetch }) => {
+	try {
+		// Fetch the specific album using the individual album endpoint which includes photos
+		const response = await fetch(`/api/albums/by-slug/${params.slug}`)
+		if (!response.ok) {
+			if (response.status === 404) {
+				throw new Error('Album not found')
+			}
+			throw new Error('Failed to fetch album')
+		}
+
+		const album = await response.json()
+
+		// Check if this is a photography album and published
+		if (!album.isPhotography || album.status !== 'published') {
+			throw new Error('Album not found')
+		}
+
+		return {
+			album
+		}
+	} catch (error) {
+		console.error('Error loading album:', error)
+		return {
+			album: null,
+			error: error instanceof Error ? error.message : 'Failed to load album'
+		}
+	}
+}
diff --git a/src/routes/rss/+server.ts b/src/routes/rss/+server.ts
new file mode 100644
index 0000000..190b379
--- /dev/null
+++ b/src/routes/rss/+server.ts
@@ -0,0 +1,242 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { logger } from '$lib/server/logger'
+
+// Helper function to escape XML special characters
+function escapeXML(str: string): string {
+	if (!str) return ''
+	return str
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;')
+}
+
+// Helper function to convert content to HTML for full content
+function convertContentToHTML(content: any): string {
+	if (!content || !content.blocks) return ''
+
+	return content.blocks
+		.map((block: any) => {
+			switch (block.type) {
+				case 'paragraph':
+					return `<p>${escapeXML(block.content || '')}</p>`
+				case 'heading':
+					const level = block.level || 2
+					return `<h${level}>${escapeXML(block.content || '')}</h${level}>`
+				case 'list':
+					const items = (block.content || [])
+						.map((item: any) => `<li>${escapeXML(item)}</li>`)
+						.join('')
+					return block.listType === 'ordered' ? `<ol>${items}</ol>` : `<ul>${items}</ul>`
+				default:
+					return `<p>${escapeXML(block.content || '')}</p>`
+			}
+		})
+		.join('\n')
+}
+
+// Helper function to extract text summary from content
+function extractTextSummary(content: any, maxLength: number = 300): string {
+	if (!content || !content.blocks) return ''
+
+	const text = content.blocks
+		.filter((block: any) => block.type === 'paragraph' && block.content)
+		.map((block: any) => block.content)
+		.join(' ')
+
+	return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
+}
+
+// Helper function to format RFC 822 date
+function formatRFC822Date(date: Date): string {
+	return date.toUTCString()
+}
+
+export const GET: RequestHandler = async (event) => {
+	try {
+		// Get published posts from Universe
+		const posts = await prisma.post.findMany({
+			where: {
+				status: 'published',
+				publishedAt: { not: null }
+			},
+			orderBy: { publishedAt: 'desc' },
+			take: 25
+		})
+
+		// Get published albums that show in universe
+		const universeAlbums = await prisma.album.findMany({
+			where: {
+				status: 'published',
+				showInUniverse: true
+			},
+			include: {
+				photos: {
+					where: {
+						status: 'published',
+						showInPhotos: true
+					},
+					orderBy: { displayOrder: 'asc' },
+					take: 1 // Get first photo for cover image
+				},
+				_count: {
+					select: { photos: true }
+				}
+			},
+			orderBy: { createdAt: 'desc' },
+			take: 15
+		})
+
+		// Get published photography albums
+		const photoAlbums = await prisma.album.findMany({
+			where: {
+				status: 'published',
+				isPhotography: true
+			},
+			include: {
+				photos: {
+					where: {
+						status: 'published',
+						showInPhotos: true
+					},
+					orderBy: { displayOrder: 'asc' },
+					take: 1 // Get first photo for cover image
+				},
+				_count: {
+					select: {
+						photos: {
+							where: {
+								status: 'published',
+								showInPhotos: true
+							}
+						}
+					}
+				}
+			},
+			orderBy: { createdAt: 'desc' },
+			take: 15
+		})
+
+		// Combine all content types
+		const items = [
+			...posts.map((post) => ({
+				type: 'post',
+				section: 'universe',
+				id: post.id.toString(),
+				title:
+					post.title || `${post.postType.charAt(0).toUpperCase() + post.postType.slice(1)} Post`,
+				description: post.excerpt || extractTextSummary(post.content) || '',
+				content: convertContentToHTML(post.content),
+				link: `${event.url.origin}/universe/${post.slug}`,
+				guid: `${event.url.origin}/universe/${post.slug}`,
+				pubDate: post.publishedAt || post.createdAt,
+				updatedDate: post.updatedAt,
+				postType: post.postType,
+				linkUrl: post.linkUrl || null
+			})),
+			...universeAlbums.map((album) => ({
+				type: 'album',
+				section: 'universe',
+				id: album.id.toString(),
+				title: album.title,
+				description:
+					album.description ||
+					`Photo album with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`,
+				content: album.description ? `<p>${escapeXML(album.description)}</p>` : '',
+				link: `${event.url.origin}/photos/${album.slug}`,
+				guid: `${event.url.origin}/photos/${album.slug}`,
+				pubDate: album.createdAt,
+				updatedDate: album.updatedAt,
+				photoCount: album._count.photos,
+				coverPhoto: album.photos[0],
+				location: album.location
+			})),
+			...photoAlbums
+				.filter((album) => !universeAlbums.some((ua) => ua.id === album.id)) // Avoid duplicates
+				.map((album) => ({
+					type: 'album',
+					section: 'photos',
+					id: album.id.toString(),
+					title: album.title,
+					description:
+						album.description ||
+						`Photography album${album.location ? ` from ${album.location}` : ''} with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`,
+					content: album.description ? `<p>${escapeXML(album.description)}</p>` : '',
+					link: `${event.url.origin}/photos/${album.slug}`,
+					guid: `${event.url.origin}/photos/${album.slug}`,
+					pubDate: album.createdAt,
+					updatedDate: album.updatedAt,
+					photoCount: album._count.photos,
+					coverPhoto: album.photos[0],
+					location: album.location,
+					date: album.date
+				}))
+		].sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime())
+
+		const now = new Date()
+		const lastBuildDate = formatRFC822Date(now)
+
+		// Build RSS XML following best practices
+		const rssXml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
+<channel>
+<title>jedmund.com</title>
+<description>Creative work, thoughts, and photography by Justin Edmund</description>
+<link>${event.url.origin}/</link>
+<atom:link href="${event.url.origin}/rss" rel="self" type="application/rss+xml"/>
+<language>en-us</language>
+<lastBuildDate>${lastBuildDate}</lastBuildDate>
+<managingEditor>noreply@jedmund.com (Justin Edmund)</managingEditor>
+<webMaster>noreply@jedmund.com (Justin Edmund)</webMaster>
+<generator>SvelteKit RSS Generator</generator>
+<docs>https://cyber.harvard.edu/rss/rss.html</docs>
+<ttl>60</ttl>
+${items
+	.map(
+		(item) => `
+<item>
+<title>${escapeXML(item.title)}</title>
+<description><![CDATA[${item.description}]]></description>
+${item.content ? `<content:encoded><![CDATA[${item.content}]]></content:encoded>` : ''}
+<link>${item.link}</link>
+<guid isPermaLink="true">${item.guid}</guid>
+<pubDate>${formatRFC822Date(new Date(item.pubDate))}</pubDate>
+${item.updatedDate ? `<atom:updated>${new Date(item.updatedDate).toISOString()}</atom:updated>` : ''}
+<category>${item.section}</category>
+<category>${item.type === 'post' ? item.postType : 'album'}</category>
+${item.type === 'post' && item.linkUrl ? `<comments>${item.linkUrl}</comments>` : ''}
+${
+	item.type === 'album' && item.coverPhoto
+		? `
+<enclosure url="${event.url.origin}${item.coverPhoto.url}" type="image/jpeg" length="0"/>
+<media:thumbnail url="${event.url.origin}${item.coverPhoto.thumbnailUrl || item.coverPhoto.url}"/>
+<media:content url="${event.url.origin}${item.coverPhoto.url}" type="image/jpeg"/>`
+		: ''
+}
+${item.location ? `<category domain="location">${escapeXML(item.location)}</category>` : ''}
+<author>noreply@jedmund.com (Justin Edmund)</author>
+</item>`
+	)
+	.join('')}
+</channel>
+</rss>`
+
+		logger.info('Combined RSS feed generated', { itemCount: items.length })
+
+		return new Response(rssXml, {
+			headers: {
+				'Content-Type': 'application/rss+xml; charset=utf-8',
+				'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',
+				'Last-Modified': lastBuildDate,
+				ETag: `"${Buffer.from(rssXml).toString('base64').slice(0, 16)}"`,
+				'X-Content-Type-Options': 'nosniff',
+				Vary: 'Accept-Encoding'
+			}
+		})
+	} catch (error) {
+		logger.error('Failed to generate combined RSS feed', error as Error)
+		return new Response('Failed to generate RSS feed', { status: 500 })
+	}
+}
diff --git a/src/routes/rss/photos/+server.ts b/src/routes/rss/photos/+server.ts
new file mode 100644
index 0000000..af13333
--- /dev/null
+++ b/src/routes/rss/photos/+server.ts
@@ -0,0 +1,172 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { logger } from '$lib/server/logger'
+
+// Helper function to escape XML special characters
+function escapeXML(str: string): string {
+	if (!str) return ''
+	return str
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;')
+}
+
+// Helper function to format RFC 822 date
+function formatRFC822Date(date: Date): string {
+	return date.toUTCString()
+}
+
+export const GET: RequestHandler = async (event) => {
+	try {
+		// Get published photography albums
+		const albums = await prisma.album.findMany({
+			where: {
+				status: 'published',
+				isPhotography: true
+			},
+			include: {
+				photos: {
+					where: {
+						status: 'published',
+						showInPhotos: true
+					},
+					orderBy: { displayOrder: 'asc' },
+					take: 1 // Get first photo for cover image
+				},
+				_count: {
+					select: {
+						photos: {
+							where: {
+								status: 'published',
+								showInPhotos: true
+							}
+						}
+					}
+				}
+			},
+			orderBy: { createdAt: 'desc' },
+			take: 50 // Limit to most recent 50 albums
+		})
+
+		// Get individual published photos not in albums
+		const standalonePhotos = await prisma.photo.findMany({
+			where: {
+				status: 'published',
+				showInPhotos: true,
+				albumId: null
+			},
+			orderBy: { publishedAt: 'desc' },
+			take: 25
+		})
+
+		// Combine albums and standalone photos
+		const items = [
+			...albums.map((album) => ({
+				type: 'album',
+				id: album.id.toString(),
+				title: album.title,
+				description:
+					album.description ||
+					`Photography album${album.location ? ` from ${album.location}` : ''} with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`,
+				content: album.description ? `<p>${escapeXML(album.description)}</p>` : '',
+				link: `${event.url.origin}/photos/${album.slug}`,
+				pubDate: album.createdAt,
+				updatedDate: album.updatedAt,
+				guid: `${event.url.origin}/photos/${album.slug}`,
+				photoCount: album._count.photos,
+				coverPhoto: album.photos[0],
+				location: album.location,
+				date: album.date
+			})),
+			...standalonePhotos.map((photo) => ({
+				type: 'photo',
+				id: photo.id.toString(),
+				title: photo.title || photo.filename,
+				description: photo.description || photo.caption || `Photo: ${photo.filename}`,
+				content: photo.description
+					? `<p>${escapeXML(photo.description)}</p>`
+					: photo.caption
+						? `<p>${escapeXML(photo.caption)}</p>`
+						: '',
+				link: `${event.url.origin}/photos/photo/${photo.slug || photo.id}`,
+				pubDate: photo.publishedAt || photo.createdAt,
+				updatedDate: photo.updatedAt,
+				guid: `${event.url.origin}/photos/photo/${photo.slug || photo.id}`,
+				url: photo.url,
+				thumbnailUrl: photo.thumbnailUrl
+			}))
+		].sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime())
+
+		const now = new Date()
+		const lastBuildDate = formatRFC822Date(now)
+
+		// Build RSS XML following best practices
+		const rssXml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
+<channel>
+<title>Photos - jedmund.com</title>
+<description>Photography and visual content from jedmund</description>
+<link>${event.url.origin}/photos</link>
+<atom:link href="${event.url.origin}/rss/photos" rel="self" type="application/rss+xml"/>
+<language>en-us</language>
+<lastBuildDate>${lastBuildDate}</lastBuildDate>
+<managingEditor>noreply@jedmund.com (Justin Edmund)</managingEditor>
+<webMaster>noreply@jedmund.com (Justin Edmund)</webMaster>
+<generator>SvelteKit RSS Generator</generator>
+<docs>https://cyber.harvard.edu/rss/rss.html</docs>
+<ttl>60</ttl>
+${items
+	.map(
+		(item) => `
+<item>
+<title>${escapeXML(item.title)}</title>
+<description><![CDATA[${item.description}]]></description>
+${item.content ? `<content:encoded><![CDATA[${item.content}]]></content:encoded>` : ''}
+<link>${item.link}</link>
+<guid isPermaLink="true">${item.guid}</guid>
+<pubDate>${formatRFC822Date(new Date(item.pubDate))}</pubDate>
+${item.updatedDate ? `<atom:updated>${new Date(item.updatedDate).toISOString()}</atom:updated>` : ''}
+<category>${item.type}</category>
+${
+	item.type === 'album' && item.coverPhoto
+		? `
+<enclosure url="${event.url.origin}${item.coverPhoto.url}" type="image/jpeg" length="0"/>
+<media:thumbnail url="${event.url.origin}${item.coverPhoto.thumbnailUrl || item.coverPhoto.url}"/>
+<media:content url="${event.url.origin}${item.coverPhoto.url}" type="image/jpeg"/>`
+		: ''
+}
+${
+	item.type === 'photo'
+		? `
+<enclosure url="${event.url.origin}${item.url}" type="image/jpeg" length="0"/>
+<media:thumbnail url="${event.url.origin}${item.thumbnailUrl || item.url}"/>
+<media:content url="${event.url.origin}${item.url}" type="image/jpeg"/>`
+		: ''
+}
+${item.location ? `<category domain="location">${escapeXML(item.location)}</category>` : ''}
+<author>noreply@jedmund.com (Justin Edmund)</author>
+</item>`
+	)
+	.join('')}
+</channel>
+</rss>`
+
+		logger.info('Photos RSS feed generated', { itemCount: items.length })
+
+		return new Response(rssXml, {
+			headers: {
+				'Content-Type': 'application/rss+xml; charset=utf-8',
+				'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',
+				'Last-Modified': lastBuildDate,
+				ETag: `"${Buffer.from(rssXml).toString('base64').slice(0, 16)}"`,
+				'X-Content-Type-Options': 'nosniff',
+				Vary: 'Accept-Encoding'
+			}
+		})
+	} catch (error) {
+		logger.error('Failed to generate Photos RSS feed', error as Error)
+		return new Response('Failed to generate RSS feed', { status: 500 })
+	}
+}
diff --git a/src/routes/rss/universe/+server.ts b/src/routes/rss/universe/+server.ts
new file mode 100644
index 0000000..15ecf42
--- /dev/null
+++ b/src/routes/rss/universe/+server.ts
@@ -0,0 +1,170 @@
+import type { RequestHandler } from './$types'
+import { prisma } from '$lib/server/database'
+import { logger } from '$lib/server/logger'
+
+// Helper function to escape XML special characters
+function escapeXML(str: string): string {
+	if (!str) return ''
+	return str
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;')
+}
+
+// Helper function to convert content to HTML for full content
+function convertContentToHTML(content: any): string {
+	if (!content || !content.blocks) return ''
+
+	return content.blocks
+		.map((block: any) => {
+			switch (block.type) {
+				case 'paragraph':
+					return `<p>${escapeXML(block.content || '')}</p>`
+				case 'heading':
+					const level = block.level || 2
+					return `<h${level}>${escapeXML(block.content || '')}</h${level}>`
+				case 'list':
+					const items = (block.content || [])
+						.map((item: any) => `<li>${escapeXML(item)}</li>`)
+						.join('')
+					return block.listType === 'ordered' ? `<ol>${items}</ol>` : `<ul>${items}</ul>`
+				default:
+					return `<p>${escapeXML(block.content || '')}</p>`
+			}
+		})
+		.join('\n')
+}
+
+// Helper function to extract text summary from content
+function extractTextSummary(content: any, maxLength: number = 300): string {
+	if (!content || !content.blocks) return ''
+
+	const text = content.blocks
+		.filter((block: any) => block.type === 'paragraph' && block.content)
+		.map((block: any) => block.content)
+		.join(' ')
+
+	return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
+}
+
+// Helper function to format RFC 822 date
+function formatRFC822Date(date: Date): string {
+	return date.toUTCString()
+}
+
+export const GET: RequestHandler = async (event) => {
+	try {
+		// Get published posts from Universe
+		const posts = await prisma.post.findMany({
+			where: {
+				status: 'published',
+				publishedAt: { not: null }
+			},
+			orderBy: { publishedAt: 'desc' },
+			take: 50 // Limit to most recent 50 posts
+		})
+
+		// Get published albums that show in universe
+		const albums = await prisma.album.findMany({
+			where: {
+				status: 'published',
+				showInUniverse: true
+			},
+			include: {
+				_count: {
+					select: { photos: true }
+				}
+			},
+			orderBy: { createdAt: 'desc' },
+			take: 25 // Limit to most recent 25 albums
+		})
+
+		// Combine and sort by date
+		const items = [
+			...posts.map((post) => ({
+				type: 'post',
+				id: post.id.toString(),
+				title:
+					post.title || `${post.postType.charAt(0).toUpperCase() + post.postType.slice(1)} Post`,
+				description: extractTextSummary(post.content) || '',
+				content: convertContentToHTML(post.content),
+				link: `${event.url.origin}/universe/${post.slug}`,
+				guid: `${event.url.origin}/universe/${post.slug}`,
+				pubDate: post.publishedAt || post.createdAt,
+				updatedDate: post.updatedAt,
+				postType: post.postType,
+				linkUrl: post.linkUrl || null
+			})),
+			...albums.map((album) => ({
+				type: 'album',
+				id: album.id.toString(),
+				title: album.title,
+				description:
+					album.description ||
+					`Photo album with ${album._count.photos} photo${album._count.photos !== 1 ? 's' : ''}`,
+				content: album.description ? `<p>${escapeXML(album.description)}</p>` : '',
+				link: `${event.url.origin}/photos/${album.slug}`,
+				guid: `${event.url.origin}/photos/${album.slug}`,
+				pubDate: album.createdAt,
+				updatedDate: album.updatedAt,
+				photoCount: album._count.photos
+			}))
+		].sort((a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime())
+
+		const now = new Date()
+		const lastBuildDate = formatRFC822Date(now)
+
+		// Build RSS XML following best practices
+		const rssXml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
+<channel>
+<title>Universe - jedmund.com</title>
+<description>Posts and photo albums from jedmund's universe</description>
+<link>${event.url.origin}/universe</link>
+<atom:link href="${event.url.origin}/rss/universe" rel="self" type="application/rss+xml"/>
+<language>en-us</language>
+<lastBuildDate>${lastBuildDate}</lastBuildDate>
+<managingEditor>noreply@jedmund.com (Justin Edmund)</managingEditor>
+<webMaster>noreply@jedmund.com (Justin Edmund)</webMaster>
+<generator>SvelteKit RSS Generator</generator>
+<docs>https://cyber.harvard.edu/rss/rss.html</docs>
+<ttl>60</ttl>
+${items
+	.map(
+		(item) => `
+<item>
+<title>${escapeXML(item.title)}</title>
+<description><![CDATA[${item.description}]]></description>
+${item.content ? `<content:encoded><![CDATA[${item.content}]]></content:encoded>` : ''}
+<link>${item.link}</link>
+<guid isPermaLink="true">${item.guid}</guid>
+<pubDate>${formatRFC822Date(new Date(item.pubDate))}</pubDate>
+${item.updatedDate ? `<atom:updated>${new Date(item.updatedDate).toISOString()}</atom:updated>` : ''}
+<category>${item.type === 'post' ? item.postType : 'album'}</category>
+${item.type === 'post' && item.linkUrl ? `<comments>${item.linkUrl}</comments>` : ''}
+<author>noreply@jedmund.com (Justin Edmund)</author>
+</item>`
+	)
+	.join('')}
+</channel>
+</rss>`
+
+		logger.info('Universe RSS feed generated', { itemCount: items.length })
+
+		return new Response(rssXml, {
+			headers: {
+				'Content-Type': 'application/rss+xml; charset=utf-8',
+				'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',
+				'Last-Modified': lastBuildDate,
+				ETag: `"${Buffer.from(rssXml).toString('base64').slice(0, 16)}"`,
+				'X-Content-Type-Options': 'nosniff',
+				Vary: 'Accept-Encoding'
+			}
+		})
+	} catch (error) {
+		logger.error('Failed to generate Universe RSS feed', error as Error)
+		return new Response('Failed to generate RSS feed', { status: 500 })
+	}
+}
diff --git a/src/routes/universe/+page.server.ts b/src/routes/universe/+page.server.ts
index 648fa20..0f75f1e 100644
--- a/src/routes/universe/+page.server.ts
+++ b/src/routes/universe/+page.server.ts
@@ -1,10 +1,23 @@
-import { getAllPosts } from '$lib/posts'
 import type { PageServerLoad } from './$types'
 
-export const load: PageServerLoad = async () => {
-	const posts = await getAllPosts()
+export const load: PageServerLoad = async ({ fetch }) => {
+	try {
+		const response = await fetch('/api/universe?limit=20')
+		if (!response.ok) {
+			throw new Error('Failed to fetch universe feed')
+		}
 
-	return {
-		posts
+		const data = await response.json()
+		return {
+			universeItems: data.items || [],
+			pagination: data.pagination || null
+		}
+	} catch (error) {
+		console.error('Error loading universe feed:', error)
+		return {
+			universeItems: [],
+			pagination: null,
+			error: 'Failed to load universe feed'
+		}
 	}
 }
diff --git a/src/routes/universe/+page.svelte b/src/routes/universe/+page.svelte
index 91d9003..4485ce6 100644
--- a/src/routes/universe/+page.svelte
+++ b/src/routes/universe/+page.svelte
@@ -1,22 +1,27 @@
 <script lang="ts">
-	import Page from '$components/Page.svelte'
-	import PostList from '$components/PostList.svelte'
+	import UniverseFeed from '$components/UniverseFeed.svelte'
 	import type { PageData } from './$types'
 
 	let { data }: { data: PageData } = $props()
 </script>
 
 <svelte:head>
-	<title>Blog - jedmund</title>
-	<meta name="description" content="Thoughts on design, development, and everything in between." />
+	<title>Universe - jedmund</title>
+	<meta name="description" content="A mixed feed of posts, thoughts, and photo albums." />
 </svelte:head>
 
-<div class="blog-container">
-	<PostList posts={data.posts} />
+<div class="universe-container">
+	{#if data.error}
+		<div class="error-message">
+			<p>{data.error}</p>
+		</div>
+	{:else}
+		<UniverseFeed items={data.universeItems || []} />
+	{/if}
 </div>
 
 <style lang="scss">
-	.blog-container {
+	.universe-container {
 		max-width: 784px;
 		margin: 0 auto;
 		padding: 0 $unit-5x;
@@ -31,4 +36,18 @@
 			padding: 0 $unit-2x;
 		}
 	}
+
+	.error-message {
+		text-align: center;
+		padding: $unit-6x $unit-3x;
+		background: rgba(239, 68, 68, 0.1);
+		border: 1px solid rgba(239, 68, 68, 0.2);
+		border-radius: $unit-2x;
+		color: #dc2626;
+
+		p {
+			margin: 0;
+			font-size: 1.125rem;
+		}
+	}
 </style>
diff --git a/src/routes/universe/[slug]/+page.server.ts b/src/routes/universe/[slug]/+page.server.ts
index 46de106..63d2f5f 100644
--- a/src/routes/universe/[slug]/+page.server.ts
+++ b/src/routes/universe/[slug]/+page.server.ts
@@ -1,15 +1,30 @@
-import { getPostBySlug } from '$lib/posts'
-import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 
-export const load: PageServerLoad = async ({ params }) => {
-	const post = await getPostBySlug(params.slug)
+export const load: PageServerLoad = async ({ params, fetch }) => {
+	try {
+		// Fetch the specific post by slug from the database
+		const response = await fetch(`/api/posts/by-slug/${params.slug}`)
 
-	if (!post) {
-		throw error(404, 'Post not found')
-	}
+		if (!response.ok) {
+			if (response.status === 404) {
+				return {
+					post: null,
+					error: 'Post not found'
+				}
+			}
+			throw new Error('Failed to fetch post')
+		}
 
-	return {
-		post
+		const post = await response.json()
+
+		return {
+			post
+		}
+	} catch (error) {
+		console.error('Error loading post:', error)
+		return {
+			post: null,
+			error: 'Failed to load post'
+		}
 	}
 }
diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte
index df38dac..098c766 100644
--- a/src/routes/universe/[slug]/+page.svelte
+++ b/src/routes/universe/[slug]/+page.svelte
@@ -1,18 +1,126 @@
 <script lang="ts">
 	import Page from '$components/Page.svelte'
-	import PostContent from '$components/PostContent.svelte'
+	import DynamicPostContent from '$components/DynamicPostContent.svelte'
+	import { getContentExcerpt } from '$lib/utils/content'
+	import { goto } from '$app/navigation'
 	import type { PageData } from './$types'
 
 	let { data }: { data: PageData } = $props()
 
-	const pageTitle = data.post.title || 'Blog post'
+	const post = $derived(data.post)
+	const error = $derived(data.error)
+	const pageTitle = $derived(post?.title || 'Post')
+	const description = $derived(
+		post?.content
+			? getContentExcerpt(post.content, 160)
+			: `${post?.postType === 'essay' ? 'Essay' : 'Post'} by jedmund`
+	)
 </script>
 
 <svelte:head>
-	<title>{pageTitle} - jedmund</title>
-	<meta name="description" content={data.post.excerpt} />
+	{#if post}
+		<title>{pageTitle} - jedmund</title>
+		<meta name="description" content={description} />
+
+		<!-- Open Graph meta tags -->
+		<meta property="og:title" content={pageTitle} />
+		<meta property="og:description" content={description} />
+		<meta property="og:type" content="article" />
+		{#if post.attachments && post.attachments.length > 0}
+			<meta property="og:image" content={post.attachments[0].url} />
+		{/if}
+
+		<!-- Article meta -->
+		<meta property="article:published_time" content={post.publishedAt} />
+		<meta property="article:author" content="jedmund" />
+	{:else}
+		<title>Post Not Found - jedmund</title>
+	{/if}
 </svelte:head>
 
-<Page>
-	<PostContent post={data.post} />
-</Page>
+{#if error || !post}
+	<Page>
+		<div class="error-container">
+			<div class="error-content">
+				<h1>Post Not Found</h1>
+				<p>{error || "The post you're looking for doesn't exist."}</p>
+				<button onclick={() => goto('/universe')} class="back-button">
+					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="back-arrow">
+						<path
+							d="M15 8H3.5M3.5 8L8 3.5M3.5 8L8 12.5"
+							stroke="currentColor"
+							stroke-width="2.25"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+					Back to Universe
+				</button>
+			</div>
+		</div>
+	</Page>
+{:else}
+	<Page>
+		<DynamicPostContent {post} />
+	</Page>
+{/if}
+
+<style lang="scss">
+	.error-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 60vh;
+		padding: $unit-6x $unit-3x;
+	}
+
+	.error-content {
+		text-align: center;
+		max-width: 500px;
+
+		h1 {
+			font-size: 2rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $red-60;
+		}
+
+		p {
+			margin: 0 0 $unit-3x;
+			color: $grey-40;
+			line-height: 1.5;
+		}
+
+		.back-button {
+			color: $red-60;
+			background-color: transparent;
+			border: 1px solid transparent;
+			font: inherit;
+			font-size: 0.875rem;
+			font-weight: 500;
+			cursor: pointer;
+			transition: all 0.15s ease;
+			display: inline-flex;
+			align-items: center;
+			gap: $unit;
+			border-radius: 24px;
+			outline: none;
+
+			&:hover:not(:disabled) {
+				.back-arrow {
+					transform: translateX(-3px);
+				}
+			}
+
+			&:focus-visible {
+				box-shadow: 0 0 0 3px rgba($red-60, 0.25);
+			}
+
+			.back-arrow {
+				flex-shrink: 0;
+				transition: transform 0.2s ease;
+				margin-left: -$unit-half;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
new file mode 100644
index 0000000..b3ba711
--- /dev/null
+++ b/src/routes/work/[slug]/+page.svelte
@@ -0,0 +1,159 @@
+<script lang="ts">
+	import Page from '$components/Page.svelte'
+	import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
+	import ProjectContent from '$lib/components/ProjectContent.svelte'
+	import type { PageData } from './$types'
+	import type { Project } from '$lib/types/project'
+
+	let { data } = $props<{ data: PageData }>()
+
+	const project = $derived(data.project as Project | null)
+	const error = $derived(data.error as string | undefined)
+</script>
+
+{#if error}
+	<Page>
+		<div slot="header" class="error-header">
+			<h1>Error</h1>
+		</div>
+		<div class="error-content">
+			<p>{error}</p>
+			<a href="/" class="back-link">← Back to home</a>
+		</div>
+	</Page>
+{:else if !project}
+	<Page>
+		<div class="loading">Loading project...</div>
+	</Page>
+{:else if project.status === 'list-only'}
+	<Page>
+		<div slot="header" class="error-header">
+			<h1>Project Not Available</h1>
+		</div>
+		<div class="error-content">
+			<p>This project is not yet available for viewing. Please check back later.</p>
+			<a href="/" class="back-link">← Back to projects</a>
+		</div>
+	</Page>
+{:else if project.status === 'password-protected'}
+	<Page>
+		<ProjectPasswordProtection
+			projectSlug={project.slug}
+			correctPassword={project.password || ''}
+			projectType="work"
+		>
+			{#snippet children()}
+				<div slot="header" class="project-header">
+					{#if project.logoUrl}
+						<div
+							class="project-logo"
+							style="background-color: {project.backgroundColor || '#f5f5f5'}"
+						>
+							<img src={project.logoUrl} alt="{project.title} logo" />
+						</div>
+					{/if}
+					<h1 class="project-title">{project.title}</h1>
+					{#if project.subtitle}
+						<p class="project-subtitle">{project.subtitle}</p>
+					{/if}
+				</div>
+				<ProjectContent {project} />
+			{/snippet}
+		</ProjectPasswordProtection>
+	</Page>
+{:else}
+	<Page>
+		<div slot="header" class="project-header">
+			{#if project.logoUrl}
+				<div class="project-logo" style="background-color: {project.backgroundColor || '#f5f5f5'}">
+					<img src={project.logoUrl} alt="{project.title} logo" />
+				</div>
+			{/if}
+			<h1 class="project-title">{project.title}</h1>
+			{#if project.subtitle}
+				<p class="project-subtitle">{project.subtitle}</p>
+			{/if}
+		</div>
+		<ProjectContent {project} />
+	</Page>
+{/if}
+
+<style lang="scss">
+	/* Error and Loading States */
+	.error-header h1 {
+		color: $red-60;
+		font-size: 2rem;
+		margin: 0;
+	}
+
+	.error-content {
+		text-align: center;
+
+		p {
+			color: $grey-40;
+			margin-bottom: $unit-2x;
+		}
+	}
+
+	.loading {
+		text-align: center;
+		color: $grey-40;
+		padding: $unit-4x;
+	}
+
+	.back-link {
+		color: $grey-40;
+		text-decoration: none;
+		font-size: 0.925rem;
+		transition: color 0.2s ease;
+
+		&:hover {
+			color: $grey-20;
+		}
+	}
+
+	/* Project Header */
+	.project-header {
+		text-align: center;
+		width: 100%;
+	}
+
+	.project-logo {
+		width: 100px;
+		height: 100px;
+		margin: 0 auto $unit-2x;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: $unit-2x;
+		padding: $unit-2x;
+		box-sizing: border-box;
+
+		img {
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+		}
+	}
+
+	.project-title {
+		font-size: 2.5rem;
+		font-weight: 700;
+		margin: 0 0 $unit;
+		color: $grey-10;
+
+		@include breakpoint('phone') {
+			font-size: 2rem;
+		}
+	}
+
+	.project-subtitle {
+		font-size: 1.25rem;
+		color: $grey-40;
+		margin: 0;
+
+		@include breakpoint('phone') {
+			font-size: 1.125rem;
+		}
+	}
+</style>
diff --git a/src/routes/work/[slug]/+page.ts b/src/routes/work/[slug]/+page.ts
new file mode 100644
index 0000000..ad65f8f
--- /dev/null
+++ b/src/routes/work/[slug]/+page.ts
@@ -0,0 +1,34 @@
+import type { PageLoad } from './$types'
+import type { Project } from '$lib/types/project'
+
+export const load: PageLoad = async ({ params, fetch }) => {
+	try {
+		// Find project by slug - we'll fetch all published, list-only, and password-protected projects
+		const response = await fetch(`/api/projects?includeListOnly=true&includePasswordProtected=true`)
+		if (!response.ok) {
+			throw new Error('Failed to fetch projects')
+		}
+
+		const data = await response.json()
+		const project = data.projects.find((p: Project) => p.slug === params.slug)
+
+		if (!project) {
+			throw new Error('Project not found')
+		}
+
+		// Handle different project statuses
+		if (project.status === 'draft') {
+			throw new Error('Project not found')
+		}
+
+		return {
+			project
+		}
+	} catch (error) {
+		console.error('Error loading project:', error)
+		return {
+			project: null,
+			error: error instanceof Error ? error.message : 'Failed to load project'
+		}
+	}
+}
diff --git a/src/stories/Button.stories.svelte b/src/stories/Button.stories.svelte
new file mode 100644
index 0000000..672eb36
--- /dev/null
+++ b/src/stories/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf'
+	import Button from './Button.svelte'
+	import { fn } from 'storybook/test'
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Button',
+		component: Button,
+		tags: ['autodocs'],
+		argTypes: {
+			backgroundColor: { control: 'color' },
+			size: {
+				control: { type: 'select' },
+				options: ['small', 'medium', 'large']
+			}
+		},
+		args: {
+			onclick: fn()
+		}
+	})
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/src/stories/Button.svelte b/src/stories/Button.svelte
new file mode 100644
index 0000000..5ab6049
--- /dev/null
+++ b/src/stories/Button.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import './button.css'
+
+	interface Props {
+		/** Is this the principal call to action on the page? */
+		primary?: boolean
+		/** What background color to use */
+		backgroundColor?: string
+		/** How large should the button be? */
+		size?: 'small' | 'medium' | 'large'
+		/** Button contents */
+		label: string
+		/** The onclick event handler */
+		onclick?: () => void
+	}
+
+	const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props()
+
+	let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary')
+	let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '')
+</script>
+
+<button
+	type="button"
+	class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+	{style}
+	{...props}
+>
+	{label}
+</button>
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
new file mode 100644
index 0000000..1830134
--- /dev/null
+++ b/src/stories/Configure.mdx
@@ -0,0 +1,369 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+import Github from './assets/github.svg'
+import Discord from './assets/discord.svg'
+import Youtube from './assets/youtube.svg'
+import Tutorials from './assets/tutorials.svg'
+import Styling from './assets/styling.png'
+import Context from './assets/context.png'
+import Assets from './assets/assets.png'
+import Docs from './assets/docs.png'
+import Share from './assets/share.png'
+import FigmaPlugin from './assets/figma-plugin.png'
+import Testing from './assets/testing.png'
+import Accessibility from './assets/accessibility.png'
+import Theming from './assets/theming.png'
+import AddonLibrary from './assets/addon-library.png'
+
+export const RightArrow = () => (
+	<svg
+		viewBox="0 0 14 14"
+		width="8px"
+		height="14px"
+		style={{
+			marginLeft: '4px',
+			display: 'inline-block',
+			shapeRendering: 'inherit',
+			verticalAlign: 'middle',
+			fill: 'currentColor',
+			'path fill': 'currentColor'
+		}}
+	>
+		<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+	</svg>
+)
+
+<Meta title="Configure your project" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Configure your project
+
+    Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
+  </div>
+  <div className="sb-section">
+    <div className="sb-section-item">
+      <img
+        src={Styling}
+        alt="A wall of logos representing different styling technologies"
+      />
+      <h4 className="sb-section-item-heading">Add styling and CSS</h4>
+      <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
+      <a
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=svelte"
+        target="_blank"
+      >Learn more<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img
+        src={Context}
+        alt="An abstraction representing the composition of data for a component"
+      />
+      <h4 className="sb-section-item-heading">Provide context and mocking</h4>
+      <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
+      <a
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=svelte#context-for-mocking"
+        target="_blank"
+      >Learn more<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img src={Assets} alt="A representation of typography and image assets" />
+      <div>
+        <h4 className="sb-section-item-heading">Load assets and resources</h4>
+        <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
+        `staticDirs` configuration option to specify folders to load when
+        starting Storybook.</p>
+        <a
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=svelte"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Do more with Storybook
+
+    Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
+  </div>
+
+  <div className="sb-section">
+    <div className="sb-features-grid">
+      <div className="sb-grid-item">
+        <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
+        <h4 className="sb-section-item-heading">Autodocs</h4>
+        <p className="sb-section-item-paragraph">Auto-generate living,
+          interactive reference documentation from your components and stories.</p>
+        <a
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=svelte"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" />
+        <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
+        <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
+        <a
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=svelte#publish-storybook-with-chromatic"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" />
+        <h4 className="sb-section-item-heading">Figma Plugin</h4>
+        <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
+          implementation in one place.</p>
+        <a
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=svelte#embed-storybook-in-figma-with-the-plugin"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Testing} alt="Screenshot of tests passing and failing" />
+        <h4 className="sb-section-item-heading">Testing</h4>
+        <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
+          complex.</p>
+        <a
+          href="https://storybook.js.org/docs/writing-tests/?renderer=svelte"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
+        <h4 className="sb-section-item-heading">Accessibility</h4>
+        <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
+        <a
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=svelte"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+      <div className="sb-grid-item">
+        <img src={Theming} alt="Screenshot of Storybook in light and dark mode" />
+        <h4 className="sb-section-item-heading">Theming</h4>
+        <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
+        <a
+          href="https://storybook.js.org/docs/configure/theming/?renderer=svelte"
+          target="_blank"
+        >Learn more<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+<div className='sb-addon'>
+  <div className='sb-addon-text'>
+    <h4>Addons</h4>
+    <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
+    <a
+        href="https://storybook.js.org/addons/"
+        target="_blank"
+      >Discover all addons<RightArrow /></a>
+  </div>
+  <div className='sb-addon-img'>
+    <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." />
+  </div>
+</div>
+
+<div className="sb-section sb-socials">
+    <div className="sb-section-item">
+      <img src={Github} alt="Github logo" className="sb-explore-image"/>
+      Join our contributors building the future of UI development.
+
+      <a
+        href="https://github.com/storybookjs/storybook"
+        target="_blank"
+      >Star on GitHub<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img src={Discord} alt="Discord logo" className="sb-explore-image"/>
+      <div>
+        Get support and chat with frontend developers.
+
+        <a
+          href="https://discord.gg/storybook"
+          target="_blank"
+        >Join Discord server<RightArrow /></a>
+      </div>
+    </div>
+    <div className="sb-section-item">
+      <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/>
+      <div>
+        Watch tutorials, feature previews and interviews.
+
+        <a
+          href="https://www.youtube.com/@chromaticui"
+          target="_blank"
+        >Watch on YouTube<RightArrow /></a>
+      </div>
+    </div>
+    <div className="sb-section-item">
+      <img src={Tutorials} alt="A book" className="sb-explore-image"/>
+      <p>Follow guided walkthroughs on for key workflows.</p>
+
+      <a
+          href="https://storybook.js.org/tutorials/"
+          target="_blank"
+        >Discover tutorials<RightArrow /></a>
+    </div>
+
+</div>
+
+<style>
+	{`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+
+  .sb-section a:not(h1 a, h2 a, h3 a) {
+    font-size: 14px;
+  }
+
+  .sb-section-item, .sb-grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sb-section-item-heading {
+    padding-top: 20px !important;
+    padding-bottom: 5px !important;
+    margin: 0 !important;
+  }
+  .sb-section-item-paragraph {
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  .sb-chevron {
+    margin-left: 5px;
+  }
+
+  .sb-features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 32px 20px;
+  }
+
+  .sb-socials {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .sb-socials p {
+    margin-bottom: 10px;
+  }
+
+  .sb-explore-image {
+    max-height: 32px;
+    align-self: flex-start;
+  }
+
+  .sb-addon {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: #EEF3F8;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    background: #EEF3F8;
+    height: 180px;
+    margin-bottom: 48px;
+    overflow: hidden;
+  }
+
+  .sb-addon-text {
+    padding-left: 48px;
+    max-width: 240px;
+  }
+
+  .sb-addon-text h4 {
+    padding-top: 0px;
+  }
+
+  .sb-addon-img {
+    position: absolute;
+    left: 345px;
+    top: 0;
+    height: 100%;
+    width: 200%;
+    overflow: hidden;
+  }
+
+  .sb-addon-img img {
+    width: 650px;
+    transform: rotate(-15deg);
+    margin-left: 40px;
+    margin-top: -72px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
+    backface-visibility: hidden;
+  }
+
+  @media screen and (max-width: 800px) {
+    .sb-addon-img {
+      left: 300px;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .sb-section {
+      flex-direction: column;
+    }
+
+    .sb-features-grid {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sb-socials {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .sb-addon {
+      height: 280px;
+      align-items: flex-start;
+      padding-top: 32px;
+      overflow: hidden;
+    }
+
+    .sb-addon-text {
+      padding-left: 24px;
+    }
+
+    .sb-addon-img {
+      right: 0;
+      left: 0;
+      top: 130px;
+      bottom: 0;
+      overflow: hidden;
+      height: auto;
+      width: 124%;
+    }
+
+    .sb-addon-img img {
+      width: 1200px;
+      transform: rotate(-12deg);
+      margin-left: 0;
+      margin-top: 48px;
+      margin-bottom: -40px;
+      margin-left: -24px;
+    }
+  }
+  `}
+</style>
diff --git a/src/stories/Header.stories.svelte b/src/stories/Header.stories.svelte
new file mode 100644
index 0000000..ba4368b
--- /dev/null
+++ b/src/stories/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf'
+	import Header from './Header.svelte'
+	import { fn } from 'storybook/test'
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Header',
+		component: Header,
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+		tags: ['autodocs'],
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {
+			onLogin: fn(),
+			onLogout: fn(),
+			onCreateAccount: fn()
+		}
+	})
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/src/stories/Header.svelte b/src/stories/Header.svelte
new file mode 100644
index 0000000..0939e7a
--- /dev/null
+++ b/src/stories/Header.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import './header.css'
+	import Button from './Button.svelte'
+
+	interface Props {
+		user?: { name: string }
+		onLogin?: () => void
+		onLogout?: () => void
+		onCreateAccount?: () => void
+	}
+
+	const { user, onLogin, onLogout, onCreateAccount }: Props = $props()
+</script>
+
+<header>
+	<div class="storybook-header">
+		<div>
+			<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+						fill="#FFF"
+					/>
+					<path
+						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+						fill="#555AB9"
+					/>
+					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+				</g>
+			</svg>
+			<h1>Acme</h1>
+		</div>
+		<div>
+			{#if user}
+				<span class="welcome">
+					Welcome, <b>{user.name}</b>!
+				</span>
+				<Button buttonSize="small" onclick={onLogout} label="Log out" />
+			{:else}
+				<Button buttonSize="small" onclick={onLogin} label="Log in" />
+				<Button primary buttonSize="small" onclick={onCreateAccount} label="Sign up" />
+			{/if}
+		</div>
+	</div>
+</header>
diff --git a/src/stories/Page.stories.svelte b/src/stories/Page.stories.svelte
new file mode 100644
index 0000000..dc86c5a
--- /dev/null
+++ b/src/stories/Page.stories.svelte
@@ -0,0 +1,32 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf'
+	import { expect, userEvent, waitFor, within } from 'storybook/test'
+	import Page from './Page.svelte'
+	import { fn } from 'storybook/test'
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Page',
+		component: Page,
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		}
+	})
+</script>
+
+<Story
+	name="Logged In"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement)
+		const loginButton = canvas.getByRole('button', { name: /Log in/i })
+		await expect(loginButton).toBeInTheDocument()
+		await userEvent.click(loginButton)
+		await waitFor(() => expect(loginButton).not.toBeInTheDocument())
+
+		const logoutButton = canvas.getByRole('button', { name: /Log out/i })
+		await expect(logoutButton).toBeInTheDocument()
+	}}
+/>
+
+<Story name="Logged Out" />
diff --git a/src/stories/Page.svelte b/src/stories/Page.svelte
new file mode 100644
index 0000000..55b3e5a
--- /dev/null
+++ b/src/stories/Page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import './page.css'
+	import Header from './Header.svelte'
+
+	let user = $state<{ name: string }>()
+</script>
+
+<article>
+	<Header
+		{user}
+		onLogin={() => (user = { name: 'Jane Doe' })}
+		onLogout={() => (user = undefined)}
+		onCreateAccount={() => (user = { name: 'Jane Doe' })}
+	/>
+
+	<section class="storybook-page">
+		<h2>Pages in Storybook</h2>
+		<p>
+			We recommend building UIs with a
+			<a
+				href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<strong>component-driven</strong>
+			</a>
+			process starting with atomic components and ending with pages.
+		</p>
+		<p>
+			Render pages with mock data. This makes it easy to build and review page states without
+			needing to navigate to them in your app. Here are some handy patterns for managing page data
+			in Storybook:
+		</p>
+		<ul>
+			<li>
+				Use a higher-level connected component. Storybook helps you compose such data from the
+				"args" of child component stories
+			</li>
+			<li>
+				Assemble data in the page component from your services. You can mock these services out
+				using Storybook.
+			</li>
+		</ul>
+		<p>
+			Get a guided tutorial on component-driven development at
+			<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+				Storybook tutorials
+			</a>
+			. Read more in the
+			<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+			.
+		</p>
+		<div class="tip-wrapper">
+			<span class="tip">Tip</span>
+			Adjust the width of the canvas with the
+			<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+						id="a"
+						fill="#999"
+					/>
+				</g>
+			</svg>
+			Viewports addon in the toolbar
+		</div>
+	</section>
+</article>
diff --git a/src/stories/admin/Button.stories.js b/src/stories/admin/Button.stories.js
new file mode 100644
index 0000000..83b0115
--- /dev/null
+++ b/src/stories/admin/Button.stories.js
@@ -0,0 +1,128 @@
+import Button from '$lib/components/admin/Button.svelte'
+import ButtonShowcase from './ButtonShowcase.svelte'
+
+export default {
+	title: 'Admin/Button',
+	component: Button,
+	tags: ['autodocs'],
+	argTypes: {
+		variant: {
+			control: { type: 'select' },
+			options: ['primary', 'secondary', 'danger', 'ghost', 'text', 'overlay']
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large', 'icon']
+		},
+		iconPosition: {
+			control: { type: 'select' },
+			options: ['left', 'right']
+		},
+		iconOnly: {
+			control: 'boolean'
+		},
+		pill: {
+			control: 'boolean'
+		},
+		fullWidth: {
+			control: 'boolean'
+		},
+		loading: {
+			control: 'boolean'
+		},
+		active: {
+			control: 'boolean'
+		},
+		disabled: {
+			control: 'boolean'
+		},
+		onclick: { action: 'clicked' }
+	}
+}
+
+// Interactive Playground (this will be the default story for the controls)
+export const Playground = {
+	args: {
+		variant: 'primary',
+		size: 'medium',
+		pill: true,
+		iconOnly: false,
+		fullWidth: false,
+		loading: false,
+		active: false,
+		disabled: false
+	}
+}
+
+// Primary story
+export const Primary = {
+	args: {
+		variant: 'primary'
+	}
+}
+
+// Secondary story
+export const Secondary = {
+	args: {
+		variant: 'secondary'
+	}
+}
+
+// Danger story
+export const Danger = {
+	args: {
+		variant: 'danger'
+	}
+}
+
+// Ghost story
+export const Ghost = {
+	args: {
+		variant: 'ghost'
+	}
+}
+
+// Text story
+export const Text = {
+	args: {
+		variant: 'text'
+	}
+}
+
+// Overlay story
+export const Overlay = {
+	args: {
+		variant: 'overlay'
+	}
+}
+
+// Loading State
+export const Loading = {
+	args: {
+		variant: 'primary',
+		loading: true
+	}
+}
+
+// Disabled State
+export const Disabled = {
+	args: {
+		variant: 'primary',
+		disabled: true
+	}
+}
+
+// Full Width
+export const FullWidth = {
+	args: {
+		variant: 'primary',
+		fullWidth: true
+	}
+}
+
+// All variants showcase
+export const AllVariants = {
+	render: () => ({
+		Component: ButtonShowcase
+	})
+}
diff --git a/src/stories/admin/ButtonShowcase.svelte b/src/stories/admin/ButtonShowcase.svelte
new file mode 100644
index 0000000..8317ec2
--- /dev/null
+++ b/src/stories/admin/ButtonShowcase.svelte
@@ -0,0 +1,164 @@
+<script>
+	import Button from '$lib/components/admin/Button.svelte'
+</script>
+
+<div class="button-showcase">
+	<h3>Button Variants</h3>
+
+	<div class="section">
+		<h4>Basic Variants</h4>
+		<div class="button-grid">
+			<Button variant="primary">Primary</Button>
+			<Button variant="secondary">Secondary</Button>
+			<Button variant="danger">Danger</Button>
+			<Button variant="ghost">Ghost</Button>
+			<Button variant="text">Text</Button>
+			<Button variant="overlay">Overlay</Button>
+		</div>
+	</div>
+
+	<div class="section">
+		<h4>Sizes</h4>
+		<div class="button-grid">
+			<Button variant="primary" buttonSize="small">Small</Button>
+			<Button variant="primary" buttonSize="medium">Medium</Button>
+			<Button variant="primary" buttonSize="large">Large</Button>
+		</div>
+	</div>
+
+	<div class="section">
+		<h4>With Icons</h4>
+		<div class="button-grid">
+			<Button variant="primary" iconPosition="left">
+				<svg
+					slot="icon"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M12 5V19M5 12H19"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				Add Item
+			</Button>
+
+			<Button variant="secondary" iconPosition="right">
+				Download
+				<svg
+					slot="icon"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M21 15V19A2 2 0 0119 21H5A2 2 0 013 19V15"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<polyline
+						points="7,10 12,15 17,10"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<line
+						x1="12"
+						y1="15"
+						x2="12"
+						y2="3"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</Button>
+
+			<Button variant="ghost" iconOnly={true}>
+				<svg
+					slot="icon"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M6 6L18 18M6 18L18 6"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</Button>
+		</div>
+	</div>
+
+	<div class="section">
+		<h4>States</h4>
+		<div class="button-grid">
+			<Button variant="primary" loading={true}>Loading...</Button>
+			<Button variant="secondary" disabled={true}>Disabled</Button>
+			<Button variant="ghost" active={true}>Active</Button>
+		</div>
+	</div>
+
+	<div class="section">
+		<h4>Square Corners</h4>
+		<div class="button-grid">
+			<Button variant="primary" pill={false}>Square Primary</Button>
+			<Button variant="secondary" pill={false}>Square Secondary</Button>
+		</div>
+	</div>
+
+	<div class="section">
+		<h4>Full Width</h4>
+		<Button variant="primary" fullWidth={true}>Full Width Button</Button>
+	</div>
+</div>
+
+<style lang="scss">
+	.button-showcase {
+		max-width: 600px;
+		padding: 20px;
+	}
+
+	h3 {
+		margin: 0 0 24px 0;
+		font-size: 18px;
+		font-weight: 600;
+		color: #333;
+	}
+
+	.section {
+		margin-bottom: 32px;
+
+		h4 {
+			margin: 0 0 16px 0;
+			font-size: 14px;
+			font-weight: 500;
+			color: #666;
+			text-transform: uppercase;
+			letter-spacing: 0.5px;
+		}
+	}
+
+	.button-grid {
+		display: flex;
+		gap: 12px;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>
diff --git a/src/stories/admin/ImageUploader.stories.js b/src/stories/admin/ImageUploader.stories.js
new file mode 100644
index 0000000..88a5721
--- /dev/null
+++ b/src/stories/admin/ImageUploader.stories.js
@@ -0,0 +1,169 @@
+import ImageUploader from '$lib/components/admin/ImageUploader.svelte'
+
+// Mock Media object for testing
+const mockMedia = {
+	id: 1,
+	filename: 'sample-image.jpg',
+	originalName: 'sample-image.jpg',
+	mimeType: 'image/jpeg',
+	size: 1024000,
+	width: 1920,
+	height: 1080,
+	url: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=Sample+Image',
+	thumbnailUrl: 'https://via.placeholder.com/400x300/0066cc/ffffff?text=Sample+Image',
+	altText: 'A beautiful sample image',
+	description: 'This is a sample image for testing purposes',
+	createdAt: new Date(),
+	updatedAt: new Date()
+}
+
+export default {
+	title: 'Admin/Form Components/ImageUploader',
+	component: ImageUploader,
+	tags: ['autodocs'],
+	argTypes: {
+		aspectRatio: {
+			control: { type: 'select' },
+			options: ['', '1:1', '16:9', '4:3', '3:2']
+		},
+		required: {
+			control: 'boolean'
+		},
+		allowAltText: {
+			control: 'boolean'
+		},
+		showBrowseLibrary: {
+			control: 'boolean'
+		},
+		maxFileSize: {
+			control: 'number'
+		},
+		label: {
+			control: 'text'
+		},
+		placeholder: {
+			control: 'text'
+		},
+		helpText: {
+			control: 'text'
+		},
+		error: {
+			control: 'text'
+		}
+	}
+}
+
+// Empty uploader
+export const Empty = {
+	args: {
+		label: 'Featured Image',
+		placeholder: 'Drag and drop an image here, or click to browse',
+		allowAltText: true,
+		required: false,
+		maxFileSize: 10
+	}
+}
+
+// With uploaded image
+export const WithImage = {
+	args: {
+		label: 'Project Logo',
+		value: mockMedia,
+		allowAltText: true,
+		aspectRatio: '1:1'
+	}
+}
+
+// Square aspect ratio
+export const SquareAspectRatio = {
+	args: {
+		label: 'Square Logo',
+		aspectRatio: '1:1',
+		placeholder: 'Upload a square logo',
+		allowAltText: true,
+		required: true
+	}
+}
+
+// Wide aspect ratio
+export const WideAspectRatio = {
+	args: {
+		label: 'Hero Banner',
+		aspectRatio: '16:9',
+		placeholder: 'Upload a banner image',
+		allowAltText: true,
+		helpText: 'Recommended size: 1920x1080 pixels'
+	}
+}
+
+// Required field
+export const Required = {
+	args: {
+		label: 'Required Image',
+		required: true,
+		allowAltText: true,
+		placeholder: 'This field is required'
+	}
+}
+
+// With error
+export const WithError = {
+	args: {
+		label: 'Image with Error',
+		error: 'Please select a valid image file',
+		allowAltText: true
+	}
+}
+
+// With help text
+export const WithHelpText = {
+	args: {
+		label: 'Profile Picture',
+		helpText: 'Upload a clear photo of yourself. This will be displayed on your profile.',
+		allowAltText: true,
+		aspectRatio: '1:1',
+		maxFileSize: 5
+	}
+}
+
+// Without alt text
+export const WithoutAltText = {
+	args: {
+		label: 'Decorative Image',
+		allowAltText: false,
+		placeholder: 'Upload a decorative image',
+		helpText: 'This image is purely decorative and does not need alt text.'
+	}
+}
+
+// With browse library option
+export const WithBrowseLibrary = {
+	args: {
+		label: 'Featured Image',
+		allowAltText: true,
+		showBrowseLibrary: true,
+		placeholder: 'Upload a new image or browse existing ones'
+	}
+}
+
+// Small file size limit
+export const SmallFileLimit = {
+	args: {
+		label: 'Small Image',
+		maxFileSize: 1,
+		allowAltText: true,
+		helpText: 'Maximum file size: 1MB'
+	}
+}
+
+// Interactive playground
+export const Playground = {
+	args: {
+		label: 'Image Upload',
+		placeholder: 'Drag and drop an image here',
+		allowAltText: true,
+		required: false,
+		maxFileSize: 10,
+		showBrowseLibrary: false
+	}
+}
diff --git a/src/stories/admin/Input.stories.js b/src/stories/admin/Input.stories.js
new file mode 100644
index 0000000..237b0cb
--- /dev/null
+++ b/src/stories/admin/Input.stories.js
@@ -0,0 +1,286 @@
+import Input from '$lib/components/admin/Input.svelte'
+
+export default {
+	title: 'Admin/Input',
+	component: Input,
+	tags: ['autodocs'],
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			options: [
+				'text',
+				'email',
+				'password',
+				'url',
+				'search',
+				'number',
+				'tel',
+				'date',
+				'time',
+				'color',
+				'textarea'
+			]
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large']
+		},
+		fullWidth: {
+			control: 'boolean'
+		},
+		required: {
+			control: 'boolean'
+		},
+		disabled: {
+			control: 'boolean'
+		},
+		readonly: {
+			control: 'boolean'
+		},
+		prefixIcon: {
+			control: 'boolean'
+		},
+		suffixIcon: {
+			control: 'boolean'
+		},
+		showCharCount: {
+			control: 'boolean'
+		},
+		label: {
+			control: 'text'
+		},
+		placeholder: {
+			control: 'text'
+		},
+		helpText: {
+			control: 'text'
+		},
+		error: {
+			control: 'text'
+		},
+		maxLength: {
+			control: 'number'
+		}
+	}
+}
+
+// Interactive Playground
+export const Playground = {
+	args: {
+		type: 'text',
+		label: 'Your Name',
+		placeholder: 'Enter your name',
+		size: 'medium',
+		fullWidth: true,
+		required: false,
+		disabled: false,
+		readonly: false
+	}
+}
+
+// Basic text input
+export const Basic = {
+	args: {
+		type: 'text',
+		label: 'Basic Input',
+		placeholder: 'Type something...'
+	}
+}
+
+// Email input
+export const Email = {
+	args: {
+		type: 'email',
+		label: 'Email Address',
+		placeholder: 'you@example.com',
+		required: true
+	}
+}
+
+// Password input
+export const Password = {
+	args: {
+		type: 'password',
+		label: 'Password',
+		placeholder: 'Enter your password',
+		required: true
+	}
+}
+
+// Search input
+export const Search = {
+	args: {
+		type: 'search',
+		label: 'Search',
+		placeholder: 'Search for something...'
+	}
+}
+
+// Number input
+export const Number = {
+	args: {
+		type: 'number',
+		label: 'Age',
+		placeholder: '25',
+		min: 0,
+		max: 120
+	}
+}
+
+// Textarea
+export const Textarea = {
+	args: {
+		type: 'textarea',
+		label: 'Description',
+		placeholder: 'Tell us about yourself...',
+		rows: 4
+	}
+}
+
+// Auto-resizing textarea
+export const AutoResizeTextarea = {
+	args: {
+		type: 'textarea',
+		label: 'Auto-resize Textarea',
+		placeholder: 'This textarea will grow as you type...',
+		autoResize: true,
+		rows: 2
+	}
+}
+
+// With help text
+export const WithHelpText = {
+	args: {
+		type: 'email',
+		label: 'Email',
+		placeholder: 'you@example.com',
+		helpText: 'We will never share your email with anyone else.'
+	}
+}
+
+// With error
+export const WithError = {
+	args: {
+		type: 'email',
+		label: 'Email',
+		value: 'invalid-email',
+		error: 'Please enter a valid email address.',
+		required: true
+	}
+}
+
+// Character count
+export const CharacterCount = {
+	args: {
+		type: 'textarea',
+		label: 'Bio',
+		placeholder: 'Tell us about yourself...',
+		maxLength: 150,
+		showCharCount: true,
+		rows: 3
+	}
+}
+
+// Different sizes
+export const Sizes = {
+	render: () => ({
+		template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+        <Input type="text" label="Small Size" placeholder="Small input" size="small" />
+        <Input type="text" label="Medium Size" placeholder="Medium input" size="medium" />
+        <Input type="text" label="Large Size" placeholder="Large input" size="large" />
+      </div>
+    `,
+		components: { Input }
+	})
+}
+
+// Disabled state
+export const Disabled = {
+	args: {
+		type: 'text',
+		label: 'Disabled Input',
+		value: 'This input is disabled',
+		disabled: true
+	}
+}
+
+// Readonly state
+export const Readonly = {
+	args: {
+		type: 'text',
+		label: 'Readonly Input',
+		value: 'This input is readonly',
+		readonly: true
+	}
+}
+
+// With prefix icon
+export const WithPrefixIcon = {
+	args: {
+		type: 'email',
+		label: 'Email with Icon',
+		placeholder: 'you@example.com',
+		prefixIcon: true
+	},
+	render: (args) => ({
+		Component: Input,
+		props: args,
+		slots: {
+			prefix: () => `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      `
+		}
+	})
+}
+
+// With suffix icon
+export const WithSuffixIcon = {
+	args: {
+		type: 'search',
+		label: 'Search with Icon',
+		placeholder: 'Search...',
+		suffixIcon: true
+	},
+	render: (args) => ({
+		Component: Input,
+		props: args,
+		slots: {
+			suffix: () => `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
+          <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      `
+		}
+	})
+}
+
+// Color input
+export const ColorInput = {
+	args: {
+		type: 'color',
+		label: 'Pick a Color',
+		value: '#ff6b6b'
+	}
+}
+
+// Date input
+export const DateInput = {
+	args: {
+		type: 'date',
+		label: 'Select Date',
+		required: true
+	}
+}
+
+// Time input
+export const TimeInput = {
+	args: {
+		type: 'time',
+		label: 'Select Time'
+	}
+}
diff --git a/src/stories/admin/MediaInput.stories.js b/src/stories/admin/MediaInput.stories.js
new file mode 100644
index 0000000..90e0962
--- /dev/null
+++ b/src/stories/admin/MediaInput.stories.js
@@ -0,0 +1,207 @@
+import MediaInput from '$lib/components/admin/MediaInput.svelte'
+
+// Mock Media objects for testing
+const mockMedia = {
+	id: '1',
+	filename: 'example-image.jpg',
+	originalName: 'example-image.jpg',
+	mimeType: 'image/jpeg',
+	size: 1024000,
+	width: 1920,
+	height: 1080,
+	url: 'https://via.placeholder.com/300x200/0066cc/ffffff?text=Sample+Image',
+	thumbnailUrl: 'https://via.placeholder.com/300x200/0066cc/ffffff?text=Sample+Image',
+	createdAt: new Date(),
+	updatedAt: new Date()
+}
+
+const mockMediaList = [
+	mockMedia,
+	{
+		id: '2',
+		filename: 'another-image.png',
+		originalName: 'another-image.png',
+		mimeType: 'image/png',
+		size: 512000,
+		width: 800,
+		height: 600,
+		url: 'https://via.placeholder.com/300x200/cc6600/ffffff?text=Image+2',
+		thumbnailUrl: 'https://via.placeholder.com/300x200/cc6600/ffffff?text=Image+2',
+		createdAt: new Date(),
+		updatedAt: new Date()
+	},
+	{
+		id: '3',
+		filename: 'third-image.jpg',
+		originalName: 'third-image.jpg',
+		mimeType: 'image/jpeg',
+		size: 768000,
+		width: 1200,
+		height: 800,
+		url: 'https://via.placeholder.com/300x200/009966/ffffff?text=Image+3',
+		thumbnailUrl: 'https://via.placeholder.com/300x200/009966/ffffff?text=Image+3',
+		createdAt: new Date(),
+		updatedAt: new Date()
+	}
+]
+
+export default {
+	title: 'Admin/Form Components/MediaInput',
+	component: MediaInput,
+	tags: ['autodocs'],
+	argTypes: {
+		mode: {
+			control: { type: 'select' },
+			options: ['single', 'multiple']
+		},
+		fileType: {
+			control: { type: 'select' },
+			options: ['image', 'video', 'all']
+		},
+		required: {
+			control: 'boolean'
+		},
+		label: {
+			control: 'text'
+		},
+		placeholder: {
+			control: 'text'
+		},
+		error: {
+			control: 'text'
+		}
+	}
+}
+
+// Single media input (empty)
+export const SingleEmpty = {
+	args: {
+		label: 'Featured Image',
+		mode: 'single',
+		fileType: 'image',
+		placeholder: 'No image selected',
+		value: null
+	}
+}
+
+// Single media input (with value)
+export const SingleWithValue = {
+	args: {
+		label: 'Featured Image',
+		mode: 'single',
+		fileType: 'image',
+		value: mockMedia
+	}
+}
+
+// Multiple media input (empty)
+export const MultipleEmpty = {
+	args: {
+		label: 'Gallery Images',
+		mode: 'multiple',
+		fileType: 'image',
+		placeholder: 'No images selected',
+		value: []
+	}
+}
+
+// Multiple media input (with values)
+export const MultipleWithValues = {
+	args: {
+		label: 'Gallery Images',
+		mode: 'multiple',
+		fileType: 'image',
+		value: mockMediaList
+	}
+}
+
+// Required field
+export const Required = {
+	args: {
+		label: 'Logo Image',
+		mode: 'single',
+		fileType: 'image',
+		required: true,
+		placeholder: 'Choose a logo image'
+	}
+}
+
+// With error state
+export const WithError = {
+	args: {
+		label: 'Profile Picture',
+		mode: 'single',
+		fileType: 'image',
+		required: true,
+		error: 'Please select a profile picture'
+	}
+}
+
+// All file types
+export const AllFileTypes = {
+	args: {
+		label: 'Any Media File',
+		mode: 'single',
+		fileType: 'all',
+		placeholder: 'Choose any media file'
+	}
+}
+
+// Video only
+export const VideoOnly = {
+	args: {
+		label: 'Video File',
+		mode: 'single',
+		fileType: 'video',
+		placeholder: 'Choose a video file'
+	}
+}
+
+// Multiple with many files
+export const MultipleWithManyFiles = {
+	args: {
+		label: 'Project Assets',
+		mode: 'multiple',
+		fileType: 'all',
+		value: [
+			...mockMediaList,
+			{
+				id: '4',
+				filename: 'video-file.mp4',
+				originalName: 'video-file.mp4',
+				mimeType: 'video/mp4',
+				size: 5120000,
+				width: null,
+				height: null,
+				url: 'https://via.placeholder.com/300x200/990066/ffffff?text=Video',
+				thumbnailUrl: 'https://via.placeholder.com/300x200/990066/ffffff?text=Video',
+				createdAt: new Date(),
+				updatedAt: new Date()
+			},
+			{
+				id: '5',
+				filename: 'document.pdf',
+				originalName: 'document.pdf',
+				mimeType: 'application/pdf',
+				size: 1024000,
+				width: null,
+				height: null,
+				url: 'https://via.placeholder.com/300x200/666666/ffffff?text=PDF',
+				thumbnailUrl: null,
+				createdAt: new Date(),
+				updatedAt: new Date()
+			}
+		]
+	}
+}
+
+// Interactive playground
+export const Playground = {
+	args: {
+		label: 'Media Input',
+		mode: 'single',
+		fileType: 'image',
+		required: false,
+		placeholder: 'Select a file'
+	}
+}
diff --git a/src/stories/assets/accessibility.png b/src/stories/assets/accessibility.png
new file mode 100644
index 0000000..6ffe6fe
Binary files /dev/null and b/src/stories/assets/accessibility.png differ
diff --git a/src/stories/assets/accessibility.svg b/src/stories/assets/accessibility.svg
new file mode 100644
index 0000000..107e93f
--- /dev/null
+++ b/src/stories/assets/accessibility.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48"><title>Accessibility</title><circle cx="24.334" cy="24" r="24" fill="#A849FF" fill-opacity=".3"/><path fill="#A470D5" fill-rule="evenodd" d="M27.8609 11.585C27.8609 9.59506 26.2497 7.99023 24.2519 7.99023C22.254 7.99023 20.6429 9.65925 20.6429 11.585C20.6429 13.575 22.254 15.1799 24.2519 15.1799C26.2497 15.1799 27.8609 13.575 27.8609 11.585ZM21.8922 22.6473C21.8467 23.9096 21.7901 25.4788 21.5897 26.2771C20.9853 29.0462 17.7348 36.3314 17.3325 37.2275C17.1891 37.4923 17.1077 37.7955 17.1077 38.1178C17.1077 39.1519 17.946 39.9902 18.9802 39.9902C19.6587 39.9902 20.253 39.6293 20.5814 39.0889L20.6429 38.9874L24.2841 31.22C24.2841 31.22 27.5529 37.9214 27.9238 38.6591C28.2948 39.3967 28.8709 39.9902 29.7168 39.9902C30.751 39.9902 31.5893 39.1519 31.5893 38.1178C31.5893 37.7951 31.3639 37.2265 31.3639 37.2265C30.9581 36.3258 27.698 29.0452 27.0938 26.2771C26.8975 25.4948 26.847 23.9722 26.8056 22.7236C26.7927 22.333 26.7806 21.9693 26.7653 21.6634C26.7008 21.214 27.0231 20.8289 27.4097 20.7005L35.3366 18.3253C36.3033 18.0685 36.8834 16.9773 36.6256 16.0144C36.3678 15.0515 35.2722 14.4737 34.3055 14.7305C34.3055 14.7305 26.8619 17.1057 24.2841 17.1057C21.7062 17.1057 14.456 14.7947 14.456 14.7947C13.4893 14.5379 12.3937 14.9873 12.0715 15.9502C11.7493 16.9131 12.3293 18.0044 13.3604 18.3253L21.2873 20.7005C21.674 20.8289 21.9318 21.214 21.9318 21.6634C21.9174 21.9493 21.9053 22.2857 21.8922 22.6473Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/stories/assets/addon-library.png b/src/stories/assets/addon-library.png
new file mode 100644
index 0000000..95deb38
Binary files /dev/null and b/src/stories/assets/addon-library.png differ
diff --git a/src/stories/assets/assets.png b/src/stories/assets/assets.png
new file mode 100644
index 0000000..cfba681
Binary files /dev/null and b/src/stories/assets/assets.png differ
diff --git a/src/stories/assets/avif-test-image.avif b/src/stories/assets/avif-test-image.avif
new file mode 100644
index 0000000..530709b
Binary files /dev/null and b/src/stories/assets/avif-test-image.avif differ
diff --git a/src/stories/assets/context.png b/src/stories/assets/context.png
new file mode 100644
index 0000000..e5cd249
Binary files /dev/null and b/src/stories/assets/context.png differ
diff --git a/src/stories/assets/discord.svg b/src/stories/assets/discord.svg
new file mode 100644
index 0000000..d638958
--- /dev/null
+++ b/src/stories/assets/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177575)"><mask id="mask0_10031_177575" style="mask-type:luminance" width="33" height="25" x="0" y="4" maskUnits="userSpaceOnUse"><path fill="#fff" d="M32.5034 4.00195H0.503906V28.7758H32.5034V4.00195Z"/></mask><g mask="url(#mask0_10031_177575)"><path fill="#5865F2" d="M27.5928 6.20817C25.5533 5.27289 23.3662 4.58382 21.0794 4.18916C21.0378 4.18154 20.9962 4.20057 20.9747 4.23864C20.6935 4.73863 20.3819 5.3909 20.1637 5.90358C17.7042 5.53558 15.2573 5.53558 12.8481 5.90358C12.6299 5.37951 12.307 4.73863 12.0245 4.23864C12.003 4.20184 11.9614 4.18281 11.9198 4.18916C9.63431 4.58255 7.44721 5.27163 5.40641 6.20817C5.38874 6.21578 5.3736 6.22848 5.36355 6.24497C1.21508 12.439 0.078646 18.4809 0.636144 24.4478C0.638667 24.477 0.655064 24.5049 0.677768 24.5227C3.41481 26.5315 6.06609 27.7511 8.66815 28.5594C8.70979 28.5721 8.75392 28.5569 8.78042 28.5226C9.39594 27.6826 9.94461 26.7968 10.4151 25.8653C10.4428 25.8107 10.4163 25.746 10.3596 25.7244C9.48927 25.3945 8.66058 24.9922 7.86343 24.5354C7.80038 24.4986 7.79533 24.4084 7.85333 24.3653C8.02108 24.2397 8.18888 24.109 8.34906 23.977C8.37804 23.9529 8.41842 23.9478 8.45249 23.963C13.6894 26.3526 19.359 26.3526 24.5341 23.963C24.5682 23.9465 24.6086 23.9516 24.6388 23.9757C24.799 24.1077 24.9668 24.2397 25.1358 24.3653C25.1938 24.4084 25.19 24.4986 25.127 24.5354C24.3298 25.0011 23.5011 25.3945 22.6296 25.7232C22.5728 25.7447 22.5476 25.8107 22.5754 25.8653C23.0559 26.7955 23.6046 27.6812 24.2087 28.5213C24.234 28.5569 24.2794 28.5721 24.321 28.5594C26.9357 27.7511 29.5869 26.5315 32.324 24.5227C32.348 24.5049 32.3631 24.4783 32.3656 24.4491C33.0328 17.5506 31.2481 11.5584 27.6344 6.24623C27.6256 6.22848 27.6105 6.21578 27.5928 6.20817ZM11.1971 20.8146C9.62043 20.8146 8.32129 19.3679 8.32129 17.5913C8.32129 15.8146 9.59523 14.368 11.1971 14.368C12.8115 14.368 14.0981 15.8273 14.0729 17.5913C14.0729 19.3679 12.7989 20.8146 11.1971 20.8146ZM21.8299 20.8146C20.2533 20.8146 18.9541 19.3679 18.9541 17.5913C18.9541 15.8146 20.228 14.368 21.8299 14.368C23.4444 14.368 24.7309 15.8273 24.7057 17.5913C24.7057 19.3679 23.4444 20.8146 21.8299 20.8146Z"/></g></g><defs><clipPath id="clip0_10031_177575"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/stories/assets/docs.png b/src/stories/assets/docs.png
new file mode 100644
index 0000000..a749629
Binary files /dev/null and b/src/stories/assets/docs.png differ
diff --git a/src/stories/assets/figma-plugin.png b/src/stories/assets/figma-plugin.png
new file mode 100644
index 0000000..8f79b08
Binary files /dev/null and b/src/stories/assets/figma-plugin.png differ
diff --git a/src/stories/assets/github.svg b/src/stories/assets/github.svg
new file mode 100644
index 0000000..dc51352
--- /dev/null
+++ b/src/stories/assets/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#161614" d="M16.0001 0C7.16466 0 0 7.17472 0 16.0256C0 23.1061 4.58452 29.1131 10.9419 31.2322C11.7415 31.3805 12.0351 30.8845 12.0351 30.4613C12.0351 30.0791 12.0202 28.8167 12.0133 27.4776C7.56209 28.447 6.62283 25.5868 6.62283 25.5868C5.89499 23.7345 4.8463 23.2419 4.8463 23.2419C3.39461 22.2473 4.95573 22.2678 4.95573 22.2678C6.56242 22.3808 7.40842 23.9192 7.40842 23.9192C8.83547 26.3691 11.1514 25.6609 12.0645 25.2514C12.2081 24.2156 12.6227 23.5087 13.0803 23.1085C9.52648 22.7032 5.7906 21.3291 5.7906 15.1886C5.7906 13.4389 6.41563 12.0094 7.43916 10.8871C7.27303 10.4834 6.72537 8.85349 7.59415 6.64609C7.59415 6.64609 8.93774 6.21539 11.9953 8.28877C13.2716 7.9337 14.6404 7.75563 16.0001 7.74953C17.3599 7.75563 18.7297 7.9337 20.0084 8.28877C23.0623 6.21539 24.404 6.64609 24.404 6.64609C25.2749 8.85349 24.727 10.4834 24.5608 10.8871C25.5868 12.0094 26.2075 13.4389 26.2075 15.1886C26.2075 21.3437 22.4645 22.699 18.9017 23.0957C19.4756 23.593 19.9869 24.5683 19.9869 26.0634C19.9869 28.2077 19.9684 29.9334 19.9684 30.4613C19.9684 30.8877 20.2564 31.3874 21.0674 31.2301C27.4213 29.1086 32 23.1037 32 16.0256C32 7.17472 24.8364 0 16.0001 0ZM5.99257 22.8288C5.95733 22.9084 5.83227 22.9322 5.71834 22.8776C5.60229 22.8253 5.53711 22.7168 5.57474 22.6369C5.60918 22.5549 5.7345 22.5321 5.85029 22.587C5.9666 22.6393 6.03284 22.7489 5.99257 22.8288ZM6.7796 23.5321C6.70329 23.603 6.55412 23.5701 6.45291 23.4581C6.34825 23.3464 6.32864 23.197 6.40601 23.125C6.4847 23.0542 6.62937 23.0874 6.73429 23.1991C6.83895 23.3121 6.85935 23.4605 6.7796 23.5321ZM7.31953 24.4321C7.2215 24.5003 7.0612 24.4363 6.96211 24.2938C6.86407 24.1513 6.86407 23.9804 6.96422 23.9119C7.06358 23.8435 7.2215 23.905 7.32191 24.0465C7.41968 24.1914 7.41968 24.3623 7.31953 24.4321ZM8.23267 25.4743C8.14497 25.5712 7.95818 25.5452 7.82146 25.413C7.68156 25.2838 7.64261 25.1004 7.73058 25.0035C7.81934 24.9064 8.00719 24.9337 8.14497 25.0648C8.28381 25.1938 8.3262 25.3785 8.23267 25.4743ZM9.41281 25.8262C9.37413 25.9517 9.19423 26.0088 9.013 25.9554C8.83203 25.9005 8.7136 25.7535 8.75016 25.6266C8.78778 25.5003 8.96848 25.4408 9.15104 25.4979C9.33174 25.5526 9.45044 25.6985 9.41281 25.8262ZM10.7559 25.9754C10.7604 26.1076 10.6067 26.2172 10.4165 26.2196C10.2252 26.2238 10.0704 26.1169 10.0683 25.9868C10.0683 25.8534 10.2185 25.7448 10.4098 25.7416C10.6001 25.7379 10.7559 25.8441 10.7559 25.9754ZM12.0753 25.9248C12.0981 26.0537 11.9658 26.1862 11.7769 26.2215C11.5912 26.2554 11.4192 26.1758 11.3957 26.0479C11.3726 25.9157 11.5072 25.7833 11.6927 25.7491C11.8819 25.7162 12.0512 25.7937 12.0753 25.9248Z"/></svg>
\ No newline at end of file
diff --git a/src/stories/assets/share.png b/src/stories/assets/share.png
new file mode 100644
index 0000000..8097a37
Binary files /dev/null and b/src/stories/assets/share.png differ
diff --git a/src/stories/assets/styling.png b/src/stories/assets/styling.png
new file mode 100644
index 0000000..d341e82
Binary files /dev/null and b/src/stories/assets/styling.png differ
diff --git a/src/stories/assets/testing.png b/src/stories/assets/testing.png
new file mode 100644
index 0000000..d4ac39a
Binary files /dev/null and b/src/stories/assets/testing.png differ
diff --git a/src/stories/assets/theming.png b/src/stories/assets/theming.png
new file mode 100644
index 0000000..1535eb9
Binary files /dev/null and b/src/stories/assets/theming.png differ
diff --git a/src/stories/assets/tutorials.svg b/src/stories/assets/tutorials.svg
new file mode 100644
index 0000000..b492a9c
--- /dev/null
+++ b/src/stories/assets/tutorials.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" fill="none" viewBox="0 0 33 32"><g clip-path="url(#clip0_10031_177597)"><path fill="#B7F0EF" fill-rule="evenodd" d="M17 7.87059C17 6.48214 17.9812 5.28722 19.3431 5.01709L29.5249 2.99755C31.3238 2.64076 33 4.01717 33 5.85105V22.1344C33 23.5229 32.0188 24.7178 30.6569 24.9879L20.4751 27.0074C18.6762 27.3642 17 25.9878 17 24.1539L17 7.87059Z" clip-rule="evenodd" opacity=".7"/><path fill="#87E6E5" fill-rule="evenodd" d="M1 5.85245C1 4.01857 2.67623 2.64215 4.47507 2.99895L14.6569 5.01848C16.0188 5.28861 17 6.48354 17 7.87198V24.1553C17 25.9892 15.3238 27.3656 13.5249 27.0088L3.34311 24.9893C1.98119 24.7192 1 23.5242 1 22.1358V5.85245Z" clip-rule="evenodd"/><path fill="#61C1FD" fill-rule="evenodd" d="M15.543 5.71289C15.543 5.71289 16.8157 5.96289 17.4002 6.57653C17.9847 7.19016 18.4521 9.03107 18.4521 9.03107C18.4521 9.03107 18.4521 25.1106 18.4521 26.9629C18.4521 28.8152 19.3775 31.4174 19.3775 31.4174L17.4002 28.8947L16.2575 31.4174C16.2575 31.4174 15.543 29.0765 15.543 27.122C15.543 25.1674 15.543 5.71289 15.543 5.71289Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_10031_177597"><rect width="32" height="32" fill="#fff" transform="translate(0.5)"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/stories/assets/youtube.svg b/src/stories/assets/youtube.svg
new file mode 100644
index 0000000..a7515d7
--- /dev/null
+++ b/src/stories/assets/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#ED1D24" d="M31.3313 8.44657C30.9633 7.08998 29.8791 6.02172 28.5022 5.65916C26.0067 5.00026 16 5.00026 16 5.00026C16 5.00026 5.99333 5.00026 3.4978 5.65916C2.12102 6.02172 1.03665 7.08998 0.668678 8.44657C0 10.9053 0 16.0353 0 16.0353C0 16.0353 0 21.1652 0.668678 23.6242C1.03665 24.9806 2.12102 26.0489 3.4978 26.4116C5.99333 27.0703 16 27.0703 16 27.0703C16 27.0703 26.0067 27.0703 28.5022 26.4116C29.8791 26.0489 30.9633 24.9806 31.3313 23.6242C32 21.1652 32 16.0353 32 16.0353C32 16.0353 32 10.9053 31.3313 8.44657Z"/><path fill="#fff" d="M12.7266 20.6934L21.0902 16.036L12.7266 11.3781V20.6934Z"/></svg>
\ No newline at end of file
diff --git a/src/stories/button.css b/src/stories/button.css
new file mode 100644
index 0000000..4fc38a2
--- /dev/null
+++ b/src/stories/button.css
@@ -0,0 +1,30 @@
+.storybook-button {
+	display: inline-block;
+	cursor: pointer;
+	border: 0;
+	border-radius: 3em;
+	font-weight: 700;
+	line-height: 1;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+	background-color: #555ab9;
+	color: white;
+}
+.storybook-button--secondary {
+	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+	background-color: transparent;
+	color: #333;
+}
+.storybook-button--small {
+	padding: 10px 16px;
+	font-size: 12px;
+}
+.storybook-button--medium {
+	padding: 11px 20px;
+	font-size: 14px;
+}
+.storybook-button--large {
+	padding: 12px 24px;
+	font-size: 16px;
+}
diff --git a/src/stories/header.css b/src/stories/header.css
new file mode 100644
index 0000000..d511c66
--- /dev/null
+++ b/src/stories/header.css
@@ -0,0 +1,32 @@
+.storybook-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	padding: 15px 20px;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+	display: inline-block;
+	vertical-align: top;
+}
+
+.storybook-header h1 {
+	display: inline-block;
+	vertical-align: top;
+	margin: 6px 0 6px 10px;
+	font-weight: 700;
+	font-size: 20px;
+	line-height: 1;
+}
+
+.storybook-header button + button {
+	margin-left: 10px;
+}
+
+.storybook-header .welcome {
+	margin-right: 10px;
+	color: #333;
+	font-size: 14px;
+}
diff --git a/src/stories/page.css b/src/stories/page.css
new file mode 100644
index 0000000..67f2bb2
--- /dev/null
+++ b/src/stories/page.css
@@ -0,0 +1,68 @@
+.storybook-page {
+	margin: 0 auto;
+	padding: 48px 20px;
+	max-width: 600px;
+	color: #333;
+	font-size: 14px;
+	line-height: 24px;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 0 4px;
+	font-weight: 700;
+	font-size: 32px;
+	line-height: 1;
+}
+
+.storybook-page p {
+	margin: 1em 0;
+}
+
+.storybook-page a {
+	color: inherit;
+}
+
+.storybook-page ul {
+	margin: 1em 0;
+	padding-left: 30px;
+}
+
+.storybook-page li {
+	margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+	display: inline-block;
+	vertical-align: top;
+	margin-right: 10px;
+	border-radius: 1em;
+	background: #e7fdd8;
+	padding: 4px 12px;
+	color: #357a14;
+	font-weight: 700;
+	font-size: 11px;
+	line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+	margin-top: 40px;
+	margin-bottom: 40px;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+	display: inline-block;
+	vertical-align: top;
+	margin-top: 3px;
+	margin-right: 4px;
+	width: 12px;
+	height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+	fill: #1ea7fd;
+}
diff --git a/svelte.config.js b/svelte.config.js
index f27eebb..e70e3ac 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,12 +13,16 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 
+		csrf: {
+			checkOrigin: false
+		},
+
 		alias: {
 			$icons: 'src/assets/icons',
 			$illos: 'src/assets/illos',
 			$components: 'src/lib/components',
 			$utils: 'src/lib/utils',
-			$styles: 'src/styles'
+			$styles: 'src/assets/styles'
 		}
 	}
 }
diff --git a/test-form-loading.js b/test-form-loading.js
new file mode 100644
index 0000000..7bef28a
--- /dev/null
+++ b/test-form-loading.js
@@ -0,0 +1,35 @@
+// Simple test to check if project edit page loads correctly
+const puppeteer = require('puppeteer')
+
+;(async () => {
+	const browser = await puppeteer.launch({ headless: false })
+	const page = await browser.newPage()
+
+	try {
+		// Go to admin login first (might be needed)
+		await page.goto('http://localhost:5173/admin/login')
+		await page.waitForTimeout(1000)
+
+		// Try to go directly to edit page
+		await page.goto('http://localhost:5173/admin/projects/8/edit')
+		await page.waitForTimeout(2000)
+
+		// Check if title field is populated
+		const titleValue = await page.$eval(
+			'input[placeholder*="title" i], input[name*="title" i], #title',
+			(el) => el.value
+		)
+
+		console.log('Title field value:', titleValue)
+
+		if (titleValue === 'Maitsu') {
+			console.log('✅ Form loading works correctly!')
+		} else {
+			console.log('❌ Form loading failed - title not populated')
+		}
+	} catch (error) {
+		console.error('Test failed:', error.message)
+	} finally {
+		await browser.close()
+	}
+})()
diff --git a/vite.config.ts b/vite.config.ts
index b3b3e18..97fee1e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,11 @@ import autoprefixer from 'autoprefixer'
 import svg from '@poppanator/sveltekit-svg'
 
 export default defineConfig({
+	server: {
+		watch: {
+			usePolling: true
+		}
+	},
 	plugins: [
 		sveltekit(),
 		svg({
@@ -59,7 +64,8 @@ export default defineConfig({
           @import './src/assets/styles/fonts.scss';
           @import './src/assets/styles/themes.scss';
           @import './src/assets/styles/globals.scss';
-        `
+        `,
+				api: 'modern-compiler'
 			}
 		},
 		postcss: {