docs/eslint-cleanup-plan.md

@@ -1,304 +1,349 @@
 # ESLint Cleanup Plan
 
-**Branch:** `devin/1763907694-fix-linter-errors`
+**Status:** 622 errors → 105 errors remaining (83% complete) ✨
-**Status:** 613 errors → 207 errors (66% reduction, 406 fixed)
+**Generated:** 2025-11-23
-**Base:** `main` (after cleanup/linter PR #18 was merged)
+**Last Updated:** 2025-11-23
-**Generated:** 2025-11-24
+
-**Last Updated:** 2025-11-24
+## Progress Summary
+
+| Phase | Status | Errors Fixed | Notes |
+|-------|--------|--------------|-------|
+| Phase 1: Critical Blockers | ✅ Complete | 6 | All parsing errors resolved |
+| Phase 2: Auto-fixable | ✅ Complete | 148 | Ran `eslint --fix` |
+| Phase 3: Type Safety | 🔄 In Progress | 363/277* | *More errors found during cleanup |
+| Phase 4: Svelte 5 Migration | ⏳ Pending | 0/109 | Not started |
+| Phase 5: Remaining Issues | ⏳ Pending | 0/73 | Not started |
+
+**Total Progress:** 517/622 errors fixed (83% complete)
+
+### Phase 3 Detailed Progress
+
+| Batch | Status | Errors Fixed | Files |
+|-------|--------|--------------|-------|
+| Batch 1: Admin Components | ✅ Complete | 44 | 11 files |
+| Batch 2: API Routes | ✅ Complete | 26 | 20 files |
+| Batch 3: Frontend Components | ✅ Complete | 80 | 46 files |
+| Batch 4: Server Utilities | 🔄 In Progress | 9/88 | 21 files |
+| Batch 5: Remaining Files | ⏳ Pending | 0 | TBD |
+
+**Commits:**
+- `94e13f1` - Auto-fix linting issues with eslint --fix
+- `8ec4c58` - Eliminate remaining any types in API routes
+- `9c746d5` - Replace any types in frontend components (batch 1)
+- `3d77922` - Replace more any types in components (batch 2)
+- `9379557` - Complete frontend component any type cleanup
+- `6408e7f` - Start fixing server utility any types (WIP)
 
 ## 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).
+The codebase initially had 622 ESLint errors across 180 files. Through systematic cleanup, we've reduced this to 105 errors (83% complete). This document tracks progress and provides a systematic approach to eliminate all remaining errors.
 
-**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.
+## Error Breakdown by Rule
 
----
+| Count | % of Total | Files | Rule |
+|-------|------------|-------|------|
+| 277 | 45.2% | 99 | `@typescript-eslint/no-explicit-any` |
+| 139 | 22.7% | 79 | `@typescript-eslint/no-unused-vars` |
+| 109 | 17.8% | 44 | `svelte/valid-compile` |
+| 26 | 4.2% | 6 | `@typescript-eslint/no-unused-expressions` |
+| 22 | 3.6% | 1 | `svelte/no-dupe-style-properties` |
+| 10 | 1.6% | 9 | `svelte/no-at-html-tags` |
+| 7 | 1.1% | 6 | `prefer-const` |
+| 6 | 1.0% | 6 | Parsing errors |
+| 5 | 0.8% | 2 | `no-undef` |
+| 22 | 3.6% | — | Other (various) |
 
-## Current Progress
+## Top Files Requiring Attention
 
-### What's Already Fixed ✅ (406 errors)
+1. **AvatarSVG.svelte** - 22 errors (duplicate style properties)
+2. **posts/[id]/edit/+page.svelte** - 20 errors (mixed)
+3. **admin/EssayForm.svelte** - 18 errors (mixed)
+4. **admin/GalleryUploader.svelte** - 18 errors (mixed)
+5. **admin/InlineComposerModal.svelte** - 17 errors (mixed)
 
-#### Phase 1: Auto-Fixes & Cleanup (287 errors)
+## Execution Plan
-- ✅ Removed 287 unused imports and variables
-- ✅ Renamed unused parameters with underscore prefix
-- ✅ Configured ESLint to ignore `_` prefixed variables
 
-#### Phase 2: Code Quality (52 errors)
+### Phase 1: Critical Blockers (6 errors) ✅ COMPLETE
-- ✅ 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)
+**Status:** ✅ All parsing errors resolved
-- ✅ Added `void` operator to 26 reactive dependency tracking patterns
-- ✅ Proper Svelte 5 runes mode implementation
 
-#### Phase 4: ESLint Configuration
+**Parsing Errors Fixed:**
-- ✅ Added underscore ignore pattern for unused vars
+- `src/routes/+layout.svelte:33` - Parsing error ✅
-- ⚠️ **Globally disabled** `svelte/no-at-html-tags` rule (affects 15+ files)
+- `routes/albums/[slug]/+page.svelte:140` - Parsing error ✅
+- `routes/labs/[slug]/+page.svelte:77` - Parsing error ✅
+- `routes/photos/[id]/+page.svelte:361` - Parsing error ✅
+- `routes/universe/[slug]/+page.svelte:85` - Parsing error ✅
+- `routes/work/[slug]/+page.svelte:115` - Parsing error ✅
 
-#### Phase 5: Critical Issue Fixed
+**Result:** All files now properly lintable.
-- ✅ **AlbumForm save functionality restored** (was broken, now working)
-  - Restored: `handleSave()`, `validateForm()`, related imports
-  - Restored: `isSaving`, `validationErrors` state
-  - Restored: Zod validation schema
 
----
+### Phase 2: Low-Hanging Fruit (148 errors) ✅ COMPLETE
 
-## Remaining Work (207 errors)
+**Status:** ✅ Auto-fixes applied successfully
 
-### Error Breakdown by Type
+**Errors Fixed:**
+- 139 unused imports/variables (`@typescript-eslint/no-unused-vars`) ✅
+- 7 `prefer-const` violations ✅
+- 2 empty blocks (`no-empty`) ✅
 
-| Category | Count | % of Total | Priority |
+**Action Taken:** Ran `npx eslint . --fix`
-|----------|-------|-----------|----------|
-| 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 |
 
----
+**Result:** 148 errors eliminated automatically (24% reduction).
 
-## Detailed Remaining Errors
+### Phase 3: Type Safety (277+ errors) 🔄 IN PROGRESS
 
-### Priority 1: Type Safety (103 errors)
+**Priority:** HIGH - Improves code quality and type safety
+**Status:** 150/~363 errors fixed (41% complete)
 
-Replace `any` types with proper TypeScript interfaces across:
+Replace `any` types with proper TypeScript types, organized by subsystem:
 
-**Areas to fix:**
+#### Batch 1: Admin Components ✅ COMPLETE
-- Admin components (forms, modals, utilities)
+**Status:** ✅ 44 errors fixed in 11 files
-- Server utilities (logger, metadata, apple-music-client)
-- API routes and RSS feeds
-- Content utilities and renderers
 
-**Approach:**
+**Key Improvements:**
-- Use Prisma-generated types for database models
+- Added Prisma types (Post, Project, Media, Album)
-- Use `Prisma.JsonValue` for JSON columns
+- Created specific payload interfaces (DraftPayload, PhotoPayload, etc.)
-- Create specific interfaces for complex nested data
+- Replaced `any` with `unknown` and proper type guards
-- Use `unknown` instead of `any` when type is genuinely unknown
+- Fixed editor ref types with JSONContent interfaces
-- Add type guards for safe casting
 
----
+**Files Fixed:**
+- GalleryUploader.svelte (9 errors)
+- editorConfig.ts (8 errors)
+- posts/[id]/edit/+page.svelte (8 errors)
+- SimplePostForm.svelte (7 errors)
+- GenericMetadataPopover.svelte (5 errors)
+- PhotoPostForm.svelte (5 errors)
+- useFormGuards.svelte.ts (4 errors)
 
-### Priority 2: Accessibility (52 errors)
+#### Batch 2: API Routes ✅ COMPLETE
+**Status:** ✅ 26 errors fixed in 20 files (all API/RSS routes now have 0 `any` errors)
 
-#### Breakdown by Issue Type:
+**Key Improvements:**
+- Used `Prisma.JsonValue` for JSON column types
+- Added `Prisma.[Model]WhereInput` for where clauses
+- Added `Prisma.[Model]UpdateInput` for update operations
+- Created interfaces for complex data structures (ExifData, PhotoMedia, etc.)
+- Used proper type guards (Array.isArray checks)
 
-| Issue | Count | Description |
+**Files Fixed:**
-|-------|-------|-------------|
+- api/media/bulk-delete/+server.ts (10 errors)
-| `a11y_no_static_element_interactions` | 38 | Static elements with click handlers need ARIA roles |
+- rss/+server.ts (8 errors)
-| `a11y_click_events_have_key_events` | 30 | Click handlers need keyboard event handlers |
+- api/universe/+server.ts (4 errors)
-| `a11y_label_has_associated_control` | 12 | Form labels need `for` attribute |
+- rss/universe/+server.ts (4 errors)
-| `a11y_no_noninteractive_element_interactions` | 8 | Non-interactive elements have interactions |
+- Plus 16 more API/RSS route files
-| `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:**
+#### Batch 3: Frontend Components ✅ COMPLETE
-- Add `role="button"` to clickable divs
+**Status:** ✅ 80 errors fixed in 46 files (all components now have 0 `any` errors)
-- 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
 
----
+**Key Improvements:**
+- Used Leaflet types (L.Map, L.Marker, L.LeafletEvent) for map components
+- Used Svelte 5 `Snippet` type for render functions
+- Used `Component` type for Svelte component parameters
+- Used `EditorView` type for TipTap/ProseMirror views
+- Added proper error handling with type guards
 
-### Priority 3: Svelte 5 Migration (51 errors)
+**Files Fixed:**
+- All edra/headless placeholder components (7 files, 14 errors)
+- Map components with Leaflet types (3 files, 9 errors)
+- Form components with Prisma types (12 files, 24 errors)
+- Editor extensions and utilities (6 files, 12 errors)
+- Plus 18 more component files
 
-#### Breakdown by Issue Type:
+#### Batch 4: Server Utilities 🔄 IN PROGRESS
+**Status:** 🔄 9/88 errors fixed in 21 files
 
-| Issue | Count | Description |
+**Currently Working On:**
-|-------|-------|-------------|
+- `lib/utils/content.ts` (15 → 6 errors remaining)
-| `non_reactive_update` | 25 | Variables updated but not declared with `$state()` |
+  - Added ContentNode interface for content rendering
-| `event_directive_deprecated` | 10 | Deprecated `on:*` handlers need updating |
+  - Replaced function parameters with proper types
-| `custom_element_props_identifier` | 6 | Custom element props need explicit config |
+  - Fixed content traversal and mapping functions
-| `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:**
+**Remaining Files:**
-1. **Non-reactive updates:** Wrap variables in `$state()`
+- `lib/server/apple-music-client.ts` (10 errors)
-2. **Event handlers:** Change `on:click` → `onclick`, `on:mousemove` → `onmousemove`, etc.
+- `lib/server/logger.ts` (10 errors)
-3. **Custom elements:** Add explicit `customElement.props` configuration
+- `lib/utils/metadata.ts` (10 errors)
-4. **Deprecated syntax:** Replace `<svelte:self>` with self-imports
+- `lib/server/cloudinary-audit.ts` (6 errors)
-5. **Self-closing tags:** Fix `<textarea />` → `<textarea></textarea>`
+- Plus 17 more server/utility files
 
----
+#### Batch 5: Remaining Files ⏳ PENDING
+**Status:** ⏳ Not started
 
-### Priority 4: Miscellaneous (1 error)
+**Files to Fix:**
+- `global.d.ts` (2 errors)
+- `lib/admin/autoSave.svelte.ts`
+- `lib/admin/autoSaveLifecycle.ts`
+- Other miscellaneous files
 
-- 1 parsing error to investigate
+### Phase 4: Svelte 5 Migration (109 errors) 🟡
 
----
+**Priority:** MEDIUM - Required for Svelte 5 compliance
 
-## Quality Review: Previous LLM Work
+#### Batch 1: Reactive State Declarations (~20 errors in 15 files)
 
-### Overall Assessment: ⚠️ 84% Good, 1 Critical Issue (Fixed)
+Variables not declared with `$state()`:
+- `searchModal` (DebugPanel.svelte)
+- `cardElement` (LabCard.svelte)
+- `logoElement` (ProjectItem.svelte)
+- `dropdownElement` (DropdownMenu.svelte)
+- `metadataButtonRef` (2 files)
+- `editorInstance`, `essayTitle`, `essaySlug`, etc. (EssayForm.svelte)
+- And 8 more files
 
-**What went well:**
+**Action:** Wrap reactive variables in `$state()` declarations.
-- ✅ 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:**
+#### Batch 2: Event Handler Migration (~12 errors in 6 files)
-- ❌ **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:**
+Deprecated `on:*` handlers to migrate:
-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.
+- `on:click` → `onclick` (3 occurrences in 2 files)
+- `on:mousemove` → `onmousemove` (2 occurrences)
+- `on:mouseenter` → `onmouseenter` (2 occurrences)
+- `on:mouseleave` → `onmouseleave` (2 occurrences)
+- `on:keydown` → `onkeydown` (1 occurrence)
 
-### Files Requiring Testing
+**Files:**
+- BaseModal.svelte
+- LabCard.svelte
 
-Before merging, test these admin forms thoroughly:
+#### Batch 3: Accessibility Issues (~40 errors in 22 files)
-- ✅ 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
+**A11y fixes needed:**
+- 15 instances: Click events need keyboard handlers
+- 10 instances: Form labels need associated controls
+- 8 instances: Elements with click handlers need ARIA roles
+- 3 instances: Non-interactive elements with tabindex
+- 2 instances: Elements need ARIA labels
 
-**`@html` Global Disable:**
+**Common patterns:**
-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)".
+- Add `role="button"` and `onkeydown` handlers to clickable divs
+- Associate labels with form controls using `for` attribute
+- Add `tabindex="-1"` or remove unnecessary tabindex
 
-**Affected files** (15 total):
+#### Batch 4: Deprecated Component Syntax (~10 errors in 6 files)
-- 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.
+**Issues:**
+- `<svelte:self>` → Use self-imports instead (DropdownMenu.svelte)
+- `<svelte:component>` → Components are dynamic by default in runes mode
+- Self-closing non-void elements (3 files, e.g., `<textarea />`)
 
----
+#### Batch 5: Custom Element Props (6 files)
 
-## Execution Strategy
+**Issue:** Rest props with `$props()` need explicit destructuring or `customElement.props` config
 
-### Approach
+**Files:**
+- admin/Button.svelte
+- stories/Button.svelte
+- And 4 more component files
 
-1. ✅ **AlbumForm fixed** - Critical blocker resolved
+#### Batch 6: Miscellaneous Svelte Issues
-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
+- State referenced locally warnings (5 occurrences)
+- Video elements missing captions (1 occurrence)
+- Unused CSS selectors (2 occurrences)
+- Image redundant alt text (1 occurrence)
 
-#### Phase 1: Type Safety (103 errors) - HIGH PRIORITY
+### Phase 5: Remaining Issues (73 errors) 🟡
-**Goal:** Replace all `any` types with proper TypeScript types
 
-**Batches:**
+**Priority:** MEDIUM-LOW
-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:**
+#### AvatarSVG.svelte (22 errors)
-- Use Prisma types: `import type { Post, Project, Media } from '@prisma/client'`
+- 22 duplicate style properties in SVG gradient definitions
-- Use `Prisma.JsonValue` for JSON columns
+- **Action:** Consolidate duplicate `fill` and `stop-color` properties
-- Create interfaces for complex structures
-- Use type guards instead of casts
 
-#### Phase 2: Accessibility (52 errors) - MEDIUM-HIGH PRIORITY
+#### XSS Warnings (10 errors)
-**Goal:** Make UI accessible to all users
+- 10 `{@html}` usage warnings in various components
+- **Action:** Review each instance, ensure content is sanitized, or suppress with eslint-disable if safe
 
-**Batches:**
+#### Code Quality Issues
-1. Add ARIA roles to 38 static elements with click handlers
+- 5 `no-undef` errors (undefined variables)
-2. Add keyboard handlers to 30 click events
+- 26 `@typescript-eslint/no-unused-expressions` errors
-3. Fix 12 form label associations
+- 4 `no-case-declarations` errors
-4. Remove inappropriate tabindex (6 errors)
+- 3 `@typescript-eslint/no-empty-object-type` errors
-5. Fix remaining a11y issues (4+2+2+2 = 10 errors)
+- 3 `no-useless-escape` errors
 
-**Testing:** Use keyboard navigation to verify changes work
+## Recommended Execution Strategy
 
-#### Phase 3: Svelte 5 Updates (51 errors) - MEDIUM PRIORITY
+### For Manual Cleanup
-**Goal:** Full Svelte 5 compatibility
+1. ✅ **Work sequentially** - Complete phases in order
+2. ✅ **Batch similar fixes** - Process files with same error pattern together
+3. ✅ **Track progress** - Use todo list to check off completed items
+4. ✅ **Verify continuously** - Run `npx eslint .` after each batch to confirm progress
+5. ✅ **Commit frequently** - Commit after each batch for easy rollback if needed
 
-**Batches:**
+### For LLM-Assisted Cleanup
-1. Fix 25 non-reactive updates with `$state()`
+1. **Process in phases** - Don't jump between phases
-2. Update 10 deprecated event handlers (`on:*` → `on*`)
+2. **One batch at a time** - Complete each batch before moving to next
-3. Fix 6 custom element props
+3. **Verify after each batch** - Check error count decreases as expected
-4. Fix 5 state referenced locally
+4. **Ask for clarification** - If error pattern is unclear, investigate before mass-fixing
-5. Fix remaining misc issues (2+2+1 = 5 errors)
+5. **Preserve functionality** - Don't break working code while fixing lint 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/
+npx eslint .
 
-# Check error count
+# Auto-fix what's possible
-npx eslint src/ 2>/dev/null | grep "✖"
+npx eslint . --fix
 
 # Check specific file
 npx eslint src/path/to/file.svelte
 
-# Test all admin forms
+# Output to JSON for analysis
-npm run dev
+npx eslint . --format json > eslint-output.json
-# Navigate to /admin and test each form
-```
 
----
+# Count errors by rule
+npx eslint . 2>&1 | grep "error" | wc -l
+```
 
 ## Success Metrics
 
-- **Phase 0: AlbumForm Fixed** ✅ Critical blocker resolved
+- **Phase 1 Complete:** ✅ No parsing errors (6 fixed)
-- **Phase 1 Complete:** 104 errors remaining (103 → 0 type safety)
+- **Phase 2 Complete:** ✅ 468 errors remaining (24% reduction, 154 fixed)
-- **Phase 2 Complete:** 52 errors remaining (a11y fixed)
+- **Phase 3 In Progress:** 🔄 105 errors remaining (83% reduction, 517 total fixed)
-- **Phase 3 Complete:** 1 error remaining (Svelte 5 migration complete)
+  - Batch 1-3 Complete: 150 `any` types eliminated
-- **Phase 4 Complete:** 🎯 **0 errors - 100% clean codebase**
+  - Batch 4 In Progress: 9/88 errors fixed
-
+- **Phase 4 Pending:** ~109 Svelte 5 errors to fix
----
+- **Phase 5 Pending:** ~73 miscellaneous errors to fix
-
+- **Target:** 0 errors (100% clean)
-## 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
+- Prettier formatting issues (93 files) are separate from ESLint and should be fixed with `npm run format`
-- **Sass `@import` warnings** - Informational only, not counted in errors
+- Sass `@import` deprecation warnings are informational only and don't count toward the 613 errors
-- **Branch history** - Built on top of cleanup/linter (PR #18)
+- Some `{@html}` warnings may be acceptable if content is trusted/sanitized
-- **Testing is critical** - Admin forms must work before merge
+
+## Key Learnings
+
+### Type System Patterns Established
+
+1. **Prisma Types:** Always use generated Prisma types for database models
+   - `import type { Post, Project, Media, Album } from '@prisma/client'`
+   - Use `Prisma.JsonValue` for JSON columns
+   - Use `Prisma.[Model]WhereInput` and `Prisma.[Model]UpdateInput`
+
+2. **Content Handling:** Create structured interfaces for complex nested data
+   - ContentNode interface for TipTap/BlockNote content
+   - Type guards for safe traversal (Array.isArray, typeof checks)
+
+3. **Component Types:** Use Svelte 5 and framework-specific types
+   - `Snippet` for render functions
+   - `Component` for component references
+   - Specific editor types (Editor, EditorView, JSONContent)
+
+4. **Error Handling:** Use type guards instead of `any` casts
+   - `err && typeof err === 'object' && 'status' in err`
+   - `Record<string, unknown>` for truly dynamic objects
+   - `unknown` instead of `any` when type is genuinely unknown
+
+### Commit Strategy
+
+- Commits grouped by logical batches (admin components, API routes, etc.)
+- Terse, informal commit messages focusing on impact
+- Frequent commits for easy rollback if needed
+- No mention of tooling (Claude Code) in commit messages
 
 ---
 
-**Last Updated:** 2025-11-24
+**Last Updated:** 2025-11-23
-**Next Review:** After Phase 1 (Type Safety) completion
+**Next Review:** After Phase 3 Batch 4 completion
-**Estimated Total Time:** ~25-35 hours for remaining 207 errors
+**Estimated Completion:** Phase 3 in progress, ~105 errors remaining

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/']
 	},

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",

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':

pnpm-workspace.yaml

@@ -1,3 +0,0 @@
-onlyBuiltDependencies:
-  - "@musicorum/lastfm"
-  - "psn-api"

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):', error.message)
-		console.log('📊 Migration table check failed (expected on first deploy):', message)
 		return false
 	}
 }

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 }
 		}
 

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: any
-	const content: Component
 	export default content
 }
 

src/lib/admin/api.ts

@@ -23,9 +23,7 @@ async function handleResponse(res: Response) {
     // Redirect to login for unauthorized requests
     try {
       goto('/admin/login')
-    } catch {
+    } catch {}
-      // Ignore navigation errors (e.g., if already on login page)
-    }
   }
 
   const contentType = res.headers.get('content-type') || ''
@@ -58,7 +56,7 @@ export async function request<TResponse = unknown, TBody = unknown>(
   const res = await fetch(url, {
     method,
     headers: mergedHeaders,
-    body: body ? (isFormData ? (body as FormData) : JSON.stringify(body)) : undefined,
+    body: body ? (isFormData ? (body as any) : JSON.stringify(body)) : undefined,
     signal,
     credentials: 'same-origin'
   })

src/lib/admin/autoSave.svelte.ts

@@ -8,7 +8,7 @@ export interface AutoSaveStoreOptions<TPayload, TResponse = unknown> {
   onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
 }
 
-export interface AutoSaveStore<TPayload, _TResponse = unknown> {
+export interface AutoSaveStore<TPayload, TResponse = unknown> {
   readonly status: AutoSaveStatus
   readonly lastError: string | null
   schedule: () => void
@@ -36,7 +36,7 @@ export interface AutoSaveStore<TPayload, _TResponse = unknown> {
  */
 export function createAutoSaveStore<TPayload, TResponse = unknown>(
   opts: AutoSaveStoreOptions<TPayload, TResponse>
-): AutoSaveStore<TPayload, unknown> {
+): AutoSaveStore<TPayload, TResponse> {
   const debounceMs = opts.debounceMs ?? 2000
   const idleResetMs = opts.idleResetMs ?? 2000
   let timer: ReturnType<typeof setTimeout> | null = null
@@ -70,9 +70,6 @@ export function createAutoSaveStore<TPayload, TResponse = unknown>(
 
   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)
   }
 
@@ -83,44 +80,24 @@ export function createAutoSaveStore<TPayload, TResponse = unknown>(
     }
 
     const payload = opts.getPayload()
-    if (!payload) {
+    if (!payload) return
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Skipped: getPayload returned null/undefined')
-      }
-      return
-    }
 
     const hash = safeHash(payload)
-    if (lastSentHash && hash === lastSentHash) {
+    if (lastSentHash && hash === lastSentHash) return
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Skipped: payload unchanged (hash match)')
-      }
-      return
-    }
 
     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 (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Saved successfully')
-      }
       if (opts.onSaved) opts.onSaved(res, { prime })
-    } catch (e) {
+    } catch (e: any) {
-      if (e instanceof Error && e.name === 'AbortError') {
+      if (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) {
@@ -128,10 +105,7 @@ export function createAutoSaveStore<TPayload, TResponse = unknown>(
       } else {
         setStatus('error')
       }
-      lastError = e instanceof Error ? e.message : 'Auto-save failed'
+      lastError = e?.message || 'Auto-save failed'
-      if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-        console.debug('[AutoSave] Error:', lastError)
-      }
     }
   }
 

src/lib/admin/autoSave.ts

@@ -82,7 +82,7 @@ export function createAutoSaveController<TPayload, TResponse = unknown>(
       lastSentHash = hash
       setStatus('saved')
       if (opts.onSaved) opts.onSaved(res, { prime })
-    } catch (e: unknown) {
+    } catch (e: any) {
       if (e?.name === 'AbortError') {
         // Newer save superseded this one
         return

src/lib/admin/autoSaveLifecycle.ts

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

src/lib/admin/draftStore.ts

@@ -26,9 +26,7 @@ export function loadDraft<T = unknown>(key: string): Draft<T> | null {
 export function clearDraft(key: string) {
   try {
     localStorage.removeItem(key)
-  } catch {
+  } catch {}
-    // Ignore storage errors
-  }
 }
 
 export function timeAgo(ts: number): string {

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 (!options.draftKey || options.enabled === false) return
-		if (!key || 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 (!options.draftKey) return
-			if (!key) return
+			const draft = loadDraft<TPayload>(options.draftKey)
-			const draft = loadDraft<TPayload>(key)
 			if (!draft) return
 
 			options.onRestore(draft.payload)
 			showPrompt = false
-			clearDraft(key)
+			clearDraft(options.draftKey)
 		},
 
 		dismiss() {
-			const key = options.draftKey()
+			if (!options.draftKey) return
-			if (!key) return
 			showPrompt = false
-			clearDraft(key)
+			clearDraft(options.draftKey)
 		}
 	}
 }

src/lib/admin/useFormGuards.svelte.ts

@@ -2,13 +2,11 @@ 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>(
+export function useFormGuards(autoSave: AutoSaveStore<unknown, unknown> | null) {
-	autoSave: AutoSaveStore<TPayload, unknown> | 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
 
@@ -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) => {
 					console.error('Autosave flush failed:', error)
 					toast.error('Failed to save changes')
 				})

src/lib/components/AppleMusicSearchModal.svelte

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

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'
@@ -86,7 +86,6 @@
 
 <div
 	class="face-container"
-	role="presentation"
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
 	style="transform: scale({scale.current})"

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"

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(() => {
@@ -182,12 +184,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 +213,7 @@
 
 {#if dev}
 	<div class="debug-panel" class:minimized={isMinimized}>
-		<div
+		<div class="debug-header" onclick={() => isMinimized = !isMinimized}>
-			class="debug-header"
-			role="button"
-			tabindex="0"
-			onclick={() => (isMinimized = !isMinimized)}
-			onkeydown={(e) => e.key === 'Enter' && (isMinimized = !isMinimized)}
-		>
 			<h3>Debug Panel</h3>
 			<button class="minimize-btn" aria-label={isMinimized ? 'Expand' : 'Minimize'}>
 				{isMinimized ? '▲' : '▼'}
@@ -295,15 +291,7 @@
 								{#each albums as album}
 									{@const albumId = `${album.artist.name}:${album.name}`}
 									<div class="album-item" class:playing={album.isNowPlaying} class:expanded={expandedAlbumId === albumId}>
-										<div
+										<div class="album-header" onclick={() => expandedAlbumId = expandedAlbumId === albumId ? null : albumId}>
-										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-content">
 												<div class="album-info">
 													<span class="name">{album.name}</span>
@@ -1067,4 +1055,4 @@
 			margin-left: 4px;
 		}
 	}
-</style>
+</style>

src/lib/components/DynamicPostContent.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LinkCard from './LinkCard.svelte'
 	import Slideshow from './Slideshow.svelte'
 	import BackButton from './BackButton.svelte'
 	import { formatDate } from '$lib/utils/date'

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

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

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}
+		on:mousemove={handleMouseMove}
-		onmouseenter={handleMouseEnter}
+		on:mouseenter={handleMouseEnter}
-		onmouseleave={handleMouseLeave}
+		on:mouseleave={handleMouseLeave}
-		onclick={() => (window.location.href = projectUrl)}
+		on:click={() => (window.location.href = projectUrl)}
-		onkeydown={(e) => e.key === 'Enter' && (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}
+		on:mousemove={handleMouseMove}
-		onmouseenter={handleMouseEnter}
+		on:mouseenter={handleMouseEnter}
-		onmouseleave={handleMouseLeave}
+		on:mouseleave={handleMouseLeave}
 		style:transform
 	>
 		<div class="card-header">

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
+		<div class="lightbox-content" onclick={(e) => e.stopPropagation()}>
-			class="lightbox-content"
-			role="dialog"
-			aria-modal="true"
-			tabindex="-1"
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-		>
 			<div class="lightbox-image-container">
 				<img
 					src={images[selectedIndex]}

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) {

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">

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'
 

src/lib/components/PhotoMetadata.svelte

@@ -23,6 +23,7 @@
 		backHref,
 		backLabel,
 		showBackButton = false,
+		albums = [],
 		class: className = ''
 	}: Props = $props()
 

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>

src/lib/components/ProjectItem.svelte

@@ -38,8 +38,8 @@
 	)
 
 	// 3D tilt effect
-	let cardElement: HTMLDivElement | undefined = $state.raw()
+	let cardElement: HTMLDivElement
-	let logoElement: HTMLElement | undefined = $state.raw()
+	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}
+	role={isClickable ? 'button' : 'article'}
-	{...(isClickable ? { tabindex: 0 } : {})}
+	tabindex={isClickable ? 0 : -1}
 >
 	<div class="project-logo" style="background-color: {backgroundColor}">
 		{#if svgContent}

src/lib/components/ProjectPasswordProtection.svelte

@@ -1,3 +1,4 @@
+import type { Project } from '@prisma/client'
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import Button from '$lib/components/admin/Button.svelte'

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}

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
+		<div class="single-image image-container" onclick={() => openLightbox()}>
-			class="single-image image-container"
-			role="button"
-			tabindex="0"
-			onclick={() => openLightbox()}
-			onkeydown={(e) => e.key === 'Enter' && 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
+			<div class="main-image image-container" onclick={() => openLightbox()}>
-				class="main-image image-container"
-				role="button"
-				tabindex="0"
-				onclick={() => openLightbox()}
-				onkeydown={(e) => e.key === 'Enter' && openLightbox()}
-			>
 				<img
 					src={items[selectedIndex].url}
 					alt={items[selectedIndex].alt || `${alt} ${selectedIndex + 1}`}

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}

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'

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,7 +34,6 @@
 
 	// 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)
@@ -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
 		}
@@ -113,9 +112,9 @@
 		if (!album) return
 
 		try {
-			const response = await fetch(`/api/albums/${album.id}`, {
+		const response = await fetch(`/api/albums/${album.id}`, {
-				credentials: 'same-origin'
+			credentials: 'same-origin'
-			})
+		})
 			if (response.ok) {
 				const data = await response.json()
 				albumMedia = data.media || []
@@ -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,
+				content: formData.content
-				updatedAt: mode === 'edit' ? album?.updatedAt : undefined
 			}
 
 			const url = mode === 'edit' ? `/api/albums/${album?.id}` : '/api/albums'
@@ -275,13 +274,12 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
+			{#if !isLoading}
-				variant="primary"
+				<AutoSaveStatus
-				onclick={handleSave}
+					status="idle"
-				disabled={isSaving}
+					lastSavedAt={album?.updatedAt}
-			>
+				/>
-				{isSaving ? 'Saving...' : 'Save'}
+			{/if}
-			</Button>
 		</div>
 	</header>
 
@@ -300,6 +298,8 @@
 							bind:value={formData.title}
 							placeholder="Album title"
 							required
+							error={validationErrors.title}
+							disabled={isSaving}
 						/>
 
 						<Input
@@ -307,7 +307,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 +316,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 +333,7 @@
 							label="Status"
 							bind:value={formData.status}
 							options={statusOptions}
+							disabled={isSaving}
 						/>
 					</div>
 
@@ -337,6 +343,7 @@
 							<input
 								type="checkbox"
 								bind:checked={formData.showInUniverse}
+								disabled={isSaving}
 								class="toggle-input"
 							/>
 							<div class="toggle-content">
@@ -393,6 +400,7 @@
 						bind:data={formData.content}
 						placeholder="Add album content..."
 						onChange={handleContentUpdate}
+						editable={!isSaving}
 						albumId={album?.id}
 						variant="full"
 					/>
@@ -454,6 +462,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;

src/lib/components/admin/AlbumListItem.svelte

@@ -1,3 +1,4 @@
+import type { Album } from '@prisma/client'
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import AdminByline from './AdminByline.svelte'

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

src/lib/components/admin/AutoSaveStatus.svelte

@@ -10,7 +10,6 @@
     lastSavedAt?: Date | string | null
     showTimestamp?: boolean
     compact?: boolean
-    onclick?: () => void
   }
 
   let {
@@ -20,8 +19,7 @@
     error: errorProp,
     lastSavedAt,
     showTimestamp = true,
-    compact = true,
+    compact = true
-    onclick
   }: Props = $props()
 
   // Support both old subscription-based stores and new reactive values
@@ -62,7 +60,7 @@
 
   const label = $derived.by(() => {
     // Force dependency on refreshKey to trigger re-computation
-    void refreshKey
+    refreshKey
 
     switch (status) {
       case 'saving':
@@ -83,19 +81,12 @@
 </script>
 
 {#if label}
-  <button
+  <div class="autosave-status" class:compact>
-    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>
 {/if}
 
 <style lang="scss">
@@ -105,26 +96,10 @@
     gap: 6px;
     color: $gray-40;
     font-size: 0.875rem;
-    background: none;
-    border: none;
-    padding: 0;
-    font-family: inherit;
 
     &.compact {
       font-size: 0.75rem;
     }
-
-    &.clickable {
-      cursor: pointer;
-
-      &:hover {
-        color: $gray-20;
-      }
-    }
-
-    &:disabled {
-      cursor: default;
-    }
   }
 
   .spinner {

src/lib/components/admin/BaseModal.svelte

@@ -81,15 +81,12 @@
 {#if isOpen}
 	<div
 		class="modal-backdrop"
-		role="presentation"
+		on:click={handleBackdropClick}
-		onclick={handleBackdropClick}
 		transition:fade={{ duration: TRANSITION_FAST_MS }}
 	>
 		<div
 			class={modalClass}
-			onclick={(e) => e.stopPropagation()}
+			on:click|stopPropagation
-			onkeydown={(e) => e.stopPropagation()}
-			tabindex="-1"
 			transition:fade={{ duration: TRANSITION_FAST_MS }}
 			role="dialog"
 			aria-modal="true"

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">

src/lib/components/admin/Button.svelte

@@ -33,7 +33,6 @@
 		icon,
 		children,
 		onclick,
-		// eslint-disable-next-line svelte/valid-compile
 		...restProps
 	}: Props = $props()
 

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}

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,7 +7,11 @@
 	import Input from './Input.svelte'
 	import DropdownSelectField from './DropdownSelectField.svelte'
 	import { toast } from '$lib/stores/toast'
-	import type { JSONContent } from '@tiptap/core'
+	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, Editor as TipTapEditor } from '@tiptap/core'
+	import type { Post } from '@prisma/client'
 
 	interface Props {
 		postId?: number
@@ -25,9 +29,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 || '')
@@ -40,6 +46,49 @@
 	// Ref to the editor component
 	let editorRef: { save: () => Promise<JSONContent> } | undefined
 
+	// 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: Post, { prime }) => {
+				updatedAt = saved.updatedAt.toISOString()
+				prime(buildPayload())
+				if (draftKey) clearDraft(draftKey)
+			}
+		})
+	: null
+
 	const tabOptions = [
 		{ value: 'metadata', label: 'Metadata' },
 		{ value: 'content', label: 'Content' }
@@ -59,19 +108,127 @@
 	]
 
 	// Auto-generate slug from title
-	$effect(() => {
+$effect(() => {
-		if (title && !slug) {
+  if (title && !slug) {
 			slug = title
 				.toLowerCase()
 				.replace(/[^a-z0-9]+/g, '-')
 				.replace(/^-+|-+$/g, '')
 		}
+})
+
+	// Prime autosave on initial load (edit mode only)
+	$effect(() => {
+		if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
+			autoSave.prime(buildPayload())
+			hasLoaded = true
+		}
 	})
 
-	// Mark as loaded for edit mode
+	// Trigger autosave when form data changes
 	$effect(() => {
-		if (mode === 'edit' && initialData && !hasLoaded) {
+		title; slug; status; content; tags; activeTab
-			hasLoaded = true
+		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<ReturnType<typeof buildPayload>>(draftKey)
+  if (draft) {
+    showDraftPrompt = true
+    draftTimestamp = draft.ts
+  }
+})
+
+	function restoreDraft() {
+		const draft = loadDraft<ReturnType<typeof buildPayload>>(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()
 		}
 	})
 
@@ -104,18 +261,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,
+				tags
-				updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
 			}
 
 			const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
@@ -141,7 +298,8 @@
 			const savedPost = await response.json()
 
 			toast.dismiss(loadingToastId)
-			toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
+      toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
+      clearDraft(draftKey)
 
 			if (mode === 'create') {
 				goto(`/admin/posts/${savedPost.id}/edit`)
@@ -154,6 +312,7 @@
 			isSaving = false
 		}
 	}
+
 </script>
 
 <AdminPage>
@@ -169,17 +328,39 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
+			{#if mode === 'edit' && autoSave}
-				variant="primary"
+				<AutoSaveStatus
-				onclick={handleSave}
+					status={autoSave.status}
-				disabled={isSaving}
+					error={autoSave.lastError}
-			>
+					lastSavedAt={initialData?.updatedAt}
-				{isSaving ? 'Saving...' : 'Save'}
+				/>
-			</Button>
+			{/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'}>
@@ -208,7 +389,7 @@
 							/>
 
 							<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 +489,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 +647,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;
 

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}

src/lib/components/admin/FormField.svelte

@@ -59,7 +59,7 @@
 			{disabled}
 			onchange={handleChange}
 			rows="4"
-		></textarea>
+		/>
 	{:else}
 		<input
 			id={name}

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)}

src/lib/components/admin/GalleryUploader.svelte

@@ -1,6 +1,7 @@
 <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'
@@ -26,13 +27,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
@@ -73,7 +78,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)
 
@@ -407,14 +412,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 +546,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}

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 {

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

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 -->

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 postType: PostType = initialPostType
-	let mode: ComposerMode = $state(initialMode)
+	let mode: ComposerMode = initialMode
-	let content: JSONContent = $state(
+	let content: JSONContent = initialContent || {
-		initialContent || {
+		type: 'doc',
-			type: 'doc',
+		content: [{ type: 'paragraph' }]
-			content: [{ type: 'paragraph' }]
+	}
-		}
+	let characterCount = 0
-	)
+	let editorInstance: { save: () => Promise<JSONContent>; clear: () => void } | undefined
-	let characterCount = $state(0)
-	let editorInstance: { save: () => Promise<JSONContent>; clear: () => void } | undefined =
-		$state.raw()
 
 	// Essay metadata
-	let essayTitle = $state('')
+	let essayTitle = ''
-	let essaySlug = $state('')
+	let essaySlug = ''
-	let essayExcerpt = $state('')
+	let essayExcerpt = ''
-	let essayTags = $state('')
+	let essayTags = ''
-	let essayTab = $state(0)
+	let essayTab = 0
 
 	// Photo attachment state
-	let attachedPhotos: Media[] = $state([])
+	let attachedPhotos: Media[] = []
-	let isMediaLibraryOpen = $state(false)
+	let isMediaLibraryOpen = false
-	let fileInput: HTMLInputElement | undefined = $state.raw()
+	let fileInput: HTMLInputElement
 
 	// Media details modal state
-	let selectedMedia: Media | null = $state(null)
+	let selectedMedia: Media | null = null
-	let isMediaDetailsOpen = $state(false)
+	let isMediaDetailsOpen = false
 
 	const CHARACTER_LIMIT = 600
 

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"

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>

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>

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}

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`]
 			}
 		}

src/lib/components/admin/PhotoPostForm.svelte

@@ -97,8 +97,7 @@ let autoSave = mode === 'edit' && postId
 				return await response.json()
 			},
 			onSaved: (saved: Post, { prime }) => {
-				updatedAt =
+				updatedAt = saved.updatedAt.toISOString()
-				typeof saved.updatedAt === 'string' ? saved.updatedAt : saved.updatedAt.toISOString()
 				prime(buildPayload())
 				if (draftKey) clearDraft(draftKey)
 			}
@@ -115,7 +114,7 @@ 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()
 		}
@@ -183,7 +182,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
@@ -450,7 +449,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

src/lib/components/admin/PostDropdown.svelte

@@ -65,13 +65,7 @@
 	{#if isOpen}
 		<ul class="dropdown-menu">
 			{#each postTypes as type}
-				<li
+				<li class="dropdown-item" onclick={() => handleSelection(type.value)}>
-					class="dropdown-item"
-					role="menuitem"
-					tabindex="0"
-					onclick={() => handleSelection(type.value)}
-					onkeydown={(e) => e.key === 'Enter' && handleSelection(type.value)}
-				>
 					<div class="dropdown-icon">
 						{#if type.value === 'essay'}
 							<svg width="20" height="20" viewBox="0 0 20 20" fill="none">

src/lib/components/admin/PostListItem.svelte

@@ -1,3 +1,4 @@
+import type { Post } from '@prisma/client'
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import { onMount } from 'svelte'
@@ -122,13 +123,7 @@
 	}
 </script>
 
-<div
+<article class="post-item" onclick={handlePostClick}>
-	class="post-item"
-	role="button"
-	tabindex="0"
-	onclick={handlePostClick}
-	onkeydown={(e) => e.key === 'Enter' && handlePostClick()}
->
 	<div class="post-main">
 		{#if post.title}
 			<h3 class="post-title">{post.title}</h3>
@@ -184,7 +179,7 @@
 			</div>
 		{/if}
 	</div>
-</div>
+</article>
 
 <style lang="scss">
 	.post-item {

src/lib/components/admin/PostMetadataPopover.svelte

@@ -4,6 +4,7 @@
 
 	type Props = {
 		post: Post
+		postType: 'post' | 'essay'
 		slug: string
 		tags: string[]
 		tagInput: string
@@ -17,6 +18,7 @@
 
 	let {
 		post,
+		postType,
 		slug = $bindable(),
 		tags = $bindable(),
 		tagInput = $bindable(),

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
@@ -90,47 +91,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 +108,10 @@
 		logoMedia = media
 	}
 
-	function handleLogoRemove() {
+	async function handleLogoRemove() {
 		formData.logoUrl = ''
 		logoMedia = null
+		if (onSave) await onSave()
 	}
 </script>
 

src/lib/components/admin/ProjectForm.svelte

@@ -3,13 +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 { 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'
 	import type { JSONContent } from '@tiptap/core'
 
 	interface Props {
@@ -27,9 +34,40 @@
 	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: { save: () => Promise<JSONContent> } | undefined
+
+	// 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: Project, { 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,11 +79,40 @@
 	$effect(() => {
 		if (project && mode === 'edit' && !hasLoaded) {
 			formStore.populateFromProject(project)
+			if (autoSave) {
+				autoSave.prime(formStore.buildPayload())
+			}
 			isLoading = false
 			hasLoaded = true
 		}
 	})
 
+	// 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: JSONContent) {
 		formStore.setField('caseStudyContent', content)
 	}
@@ -64,22 +131,17 @@
 			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
@@ -94,7 +156,6 @@
 				goto(`/admin/projects/${savedProject.id}/edit`)
 			} else {
 				project = savedProject
-				formStore.populateFromProject(savedProject)
 			}
 		} catch (err) {
 			toast.dismiss(loadingToastId)
@@ -108,6 +169,8 @@
 			isSaving = false
 		}
 	}
+
+
 </script>
 
 <AdminPage>
@@ -123,20 +186,36 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
+			{#if !isLoading && mode === 'edit' && autoSave}
-				variant="primary"
+				<AutoSaveStatus
-				onclick={handleSave}
+					status={autoSave.status}
-				disabled={isSaving}
+					error={autoSave.lastError}
-			>
+					lastSavedAt={project?.updatedAt}
-				{isSaving ? 'Saving...' : 'Save'}
+				/>
-			</Button>
+			{/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 +226,7 @@
 								handleSave()
 							}}
 						>
-							<ProjectMetadataForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
+							<ProjectMetadataForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} onSave={handleSave} />
 						</form>
 					</div>
 				</div>
@@ -161,7 +240,7 @@
 								handleSave()
 							}}
 						>
-							<ProjectBrandingForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
+							<ProjectBrandingForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} onSave={handleSave} />
 						</form>
 					</div>
 				</div>
@@ -222,6 +301,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 +352,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;

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(

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 = [
 		{

src/lib/components/admin/PublishDropdown.svelte

@@ -50,8 +50,10 @@
 	{/snippet}
 
 	{#if showDropdown}
-		<DropdownItem onclick={handleSaveDraftClick}>
+		{#snippet dropdown()}
-			{saveDraftText}
+			<DropdownItem onclick={handleSaveDraftClick}>
-		</DropdownItem>
+				{saveDraftText}
+			</DropdownItem>
+		{/snippet}
 	{/if}
 </BaseDropdown>

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() {

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>

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>

src/lib/components/admin/SimplePostForm.svelte

@@ -1,11 +1,26 @@
 <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 type { Post } from '@prisma/client'
 	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'
+
+	// Payload type for saving posts
+	interface PostPayload {
+		type: string
+		status: string
+		content: JSONContent
+		updatedAt?: string
+		title?: string
+		link_url?: string
+		linkDescription?: string
+	}
 
 	interface Props {
 		postType: 'post'
@@ -21,11 +36,13 @@
 		mode: 'create' | 'edit'
 	}
 
-	let { postType, postId, initialData, mode }: Props = $props()
+let { postType, postId, initialData, mode }: Props = $props()
 
 	// 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: [] })
@@ -33,7 +50,7 @@
 	let linkDescription = $state(initialData?.linkDescription || '')
 	let title = $state(initialData?.title || '')
 
-	// Character count for posts
+// Character count for posts
 	const maxLength = 280
 	const textContent = $derived.by(() => {
 		if (!content.content) return ''
@@ -50,11 +67,178 @@
 	const isOverLimit = $derived(charCount > maxLength)
 
 	// Check if form has content
-	const hasContent = $derived.by(() => {
+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(): PostPayload {
+  const payload: PostPayload = {
+    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: Post, { prime }) => {
+				updatedAt = saved.updatedAt.toISOString()
+				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<PostPayload>(draftKey)
+  if (draft) {
+    showDraftPrompt = true
+    draftTimestamp = draft.ts
+  }
+})
+
+function restoreDraft() {
+  const draft = loadDraft<PostPayload>(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) {
@@ -62,24 +246,26 @@
 			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 {
+			isSaving = true
+
 			const payload: Record<string, unknown> = {
-				type: 'post',
+				type: 'post', // Use simplified post type
 				status: publishStatus,
-				content: content,
+				content: content
-				updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
 			}
 
+			// Add link fields if they're provided
 			if (linkUrl && linkUrl.trim()) {
 				payload.title = title || linkUrl
 				payload.link_url = linkUrl
@@ -106,11 +292,13 @@
 				throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`)
 			}
 
-			await response.json()
+    const savedPost = await response.json()
 
-			toast.dismiss(loadingToastId)
+    toast.dismiss(loadingToastId)
-			toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`)
+    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 +333,36 @@
 			</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 +443,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 +560,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>

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}

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 previousFilterType = filterType
-	let previousPhotographyFilter = $state<typeof photographyFilter | undefined>(undefined)
+	let previousPhotographyFilter = photographyFilter
 
 	$effect(() => {
 		if (
@@ -253,6 +258,7 @@
 
 			currentPage = page
 			totalPages = data.pagination.totalPages
+			total = data.pagination.total
 
 			// Update loader state
 			if (currentPage >= totalPages) {

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,
+		editor,
-		mediaHandler: () => mediaHandler,
+		mediaHandler,
 		features
 	})
 

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) {
+	export function handleShowUrlConvertDropdown(pos: number, url: string) {
-		if (!editor || !editor.view) return
+		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

src/lib/components/admin/composer/ComposerToolbar.svelte

@@ -17,6 +17,7 @@
 
 	let {
 		editor,
+		variant,
 		currentTextStyle,
 		filteredCommands,
 		colorCommands,

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) {

src/lib/components/admin/composer/editorConfig.ts

@@ -27,7 +27,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 }
 

src/lib/components/edra/drag-handle.svelte

@@ -387,7 +387,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)

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
 	}
 }

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'
 

src/lib/components/edra/extensions/geolocation/geolocation-extended.svelte

@@ -1,11 +1,10 @@
 <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

src/lib/components/edra/extensions/geolocation/geolocation-placeholder.svelte

@@ -2,7 +2,6 @@
 	import { getContext } from 'svelte'
 	import type { Readable } from 'svelte/store'
 	import type { Editor } from '@tiptap/core'
-	import type * as L from 'leaflet'
 	import Button from '$lib/components/admin/Button.svelte'
 	import Input from '$lib/components/admin/Input.svelte'
 	import Textarea from '$lib/components/admin/Textarea.svelte'
@@ -19,7 +18,7 @@
 
 	// Map picker state
 	let showMapPicker = $state(false)
-	let mapContainer: HTMLDivElement | undefined = $state.raw()
+	let mapContainer: HTMLDivElement
 	let pickerMap: L.Map | null = null
 	let pickerMarker: L.Marker | null = null
 	let leaflet: typeof L | null = null

src/lib/components/edra/extensions/url-embed/UrlEmbed.ts

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
 export interface UrlEmbedOptions {
 	HTMLAttributes: Record<string, unknown>
@@ -102,7 +103,7 @@ export const UrlEmbed = Node.create<UrlEmbedOptions>({
 				},
 			convertLinkToEmbed:
 				(pos) =>
-				({ state, chain }) => {
+				({ state, commands, chain }) => {
 					const { doc } = state
 
 					// Find the link mark at the given position
@@ -188,7 +189,7 @@ export const UrlEmbed = Node.create<UrlEmbedOptions>({
 						if (text && !html) {
 							// Simple URL regex check
 							const urlRegex =
-								/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/
+								/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/
 
 							if (urlRegex.test(text.trim())) {
 								// It's a URL, let it paste as a link naturally (don't prevent default)
@@ -205,6 +206,7 @@ export const UrlEmbed = Node.create<UrlEmbedOptions>({
 									// Find the link that was just inserted
 									// Start from where we were before paste
 									let linkStart = -1
+									let linkEnd = -1
 
 									// Search for the link in a reasonable range
 									for (
@@ -233,13 +235,15 @@ export const UrlEmbed = Node.create<UrlEmbedOptions>({
 													const hasLink = $endPos
 														.marks()
 														.some((m) => m.type.name === 'link' && m.attrs.href === pastedUrl)
-													if (!hasLink) {
+													if (hasLink) {
+														linkEnd = endPos + 1
+													} else {
 														break
 													}
 												}
 												break
 											}
-										} catch (_e) {
+										} catch (e) {
 											// Position might be invalid, continue
 										}
 									}

src/lib/components/edra/headless/components/ContentInsertionPane.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import type { Editor } from '@tiptap/core'
 	import type { Media } from '@prisma/client'
+	import Image from 'lucide-svelte/icons/image'
+	import Video from 'lucide-svelte/icons/video'
+	import AudioLines from 'lucide-svelte/icons/audio-lines'
+	import Grid3x3 from 'lucide-svelte/icons/grid-3x3'
+	import MapPin from 'lucide-svelte/icons/map-pin'
 	import MediaIcon from '$icons/media.svg?component'
 	import Upload from 'lucide-svelte/icons/upload'
 	import Link from 'lucide-svelte/icons/link'
@@ -24,15 +29,16 @@
 	type ActionType = 'upload' | 'embed' | 'gallery' | 'search'
 
 	// Set default action based on content type
-	function getDefaultAction(): ActionType {
+	const defaultAction = $derived(() => {
 		if (contentType === 'location') return 'search'
 		if (contentType === 'gallery') return 'gallery'
 		if (contentType === 'image') return 'gallery'
 		return 'upload'
-	}
+	})
 
-	let selectedAction = $state<ActionType>(getDefaultAction())
+	let selectedAction = $state<ActionType>(defaultAction())
 	let embedUrl = $state('')
+	let searchQuery = $state('')
 	let isUploading = $state(false)
 	let fileInput: HTMLInputElement
 	let isOpen = $state(true)
@@ -45,7 +51,7 @@
 	let locationMarkerColor = $state('#ef4444')
 	let locationZoom = $state(15)
 
-	const availableActions = $derived.by(() => {
+	const availableActions = $derived(() => {
 		switch (contentType) {
 			case 'image':
 				return [
@@ -155,7 +161,7 @@
 			case 'audio':
 				editor.chain().focus().setAudio(embedUrl).run()
 				break
-			case 'location': {
+			case 'location':
 				// For location, try to extract coordinates from Google Maps URL
 				const coords = extractCoordinatesFromUrl(embedUrl)
 				if (coords) {
@@ -177,7 +183,6 @@
 					return
 				}
 				break
-			}
 		}
 
 		deleteNode?.()
@@ -187,13 +192,6 @@
 	function handleGallerySelect() {
 		const fileType = contentType === 'gallery' ? 'image' : contentType
 		const mode = contentType === 'gallery' ? 'multiple' : 'single'
-		// Map fileType to what the store accepts (audio -> all)
-		const storeFileType: 'image' | 'video' | 'all' | undefined =
-			fileType === 'audio'
-				? 'all'
-				: fileType === 'image' || fileType === 'video'
-					? fileType
-					: undefined
 
 		// Close the pane first to prevent z-index issues
 		handlePaneClose()
@@ -202,7 +200,7 @@
 		setTimeout(() => {
 			mediaSelectionStore.open({
 				mode,
-				fileType: storeFileType,
+				fileType: fileType as 'image' | 'video' | 'audio',
 				albumId,
 				onSelect: (media: Media | Media[]) => {
 					if (contentType === 'gallery') {
@@ -220,7 +218,7 @@
 
 	function insertContent(media: Media) {
 		switch (contentType) {
-			case 'image': {
+			case 'image':
 				const displayWidth = media.width && media.width > 600 ? 600 : media.width
 				editor
 					.chain()
@@ -230,7 +228,7 @@
 							type: 'image',
 							attrs: {
 								src: media.url,
-								alt: media.description || '',
+								alt: media.altText || '',
 								title: media.description || '',
 								width: displayWidth,
 								height: media.height,
@@ -244,7 +242,6 @@
 					])
 					.run()
 				break
-			}
 			case 'video':
 				editor.chain().focus().setVideo(media.url).run()
 				break
@@ -262,7 +259,7 @@
 			const galleryImages = mediaArray.map((m) => ({
 				id: m.id,
 				url: m.url,
-				alt: m.description || '',
+				alt: m.altText || '',
 				title: m.description || ''
 			}))
 
@@ -294,6 +291,12 @@
 		return null
 	}
 
+	function handleLocationSearch() {
+		// This would integrate with a geocoding API
+		// For now, just show a message
+		alert('Location search coming soon! For now, paste a Google Maps link.')
+	}
+
 	function handleLocationInsert() {
 		const lat = parseFloat(locationLat)
 		const lng = parseFloat(locationLng)
@@ -333,6 +336,23 @@
 		isOpen = false
 		onClose()
 	}
+
+	function getContentTitle() {
+		switch (contentType) {
+			case 'image':
+				return 'Insert Image'
+			case 'video':
+				return 'Insert Video'
+			case 'audio':
+				return 'Insert Audio'
+			case 'gallery':
+				return 'Create Gallery'
+			case 'location':
+				return 'Add Location'
+			default:
+				return 'Insert Content'
+		}
+	}
 </script>
 
 <Pane
@@ -345,16 +365,15 @@
 	maxHeight="auto"
 	onClose={handlePaneClose}
 >
-	{#if availableActions.length > 1}
+	{#if availableActions().length > 1}
 		<div class="action-selector">
-			{#each availableActions as action}
+			{#each availableActions() as action}
-				{@const Icon = action.icon}
 				<button
 					class="action-tab"
 					class:active={selectedAction === action.type}
 					onclick={() => (selectedAction = action.type)}
 				>
-					<Icon size={16} />
+					<svelte:component this={action.icon} size={16} />
 					<span>{action.label}</span>
 				</button>
 			{/each}
@@ -400,33 +419,24 @@
 		{:else if selectedAction === 'search' && contentType === 'location'}
 			<div class="location-form">
 				<div class="form-group">
-					<label for="location-title" class="form-label">Title (optional)</label>
+					<label class="form-label">Title (optional)</label>
-					<input
+					<input bind:value={locationTitle} placeholder="Location name" class="form-input" />
-						id="location-title"
-						bind:value={locationTitle}
-						placeholder="Location name"
-						class="form-input"
-					/>
 				</div>
 
 				<div class="form-group">
-					<label for="location-description" class="form-label">Description (optional)</label>
+					<label class="form-label">Description (optional)</label>
 					<textarea
-						id="location-description"
 						bind:value={locationDescription}
 						placeholder="About this location"
 						class="form-textarea"
 						rows="2"
-					></textarea>
+					/>
 				</div>
 
 				<div class="coordinates-group">
 					<div class="form-group">
-						<label for="location-lat" class="form-label"
+						<label class="form-label">Latitude <span class="required">*</span></label>
-							>Latitude <span class="required">*</span></label
-						>
 						<input
-							id="location-lat"
 							bind:value={locationLat}
 							placeholder="37.7749"
 							type="number"
@@ -436,11 +446,8 @@
 						/>
 					</div>
 					<div class="form-group">
-						<label for="location-lng" class="form-label"
+						<label class="form-label">Longitude <span class="required">*</span></label>
-							>Longitude <span class="required">*</span></label
-						>
 						<input
-							id="location-lng"
 							bind:value={locationLng}
 							placeholder="-122.4194"
 							type="number"

src/lib/components/edra/headless/components/GeolocationExtended.svelte

@@ -2,11 +2,9 @@
 	import { type NodeViewProps } from '@tiptap/core'
 	import { NodeViewWrapper } from 'svelte-tiptap'
 	import { onMount } from 'svelte'
-	import { mount, unmount } from 'svelte'
 	import type L from 'leaflet'
-	import MapPopup from './MapPopup.svelte'
 
-	type Props = NodeViewProps
+	interface Props extends NodeViewProps {}
 	let { node, selected }: Props = $props()
 
 	let mapContainer: HTMLDivElement
@@ -48,26 +46,17 @@
 		const marker = leaflet.marker([latitude, longitude], { icon }).addTo(map)
 
 		// Add popup if title or description exists
-		let popupComponent: ReturnType<typeof mount> | null = null
 		if (title || description) {
-			// Create a container for the Svelte component
+			const popupContent = `
-			const popupContainer = document.createElement('div')
+				<div class="map-popup">
-
+					${title ? `<h4>${title}</h4>` : ''}
-			// Mount the Svelte component
+					${description ? `<p>${description}</p>` : ''}
-			popupComponent = mount(MapPopup, {
+				</div>
-				target: popupContainer,
+			`
-				props: { title, description }
+			marker.bindPopup(popupContent)
-			})
-
-			// Bind the container to the marker
-			marker.bindPopup(popupContainer)
 		}
 
 		return () => {
-			// Clean up the popup component
-			if (popupComponent) {
-				unmount(popupComponent)
-			}
 			map?.remove()
 		}
 	})
@@ -89,6 +78,20 @@
 		border: none;
 	}
 
+	:global(.map-popup) {
+		h4 {
+			margin: 0 0 8px;
+			font-size: 16px;
+			font-weight: 600;
+		}
+
+		p {
+			margin: 0;
+			font-size: 14px;
+			color: #4b5563;
+		}
+	}
+
 	.geolocation-node {
 		margin: 16px 0;
 		border-radius: 8px;

src/lib/components/edra/headless/components/ImagePlaceholder.svelte

@@ -5,6 +5,7 @@
 	import Upload from 'lucide-svelte/icons/upload'
 	import { NodeViewWrapper } from 'svelte-tiptap'
 	import UnifiedMediaModal from '../../../admin/UnifiedMediaModal.svelte'
+	import { onMount } from 'svelte'
 
 	const { editor, deleteNode }: NodeViewProps = $props()
 

src/lib/components/edra/headless/components/LinkEditDialog.svelte

@@ -68,9 +68,6 @@
 <div
 	bind:this={dialogElement}
 	class="link-edit-dialog"
-	role="dialog"
-	aria-modal="false"
-	tabindex="-1"
 	style="left: {x}px; top: {y}px;"
 	transition:fly={{ y: -10, duration: TRANSITION_NORMAL_MS }}
 	onkeydown={handleKeydown}

src/lib/components/edra/headless/components/MapPopup.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	interface Props {
-		title?: string
-		description?: string
-	}
-
-	let { title, description }: Props = $props()
-</script>
-
-<div class="map-popup">
-	{#if title}
-		<h4>{title}</h4>
-	{/if}
-	{#if description}
-		<p>{description}</p>
-	{/if}
-</div>
-
-<style lang="scss">
-	.map-popup {
-		h4 {
-			margin: 0 0 8px;
-			font-size: 16px;
-			font-weight: 600;
-		}
-
-		p {
-			margin: 0;
-			font-size: 14px;
-			color: #4b5563;
-		}
-	}
-</style>

src/lib/components/edra/headless/components/SearchAndReplace.svelte

@@ -32,7 +32,7 @@
 	function goToSelection() {
 		const { results, resultIndex } = editor.storage.searchAndReplace
 		const position = results[resultIndex]
-		if (!position || !editor.view) return
+		if (!position) return
 		editor.commands.setTextSelection(position)
 		const { node } = editor.view.domAtPos(editor.state.selection.anchor)
 		if (node instanceof HTMLElement) node.scrollIntoView({ behavior: 'smooth', block: 'center' })

src/lib/components/edra/headless/components/UrlEmbedExtended.svelte

@@ -6,6 +6,7 @@
 
 	const { editor, node, deleteNode, getPos, selected }: NodeViewProps = $props()
 
+	let loading = $state(false)
 	let showActions = $state(false)
 	let showContextMenu = $state(false)
 	let contextMenuPosition = $state({ x: 0, y: 0 })
@@ -47,6 +48,7 @@
 
 	async function refreshMetadata() {
 		if (!node.attrs.url) return
+		loading = true
 
 		try {
 			const response = await fetch(
@@ -75,6 +77,8 @@
 			}
 		} catch (err) {
 			console.error('Error refreshing metadata:', err)
+		} finally {
+			loading = false
 		}
 	}
 
@@ -162,7 +166,7 @@
 			onkeydown={handleKeydown}
 			oncontextmenu={handleContextMenu}
 			tabindex="0"
-			role="button"
+			role="article"
 		>
 			{#if showActions && editor.isEditable}
 				<div class="edra-youtube-embed-actions">
@@ -208,7 +212,7 @@
 			onkeydown={handleKeydown}
 			oncontextmenu={handleContextMenu}
 			tabindex="0"
-			role="button"
+			role="article"
 		>
 			{#if showActions && editor.isEditable}
 				<div class="edra-url-embed-actions">

src/lib/components/edra/headless/menus/bubble-menu.svelte

@@ -15,20 +15,18 @@
 
 	let isDragging = $state(false)
 
-	if (editor.view) {
+	editor.view.dom.addEventListener('dragstart', () => {
-		editor.view.dom.addEventListener('dragstart', () => {
+		isDragging = true
-			isDragging = true
+	})
-		})
 
-		editor.view.dom.addEventListener('drop', () => {
+	editor.view.dom.addEventListener('drop', () => {
-			isDragging = true
+		isDragging = true
 
-			// Allow some time for the drop action to complete before re-enabling
+		// Allow some time for the drop action to complete before re-enabling
-			setTimeout(() => {
+		setTimeout(() => {
-				isDragging = false
+			isDragging = false
-			}, 100) // Adjust delay if needed
+		}, 100) // Adjust delay if needed
-		})
+	})
-	}
 
 	const bubbleMenuCommands = [
 		...commands['text-formatting'].commands,
@@ -42,7 +40,7 @@
 	function shouldShow(props: ShouldShowProps) {
 		if (!props.editor.isEditable) return false
 		const { view, editor } = props
-		if (!view || !editor.view || editor.view.dragging) {
+		if (!view || editor.view.dragging) {
 			return false
 		}
 		if (editor.isActive('link')) return false

src/lib/components/edra/utils.ts

@@ -114,7 +114,7 @@ export function getHandlePaste(editor: Editor, maxSize: number = 2) {
  * @param event - Optional MouseEvent or KeyboardEvent triggering the focus
  */
 export function focusEditor(editor: Editor | undefined, event?: MouseEvent | KeyboardEvent) {
-	if (!editor || !editor.view) return
+	if (!editor) return
 	// Check if there is a text selection already (i.e. a non-empty selection)
 	const selection = window.getSelection()
 	if (selection && selection.toString().length > 0) {

src/lib/components/ui/BasePane.svelte

@@ -25,7 +25,7 @@
 		children
 	}: BasePaneProps = $props()
 
-	let paneElement: HTMLDivElement | undefined = $state.raw()
+	let paneElement: HTMLDivElement
 
 	// Handle escape key
 	$effect(() => {

src/lib/posts.ts

@@ -64,7 +64,7 @@ export async function getPostBySlug(slug: string): Promise<Post | null> {
 }
 
 function getExcerpt(content: string, type: 'note' | 'article'): string {
-	const plainText = content.replace(/[#*`[\]]/g, '').trim()
+	const plainText = content.replace(/[#*`\[\]]/g, '').trim()
 	const maxLength = type === 'note' ? 280 : 160
 
 	if (plainText.length <= maxLength) return plainText

src/lib/server/api-utils.ts

@@ -2,7 +2,7 @@ import type { RequestEvent } from '@sveltejs/kit'
 import { getSessionUser } from '$lib/server/admin/session'
 
 // Response helpers
-export function jsonResponse(data: unknown, status = 200): Response {
+export function jsonResponse(data: any, status = 200): Response {
 	return new Response(JSON.stringify(data), {
 		status,
 		headers: { 'Content-Type': 'application/json' }
@@ -43,7 +43,7 @@ export function getPaginationMeta(total: number, page: number, limit: number) {
 export const VALID_STATUSES = ['draft', 'published'] as const
 export type Status = (typeof VALID_STATUSES)[number]
 
-export function isValidStatus(status: unknown): status is Status {
+export function isValidStatus(status: any): status is Status {
 	return VALID_STATUSES.includes(status)
 }
 
@@ -51,7 +51,7 @@ export function isValidStatus(status: unknown): status is Status {
 export const VALID_POST_TYPES = ['post', 'essay'] as const
 export type PostType = (typeof VALID_POST_TYPES)[number]
 
-export function isValidPostType(type: unknown): type is PostType {
+export function isValidPostType(type: any): type is PostType {
 	return VALID_POST_TYPES.includes(type)
 }
 
@@ -60,7 +60,7 @@ export async function parseRequestBody<T>(request: Request): Promise<T | null> {
 	try {
 		const body = await request.json()
 		return body as T
-	} catch (_error) {
+	} catch (error) {
 		return null
 	}
 }

src/lib/server/apple-music-client.ts

@@ -2,29 +2,13 @@ import { getAppleMusicHeaders } from './apple-music-auth'
 import type {
 	AppleMusicAlbum,
 	AppleMusicTrack,
-	AppleMusicSearchResponse
+	AppleMusicSearchResponse,
+	AppleMusicErrorResponse
 } from '$lib/types/apple-music'
 import { isAppleMusicError } from '$lib/types/apple-music'
 import { ApiRateLimiter } from './rate-limiter'
 import { logger } from './logger'
 
-// Extended types for Apple Music data with custom metadata
-interface ExtendedAppleMusicAlbum extends AppleMusicAlbum {
-	_storefront?: string
-}
-
-interface ExtendedAttributes {
-	isSingle?: boolean
-	_singleSongId?: string
-	_singleSongPreview?: string
-	[key: string]: unknown
-}
-
-interface SyntheticAlbum extends Omit<AppleMusicAlbum, 'attributes'> {
-	attributes: AppleMusicAlbum['attributes'] & ExtendedAttributes
-	_storefront?: string
-}
-
 const APPLE_MUSIC_API_BASE = 'https://api.music.apple.com/v1'
 const DEFAULT_STOREFRONT = 'us' // Default to US storefront
 const JAPANESE_STOREFRONT = 'jp' // Japanese storefront
@@ -90,7 +74,7 @@ async function makeAppleMusicRequest<T>(endpoint: string, identifier?: string):
 						`Apple Music API Error: ${errorData.errors[0]?.detail || 'Unknown error'}`
 					)
 				}
-			} catch (_e) {
+			} catch (e) {
 				// If not JSON, throw the text error
 			}
 
@@ -333,7 +317,7 @@ export async function findAlbum(artist: string, album: string): Promise<AppleMus
 
 				if (result) {
 					// Store the storefront information with the album
-					const matchedAlbum = result.album as ExtendedAppleMusicAlbum
+					const matchedAlbum = result.album as any
 					matchedAlbum._storefront = result.storefront
 					return result.album
 				}
@@ -406,7 +390,7 @@ export async function findAlbum(artist: string, album: string): Promise<AppleMus
 							const albumResponse = await searchAlbums(`${artist} ${albumName}`, 5, storefront)
 							if (albumResponse.results?.albums?.data?.length) {
 								const album = albumResponse.results.albums.data[0]
-								const matchedAlbum = album as ExtendedAppleMusicAlbum
+								const matchedAlbum = album as any
 								matchedAlbum._storefront = storefront
 								return album
 							}
@@ -430,7 +414,7 @@ export async function findAlbum(artist: string, album: string): Promise<AppleMus
 								_singleSongPreview: matchingSong.attributes?.previews?.[0]?.url
 							},
 							_storefront: storefront
-						} as SyntheticAlbum
+						} as any
 					}
 				}
 			} catch (error) {
@@ -454,7 +438,7 @@ export async function findAlbum(artist: string, album: string): Promise<AppleMus
 }
 
 // Transform Apple Music album data to match existing format
-export async function transformAlbumData(appleMusicAlbum: AppleMusicAlbum | SyntheticAlbum) {
+export async function transformAlbumData(appleMusicAlbum: AppleMusicAlbum) {
 	const attributes = appleMusicAlbum.attributes
 
 	// Get preview URL from tracks if album doesn't have one
@@ -462,13 +446,12 @@ export async function transformAlbumData(appleMusicAlbum: AppleMusicAlbum | Synt
 	let tracks: Array<{ name: string; previewUrl?: string; durationMs?: number }> = []
 
 	// Check if this is a synthetic single album
-	const extendedAttrs = attributes as ExtendedAttributes
+	if ((attributes as any).isSingle && (attributes as any)._singleSongPreview) {
-	if (extendedAttrs.isSingle && extendedAttrs._singleSongPreview) {
 		logger.music('debug', 'Processing synthetic single album')
-		previewUrl = extendedAttrs._singleSongPreview
+		previewUrl = (attributes as any)._singleSongPreview
 		tracks = [{
 			name: attributes.name,
-			previewUrl: extendedAttrs._singleSongPreview,
+			previewUrl: (attributes as any)._singleSongPreview,
 			durationMs: undefined // We'd need to fetch the song details for duration
 		}]
 	}
@@ -476,8 +459,7 @@ export async function transformAlbumData(appleMusicAlbum: AppleMusicAlbum | Synt
 	else if (appleMusicAlbum.id) {
 		try {
 			// Determine which storefront to use
-			const extendedAlbum = appleMusicAlbum as ExtendedAppleMusicAlbum
+			const storefront = (appleMusicAlbum as any)._storefront || DEFAULT_STOREFRONT
-			const storefront = extendedAlbum._storefront || DEFAULT_STOREFRONT
 
 			// Fetch album details with tracks
 			const endpoint = `/catalog/${storefront}/albums/${appleMusicAlbum.id}?include=tracks`
@@ -495,8 +477,8 @@ export async function transformAlbumData(appleMusicAlbum: AppleMusicAlbum | Synt
 
 				// Process all tracks
 				tracks = tracksData
-					.filter((item: AppleMusicTrack) => item.type === 'songs')
+					.filter((item: any) => item.type === 'songs')
-					.map((track: AppleMusicTrack) => {
+					.map((track: any) => {
 						return {
 							name: track.attributes?.name || 'Unknown',
 							previewUrl: track.attributes?.previews?.[0]?.url,

src/lib/server/cache-manager.ts

@@ -111,7 +111,7 @@ export class CacheManager {
 		let totalDeleted = 0
 
 		// Clear all cache types that might contain this album
-		for (const [type] of this.cacheTypes) {
+		for (const [type, config] of this.cacheTypes) {
 			if (type.includes('album') || type.includes('notfound')) {
 				const deleted = await this.clearPattern(type, albumKey)
 				totalDeleted += deleted
@@ -162,4 +162,4 @@ export const cache = {
 		isNotFound: (artist: string, album: string) => CacheManager.get('apple-notfound', `${artist}:${album}`),
 		markNotFound: (artist: string, album: string, ttl?: number) => CacheManager.set('apple-notfound', `${artist}:${album}`, '1', ttl)
 	}
-}
+}

src/lib/server/cloudinary-audit.ts

@@ -97,7 +97,7 @@ export async function fetchAllDatabaseCloudinaryReferences(): Promise<Set<string
 			if (publicId) publicIds.add(publicId)
 		}
 		if (project.gallery && typeof project.gallery === 'object') {
-			const gallery = project.gallery as Record<string, unknown>[]
+			const gallery = project.gallery as any[]
 			for (const item of gallery) {
 				if (item.url?.includes('cloudinary.com')) {
 					const publicId = extractPublicId(item.url)
@@ -121,7 +121,7 @@ export async function fetchAllDatabaseCloudinaryReferences(): Promise<Set<string
 			if (publicId) publicIds.add(publicId)
 		}
 		if (post.attachments && typeof post.attachments === 'object') {
-			const attachments = post.attachments as Record<string, unknown>[]
+			const attachments = post.attachments as any[]
 			for (const attachment of attachments) {
 				if (attachment.url?.includes('cloudinary.com')) {
 					const publicId = extractPublicId(attachment.url)
@@ -296,7 +296,7 @@ export async function cleanupBrokenReferences(publicIds: string[]): Promise<{
 
 		for (const project of projectsToClean) {
 			let updated = false
-			const updates: Record<string, unknown> = {}
+			const updates: any = {}
 
 			if (project.featuredImage?.includes('cloudinary.com')) {
 				const publicId = extractPublicId(project.featuredImage)
@@ -316,7 +316,7 @@ export async function cleanupBrokenReferences(publicIds: string[]): Promise<{
 
 			// Handle gallery items
 			if (project.gallery && typeof project.gallery === 'object') {
-				const gallery = project.gallery as Record<string, unknown>[]
+				const gallery = project.gallery as any[]
 				const cleanedGallery = gallery.filter((item) => {
 					if (item.url?.includes('cloudinary.com')) {
 						const publicId = extractPublicId(item.url)
@@ -349,7 +349,7 @@ export async function cleanupBrokenReferences(publicIds: string[]): Promise<{
 
 		for (const post of postsToClean) {
 			let updated = false
-			const updates: Record<string, unknown> = {}
+			const updates: any = {}
 
 			if (post.featuredImage?.includes('cloudinary.com')) {
 				const publicId = extractPublicId(post.featuredImage)
@@ -361,7 +361,7 @@ export async function cleanupBrokenReferences(publicIds: string[]): Promise<{
 
 			// Handle attachments
 			if (post.attachments && typeof post.attachments === 'object') {
-				const attachments = post.attachments as Record<string, unknown>[]
+				const attachments = post.attachments as any[]
 				const cleanedAttachments = attachments.filter((attachment) => {
 					if (attachment.url?.includes('cloudinary.com')) {
 						const publicId = extractPublicId(attachment.url)

src/lib/server/cloudinary.ts

@@ -1,5 +1,5 @@
 import { v2 as cloudinary } from 'cloudinary'
-import type { UploadApiResponse } from 'cloudinary'
+import type { UploadApiResponse, UploadApiErrorResponse } from 'cloudinary'
 import { logger } from './logger'
 import { uploadFileLocally } from './local-storage'
 import { dev } from '$app/environment'
@@ -69,7 +69,7 @@ export interface UploadResult {
 	format?: string
 	size?: number
 	dominantColor?: string
-	colors?: Array<{ hex: string; rgb: [number, number, number]; population: number }>
+	colors?: any
 	aspectRatio?: number
 	duration?: number
 	videoCodec?: string
@@ -82,7 +82,7 @@ export interface UploadResult {
 export async function uploadFile(
 	file: File,
 	type: 'media' | 'photos' | 'projects' = 'media',
-	customOptions?: Record<string, unknown>
+	customOptions?: any
 ): Promise<UploadResult> {
 	try {
 		// Toggle this to use Cloudinary in development (requires API keys)
@@ -130,6 +130,7 @@ export async function uploadFile(
 
 		// Extract filename without extension
 		const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '')
+		const fileExtension = file.name.split('.').pop()?.toLowerCase()
 
 		// Prepare upload options
 		const uploadOptions = {

src/lib/server/color-utils.ts

@@ -109,6 +109,7 @@ export function selectBestDominantColor(
 ): string {
 	const {
 		minPercentage = 2, // Ignore colors below this percentage
+		preferVibrant = true,
 		excludeGreys = false,
 		preferBrighter = true // Avoid very dark colors
 	} = options