chore: run prettier on all src/ files to fix formatting

Co-Authored-By: Justin Edmund <justin@jedmund.com>
2025-11-23 12:12:02 +00:00
210 changed files with 3383 additions and 3210 deletions
--- a/docs/eslint-cleanup-plan.md
+++ b/docs/eslint-cleanup-plan.md
@ -1,304 +0,0 @@
-# ESLint Cleanup Plan
-
-**Branch:** `devin/1763907694-fix-linter-errors`
-**Status:** 613 errors → 207 errors (66% reduction, 406 fixed)
-**Base:** `main` (after cleanup/linter PR #18 was merged)
-**Generated:** 2025-11-24
-**Last Updated:** 2025-11-24
-
-## Executive Summary
-
-This branch represents ongoing linter cleanup work following the merge of PR #18 (cleanup/linter). A previous automated LLM fixed 406 errors systematically, bringing the error count from 613 down to 207 (66% reduction).
-
-**Quality Review:** The automated fixes were 84% good quality, with one critical issue (AlbumForm save functionality removed) that has been **FIXED** as of 2025-11-24.
-
---
-
-## Current Progress
-
-### What's Already Fixed ✅ (406 errors)
-
-#### Phase 1: Auto-Fixes & Cleanup (287 errors)
- ✅ Removed 287 unused imports and variables
- ✅ Renamed unused parameters with underscore prefix
- ✅ Configured ESLint to ignore `_` prefixed variables
-
-#### Phase 2: Code Quality (52 errors)
- ✅ Fixed 34 duplicate SVG style properties in AvatarSVG
- ✅ Added 22 missing type imports (SerializableGameInfo, Leaflet types, etc.)
- ✅ Fixed 4 switch case scoping with braces
- ✅ Added comments to 8 empty catch blocks
- ✅ Fixed 3 empty interfaces → type aliases
- ✅ Fixed 2 regex escaping issues
- ✅ Fixed 1 parsing error (missing brace)
-
-#### Phase 3: Svelte 5 Patterns (26 errors)
- ✅ Added `void` operator to 26 reactive dependency tracking patterns
- ✅ Proper Svelte 5 runes mode implementation
-
-#### Phase 4: ESLint Configuration
- ✅ Added underscore ignore pattern for unused vars
- ⚠️ **Globally disabled** `svelte/no-at-html-tags` rule (affects 15+ files)
-
-#### Phase 5: Critical Issue Fixed
- ✅ **AlbumForm save functionality restored** (was broken, now working)
-  - Restored: `handleSave()`, `validateForm()`, related imports
-  - Restored: `isSaving`, `validationErrors` state
-  - Restored: Zod validation schema
-
---
-
-## Remaining Work (207 errors)
-
-### Error Breakdown by Type
-
-| Category | Count | % of Total | Priority |
-|----------|-------|-----------|----------|
-| Type Safety (`@typescript-eslint/no-explicit-any`) | 103 | 49.8% | High |
-| Accessibility (`a11y_*`) | 52 | 25.1% | Medium-High |
-| Svelte 5 Migration | 51 | 24.6% | Medium |
-| Misc/Parsing | 1 | 0.5% | Low |
-
---
-
-## Detailed Remaining Errors
-
-### Priority 1: Type Safety (103 errors)
-
-Replace `any` types with proper TypeScript interfaces across:
-
-**Areas to fix:**
- Admin components (forms, modals, utilities)
- Server utilities (logger, metadata, apple-music-client)
- API routes and RSS feeds
- Content utilities and renderers
-
-**Approach:**
- Use Prisma-generated types for database models
- Use `Prisma.JsonValue` for JSON columns
- Create specific interfaces for complex nested data
- Use `unknown` instead of `any` when type is genuinely unknown
- Add type guards for safe casting
-
---
-
-### Priority 2: Accessibility (52 errors)
-
-#### Breakdown by Issue Type:
-
-| Issue | Count | Description |
-|-------|-------|-------------|
-| `a11y_no_static_element_interactions` | 38 | Static elements with click handlers need ARIA roles |
-| `a11y_click_events_have_key_events` | 30 | Click handlers need keyboard event handlers |
-| `a11y_label_has_associated_control` | 12 | Form labels need `for` attribute |
-| `a11y_no_noninteractive_element_interactions` | 8 | Non-interactive elements have interactions |
-| `a11y_no_noninteractive_tabindex` | 6 | Non-interactive elements have tabindex |
-| `a11y_consider_explicit_label` | 4 | Elements need explicit labels |
-| `a11y_media_has_caption` | 2 | Media elements missing captions |
-| `a11y_interactive_supports_focus` | 2 | Interactive elements need focus support |
-| `a11y_img_redundant_alt` | 2 | Images have redundant alt text |
-
-**Common fixes:**
- Add `role="button"` to clickable divs
- Add `onkeydown` handlers for keyboard support
- Associate labels with controls using `for` attribute
- Remove inappropriate tabindex or add proper ARIA roles
- Add captions to video/audio elements
-
---
-
-### Priority 3: Svelte 5 Migration (51 errors)
-
-#### Breakdown by Issue Type:
-
-| Issue | Count | Description |
-|-------|-------|-------------|
-| `non_reactive_update` | 25 | Variables updated but not declared with `$state()` |
-| `event_directive_deprecated` | 10 | Deprecated `on:*` handlers need updating |
-| `custom_element_props_identifier` | 6 | Custom element props need explicit config |
-| `state_referenced_locally` | 5 | State referenced outside reactive context |
-| `element_invalid_self_closing_tag` | 2 | Self-closing non-void elements |
-| `css_unused_selector` | 2 | Unused CSS selectors |
-| `svelte_self_deprecated` | 1 | `<svelte:self>` is deprecated |
-
-**Fixes needed:**
-1. **Non-reactive updates:** Wrap variables in `$state()`
-2. **Event handlers:** Change `on:click` → `onclick`, `on:mousemove` → `onmousemove`, etc.
-3. **Custom elements:** Add explicit `customElement.props` configuration
-4. **Deprecated syntax:** Replace `<svelte:self>` with self-imports
-5. **Self-closing tags:** Fix `<textarea />` → `<textarea></textarea>`
-
---
-
-### Priority 4: Miscellaneous (1 error)
-
- 1 parsing error to investigate
-
---
-
-## Quality Review: Previous LLM Work
-
-### Overall Assessment: ⚠️ 84% Good, 1 Critical Issue (Fixed)
-
-**What went well:**
- ✅ Systematic, methodical approach with clear commit messages
- ✅ Proper Svelte 5 patterns (void operators)
- ✅ Correct type import fixes
- ✅ Appropriate underscore naming for unused params
- ✅ Good code cleanup (duplicate styles, switch cases)
-
-**What went poorly:**
- ❌ **Over-aggressive dead code removal** - Removed functional AlbumForm save logic
- ⚠️ **Global rule disable** - Disabled `@html` warnings for all files instead of inline
- ⚠️ **No apparent testing** - Breaking change wasn't caught
-
-**Root cause of AlbumForm issue:**
-The `handleSave()` function appeared unused because an earlier incomplete Svelte 5 migration removed the save button UI but left the save logic orphaned. The LLM then removed the "unused" functions without understanding the migration context.
-
-### Files Requiring Testing
-
-Before merging, test these admin forms thoroughly:
- ✅ AlbumForm - **FIXED and should work now**
- ⚠️ EssayForm - Uses autosave, verify it works
- ⚠️ ProjectForm - Uses autosave, verify it works
- ⚠️ PhotoPostForm - Verify save functionality
- ⚠️ SimplePostForm - Verify save functionality
-
-### Security Concerns
-
-**`@html` Global Disable:**
-The rule `svelte/no-at-html-tags` was disabled globally with the justification that "all uses are for trusted content (static SVGs, sanitized content, JSON-LD)".
-
-**Affected files** (15 total):
- AvatarSimple.svelte
- DynamicPostContent.svelte
- PostContent.svelte
- ProjectContent.svelte
- And 11 more...
-
-**Recommendation:** Audit each `{@html}` usage to verify content is truly safe, or replace global disable with inline `svelte-ignore` comments.
-
---
-
-## Execution Strategy
-
-### Approach
-
-1. ✅ **AlbumForm fixed** - Critical blocker resolved
-2. **Work by priority** - Type safety → Accessibility → Svelte 5
-3. **Batch similar fixes** - Process files with same error pattern together
-4. **Test frequently** - Especially admin forms after changes
-5. **Commit often** - Make rollback easy if needed
-
-### Phase Breakdown
-
-#### Phase 1: Type Safety (103 errors) - HIGH PRIORITY
-**Goal:** Replace all `any` types with proper TypeScript types
-
-**Batches:**
-1. Admin components with `any` types
-2. Server utilities (logger, metadata, apple-music-client)
-3. API routes and RSS feeds
-4. Content utilities and helpers
-5. Miscellaneous files
-
-**Pattern:**
- Use Prisma types: `import type { Post, Project, Media } from '@prisma/client'`
- Use `Prisma.JsonValue` for JSON columns
- Create interfaces for complex structures
- Use type guards instead of casts
-
-#### Phase 2: Accessibility (52 errors) - MEDIUM-HIGH PRIORITY
-**Goal:** Make UI accessible to all users
-
-**Batches:**
-1. Add ARIA roles to 38 static elements with click handlers
-2. Add keyboard handlers to 30 click events
-3. Fix 12 form label associations
-4. Remove inappropriate tabindex (6 errors)
-5. Fix remaining a11y issues (4+2+2+2 = 10 errors)
-
-**Testing:** Use keyboard navigation to verify changes work
-
-#### Phase 3: Svelte 5 Updates (51 errors) - MEDIUM PRIORITY
-**Goal:** Full Svelte 5 compatibility
-
-**Batches:**
-1. Fix 25 non-reactive updates with `$state()`
-2. Update 10 deprecated event handlers (`on:*` → `on*`)
-3. Fix 6 custom element props
-4. Fix 5 state referenced locally
-5. Fix remaining misc issues (2+2+1 = 5 errors)
-
-#### Phase 4: Final Cleanup (1 error) - LOW PRIORITY
-**Goal:** Zero linter errors
-
- Investigate and fix the 1 remaining parsing error
-
---
-
-## Commands Reference
-
-```bash
-# Check all errors
-npx eslint src/
-
-# Check error count
-npx eslint src/ 2>/dev/null | grep "✖"
-
-# Check specific file
-npx eslint src/path/to/file.svelte
-
-# Test all admin forms
-npm run dev
-# Navigate to /admin and test each form
-```
-
---
-
-## Success Metrics
-
- **Phase 0: AlbumForm Fixed** ✅ Critical blocker resolved
- **Phase 1 Complete:** 104 errors remaining (103 → 0 type safety)
- **Phase 2 Complete:** 52 errors remaining (a11y fixed)
- **Phase 3 Complete:** 1 error remaining (Svelte 5 migration complete)
- **Phase 4 Complete:** 🎯 **0 errors - 100% clean codebase**
-
---
-
-## Next Actions
-
-### Immediate (Completed ✅)
- [x] AlbumForm save functionality restored
- [ ] Test AlbumForm create/edit in UI
- [ ] Test other admin forms (Essay, Project, Photo, Simple)
-
-### Short-term (Phase 1)
- [ ] Start fixing `any` types in admin components
- [ ] Fix `any` types in server utilities
- [ ] Replace remaining `any` types systematically
-
-### Medium-term (Phase 2-3)
- [ ] Fix accessibility issues
- [ ] Update to Svelte 5 syntax
- [ ] Test thoroughly
-
-### Long-term
- [ ] Consider replacing global `@html` disable with inline ignores
- [ ] Add integration tests for admin forms
- [ ] Document which forms use autosave vs manual save
-
---
-
-## Notes
-
- **Prettier formatting** - Run `npm run format` separately from ESLint
- **Sass `@import` warnings** - Informational only, not counted in errors
- **Branch history** - Built on top of cleanup/linter (PR #18)
- **Testing is critical** - Admin forms must work before merge
-
---
-
-**Last Updated:** 2025-11-24
-**Next Review:** After Phase 1 (Type Safety) completion
-**Estimated Total Time:** ~25-35 hours for remaining 207 errors
--- a/eslint.config.js
+++ b/eslint.config.js
@ -30,20 +30,6 @@ export default [
 			}
 		}
 	},
-	{
-		rules: {
-			'@typescript-eslint/no-unused-vars': [
-				'error',
-				{
-					argsIgnorePattern: '^_',
-					varsIgnorePattern: '^_',
-					caughtErrorsIgnorePattern: '^_'
-				}
-			],
-			// Disable @html warnings - all uses are for trusted content (static SVGs, sanitized content, JSON-LD)
-			'svelte/no-at-html-tags': 'off'
-		}
-	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
 	},
--- a/package.json
+++ b/package.json
@ -60,7 +60,6 @@
 	"type": "module",
 	"dependencies": {
 		"@aarkue/tiptap-math-extension": "^1.3.6",
-		"@eslint/js": "^9.39.1",
 		"@floating-ui/dom": "^1.7.1",
 		"@prisma/client": "^6.8.2",
 		"@sveltejs/adapter-node": "^5.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,9 +11,6 @@ importers:
      '@aarkue/tiptap-math-extension':
        specifier: ^1.3.6
        version: 1.4.0(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
-      '@eslint/js':
-        specifier: ^9.39.1
-        version: 9.39.1
      '@floating-ui/dom':
        specifier: ^1.7.1
        version: 1.7.4
@ -657,10 +654,6 @@ packages:
    resolution: {integrity: sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@eslint/js@9.39.1':
-    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
  '@eslint/object-schema@2.1.6':
    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -3806,8 +3799,6 @@ snapshots:

  '@eslint/js@9.37.0': {}

-  '@eslint/js@9.39.1': {}
-
  '@eslint/object-schema@2.1.6': {}

  '@eslint/plugin-kit@0.4.0':
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -1,3 +0,0 @@
-onlyBuiltDependencies:
-  - "@musicorum/lastfm"
-  - "psn-api"
--- a/prisma/migrations/20251123000000_add_project_header_visibility_fields/migration.sql
+++ b/prisma/migrations/20251123000000_add_project_header_visibility_fields/migration.sql
@ -1,4 +0,0 @@
-- AlterTable
-ALTER TABLE "Project" ADD COLUMN "showFeaturedImageInHeader" BOOLEAN NOT NULL DEFAULT true,
-ADD COLUMN "showBackgroundColorInHeader" BOOLEAN NOT NULL DEFAULT true,
-ADD COLUMN "showLogoInHeader" BOOLEAN NOT NULL DEFAULT true;
--- a/scripts/init-db.ts
+++ b/scripts/init-db.ts
@ -13,10 +13,9 @@ async function isDatabaseInitialized(): Promise<boolean> {
    `

 		return migrationCount[0].count > 0n
-	} catch (error: unknown) {
+	} catch (error: any) {
 		// If the table doesn't exist, database is not initialized
-		const message = error instanceof Error ? error.message : String(error)
-		console.log('📊 Migration table check failed (expected on first deploy):', message)
+		console.log('📊 Migration table check failed (expected on first deploy):', error.message)
 		return false
 	}
 }
--- a/scripts/reanalyze-colors.ts
+++ b/scripts/reanalyze-colors.ts
@ -11,7 +11,7 @@
 *   --dry-run          Show what would be changed without updating
 */

-import { PrismaClient, Prisma } from '@prisma/client'
+import { PrismaClient } from '@prisma/client'
 import { selectBestDominantColor, isGreyColor } from '../src/lib/server/color-utils'

 const prisma = new PrismaClient()
@ -54,7 +54,7 @@ function parseArgs(): Options {
 async function reanalyzeColors(options: Options) {
 	try {
 		// Build query
-		const where: Prisma.MediaWhereInput = {
+		const where: any = {
 			colors: { not: null }
 		}

--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -1,11 +1,10 @@
 declare module '*.svg' {
-	const content: string
+	const content: any
 	export default content
 }

 declare module '*.svg?component' {
-	import type { Component } from 'svelte'
-	const content: Component
+	const content: any
 	export default content
 }

--- a/src/lib/admin/api.ts
+++ b/src/lib/admin/api.ts
@ -3,92 +3,99 @@ import { goto } from '$app/navigation'
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'

 export interface RequestOptions<TBody = unknown> {
-  method?: HttpMethod
-  body?: TBody
-  signal?: AbortSignal
-  headers?: Record<string, string>
+	method?: HttpMethod
+	body?: TBody
+	signal?: AbortSignal
+	headers?: Record<string, string>
 }

 export interface ApiError extends Error {
-  status: number
-  details?: unknown
+	status: number
+	details?: unknown
 }

 function getAuthHeader() {
-  return {}
+	return {}
 }

 async function handleResponse(res: Response) {
-  if (res.status === 401) {
-    // Redirect to login for unauthorized requests
-    try {
-      goto('/admin/login')
-    } catch {
-      // Ignore navigation errors (e.g., if already on login page)
-    }
-  }
+	if (res.status === 401) {
+		// Redirect to login for unauthorized requests
+		try {
+			goto('/admin/login')
+		} catch {}
+	}

-  const contentType = res.headers.get('content-type') || ''
-  const isJson = contentType.includes('application/json')
-  const data = isJson ? await res.json().catch(() => undefined) : undefined
+	const contentType = res.headers.get('content-type') || ''
+	const isJson = contentType.includes('application/json')
+	const data = isJson ? await res.json().catch(() => undefined) : undefined

-  if (!res.ok) {
-    const err: ApiError = Object.assign(new Error('Request failed'), {
-      status: res.status,
-      details: data
-    })
-    throw err
-  }
-  return data
+	if (!res.ok) {
+		const err: ApiError = Object.assign(new Error('Request failed'), {
+			status: res.status,
+			details: data
+		})
+		throw err
+	}
+	return data
 }

 export async function request<TResponse = unknown, TBody = unknown>(
-  url: string,
-  opts: RequestOptions<TBody> = {}
+	url: string,
+	opts: RequestOptions<TBody> = {}
 ): Promise<TResponse> {
-  const { method = 'GET', body, signal, headers } = opts
+	const { method = 'GET', body, signal, headers } = opts

-  const isFormData = typeof FormData !== 'undefined' && body instanceof FormData
-  const mergedHeaders: Record<string, string> = {
-    ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
-    ...getAuthHeader(),
-    ...(headers || {})
-  }
+	const isFormData = typeof FormData !== 'undefined' && body instanceof FormData
+	const mergedHeaders: Record<string, string> = {
+		...(isFormData ? {} : { 'Content-Type': 'application/json' }),
+		...getAuthHeader(),
+		...(headers || {})
+	}

-  const res = await fetch(url, {
-    method,
-    headers: mergedHeaders,
-    body: body ? (isFormData ? (body as FormData) : JSON.stringify(body)) : undefined,
-    signal,
-    credentials: 'same-origin'
-  })
+	const res = await fetch(url, {
+		method,
+		headers: mergedHeaders,
+		body: body ? (isFormData ? (body as any) : JSON.stringify(body)) : undefined,
+		signal,
+		credentials: 'same-origin'
+	})

-  return handleResponse(res) as Promise<TResponse>
+	return handleResponse(res) as Promise<TResponse>
 }

 export const api = {
-  get: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
-    request<T>(url, { ...opts, method: 'GET' }),
-  post: <T = unknown, B = unknown>(url: string, body: B, opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}) =>
-    request<T, B>(url, { ...opts, method: 'POST', body }),
-  put: <T = unknown, B = unknown>(url: string, body: B, opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}) =>
-    request<T, B>(url, { ...opts, method: 'PUT', body }),
-  patch: <T = unknown, B = unknown>(url: string, body: B, opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}) =>
-    request<T, B>(url, { ...opts, method: 'PATCH', body }),
-  delete: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
-    request<T>(url, { ...opts, method: 'DELETE' })
+	get: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
+		request<T>(url, { ...opts, method: 'GET' }),
+	post: <T = unknown, B = unknown>(
+		url: string,
+		body: B,
+		opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}
+	) => request<T, B>(url, { ...opts, method: 'POST', body }),
+	put: <T = unknown, B = unknown>(
+		url: string,
+		body: B,
+		opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}
+	) => request<T, B>(url, { ...opts, method: 'PUT', body }),
+	patch: <T = unknown, B = unknown>(
+		url: string,
+		body: B,
+		opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}
+	) => request<T, B>(url, { ...opts, method: 'PATCH', body }),
+	delete: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
+		request<T>(url, { ...opts, method: 'DELETE' })
 }

 export function createAbortable() {
-  let controller: AbortController | null = null
-  return {
-    nextSignal() {
-      if (controller) controller.abort()
-      controller = new AbortController()
-      return controller.signal
-    },
-    abort() {
-      if (controller) controller.abort()
-    }
-  }
+	let controller: AbortController | null = null
+	return {
+		nextSignal() {
+			if (controller) controller.abort()
+			controller = new AbortController()
+			return controller.signal
+		},
+		abort() {
+			if (controller) controller.abort()
+		}
+	}
 }
--- a/src/lib/admin/autoSave.svelte.ts
+++ b/src/lib/admin/autoSave.svelte.ts
@ -1,20 +1,20 @@
 export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline'

 export interface AutoSaveStoreOptions<TPayload, TResponse = unknown> {
-  debounceMs?: number
-  idleResetMs?: number
-  getPayload: () => TPayload | null | undefined
-  save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
-  onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
+	debounceMs?: number
+	idleResetMs?: number
+	getPayload: () => TPayload | null | undefined
+	save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
+	onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
 }

-export interface AutoSaveStore<TPayload, _TResponse = unknown> {
-  readonly status: AutoSaveStatus
-  readonly lastError: string | null
-  schedule: () => void
-  flush: () => Promise<void>
-  destroy: () => void
-  prime: (payload: TPayload) => void
+export interface AutoSaveStore<TPayload, TResponse = unknown> {
+	readonly status: AutoSaveStatus
+	readonly lastError: string | null
+	schedule: () => void
+	flush: () => Promise<void>
+	destroy: () => void
+	prime: (payload: TPayload) => void
 }

 /**
@ -35,135 +35,109 @@ export interface AutoSaveStore<TPayload, _TResponse = unknown> {
 * // Trigger save: autoSave.schedule()
 */
 export function createAutoSaveStore<TPayload, TResponse = unknown>(
-  opts: AutoSaveStoreOptions<TPayload, TResponse>
-): AutoSaveStore<TPayload, unknown> {
-  const debounceMs = opts.debounceMs ?? 2000
-  const idleResetMs = opts.idleResetMs ?? 2000
-  let timer: ReturnType<typeof setTimeout> | null = null
-  let idleResetTimer: ReturnType<typeof setTimeout> | null = null
-  let controller: AbortController | null = null
-  let lastSentHash: string | null = null
+	opts: AutoSaveStoreOptions<TPayload, TResponse>
+): AutoSaveStore<TPayload, TResponse> {
+	const debounceMs = opts.debounceMs ?? 2000
+	const idleResetMs = opts.idleResetMs ?? 2000
+	let timer: ReturnType<typeof setTimeout> | null = null
+	let idleResetTimer: ReturnType<typeof setTimeout> | null = null
+	let controller: AbortController | null = null
+	let lastSentHash: string | null = null

-  let status = $state<AutoSaveStatus>('idle')
-  let lastError = $state<string | null>(null)
+	let status = $state<AutoSaveStatus>('idle')
+	let lastError = $state<string | null>(null)

-  function setStatus(next: AutoSaveStatus) {
-    if (idleResetTimer) {
-      clearTimeout(idleResetTimer)
-      idleResetTimer = null
-    }
+	function setStatus(next: AutoSaveStatus) {
+		if (idleResetTimer) {
+			clearTimeout(idleResetTimer)
+			idleResetTimer = null
+		}

-    status = next
+		status = next

-    // Auto-transition from 'saved' to 'idle' after idleResetMs
-    if (next === 'saved') {
-      idleResetTimer = setTimeout(() => {
-        status = 'idle'
-        idleResetTimer = null
-      }, idleResetMs)
-    }
-  }
+		// Auto-transition from 'saved' to 'idle' after idleResetMs
+		if (next === 'saved') {
+			idleResetTimer = setTimeout(() => {
+				status = 'idle'
+				idleResetTimer = null
+			}, idleResetMs)
+		}
+	}

-  function prime(payload: TPayload) {
-    lastSentHash = safeHash(payload)
-  }
+	function prime(payload: TPayload) {
+		lastSentHash = safeHash(payload)
+	}

-  function schedule() {
-    if (timer) clearTimeout(timer)
-    if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-      console.debug(`[AutoSave] Scheduled (${debounceMs}ms debounce)`)
-    }
-    timer = setTimeout(() => void run(), debounceMs)
-  }
+	function schedule() {
+		if (timer) clearTimeout(timer)
+		timer = setTimeout(() => void run(), debounceMs)
+	}

-  async function run() {
-    if (timer) {
-      clearTimeout(timer)
-      timer = null
-    }
+	async function run() {
+		if (timer) {
+			clearTimeout(timer)
+			timer = null
+		}

-    const payload = opts.getPayload()
-    if (!payload) {
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Skipped: getPayload returned null/undefined')
-      }
-      return
-    }
+		const payload = opts.getPayload()
+		if (!payload) return

-    const hash = safeHash(payload)
-    if (lastSentHash && hash === lastSentHash) {
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Skipped: payload unchanged (hash match)')
-      }
-      return
-    }
+		const hash = safeHash(payload)
+		if (lastSentHash && hash === lastSentHash) return

-    if (controller) controller.abort()
-    controller = new AbortController()
+		if (controller) controller.abort()
+		controller = new AbortController()

-    if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-      console.debug('[AutoSave] Saving...', { hashChanged: lastSentHash !== hash })
-    }
+		setStatus('saving')
+		lastError = null
+		try {
+			const res = await opts.save(payload, { signal: controller.signal })
+			lastSentHash = hash
+			setStatus('saved')
+			if (opts.onSaved) opts.onSaved(res, { prime })
+		} catch (e: any) {
+			if (e?.name === 'AbortError') {
+				// Newer save superseded this one
+				return
+			}
+			if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+				setStatus('offline')
+			} else {
+				setStatus('error')
+			}
+			lastError = e?.message || 'Auto-save failed'
+		}
+	}

-    setStatus('saving')
-    lastError = null
-    try {
-      const res = await opts.save(payload, { signal: controller.signal })
-      lastSentHash = hash
-      setStatus('saved')
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Saved successfully')
-      }
-      if (opts.onSaved) opts.onSaved(res, { prime })
-    } catch (e) {
-      if (e instanceof Error && e.name === 'AbortError') {
-        // Newer save superseded this one
-        if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-          console.debug('[AutoSave] Aborted: superseded by newer save')
-        }
-        return
-      }
-      if (typeof navigator !== 'undefined' && navigator.onLine === false) {
-        setStatus('offline')
-      } else {
-        setStatus('error')
-      }
-      lastError = e instanceof Error ? e.message : 'Auto-save failed'
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Error:', lastError)
-      }
-    }
-  }
+	function flush() {
+		return run()
+	}

-  function flush() {
-    return run()
-  }
+	function destroy() {
+		if (timer) clearTimeout(timer)
+		if (idleResetTimer) clearTimeout(idleResetTimer)
+		if (controller) controller.abort()
+	}

-  function destroy() {
-    if (timer) clearTimeout(timer)
-    if (idleResetTimer) clearTimeout(idleResetTimer)
-    if (controller) controller.abort()
-  }
-
-  return {
-    get status() {
-      return status
-    },
-    get lastError() {
-      return lastError
-    },
-    schedule,
-    flush,
-    destroy,
-    prime
-  }
+	return {
+		get status() {
+			return status
+		},
+		get lastError() {
+			return lastError
+		},
+		schedule,
+		flush,
+		destroy,
+		prime
+	}
 }

 function safeHash(obj: unknown): string {
-  try {
-    return JSON.stringify(obj)
-  } catch {
-    // Fallback for circular structures; not expected for form payloads
-    return String(obj)
-  }
+	try {
+		return JSON.stringify(obj)
+	} catch {
+		// Fallback for circular structures; not expected for form payloads
+		return String(obj)
+	}
 }
--- a/src/lib/admin/autoSave.ts
+++ b/src/lib/admin/autoSave.ts
@ -1,139 +1,139 @@
 export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline'

 export interface AutoSaveController {
-  status: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
-  lastError: { subscribe: (run: (v: string | null) => void) => () => void }
-  schedule: () => void
-  flush: () => Promise<void>
-  destroy: () => void
-  prime: <T>(payload: T) => void
+	status: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
+	lastError: { subscribe: (run: (v: string | null) => void) => () => void }
+	schedule: () => void
+	flush: () => Promise<void>
+	destroy: () => void
+	prime: <T>(payload: T) => void
 }

 interface CreateAutoSaveControllerOptions<TPayload, TResponse = unknown> {
-  debounceMs?: number
-  idleResetMs?: number
-  getPayload: () => TPayload | null | undefined
-  save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
-  onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
+	debounceMs?: number
+	idleResetMs?: number
+	getPayload: () => TPayload | null | undefined
+	save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
+	onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
 }

 export function createAutoSaveController<TPayload, TResponse = unknown>(
-  opts: CreateAutoSaveControllerOptions<TPayload, TResponse>
+	opts: CreateAutoSaveControllerOptions<TPayload, TResponse>
 ) {
-  const debounceMs = opts.debounceMs ?? 2000
-  const idleResetMs = opts.idleResetMs ?? 2000
-  let timer: ReturnType<typeof setTimeout> | null = null
-  let idleResetTimer: ReturnType<typeof setTimeout> | null = null
-  let controller: AbortController | null = null
-  let lastSentHash: string | null = null
+	const debounceMs = opts.debounceMs ?? 2000
+	const idleResetMs = opts.idleResetMs ?? 2000
+	let timer: ReturnType<typeof setTimeout> | null = null
+	let idleResetTimer: ReturnType<typeof setTimeout> | null = null
+	let controller: AbortController | null = null
+	let lastSentHash: string | null = null

-  let _status: AutoSaveStatus = 'idle'
-  let _lastError: string | null = null
-  const statusSubs = new Set<(v: AutoSaveStatus) => void>()
-  const errorSubs = new Set<(v: string | null) => void>()
+	let _status: AutoSaveStatus = 'idle'
+	let _lastError: string | null = null
+	const statusSubs = new Set<(v: AutoSaveStatus) => void>()
+	const errorSubs = new Set<(v: string | null) => void>()

-  function setStatus(next: AutoSaveStatus) {
-    if (idleResetTimer) {
-      clearTimeout(idleResetTimer)
-      idleResetTimer = null
-    }
+	function setStatus(next: AutoSaveStatus) {
+		if (idleResetTimer) {
+			clearTimeout(idleResetTimer)
+			idleResetTimer = null
+		}

-    _status = next
-    statusSubs.forEach((fn) => fn(_status))
+		_status = next
+		statusSubs.forEach((fn) => fn(_status))

-    // Auto-transition from 'saved' to 'idle' after idleResetMs
-    if (next === 'saved') {
-      idleResetTimer = setTimeout(() => {
-        _status = 'idle'
-        statusSubs.forEach((fn) => fn(_status))
-        idleResetTimer = null
-      }, idleResetMs)
-    }
-  }
+		// Auto-transition from 'saved' to 'idle' after idleResetMs
+		if (next === 'saved') {
+			idleResetTimer = setTimeout(() => {
+				_status = 'idle'
+				statusSubs.forEach((fn) => fn(_status))
+				idleResetTimer = null
+			}, idleResetMs)
+		}
+	}

-  function prime(payload: TPayload) {
-    lastSentHash = safeHash(payload)
-  }
+	function prime(payload: TPayload) {
+		lastSentHash = safeHash(payload)
+	}

-  function schedule() {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => void run(), debounceMs)
-  }
+	function schedule() {
+		if (timer) clearTimeout(timer)
+		timer = setTimeout(() => void run(), debounceMs)
+	}

-  async function run() {
-    if (timer) {
-      clearTimeout(timer)
-      timer = null
-    }
+	async function run() {
+		if (timer) {
+			clearTimeout(timer)
+			timer = null
+		}

-    const payload = opts.getPayload()
-    if (!payload) return
+		const payload = opts.getPayload()
+		if (!payload) return

-    const hash = safeHash(payload)
-    if (lastSentHash && hash === lastSentHash) return
+		const hash = safeHash(payload)
+		if (lastSentHash && hash === lastSentHash) return

-    if (controller) controller.abort()
-    controller = new AbortController()
+		if (controller) controller.abort()
+		controller = new AbortController()

-    setStatus('saving')
-    _lastError = null
-    try {
-      const res = await opts.save(payload, { signal: controller.signal })
-      lastSentHash = hash
-      setStatus('saved')
-      if (opts.onSaved) opts.onSaved(res, { prime })
-    } catch (e: unknown) {
-      if (e?.name === 'AbortError') {
-        // Newer save superseded this one
-        return
-      }
-      if (typeof navigator !== 'undefined' && navigator.onLine === false) {
-        setStatus('offline')
-      } else {
-        setStatus('error')
-      }
-      _lastError = e?.message || 'Auto-save failed'
-      errorSubs.forEach((fn) => fn(_lastError))
-    }
-  }
+		setStatus('saving')
+		_lastError = null
+		try {
+			const res = await opts.save(payload, { signal: controller.signal })
+			lastSentHash = hash
+			setStatus('saved')
+			if (opts.onSaved) opts.onSaved(res, { prime })
+		} catch (e: any) {
+			if (e?.name === 'AbortError') {
+				// Newer save superseded this one
+				return
+			}
+			if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+				setStatus('offline')
+			} else {
+				setStatus('error')
+			}
+			_lastError = e?.message || 'Auto-save failed'
+			errorSubs.forEach((fn) => fn(_lastError))
+		}
+	}

-  function flush() {
-    return run()
-  }
+	function flush() {
+		return run()
+	}

-  function destroy() {
-    if (timer) clearTimeout(timer)
-    if (idleResetTimer) clearTimeout(idleResetTimer)
-    if (controller) controller.abort()
-  }
+	function destroy() {
+		if (timer) clearTimeout(timer)
+		if (idleResetTimer) clearTimeout(idleResetTimer)
+		if (controller) controller.abort()
+	}

-  return {
-    status: {
-      subscribe(run: (v: AutoSaveStatus) => void) {
-        run(_status)
-        statusSubs.add(run)
-        return () => statusSubs.delete(run)
-      }
-    },
-    lastError: {
-      subscribe(run: (v: string | null) => void) {
-        run(_lastError)
-        errorSubs.add(run)
-        return () => errorSubs.delete(run)
-      }
-    },
-    schedule,
-    flush,
-    destroy,
-    prime
-  }
+	return {
+		status: {
+			subscribe(run: (v: AutoSaveStatus) => void) {
+				run(_status)
+				statusSubs.add(run)
+				return () => statusSubs.delete(run)
+			}
+		},
+		lastError: {
+			subscribe(run: (v: string | null) => void) {
+				run(_lastError)
+				errorSubs.add(run)
+				return () => errorSubs.delete(run)
+			}
+		},
+		schedule,
+		flush,
+		destroy,
+		prime
+	}
 }

 function safeHash(obj: unknown): string {
-  try {
-    return JSON.stringify(obj)
-  } catch {
-    // Fallback for circular structures; not expected for form payloads
-    return String(obj)
-  }
+	try {
+		return JSON.stringify(obj)
+	} catch {
+		// Fallback for circular structures; not expected for form payloads
+		return String(obj)
+	}
 }
--- a/src/lib/admin/autoSaveLifecycle.ts
+++ b/src/lib/admin/autoSaveLifecycle.ts
@ -4,58 +4,58 @@ import type { AutoSaveController } from './autoSave'
 import type { AutoSaveStore } from './autoSave.svelte'

 interface AutoSaveLifecycleOptions {
-  isReady?: () => boolean
-  onFlushError?: (error: unknown) => void
-  enableShortcut?: boolean
+	isReady?: () => boolean
+	onFlushError?: (error: unknown) => void
+	enableShortcut?: boolean
 }

 export function initAutoSaveLifecycle(
-  controller: AutoSaveController | AutoSaveStore<unknown, unknown>,
-  options: AutoSaveLifecycleOptions = {}
+	controller: AutoSaveController | AutoSaveStore<any, any>,
+	options: AutoSaveLifecycleOptions = {}
 ) {
-  const { isReady = () => true, onFlushError, enableShortcut = true } = options
+	const { isReady = () => true, onFlushError, enableShortcut = true } = options

-  if (typeof window === 'undefined') {
-    onDestroy(() => controller.destroy())
-    return
-  }
+	if (typeof window === 'undefined') {
+		onDestroy(() => controller.destroy())
+		return
+	}

-  function handleKeydown(event: KeyboardEvent) {
-    if (!enableShortcut) return
-    if (!isReady()) return
-    const key = event.key.toLowerCase()
-    const isModifier = event.metaKey || event.ctrlKey
-    if (!isModifier || key !== 's') return
-    event.preventDefault()
-    controller.flush().catch((error) => {
-      onFlushError?.(error)
-    })
-  }
+	function handleKeydown(event: KeyboardEvent) {
+		if (!enableShortcut) return
+		if (!isReady()) return
+		const key = event.key.toLowerCase()
+		const isModifier = event.metaKey || event.ctrlKey
+		if (!isModifier || key !== 's') return
+		event.preventDefault()
+		controller.flush().catch((error) => {
+			onFlushError?.(error)
+		})
+	}

-  if (enableShortcut) {
-    document.addEventListener('keydown', handleKeydown)
-  }
+	if (enableShortcut) {
+		document.addEventListener('keydown', handleKeydown)
+	}

-  const stopNavigating = beforeNavigate(async (navigation) => {
-    if (!isReady()) return
-    navigation.cancel()
-    try {
-      await controller.flush()
-      navigation.retry()
-    } catch (error) {
-      onFlushError?.(error)
-    }
-  })
+	const stopNavigating = beforeNavigate(async (navigation) => {
+		if (!isReady()) return
+		navigation.cancel()
+		try {
+			await controller.flush()
+			navigation.retry()
+		} catch (error) {
+			onFlushError?.(error)
+		}
+	})

-  const stop = () => {
-    if (enableShortcut) {
-      document.removeEventListener('keydown', handleKeydown)
-    }
-    stopNavigating?.()
-    controller.destroy()
-  }
+	const stop = () => {
+		if (enableShortcut) {
+			document.removeEventListener('keydown', handleKeydown)
+		}
+		stopNavigating?.()
+		controller.destroy()
+	}

-  onDestroy(stop)
+	onDestroy(stop)

-  return { stop }
+	return { stop }
 }
--- a/src/lib/admin/draftStore.ts
+++ b/src/lib/admin/draftStore.ts
@ -1,51 +1,49 @@
 export type Draft<T = unknown> = { payload: T; ts: number }

 export function makeDraftKey(type: string, id: string | number) {
-  return `admin:draft:${type}:${id}`
+	return `admin:draft:${type}:${id}`
 }

 export function saveDraft<T>(key: string, payload: T) {
-  try {
-    const entry: Draft<T> = { payload, ts: Date.now() }
-    localStorage.setItem(key, JSON.stringify(entry))
-  } catch {
-    // Ignore quota or serialization errors
-  }
+	try {
+		const entry: Draft<T> = { payload, ts: Date.now() }
+		localStorage.setItem(key, JSON.stringify(entry))
+	} catch {
+		// Ignore quota or serialization errors
+	}
 }

 export function loadDraft<T = unknown>(key: string): Draft<T> | null {
-  try {
-    const raw = localStorage.getItem(key)
-    if (!raw) return null
-    return JSON.parse(raw) as Draft<T>
-  } catch {
-    return null
-  }
+	try {
+		const raw = localStorage.getItem(key)
+		if (!raw) return null
+		return JSON.parse(raw) as Draft<T>
+	} catch {
+		return null
+	}
 }

 export function clearDraft(key: string) {
-  try {
-    localStorage.removeItem(key)
-  } catch {
-    // Ignore storage errors
-  }
+	try {
+		localStorage.removeItem(key)
+	} catch {}
 }

 export function timeAgo(ts: number): string {
-  const diff = Date.now() - ts
-  const sec = Math.floor(diff / 1000)
-  if (sec < 5) return 'just now'
-  if (sec < 60) return `${sec} second${sec !== 1 ? 's' : ''} ago`
-  const min = Math.floor(sec / 60)
-  if (min < 60) return `${min} minute${min !== 1 ? 's' : ''} ago`
-  const hr = Math.floor(min / 60)
-  if (hr < 24) return `${hr} hour${hr !== 1 ? 's' : ''} ago`
-  const day = Math.floor(hr / 24)
-  if (day <= 29) {
-    if (day < 7) return `${day} day${day !== 1 ? 's' : ''} ago`
-    const wk = Math.floor(day / 7)
-    return `${wk} week${wk !== 1 ? 's' : ''} ago`
-  }
-  // Beyond 29 days, show a normal localized date
-  return new Date(ts).toLocaleDateString()
+	const diff = Date.now() - ts
+	const sec = Math.floor(diff / 1000)
+	if (sec < 5) return 'just now'
+	if (sec < 60) return `${sec} second${sec !== 1 ? 's' : ''} ago`
+	const min = Math.floor(sec / 60)
+	if (min < 60) return `${min} minute${min !== 1 ? 's' : ''} ago`
+	const hr = Math.floor(min / 60)
+	if (hr < 24) return `${hr} hour${hr !== 1 ? 's' : ''} ago`
+	const day = Math.floor(hr / 24)
+	if (day <= 29) {
+		if (day < 7) return `${day} day${day !== 1 ? 's' : ''} ago`
+		const wk = Math.floor(day / 7)
+		return `${wk} week${wk !== 1 ? 's' : ''} ago`
+	}
+	// Beyond 29 days, show a normal localized date
+	return new Date(ts).toLocaleDateString()
 }
--- a/src/lib/admin/listFilters.svelte.ts
+++ b/src/lib/admin/listFilters.svelte.ts
@ -127,38 +127,54 @@ export function createListFilters<T>(
 */
 export const commonSorts = {
 	/** Sort by date field, newest first */
-	dateDesc: <T>(field: keyof T) => (a: T, b: T) =>
-		new Date(b[field] as string).getTime() - new Date(a[field] as string).getTime(),
+	dateDesc:
+		<T>(field: keyof T) =>
+		(a: T, b: T) =>
+			new Date(b[field] as string).getTime() - new Date(a[field] as string).getTime(),

 	/** Sort by date field, oldest first */
-	dateAsc: <T>(field: keyof T) => (a: T, b: T) =>
-		new Date(a[field] as string).getTime() - new Date(b[field] as string).getTime(),
+	dateAsc:
+		<T>(field: keyof T) =>
+		(a: T, b: T) =>
+			new Date(a[field] as string).getTime() - new Date(b[field] as string).getTime(),

 	/** Sort by string field, A-Z */
-	stringAsc: <T>(field: keyof T) => (a: T, b: T) =>
-		String(a[field] || '').localeCompare(String(b[field] || '')),
+	stringAsc:
+		<T>(field: keyof T) =>
+		(a: T, b: T) =>
+			String(a[field] || '').localeCompare(String(b[field] || '')),

 	/** Sort by string field, Z-A */
-	stringDesc: <T>(field: keyof T) => (a: T, b: T) =>
-		String(b[field] || '').localeCompare(String(a[field] || '')),
+	stringDesc:
+		<T>(field: keyof T) =>
+		(a: T, b: T) =>
+			String(b[field] || '').localeCompare(String(a[field] || '')),

 	/** Sort by number field, ascending */
-	numberAsc: <T>(field: keyof T) => (a: T, b: T) =>
-		Number(a[field]) - Number(b[field]),
+	numberAsc:
+		<T>(field: keyof T) =>
+		(a: T, b: T) =>
+			Number(a[field]) - Number(b[field]),

 	/** Sort by number field, descending */
-	numberDesc: <T>(field: keyof T) => (a: T, b: T) =>
-		Number(b[field]) - Number(a[field]),
+	numberDesc:
+		<T>(field: keyof T) =>
+		(a: T, b: T) =>
+			Number(b[field]) - Number(a[field]),

 	/** Sort by status field, published first */
-	statusPublishedFirst: <T>(field: keyof T) => (a: T, b: T) => {
-		if (a[field] === b[field]) return 0
-		return a[field] === 'published' ? -1 : 1
-	},
+	statusPublishedFirst:
+		<T>(field: keyof T) =>
+		(a: T, b: T) => {
+			if (a[field] === b[field]) return 0
+			return a[field] === 'published' ? -1 : 1
+		},

 	/** Sort by status field, draft first */
-	statusDraftFirst: <T>(field: keyof T) => (a: T, b: T) => {
-		if (a[field] === b[field]) return 0
-		return a[field] === 'draft' ? -1 : 1
-	}
+	statusDraftFirst:
+		<T>(field: keyof T) =>
+		(a: T, b: T) => {
+			if (a[field] === b[field]) return 0
+			return a[field] === 'draft' ? -1 : 1
+		}
 }
--- a/src/lib/admin/useDraftRecovery.svelte.ts
+++ b/src/lib/admin/useDraftRecovery.svelte.ts
@ -1,7 +1,7 @@
 import { loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'

 export function useDraftRecovery<TPayload>(options: {
-	draftKey: () => string | null
+	draftKey: string | null
 	onRestore: (payload: TPayload) => void
 	enabled?: boolean
 }) {
@ -17,10 +17,9 @@ export function useDraftRecovery<TPayload>(options: {

 	// Auto-detect draft on mount using $effect
 	$effect(() => {
-		const key = options.draftKey()
-		if (!key || options.enabled === false) return
+		if (!options.draftKey || options.enabled === false) return

-		const draft = loadDraft<TPayload>(key)
+		const draft = loadDraft<TPayload>(options.draftKey)
 		if (draft) {
 			showPrompt = true
 			draftTimestamp = draft.ts
@ -44,21 +43,19 @@ export function useDraftRecovery<TPayload>(options: {
 		draftTimeText,

 		restore() {
-			const key = options.draftKey()
-			if (!key) return
-			const draft = loadDraft<TPayload>(key)
+			if (!options.draftKey) return
+			const draft = loadDraft<TPayload>(options.draftKey)
 			if (!draft) return

 			options.onRestore(draft.payload)
 			showPrompt = false
-			clearDraft(key)
+			clearDraft(options.draftKey)
 		},

 		dismiss() {
-			const key = options.draftKey()
-			if (!key) return
+			if (!options.draftKey) return
 			showPrompt = false
-			clearDraft(key)
+			clearDraft(options.draftKey)
 		}
 	}
 }
--- a/src/lib/admin/useFormGuards.svelte.ts
+++ b/src/lib/admin/useFormGuards.svelte.ts
@ -2,20 +2,18 @@ import { beforeNavigate } from '$app/navigation'
 import { toast } from '$lib/stores/toast'
 import type { AutoSaveStore } from '$lib/admin/autoSave.svelte'

-export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
-	autoSave: AutoSaveStore<TPayload, unknown> | null
-) {
+export function useFormGuards(autoSave: AutoSaveStore<any, any> | null) {
 	if (!autoSave) return // No guards needed for create mode

 	// Navigation guard: flush autosave before route change
-	beforeNavigate(async (_navigation) => {
+	beforeNavigate(async (navigation) => {
 		// If already saved, allow navigation immediately
 		if (autoSave.status === 'saved') return

 		// Otherwise flush pending changes
 		try {
 			await autoSave.flush()
-		} catch (error) {
+		} catch (error: any) {
 			console.error('Autosave flush failed:', error)
 			toast.error('Failed to save changes')
 		}
@ -23,12 +21,8 @@ export function useFormGuards<TPayload = unknown, _TResponse = unknown>(

 	// Warn before closing browser tab/window if unsaved changes
 	$effect(() => {
-		// Capture autoSave in closure to avoid non-null assertions
-		const store = autoSave
-		if (!store) return
-
 		function handleBeforeUnload(event: BeforeUnloadEvent) {
-			if (store.status !== 'saved') {
+			if (autoSave!.status !== 'saved') {
 				event.preventDefault()
 				event.returnValue = ''
 			}
@ -40,17 +34,13 @@ export function useFormGuards<TPayload = unknown, _TResponse = unknown>(

 	// Cmd/Ctrl+S keyboard shortcut for immediate save
 	$effect(() => {
-		// Capture autoSave in closure to avoid non-null assertions
-		const store = autoSave
-		if (!store) return
-
 		function handleKeydown(event: KeyboardEvent) {
 			const key = event.key.toLowerCase()
 			const isModifier = event.metaKey || event.ctrlKey

 			if (isModifier && key === 's') {
 				event.preventDefault()
-				store.flush().catch((error) => {
+				autoSave!.flush().catch((error: any) => {
 					console.error('Autosave flush failed:', error)
 					toast.error('Failed to save changes')
 				})
--- a/src/lib/components/AppleMusicSearchModal.svelte
+++ b/src/lib/components/AppleMusicSearchModal.svelte
@ -7,7 +7,7 @@
 	let searchQuery = $state('')
 	let storefront = $state('us')
 	let isSearching = $state(false)
-	let searchResults = $state<unknown>(null)
+	let searchResults = $state<any>(null)
 	let searchError = $state<string | null>(null)
 	let responseTime = $state<number>(0)

@ -91,15 +91,8 @@
 </script>

 {#if isOpen}
-	<div class="modal-overlay" role="presentation" onclick={close}>
-		<div
-			class="modal-container"
-			role="dialog"
-			aria-modal="true"
-			tabindex="-1"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-		>
+	<div class="modal-overlay" onclick={close}>
+		<div class="modal-container" onclick={(e) => e.stopPropagation()}>
 			<div class="modal-header">
 				<h2>Apple Music API Search</h2>
 				<button class="close-btn" onclick={close} aria-label="Close">
@ -144,7 +137,8 @@

 				{#if searchError}
 					<div class="error-message">
-						<strong>Error:</strong> {searchError}
+						<strong>Error:</strong>
+						{searchError}
 					</div>
 				{/if}

@ -159,13 +153,7 @@
 						<h3>Results</h3>

 						<div class="result-tabs">
-							<button 
-								class="tab" 
-								class:active={true}
-								onclick={() => {}}
-							>
-								Raw JSON
-							</button>
+							<button class="tab" class:active={true} onclick={() => {}}> Raw JSON </button>
 							<button
 								class="copy-btn"
 								onclick={async () => {
@ -284,7 +272,8 @@
 				margin-bottom: $unit-half;
 			}

-			input, select {
+			input,
+			select {
 				width: 100%;
 				background: rgba(255, 255, 255, 0.1);
 				border: 1px solid rgba(255, 255, 255, 0.2);
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@ -1,5 +1,5 @@
 <script>
-	import { onMount } from 'svelte'
+	import { onMount, onDestroy } from 'svelte'
 	import { Spring } from 'svelte/motion'
 	import { musicStream } from '$lib/stores/music-stream'
 	import AvatarSVG from './AvatarSVG.svelte'
@ -12,7 +12,6 @@
 	let isBlinking = $state(false)
 	let isPlayingMusic = $state(forcePlayingMusic)

-
 	const scale = new Spring(1, {
 		stiffness: 0.1,
 		damping: 0.125
@ -86,7 +85,6 @@

 <div
 	class="face-container"
-	role="presentation"
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
 	style="transform: scale({scale.current})"
--- a/src/lib/components/AvatarSVG.svelte
+++ b/src/lib/components/AvatarSVG.svelte
@ -33,28 +33,28 @@
 		<path
 			d="M113.14 341.08C113.14 341.08 97.1402 334.75 97.4702 322.08C97.4702 322.08 98.4702 310.42 106.81 309.42C106.81 309.42 86.1402 309.75 86.1402 295.75C86.1402 295.75 86.1402 283.08 97.4702 283.42C97.4702 283.42 78.4702 275.42 78.4702 261.75C78.4702 249.08 85.8102 240.75 95.8102 240.75C95.8102 240.75 80.4702 232.08 80.4702 220.08C80.4702 220.08 79.4702 209.75 85.1402 204.75C85.1402 204.75 76.1402 184.08 83.4702 167.42C83.4702 167.42 86.1402 156.75 104.14 153.75C104.14 153.75 98.1402 137.42 107.47 126.75C107.47 126.75 112.47 118.75 125.47 118.08C125.47 118.08 127.47 102.26 141.47 98.08C141.47 98.08 157.03 97.08 168.69 102.08C168.69 102.08 177.14 79.43 195.14 72.76C195.14 72.76 214.34 65.76 228.34 78.37C228.34 78.37 230.47 57.09 247.97 57.09C265.47 57.09 272.66 72.17 272.66 72.17C272.66 72.17 277.72 59.04 294.47 64.09C312.14 69.43 312.47 93.43 312.47 93.43C312.47 93.43 326.47 78.76 345.81 84.09C353.92 86.33 357.14 97.76 354.81 106.43C354.81 106.43 362.47 98.09 369.81 101.43C377.15 104.77 391.47 117.09 382.81 137.76C382.81 137.76 401.47 135.43 410.14 150.09C410.14 150.09 424.14 169.76 407.14 184.76C407.14 184.76 428.47 183.09 432.47 209.09C432.47 209.09 434.14 229.76 413.47 236.43C413.47 236.43 430.81 237.76 430.47 253.76C430.47 253.76 432.77 269.76 411.77 276.76C411.77 276.76 423.43 285.76 421.1 297.43C417.1 317.43 391.43 315.43 391.43 315.43C391.43 315.43 405.43 320.09 403.43 328.43C403.43 328.43 399.77 338.43 386.1 336.43C386.1 336.43 395.1 345.43 387.1 352.76C379.1 360.09 369.43 352.76 369.43 352.76C369.43 352.76 374.81 368.89 364.08 373.23C353.56 377.49 344.52 369.41 342.86 367.08C341.2 364.75 346.43 377.76 332.1 379.08C317.77 380.4 316.43 366.08 316.43 366.08C316.43 366.08 317.43 352.75 329.1 355.42C329.1 355.42 320.43 352.42 321.1 344.42C321.77 336.42 330.77 333.42 330.77 333.42C330.77 333.42 318.77 339.08 317.1 329.42C315.43 319.76 325.43 309.75 325.43 309.75C325.43 309.75 311.43 311.42 310.1 297.75C310.1 297.75 309.77 282.75 325.77 277.08C325.77 277.08 309.1 274.75 309.43 256.08C309.76 237.41 326.1 231.42 326.1 231.42C326.1 231.42 316.77 238.42 307.43 230.75C298.09 223.08 302.1 210.08 302.1 210.08C302.1 210.08 298.43 221.84 283.1 218.08C267.77 214.32 271.77 200.08 271.77 200.08C271.77 200.08 263.43 215.08 250.77 213.42C238.11 211.76 237.1 196.75 237.1 196.75C237.1 196.75 232.1 205.42 225.43 204.75C225.43 204.75 212.77 205.08 213.43 186.75C213.43 186.75 213.1 204.08 195.77 207.42C178.44 210.76 177.1 193.75 177.1 193.75C177.1 193.75 179.1 208.42 162.43 214.75C145.76 221.08 143.43 206.42 143.43 206.42C143.43 206.42 148.1 217.08 139.43 229.42C130.76 241.76 131.1 236.42 131.1 236.42C132.79 243.396 133.354 250.596 132.77 257.75C131.77 269.42 125.1 286.08 121.77 305.42C119.756 317.082 118.972 328.924 119.43 340.75L113.14 341.08Z"
 			fill="#935C0A"
-			style="fill:color(display-p3 0.5765 0.3608 0.0392);fill-opacity:1;"
+			style="fill:#935C0A;fill:color(display-p3 0.5765 0.3608 0.0392);fill-opacity:1;"
 		/>
 		<path
 			d="M331.19 339.25C335.93 337.62 335.62 334.81 333.31 333.19C331 331.57 327.13 332.56 326.19 333.94C325.25 335.32 323.05 335.05 321.75 332.81C317.63 325.7 324.31 316.12 328.69 314.69C334.69 312.69 332.38 309.25 332.38 309.25C332.01 308.647 331.462 308.174 330.812 307.895C330.162 307.616 329.442 307.544 328.75 307.69C326.94 308.12 326.12 308.88 324.75 308.88C320 308.88 315.75 304.5 315.88 298.44C316.01 292.38 321.56 283.31 326.81 282.5C332.06 281.69 331.28 278.95 331.28 278.95C331.28 278.95 331.91 276.88 326.81 275.81C317.34 273.81 314 270 313.63 258C313.26 246 318.75 238.56 324.44 237.21C333.68 235.02 332 229.31 331.38 228.62C330.828 228.254 330.156 228.114 329.503 228.232C328.851 228.349 328.27 228.714 327.88 229.25C327.19 230.5 324.1 235.15 315.04 232.08C300.68 227.23 306.94 212.08 307.94 209.38C308.94 206.68 304.88 206.94 304.88 206.94C304.88 206.94 300.5 206.62 299.81 208.62C298.94 211.17 294.44 219.81 285.69 218.06C274.85 215.9 274.81 205.94 275.12 202.56C275.43 199.18 274.81 198.88 273.12 198.88C271.43 198.88 269.69 198.81 269 201.69C266.43 212.44 251.94 212.88 251.94 212.88C238.44 212.56 239.18 196.15 239.75 191.88C240.44 186.75 240.44 186.79 239.49 186.88C238 186.97 236.38 190.28 236.38 192.41C236.481 194.484 235.981 196.543 234.94 198.34C233.75 200.34 231.25 204.65 226.31 204.47C221.37 204.29 218.75 199.47 218.69 194.59C218.63 190.34 218.88 185.59 218.88 185.59C218.81 184.28 218 182.72 216.69 183.28C215.38 183.84 214.19 184.41 212.31 185.41C211.77 185.729 211.339 186.202 211.071 186.769C210.804 187.336 210.713 187.971 210.81 188.59L211 191.97C211.06 195.47 207.89 199.66 205.62 201.72C198.75 207.97 191.7 207.91 188.27 204.41C184.84 200.91 184.19 199.34 183.27 195.47C182.74 193.28 181.27 192.72 180.46 193.03C179.65 193.34 176.71 194.65 176.71 194.65C176.437 194.798 176.198 195 176.007 195.244C175.816 195.489 175.678 195.77 175.601 196.071C175.523 196.371 175.509 196.684 175.559 196.991C175.609 197.297 175.722 197.589 175.89 197.85C176.62 199.29 174.82 202.85 174.08 203.91C171.94 207.13 165.4 213.47 160.02 214.36C154.43 215.29 151.35 209.36 149.85 206.36C148.35 203.36 145.02 204.53 142.02 206.36C139.02 208.19 139.85 210.36 139.85 210.36C141.85 216.64 139.64 224.91 137.52 228.7C132.19 238.21 125.52 235.7 123.52 235.15C121.52 234.6 120.02 236.7 122.69 239.86C125.36 243.02 132.1 241.61 132.1 241.61C132.1 241.61 126.85 272.2 122.19 289.7C117.53 307.2 114.52 329.36 114.52 340.7C114.52 352.04 116.69 382.86 145.35 399.7C174.01 416.54 199.52 413.53 208.35 412.03C208.35 412.03 221.02 409.52 226.19 406.53C226.19 406.53 228.98 404.65 229.19 408.53C229.52 414.78 227.5 426.53 222.85 433.2C222.85 433.2 218.19 440.63 240.52 440.63C249.19 440.63 254.69 439.54 264.85 432.03C264.85 432.03 266.85 431.36 266.35 426.36C265.85 421.36 265.68 410.86 266.43 407.36C266.43 407.36 304.08 399.59 322.07 381.44L322.45 374.6C316.79 366.23 326.14 359.78 327.21 360.34C328.28 360.9 328.96 361.03 331.21 360.78C333.46 360.53 333.71 359.41 333.27 358.03C332.83 356.65 330.96 355.15 327.4 353.72C323.84 352.29 327.38 340.56 331.19 339.25ZM321.08 340.19C317.65 342.62 317.33 349.33 320.4 352.52C321.34 353.52 321.28 354.52 320.4 354.77C311.92 357.03 310.87 366.54 315.81 374.85C317.46 377.62 316.56 378.27 316.56 378.27C300.31 394.02 278.19 400.5 267.62 402.56C264.52 403.17 262.38 404.44 261.15 409.1C259.63 414.86 259.23 427.27 259.23 427.27C247.23 437.27 230.31 434.69 232.31 432.19C234.31 429.69 235.31 424.93 235.31 424.93C235.31 424.93 236.54 421.26 238.25 408.38C239.44 399.44 232.82 394.82 222.53 398.5C200.6 406.33 174.98 406.25 159.81 399.44C137.55 389.44 127.42 374.23 125.31 352.94C123.2 331.65 123.92 324.5 131.31 288.86C138.7 253.22 136.56 238.15 136.56 238.15C147.19 234.15 148.5 217.25 148.5 217.25C162.81 227.88 180.75 204.88 180.75 204.88C188.81 216.31 206.06 212.14 213.88 200.31C215.25 208.88 232.88 213.44 237.25 199.75C235.19 216.06 255.94 224.25 269.5 208.88C270.18 208.1 270.82 208.5 271 209.44C273.65 223.5 288.73 226.35 297.4 221.44C299.99 219.96 299.94 221.5 299.94 221.5C298.86 232.24 313.88 236.5 317.09 236.2C317.9 236.14 318.09 236.75 317.69 236.98C311.59 240.98 308.39 247.54 307.46 254.37C306.13 264.17 310.63 274.04 316.88 277.14C320.16 278.76 318.23 280.14 318.23 280.14C310.9 286.06 308.56 293.93 308.48 297.73C308.4 301.53 310.81 311.14 317.81 311.98C320.3 312.27 318.98 313.89 318.98 313.89C313.13 321.33 313.65 335.56 319.48 338.23C322.07 339.37 322.21 339.39 321.08 340.19Z"
 			fill="#070610"
-			style="fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
+			style="fill:#070610;fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
 		/>
 		<path
 			d="M116.48 346.51C97.2602 345.19 83.3802 330.08 93.0002 312.67C80.3802 308.62 75.2502 293.25 85.2502 285.12C73.1202 279.62 63.6202 258.5 84.6202 238.38C72.2402 230.38 73.7502 213.38 82.0002 205.5C74.0002 199.25 72.8802 159 98.7502 154.5C92.8802 135.12 111 115.24 122.25 118C124.88 103.76 144.25 87 165.62 99C167.92 100.29 168.51 100.54 169.5 97.25C172.25 88.12 198.5 56.01 223.12 73.88C227.5 76.38 227.93 75.88 228 72.25C228.25 59.88 256.53 45.5 270.75 67.25C272.88 70.5 273.12 70 275.25 67.38C277.38 64.76 303.12 48.25 315.75 86.88C339.12 74.12 359.25 84 359.25 101.38C378.12 94.5 394 116.75 390.12 136.62C413.5 136.88 428.5 160.25 417.88 184.12C442.88 194.25 447.5 226.5 422.5 236.12C442.88 246.75 438.92 271.48 420.12 280.88C418.62 281.62 419.03 282.19 419.5 282.5C425.5 286.5 434.85 317.44 404.5 319.12C400 319.38 400.38 320.88 401.75 322.12C403.12 323.36 415.12 338.12 394.5 340.75C401.38 356.12 384.5 363.5 377.38 362.25C379.25 370.75 366 381.88 348.62 376.5C346.38 385.73 324.88 385 319 379.5C317.873 378.546 316.965 377.36 316.34 376.022C315.715 374.684 315.388 373.227 315.38 371.75L320.63 369.6C320.63 369.6 320.89 377.84 329.73 377.73C338.73 377.61 340.54 373.98 340.02 368.73C339.75 365.98 341.75 366.6 341.75 366.6C341.75 366.6 344.62 367.1 345.75 365.86C346.88 364.62 348.25 364.86 348.75 366.1C349.25 367.34 352.88 375.1 362.62 370.48C372.36 365.86 368 359.25 367 357.38C366 355.51 366.12 353.38 367 353.12C368.606 353.008 370.109 352.294 371.21 351.12C372.6 349.48 373.97 353.4 375.28 354.83C376.41 356.04 385.28 355.56 385.28 345.92C385.28 339.16 381.78 336.04 381.78 336.04C381.78 336.04 399.65 335.54 399.91 329.16C400.17 322.78 393.51 321.76 391.28 321.16C390.227 320.903 389.312 320.254 388.721 319.345C388.13 318.437 387.908 317.337 388.099 316.271C388.29 315.204 388.881 314.25 389.75 313.603C390.62 312.957 391.704 312.666 392.78 312.79C396.89 313.18 417.15 312.17 417.15 295.79C417.15 284.29 410.28 283.16 410.28 283.16C405.53 281.79 407.03 273.36 411.96 273.44C418.53 273.54 426.91 264.66 426.65 253.92C426.65 253.92 428.2 236.68 412.03 239.79C405.53 241.04 406.78 236.92 409.15 234.79C411.52 232.66 437.69 216.58 424.91 199.54C415.53 187.04 407.86 190.54 407.86 190.54C403.53 191.93 400.57 184.54 404.91 181.3C410.15 177.43 421.53 145.93 389.28 143.43C387.15 143.26 386.34 143.95 385.65 145.43C384.96 146.91 382.91 146.15 382.78 144.75C382.68 143.63 382.25 143.39 381.27 143.75C380.29 144.11 376.78 143.22 380.65 137.35C385.49 130.02 378.91 105.88 366.15 105.6C360.53 105.48 355.49 110.43 353.15 110.69C351.5 110.88 349.62 109.89 350.78 103.1C351.53 98.72 348.56 86.18 331.28 88.1C324.53 88.85 318.94 90.25 315.53 95.1C313.9 97.41 312.46 97.96 310.15 97.85C306.97 97.7 305.41 95.1 305.91 89.35C306.41 83.6 299.66 68.48 287.91 68.48C282.15 68.48 275.91 73.1 272.03 77.35C268.28 71.72 258.61 55.77 241.53 63.48C231.25 68 230.62 78.62 230.75 80.75C230.88 82.88 228.5 83.88 226.12 82C223.74 80.12 198 57.5 174.88 99C170.74 106.43 169.48 108.56 163.88 104.88C159.5 102 133.34 95.49 129.75 118.38C128.75 124.75 127.25 125.38 119.15 125.13C113.28 124.95 100.88 136.75 108.88 157.75C88.3802 162.12 83.5602 169.75 83.8802 185.25C84.1202 197.75 85.6202 202.79 88.6202 205.12C88.6202 205.12 89.7502 205.25 87.8802 208.38C86.0102 211.51 77.8202 228.91 102.12 240.12C103.75 240.88 104 244.38 101 244.38C98.0002 244.38 81.8802 250.25 82.1202 263.25C82.3602 276.25 94.0002 282 99.1202 282.25C104.24 282.5 102.5 287.88 99.2502 287.75C96.0002 287.62 90.2502 291.38 90.1202 297.12C89.9902 302.86 93.0002 307.22 101.5 307.5C107.37 307.69 111.21 310.14 111.88 311.62C113 314.12 108 312.38 105.62 313.62C103.24 314.86 95.4802 333.94 115.16 340.22L116.48 346.51Z"
 			fill="#060500"
-			style="fill:color(display-p3 0.0235 0.0196 0.0000);fill-opacity:1;"
+			style="fill:#060500;fill:color(display-p3 0.0235 0.0196 0.0000);fill-opacity:1;"
 		/>

 		<path
 			d="M365.31 267.69C360.31 267.44 353.69 268.25 350.69 271C351.75 261.75 348 261.18 345 261C342 260.82 342.25 263.79 342.25 263.79C342.25 263.79 349.5 274.54 346.25 315.79C349.238 314.474 351.828 312.396 353.759 309.763C355.69 307.13 356.894 304.035 357.25 300.79C357.25 300.79 362 298.34 365.5 298.44C369 298.54 380 295.54 379.75 284.04C379.5 272.54 370.31 267.94 365.31 267.69ZM360.56 293C357.06 294.69 357 292.81 357.06 290.88C357.12 288.95 357.06 284.25 355.69 282.69C355.295 282.349 355.038 281.875 354.968 281.357C354.898 280.839 355.02 280.314 355.31 279.88C355.31 279.88 369.69 272.56 370.12 279.38C370.55 286.2 364.06 291.31 360.56 293Z"
 			fill="#070610"
-			style="fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
+			style="fill:#070610;fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
 		/>
 		<path
 			d="M355.31 279.88C355.019 280.314 354.898 280.839 354.968 281.357C355.038 281.875 355.294 282.349 355.69 282.69C357.06 284.25 357.12 288.94 357.06 290.88C357 292.82 357.06 294.69 360.56 293C364.06 291.31 370.56 286.19 370.12 279.38C369.68 272.57 355.31 279.88 355.31 279.88Z"
 			fill="#C3915E"
-			style="fill:color(display-p3 0.7647 0.5686 0.3686);fill-opacity:1;"
+			style="fill:#C3915E;fill:color(display-p3 0.7647 0.5686 0.3686);fill-opacity:1;"
 		/>

 		<!-- Face slot -->
@ -106,19 +106,19 @@
 			<stop
 				stop-color="#E86A58"
 				stop-opacity="0.18"
-				style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
+				style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
 			/>
 			<stop
 				offset="0.3"
 				stop-color="#E86A58"
 				stop-opacity="0.16"
-				style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
+				style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
 			/>
 			<stop
 				offset="0.63"
 				stop-color="#E86A58"
 				stop-opacity="0.1"
-				style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
+				style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
 			/>
 			<stop
 				offset="0.99"
@ -144,19 +144,19 @@
 			<stop
 				stop-color="#E86A58"
 				stop-opacity="0.18"
-				style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
+				style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
 			/>
 			<stop
 				offset="0.3"
 				stop-color="#E86A58"
 				stop-opacity="0.16"
-				style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
+				style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
 			/>
 			<stop
 				offset="0.63"
 				stop-color="#E86A58"
 				stop-opacity="0.1"
-				style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
+				style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
 			/>
 			<stop
 				offset="0.99"
--- a/src/lib/components/DebugPanel.svelte
+++ b/src/lib/components/DebugPanel.svelte
@ -5,9 +5,11 @@
 	import { toast } from 'svelte-sonner'

 	// Import SVG icons
+	import SettingsIcon from '$icons/settings.svg'
 	import CheckIcon from '$icons/check.svg'
 	import XIcon from '$icons/x.svg'
 	import TrashIcon from '$icons/trash.svg'
+	import ClockIcon from '$icons/clock.svg'
 	import LoaderIcon from '$icons/loader.svg'
 	import AppleMusicSearchModal from './AppleMusicSearchModal.svelte'

@ -40,7 +42,7 @@
 	let clearingAlbums = $state(new Set<string>())

 	// Search modal reference
-	let searchModal: AppleMusicSearchModal | undefined = $state.raw()
+	let searchModal: AppleMusicSearchModal

 	// Subscribe to music stream
 	$effect(() => {
@ -49,18 +51,25 @@
 			connected = state.connected

 			// Flash indicator when update is received
-			if (state.lastUpdate && (!lastUpdate || state.lastUpdate.getTime() !== lastUpdate.getTime())) {
+			if (
+				state.lastUpdate &&
+				(!lastUpdate || state.lastUpdate.getTime() !== lastUpdate.getTime())
+			) {
 				updateFlash = true
-				setTimeout(() => updateFlash = false, 500)
+				setTimeout(() => (updateFlash = false), 500)
 			}

 			lastUpdate = state.lastUpdate

 			// Calculate smart interval based on track remaining time
-			const nowPlayingAlbum = state.albums.find(a => a.isNowPlaying)
-			if (nowPlayingAlbum?.nowPlayingTrack && nowPlayingAlbum.appleMusicData?.tracks && nowPlayingAlbum.lastScrobbleTime) {
+			const nowPlayingAlbum = state.albums.find((a) => a.isNowPlaying)
+			if (
+				nowPlayingAlbum?.nowPlayingTrack &&
+				nowPlayingAlbum.appleMusicData?.tracks &&
+				nowPlayingAlbum.lastScrobbleTime
+			) {
 				const track = nowPlayingAlbum.appleMusicData.tracks.find(
-					t => t.name === nowPlayingAlbum.nowPlayingTrack
+					(t) => t.name === nowPlayingAlbum.nowPlayingTrack
 				)

 				if (track?.durationMs) {
@ -107,7 +116,7 @@
 		// Calculate initial remaining time
 		const calculateRemaining = () => {
 			const elapsed = Date.now() - lastUpdate.getTime()
-			const remaining = (updateInterval * 1000) - elapsed
+			const remaining = updateInterval * 1000 - elapsed
 			return Math.max(0, Math.ceil(remaining / 1000))
 		}

@ -182,12 +191,12 @@
 		try {
 			const response = await fetch('/api/admin/debug/clear-cache', {
 				method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
+				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({ key: albumKey })
 			})

 			if (response.ok) {
-				await response.json()
+				const result = await response.json()
 				toast.success(`Cleared cache for "${album.name}"`)
 			} else {
 				toast.error(`Failed to clear cache for "${album.name}"`)
@ -211,13 +220,7 @@

 {#if dev}
 	<div class="debug-panel" class:minimized={isMinimized}>
-		<div
-			class="debug-header"
-			role="button"
-			tabindex="0"
-			onclick={() => (isMinimized = !isMinimized)}
-			onkeydown={(e) => e.key === 'Enter' && (isMinimized = !isMinimized)}
-		>
+		<div class="debug-header" onclick={() => (isMinimized = !isMinimized)}>
 			<h3>Debug Panel</h3>
 			<button class="minimize-btn" aria-label={isMinimized ? 'Expand' : 'Minimize'}>
 				{isMinimized ? '▲' : '▼'}
@ -230,21 +233,21 @@
 					<button
 						class="tab"
 						class:active={activeTab === 'nowplaying'}
-						onclick={() => activeTab = 'nowplaying'}
+						onclick={() => (activeTab = 'nowplaying')}
 					>
 						Now Playing
 					</button>
 					<button
 						class="tab"
 						class:active={activeTab === 'albums'}
-						onclick={() => activeTab = 'albums'}
+						onclick={() => (activeTab = 'albums')}
 					>
 						Albums
 					</button>
 					<button
 						class="tab"
 						class:active={activeTab === 'cache'}
-						onclick={() => activeTab = 'cache'}
+						onclick={() => (activeTab = 'cache')}
 					>
 						Cache
 					</button>
@ -255,13 +258,21 @@
 						<div class="section">
 							<h4>Connection</h4>
 							<p class="status" class:connected>
-								Status: {#if connected}<CheckIcon class="icon status-icon success" /> Connected{:else}<XIcon class="icon status-icon error" /> Disconnected{/if}
+								Status: {#if connected}<CheckIcon class="icon status-icon success" /> Connected{:else}<XIcon
+										class="icon status-icon error"
+									/> Disconnected{/if}
 							</p>
 							<p class:flash={updateFlash}>
 								Last Update: {lastUpdate ? lastUpdate.toLocaleTimeString() : 'Never'}
 							</p>
 							<p>Next Update: {formatTime(nextUpdateIn)}</p>
-							<p>Interval: {updateInterval}s {trackRemainingTime > 0 ? `(smart mode)` : nowPlaying ? '(fast mode)' : '(normal)'}</p>
+							<p>
+								Interval: {updateInterval}s {trackRemainingTime > 0
+									? `(smart mode)`
+									: nowPlaying
+										? '(fast mode)'
+										: '(normal)'}
+							</p>
 							{#if trackRemainingTime > 0}
 								<p>Track Remaining: {formatTime(trackRemainingTime)}</p>
 							{/if}
@ -278,7 +289,10 @@
 									{/if}
 									{#if nowPlaying.album.appleMusicData}
 										<p class="preview">
-											<span>Preview:</span> {#if nowPlaying.album.appleMusicData.previewUrl}<CheckIcon class="icon success" /> Available{:else}<XIcon class="icon error" /> Not found{/if}
+											<span>Preview:</span>
+											{#if nowPlaying.album.appleMusicData.previewUrl}<CheckIcon
+													class="icon success"
+												/> Available{:else}<XIcon class="icon error" /> Not found{/if}
 										</p>
 									{/if}
 								</div>
@ -294,16 +308,16 @@
 							<div class="albums-list">
 								{#each albums as album}
 									{@const albumId = `${album.artist.name}:${album.name}`}
-									<div class="album-item" class:playing={album.isNowPlaying} class:expanded={expandedAlbumId === albumId}>
-										<div
-										class="album-header"
-										role="button"
-										tabindex="0"
-										onclick={() => (expandedAlbumId = expandedAlbumId === albumId ? null : albumId)}
-										onkeydown={(e) =>
-											e.key === 'Enter' &&
-											(expandedAlbumId = expandedAlbumId === albumId ? null : albumId)}
+									<div
+										class="album-item"
+										class:playing={album.isNowPlaying}
+										class:expanded={expandedAlbumId === albumId}
 									>
+										<div
+											class="album-header"
+											onclick={() =>
+												(expandedAlbumId = expandedAlbumId === albumId ? null : albumId)}
+										>
 											<div class="album-content">
 												<div class="album-info">
 													<span class="name">{album.name}</span>
@ -318,7 +332,9 @@
 															{album.appleMusicData.tracks?.length || 0} tracks
 														</span>
 														<span class="meta-item">
-															{#if album.appleMusicData.previewUrl}<CheckIcon class="icon success inline" /> Preview{:else}<XIcon class="icon error inline" /> No preview{/if}
+															{#if album.appleMusicData.previewUrl}<CheckIcon
+																	class="icon success inline"
+																/> Preview{:else}<XIcon class="icon error inline" /> No preview{/if}
 														</span>
 													{:else}
 														<span class="meta-item">No Apple Music data</span>
@ -327,7 +343,10 @@
 											</div>
 											<button
 												class="clear-cache-btn"
-												onclick={(e) => { e.stopPropagation(); clearAlbumCache(album) }}
+												onclick={(e) => {
+													e.stopPropagation()
+													clearAlbumCache(album)
+												}}
 												disabled={clearingAlbums.has(albumId)}
 												title="Clear Apple Music cache for this album"
 											>
@ -345,9 +364,18 @@
 													{#if album.appleMusicData.searchMetadata}
 														<h5>Search Information</h5>
 														<div class="search-metadata">
-															<p><strong>Search Query:</strong> <code>{album.appleMusicData.searchMetadata.searchQuery}</code></p>
-															<p><strong>Search Time:</strong> {new Date(album.appleMusicData.searchMetadata.searchTime).toLocaleString()}</p>
-															<p><strong>Status:</strong> 
+															<p>
+																<strong>Search Query:</strong>
+																<code>{album.appleMusicData.searchMetadata.searchQuery}</code>
+															</p>
+															<p>
+																<strong>Search Time:</strong>
+																{new Date(
+																	album.appleMusicData.searchMetadata.searchTime
+																).toLocaleString()}
+															</p>
+															<p>
+																<strong>Status:</strong>
 																{#if album.appleMusicData.searchMetadata.found}
 																	<CheckIcon class="icon success inline" /> Found
 																{:else}
@ -355,59 +383,76 @@
 																{/if}
 															</p>
 															{#if album.appleMusicData.searchMetadata.error}
-																<p><strong>Error:</strong> <span class="error-text">{album.appleMusicData.searchMetadata.error}</span></p>
+																<p>
+																	<strong>Error:</strong>
+																	<span class="error-text"
+																		>{album.appleMusicData.searchMetadata.error}</span
+																	>
+																</p>
 															{/if}
 														</div>
 													{/if}

 													{#if album.appleMusicData.appleMusicId}
 														<h5>Apple Music Details</h5>
-														<p><strong>Apple Music ID:</strong> {album.appleMusicData.appleMusicId}</p>
+														<p>
+															<strong>Apple Music ID:</strong>
+															{album.appleMusicData.appleMusicId}
+														</p>
 													{/if}

-												{#if album.appleMusicData.releaseDate}
-													<p><strong>Release Date:</strong> {album.appleMusicData.releaseDate}</p>
-												{/if}
+													{#if album.appleMusicData.releaseDate}
+														<p><strong>Release Date:</strong> {album.appleMusicData.releaseDate}</p>
+													{/if}

-												{#if album.appleMusicData.recordLabel}
-													<p><strong>Label:</strong> {album.appleMusicData.recordLabel}</p>
-												{/if}
+													{#if album.appleMusicData.recordLabel}
+														<p><strong>Label:</strong> {album.appleMusicData.recordLabel}</p>
+													{/if}

-												{#if album.appleMusicData.genres?.length}
-													<p><strong>Genres:</strong> {album.appleMusicData.genres.join(', ')}</p>
-												{/if}
+													{#if album.appleMusicData.genres?.length}
+														<p><strong>Genres:</strong> {album.appleMusicData.genres.join(', ')}</p>
+													{/if}

-												{#if album.appleMusicData.previewUrl}
-													<p><strong>Preview URL:</strong> <code>{album.appleMusicData.previewUrl}</code></p>
-												{/if}
+													{#if album.appleMusicData.previewUrl}
+														<p>
+															<strong>Preview URL:</strong>
+															<code>{album.appleMusicData.previewUrl}</code>
+														</p>
+													{/if}

-												{#if album.appleMusicData.tracks?.length}
-													<div class="tracks-section">
-														<h6>Tracks ({album.appleMusicData.tracks.length})</h6>
-														<div class="tracks-list">
-															{#each album.appleMusicData.tracks as track, i}
-																<div class="track-item">
-																	<span class="track-number">{i + 1}.</span>
-																	<span class="track-name">{track.name}</span>
-																	{#if track.durationMs}
-																		<span class="track-duration">{Math.floor(track.durationMs / 60000)}:{String(Math.floor((track.durationMs % 60000) / 1000)).padStart(2, '0')}</span>
-																	{/if}
-																	{#if track.previewUrl}
-																		<CheckIcon class="icon success inline" title="Has preview" />
-																	{/if}
-																</div>
-															{/each}
+													{#if album.appleMusicData.tracks?.length}
+														<div class="tracks-section">
+															<h6>Tracks ({album.appleMusicData.tracks.length})</h6>
+															<div class="tracks-list">
+																{#each album.appleMusicData.tracks as track, i}
+																	<div class="track-item">
+																		<span class="track-number">{i + 1}.</span>
+																		<span class="track-name">{track.name}</span>
+																		{#if track.durationMs}
+																			<span class="track-duration"
+																				>{Math.floor(track.durationMs / 60000)}:{String(
+																					Math.floor((track.durationMs % 60000) / 1000)
+																				).padStart(2, '0')}</span
+																			>
+																		{/if}
+																		{#if track.previewUrl}
+																			<CheckIcon class="icon success inline" title="Has preview" />
+																		{/if}
+																	</div>
+																{/each}
+															</div>
 														</div>
-													</div>
-												{/if}
+													{/if}

-												<div class="raw-data">
-													<h6>Raw Data</h6>
-													<pre>{JSON.stringify(album.appleMusicData, null, 2)}</pre>
-												</div>
+													<div class="raw-data">
+														<h6>Raw Data</h6>
+														<pre>{JSON.stringify(album.appleMusicData, null, 2)}</pre>
+													</div>
 												{:else}
 													<h5>No Apple Music Data</h5>
-													<p class="no-data">This album was not searched in Apple Music or the search is pending.</p>
+													<p class="no-data">
+														This album was not searched in Apple Music or the search is pending.
+													</p>
 												{/if}
 											</div>
 										{/if}
@ -438,11 +483,7 @@
 							</div>

 							<div class="cache-actions">
-								<button 
-									onclick={clearAllMusicCache}
-									disabled={isClearing}
-									class="clear-all-btn"
-								>
+								<button onclick={clearAllMusicCache} disabled={isClearing} class="clear-all-btn">
 									{isClearing ? 'Clearing...' : 'Clear All Music Cache'}
 								</button>

@ -475,10 +516,7 @@
 									{isClearing ? 'Clearing...' : 'Clear Not Found Cache'}
 								</button>

-								<button 
-									onclick={() => searchModal?.open()}
-									class="search-btn"
-								>
+								<button onclick={() => searchModal?.open()} class="search-btn">
 									Test Apple Music Search
 								</button>
 							</div>
@ -924,7 +962,8 @@
 		flex-wrap: wrap;
 		gap: $unit;

-		.clear-all-btn, .clear-not-found-btn {
+		.clear-all-btn,
+		.clear-not-found-btn {
 			flex: 1;
 			min-width: 140px;
 			padding: $unit * 1.5;
--- a/src/lib/components/DynamicPostContent.svelte
+++ b/src/lib/components/DynamicPostContent.svelte
@ -1,12 +1,11 @@
 <script lang="ts">
+	import LinkCard from './LinkCard.svelte'
 	import Slideshow from './Slideshow.svelte'
 	import BackButton from './BackButton.svelte'
 	import { formatDate } from '$lib/utils/date'
 	import { renderEdraContent } from '$lib/utils/content'

-	import type { Post } from '@prisma/client'
-
-	let { post }: { post: Post } = $props()
+	let { post }: { post: any } = $props()

 	const renderedContent = $derived(post.content ? renderEdraContent(post.content) : '')
 </script>
@ -251,8 +250,8 @@
 			background: $gray-95;
 			padding: 2px 6px;
 			border-radius: 4px;
-			font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
-				monospace;
+			font-family:
+				'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
 			font-size: 0.9em;
 			color: $text-color;
 		}
--- a/src/lib/components/Game.svelte
+++ b/src/lib/components/Game.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion'
 	import { parse } from 'tinyduration'
-	import type { SerializableGameInfo } from '$lib/types/steam'

 	interface GameProps {
 		game?: SerializableGameInfo
--- a/src/lib/components/GeoCard.svelte
+++ b/src/lib/components/GeoCard.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte'
 	import type { GeoLocation } from '@prisma/client'
-	import type * as L from 'leaflet'

 	interface Props {
 		location: GeoLocation
@ -20,9 +19,9 @@
 	}: Props = $props()

 	let mapContainer: HTMLDivElement
-	let map: L.Map | null = null
-	let marker: L.Marker | null = null
-	let leaflet: typeof L | null = null
+	let map: any
+	let marker: any
+	let leaflet: any

 	// Load Leaflet dynamically
 	async function loadLeaflet() {
--- a/src/lib/components/LabCard.svelte
+++ b/src/lib/components/LabCard.svelte
@ -9,7 +9,7 @@
 	const projectUrl = $derived(`/labs/${project.slug}`)

 	// Tilt card functionality
-	let cardElement: HTMLElement | undefined = $state.raw()
+	let cardElement: HTMLElement
 	let isHovering = $state(false)
 	let transform = $state('')

@ -43,11 +43,11 @@
 	<div
 		class="lab-card clickable"
 		bind:this={cardElement}
-		onmousemove={handleMouseMove}
-		onmouseenter={handleMouseEnter}
-		onmouseleave={handleMouseLeave}
-		onclick={() => (window.location.href = projectUrl)}
-		onkeydown={(e) => e.key === 'Enter' && (window.location.href = projectUrl)}
+		on:mousemove={handleMouseMove}
+		on:mouseenter={handleMouseEnter}
+		on:mouseleave={handleMouseLeave}
+		on:click={() => (window.location.href = projectUrl)}
+		on:keydown={(e) => e.key === 'Enter' && (window.location.href = projectUrl)}
 		role="button"
 		tabindex="0"
 		style:transform
@ -113,9 +113,9 @@
 	<article
 		class="lab-card"
 		bind:this={cardElement}
-		onmousemove={handleMouseMove}
-		onmouseenter={handleMouseEnter}
-		onmouseleave={handleMouseLeave}
+		on:mousemove={handleMouseMove}
+		on:mouseenter={handleMouseEnter}
+		on:mouseleave={handleMouseLeave}
 		style:transform
 	>
 		<div class="card-header">
--- a/src/lib/components/Lightbox.svelte
+++ b/src/lib/components/Lightbox.svelte
@ -80,19 +80,11 @@
 	<div
 		class="lightbox-backdrop"
 		onclick={handleBackgroundClick}
-		onkeydown={(e) => e.key === 'Enter' && handleBackgroundClick()}
 		transition:fade={{ duration: TRANSITION_NORMAL_MS }}
 		role="button"
 		tabindex="-1"
 	>
-		<div
-			class="lightbox-content"
-			role="dialog"
-			aria-modal="true"
-			tabindex="-1"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-		>
+		<div class="lightbox-content" onclick={(e) => e.stopPropagation()}>
 			<div class="lightbox-image-container">
 				<img
 					src={images[selectedIndex]}
--- a/src/lib/components/NavDropdown.svelte
+++ b/src/lib/components/NavDropdown.svelte
@ -38,6 +38,24 @@
 					) || navItems[0]
 	)

+	// Get background color based on variant
+	function getBgColor(variant: string): string {
+		switch (variant) {
+			case 'work':
+				return '#ffcdc5'
+			case 'photos':
+				return '#e8c5ff'
+			case 'universe':
+				return '#ffebc5'
+			case 'labs':
+				return '#c5eaff'
+			case 'about':
+				return '#ffcdc5'
+			default:
+				return '#c5eaff'
+		}
+	}
+
 	// Get text color based on variant
 	function getTextColor(variant: string): string {
 		switch (variant) {
--- a/src/lib/components/NowPlayingBar.svelte
+++ b/src/lib/components/NowPlayingBar.svelte
@ -8,11 +8,13 @@

 	let { album, getAlbumArtwork }: Props = $props()

-	const trackText = $derived(`${album.artist.name} — ${album.name}${
-		album.appleMusicData?.releaseDate 
-			? ` (${new Date(album.appleMusicData.releaseDate).getFullYear()})` 
-			: ''
-	} — ${album.nowPlayingTrack || album.name}`)
+	const trackText = $derived(
+		`${album.artist.name} — ${album.name}${
+			album.appleMusicData?.releaseDate
+				? ` (${new Date(album.appleMusicData.releaseDate).getFullYear()})`
+				: ''
+		} — ${album.nowPlayingTrack || album.name}`
+	)
 </script>

 <nav class="now-playing-bar">
--- a/src/lib/components/PhotoGrid.svelte
+++ b/src/lib/components/PhotoGrid.svelte
@ -98,7 +98,7 @@
 		</Masonry>
 	{:else if (columns === 1 || columns === 2 || columns === 3) && !masonry}
 		<!-- Column-based layout for square thumbnails -->
-		{#each columnPhotos as column}
+		{#each columnPhotos as column, colIndex}
 			<div class="photo-grid__column">
 				{#each column as photo}
 					<div class="photo-grid__item">
--- a/src/lib/components/PhotoItem.svelte
+++ b/src/lib/components/PhotoItem.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PhotoItem } from '$lib/types/photos'
+	import type { PhotoItem, Photo, PhotoAlbum } from '$lib/types/photos'
 	import { isAlbum } from '$lib/types/photos'
 	import { goto } from '$app/navigation'

--- a/src/lib/components/PhotoMetadata.svelte
+++ b/src/lib/components/PhotoMetadata.svelte
@ -5,7 +5,7 @@
 		title?: string
 		caption?: string
 		description?: string
-		exifData?: Record<string, unknown>
+		exifData?: any
 		createdAt?: string
 		backHref?: string
 		backLabel?: string
@ -23,6 +23,7 @@
 		backHref,
 		backLabel,
 		showBackButton = false,
+		albums = [],
 		class: className = ''
 	}: Props = $props()

@ -228,8 +229,8 @@
 		.metadata-value {
 			font-size: 0.875rem;
 			color: $gray-10;
-			font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
-				monospace;
+			font-family:
+				'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
 		}
 	}

--- a/src/lib/components/ProjectContent.svelte
+++ b/src/lib/components/ProjectContent.svelte
@ -26,7 +26,7 @@
 			<h2>Gallery</h2>
 			<div class="gallery-grid">
 				{#each project.gallery as image}
-					<img src={image} alt="Gallery item" />
+					<img src={image} alt="Project gallery image" />
 				{/each}
 			</div>
 		</div>
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@ -38,8 +38,8 @@
 	)

 	// 3D tilt effect
-	let cardElement: HTMLDivElement | undefined = $state.raw()
-	let logoElement: HTMLElement | undefined = $state.raw()
+	let cardElement: HTMLDivElement
+	let logoElement: HTMLElement
 	let isHovering = $state(false)
 	let transform = $state('')
 	let svgContent = $state('')
@ -127,8 +127,8 @@
 	onmouseenter={isClickable ? handleMouseEnter : undefined}
 	onmouseleave={isClickable ? handleMouseLeave : undefined}
 	style="transform: {transform};"
-	role={isClickable ? 'button' : undefined}
-	{...(isClickable ? { tabindex: 0 } : {})}
+	role={isClickable ? 'button' : 'article'}
+	tabindex={isClickable ? 0 : -1}
 >
 	<div class="project-logo" style="background-color: {backgroundColor}">
 		{#if svgContent}
--- a/src/lib/components/ProjectPasswordProtection.svelte
+++ b/src/lib/components/ProjectPasswordProtection.svelte
@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
 	import Button from '$lib/components/admin/Button.svelte'
 	import BackButton from './BackButton.svelte'
 	import { onMount } from 'svelte'
@ -8,7 +7,7 @@
 		projectSlug: string
 		correctPassword: string
 		projectType?: 'work' | 'labs'
-		children?: Snippet
+		children?: any
 	}

 	let { projectSlug, correctPassword, projectType = 'work', children }: Props = $props()
--- a/src/lib/components/RecentAlbums.svelte
+++ b/src/lib/components/RecentAlbums.svelte
@ -31,7 +31,7 @@
 <section class="recent-albums">
 	{#if albums.length > 0}
 		<ul>
-			{#each albums.slice(0, 4) as album}
+			{#each albums.slice(0, 4) as album, index}
 				<li>
 					<Album
 						{album}
--- a/src/lib/components/Slideshow.svelte
+++ b/src/lib/components/Slideshow.svelte
@ -13,6 +13,7 @@
 		items = [],
 		alt = 'Image',
 		showThumbnails = true,
+		aspectRatio = '4/3',
 		maxThumbnails,
 		totalCount,
 		showMoreLink
@ -93,13 +94,7 @@
 {#if items.length === 1}
 	<!-- Single image -->
 	<TiltCard>
-		<div
-			class="single-image image-container"
-			role="button"
-			tabindex="0"
-			onclick={() => openLightbox()}
-			onkeydown={(e) => e.key === 'Enter' && openLightbox()}
-		>
+		<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>
@ -110,13 +105,7 @@
 	<!-- Slideshow -->
 	<div class="slideshow">
 		<TiltCard>
-			<div
-				class="main-image image-container"
-				role="button"
-				tabindex="0"
-				onclick={() => openLightbox()}
-				onkeydown={(e) => e.key === 'Enter' && openLightbox()}
-			>
+			<div class="main-image image-container" onclick={() => openLightbox()}>
 				<img
 					src={items[selectedIndex].url}
 					alt={items[selectedIndex].alt || `${alt} ${selectedIndex + 1}`}
--- a/src/lib/components/TiltCard.svelte
+++ b/src/lib/components/TiltCard.svelte
@ -32,7 +32,6 @@
 <div
 	class="tilt-card"
 	bind:this={cardElement}
-	role="presentation"
 	on:mousemove={handleMouseMove}
 	on:mouseenter={handleMouseEnter}
 	on:mouseleave={handleMouseLeave}
--- a/src/lib/components/UniverseCard.svelte
+++ b/src/lib/components/UniverseCard.svelte
@ -8,7 +8,7 @@
 	interface UniverseItem {
 		slug: string
 		publishedAt: string
-		[key: string]: unknown
+		[key: string]: any
 	}

 	let {
--- a/src/lib/components/ViewModeSelector.svelte
+++ b/src/lib/components/ViewModeSelector.svelte
@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getContext } from 'svelte'
 	import PhotosIcon from '$icons/photos.svg?component'
 	import ViewSingleIcon from '$icons/view-single.svg?component'
 	import ViewTwoColumnIcon from '$icons/view-two-column.svg?component'
--- a/src/lib/components/admin/AdminFilters.svelte
+++ b/src/lib/components/admin/AdminFilters.svelte
@ -1,9 +1,7 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
-
 	interface Props {
-		left?: Snippet
-		right?: Snippet
+		left?: any
+		right?: any
 	}

 	let { left, right }: Props = $props()
--- a/src/lib/components/admin/AdminHeader.svelte
+++ b/src/lib/components/admin/AdminHeader.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 	interface Props {
 		title: string
-		actions?: unknown
+		actions?: any
 	}

 	let { title, actions }: Props = $props()
--- a/src/lib/components/admin/AdminNavBar.svelte
+++ b/src/lib/components/admin/AdminNavBar.svelte
@ -8,12 +8,10 @@

 	const currentPath = $derived($page.url.pathname)

-	import type { Component } from 'svelte'
-
 	interface NavItem {
 		text: string
 		href: string
-		icon: Component
+		icon: any
 	}

 	const navItems: NavItem[] = [
--- a/src/lib/components/admin/AlbumForm.svelte
+++ b/src/lib/components/admin/AlbumForm.svelte
@ -3,9 +3,10 @@
 	import { z } from 'zod'
 	import AdminPage from './AdminPage.svelte'
 	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
-	import Button from './Button.svelte'
 	import Input from './Input.svelte'
+	import Button from './Button.svelte'
 	import DropdownSelectField from './DropdownSelectField.svelte'
+	import AutoSaveStatus from './AutoSaveStatus.svelte'
 	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import SmartImage from '../SmartImage.svelte'
 	import Composer from './composer'
@ -33,12 +34,11 @@

 	// State
 	let isLoading = $state(mode === 'edit')
-	let hasLoaded = $state(mode === 'create')
 	let isSaving = $state(false)
 	let validationErrors = $state<Record<string, string>>({})
 	let showBulkAlbumModal = $state(false)
-	let albumMedia = $state<Array<{ media: Media; displayOrder: number }>>([])
-	let editorInstance = $state<{ save: () => Promise<JSONContent>; clear: () => void } | undefined>()
+	let albumMedia = $state<any[]>([])
+	let editorInstance = $state<any>()
 	let activeTab = $state('metadata')
 	let pendingMediaIds = $state<number[]>([]) // Photos to add after album creation

@ -76,10 +76,9 @@

 	// Watch for album changes and populate form data
 	$effect(() => {
-		if (album && mode === 'edit' && !hasLoaded) {
+		if (album && mode === 'edit') {
 			populateFormData(album)
 			loadAlbumMedia()
-			hasLoaded = true
 		} else if (mode === 'create') {
 			isLoading = false
 		}
@ -155,10 +154,11 @@
 			return
 		}

-		isSaving = true
 		const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} album...`)

 		try {
+			isSaving = true
+
 			const payload = {
 				title: formData.title,
 				slug: formData.slug,
@ -167,8 +167,7 @@
 				location: formData.location || null,
 				showInUniverse: formData.showInUniverse,
 				status: formData.status,
-				content: formData.content,
-				updatedAt: mode === 'edit' ? album?.updatedAt : undefined
+				content: formData.content
 			}

 			const url = mode === 'edit' ? `/api/albums/${album?.id}` : '/api/albums'
@ -275,13 +274,9 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
-				variant="primary"
-				onclick={handleSave}
-				disabled={isSaving}
-			>
-				{isSaving ? 'Saving...' : 'Save'}
-			</Button>
+			{#if !isLoading}
+				<AutoSaveStatus status="idle" lastSavedAt={album?.updatedAt} />
+			{/if}
 		</div>
 	</header>

@ -300,6 +295,8 @@
 							bind:value={formData.title}
 							placeholder="Album title"
 							required
+							error={validationErrors.title}
+							disabled={isSaving}
 						/>

 						<Input
@ -307,7 +304,8 @@
 							bind:value={formData.slug}
 							placeholder="url-friendly-name"
 							required
-							disabled={mode === 'edit'}
+							error={validationErrors.slug}
+							disabled={isSaving || mode === 'edit'}
 						/>

 						<div class="form-grid">
@ -315,12 +313,16 @@
 								label="Location"
 								bind:value={formData.location}
 								placeholder="e.g. Tokyo, Japan"
+								error={validationErrors.location}
+								disabled={isSaving}
 							/>
 							<Input
 								label="Year"
 								type="text"
 								bind:value={formData.year}
 								placeholder="e.g. 2023 or 2023-2025"
+								error={validationErrors.year}
+								disabled={isSaving}
 							/>
 						</div>

@ -328,6 +330,7 @@
 							label="Status"
 							bind:value={formData.status}
 							options={statusOptions}
+							disabled={isSaving}
 						/>
 					</div>

@ -337,6 +340,7 @@
 							<input
 								type="checkbox"
 								bind:checked={formData.showInUniverse}
+								disabled={isSaving}
 								class="toggle-input"
 							/>
 							<div class="toggle-content">
@ -393,6 +397,7 @@
 						bind:data={formData.content}
 						placeholder="Add album content..."
 						onChange={handleContentUpdate}
+						editable={!isSaving}
 						albumId={album?.id}
 						variant="full"
 					/>
@ -454,6 +459,25 @@
 		white-space: nowrap;
 	}

+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $gray-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $gray-90;
+			color: $gray-10;
+		}
+	}
+
 	.admin-container {
 		width: 100%;
 		margin: 0 auto;
--- a/src/lib/components/admin/AlbumListItem.svelte
+++ b/src/lib/components/admin/AlbumListItem.svelte
@ -23,7 +23,7 @@
 		createdAt: string
 		updatedAt: string
 		photos: Photo[]
-		content?: unknown
+		content?: any
 		_count: {
 			media: number
 		}
@ -38,7 +38,14 @@
 		ondelete?: (event: CustomEvent<{ album: Album; event: MouseEvent }>) => void
 	}

-	let { album, isDropdownActive = false, ontoggledropdown, onedit, ontogglepublish, ondelete }: Props = $props()
+	let {
+		album,
+		isDropdownActive = false,
+		ontoggledropdown,
+		onedit,
+		ontogglepublish,
+		ondelete
+	}: Props = $props()

 	function formatRelativeTime(dateString: string): string {
 		const date = new Date(dateString)
--- a/src/lib/components/admin/AlbumSelectorModal.svelte
+++ b/src/lib/components/admin/AlbumSelectorModal.svelte
@ -4,6 +4,7 @@
 	import Button from './Button.svelte'
 	import CloseButton from '../icons/CloseButton.svelte'
 	import LoadingSpinner from './LoadingSpinner.svelte'
+	import type { Album } from '@prisma/client'

 	interface Props {
 		isOpen: boolean
--- a/src/lib/components/admin/AutoSaveStatus.svelte
+++ b/src/lib/components/admin/AutoSaveStatus.svelte
@ -1,142 +1,119 @@
 <script lang="ts">
-  import type { AutoSaveStatus } from '$lib/admin/autoSave'
-  import { formatTimeAgo } from '$lib/utils/time'
+	import type { AutoSaveStatus } from '$lib/admin/autoSave'
+	import { formatTimeAgo } from '$lib/utils/time'

-  interface Props {
-    statusStore?: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
-    errorStore?: { subscribe: (run: (v: string | null) => void) => () => void }
-    status?: AutoSaveStatus
-    error?: string | null
-    lastSavedAt?: Date | string | null
-    showTimestamp?: boolean
-    compact?: boolean
-    onclick?: () => void
-  }
+	interface Props {
+		statusStore?: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
+		errorStore?: { subscribe: (run: (v: string | null) => void) => () => void }
+		status?: AutoSaveStatus
+		error?: string | null
+		lastSavedAt?: Date | string | null
+		showTimestamp?: boolean
+		compact?: boolean
+	}

-  let {
-    statusStore,
-    errorStore,
-    status: statusProp,
-    error: errorProp,
-    lastSavedAt,
-    showTimestamp = true,
-    compact = true,
-    onclick
-  }: Props = $props()
+	let {
+		statusStore,
+		errorStore,
+		status: statusProp,
+		error: errorProp,
+		lastSavedAt,
+		showTimestamp = true,
+		compact = true
+	}: Props = $props()

-  // Support both old subscription-based stores and new reactive values
-  let status = $state<AutoSaveStatus>('idle')
-  let errorText = $state<string | null>(null)
-  let refreshKey = $state(0) // Used to force re-render for time updates
+	// Support both old subscription-based stores and new reactive values
+	let status = $state<AutoSaveStatus>('idle')
+	let errorText = $state<string | null>(null)
+	let refreshKey = $state(0) // Used to force re-render for time updates

-  $effect(() => {
-    // If using direct props (new runes-based store)
-    if (statusProp !== undefined) {
-      status = statusProp
-      errorText = errorProp ?? null
-      return
-    }
+	$effect(() => {
+		// If using direct props (new runes-based store)
+		if (statusProp !== undefined) {
+			status = statusProp
+			errorText = errorProp ?? null
+			return
+		}

-    // Otherwise use subscriptions (old store)
-    if (!statusStore) return
+		// Otherwise use subscriptions (old store)
+		if (!statusStore) return

-    const unsub = statusStore.subscribe((v) => (status = v))
-    let unsubErr: (() => void) | null = null
-    if (errorStore) unsubErr = errorStore.subscribe((v) => (errorText = v))
-    return () => {
-      unsub()
-      if (unsubErr) unsubErr()
-    }
-  })
+		const unsub = statusStore.subscribe((v) => (status = v))
+		let unsubErr: (() => void) | null = null
+		if (errorStore) unsubErr = errorStore.subscribe((v) => (errorText = v))
+		return () => {
+			unsub()
+			if (unsubErr) unsubErr()
+		}
+	})

-  // Auto-refresh timestamp every 30 seconds
-  $effect(() => {
-    if (!lastSavedAt || !showTimestamp) return
+	// Auto-refresh timestamp every 30 seconds
+	$effect(() => {
+		if (!lastSavedAt || !showTimestamp) return

-    const interval = setInterval(() => {
-      refreshKey++
-    }, 30000)
+		const interval = setInterval(() => {
+			refreshKey++
+		}, 30000)

-    return () => clearInterval(interval)
-  })
+		return () => clearInterval(interval)
+	})

-  const label = $derived.by(() => {
-    // Force dependency on refreshKey to trigger re-computation
-    void refreshKey
+	const label = $derived.by(() => {
+		// Force dependency on refreshKey to trigger re-computation
+		refreshKey

-    switch (status) {
-      case 'saving':
-        return 'Saving…'
-      case 'saved':
-      case 'idle':
-        return lastSavedAt && showTimestamp
-          ? `Saved ${formatTimeAgo(lastSavedAt)}`
-          : 'All changes saved'
-      case 'offline':
-        return 'Offline'
-      case 'error':
-        return errorText ? `Error — ${errorText}` : 'Save failed'
-      default:
-        return ''
-    }
-  })
+		switch (status) {
+			case 'saving':
+				return 'Saving…'
+			case 'saved':
+			case 'idle':
+				return lastSavedAt && showTimestamp
+					? `Saved ${formatTimeAgo(lastSavedAt)}`
+					: 'All changes saved'
+			case 'offline':
+				return 'Offline'
+			case 'error':
+				return errorText ? `Error — ${errorText}` : 'Save failed'
+			default:
+				return ''
+		}
+	})
 </script>

 {#if label}
-  <button
-    type="button"
-    class="autosave-status"
-    class:compact
-    class:clickable={!!onclick && status !== 'saving'}
-    onclick={onclick}
-    disabled={status === 'saving'}
-  >
-    {#if status === 'saving'}
-      <span class="spinner" aria-hidden="true"></span>
-    {/if}
-    <span class="text">{label}</span>
-  </button>
+	<div class="autosave-status" class:compact>
+		{#if status === 'saving'}
+			<span class="spinner" aria-hidden="true"></span>
+		{/if}
+		<span class="text">{label}</span>
+	</div>
 {/if}

 <style lang="scss">
-  .autosave-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    color: $gray-40;
-    font-size: 0.875rem;
-    background: none;
-    border: none;
-    padding: 0;
-    font-family: inherit;
+	.autosave-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: $gray-40;
+		font-size: 0.875rem;

-    &.compact {
-      font-size: 0.75rem;
-    }
+		&.compact {
+			font-size: 0.75rem;
+		}
+	}

-    &.clickable {
-      cursor: pointer;
+	.spinner {
+		width: 12px;
+		height: 12px;
+		border: 2px solid $gray-80;
+		border-top-color: $gray-40;
+		border-radius: 50%;
+		animation: spin 0.9s linear infinite;
+	}

-      &:hover {
-        color: $gray-20;
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-    }
-  }
-
-  .spinner {
-    width: 12px;
-    height: 12px;
-    border: 2px solid $gray-80;
-    border-top-color: $gray-40;
-    border-radius: 50%;
-    animation: spin 0.9s linear infinite;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 </style>
--- a/src/lib/components/admin/BaseModal.svelte
+++ b/src/lib/components/admin/BaseModal.svelte
@ -81,15 +81,12 @@
 {#if isOpen}
 	<div
 		class="modal-backdrop"
-		role="presentation"
-		onclick={handleBackdropClick}
+		on:click={handleBackdropClick}
 		transition:fade={{ duration: TRANSITION_FAST_MS }}
 	>
 		<div
 			class={modalClass}
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-			tabindex="-1"
+			on:click|stopPropagation
 			transition:fade={{ duration: TRANSITION_FAST_MS }}
 			role="dialog"
 			aria-modal="true"
--- a/src/lib/components/admin/BrandingSection.svelte
+++ b/src/lib/components/admin/BrandingSection.svelte
@ -6,7 +6,6 @@
 		toggleChecked?: boolean
 		toggleDisabled?: boolean
 		showToggle?: boolean
-		onToggleChange?: (checked: boolean) => void
 		children?: import('svelte').Snippet
 	}

@ -15,7 +14,6 @@
 		toggleChecked = $bindable(false),
 		toggleDisabled = false,
 		showToggle = true,
-		onToggleChange,
 		children
 	}: Props = $props()
 </script>
@ -24,7 +22,7 @@
 	<header class="branding-section__header">
 		<h2 class="branding-section__title">{title}</h2>
 		{#if showToggle}
-			<BrandingToggle bind:checked={toggleChecked} disabled={toggleDisabled} onchange={onToggleChange} />
+			<BrandingToggle bind:checked={toggleChecked} disabled={toggleDisabled} />
 		{/if}
 	</header>
 	<div class="branding-section__content">
--- a/src/lib/components/admin/Button.svelte
+++ b/src/lib/components/admin/Button.svelte
@ -33,7 +33,6 @@
 		icon,
 		children,
 		onclick,
-		// eslint-disable-next-line svelte/valid-compile
 		...restProps
 	}: Props = $props()

--- a/src/lib/components/admin/DraftPrompt.svelte
+++ b/src/lib/components/admin/DraftPrompt.svelte
@ -11,7 +11,8 @@
 <div class="draft-banner">
 	<div class="draft-banner-content">
 		<span class="draft-banner-text">
-			Unsaved draft found{#if timeAgo} (saved {timeAgo}){/if}.
+			Unsaved draft found{#if timeAgo}
+				(saved {timeAgo}){/if}.
 		</span>
 		<div class="draft-banner-actions">
 			<button class="draft-banner-button" type="button" onclick={onRestore}>Restore</button>
--- a/src/lib/components/admin/DropdownMenu.svelte
+++ b/src/lib/components/admin/DropdownMenu.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
+	import { onMount } from 'svelte'
 	import { browser } from '$app/environment'
 	import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom'
 	import ChevronRight from '$icons/chevron-right.svg?component'
-	import DropdownMenu from './DropdownMenu.svelte'

 	interface Props {
 		isOpen: boolean
@ -24,7 +24,7 @@

 	let { isOpen = $bindable(), triggerElement, items, onClose, isSubmenu = false }: Props = $props()

-	let dropdownElement: HTMLDivElement | undefined = $state.raw()
+	let dropdownElement: HTMLDivElement
 	let cleanup: (() => void) | null = null

 	// Track which submenu is open
@ -191,11 +191,11 @@
 				</button>

 				{#if item.children && openSubmenuId === item.id}
-					<div role="presentation"
+					<div
 						onmouseenter={handleSubmenuMouseEnter}
 						onmouseleave={() => handleSubmenuMouseLeave(item.id)}
 					>
-						<DropdownMenu
+						<svelte:self
 							isOpen={true}
 							triggerElement={submenuElements.get(item.id)}
 							items={item.children}
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation'
+	import { goto, beforeNavigate } from '$app/navigation'
 	import AdminPage from './AdminPage.svelte'
 	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
 	import Editor from './Editor.svelte'
@ -7,6 +7,9 @@
 	import Input from './Input.svelte'
 	import DropdownSelectField from './DropdownSelectField.svelte'
 	import { toast } from '$lib/stores/toast'
+	import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
+	import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
+	import AutoSaveStatus from './AutoSaveStatus.svelte'
 	import type { JSONContent } from '@tiptap/core'

 	interface Props {
@ -25,9 +28,11 @@
 	let { postId, initialData, mode }: Props = $props()

 	// State
-	let hasLoaded = $state(mode === 'create')
+	let isLoading = $state(false)
+	let hasLoaded = $state(mode === 'create') // Create mode loads immediately
 	let isSaving = $state(false)
 	let activeTab = $state('metadata')
+	let updatedAt = $state<string | undefined>(initialData?.updatedAt)

 	// Form data
 	let title = $state(initialData?.title || '')
@ -38,7 +43,53 @@
 	let tagInput = $state('')

 	// Ref to the editor component
-	let editorRef: { save: () => Promise<JSONContent> } | undefined
+	let editorRef: any
+
+	// Draft backup
+	const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
+	let showDraftPrompt = $state(false)
+	let draftTimestamp = $state<number | null>(null)
+	let timeTicker = $state(0)
+	const draftTimeText = $derived.by(() =>
+		draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null
+	)
+
+	function buildPayload() {
+		return {
+			title,
+			slug,
+			type: 'essay',
+			status,
+			content,
+			tags,
+			updatedAt
+		}
+	}
+
+	// Autosave store (edit mode only)
+	let autoSave =
+		mode === 'edit' && postId
+			? createAutoSaveStore({
+					debounceMs: 2000,
+					getPayload: () => (hasLoaded ? buildPayload() : null),
+					save: async (payload, { signal }) => {
+						const response = await fetch(`/api/posts/${postId}`, {
+							method: 'PUT',
+							headers: { 'Content-Type': 'application/json' },
+							body: JSON.stringify(payload),
+							credentials: 'same-origin',
+							signal
+						})
+						if (!response.ok) throw new Error('Failed to save')
+						return await response.json()
+					},
+					onSaved: (saved: any, { prime }) => {
+						updatedAt = saved.updatedAt
+						prime(buildPayload())
+						if (draftKey) clearDraft(draftKey)
+					}
+				})
+			: null

 	const tabOptions = [
 		{ value: 'metadata', label: 'Metadata' },
@ -68,13 +119,126 @@
 		}
 	})

-	// Mark as loaded for edit mode
+	// Prime autosave on initial load (edit mode only)
 	$effect(() => {
-		if (mode === 'edit' && initialData && !hasLoaded) {
+		if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
+			autoSave.prime(buildPayload())
 			hasLoaded = true
 		}
 	})

+	// Trigger autosave when form data changes
+	$effect(() => {
+		title
+		slug
+		status
+		content
+		tags
+		activeTab
+		if (hasLoaded && autoSave) {
+			autoSave.schedule()
+		}
+	})
+
+	// Save draft only when autosave fails
+	$effect(() => {
+		if (hasLoaded && autoSave) {
+			const saveStatus = autoSave.status
+			if (saveStatus === 'error' || saveStatus === 'offline') {
+				saveDraft(draftKey, buildPayload())
+			}
+		}
+	})
+
+	// Show restore prompt if a draft exists
+	$effect(() => {
+		const draft = loadDraft<any>(draftKey)
+		if (draft) {
+			showDraftPrompt = true
+			draftTimestamp = draft.ts
+		}
+	})
+
+	function restoreDraft() {
+		const draft = loadDraft<any>(draftKey)
+		if (!draft) return
+		const p = draft.payload
+		title = p.title ?? title
+		slug = p.slug ?? slug
+		status = p.status ?? status
+		content = p.content ?? content
+		tags = p.tags ?? tags
+		showDraftPrompt = false
+		clearDraft(draftKey)
+	}
+
+	function dismissDraft() {
+		showDraftPrompt = false
+		clearDraft(draftKey)
+	}
+
+	// Auto-update draft time text every minute when prompt visible
+	$effect(() => {
+		if (showDraftPrompt) {
+			const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
+			return () => clearInterval(id)
+		}
+	})
+
+	// Navigation guard: flush autosave before navigating away (only if unsaved)
+	beforeNavigate(async (navigation) => {
+		if (hasLoaded && autoSave) {
+			if (autoSave.status === 'saved') {
+				return
+			}
+			// Flush any pending changes before allowing navigation to proceed
+			try {
+				await autoSave.flush()
+			} catch (error) {
+				console.error('Autosave flush failed:', error)
+			}
+		}
+	})
+
+	// Warn before closing browser tab/window if there are unsaved changes
+	$effect(() => {
+		if (!hasLoaded || !autoSave) return
+
+		function handleBeforeUnload(event: BeforeUnloadEvent) {
+			if (autoSave!.status !== 'saved') {
+				event.preventDefault()
+				event.returnValue = ''
+			}
+		}
+
+		window.addEventListener('beforeunload', handleBeforeUnload)
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+	})
+
+	// Keyboard shortcut: Cmd/Ctrl+S to save immediately
+	$effect(() => {
+		if (!hasLoaded || !autoSave) return
+
+		function handleKeydown(e: KeyboardEvent) {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+				e.preventDefault()
+				autoSave!.flush().catch((error) => {
+					console.error('Autosave flush failed:', error)
+				})
+			}
+		}
+
+		document.addEventListener('keydown', handleKeydown)
+		return () => document.removeEventListener('keydown', handleKeydown)
+	})
+
+	// Cleanup autosave on unmount
+	$effect(() => {
+		if (autoSave) {
+			return () => autoSave.destroy()
+		}
+	})
+
 	function addTag() {
 		if (tagInput && !tags.includes(tagInput)) {
 			tags = [...tags, tagInput]
@ -104,18 +268,18 @@
 			return
 		}

-		isSaving = true
 		const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} essay...`)

 		try {
+			isSaving = true
+
 			const payload = {
 				title,
 				slug,
-				type: 'essay',
+				type: 'essay', // No mapping needed anymore
 				status,
 				content,
-				tags,
-				updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
+				tags
 			}

 			const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
@ -142,6 +306,7 @@

 			toast.dismiss(loadingToastId)
 			toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
+			clearDraft(draftKey)

 			if (mode === 'create') {
 				goto(`/admin/posts/${savedPost.id}/edit`)
@ -169,17 +334,40 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
-				variant="primary"
-				onclick={handleSave}
-				disabled={isSaving}
-			>
-				{isSaving ? 'Saving...' : 'Save'}
-			</Button>
+			{#if mode === 'edit' && autoSave}
+				<AutoSaveStatus
+					status={autoSave.status}
+					error={autoSave.lastError}
+					lastSavedAt={initialData?.updatedAt}
+				/>
+			{/if}
 		</div>
 	</header>

+	{#if showDraftPrompt}
+		<div class="draft-banner">
+			<div class="draft-banner-content">
+				<span class="draft-banner-text">
+					Unsaved draft found{#if draftTimeText}
+						(saved {draftTimeText}){/if}.
+				</span>
+				<div class="draft-banner-actions">
+					<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
+					<button class="draft-banner-button dismiss" onclick={dismissDraft}>Dismiss</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<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'}>
@ -201,14 +389,10 @@

 							<Input label="Slug" bind:value={slug} placeholder="essay-url-slug" />

-							<DropdownSelectField
-								label="Status"
-								bind:value={status}
-								options={statusOptions}
-							/>
+							<DropdownSelectField label="Status" bind:value={status} options={statusOptions} />

 							<div class="tags-field">
-								<div class="input-label">Tags</div>
+								<label class="input-label">Tags</label>
 								<div class="tag-input-wrapper">
 									<Input
 										bind:value={tagInput}
@ -308,6 +492,143 @@
 		}
 	}

+	.save-actions {
+		position: relative;
+		display: flex;
+	}
+
+	.draft-banner {
+		background: $blue-95;
+		border-bottom: 1px solid $blue-80;
+		padding: $unit-2x $unit-5x;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		animation: slideDown 0.2s ease-out;
+
+		@keyframes slideDown {
+			from {
+				opacity: 0;
+				transform: translateY(-10px);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+
+	.draft-banner-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: $unit-3x;
+		width: 100%;
+		max-width: 1200px;
+	}
+
+	.draft-banner-text {
+		color: $blue-20;
+		font-size: $font-size-small;
+		font-weight: $font-weight-med;
+	}
+
+	.draft-banner-actions {
+		display: flex;
+		gap: $unit-2x;
+	}
+
+	.draft-banner-button {
+		background: $blue-50;
+		border: none;
+		color: $white;
+		cursor: pointer;
+		padding: $unit-half $unit-2x;
+		border-radius: $corner-radius-sm;
+		font-size: $font-size-small;
+		font-weight: $font-weight-med;
+		transition: background $transition-fast;
+
+		&:hover {
+			background: $blue-40;
+		}
+
+		&.dismiss {
+			background: transparent;
+			color: $blue-30;
+
+			&:hover {
+				background: $blue-90;
+			}
+		}
+	}
+
+	// Custom styles for save/publish buttons to maintain grey color scheme
+	:global(.save-button.btn-primary) {
+		background-color: $gray-10;
+
+		&:hover:not(:disabled) {
+			background-color: $gray-20;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $gray-30;
+		}
+	}
+
+	.save-button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		padding-right: $unit-2x;
+	}
+
+	:global(.chevron-button.btn-primary) {
+		background-color: $gray-10;
+
+		&:hover:not(:disabled) {
+			background-color: $gray-20;
+		}
+
+		&:active:not(:disabled) {
+			background-color: $gray-30;
+		}
+
+		&.active {
+			background-color: $gray-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;

@ -329,6 +650,26 @@
 		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;

--- a/src/lib/components/admin/FileUploadZone.svelte
+++ b/src/lib/components/admin/FileUploadZone.svelte
@ -1,4 +1,5 @@
 <script lang="ts">
+	import Button from './Button.svelte'
 	import { validateFileType } from '$lib/utils/mediaHelpers'

 	interface Props {
@ -84,8 +85,6 @@
 	class:active={dragActive}
 	class:compact
 	class:disabled
-	role="region"
-	aria-label="File upload drop zone"
 	ondragover={handleDragOver}
 	ondragleave={handleDragLeave}
 	ondrop={handleDrop}
--- a/src/lib/components/admin/FormField.svelte
+++ b/src/lib/components/admin/FormField.svelte
@ -1,18 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
-
 	interface Props {
 		label: string
 		name?: string
 		type?: string
-		value?: string | number
+		value?: any
 		placeholder?: string
 		required?: boolean
 		error?: string
 		helpText?: string
 		disabled?: boolean
 		onchange?: (e: Event) => void
-		children?: Snippet
+		children?: any
 	}

 	let {
@ -59,7 +57,7 @@
 			{disabled}
 			onchange={handleChange}
 			rows="4"
-		></textarea>
+		/>
 	{:else}
 		<input
 			id={name}
--- a/src/lib/components/admin/GalleryManager.svelte
+++ b/src/lib/components/admin/GalleryManager.svelte
@ -124,12 +124,12 @@

 <div class="gallery-manager">
 	<div class="header">
-		<div class="input-label">
+		<label class="input-label">
 			{label}
 			{#if required}
 				<span class="required">*</span>
 			{/if}
-		</div>
+		</label>

 		{#if hasImages}
 			<span class="items-count">
@ -149,9 +149,6 @@
 					class="gallery-item"
 					class:drag-over={dragOverIndex === index}
 					draggable="true"
-					role="button"
-					aria-label="Draggable gallery item"
-					tabindex="0"
 					ondragstart={(e) => handleDragStart(e, index)}
 					ondragend={handleDragEnd}
 					ondragover={(e) => handleDragOver(e, index)}
--- a/src/lib/components/admin/GalleryUploader.svelte
+++ b/src/lib/components/admin/GalleryUploader.svelte
@ -1,19 +1,17 @@
 <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 UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import MediaDetailsModal from './MediaDetailsModal.svelte'

-	// Gallery items can be either Media objects or objects with a mediaId reference
-	type GalleryItem = Media | (Partial<Media> & { mediaId?: number })
-
 	interface Props {
 		label: string
-		value?: GalleryItem[]
-		onUpload: (media: GalleryItem[]) => void
-		onReorder?: (media: GalleryItem[]) => void
-		onRemove?: (item: GalleryItem, index: number) => void
+		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
@ -26,13 +24,17 @@
 	}

 	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,
 		disabled = false
@ -48,7 +50,7 @@
 	let draggedOverIndex = $state<number | null>(null)
 	let isMediaLibraryOpen = $state(false)
 	let isImageModalOpen = $state(false)
-	let selectedImage = $state<Media | null>(null)
+	let selectedImage = $state<any | null>(null)

 	// Computed properties
 	const hasImages = $derived(value && value.length > 0)
@ -73,7 +75,7 @@

 	// Upload multiple files to server
 	async function uploadFiles(files: File[]): Promise<Media[]> {
-		const uploadPromises = files.map(async (file) => {
+		const uploadPromises = files.map(async (file, index) => {
 			const formData = new FormData()
 			formData.append('file', file)

@ -314,7 +316,7 @@
 		isMediaLibraryOpen = true
 	}

-	function handleMediaSelect(selectedMedia: Media | Media[]) {
+	function handleMediaSelect(selectedMedia: any | any[]) {
 		// For gallery mode, selectedMedia will be an array
 		const mediaArray = Array.isArray(selectedMedia) ? selectedMedia : [selectedMedia]

@ -355,10 +357,10 @@
 	}

 	// Handle clicking on an image to open details modal
-	function handleImageClick(media: GalleryItem) {
+	function handleImageClick(media: any) {
 		// Convert to Media format if needed
 		selectedImage = {
-			id: ('mediaId' in media && media.mediaId) || media.id!,
+			id: media.mediaId || media.id,
 			filename: media.filename,
 			originalName: media.originalName || media.filename,
 			mimeType: media.mimeType || 'image/jpeg',
@ -379,9 +381,9 @@
 	}

 	// Handle updates from the media details modal
-	function handleImageUpdate(updatedMedia: Media) {
+	function handleImageUpdate(updatedMedia: any) {
 		// Update the media in our value array
-		const index = value.findIndex((m) => (('mediaId' in m && m.mediaId) || m.id) === updatedMedia.id)
+		const index = value.findIndex((m) => (m.mediaId || m.id) === updatedMedia.id)
 		if (index !== -1) {
 			value[index] = {
 				...value[index],
@ -407,14 +409,10 @@
 			class:uploading={isUploading}
 			class:has-error={!!uploadError}
 			class:disabled
-			role="button"
-			aria-label="Upload images drop zone"
-			tabindex={disabled ? -1 : 0}
 			ondragover={disabled ? undefined : handleDragOver}
 			ondragleave={disabled ? undefined : handleDragLeave}
 			ondrop={disabled ? undefined : handleDrop}
 			onclick={disabled ? undefined : handleBrowseClick}
-			onkeydown={disabled ? undefined : (e) => e.key === 'Enter' && handleBrowseClick()}
 		>
 			{#if isUploading}
 				<!-- Upload Progress -->
@ -545,9 +543,6 @@
 					class:drag-over={draggedOverIndex === index}
 					class:disabled
 					draggable={!disabled}
-					role="button"
-					aria-label="Draggable gallery image"
-					tabindex={disabled ? -1 : 0}
 					ondragstart={(e) => handleImageDragStart(e, index)}
 					ondragover={(e) => handleImageDragOver(e, index)}
 					ondragleave={handleImageDragLeave}
--- a/src/lib/components/admin/GenericMetadataPopover.svelte
+++ b/src/lib/components/admin/GenericMetadataPopover.svelte
@ -2,6 +2,7 @@
 	import { onMount } from 'svelte'
 	import { clickOutside } from '$lib/actions/clickOutside'
 	import Input from './Input.svelte'
+	import FormField from './FormField.svelte'
 	import Button from './Button.svelte'

 	export interface MetadataField {
@ -11,8 +12,8 @@
 		placeholder?: string
 		rows?: number
 		helpText?: string
-		component?: unknown // For custom components
-		props?: Record<string, unknown> // Additional props for custom components
+		component?: any // For custom components
+		props?: any // Additional props for custom components
 	}

 	export interface MetadataConfig {
@ -26,9 +27,9 @@

 	type Props = {
 		config: MetadataConfig
-		data: Record<string, unknown>
+		data: any
 		triggerElement: HTMLElement
-		onUpdate?: (key: string, value: unknown) => void
+		onUpdate?: (key: string, value: any) => void
 		onAddTag?: () => void
 		onRemoveTag?: (tag: string) => void
 		onClose?: () => void
@ -109,7 +110,7 @@
 		popoverElement.style.zIndex = '1200'
 	}

-	function handleFieldUpdate(key: string, value: unknown) {
+	function handleFieldUpdate(key: string, value: any) {
 		data[key] = value
 		onUpdate(key, value)
 	}
--- a/src/lib/components/admin/ImagePicker.svelte
+++ b/src/lib/components/admin/ImagePicker.svelte
@ -63,12 +63,12 @@
 </script>

 <div class="image-picker">
-	<div class="input-label">
+	<label class="input-label">
 		{label}
 		{#if required}
 			<span class="required">*</span>
 		{/if}
-	</div>
+	</label>

 	<!-- Image Preview Area -->
 	<div
--- a/src/lib/components/admin/ImageUploader.svelte
+++ b/src/lib/components/admin/ImageUploader.svelte
@ -30,6 +30,7 @@
 		aspectRatio,
 		required = false,
 		error,
+		allowAltText = true,
 		maxFileSize = 10,
 		placeholder = 'Drag and drop an image here, or click to browse',
 		helpText,
@ -231,12 +232,12 @@

 <div class="image-uploader" class:compact>
 	<!-- Label -->
-	<div class="uploader-label">
+	<label class="uploader-label">
 		{label}
 		{#if required}
 			<span class="required">*</span>
 		{/if}
-	</div>
+	</label>

 	{#if helpText}
 		<p class="help-text">{helpText}</p>
@ -378,14 +379,10 @@
 				class:uploading={isUploading}
 				class:has-error={!!uploadError}
 				style={aspectRatioStyle}
-				role="button"
-				aria-label="Upload image drop zone"
-				tabindex="0"
 				ondragover={handleDragOver}
 				ondragleave={handleDragLeave}
 				ondrop={handleDrop}
 				onclick={handleBrowseClick}
-				onkeydown={(e) => e.key === 'Enter' && handleBrowseClick()}
 			>
 				{#if isUploading}
 					<!-- Upload Progress -->
--- a/src/lib/components/admin/InlineComposerModal.svelte
+++ b/src/lib/components/admin/InlineComposerModal.svelte
@ -3,10 +3,12 @@
 	import Modal from './Modal.svelte'
 	import Composer from './composer'
 	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
+	import FormField from './FormField.svelte'
 	import Button from './Button.svelte'
 	import Input from './Input.svelte'
 	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import MediaDetailsModal from './MediaDetailsModal.svelte'
+	import SmartImage from '../SmartImage.svelte'
 	import type { JSONContent } from '@tiptap/core'
 	import type { Media } from '@prisma/client'

@ -33,33 +35,30 @@
 	type PostType = 'post' | 'essay'
 	type ComposerMode = 'modal' | 'page'

-	let postType: PostType = $state(initialPostType)
-	let mode: ComposerMode = $state(initialMode)
-	let content: JSONContent = $state(
-		initialContent || {
-			type: 'doc',
-			content: [{ type: 'paragraph' }]
-		}
-	)
-	let characterCount = $state(0)
-	let editorInstance: { save: () => Promise<JSONContent>; clear: () => void } | undefined =
-		$state.raw()
+	let postType: PostType = initialPostType
+	let mode: ComposerMode = initialMode
+	let content: JSONContent = initialContent || {
+		type: 'doc',
+		content: [{ type: 'paragraph' }]
+	}
+	let characterCount = 0
+	let editorInstance: any

 	// Essay metadata
-	let essayTitle = $state('')
-	let essaySlug = $state('')
-	let essayExcerpt = $state('')
-	let essayTags = $state('')
-	let essayTab = $state(0)
+	let essayTitle = ''
+	let essaySlug = ''
+	let essayExcerpt = ''
+	let essayTags = ''
+	let essayTab = 0

 	// Photo attachment state
-	let attachedPhotos: Media[] = $state([])
-	let isMediaLibraryOpen = $state(false)
-	let fileInput: HTMLInputElement | undefined = $state.raw()
+	let attachedPhotos: Media[] = []
+	let isMediaLibraryOpen = false
+	let fileInput: HTMLInputElement

 	// Media details modal state
-	let selectedMedia: Media | null = $state(null)
-	let isMediaDetailsOpen = $state(false)
+	let selectedMedia: Media | null = null
+	let isMediaDetailsOpen = false

 	const CHARACTER_LIMIT = 600

@ -184,7 +183,7 @@
 		if (!hasContent() && postType !== 'essay') return
 		if (postType === 'essay' && !essayTitle) return

-		let postData: Record<string, unknown> = {
+		let postData: any = {
 			content,
 			status: 'published',
 			attachedPhotos: attachedPhotos.map((photo) => photo.id)
@ -237,7 +236,7 @@
 	const isOverLimit = $derived(characterCount > CHARACTER_LIMIT)
 	const canSave = $derived(
 		(postType === 'post' && (characterCount > 0 || attachedPhotos.length > 0) && !isOverLimit) ||
-		(postType === 'essay' && essayTitle.length > 0 && content)
+			(postType === 'essay' && essayTitle.length > 0 && content)
 	)
 </script>

--- a/src/lib/components/admin/Input.svelte
+++ b/src/lib/components/admin/Input.svelte
@ -51,7 +51,6 @@
 		maxLength,
 		colorSwatch = false,
 		id = `input-${Math.random().toString(36).substr(2, 9)}`,
-		// eslint-disable-next-line svelte/valid-compile
 		...restProps
 	}: Props = $props()

@ -66,7 +65,7 @@
 	}

 	// Color picker functionality
-	let colorPickerInput: HTMLInputElement | undefined = $state.raw()
+	let colorPickerInput: HTMLInputElement

 	function handleColorSwatchClick() {
 		if (colorPickerInput) {
@ -127,7 +126,6 @@
 				class="color-swatch"
 				style="background-color: {value}"
 				onclick={handleColorSwatchClick}
-				onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleColorSwatchClick()}
 				role="button"
 				tabindex="0"
 				aria-label="Open color picker"
--- a/src/lib/components/admin/MediaDetailsModal.svelte
+++ b/src/lib/components/admin/MediaDetailsModal.svelte
@ -1,6 +1,7 @@
 <script lang="ts">
 	import Modal from './Modal.svelte'
 	import Button from './Button.svelte'
+	import Input from './Input.svelte'
 	import Textarea from './Textarea.svelte'
 	import SmartImage from '../SmartImage.svelte'
 	import AlbumSelector from './AlbumSelector.svelte'
@ -11,7 +12,7 @@
 	import MediaMetadataPanel from './MediaMetadataPanel.svelte'
 	import MediaUsageList from './MediaUsageList.svelte'
 	import { toast } from '$lib/stores/toast'
-	import { getFileType, isVideoFile } from '$lib/utils/mediaHelpers'
+	import { formatFileSize, getFileType, isVideoFile } from '$lib/utils/mediaHelpers'
 	import type { Media } from '@prisma/client'

 	interface Props {
@ -43,6 +44,7 @@

 	// Album management state
 	let albums = $state<Array<{ id: number; title: string; slug: string }>>([])
+	let loadingAlbums = $state(false)
 	let showAlbumSelector = $state(false)

 	// Initialize form when media changes
@ -88,6 +90,8 @@
 		if (!media) return

 		try {
+			loadingAlbums = true
+
 			// Load albums this media belongs to
 			const mediaResponse = await fetch(`/api/media/${media.id}/albums`, {
 				credentials: 'same-origin'
@ -99,6 +103,8 @@
 		} catch (error) {
 			console.error('Error loading albums:', error)
 			albums = []
+		} finally {
+			loadingAlbums = false
 		}
 	}

@ -223,7 +229,6 @@
 					<div class="video-container">
 						<video controls poster={media.thumbnailUrl || undefined} class="preview-video">
 							<source src={media.url} type={media.mimeType} />
-							<track kind="captions" />
 							Your browser does not support the video tag.
 						</video>
 					</div>
--- a/src/lib/components/admin/MediaGrid.svelte
+++ b/src/lib/components/admin/MediaGrid.svelte
@ -38,7 +38,7 @@
 	{#if isLoading && media.length === 0}
 		<!-- Loading skeleton -->
 		<div class="media-grid">
-			{#each Array(12) as _}
+			{#each Array(12) as _, i}
 				<div class="media-item skeleton" aria-hidden="true">
 					<div class="media-thumbnail skeleton-bg"></div>
 				</div>
--- a/src/lib/components/admin/MediaInput.svelte
+++ b/src/lib/components/admin/MediaInput.svelte
@ -90,12 +90,12 @@
 </script>

 <div class="media-input">
-	<div class="input-label">
+	<label class="input-label">
 		{label}
 		{#if required}
 			<span class="required">*</span>
 		{/if}
-	</div>
+	</label>

 	<!-- Selected Media Preview -->
 	{#if hasValue}
--- a/src/lib/components/admin/MediaMetadataPanel.svelte
+++ b/src/lib/components/admin/MediaMetadataPanel.svelte
@ -1,6 +1,12 @@
 <script lang="ts">
 	import Button from './Button.svelte'
-	import { formatFileSize, getFileType, isVideoFile, formatDuration, formatBitrate } from '$lib/utils/mediaHelpers'
+	import {
+		formatFileSize,
+		getFileType,
+		isVideoFile,
+		formatDuration,
+		formatBitrate
+	} from '$lib/utils/mediaHelpers'
 	import type { Media } from '@prisma/client'

 	interface Props {
--- a/src/lib/components/admin/MediaUploadModal.svelte
+++ b/src/lib/components/admin/MediaUploadModal.svelte
@ -3,6 +3,7 @@
 	import Button from './Button.svelte'
 	import FileUploadZone from './FileUploadZone.svelte'
 	import FilePreviewList from './FilePreviewList.svelte'
+	import { formatFileSize } from '$lib/utils/mediaHelpers'

 	interface Props {
 		isOpen: boolean
@ -58,7 +59,7 @@
 			files = files.filter((f) => f.name !== id)
 			// Clear any related upload progress
 			if (uploadProgress[fileToRemove.name]) {
-				const { [fileToRemove.name]: _, ...rest } = uploadProgress
+				const { [fileToRemove.name]: removed, ...rest } = uploadProgress
 				uploadProgress = rest
 			}
 		}
@ -91,7 +92,7 @@
 					successCount++
 					uploadProgress = { ...uploadProgress, [file.name]: 100 }
 				}
-			} catch {
+			} catch (error) {
 				uploadErrors = [...uploadErrors, `${file.name}: Network error`]
 			}
 		}
--- a/src/lib/components/admin/MetadataPopover.svelte
+++ b/src/lib/components/admin/MetadataPopover.svelte
@ -1,10 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import Input from './Input.svelte'
-	import type { Post } from '@prisma/client'

 	type Props = {
-		post: Post
+		post: any
 		postType: 'post' | 'essay'
 		slug: string
 		excerpt: string
--- a/src/lib/components/admin/PhotoPostForm.svelte
+++ b/src/lib/components/admin/PhotoPostForm.svelte
@ -10,20 +10,7 @@
 	import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
 	import AutoSaveStatus from './AutoSaveStatus.svelte'
 	import type { JSONContent } from '@tiptap/core'
-	import type { Media, Post } from '@prisma/client'
-	import type { Editor } from '@tiptap/core'
-
-	// Payload type for photo posts
-	interface PhotoPayload {
-		title: string
-		slug: string
-		type: string
-		status: string
-		content: JSONContent
-		featuredImage: string | null
-		tags: string[]
-		updatedAt?: string
-	}
+	import type { Media } from '@prisma/client'

 	interface Props {
 		postId?: number
@ -53,57 +40,59 @@
 	let tags = $state(initialData?.tags?.join(', ') || '')

 	// Editor ref
-	let editorRef: Editor | undefined
+	let editorRef: any

 	// Draft backup
 	const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
 	let showDraftPrompt = $state(false)
 	let draftTimestamp = $state<number | null>(null)
 	let timeTicker = $state(0)
-	const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null))
+	const draftTimeText = $derived.by(() =>
+		draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null
+	)

-function buildPayload(): PhotoPayload {
-  return {
-    title: title.trim(),
-    slug: createSlug(title),
-    type: 'photo',
-    status,
-    content,
-    featuredImage: featuredImage ? featuredImage.url : null,
-    tags: tags
-      ? tags
-          .split(',')
-          .map((tag) => tag.trim())
-          .filter(Boolean)
-      : [],
-    updatedAt
-  }
-}
+	function buildPayload() {
+		return {
+			title: title.trim(),
+			slug: createSlug(title),
+			type: 'photo',
+			status,
+			content,
+			featuredImage: featuredImage ? featuredImage.url : null,
+			tags: tags
+				? tags
+						.split(',')
+						.map((tag) => tag.trim())
+						.filter(Boolean)
+				: [],
+			updatedAt
+		}
+	}

-// Autosave store (edit mode only)
-let autoSave = mode === 'edit' && postId
-	? createAutoSaveStore({
-			debounceMs: 2000,
-			getPayload: () => (hasLoaded ? buildPayload() : null),
-			save: async (payload, { signal }) => {
-				const response = await fetch(`/api/posts/${postId}`, {
-					method: 'PUT',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify(payload),
-					credentials: 'same-origin',
-					signal
+	// Autosave store (edit mode only)
+	let autoSave =
+		mode === 'edit' && postId
+			? createAutoSaveStore({
+					debounceMs: 2000,
+					getPayload: () => (hasLoaded ? buildPayload() : null),
+					save: async (payload, { signal }) => {
+						const response = await fetch(`/api/posts/${postId}`, {
+							method: 'PUT',
+							headers: { 'Content-Type': 'application/json' },
+							body: JSON.stringify(payload),
+							credentials: 'same-origin',
+							signal
+						})
+						if (!response.ok) throw new Error('Failed to save')
+						return await response.json()
+					},
+					onSaved: (saved: any, { prime }) => {
+						updatedAt = saved.updatedAt
+						prime(buildPayload())
+						if (draftKey) clearDraft(draftKey)
+					}
 				})
-				if (!response.ok) throw new Error('Failed to save')
-				return await response.json()
-			},
-			onSaved: (saved: Post, { prime }) => {
-				updatedAt =
-				typeof saved.updatedAt === 'string' ? saved.updatedAt : saved.updatedAt.toISOString()
-				prime(buildPayload())
-				if (draftKey) clearDraft(draftKey)
-			}
-		})
-	: null
+			: null

 	// Prime autosave on initial load (edit mode only)
 	$effect(() => {
@ -115,7 +104,11 @@ let autoSave = mode === 'edit' && postId

 	// Trigger autosave when form data changes
 	$effect(() => {
-		void title; void status; void content; void featuredImage; void tags
+		title
+		status
+		content
+		featuredImage
+		tags
 		if (hasLoaded && autoSave) {
 			autoSave.schedule()
 		}
@ -131,16 +124,16 @@ let autoSave = mode === 'edit' && postId
 		}
 	})

-$effect(() => {
-  const draft = loadDraft<PhotoPayload>(draftKey)
-  if (draft) {
-    showDraftPrompt = true
-    draftTimestamp = draft.ts
-  }
-})
+	$effect(() => {
+		const draft = loadDraft<any>(draftKey)
+		if (draft) {
+			showDraftPrompt = true
+			draftTimestamp = draft.ts
+		}
+	})

 	function restoreDraft() {
-		const draft = loadDraft<PhotoPayload>(draftKey)
+		const draft = loadDraft<any>(draftKey)
 		if (!draft) return
 		const p = draft.payload
 		title = p.title ?? title
@ -163,7 +156,7 @@ $effect(() => {
 				usedIn: [],
 				createdAt: new Date(),
 				updatedAt: new Date()
-			} as unknown
+			} as any
 		}
 		showDraftPrompt = false
 		clearDraft(draftKey)
@ -183,7 +176,7 @@ $effect(() => {
 	})

 	// Navigation guard: flush autosave before navigating away (only if unsaved)
-	beforeNavigate(async (_navigation) => {
+	beforeNavigate(async (navigation) => {
 		if (hasLoaded && autoSave) {
 			if (autoSave.status === 'saved') {
 				return
@ -344,11 +337,11 @@ $effect(() => {
 				throw new Error(`Failed to ${mode === 'edit' ? 'update' : 'create'} photo post`)
 			}

-    const savedPost = await response.json()
+			const savedPost = await response.json()

-    toast.dismiss(loadingToastId)
-    toast.success(`Photo post ${status === 'published' ? 'published' : 'saved'} successfully!`)
-    clearDraft(draftKey)
+			toast.dismiss(loadingToastId)
+			toast.success(`Photo post ${status === 'published' ? 'published' : 'saved'} successfully!`)
+			clearDraft(draftKey)

 			// Redirect to posts list or edit page
 			if (mode === 'create') {
@ -411,7 +404,8 @@ $effect(() => {
 		<div class="draft-banner">
 			<div class="draft-banner-content">
 				<span class="draft-banner-text">
-					Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}.
+					Unsaved draft found{#if draftTimeText}
+						(saved {draftTimeText}){/if}.
 				</span>
 				<div class="draft-banner-actions">
 					<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
@ -450,7 +444,7 @@ $effect(() => {

 			<!-- Caption/Content -->
 			<div class="form-section">
-				<div class="editor-label">Caption & Description</div>
+				<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
--- a/src/lib/components/admin/PostDropdown.svelte
+++ b/src/lib/components/admin/PostDropdown.svelte
@ -43,7 +43,11 @@
 	}
 </script>

-<div class="dropdown-container" use:clickOutside={{ enabled: isOpen }} onclickoutside={handleClickOutside}>
+<div
+	class="dropdown-container"
+	use:clickOutside={{ enabled: isOpen }}
+	onclickoutside={handleClickOutside}
+>
 	<Button
 		bind:this={buttonRef}
 		variant="primary"
@ -65,13 +69,7 @@
 	{#if isOpen}
 		<ul class="dropdown-menu">
 			{#each postTypes as type}
-				<li
-					class="dropdown-item"
-					role="menuitem"
-					tabindex="0"
-					onclick={() => handleSelection(type.value)}
-					onkeydown={(e) => e.key === 'Enter' && handleSelection(type.value)}
-				>
+				<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">
--- a/src/lib/components/admin/PostListItem.svelte
+++ b/src/lib/components/admin/PostListItem.svelte
@ -72,14 +72,14 @@

 			if (typeof post.content === 'object' && post.content.content) {
 				// BlockNote/TipTap format
-				function extractText(node: Record<string, unknown>): string {
-					if (typeof node.text === 'string') return node.text
-					if (Array.isArray(node.content)) {
-						return node.content.map((n) => extractText(n as Record<string, unknown>)).join(' ')
+				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 as Record<string, unknown>)
+				textContent = extractText(post.content)
 			} else if (typeof post.content === 'string') {
 				textContent = post.content
 			}
@ -122,13 +122,7 @@
 	}
 </script>

-<div
-	class="post-item"
-	role="button"
-	tabindex="0"
-	onclick={handlePostClick}
-	onkeydown={(e) => e.key === 'Enter' && handlePostClick()}
->
+<article class="post-item" onclick={handlePostClick}>
 	<div class="post-main">
 		{#if post.title}
 			<h3 class="post-title">{post.title}</h3>
@ -171,9 +165,7 @@

 		{#if isDropdownOpen}
 			<div class="dropdown-menu">
-				<button class="dropdown-item" type="button" onclick={handleEdit}>
-					Edit post
-				</button>
+				<button class="dropdown-item" type="button" onclick={handleEdit}> Edit post </button>
 				<button class="dropdown-item" type="button" onclick={handleTogglePublish}>
 					{post.status === 'published' ? 'Unpublish' : 'Publish'} post
 				</button>
@ -184,7 +176,7 @@
 			</div>
 		{/if}
 	</div>
-</div>
+</article>

 <style lang="scss">
 	.post-item {
--- a/src/lib/components/admin/PostMetadataPopover.svelte
+++ b/src/lib/components/admin/PostMetadataPopover.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
 	import GenericMetadataPopover, { type MetadataConfig } from './GenericMetadataPopover.svelte'
-	import type { Post } from '@prisma/client'

 	type Props = {
-		post: Post
+		post: any
+		postType: 'post' | 'essay'
 		slug: string
 		tags: string[]
 		tagInput: string
@ -12,11 +12,12 @@
 		onRemoveTag: (tag: string) => void
 		onDelete: () => void
 		onClose?: () => void
-		onFieldUpdate?: (key: string, value: unknown) => void
+		onFieldUpdate?: (key: string, value: any) => void
 	}

 	let {
 		post,
+		postType,
 		slug = $bindable(),
 		tags = $bindable(),
 		tagInput = $bindable(),
@ -28,11 +29,11 @@
 		onFieldUpdate
 	}: Props = $props()

-	function handleFieldUpdate(key: string, value: unknown) {
-		if (key === 'slug' && typeof value === 'string') {
+	function handleFieldUpdate(key: string, value: any) {
+		if (key === 'slug') {
 			slug = value
 			onFieldUpdate?.(key, value)
-		} else if (key === 'tagInput' && typeof value === 'string') {
+		} else if (key === 'tagInput') {
 			tagInput = value
 		}
 	}
--- a/src/lib/components/admin/ProjectBrandingForm.svelte
+++ b/src/lib/components/admin/ProjectBrandingForm.svelte
@ -9,9 +9,10 @@
 	interface Props {
 		formData: ProjectFormData
 		validationErrors: Record<string, string>
+		onSave?: () => Promise<void>
 	}

-	let { formData = $bindable(), validationErrors }: Props = $props()
+	let { formData = $bindable(), validationErrors, onSave }: Props = $props()

 	// ===== Media State Management =====
 	// Convert logoUrl string to Media object for ImageUploader
@ -80,7 +81,9 @@
 	const hasFeaturedImage = $derived(
 		!!(formData.featuredImage && featuredImageMedia) || !!featuredImageMedia
 	)
-	const hasBackgroundColor = $derived(!!(formData.backgroundColor && formData.backgroundColor?.trim()))
+	const hasBackgroundColor = $derived(
+		!!(formData.backgroundColor && formData.backgroundColor?.trim())
+	)
 	const hasLogo = $derived(!!(formData.logoUrl && logoMedia) || !!logoMedia)

 	// Auto-disable toggles when content is removed
@ -90,47 +93,16 @@
 		if (!hasLogo) formData.showLogoInHeader = false
 	})

-	// Track previous toggle states to detect which one changed
-	let prevShowFeaturedImage: boolean | null = $state(null)
-	let prevShowBackgroundColor: boolean | null = $state(null)
-
-	// Mutual exclusion: only one of featured image or background color can be active
-	$effect(() => {
-		// On first run (initial load), if both are true, default to featured image taking priority
-		if (prevShowFeaturedImage === null && prevShowBackgroundColor === null) {
-			if (formData.showFeaturedImageInHeader && formData.showBackgroundColorInHeader) {
-				formData.showBackgroundColorInHeader = false
-			}
-			prevShowFeaturedImage = formData.showFeaturedImageInHeader
-			prevShowBackgroundColor = formData.showBackgroundColorInHeader
-			return
-		}
-
-		const featuredChanged = formData.showFeaturedImageInHeader !== prevShowFeaturedImage
-		const bgColorChanged = formData.showBackgroundColorInHeader !== prevShowBackgroundColor
-
-		if (featuredChanged && formData.showFeaturedImageInHeader && formData.showBackgroundColorInHeader) {
-			// Featured image was just turned ON while background color was already ON
-			formData.showBackgroundColorInHeader = false
-		} else if (bgColorChanged && formData.showBackgroundColorInHeader && formData.showFeaturedImageInHeader) {
-			// Background color was just turned ON while featured image was already ON
-			formData.showFeaturedImageInHeader = false
-		}
-
-		// Update previous values
-		prevShowFeaturedImage = formData.showFeaturedImageInHeader
-		prevShowBackgroundColor = formData.showBackgroundColorInHeader
-	})
-
 	// ===== Upload Handlers =====
 	function handleFeaturedImageUpload(media: Media) {
 		formData.featuredImage = media.url
 		featuredImageMedia = media
 	}

-	function handleFeaturedImageRemove() {
+	async function handleFeaturedImageRemove() {
 		formData.featuredImage = ''
 		featuredImageMedia = null
+		if (onSave) await onSave()
 	}

 	function handleLogoUpload(media: Media) {
@ -138,9 +110,10 @@
 		logoMedia = media
 	}

-	function handleLogoRemove() {
+	async function handleLogoRemove() {
 		formData.logoUrl = ''
 		logoMedia = null
+		if (onSave) await onSave()
 	}
 </script>

--- a/src/lib/components/admin/ProjectForm.svelte
+++ b/src/lib/components/admin/ProjectForm.svelte
@ -3,14 +3,20 @@
 	import { api } from '$lib/admin/api'
 	import AdminPage from './AdminPage.svelte'
 	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
-	import Button from './Button.svelte'
 	import Composer from './composer'
 	import ProjectMetadataForm from './ProjectMetadataForm.svelte'
 	import ProjectBrandingForm from './ProjectBrandingForm.svelte'
+	import ProjectImagesForm from './ProjectImagesForm.svelte'
+	import AutoSaveStatus from './AutoSaveStatus.svelte'
+	import DraftPrompt from './DraftPrompt.svelte'
 	import { toast } from '$lib/stores/toast'
 	import type { Project } from '$lib/types/project'
+	import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
 	import { createProjectFormStore } from '$lib/stores/project-form.svelte'
-	import type { JSONContent } from '@tiptap/core'
+	import { useDraftRecovery } from '$lib/admin/useDraftRecovery.svelte'
+	import { useFormGuards } from '$lib/admin/useFormGuards.svelte'
+	import { makeDraftKey, saveDraft, clearDraft } from '$lib/admin/draftStore'
+	import type { ProjectFormData } from '$lib/types/project'

 	interface Props {
 		project?: Project | null
@ -27,9 +33,41 @@
 	let hasLoaded = $state(mode === 'create')
 	let isSaving = $state(false)
 	let activeTab = $state('metadata')
+	let error = $state<string | null>(null)
+	let successMessage = $state<string | null>(null)

 	// Ref to the editor component
-	let editorRef: { save: () => Promise<JSONContent> } | undefined = $state.raw()
+	let editorRef: any
+
+	// Draft key for autosave fallback
+	const draftKey = $derived(mode === 'edit' && project ? makeDraftKey('project', project.id) : null)
+
+	// Autosave (edit mode only)
+	const autoSave =
+		mode === 'edit'
+			? createAutoSaveStore({
+					debounceMs: 2000,
+					getPayload: () => (hasLoaded ? formStore.buildPayload() : null),
+					save: async (payload, { signal }) => {
+						return await api.put(`/api/projects/${project?.id}`, payload, { signal })
+					},
+					onSaved: (savedProject: any, { prime }) => {
+						project = savedProject
+						formStore.populateFromProject(savedProject)
+						prime(formStore.buildPayload())
+						if (draftKey) clearDraft(draftKey)
+					}
+				})
+			: null
+
+	// Draft recovery helper
+	const draftRecovery = useDraftRecovery<Partial<ProjectFormData>>({
+		draftKey: draftKey,
+		onRestore: (payload) => formStore.setFields(payload)
+	})
+
+	// Form guards (navigation protection, Cmd+S, beforeunload)
+	useFormGuards(autoSave)

 	const tabOptions = [
 		{ value: 'metadata', label: 'Metadata' },
@ -41,12 +79,42 @@
 	$effect(() => {
 		if (project && mode === 'edit' && !hasLoaded) {
 			formStore.populateFromProject(project)
+			if (autoSave) {
+				autoSave.prime(formStore.buildPayload())
+			}
 			isLoading = false
 			hasLoaded = true
 		}
 	})

-	function handleEditorChange(content: JSONContent) {
+	// Trigger autosave when formData changes (edit mode)
+	$effect(() => {
+		// Establish dependencies on fields
+		formStore.fields
+		activeTab
+		if (mode === 'edit' && hasLoaded && autoSave) {
+			autoSave.schedule()
+		}
+	})
+
+	// Save draft only when autosave fails
+	$effect(() => {
+		if (mode === 'edit' && autoSave && draftKey) {
+			const status = autoSave.status
+			if (status === 'error' || status === 'offline') {
+				saveDraft(draftKey, formStore.buildPayload())
+			}
+		}
+	})
+
+	// Cleanup autosave on unmount
+	$effect(() => {
+		if (autoSave) {
+			return () => autoSave.destroy()
+		}
+	})
+
+	function handleEditorChange(content: any) {
 		formStore.setField('caseStudyContent', content)
 	}

@ -64,27 +132,22 @@
 			return
 		}

-		isSaving = true
 		const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} project...`)

 		try {
+			isSaving = true
+
 			const payload = {
 				...formStore.buildPayload(),
 				// Include updatedAt for concurrency control in edit mode
 				updatedAt: mode === 'edit' ? project?.updatedAt : undefined
 			}

-			console.log('[ProjectForm] Saving with payload:', {
-				showFeaturedImageInHeader: payload.showFeaturedImageInHeader,
-				showBackgroundColorInHeader: payload.showBackgroundColorInHeader,
-				showLogoInHeader: payload.showLogoInHeader
-			})
-
 			let savedProject: Project
 			if (mode === 'edit') {
-				savedProject = await api.put(`/api/projects/${project?.id}`, payload) as Project
+				savedProject = (await api.put(`/api/projects/${project?.id}`, payload)) as Project
 			} else {
-				savedProject = await api.post('/api/projects', payload) as Project
+				savedProject = (await api.post('/api/projects', payload)) as Project
 			}

 			toast.dismiss(loadingToastId)
@ -94,11 +157,10 @@
 				goto(`/admin/projects/${savedProject.id}/edit`)
 			} else {
 				project = savedProject
-				formStore.populateFromProject(savedProject)
 			}
 		} catch (err) {
 			toast.dismiss(loadingToastId)
-			if (err && typeof err === 'object' && 'status' in err && (err as { status: number }).status === 409) {
+			if ((err as any)?.status === 409) {
 				toast.error('This project has changed in another tab. Please reload.')
 			} else {
 				toast.error(`Failed to ${mode === 'edit' ? 'save' : 'create'} project`)
@ -123,20 +185,36 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
-				variant="primary"
-				onclick={handleSave}
-				disabled={isSaving}
-			>
-				{isSaving ? 'Saving...' : 'Save'}
-			</Button>
+			{#if !isLoading && mode === 'edit' && autoSave}
+				<AutoSaveStatus
+					status={autoSave.status}
+					error={autoSave.lastError}
+					lastSavedAt={project?.updatedAt}
+				/>
+			{/if}
 		</div>
 	</header>

+	{#if draftRecovery.showPrompt}
+		<DraftPrompt
+			timeAgo={draftRecovery.draftTimeText}
+			onRestore={draftRecovery.restore}
+			onDismiss={draftRecovery.dismiss}
+		/>
+	{/if}
+
 	<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'}>
@ -147,7 +225,11 @@
 								handleSave()
 							}}
 						>
-							<ProjectMetadataForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
+							<ProjectMetadataForm
+								bind:formData={formStore.fields}
+								validationErrors={formStore.validationErrors}
+								onSave={handleSave}
+							/>
 						</form>
 					</div>
 				</div>
@ -161,7 +243,11 @@
 								handleSave()
 							}}
 						>
-							<ProjectBrandingForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
+							<ProjectBrandingForm
+								bind:formData={formStore.fields}
+								validationErrors={formStore.validationErrors}
+								onSave={handleSave}
+							/>
 						</form>
 					</div>
 				</div>
@ -222,6 +308,25 @@
 		white-space: nowrap;
 	}

+	.btn-icon {
+		width: 40px;
+		height: 40px;
+		border: none;
+		background: none;
+		color: $gray-40;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: $gray-90;
+			color: $gray-10;
+		}
+	}
+
 	.admin-container {
 		width: 100%;
 		margin: 0 auto;
@ -254,12 +359,37 @@
 		margin: 0 auto;
 	}

-	.loading {
+	.loading,
+	.error {
 		text-align: center;
 		padding: $unit-6x;
 		color: $gray-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;
--- a/src/lib/components/admin/ProjectImagesForm.svelte
+++ b/src/lib/components/admin/ProjectImagesForm.svelte
@ -1,4 +1,5 @@
 <script lang="ts">
+	import Input from './Input.svelte'
 	import ImageUploader from './ImageUploader.svelte'
 	import Button from './Button.svelte'
 	import type { ProjectFormData } from '$lib/types/project'
@ -6,10 +7,11 @@

 	interface Props {
 		formData: ProjectFormData
+		validationErrors: Record<string, string>
 		onSave?: () => Promise<void>
 	}

-	let { formData = $bindable(), onSave }: Props = $props()
+	let { formData = $bindable(), validationErrors, onSave }: Props = $props()

 	// State for collapsible featured image section
 	let showFeaturedImage = $state(
--- a/src/lib/components/admin/ProjectListItem.svelte
+++ b/src/lib/components/admin/ProjectListItem.svelte
@ -131,9 +131,7 @@

 		{#if isDropdownOpen}
 			<div class="dropdown-menu">
-				<button class="dropdown-item" type="button" onclick={handleEdit}>
-					Edit project
-				</button>
+				<button class="dropdown-item" type="button" onclick={handleEdit}> Edit project </button>
 				<button class="dropdown-item" type="button" onclick={handleTogglePublish}>
 					{project.status === 'published' ? 'Unpublish' : 'Publish'} project
 				</button>
--- a/src/lib/components/admin/ProjectMetadataForm.svelte
+++ b/src/lib/components/admin/ProjectMetadataForm.svelte
@ -1,6 +1,7 @@
 <script lang="ts">
 	import Input from './Input.svelte'
 	import Textarea from './Textarea.svelte'
+	import SelectField from './SelectField.svelte'
 	import SegmentedControlField from './SegmentedControlField.svelte'
 	import DropdownSelectField from './DropdownSelectField.svelte'
 	import type { ProjectFormData } from '$lib/types/project'
@ -8,9 +9,10 @@
 	interface Props {
 		formData: ProjectFormData
 		validationErrors: Record<string, string>
+		onSave?: () => Promise<void>
 	}

-	let { formData = $bindable(), validationErrors }: Props = $props()
+	let { formData = $bindable(), validationErrors, onSave }: Props = $props()

 	const statusOptions = [
 		{
--- a/src/lib/components/admin/PublishDropdown.svelte
+++ b/src/lib/components/admin/PublishDropdown.svelte
@ -50,8 +50,10 @@
 	{/snippet}

 	{#if showDropdown}
-		<DropdownItem onclick={handleSaveDraftClick}>
-			{saveDraftText}
-		</DropdownItem>
+		{#snippet dropdown()}
+			<DropdownItem onclick={handleSaveDraftClick}>
+				{saveDraftText}
+			</DropdownItem>
+		{/snippet}
 	{/if}
 </BaseDropdown>
--- a/src/lib/components/admin/SaveActionsGroup.svelte
+++ b/src/lib/components/admin/SaveActionsGroup.svelte
@ -8,6 +8,11 @@
 		disabled?: boolean
 		isLoading?: boolean
 		canSave?: boolean
+		customActions?: Array<{
+			label: string
+			status: string
+			variant?: 'default' | 'danger'
+		}>
 	}

 	let {
@ -15,7 +20,8 @@
 		onSave,
 		disabled = false,
 		isLoading = false,
-		canSave = true
+		canSave = true,
+		customActions = []
 	}: Props = $props()

 	function handlePublish() {
--- a/src/lib/components/admin/Select.svelte
+++ b/src/lib/components/admin/Select.svelte
@ -32,7 +32,6 @@
 		onfocus,
 		onblur,
 		class: className = '',
-		// eslint-disable-next-line svelte/valid-compile
 		...restProps
 	}: Props = $props()
 </script>
--- a/src/lib/components/admin/SelectField.svelte
+++ b/src/lib/components/admin/SelectField.svelte
@ -32,7 +32,6 @@
 		required = false,
 		helpText,
 		error,
-		// eslint-disable-next-line svelte/valid-compile
 		...restProps
 	}: Props = $props()
 </script>
--- a/src/lib/components/admin/SimplePostForm.svelte
+++ b/src/lib/components/admin/SimplePostForm.svelte
@ -1,11 +1,14 @@
 <script lang="ts">
-	import { goto } from '$app/navigation'
+	import { goto, beforeNavigate } 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'
 	import { toast } from '$lib/stores/toast'
+	import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
+	import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
+	import AutoSaveStatus from './AutoSaveStatus.svelte'

 	interface Props {
 		postType: 'post'
@ -25,7 +28,9 @@

 	// State
 	let isSaving = $state(false)
+	let hasLoaded = $state(mode === 'create')
 	let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
+	let updatedAt = $state<string | undefined>(initialData?.updatedAt)

 	// Form data
 	let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
@ -38,12 +43,7 @@
 	const textContent = $derived.by(() => {
 		if (!content.content) return ''
 		return content.content
-			.map((node) => {
-				if (node.content) {
-					return node.content.map((n) => ('text' in n ? n.text : '') || '').join('')
-				}
-				return ''
-			})
+			.map((node: any) => node.content?.map((n: any) => n.text || '').join('') || '')
 			.join('\n')
 	})
 	const charCount = $derived(textContent.length)
@ -51,35 +51,211 @@

 	// Check if form has content
 	const hasContent = $derived.by(() => {
+		// 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
 	})

+	// Draft backup
+	const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
+	let showDraftPrompt = $state(false)
+	let draftTimestamp = $state<number | null>(null)
+	let timeTicker = $state(0)
+	const draftTimeText = $derived.by(() =>
+		draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null
+	)
+
+	function buildPayload() {
+		const payload: any = {
+			type: 'post',
+			status,
+			content,
+			updatedAt
+		}
+		if (linkUrl && linkUrl.trim()) {
+			payload.title = title || linkUrl
+			payload.link_url = linkUrl
+			payload.linkDescription = linkDescription
+		} else if (title) {
+			payload.title = title
+		}
+		return payload
+	}
+
+	// Autosave store (edit mode only)
+	let autoSave =
+		mode === 'edit' && postId
+			? createAutoSaveStore({
+					debounceMs: 2000,
+					getPayload: () => (hasLoaded ? buildPayload() : null),
+					save: async (payload, { signal }) => {
+						const response = await fetch(`/api/posts/${postId}`, {
+							method: 'PUT',
+							headers: { 'Content-Type': 'application/json' },
+							body: JSON.stringify(payload),
+							credentials: 'same-origin',
+							signal
+						})
+						if (!response.ok) throw new Error('Failed to save')
+						return await response.json()
+					},
+					onSaved: (saved: any, { prime }) => {
+						updatedAt = saved.updatedAt
+						prime(buildPayload())
+						if (draftKey) clearDraft(draftKey)
+					}
+				})
+			: null
+
+	// Prime autosave on initial load (edit mode only)
+	$effect(() => {
+		if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
+			autoSave.prime(buildPayload())
+			hasLoaded = true
+		}
+	})
+
+	// Trigger autosave when form data changes
+	$effect(() => {
+		status
+		content
+		linkUrl
+		linkDescription
+		title
+		if (hasLoaded && autoSave) {
+			autoSave.schedule()
+		}
+	})
+
+	// Save draft only when autosave fails
+	$effect(() => {
+		if (hasLoaded && autoSave) {
+			const saveStatus = autoSave.status
+			if (saveStatus === 'error' || saveStatus === 'offline') {
+				saveDraft(draftKey, buildPayload())
+			}
+		}
+	})
+
+	$effect(() => {
+		const draft = loadDraft<any>(draftKey)
+		if (draft) {
+			showDraftPrompt = true
+			draftTimestamp = draft.ts
+		}
+	})
+
+	function restoreDraft() {
+		const draft = loadDraft<any>(draftKey)
+		if (!draft) return
+		const p = draft.payload
+		status = p.status ?? status
+		content = p.content ?? content
+		if (p.link_url) {
+			linkUrl = p.link_url
+			linkDescription = p.linkDescription ?? linkDescription
+			title = p.title ?? title
+		} else {
+			title = p.title ?? title
+		}
+		showDraftPrompt = false
+		clearDraft(draftKey)
+	}
+
+	function dismissDraft() {
+		showDraftPrompt = false
+		clearDraft(draftKey)
+	}
+
+	// Auto-update draft time text every minute when prompt visible
+	$effect(() => {
+		if (showDraftPrompt) {
+			const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
+			return () => clearInterval(id)
+		}
+	})
+
+	// Navigation guard: flush autosave before navigating away (only if unsaved)
+	beforeNavigate(async (navigation) => {
+		if (hasLoaded && autoSave) {
+			if (autoSave.status === 'saved') {
+				return
+			}
+			// Flush any pending changes before allowing navigation to proceed
+			try {
+				await autoSave.flush()
+			} catch (error) {
+				console.error('Autosave flush failed:', error)
+			}
+		}
+	})
+
+	// Warn before closing browser tab/window if there are unsaved changes
+	$effect(() => {
+		if (!hasLoaded || !autoSave) return
+
+		function handleBeforeUnload(event: BeforeUnloadEvent) {
+			if (autoSave!.status !== 'saved') {
+				event.preventDefault()
+				event.returnValue = ''
+			}
+		}
+
+		window.addEventListener('beforeunload', handleBeforeUnload)
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+	})
+
+	// Keyboard shortcut: Cmd/Ctrl+S to save immediately
+	$effect(() => {
+		if (!hasLoaded || !autoSave) return
+
+		function handleKeydown(e: KeyboardEvent) {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+				e.preventDefault()
+				autoSave!.flush().catch((error) => {
+					console.error('Autosave flush failed:', error)
+				})
+			}
+		}
+
+		document.addEventListener('keydown', handleKeydown)
+		return () => document.removeEventListener('keydown', handleKeydown)
+	})
+
+	// Cleanup autosave on unmount
+	$effect(() => {
+		if (autoSave) {
+			return () => autoSave.destroy()
+		}
+	})
+
 	async function handleSave(publishStatus: 'draft' | 'published') {
 		if (isOverLimit) {
 			toast.error('Post is too long')
 			return
 		}

+		// For link posts, URL is required
 		if (linkUrl && !linkUrl.trim()) {
 			toast.error('Link URL is required')
 			return
 		}

-		isSaving = true
 		const loadingToastId = toast.loading(
 			`${publishStatus === 'published' ? 'Publishing' : 'Saving'} post...`
 		)

 		try {
-			const payload: Record<string, unknown> = {
-				type: 'post',
+			isSaving = true
+
+			const payload: any = {
+				type: 'post', // Use simplified post type
 				status: publishStatus,
-				content: content,
-				updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
+				content: content
 			}

+			// Add link fields if they're provided
 			if (linkUrl && linkUrl.trim()) {
 				payload.title = title || linkUrl
 				payload.link_url = linkUrl
@ -106,11 +282,13 @@
 				throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`)
 			}

-			await response.json()
+			const savedPost = await response.json()

 			toast.dismiss(loadingToastId)
 			toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`)
+			clearDraft(draftKey)

+			// Redirect back to posts list after creation
 			goto('/admin/posts')
 		} catch (err) {
 			toast.dismiss(loadingToastId)
@ -145,19 +323,37 @@
 			</h1>
 		</div>
 		<div class="header-actions">
+			{#if mode === 'edit' && autoSave}
+				<AutoSaveStatus status={autoSave.status} error={autoSave.lastError} />
+			{/if}
 			<Button variant="secondary" onclick={() => handleSave('draft')} disabled={isSaving}>
 				Save Draft
 			</Button>
 			<Button
 				variant="primary"
 				onclick={() => handleSave('published')}
-				disabled={isSaving || !hasContent || (postType === 'microblog' && isOverLimit)}
+				disabled={isSaving || !hasContent() || (postType === 'microblog' && isOverLimit)}
 			>
 				Post
 			</Button>
 		</div>
 	</header>

+	{#if showDraftPrompt}
+		<div class="draft-banner">
+			<div class="draft-banner-content">
+				<span class="draft-banner-text">
+					Unsaved draft found{#if draftTimeText}
+						(saved {draftTimeText}){/if}.
+				</span>
+				<div class="draft-banner-actions">
+					<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
+					<button class="draft-banner-button dismiss" onclick={dismissDraft}>Dismiss</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<div class="composer-container">
 		<div class="composer">
 			{#if postType === 'microblog'}
@ -238,6 +434,15 @@
 		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;
@ -346,4 +551,103 @@
 			color: $gray-60;
 		}
 	}
+	.draft-banner {
+		background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+		border-bottom: 1px solid #f59e0b;
+		box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
+		padding: $unit-3x $unit-4x;
+		animation: slideDown 0.3s ease-out;
+
+		@include breakpoint('phone') {
+			padding: $unit-2x $unit-3x;
+		}
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.draft-banner-content {
+		max-width: 1200px;
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: $unit-3x;
+
+		@include breakpoint('phone') {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: $unit-2x;
+		}
+	}
+
+	.draft-banner-text {
+		color: #92400e;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.5;
+
+		@include breakpoint('phone') {
+			font-size: 0.8125rem;
+		}
+	}
+
+	.draft-banner-actions {
+		display: flex;
+		gap: $unit-2x;
+		flex-shrink: 0;
+
+		@include breakpoint('phone') {
+			width: 100%;
+		}
+	}
+
+	.draft-banner-button {
+		background: white;
+		border: 1px solid #f59e0b;
+		color: #92400e;
+		padding: $unit $unit-3x;
+		border-radius: $unit;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		white-space: nowrap;
+
+		&:hover {
+			background: #fffbeb;
+			border-color: #d97706;
+			transform: translateY(-1px);
+			box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
+		}
+
+		&:active {
+			transform: translateY(0);
+		}
+
+		&.dismiss {
+			background: transparent;
+			border-color: #fbbf24;
+			color: #b45309;
+
+			&:hover {
+				background: rgba(255, 255, 255, 0.5);
+				border-color: #f59e0b;
+			}
+		}
+
+		@include breakpoint('phone') {
+			flex: 1;
+			padding: $unit-1_5x $unit-2x;
+			font-size: 0.8125rem;
+		}
+	}
 </style>
--- a/src/lib/components/admin/StatusPicker.svelte
+++ b/src/lib/components/admin/StatusPicker.svelte
@ -66,14 +66,7 @@
 	>
 		<span class="status-dot"></span>
 		<span class="status-label">{currentConfig.label}</span>
-		<svg
-			class="chevron"
-			class:open={isOpen}
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
-			fill="none"
-		>
+		<svg class="chevron" class:open={isOpen} width="12" height="12" viewBox="0 0 12 12" fill="none">
 			<path
 				d="M3 4.5L6 7.5L9 4.5"
 				stroke="currentColor"
@ -96,12 +89,7 @@

 			{#if viewUrl && currentStatus === 'published'}
 				<div class="dropdown-divider"></div>
-				<a
-					href={viewUrl}
-					target="_blank"
-					rel="noopener noreferrer"
-					class="dropdown-item view-link"
-				>
+				<a href={viewUrl} target="_blank" rel="noopener noreferrer" class="dropdown-item view-link">
 					View on site
 				</a>
 			{/if}
--- a/src/lib/components/admin/Textarea.svelte
+++ b/src/lib/components/admin/Textarea.svelte
@ -32,7 +32,6 @@
 		disabled = false,
 		readonly = false,
 		id = `textarea-${Math.random().toString(36).substr(2, 9)}`,
-		// eslint-disable-next-line svelte/valid-compile
 		...restProps
 	}: Props = $props()

@ -94,7 +93,7 @@
 			{rows}
 			class={getTextareaClasses()}
 			{...restProps}
-		></textarea>
+		/>
 	</div>

 	{#if (error || helpText || showCharCount) && !disabled}
--- a/src/lib/components/admin/UnifiedMediaModal.svelte
+++ b/src/lib/components/admin/UnifiedMediaModal.svelte
@ -44,6 +44,7 @@
 	let error = $state('')
 	let currentPage = $state(1)
 	let totalPages = $state(1)
+	let total = $state(0)

 	// Media selection state
 	let selectedMediaIds = $state<Set<number>>(new Set(selectedIds))
@ -136,6 +137,10 @@
 		selectedMediaIds = new Set()
 	}

+	function getSelectedIds(): number[] {
+		return Array.from(selectedMediaIds)
+	}
+
 	function getSelected(): Media[] {
 		return selectedMedia
 	}
@ -185,8 +190,8 @@
 	})

 	// Watch for filter changes
-	let previousFilterType = $state<typeof filterType | undefined>(undefined)
-	let previousPhotographyFilter = $state<typeof photographyFilter | undefined>(undefined)
+	let previousFilterType = filterType
+	let previousPhotographyFilter = photographyFilter

 	$effect(() => {
 		if (
@ -220,7 +225,6 @@
 			// Short delay to prevent flicker
 			await new Promise((resolve) => setTimeout(resolve, 500))

-
 			let url = `/api/media?page=${page}&limit=24`

 			if (filterType !== 'all') {
@ -253,6 +257,7 @@

 			currentPage = page
 			totalPages = data.pagination.totalPages
+			total = data.pagination.total

 			// Update loader state
 			if (currentPage >= totalPages) {
--- a/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
+++ b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
@ -6,7 +6,7 @@
 		editor: Editor
 		isOpen: boolean
 		onClose: () => void
-		features: { textStyles?: boolean; colors?: boolean; [key: string]: unknown }
+		features: any
 	}

 	const { editor, isOpen, onClose, features }: Props = $props()
--- a/src/lib/components/admin/composer/ComposerCore.svelte
+++ b/src/lib/components/admin/composer/ComposerCore.svelte
@ -2,7 +2,7 @@
 	import { type Editor } from '@tiptap/core'
 	import { onMount, setContext } from 'svelte'
 	import { initiateEditor } from '$lib/components/edra/editor.ts'
-	import { getEditorExtensions } from '$lib/components/edra/editor-extensions.js'
+	import { getEditorExtensions, EDITOR_PRESETS } from '$lib/components/edra/editor-extensions.js'
 	import LoaderCircle from 'lucide-svelte/icons/loader-circle'
 	import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
 	import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
@ -113,8 +113,8 @@

 	// Event handlers
 	const eventHandlers = useComposerEvents({
-		editor: () => editor,
-		mediaHandler: () => mediaHandler,
+		editor,
+		mediaHandler,
 		features
 	})

@ -140,7 +140,7 @@
 	}

 	// Update content when editor changes
-	function handleUpdate({ editor: updatedEditor, transaction }: { editor: Editor; transaction: unknown }) {
+	function handleUpdate({ editor: updatedEditor, transaction }: any) {
 		// Dismiss link menus on typing
 		linkManagerRef?.dismissOnTyping(transaction)

--- a/src/lib/components/admin/composer/ComposerLinkManager.svelte
+++ b/src/lib/components/admin/composer/ComposerLinkManager.svelte
@ -31,8 +31,8 @@
 	let linkEditPos = $state<number | null>(null)

 	// URL convert handlers
-	export function handleShowUrlConvertDropdown(pos: number, _url: string) {
-		if (!editor || !editor.view) return
+	export function handleShowUrlConvertDropdown(pos: number, url: string) {
+		if (!editor) return
 		const coords = editor.view.coordsAtPos(pos)
 		urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
 		urlConvertPos = pos
@ -48,7 +48,7 @@

 	// Link context menu handlers
 	export function handleShowLinkContextMenu(pos: number, url: string) {
-		if (!editor || !editor.view) return
+		if (!editor) return
 		const coords = editor.view.coordsAtPos(pos)
 		linkContextMenuPosition = { x: coords.left, y: coords.bottom + 5 }
 		linkContextUrl = url
@ -65,7 +65,7 @@
 	}

 	function handleEditLink() {
-		if (!editor || !editor.view || linkContextPos === null || !linkContextUrl) return
+		if (!editor || linkContextPos === null || !linkContextUrl) return
 		const coords = editor.view.coordsAtPos(linkContextPos)
 		linkEditDialogPosition = { x: coords.left, y: coords.bottom + 5 }
 		linkEditUrl = linkContextUrl
@ -133,10 +133,10 @@
 	}

 	// Dismiss dropdowns on typing
-	export function dismissOnTyping(transaction: unknown) {
+	export function dismissOnTyping(transaction: any) {
 		if (showUrlConvertDropdown && transaction.docChanged) {
 			const hasTextChange = transaction.steps.some(
-				(step: unknown) =>
+				(step: any) =>
 					step.toJSON().stepType === 'replace' || step.toJSON().stepType === 'replaceAround'
 			)
 			if (hasTextChange) {
--- a/src/lib/components/admin/composer/ComposerToolbar.svelte
+++ b/src/lib/components/admin/composer/ComposerToolbar.svelte
@ -7,8 +7,8 @@
 		editor: Editor
 		variant: ComposerVariant
 		currentTextStyle: string
-		filteredCommands: unknown
-		colorCommands: unknown[]
+		filteredCommands: any
+		colorCommands: any[]
 		excludedCommands: string[]
 		showMediaLibrary: boolean
 		onTextStyleDropdownToggle: () => void
@ -17,6 +17,7 @@

 	let {
 		editor,
+		variant,
 		currentTextStyle,
 		filteredCommands,
 		colorCommands,
--- a/src/lib/components/admin/composer/MediaInsertDropdown.svelte
+++ b/src/lib/components/admin/composer/MediaInsertDropdown.svelte
@ -1,16 +1,18 @@
 <script lang="ts">
 	import type { Editor } from '@tiptap/core'
 	import type { DropdownPosition, ComposerFeatures } from './types'
+	import { mediaSelectionStore } from '$lib/stores/media-selection'

 	interface Props {
 		editor: Editor
 		position: DropdownPosition
 		features: ComposerFeatures
+		albumId?: number
 		onDismiss: () => void
 		onOpenMediaLibrary: () => void
 	}

-	let { editor, position, features, onDismiss, onOpenMediaLibrary }: Props = $props()
+	let { editor, position, features, albumId, onDismiss, onOpenMediaLibrary }: Props = $props()

 	function insertMedia(type: string) {
 		switch (type) {
--- a/src/lib/components/admin/composer/editorConfig.ts
+++ b/src/lib/components/admin/composer/editorConfig.ts
@ -1,13 +1,12 @@
 import type { Editor } from '@tiptap/core'
 import type { ComposerVariant, ComposerFeatures } from './types'
-import type { EdraCommand } from '$lib/components/edra/commands/types'
 import { commands } from '$lib/components/edra/commands/commands.js'

 export interface FilteredCommands {
 	[key: string]: {
 		name: string
 		label: string
-		commands: EdraCommand[]
+		commands: any[]
 	}
 }

@ -27,7 +26,7 @@ export function getCurrentTextStyle(editor: Editor): string {
 // Get filtered commands based on variant and features
 export function getFilteredCommands(
 	variant: ComposerVariant,
-	_features: ComposerFeatures
+	features: ComposerFeatures
 ): FilteredCommands {
 	const filtered = { ...commands }

@ -60,20 +59,20 @@ export function getFilteredCommands(
 	// Reorganize text formatting for toolbar
 	if (filtered['text-formatting']) {
 		const allCommands = filtered['text-formatting'].commands
-		const basicFormatting: EdraCommand[] = []
-		const advancedFormatting: EdraCommand[] = []
+		const basicFormatting: any[] = []
+		const advancedFormatting: any[] = []

 		// Group basic formatting first
 		const basicOrder = ['bold', 'italic', 'underline', 'strike']
 		basicOrder.forEach((name) => {
-			const cmd = allCommands.find((c) => c.name === name)
+			const cmd = allCommands.find((c: any) => 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)
+			const cmd = allCommands.find((c: any) => c.name === name)
 			if (cmd) advancedFormatting.push(cmd)
 		})

@ -98,7 +97,7 @@ export function getFilteredCommands(
 }

 // Get media commands, but filter out based on features
-export function getMediaCommands(features: ComposerFeatures): EdraCommand[] {
+export function getMediaCommands(features: ComposerFeatures): any[] {
 	if (!commands.media) return []

 	let mediaCommands = [...commands.media.commands]
@ -112,12 +111,12 @@ export function getMediaCommands(features: ComposerFeatures): EdraCommand[] {
 }

 // Get color commands
-export function getColorCommands(): EdraCommand[] {
+export function getColorCommands(): any[] {
 	return commands.colors?.commands || []
 }

 // Get commands for bubble menu
-export function getBubbleMenuCommands(): EdraCommand[] {
+export function getBubbleMenuCommands(): any[] {
 	const textFormattingCommands = commands['text-formatting']?.commands || []
 	// Return only the essential formatting commands for bubble menu
 	return textFormattingCommands.filter((cmd) =>
--- a/src/lib/components/admin/composer/types.ts
+++ b/src/lib/components/admin/composer/types.ts
@ -33,12 +33,10 @@ export interface DropdownPosition {
 	left: number
 }

-import type { Media } from '@prisma/client'
-
 export interface MediaSelectionOptions {
 	mode: 'single' | 'multiple'
 	fileType?: 'image' | 'video' | 'audio' | 'all'
 	albumId?: number
-	onSelect: (media: Media | Media[]) => void
+	onSelect: (media: any) => void
 	onClose: () => void
 }
--- a/src/lib/components/admin/composer/useComposerEvents.svelte.ts
+++ b/src/lib/components/admin/composer/useComposerEvents.svelte.ts
@ -1,4 +1,4 @@
-import type { Editor, EditorView } from '@tiptap/core'
+import type { Editor } from '@tiptap/core'
 import type { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
 import { focusEditor } from '$lib/components/edra/utils'

@ -12,7 +12,7 @@ export interface UseComposerEventsOptions {

 export function useComposerEvents(options: UseComposerEventsOptions) {
 	// Handle paste events
-	function handlePaste(view: EditorView, event: ClipboardEvent): boolean {
+	function handlePaste(view: any, event: ClipboardEvent): boolean {
 		const clipboardData = event.clipboardData
 		if (!clipboardData) return false

@ -30,7 +30,7 @@ export function useComposerEvents(options: UseComposerEventsOptions) {
 			event.preventDefault()

 			// Use editor commands to insert HTML content
-			const editorInstance = options.editor
+			const editorInstance = (view as any).editor
 			if (editorInstance) {
 				editorInstance
 					.chain()
@ -66,7 +66,7 @@ export function useComposerEvents(options: UseComposerEventsOptions) {
 	}

 	// Handle drag and drop for images
-	function handleDrop(view: EditorView, event: DragEvent): boolean {
+	function handleDrop(view: any, event: DragEvent): boolean {
 		if (!options.features.imageUpload || !options.mediaHandler) return false

 		const files = event.dataTransfer?.files
--- a/src/lib/components/edra/drag-handle.svelte
+++ b/src/lib/components/edra/drag-handle.svelte
@ -189,7 +189,7 @@
 	}

 	// Block manipulation functions
-	function convertBlockType(type: string, attrs?: Record<string, unknown>) {
+	function convertBlockType(type: string, attrs?: any) {
 		console.log('convertBlockType called:', type, attrs)
 		// Use menuNode which was captured when menu was opened
 		const nodeToConvert = menuNode || currentNode
@ -375,10 +375,7 @@
 		const afterPos = nodePos + actualNode.nodeSize

 		// Insert the duplicated node
-		editor.chain()
-			.focus()
-			.insertContentAt(afterPos, nodeCopy)
-			.run()
+		editor.chain().focus().insertContentAt(afterPos, nodeCopy).run()

 		isMenuOpen = false
 	}
@ -387,7 +384,7 @@
 		const nodeToUse = menuNode || currentNode
 		if (!nodeToUse) return

-		const { pos } = nodeToUse
+		const { node, pos } = nodeToUse

 		// Find the actual position of the node
 		const resolvedPos = editor.state.doc.resolve(pos)
@ -486,11 +483,10 @@
 		// Find the existing drag handle created by the plugin and add click listener
 		const checkForDragHandle = setInterval(() => {
 			const existingDragHandle = document.querySelector('.drag-handle')
-			const element = existingDragHandle as HTMLElement & { __menuListener?: boolean }
-			if (existingDragHandle && !element.__menuListener) {
+			if (existingDragHandle && !(existingDragHandle as any).__menuListener) {
 				console.log('Found drag handle, adding click listener')
 				existingDragHandle.addEventListener('click', handleMenuClick)
-				element.__menuListener = true
+				;(existingDragHandle as any).__menuListener = true

 				// Update our reference to use the existing drag handle
 				dragHandleContainer = existingDragHandle as HTMLElement
--- a/src/lib/components/edra/editor-extensions.ts
+++ b/src/lib/components/edra/editor-extensions.ts
@ -43,13 +43,11 @@ import SlashCommandList from './headless/components/SlashCommandList.svelte'
 // Create lowlight instance
 const lowlight = createLowlight(all)

-import type { Component } from 'svelte'
-
 export interface EditorExtensionOptions {
 	showSlashCommands?: boolean
 	onShowUrlConvertDropdown?: (pos: number, url: string) => void
 	onShowLinkContextMenu?: (pos: number, url: string, coords: { x: number; y: number }) => void
-	imagePlaceholderComponent?: Component // Allow custom image placeholder component
+	imagePlaceholderComponent?: any // Allow custom image placeholder component
 }

 export function getEditorExtensions(options: EditorExtensionOptions = {}): Extensions {
--- a/src/lib/components/edra/extensions/drag-handle/ClipboardSerializer.ts
+++ b/src/lib/components/edra/extensions/drag-handle/ClipboardSerializer.ts
@ -5,7 +5,7 @@ import * as pmView from '@tiptap/pm/view'
 function getPmView() {
 	try {
 		return pmView
-	} catch (_error) {
+	} catch (error: Error) {
 		return null
 	}
 }
--- a/src/lib/components/edra/extensions/gallery/GalleryExtended.ts
+++ b/src/lib/components/edra/extensions/gallery/GalleryExtended.ts
@ -4,7 +4,7 @@ import type { Component } from 'svelte'
 import type { NodeViewProps } from '@tiptap/core'

 export interface GalleryOptions {
-	HTMLAttributes: Record<string, unknown>
+	HTMLAttributes: Record<string, any>
 }

 declare module '@tiptap/core' {
--- a/src/lib/components/edra/extensions/gallery/GalleryPlaceholder.ts
+++ b/src/lib/components/edra/extensions/gallery/GalleryPlaceholder.ts
@ -3,8 +3,8 @@ import type { Component } from 'svelte'
 import { SvelteNodeViewRenderer } from 'svelte-tiptap'

 export interface GalleryPlaceholderOptions {
-	HTMLAttributes: Record<string, unknown>
-	onSelectImages: (images: Array<Record<string, unknown>>, editor: Editor) => void
+	HTMLAttributes: Record<string, object>
+	onSelectImages: (images: any[], editor: Editor) => void
 }

 declare module '@tiptap/core' {
--- a/src/lib/components/edra/extensions/geolocation/GeolocationExtended.ts
+++ b/src/lib/components/edra/extensions/geolocation/GeolocationExtended.ts
@ -3,7 +3,7 @@ import type { Component } from 'svelte'
 import { SvelteNodeViewRenderer } from 'svelte-tiptap'

 export interface GeolocationExtendedOptions {
-	HTMLAttributes: Record<string, unknown>
+	HTMLAttributes: Record<string, any>
 }

 export const GeolocationExtended = (
--- a/src/lib/components/edra/extensions/geolocation/GeolocationPlaceholder.ts
+++ b/src/lib/components/edra/extensions/geolocation/GeolocationPlaceholder.ts
@ -1,4 +1,4 @@
-import { Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
+import { Editor, Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core'
 import type { Component } from 'svelte'
 import { SvelteNodeViewRenderer } from 'svelte-tiptap'

--- a/src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte
+++ b/src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte
@ -1,16 +1,15 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte'
 	import type { NodeViewProps } from '@tiptap/core'
-	import type * as L from 'leaflet'

-	type Props = NodeViewProps
+	interface Props extends NodeViewProps {}

-	let { node }: Props = $props()
+	let { node, updateAttributes }: Props = $props()

 	let mapContainer: HTMLDivElement
-	let map: L.Map | null = null
-	let marker: L.Marker | null = null
-	let leaflet: typeof L | null = null
+	let map: any
+	let marker: any
+	let leaflet: any
 	let isEditing = $state(false)

 	// Extract attributes
--- a/Show more
+++ b/Show more