fix(screenshots): force exit after capture to kill orphaned server

pnpm spawns vite as a grandchild process that SIGTERM doesn't reach, leaving the CI job hanging after screenshots are captured. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
fix(screenshots): use HTTP polling for server readiness in CI
2026-10-12 20:06:57 +02:00 · 2026-03-20 22:54:16 +01:00 · 2026-03-20 22:46:51 +01:00 · 2026-03-20 22:32:16 +01:00 · 2026-03-20 22:32:16 +01:00 · 2026-03-20 22:32:16 +01:00
61 changed files with 292 additions and 3962 deletions
@@ -48,83 +48,17 @@ jobs:
    needs: bump
    uses: ./.github/workflows/ci.yml

-  build:
-    name: Build Docker (${{ matrix.platform }})
-    needs: [bump, ci]
-    permissions:
-      packages: write
-    strategy:
-      fail-fast: true
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-latest
-          - platform: linux/arm64
-            runner: ubuntu-24.04-arm
-    runs-on: ${{ matrix.runner }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ needs.bump.outputs.tag }}
-
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: ${{ matrix.platform }}
-          labels: ${{ steps.meta.outputs.labels }}
-          provenance: false
-          cache-from: type=gha,scope=${{ matrix.platform }}
-          cache-to: type=gha,scope=${{ matrix.platform }},mode=max
-          outputs: type=image,"name=ghcr.io/${{ github.repository }}",push-by-digest=true,name-canonical=true,push=true
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digest-${{ matrix.runner }}
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    name: Merge manifests & release
+  release:
+    name: Build & Push Docker Image
    runs-on: ubuntu-latest
-    needs: [bump, build]
+    needs: [bump, ci]
    permissions:
      contents: write
      packages: write
    steps:
      - uses: actions/checkout@v4
-
-      - name: Download digests
-        uses: actions/download-artifact@v4
        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digest-*
-          merge-multiple: true
+          ref: ${{ needs.bump.outputs.tag }}

      - name: Extract metadata
        id: meta
@@ -136,6 +70,9 @@ jobs:
            type=semver,pattern={{major}}.{{minor}},value=${{ needs.bump.outputs.tag }}
            type=raw,value=latest

+      - name: Set up QEMU (for multi-platform builds)
+        uses: docker/setup-qemu-action@v3
+
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

@@ -146,11 +83,17 @@ jobs:
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

-      - name: Create manifest list and push
-        working-directory: ${{ runner.temp }}/digests
-        run: |
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          provenance: false
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

      - name: Create GitHub Release
        uses: softprops/action-gh-release@v2
@@ -161,7 +104,7 @@ jobs:
  pin-docker-compose:
    name: Pin docker-compose to released version
    runs-on: ubuntu-latest
-    needs: [bump, merge]
+    needs: [bump, release]
    permissions:
      contents: write
    steps:
@@ -121,15 +121,5 @@ jobs:
    steps:
      - uses: actions/checkout@v4

-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
      - name: Build Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: false
-          provenance: false
-          tags: crumbs:ci
-          cache-from: type=gha,scope=ci-docker
-          cache-to: type=gha,scope=ci-docker,mode=max
+        run: docker build -t crumbs:ci .
@@ -13,77 +13,13 @@ jobs:
  ci:
    uses: ./.github/workflows/ci.yml

-  build:
-    name: Build Docker (${{ matrix.platform }})
-    needs: ci
-    strategy:
-      fail-fast: true
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-latest
-          - platform: linux/arm64
-            runner: ubuntu-24.04-arm
-    runs-on: ${{ matrix.runner }}
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: ${{ matrix.platform }}
-          labels: ${{ steps.meta.outputs.labels }}
-          provenance: false
-          cache-from: type=gha,scope=${{ matrix.platform }}
-          cache-to: type=gha,scope=${{ matrix.platform }},mode=max
-          outputs: type=image,"name=ghcr.io/${{ github.repository }}",push-by-digest=true,name-canonical=true,push=true
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digest-${{ matrix.runner }}
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    name: Merge manifests & release
+  release:
+    name: Build & Push Docker Image
    runs-on: ubuntu-latest
-    needs: build
+    needs: ci
    steps:
      - uses: actions/checkout@v4

-      - name: Download digests
-        uses: actions/download-artifact@v4
-        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digest-*
-          merge-multiple: true
-
      - name: Extract metadata
        id: meta
        uses: docker/metadata-action@v5
@@ -94,6 +30,9 @@ jobs:
            type=semver,pattern={{major}}.{{minor}}
            type=raw,value=latest

+      - name: Set up QEMU (for multi-platform builds)
+        uses: docker/setup-qemu-action@v3
+
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

@@ -104,11 +43,17 @@ jobs:
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

-      - name: Create manifest list and push
-        working-directory: ${{ runner.temp }}/digests
-        run: |
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          provenance: false
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

      - name: Create GitHub Release
        uses: softprops/action-gh-release@v2
@@ -118,7 +63,7 @@ jobs:
  pin-docker-compose:
    name: Pin docker-compose to released version
    runs-on: ubuntu-latest
-    needs: merge
+    needs: release
    permissions:
      contents: write
    steps:
@@ -44,7 +44,4 @@ todo.md

 # Worktrees
 .worktrees/
-
-# Superpowers brainstorm artifacts
-.superpowers/
 package-lock.json
@@ -11,10 +11,6 @@

 A self-hostable, offline-first note-taking app that respects your privacy. Part of the [Bretzel](https://bretzel.app) app universe.

-<p align="center">
-  <img src="website/assets/screenshot-grid.png" alt="Crumbs notes grid view" width="720">
-</p>
-
 ## Install

 ### Docker (Recommended)
@@ -1,6 +1,6 @@
 services:
  crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.28.1
+    image: ghcr.io/bretzel-app/crumbs:0.22.3
    container_name: crumbs
    ports:
      - "3000:3000"
@@ -103,21 +103,6 @@ Key tables:
 - `shared_notes` - Public share links (noteId → token, 1:1 with cascade delete)
 - `sync_log` - Sync operation history

-### Nested Checklist Serialization
-
-Checklist items are stored as plain text in the note `content` field, one item per line. Child items use a 2-space indent prefix:
-
-```
- [ ] Parent item
-  - [ ] Child item
-  - [x] Checked child item
- [x] Another parent
-```
-
- A line starting with `  - [ ]` or `  - [x]` (2 spaces) is parsed as a child of the preceding top-level item.
- The `parentId` field on `ChecklistItem` is **runtime-only** — it is derived from position during parsing and never stored explicitly.
- This format is fully backward compatible: flat checklists (no indented lines) parse identically to before.
-
 ### Collaboration Access Control

 Notes support sharing with other users on the same instance:
@@ -151,16 +136,6 @@ MCP tool handlers ┘
 ### Tools (14)
 `list_notes`, `get_note`, `create_note`, `update_note`, `trash_note`, `restore_note`, `archive_note`, `unarchive_note`, `delete_note`, `search_notes`, `list_tags`, `pin_note`, `reorder_notes`, `upload_image`

-## Dark Mode
-
-Theme switching uses CSS variable overrides on the `<html>` element:
-
- **CSS**: `[data-theme="dark"]` attribute on `<html>` overrides all `--bg-*`, `--text-*`, `--border-*`, and `--primary-*` variables defined in `src/app.css`
- **Persistence**: preference stored as `theme` in the existing `userPreferences` key-value system (values: `"system"` | `"light"` | `"dark"`)
- **FOUC prevention**: a blocking inline `<script>` in `app.html` reads the preference from localStorage and sets `data-theme` before any content renders
- **Reactivity**: a `$effect` in the root `+layout.svelte` watches the theme store and updates `document.documentElement.dataset.theme` on change
- **Note card colors**: `getNoteColor()` in `src/lib/utils/colors.ts` accepts a `dark` boolean and returns the appropriate color variant per theme
-
 ## File Organization

 ```
@@ -37,11 +37,6 @@
 - Check/uncheck items with checkboxes
 - Checked items get strikethrough styling
 - Enter key adds new item, Backspace removes empty items
- **Nested checklists**: single-level nesting for sub-tasks
-  - Tab / Shift+Tab to indent or outdent an item (keyboard)
-  - Drag handle horizontal swipe for mobile indentation
-  - Checking a parent item checks all its children
-  - Done section groups checked children under their parent label

 ### Image Attachments
 - Upload images via file picker or drag-and-drop
@@ -69,12 +64,6 @@
 - Fog, Storm, Dusk, Blossom, Clay, Chalk
 - Colors adapt to note theme

-### Dark Mode
- Three-way theme toggle: System / Light / Dark (in Settings > Preferences)
- Dark mode uses a warm parchment variant — retro aesthetic preserved in both themes
- Respects system `prefers-color-scheme` preference by default
- FOUC-free: theme applied before first paint via a blocking inline script
-
 ### Pin Notes
 - Pin important notes to always appear at top
 - Pinned section separated from unpinned notes
@@ -1,781 +0,0 @@
-# Dark Mode Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Add a dark parchment theme variant with system/light/dark toggle in Settings > Preferences.
-
-**Architecture:** CSS `[data-theme="dark"]` attribute on `<html>` overrides CSS variables in `app.css`. A blocking inline script in `app.html` prevents FOUC. Theme preference uses the existing `UserPreferences` key-value system. A reactive `isDarkMode` rune in `theme.svelte.ts` drives note card color switching.
-
-**Tech Stack:** SvelteKit, Svelte 5 runes, CSS custom properties, Tailwind CSS v4, Vitest, Playwright
-
-**Spec:** `docs/superpowers/specs/2026-03-20-dark-mode-design.md`
-
---
-
-## File Map
-
-| Action | File | Responsibility |
-|--------|------|----------------|
-| Modify | `src/app.css` | Add `--grid-dot` to `:root`, add `[data-theme="dark"]` block, update `body::before` |
-| Modify | `src/app.html` | Add FOUC-prevention inline script |
-| Modify | `src/lib/types/preferences.ts` | Add `theme` field to `UserPreferences` |
-| Create | `src/lib/utils/theme.svelte.ts` | `applyTheme()`, reactive `isDarkMode` rune |
-| Modify | `src/lib/utils/colors.ts` | Add `NOTE_COLORS_DARK`, export `getNoteColor()` |
-| Modify | `src/routes/+layout.svelte` | Add theme `$effect` watcher |
-| Modify | `src/routes/(app)/settings/preferences/+page.svelte` | Add theme segmented toggle |
-| Modify | `src/lib/components/NoteCard.svelte` | Use `getNoteColor()` with `isDarkMode` |
-| Modify | `src/lib/components/NoteEditor.svelte` | Use `getNoteColor()` with `isDarkMode` |
-| Modify | `src/lib/components/ColorPicker.svelte` | Use dark color swatches when `isDarkMode` |
-| Skip | `src/routes/(share)/s/[token]/+page.svelte` | Out of scope per spec (public share pages) |
-| Modify | `.gitignore` | Add `.superpowers/` |
-| Create | `tests/unit/theme.test.ts` | Unit tests for `applyTheme` and `isDarkMode` |
-| Create | `tests/unit/colors.test.ts` | Unit tests for `getNoteColor` |
-| Create | `tests/e2e/dark-mode.spec.ts` | E2E tests for theme toggle, persistence, system detection |
-
---
-
-### Task 1: CSS Dark Theme Variables
-
-**Files:**
- Modify: `src/app.css:6-23` (`:root` block) and `src/app.css:36` (`body::before`)
-
- [ ] **Step 1: Add `--grid-dot` to `:root` and add `[data-theme="dark"]` block**
-
-In `src/app.css`, add `--grid-dot: #1a1a2e;` to the end of the `:root` block, then add the dark theme block after `:root`:
-
-```css
-:root {
-	--bg-base: #f0e6d3;
-	--bg-surface: #faf5eb;
-	--primary: #C8860A;
-	--primary-hover: #E8A020;
-	--text: #1a1a2e;
-	--text-muted: #6b6272;
-	--border: #1a1a2e;
-	--border-subtle: #d4cabb;
-	--destructive: #a63d2f;
-	--error-bg: #f5e0db;
-	--error-border: #d4a69e;
-	--error-text: #8b2e1f;
-	--success-bg: #dce8d4;
-	--success-text: #3a5a2e;
-	--card-shadow: 2px 2px 0px var(--border-subtle);
-	--card-shadow-hover: 3px 3px 0px var(--primary);
-	--grid-dot: #1a1a2e;
-}
-
-[data-theme="dark"] {
-	--bg-base: #1a1715;
-	--bg-surface: #2a2520;
-	--text: #e8dcc8;
-	--text-muted: #9a8e7e;
-	--border: #e8dcc8;
-	--border-subtle: #3a3530;
-	--destructive: #d4604e;
-	--error-bg: #3a2020;
-	--error-border: #5a3030;
-	--error-text: #e8a090;
-	--success-bg: #203020;
-	--success-text: #90c880;
-	--card-shadow: 2px 2px 0px var(--border-subtle);
-	--card-shadow-hover: 3px 3px 0px var(--primary);
-	--grid-dot: #e8dcc8;
-}
-```
-
- [ ] **Step 2: Update `body::before` to use `--grid-dot` variable**
-
-Replace the hardcoded color in the `body::before` rule:
-
-```css
-body::before {
-	content: '';
-	position: fixed;
-	inset: 0;
-	pointer-events: none;
-	opacity: 0.03;
-	background-image: repeating-conic-gradient(var(--grid-dot) 0% 25%, transparent 0% 50%);
-	background-size: 4px 4px;
-	z-index: 0;
-}
-```
-
- [ ] **Step 3: Verify by temporarily adding `data-theme="dark"` to `app.html`**
-
-In `src/app.html`, temporarily change `<html lang="en">` to `<html lang="en" data-theme="dark">`. Run `make dev` and visually confirm dark background and light text. Then revert the change.
-
- [ ] **Step 4: Commit**
-
-```bash
-git add src/app.css
-git commit -m "feat: add dark theme CSS variables and grid-dot extraction"
-```
-
---
-
-### Task 2: Theme Preference Type
-
-**Files:**
- Modify: `src/lib/types/preferences.ts`
-
- [ ] **Step 1: Add `theme` field to `UserPreferences`**
-
-```typescript
-export interface UserPreferences {
-	theme: 'system' | 'light' | 'dark';
-	defaultNoteMode: 'richtext' | 'markdown';
-	defaultNoteColor: NoteColor;
-	hideFooter: boolean;
-	sidebarDefaultState: 'open' | 'collapsed';
-	notifyOnShare: boolean;
-	notifyOnCollabRemoved: boolean;
-	notifyOnNoteDeleted: boolean;
-}
-
-export const DEFAULT_PREFERENCES: UserPreferences = {
-	theme: 'system',
-	defaultNoteMode: 'richtext',
-	defaultNoteColor: 'default',
-	hideFooter: false,
-	sidebarDefaultState: 'open',
-	notifyOnShare: true,
-	notifyOnCollabRemoved: true,
-	notifyOnNoteDeleted: true
-};
-```
-
-Do NOT add `theme` to `BOOLEAN_PREF_KEYS`.
-
- [ ] **Step 2: Commit**
-
-```bash
-git add src/lib/types/preferences.ts
-git commit -m "feat: add theme preference type (system/light/dark)"
-```
-
---
-
-### Task 3: Theme Utility — `applyTheme` and `isDarkMode`
-
-**Files:**
- Create: `src/lib/utils/theme.svelte.ts`
- Test: `tests/unit/theme.test.ts`
-
- [ ] **Step 1: Write failing tests for theme utility**
-
-Note: `theme.svelte.ts` uses module-scope `$state` which requires the Svelte compiler. The Vitest node environment does not process `.svelte.ts` runes correctly, so we test only the DOM side-effects of `applyTheme` (attribute and meta tag changes). The reactive `isDarkMode` / `getIsDarkMode()` behavior is covered by E2E tests instead.
-
-Create `tests/unit/theme.test.ts`:
-
-```typescript
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-
-// Mock $app/environment
-vi.mock('$app/environment', () => ({ browser: true }));
-
-describe('applyTheme', () => {
-	let applyTheme: (theme: 'system' | 'light' | 'dark') => void;
-
-	beforeEach(async () => {
-		// Reset DOM
-		document.documentElement.removeAttribute('data-theme');
-		const meta = document.querySelector('meta[name="theme-color"]');
-		if (meta) meta.remove();
-		const metaEl = document.createElement('meta');
-		metaEl.setAttribute('name', 'theme-color');
-		metaEl.setAttribute('content', '#f0e6d3');
-		document.head.appendChild(metaEl);
-
-		// Reset module state
-		vi.resetModules();
-		const mod = await import('$lib/utils/theme.svelte.js');
-		applyTheme = mod.applyTheme;
-	});
-
-	it('sets data-theme="dark" for dark mode', () => {
-		applyTheme('dark');
-		expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-	});
-
-	it('removes data-theme for light mode', () => {
-		document.documentElement.setAttribute('data-theme', 'dark');
-		applyTheme('light');
-		expect(document.documentElement.hasAttribute('data-theme')).toBe(false);
-	});
-
-	it('updates meta theme-color for dark mode', () => {
-		applyTheme('dark');
-		const meta = document.querySelector('meta[name="theme-color"]');
-		expect(meta?.getAttribute('content')).toBe('#1a1715');
-	});
-
-	it('updates meta theme-color for light mode', () => {
-		applyTheme('dark');
-		applyTheme('light');
-		const meta = document.querySelector('meta[name="theme-color"]');
-		expect(meta?.getAttribute('content')).toBe('#f0e6d3');
-	});
-
-	it('falls back to system for unknown values', () => {
-		// matchMedia returns false by default in jsdom → resolves to light
-		applyTheme('invalid' as 'system' | 'light' | 'dark');
-		expect(document.documentElement.hasAttribute('data-theme')).toBe(false);
-	});
-
-	it('resolves system preference to dark when prefers-color-scheme is dark', () => {
-		Object.defineProperty(window, 'matchMedia', {
-			writable: true,
-			value: vi.fn().mockImplementation((query: string) => ({
-				matches: query === '(prefers-color-scheme: dark)',
-				media: query,
-				addEventListener: vi.fn(),
-				removeEventListener: vi.fn(),
-				dispatchEvent: vi.fn()
-			}))
-		});
-		applyTheme('system');
-		expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-	});
-});
-```
-
- [ ] **Step 2: Run tests to verify they fail**
-
-Run: `pnpm vitest run tests/unit/theme.test.ts`
-Expected: FAIL — module not found
-
- [ ] **Step 3: Implement `theme.svelte.ts`**
-
-Create `src/lib/utils/theme.svelte.ts`:
-
-```typescript
-import { browser } from '$app/environment';
-
-const LIGHT_THEME_COLOR = '#f0e6d3';
-const DARK_THEME_COLOR = '#1a1715';
-
-let darkMode = $state(false);
-
-export function getIsDarkMode(): boolean {
-	return darkMode;
-}
-
-export function applyTheme(theme: 'system' | 'light' | 'dark'): void {
-	if (!browser) return;
-
-	// Validate input
-	if (theme !== 'system' && theme !== 'light' && theme !== 'dark') {
-		theme = 'system';
-	}
-
-	// Resolve system preference
-	let resolved = theme;
-	if (theme === 'system') {
-		resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-	}
-
-	const isDark = resolved === 'dark';
-	darkMode = isDark;
-
-	if (isDark) {
-		document.documentElement.setAttribute('data-theme', 'dark');
-	} else {
-		document.documentElement.removeAttribute('data-theme');
-	}
-
-	const meta = document.querySelector('meta[name="theme-color"]');
-	if (meta) {
-		meta.setAttribute('content', isDark ? DARK_THEME_COLOR : LIGHT_THEME_COLOR);
-	}
-}
-```
-
- [ ] **Step 4: Run tests to verify they pass**
-
-Run: `pnpm vitest run tests/unit/theme.test.ts`
-Expected: All PASS
-
- [ ] **Step 5: Commit**
-
-```bash
-git add src/lib/utils/theme.svelte.ts tests/unit/theme.test.ts
-git commit -m "feat: add theme utility with applyTheme and isDarkMode"
-```
-
---
-
-### Task 4: Note Card Dark Colors
-
-**Files:**
- Modify: `src/lib/utils/colors.ts`
- Test: `tests/unit/colors.test.ts`
-
- [ ] **Step 1: Write failing tests for `getNoteColor`**
-
-Create `tests/unit/colors.test.ts`:
-
-```typescript
-import { describe, it, expect } from 'vitest';
-import { getNoteColor, NOTE_COLORS, NOTE_COLORS_DARK } from '$lib/utils/colors.js';
-
-describe('getNoteColor', () => {
-	it('returns light color when isDark is false', () => {
-		expect(getNoteColor('default', false)).toBe('#faf5eb');
-		expect(getNoteColor('coral', false)).toBe('#faafa8');
-	});
-
-	it('returns dark color when isDark is true', () => {
-		expect(getNoteColor('default', true)).toBe('#2a2520');
-		expect(getNoteColor('coral', true)).toBe('#4a2522');
-	});
-
-	it('returns default color for unknown color name', () => {
-		expect(getNoteColor('unknown' as any, false)).toBe('#faf5eb');
-		expect(getNoteColor('unknown' as any, true)).toBe('#2a2520');
-	});
-
-	it('has matching keys in light and dark color maps', () => {
-		const lightKeys = Object.keys(NOTE_COLORS).sort();
-		const darkKeys = Object.keys(NOTE_COLORS_DARK).sort();
-		expect(lightKeys).toEqual(darkKeys);
-	});
-});
-```
-
- [ ] **Step 2: Run tests to verify they fail**
-
-Run: `pnpm vitest run tests/unit/colors.test.ts`
-Expected: FAIL — `getNoteColor` and `NOTE_COLORS_DARK` not found
-
- [ ] **Step 3: Add dark colors and helper to `colors.ts`**
-
-Update `src/lib/utils/colors.ts`:
-
-```typescript
-import type { NoteColor } from '$lib/types/index.js';
-
-export const NOTE_COLORS: Record<NoteColor, { bg: string; label: string }> = {
-	default: { bg: '#faf5eb', label: 'Default' },
-	coral: { bg: '#faafa8', label: 'Coral' },
-	peach: { bg: '#f39f76', label: 'Peach' },
-	sand: { bg: '#fff8b8', label: 'Sand' },
-	mint: { bg: '#e2f6d3', label: 'Mint' },
-	sage: { bg: '#b4ddd3', label: 'Sage' },
-	fog: { bg: '#d4e4ed', label: 'Fog' },
-	storm: { bg: '#aeccdc', label: 'Storm' },
-	dusk: { bg: '#d3bfdb', label: 'Dusk' },
-	blossom: { bg: '#f6e2dd', label: 'Blossom' },
-	clay: { bg: '#e9e3d4', label: 'Clay' },
-	chalk: { bg: '#efeff1', label: 'Chalk' }
-};
-
-export const NOTE_COLORS_DARK: Record<NoteColor, { bg: string; label: string }> = {
-	default: { bg: '#2a2520', label: 'Default' },
-	coral: { bg: '#4a2522', label: 'Coral' },
-	peach: { bg: '#4a3020', label: 'Peach' },
-	sand: { bg: '#3a3520', label: 'Sand' },
-	mint: { bg: '#2a3a22', label: 'Mint' },
-	sage: { bg: '#223a32', label: 'Sage' },
-	fog: { bg: '#222e3a', label: 'Fog' },
-	storm: { bg: '#1e2a35', label: 'Storm' },
-	dusk: { bg: '#352540', label: 'Dusk' },
-	blossom: { bg: '#3a2830', label: 'Blossom' },
-	clay: { bg: '#302e28', label: 'Clay' },
-	chalk: { bg: '#2e2e30', label: 'Chalk' }
-};
-
-export function getNoteColor(color: NoteColor, isDark: boolean): string {
-	const map = isDark ? NOTE_COLORS_DARK : NOTE_COLORS;
-	return (map[color] ?? map.default).bg;
-}
-
-export const COLOR_OPTIONS = Object.entries(NOTE_COLORS).map(([value, { label }]) => ({
-	value: value as NoteColor,
-	label
-}));
-```
-
- [ ] **Step 4: Run tests to verify they pass**
-
-Run: `pnpm vitest run tests/unit/colors.test.ts`
-Expected: All PASS
-
- [ ] **Step 5: Commit**
-
-```bash
-git add src/lib/utils/colors.ts tests/unit/colors.test.ts
-git commit -m "feat: add dark note card colors and getNoteColor helper"
-```
-
---
-
-### Task 5: FOUC Prevention Script
-
-**Files:**
- Modify: `src/app.html`
-
- [ ] **Step 1: Add inline script to `app.html`**
-
-Insert after the `<meta name="theme-color">` tag (line 6) and before `%sveltekit.head%` (line 15):
-
-```html
-    <script>
-      (function() {
-        try {
-          var p = JSON.parse(localStorage.getItem('crumbs-preferences') || '{}');
-          var t = p.theme || 'system';
-          if (t !== 'light' && t !== 'dark') t = 'system';
-          if (t === 'system') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-          if (t === 'dark') {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            var m = document.querySelector('meta[name="theme-color"]');
-            if (m) m.content = '#1a1715';
-          }
-        } catch(e) {}
-      })();
-    </script>
-```
-
- [ ] **Step 2: Commit**
-
-```bash
-git add src/app.html
-git commit -m "feat: add FOUC-prevention script for dark mode"
-```
-
---
-
-### Task 6: Reactive Theme in Root Layout
-
-**Files:**
- Modify: `src/routes/+layout.svelte`
-
- [ ] **Step 1: Add theme `$effect` to root layout**
-
-The root layout currently imports CSS and registers the PWA service worker. Add the theme `$effect` here so both `(app)` and `(auth)` layouts get the theme applied. **Important:** Keep `initPreferences()` in `(app)/+layout.svelte` — do NOT move it here. The `(app)` layout reads `sidebarDefaultState` immediately after init, and moving init to the root layout would create a race condition. The root layout only watches the preference reactively via `$effect`, which fires after preferences are loaded.
-
-On auth pages (login/setup), `initPreferences()` hasn't been called, so `prefs.theme` will be `'system'` (the default). The FOUC script already handles the initial theme from localStorage, and the `$effect` will apply the correct theme once it runs.
-
-```svelte
-<script lang="ts">
-	import '../app.css';
-	import { onMount, onDestroy } from 'svelte';
-	import { pwaInfo } from 'virtual:pwa-info';
-	import { browser } from '$app/environment';
-	import { getPreferences } from '$lib/stores/preferences.svelte.js';
-	import { applyTheme } from '$lib/utils/theme.svelte.js';
-
-	let { children } = $props();
-	let mediaQuery: MediaQueryList | undefined;
-	let systemListener: ((e: MediaQueryListEvent) => void) | undefined;
-
-	const prefs = $derived(getPreferences());
-
-	onMount(async () => {
-		if (pwaInfo) {
-			const { registerSW } = await import('virtual:pwa-register');
-			registerSW({
-				immediate: true,
-				onRegistered(r: ServiceWorkerRegistration | undefined) {
-					console.log('SW Registered:', r);
-				},
-				onRegisterError(error: Error) {
-					console.log('SW registration error', error);
-				}
-			});
-		}
-	});
-
-	$effect(() => {
-		if (!browser) return;
-		const theme = prefs.theme ?? 'system';
-		applyTheme(theme);
-
-		// Listen for system preference changes when in system mode
-		if (systemListener && mediaQuery) {
-			mediaQuery.removeEventListener('change', systemListener);
-		}
-		if (theme === 'system') {
-			mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-			systemListener = () => applyTheme('system');
-			mediaQuery.addEventListener('change', systemListener);
-		}
-	});
-
-	onDestroy(() => {
-		if (systemListener && mediaQuery) {
-			mediaQuery.removeEventListener('change', systemListener);
-		}
-	});
-
-	const webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
-</script>
-
-<svelte:head>
-	{@html webManifest}
-</svelte:head>
-
-{@render children()}
-```
-
-**Note:** `initPreferences()` stays in `(app)/+layout.svelte`. The root layout only adds the theme `$effect` and does not call `initPreferences()`.
-
- [ ] **Step 2: Verify dev server works**
-
-Run `make dev`, open the app, go to Settings > Preferences. The theme toggle doesn't exist yet, but the app should render without errors. Check browser console for any issues.
-
- [ ] **Step 4: Commit**
-
-```bash
-git add src/routes/+layout.svelte src/routes/\(app\)/+layout.svelte
-git commit -m "feat: add reactive theme watcher in root layout"
-```
-
---
-
-### Task 7: Theme Toggle in Settings
-
-**Files:**
- Modify: `src/routes/(app)/settings/preferences/+page.svelte`
-
- [ ] **Step 1: Add theme segmented toggle**
-
-Add as the first preference section (before "Default note mode"):
-
-```svelte
-<!-- Theme -->
-<div class="space-y-2">
-	<span class="block text-sm font-medium text-[var(--text)]">Theme</span>
-	<div class="flex gap-1" role="group" aria-label="Theme">
-		{#each [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']] as [value, label]}
-			<button
-				onclick={() => updatePreference('theme', value)}
-				class="rounded-sm border px-4 py-2 text-sm transition-colors {prefs.theme === value ? 'border-[var(--primary)] bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'border-[var(--border-subtle)] text-[var(--text)] hover:border-[var(--primary)]'}"
-				data-testid="pref-theme-{value}"
-			>
-				{label}
-			</button>
-		{/each}
-	</div>
-</div>
-```
-
- [ ] **Step 2: Manually test**
-
-Run `make dev`. Go to Settings > Preferences. Click System / Light / Dark and confirm:
- Clicking "Dark" immediately applies dark theme
- Clicking "Light" reverts to light theme
- Clicking "System" follows OS preference
- Refreshing the page persists the choice (no FOUC)
-
- [ ] **Step 3: Commit**
-
-```bash
-git add src/routes/\(app\)/settings/preferences/+page.svelte
-git commit -m "feat: add theme toggle to preferences settings"
-```
-
---
-
-### Task 8: Update Components to Use Dark Note Colors
-
-**Files:**
- Modify: `src/lib/components/NoteCard.svelte:2,29-32`
- Modify: `src/lib/components/NoteEditor.svelte:12,194-197`
- Modify: `src/lib/components/ColorPicker.svelte`
-
-**Important:** `getIsDarkMode()` must be called **inside** `$effect` or `$derived` blocks for reactivity. Calling it as a top-level `const` would capture the value once and never update when the theme changes. Each component already has an `$effect` block where it computes card/bg styles — add `getIsDarkMode()` inside those existing blocks.
-
-Public share page (`src/routes/(share)/s/[token]/+page.svelte`) is out of scope per the spec.
-
- [ ] **Step 1: Update `NoteCard.svelte`**
-
-Replace `NOTE_COLORS` import with `getNoteColor` and `getIsDarkMode`:
-
-```svelte
-<!-- Change import at top of script -->
-import { getNoteColor } from '$lib/utils/colors.js';
-import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
-
-<!-- Inside the existing $effect block where cardStyle is computed (around lines 29-32): -->
-$effect(() => {
-	// ... existing logic ...
-	const bg = getNoteColor(note.color, getIsDarkMode());
-	cardStyle = `background-color: ${bg}`;
-});
-```
-
-Remove the `NOTE_COLORS` import. `getIsDarkMode()` is called inside the `$effect` so it re-runs when the theme changes.
-
- [ ] **Step 2: Update `NoteEditor.svelte`**
-
-Same pattern — inside the existing `$effect` where `bgStyle` is computed:
-
-```svelte
-import { getNoteColor } from '$lib/utils/colors.js';
-import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
-
-<!-- Inside the existing $effect (around lines 194-197): -->
-bgStyle = `background-color: ${getNoteColor(color, getIsDarkMode())}`;
-```
-
-Remove the `NOTE_COLORS` import.
-
- [ ] **Step 3: Update `ColorPicker.svelte`**
-
-The ColorPicker shows circular swatches. Use `$derived` for the dark mode check so swatches update reactively:
-
-```svelte
-import { COLOR_OPTIONS, getNoteColor } from '$lib/utils/colors.js';
-import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
-
-<!-- Use getIsDarkMode() in the template directly (it's reactive in Svelte 5 template expressions): -->
-style="background-color: {getNoteColor(option.value, getIsDarkMode())}"
-```
-
-Remove `NOTE_COLORS` import if no longer needed.
-
- [ ] **Step 4: Verify all components render correctly in both themes**
-
-Run `make dev`. Toggle between light and dark in Settings > Preferences. Check:
- Note cards show correct dark/light background colors
- Color picker shows dark/light swatches
- Note editor uses correct background color
-
- [ ] **Step 5: Commit**
-
-```bash
-git add src/lib/components/NoteCard.svelte src/lib/components/NoteEditor.svelte src/lib/components/ColorPicker.svelte
-git commit -m "feat: use dark note card colors in all components"
-```
-
---
-
-### Task 9: E2E Tests
-
-**Files:**
- Create: `tests/e2e/dark-mode.spec.ts`
-
- [ ] **Step 1: Write E2E tests**
-
-Create `tests/e2e/dark-mode.spec.ts`:
-
-```typescript
-import { test, expect } from './helpers/fixtures.js';
-
-test.describe('Dark mode', () => {
-	test('Scenario: Theme toggle persists selection across page reload', async ({
-		authenticatedPage: page
-	}) => {
-		// Given the user is on the preferences page
-		await page.goto('/settings/preferences');
-
-		// When the user selects dark theme
-		await page.getByTestId('pref-theme-dark').click();
-
-		// Then the page applies dark theme
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-
-		// When the page is reloaded
-		await page.reload();
-
-		// Then the dark theme persists without flash
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-		await expect(page.getByTestId('pref-theme-dark')).toHaveClass(/font-medium/);
-	});
-
-	test('Scenario: Light mode removes dark theme attribute', async ({
-		authenticatedPage: page
-	}) => {
-		// Given dark theme is active
-		await page.goto('/settings/preferences');
-		await page.getByTestId('pref-theme-dark').click();
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-
-		// When the user selects light theme
-		await page.getByTestId('pref-theme-light').click();
-
-		// Then the dark theme attribute is removed
-		await expect(page.locator('html')).not.toHaveAttribute('data-theme');
-	});
-
-	test('Scenario: System mode follows OS dark preference', async ({
-		authenticatedPage: page
-	}) => {
-		// Given the OS prefers dark mode
-		await page.emulateMedia({ colorScheme: 'dark' });
-
-		// When the user selects system theme
-		await page.goto('/settings/preferences');
-		await page.getByTestId('pref-theme-system').click();
-
-		// Then the page applies dark theme from system preference
-		// Use toHaveAttribute with timeout to handle async $effect execution
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark', { timeout: 5000 });
-	});
-
-	test('Scenario: Note cards use dark colors in dark mode', async ({
-		authenticatedPage: page
-	}) => {
-		// Given dark theme is active
-		await page.goto('/settings/preferences');
-		await page.getByTestId('pref-theme-dark').click();
-
-		// When viewing the notes page
-		await page.goto('/');
-
-		// Then note cards should have dark background colors
-		const noteCard = page.getByTestId('note-card').first();
-		if (await noteCard.isVisible()) {
-			const bg = await noteCard.evaluate((el) => getComputedStyle(el).backgroundColor);
-			// Dark default color is #2a2520 = rgb(42, 37, 32)
-			expect(bg).not.toBe('rgb(250, 245, 235)'); // Not the light default
-		}
-	});
-});
-```
-
- [ ] **Step 2: Run E2E tests**
-
-Run: `pnpm test:e2e tests/e2e/dark-mode.spec.ts`
-Expected: All PASS
-
- [ ] **Step 3: Commit**
-
-```bash
-git add tests/e2e/dark-mode.spec.ts
-git commit -m "test: add E2E tests for dark mode toggle and persistence"
-```
-
---
-
-### Task 10: Housekeeping and Type Check
-
-**Files:**
- Modify: `.gitignore`
-
- [ ] **Step 1: Add `.superpowers/` to `.gitignore`**
-
-Append to `.gitignore`:
-
-```
-# Superpowers brainstorm artifacts
-.superpowers/
-```
-
- [ ] **Step 2: Run type check**
-
-Run: `pnpm check`
-Expected: No errors. If there are type errors, fix them.
-
- [ ] **Step 3: Run full test suite**
-
-Run: `make test`
-Expected: All unit and E2E tests pass.
-
- [ ] **Step 4: Commit**
-
-```bash
-git add .gitignore
-git commit -m "chore: add .superpowers/ to gitignore"
-```
@@ -1,190 +0,0 @@
-# Dark Mode / Theme Toggle — Design Spec
-
-**Issue:** #26
-**Date:** 2026-03-20
-**Status:** Draft
-
-## Summary
-
-Add a dark variant of the retro parchment theme with a three-way toggle (system / light / dark) in Settings > Preferences. The dark theme preserves the retro 8-bit character — warm dark tones, not cold grays.
-
-## Decisions
-
- **Toggle location:** Settings > Preferences only (no header icon)
- **UI pattern:** Segmented buttons (system / light / dark), matching existing `defaultNoteMode` toggle style
- **Implementation:** CSS `[data-theme="dark"]` attribute on `<html>`, variable overrides in `app.css`
- **Pixel grid texture:** Inverted to light dots (`#e8dcc8`) at 3% opacity in dark mode
- **Default:** `system` (follows `prefers-color-scheme`)
- **Light mode:** No `data-theme` attribute set (`:root` defaults apply). `data-theme="dark"` is only set for dark mode. This means no redundant `[data-theme="light"]` block is needed.
-
-## 1. CSS Variable Overrides
-
-Add `--grid-dot` to the existing `:root` block and add a `[data-theme="dark"]` block after it in `app.css`:
-
-```css
-:root {
-  /* ...existing vars... */
-  --grid-dot: #1a1a2e;  /* new — extracted from body::before */
-}
-
-[data-theme="dark"] {
-  --bg-base: #1a1715;
-  --bg-surface: #2a2520;
-  --text: #e8dcc8;
-  --text-muted: #9a8e7e;
-  --border: #e8dcc8;
-  --border-subtle: #3a3530;
-  --destructive: #d4604e;
-  --error-bg: #3a2020;
-  --error-border: #5a3030;
-  --error-text: #e8a090;
-  --success-bg: #203020;
-  --success-text: #90c880;
-  --card-shadow: 2px 2px 0px var(--border-subtle);
-  --card-shadow-hover: 3px 3px 0px var(--primary);
-  --grid-dot: #e8dcc8;
-}
-```
-
-`--primary` and `--primary-hover` remain unchanged — gold works on both backgrounds.
-
-`--card-shadow` uses `var(--border-subtle)` in both modes for consistency — the dark `--border-subtle` (#3a3530) produces the right effect.
-
-Update `body::before` to use the new variable:
-```css
-body::before {
-  background-image: repeating-conic-gradient(var(--grid-dot) 0% 25%, transparent 0% 50%);
-}
-```
-
-## 2. Theme Preference Storage
-
-Extend the existing `UserPreferences` system:
-
- **Type change:** Add `theme: 'system' | 'light' | 'dark'` to `UserPreferences` interface
- **Default:** `'system'`
- **Storage:** Same key-value `userPreferences` table + localStorage cache — no schema migration needed
- **Do NOT add `theme` to `BOOLEAN_PREF_KEYS`** — it's a string enum, not a boolean
-
-Files to modify:
- `src/lib/types/preferences.ts` — add `theme` field and default
-
-The existing `fromServerRecord` in `preferences.svelte.ts` does not validate string values. The `applyTheme` function (Section 4) must guard against unexpected values and fall back to `'system'` if the value is not one of the three valid options.
-
-## 3. FOUC Prevention
-
-Add a blocking `<script>` in `app.html` `<head>`, **after** the `<meta name="theme-color">` tag and **before** `%sveltekit.head%`:
-
-```html
-<script>
-  (function() {
-    try {
-      var p = JSON.parse(localStorage.getItem('crumbs-preferences') || '{}');
-      var t = p.theme || 'system';
-      if (t !== 'light' && t !== 'dark') t = 'system';
-      if (t === 'system') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      if (t === 'dark') {
-        document.documentElement.setAttribute('data-theme', 'dark');
-        var m = document.querySelector('meta[name="theme-color"]');
-        if (m) m.content = '#1a1715';
-      }
-    } catch(e) {}
-  })();
-</script>
-```
-
-This runs synchronously before first paint. The script validates the theme value and null-checks the meta element.
-
-## 4. Reactive Theme Application
-
-Create `src/lib/utils/theme.svelte.ts` (`.svelte.ts` to enable Svelte 5 runes) with:
-
- `applyTheme(theme: 'system' | 'light' | 'dark')` — resolves system preference, sets/removes `data-theme="dark"` on `document.documentElement`, updates `<meta name="theme-color">`. Guards against unexpected values (falls back to `'system'`). All DOM/`matchMedia` access guarded with `browser` check from `$app/environment`.
- `isDarkMode` — a reactive `$state` boolean, updated by `applyTheme` and the `matchMedia` listener. Components import this to conditionally use dark color variants.
-
-Place the theme `$effect` in the **root `+layout.svelte`** (not just `(app)` layout). This ensures both `(app)` and `(auth)` layout groups get the theme applied. The root layout currently only imports CSS — this adds a small `$effect` that watches `preferences.theme` and calls `applyTheme`. It also registers a `matchMedia('(prefers-color-scheme: dark)')` change listener when in system mode, cleaned up on destroy.
-
-## 5. Note Card Dark Colors
-
-Add a parallel `NOTE_COLORS_DARK` map in `src/lib/utils/colors.ts`:
-
-| Color | Light | Dark |
-|-------|-------|------|
-| default | `#faf5eb` | `#2a2520` |
-| coral | `#faafa8` | `#4a2522` |
-| peach | `#f39f76` | `#4a3020` |
-| sand | `#fff8b8` | `#3a3520` |
-| mint | `#e2f6d3` | `#2a3a22` |
-| sage | `#b4ddd3` | `#223a32` |
-| fog | `#d4e4ed` | `#222e3a` |
-| storm | `#aeccdc` | `#1e2a35` |
-| dusk | `#d3bfdb` | `#352540` |
-| blossom | `#f6e2dd` | `#3a2830` |
-| clay | `#e9e3d4` | `#302e28` |
-| chalk | `#efeff1` | `#2e2e30` |
-
-Export a helper `getNoteColor(color: NoteColor, isDark: boolean): string` that returns the correct bg hex.
-
-Components (`NoteCard.svelte`, `NoteEditor.svelte`, `ColorPicker.svelte`) import `isDarkMode` from `theme.svelte.ts` and pass it to `getNoteColor`. This is the single approach — do not use direct DOM inspection for dark mode detection.
-
-## 6. Settings UI
-
-Add a "Theme" section to `src/routes/(app)/settings/preferences/+page.svelte` as the **first** preference (before "Default note mode"):
-
-```svelte
-<!-- Theme -->
-<div class="space-y-2">
-  <span class="block text-sm font-medium text-[var(--text)]">Theme</span>
-  <div class="flex gap-1" role="group" aria-label="Theme">
-    {#each [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']] as [value, label]}
-      <button
-        onclick={() => updatePreference('theme', value)}
-        class="rounded-sm border px-4 py-2 text-sm transition-colors ..."
-        data-testid="pref-theme-{value}"
-      >
-        {label}
-      </button>
-    {/each}
-  </div>
-</div>
-```
-
-Test IDs: `pref-theme-system`, `pref-theme-light`, `pref-theme-dark`.
-
-## 7. Landing Page
-
-Out of scope for this spec. The landing page (`website/`) uses its own color system separate from `app.css`. Dark mode support for the landing page will be tracked separately.
-
-## 8. Prose / Typography Overrides
-
-The `.prose` overrides in `app.css` already use CSS variables, so they'll automatically adapt. No changes needed.
-
-The TipTap editor styles (table borders, selected cells, task lists) also use CSS variables. No changes needed.
-
-## 9. Color Picker in Dark Mode
-
-The `ColorPicker` component shows circular swatches. In dark mode, these should display the dark color variants. The component imports `isDarkMode` from `theme.svelte.ts` and uses `getNoteColor(color, isDarkMode)` to get the correct swatch background.
-
-## 10. Testing
-
-### Unit tests
- `theme.svelte.ts` — test `applyTheme` sets correct attribute and meta tag, validates unknown values
- `colors.ts` — test `getNoteColor` returns correct color for light/dark
-
-### E2E tests
- Theme toggle in preferences persists and applies (use `data-testid` selectors)
- System preference detection (use Playwright's `page.emulateMedia({ colorScheme: 'dark' })`)
- No FOUC on page reload in dark mode
- Note cards render with correct dark colors
-
-## 11. PWA Manifest
-
-The PWA manifest (`@vite-pwa/sveltekit`) contains a static `theme_color`. This cannot be dynamically changed. The manifest will keep the light theme color (`#f0e6d3`). The `<meta name="theme-color">` is updated dynamically by the FOUC script and `applyTheme`, which handles the browser chrome color. This is a known limitation of PWA manifests and is acceptable.
-
-## Out of Scope
-
- Header quick-toggle icon
- Per-note theme override
- Custom color theme builder
- Dark mode for public shared note pages (can be added later)
- Dark mode for landing page (separate task)
@@ -1,7 +1,7 @@
 {
  "name": "crumbs",
  "private": true,
-  "version": "0.28.2",
+  "version": "0.22.3",
  "type": "module",
  "license": "MIT",
  "author": "Bretzel (https://bretzel.app)",
@@ -78,7 +78,6 @@
    "@vite-pwa/sveltekit": "^1.1.0",
    "@vitest/coverage-v8": "^3.2.4",
    "drizzle-kit": "^0.31.9",
-    "jsdom": "^29.0.1",
    "nyc": "^18.0.0",
    "svelte": "^5.53.7",
    "svelte-check": "^4.4.4",
@@ -140,13 +140,10 @@ importers:
        version: 1.1.0(@sveltejs/kit@2.53.4(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.7)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))(svelte@5.53.7)(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)))(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
      '@vitest/coverage-v8':
        specifier: ^3.2.4
-        version: 3.2.4(vitest@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(jsdom@29.0.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+        version: 3.2.4(vitest@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
      drizzle-kit:
        specifier: ^0.31.9
        version: 0.31.9
-      jsdom:
-        specifier: ^29.0.1
-        version: 29.0.1
      nyc:
        specifier: ^18.0.0
        version: 18.0.0
@@ -176,7 +173,7 @@ importers:
        version: 1.2.0(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
      vitest:
        specifier: ^3.2.4
-        version: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(jsdom@29.0.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+        version: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
      workbox-window:
        specifier: ^7.4.0
        version: 7.4.0
@@ -196,17 +193,6 @@ packages:
    peerDependencies:
      ajv: '>=8'

-  '@asamuzakjp/css-color@5.0.1':
-    resolution: {integrity: sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  '@asamuzakjp/dom-selector@7.0.4':
-    resolution: {integrity: sha512-jXR6x4AcT3eIrS2fSNAwJpwirOkGcd+E7F7CP3zjdTqz9B/2huHOL8YJZBgekKwLML+u7qB/6P1LXQuMScsx0w==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
-  '@asamuzakjp/nwsapi@2.3.9':
-    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
-
  '@babel/code-frame@7.29.0':
    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
    engines: {node: '>=6.9.0'}
@@ -706,46 +692,6 @@ packages:
    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
    engines: {node: '>=18'}

-  '@bramus/specificity@2.4.2':
-    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
-    hasBin: true
-
-  '@csstools/color-helpers@6.0.2':
-    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
-    engines: {node: '>=20.19.0'}
-
-  '@csstools/css-calc@3.1.1':
-    resolution: {integrity: sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^4.0.0
-      '@csstools/css-tokenizer': ^4.0.0
-
-  '@csstools/css-color-parser@4.0.2':
-    resolution: {integrity: sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^4.0.0
-      '@csstools/css-tokenizer': ^4.0.0
-
-  '@csstools/css-parser-algorithms@4.0.0':
-    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^4.0.0
-
-  '@csstools/css-syntax-patches-for-csstree@1.1.1':
-    resolution: {integrity: sha512-BvqN0AMWNAnLk9G8jnUT77D+mUbY/H2b3uDTvg2isJkHaOufUE2R3AOwxWo7VBQKT1lOdwdvorddo2B/lk64+w==}
-    peerDependencies:
-      css-tree: ^3.2.1
-    peerDependenciesMeta:
-      css-tree:
-        optional: true
-
-  '@csstools/css-tokenizer@4.0.0':
-    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
-    engines: {node: '>=20.19.0'}
-
  '@drizzle-team/brocli@0.10.2':
    resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}

@@ -1069,15 +1015,6 @@ packages:
    cpu: [x64]
    os: [win32]

-  '@exodus/bytes@1.15.0':
-    resolution: {integrity: sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-    peerDependencies:
-      '@noble/hashes': ^1.8.0 || ^2.0.0
-    peerDependenciesMeta:
-      '@noble/hashes':
-        optional: true
-
  '@hono/node-server@1.19.11':
    resolution: {integrity: sha512-dr8/3zEaB+p0D2n/IUrlPF1HZm586qgJNXK1a9fhg/PzdtkK7Ksd5l312tJX2yBuALqDYBlG20QEbayqPyxn+g==}
    engines: {node: '>=18.14.1'}
@@ -1934,9 +1871,6 @@ packages:
  better-sqlite3@11.10.0:
    resolution: {integrity: sha512-EwhOpyXiOEL/lKzHz9AW1msWFNzGc/z+LzeB3/jnFJpxu+th2yqvzsSWas1v9jgs9+xiXJcD5A8CJxAG2TaghQ==}

-  bidi-js@1.0.3:
-    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
-
  bindings@1.5.0:
    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}

@@ -2079,19 +2013,11 @@ packages:
    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
    engines: {node: '>=8'}

-  css-tree@3.2.1:
-    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
  cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true

-  data-urls@7.0.0:
-    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
  data-view-buffer@1.0.2:
    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
    engines: {node: '>= 0.4'}
@@ -2117,9 +2043,6 @@ packages:
    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
    engines: {node: '>=0.10.0'}

-  decimal.js@10.6.0:
-    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
-
  decompress-response@6.0.0:
    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
    engines: {node: '>=10'}
@@ -2294,10 +2217,6 @@ packages:
    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
    engines: {node: '>=0.12'}

-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
-    engines: {node: '>=0.12'}
-
  es-abstract@1.24.1:
    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
    engines: {node: '>= 0.4'}
@@ -2600,10 +2519,6 @@ packages:
    resolution: {integrity: sha512-jq9l1DM0zVIvsm3lv9Nw9nlJnMNPOcAtsbsgiUhWcFzPE99Gvo6yRTlszSLLYacMeQ6quHD6hMfId8crVHvexw==}
    engines: {node: '>=16.9.0'}

-  html-encoding-sniffer@6.0.0:
-    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
  html-escaper@2.0.2:
    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}

@@ -2713,9 +2628,6 @@ packages:
    resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
    engines: {node: '>=0.10.0'}

-  is-potential-custom-element-name@1.0.1:
-    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
-
  is-promise@4.0.0:
    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}

@@ -2846,15 +2758,6 @@ packages:
    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
    hasBin: true

-  jsdom@29.0.1:
-    resolution: {integrity: sha512-z6JOK5gRO7aMybVq/y/MlIpKh8JIi68FBKMUtKkK2KH/wMSRlCxQ682d08LB9fYXplyY/UXG8P4XXTScmdjApg==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
-    peerDependencies:
-      canvas: ^3.0.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
  jsesc@3.1.0:
    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
    engines: {node: '>=6'}
@@ -3001,10 +2904,6 @@ packages:
    resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
    engines: {node: 20 || >=22}

-  lru-cache@11.2.7:
-    resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
-    engines: {node: 20 || >=22}
-
  lru-cache@5.1.1:
    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}

@@ -3041,9 +2940,6 @@ packages:
    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
    engines: {node: '>= 0.4'}

-  mdn-data@2.27.1:
-    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
-
  mdurl@2.0.0:
    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}

@@ -3205,9 +3101,6 @@ packages:
  package-json-from-dist@1.0.1:
    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}

-  parse5@8.0.0:
-    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
-
  parseurl@1.3.3:
    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
    engines: {node: '>= 0.8'}
@@ -3494,10 +3387,6 @@ packages:
  safer-buffer@2.1.2:
    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}

-  saxes@6.0.0:
-    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
-    engines: {node: '>=v12.22.7'}
-
  semver@6.3.1:
    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
    hasBin: true
@@ -3712,9 +3601,6 @@ packages:
    resolution: {integrity: sha512-uxck1KI7JWtlfP3H6HOWi/94soAl23jsGJkBzN2BAWcQng0+lTrRNhxActFqORgnO9BHVd1hKJhG+ljRuIUWfQ==}
    engines: {node: '>=18'}

-  symbol-tree@3.2.4:
-    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
-
  tailwindcss@4.2.1:
    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}

@@ -3777,13 +3663,6 @@ packages:
    peerDependencies:
      '@tiptap/core': ^3.0.1

-  tldts-core@7.0.27:
-    resolution: {integrity: sha512-YQ7uPjgWUibIK6DW5lrKujGwUKhLevU4hcGbP5O6TcIUb+oTjJYJVWPS4nZsIHrEEEG6myk/oqAJUEQmpZrHsg==}
-
-  tldts@7.0.27:
-    resolution: {integrity: sha512-I4FZcVFcqCRuT0ph6dCDpPuO4Xgzvh+spkcTr1gK7peIvxWauoloVO0vuy1FQnijT63ss6AsHB6+OIM4aXHbPg==}
-    hasBin: true
-
  toidentifier@1.0.1:
    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
    engines: {node: '>=0.6'}
@@ -3792,17 +3671,9 @@ packages:
    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
    engines: {node: '>=6'}

-  tough-cookie@6.0.1:
-    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
-    engines: {node: '>=16'}
-
  tr46@1.0.1:
    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}

-  tr46@6.0.0:
-    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
-    engines: {node: '>=20'}
-
  tsx@4.21.0:
    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
    engines: {node: '>=18.0.0'}
@@ -3857,10 +3728,6 @@ packages:
  undici-types@7.18.2:
    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}

-  undici@7.24.5:
-    resolution: {integrity: sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q==}
-    engines: {node: '>=20.18.1'}
-
  unicode-canonical-property-names-ecmascript@2.0.1:
    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
    engines: {node: '>=4'}
@@ -4015,25 +3882,9 @@ packages:
  w3c-keyname@2.2.8:
    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}

-  w3c-xmlserializer@5.0.0:
-    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
-    engines: {node: '>=18'}
-
  webidl-conversions@4.0.2:
    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}

-  webidl-conversions@8.0.1:
-    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
-    engines: {node: '>=20'}
-
-  whatwg-mimetype@5.0.0:
-    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
-    engines: {node: '>=20'}
-
-  whatwg-url@16.0.1:
-    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
-    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-
  whatwg-url@7.1.0:
    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}

@@ -4133,13 +3984,6 @@ packages:
  write-file-atomic@3.0.3:
    resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}

-  xml-name-validator@5.0.0:
-    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
-    engines: {node: '>=18'}
-
-  xmlchars@2.2.0:
-    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
-
  y18n@4.0.3:
    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}

@@ -4187,24 +4031,6 @@ snapshots:
      jsonpointer: 5.0.1
      leven: 3.1.0

-  '@asamuzakjp/css-color@5.0.1':
-    dependencies:
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-color-parser': 4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-      lru-cache: 11.2.7
-
-  '@asamuzakjp/dom-selector@7.0.4':
-    dependencies:
-      '@asamuzakjp/nwsapi': 2.3.9
-      bidi-js: 1.0.3
-      css-tree: 3.2.1
-      is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.2.7
-
-  '@asamuzakjp/nwsapi@2.3.9': {}
-
  '@babel/code-frame@7.29.0':
    dependencies:
      '@babel/helper-validator-identifier': 7.28.5
@@ -4861,34 +4687,6 @@ snapshots:

  '@bcoe/v8-coverage@1.0.2': {}

-  '@bramus/specificity@2.4.2':
-    dependencies:
-      css-tree: 3.2.1
-
-  '@csstools/color-helpers@6.0.2': {}
-
-  '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@csstools/css-color-parser@4.0.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/color-helpers': 6.0.2
-      '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
-    dependencies:
-      '@csstools/css-tokenizer': 4.0.0
-
-  '@csstools/css-syntax-patches-for-csstree@1.1.1(css-tree@3.2.1)':
-    optionalDependencies:
-      css-tree: 3.2.1
-
-  '@csstools/css-tokenizer@4.0.0': {}
-
  '@drizzle-team/brocli@0.10.2': {}

  '@esbuild-kit/core-utils@3.3.2':
@@ -5057,8 +4855,6 @@ snapshots:
  '@esbuild/win32-x64@0.27.3':
    optional: true

-  '@exodus/bytes@1.15.0': {}
-
  '@hono/node-server@1.19.11(hono@4.12.7)':
    dependencies:
      hono: 4.12.7
@@ -5698,7 +5494,7 @@ snapshots:
      - workbox-build
      - workbox-window

-  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(jsdom@29.0.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
    dependencies:
      '@ampproject/remapping': 2.3.0
      '@bcoe/v8-coverage': 1.0.2
@@ -5713,7 +5509,7 @@ snapshots:
      std-env: 3.10.0
      test-exclude: 7.0.2
      tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(jsdom@29.0.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
    transitivePeerDependencies:
      - supports-color

@@ -5894,10 +5690,6 @@ snapshots:
      bindings: 1.5.0
      prebuild-install: 7.1.3

-  bidi-js@1.0.3:
-    dependencies:
-      require-from-string: 2.0.2
-
  bindings@1.5.0:
    dependencies:
      file-uri-to-path: 1.0.0
@@ -6046,20 +5838,8 @@ snapshots:

  crypto-random-string@2.0.0: {}

-  css-tree@3.2.1:
-    dependencies:
-      mdn-data: 2.27.1
-      source-map-js: 1.2.1
-
  cssesc@3.0.0: {}

-  data-urls@7.0.0:
-    dependencies:
-      whatwg-mimetype: 5.0.0
-      whatwg-url: 16.0.1
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
  data-view-buffer@1.0.2:
    dependencies:
      call-bound: 1.0.4
@@ -6084,8 +5864,6 @@ snapshots:

  decamelize@1.2.0: {}

-  decimal.js@10.6.0: {}
-
  decompress-response@6.0.0:
    dependencies:
      mimic-response: 3.1.0
@@ -6165,8 +5943,6 @@ snapshots:

  entities@4.5.0: {}

-  entities@6.0.1: {}
-
  es-abstract@1.24.1:
    dependencies:
      array-buffer-byte-length: 1.0.2
@@ -6584,12 +6360,6 @@ snapshots:

  hono@4.12.7: {}

-  html-encoding-sniffer@6.0.0:
-    dependencies:
-      '@exodus/bytes': 1.15.0
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
  html-escaper@2.0.2: {}

  http-errors@2.0.1:
@@ -6695,8 +6465,6 @@ snapshots:

  is-obj@1.0.1: {}

-  is-potential-custom-element-name@1.0.1: {}
-
  is-promise@4.0.0: {}

  is-reference@1.2.1:
@@ -6841,32 +6609,6 @@ snapshots:
      argparse: 1.0.10
      esprima: 4.0.1

-  jsdom@29.0.1:
-    dependencies:
-      '@asamuzakjp/css-color': 5.0.1
-      '@asamuzakjp/dom-selector': 7.0.4
-      '@bramus/specificity': 2.4.2
-      '@csstools/css-syntax-patches-for-csstree': 1.1.1(css-tree@3.2.1)
-      '@exodus/bytes': 1.15.0
-      css-tree: 3.2.1
-      data-urls: 7.0.0
-      decimal.js: 10.6.0
-      html-encoding-sniffer: 6.0.0
-      is-potential-custom-element-name: 1.0.1
-      lru-cache: 11.2.7
-      parse5: 8.0.0
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 6.0.1
-      undici: 7.24.5
-      w3c-xmlserializer: 5.0.0
-      webidl-conversions: 8.0.1
-      whatwg-mimetype: 5.0.0
-      whatwg-url: 16.0.1
-      xml-name-validator: 5.0.0
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
  jsesc@3.1.0: {}

  json-schema-traverse@1.0.0: {}
@@ -6966,8 +6708,6 @@ snapshots:

  lru-cache@11.2.6: {}

-  lru-cache@11.2.7: {}
-
  lru-cache@5.1.1:
    dependencies:
      yallist: 3.1.1
@@ -7011,8 +6751,6 @@ snapshots:

  math-intrinsics@1.1.0: {}

-  mdn-data@2.27.1: {}
-
  mdurl@2.0.0: {}

  media-typer@1.1.0: {}
@@ -7165,10 +6903,6 @@ snapshots:

  package-json-from-dist@1.0.1: {}

-  parse5@8.0.0:
-    dependencies:
-      entities: 6.0.1
-
  parseurl@1.3.3: {}

  path-exists@4.0.0: {}
@@ -7534,10 +7268,6 @@ snapshots:

  safer-buffer@2.1.2: {}

-  saxes@6.0.0:
-    dependencies:
-      xmlchars: 2.2.0
-
  semver@6.3.1: {}

  semver@7.7.4: {}
@@ -7813,8 +7543,6 @@ snapshots:
      magic-string: 0.30.21
      zimmerframe: 1.1.4

-  symbol-tree@3.2.4: {}
-
  tailwindcss@4.2.1: {}

  tapable@2.3.0: {}
@@ -7885,28 +7613,14 @@ snapshots:
      markdown-it-task-lists: 2.1.1
      prosemirror-markdown: 1.13.4

-  tldts-core@7.0.27: {}
-
-  tldts@7.0.27:
-    dependencies:
-      tldts-core: 7.0.27
-
  toidentifier@1.0.1: {}

  totalist@3.0.1: {}

-  tough-cookie@6.0.1:
-    dependencies:
-      tldts: 7.0.27
-
  tr46@1.0.1:
    dependencies:
      punycode: 2.3.1

-  tr46@6.0.0:
-    dependencies:
-      punycode: 2.3.1
-
  tsx@4.21.0:
    dependencies:
      esbuild: 0.27.3
@@ -7978,8 +7692,6 @@ snapshots:

  undici-types@7.18.2: {}

-  undici@7.24.5: {}
-
  unicode-canonical-property-names-ecmascript@2.0.1: {}

  unicode-match-property-ecmascript@2.0.0:
@@ -8082,7 +7794,7 @@ snapshots:
    optionalDependencies:
      vite: 7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)

-  vitest@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(jsdom@29.0.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
+  vitest@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
    dependencies:
      '@types/chai': 5.2.3
      '@vitest/expect': 3.2.4
@@ -8109,7 +7821,6 @@ snapshots:
      why-is-node-running: 2.3.0
    optionalDependencies:
      '@types/node': 25.3.5
-      jsdom: 29.0.1
    transitivePeerDependencies:
      - jiti
      - less
@@ -8126,24 +7837,8 @@ snapshots:

  w3c-keyname@2.2.8: {}

-  w3c-xmlserializer@5.0.0:
-    dependencies:
-      xml-name-validator: 5.0.0
-
  webidl-conversions@4.0.2: {}

-  webidl-conversions@8.0.1: {}
-
-  whatwg-mimetype@5.0.0: {}
-
-  whatwg-url@16.0.1:
-    dependencies:
-      '@exodus/bytes': 1.15.0
-      tr46: 6.0.0
-      webidl-conversions: 8.0.1
-    transitivePeerDependencies:
-      - '@noble/hashes'
-
  whatwg-url@7.1.0:
    dependencies:
      lodash.sortby: 4.7.0
@@ -8342,10 +8037,6 @@ snapshots:
      signal-exit: 3.0.7
      typedarray-to-buffer: 3.1.5

-  xml-name-validator@5.0.0: {}
-
-  xmlchars@2.2.0: {}
-
  y18n@4.0.3: {}

  yallist@3.1.1: {}
@@ -8,11 +8,11 @@ export const MOBILE_VIEWPORT = { width: 390, height: 844 };
 export const ADMIN = {
 	email: 'admin@bretzel.app',
 	displayName: 'Bretzel Admin',
-	password: crypto.randomUUID()
+	password: 'bretzel2026!'
 };

 export const COLLABORATOR = {
 	email: 'salzig@bretzel.app',
 	displayName: 'Salzig Bretzel',
-	password: crypto.randomUUID()
+	password: 'salzig2026!!'
 };
@@ -20,25 +20,6 @@
 	--success-text: #3a5a2e;
 	--card-shadow: 2px 2px 0px var(--border-subtle);
 	--card-shadow-hover: 3px 3px 0px var(--primary);
-	--grid-dot: #1a1a2e;
-}
-
-[data-theme="dark"] {
-	--bg-base: #1a1715;
-	--bg-surface: #2a2520;
-	--text: #e8dcc8;
-	--text-muted: #9a8e7e;
-	--border: #e8dcc8;
-	--border-subtle: #3a3530;
-	--destructive: #d4604e;
-	--error-bg: #3a2020;
-	--error-border: #5a3030;
-	--error-text: #e8a090;
-	--success-bg: #203020;
-	--success-text: #90c880;
-	--card-shadow: 2px 2px 0px var(--border-subtle);
-	--card-shadow-hover: 3px 3px 0px var(--primary);
-	--grid-dot: #e8dcc8;
 }

 body {
@@ -52,7 +33,7 @@ body::before {
 	inset: 0;
 	pointer-events: none;
 	opacity: 0.03;
-	background-image: repeating-conic-gradient(var(--grid-dot) 0% 25%, transparent 0% 50%);
+	background-image: repeating-conic-gradient(#1a1a2e 0% 25%, transparent 0% 50%);
 	background-size: 4px 4px;
 	z-index: 0;
 }
@@ -135,20 +116,12 @@ body::before {
 .tiptap ul[data-type="taskList"] li,
 .prose ul.task-list li {
 	display: flex;
-	align-items: flex-start;
-	flex-wrap: wrap;
+	align-items: center;
 	gap: 0.375rem;
 	margin: 0;
 	padding: 0;
 }

-/* Nested task lists take full width below the parent item */
-.tiptap ul[data-type="taskList"] li > ul[data-type="taskList"],
-.prose ul.task-list li > ul.task-list {
-	flex-basis: 100%;
-	padding-left: 1.5rem;
-}
-
 .tiptap ul[data-type="taskList"] li::marker,
 .prose ul.task-list li::marker {
 	content: none;
@@ -159,7 +132,6 @@ body::before {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
-	margin-top: 0.125rem;
 }

 /* Shared checkbox styles */
@@ -167,7 +139,6 @@ body::before {
 .prose ul.task-list .task-checkbox {
 	cursor: pointer;
 	margin: 0;
-	margin-top: 0.2em;
 	flex-shrink: 0;
 }

@@ -205,41 +176,3 @@ body::before {
 .prose ul.task-list li p {
 	margin: 0;
 }
-
-/* Checklist link styles */
-.checklist-link {
-	color: var(--primary);
-	text-decoration: underline;
-	text-underline-offset: 2px;
-}
-
-.checklist-link:hover {
-	color: var(--primary-hover);
-}
-
-[data-placeholder]:empty::before {
-	content: attr(data-placeholder);
-	color: var(--text-muted);
-	pointer-events: none;
-}
-
-/* Custom tooltips */
-.tooltip-popup {
-	position: fixed;
-	z-index: 9999;
-	padding: 0.25rem 0.5rem;
-	font-family: 'JetBrains Mono', monospace;
-	font-size: 0.7rem;
-	line-height: 1.2;
-	color: var(--bg-surface);
-	background: var(--text);
-	border-radius: 2px;
-	pointer-events: none;
-	white-space: nowrap;
-	opacity: 0;
-	transition: opacity 100ms ease-out;
-}
-
-.tooltip-visible {
-	opacity: 1;
-}
@@ -4,21 +4,6 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#f0e6d3" />
-    <script>
-      (function() {
-        try {
-          var p = JSON.parse(localStorage.getItem('crumbs-preferences') || '{}');
-          var t = p.theme || 'system';
-          if (t !== 'light' && t !== 'dark') t = 'system';
-          if (t === 'system') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-          if (t === 'dark') {
-            document.documentElement.setAttribute('data-theme', 'dark');
-            var m = document.querySelector('meta[name="theme-color"]');
-            if (m) m.content = '#1a1715';
-          }
-        } catch(e) {}
-      })();
-    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
@@ -1,5 +0,0 @@
-// Mock for $app/environment used in Vitest unit tests
-export const browser = true;
-export const dev = false;
-export const building = false;
-export const version = 'test';
@@ -1,11 +0,0 @@
-/**
- * Polyfill Svelte 5 runes for Vitest.
- * The Svelte compiler transforms these in .svelte and .svelte.ts files,
- * but Vitest doesn't run the Svelte compiler, so we provide plain-JS stubs.
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-(globalThis as any).$state = <T>(initial: T): T => initial;
-(globalThis as any).$derived = <T>(value: T): T => value;
-(globalThis as any).$effect = (_fn: () => void): void => {};
-(globalThis as any).$props = (): any => ({});
@@ -3,11 +3,14 @@
 	import Plus from 'lucide-svelte/icons/plus';
 	import GripVertical from 'lucide-svelte/icons/grip-vertical';
 	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { onDestroy } from 'svelte';
 	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
-	import { type ChecklistItem, generateId, parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem, linkifyText, unlinkifyHtml } from '$lib/utils/checklist.js';
-	import LinkPopover from './LinkPopover.svelte';
+
+	interface ChecklistItem {
+		id: string;
+		text: string;
+		checked: boolean;
+	}

 	interface Props {
 		content: string;
@@ -20,106 +23,64 @@
 	let items = $state<ChecklistItem[]>(parseChecklist(content));
 	let doneExpanded = $state(true);
 	const flipDurationMs = 150;
-	let linkPopover = $state<{ url: string; anchor: DOMRect } | null>(null);
-
-	// Track the last content we emitted so we can distinguish self-originated
-	// changes from external ones (sync, history restore, etc.)
-	let lastEmitted = content;
-
-	// Re-parse items when content changes externally (not from our own emitChange)
-	$effect(() => {
-		if (content !== lastEmitted) {
-			items = parseChecklist(content);
-			lastEmitted = content;
-		}
-	});

 	let activeItems = $derived(items.filter((i) => !i.checked));
 	let doneItems = $derived(items.filter((i) => i.checked));
 	let doneCount = $derived(doneItems.length);

-	interface DoneSectionGroup {
-		parentLabel: ChecklistItem | null;
-		children: ChecklistItem[];
+	function generateId(): string {
+		return crypto.randomUUID();
 	}

-	let doneSectionGroups = $derived.by(() => {
-		const groups: DoneSectionGroup[] = [];
-		const childrenByParent = new Map<string, ChecklistItem[]>();
-		const topLevelDone: ChecklistItem[] = [];
+	function parseChecklist(text: string): ChecklistItem[] {
+		if (!text.trim()) return [{ id: generateId(), text: '', checked: false }];
+		const lines = text.split('\n');
+		return lines.map((line) => {
+			if (line.startsWith('- [x] ')) return { id: generateId(), text: line.slice(6), checked: true };
+			if (line.startsWith('- [ ] ')) return { id: generateId(), text: line.slice(6), checked: false };
+			return { id: generateId(), text: line, checked: false };
+		});
+	}

-		for (const item of doneItems) {
-			if (item.parentId) {
-				const siblings = childrenByParent.get(item.parentId) ?? [];
-				siblings.push(item);
-				childrenByParent.set(item.parentId, siblings);
-			} else {
-				topLevelDone.push(item);
-			}
-		}
-
-		for (const item of topLevelDone) {
-			const doneChildren = childrenByParent.get(item.id) ?? [];
-			groups.push({ parentLabel: null, children: [item, ...doneChildren] });
-			childrenByParent.delete(item.id);
-		}
-
-		for (const [parentId, children] of childrenByParent) {
-			const parent = items.find((i) => i.id === parentId);
-			if (parent) {
-				groups.push({ parentLabel: parent, children });
-			} else {
-				groups.push({ parentLabel: null, children });
-			}
-		}
-
-		return groups;
-	});
+	function serializeChecklist(list: ChecklistItem[]): string {
+		return list
+			.map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
+			.join('\n');
+	}

 	function emitChange() {
-		const serialized = serializeChecklist(items);
-		lastEmitted = serialized;
-		onChange(serialized);
+		onChange(serializeChecklist(items));
 	}

 	function toggleItem(id: string) {
-		items = toggleItemWithCascade(id, items);
-		emitChange();
-	}
-
-	function updateText(id: string, innerHTML: string) {
 		const item = items.find((i) => i.id === id);
 		if (item) {
-			item.text = unlinkifyHtml(innerHTML);
+			item.checked = !item.checked;
+			emitChange();
+		}
+	}
+
+	function updateText(id: string, text: string) {
+		const item = items.find((i) => i.id === id);
+		if (item) {
+			item.text = text;
 			emitChange();
 		}
 	}

 	function addItem(afterIndex: number) {
-		const afterItem = items[afterIndex];
-		const newItem: ChecklistItem = {
-			id: generateId(),
-			text: '',
-			checked: false,
-			parentId: afterItem?.parentId ?? null
-		};
+		const newItem = { id: generateId(), text: '', checked: false };
 		items.splice(afterIndex + 1, 0, newItem);
 		items = [...items];
 		emitChange();
-		const newId = newItem.id;
 		setTimeout(() => {
-			document.querySelector<HTMLElement>(`[data-item-id="${newId}"]`)?.focus();
+			const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
+			inputs[afterIndex + 1]?.focus();
 		}, 0);
 	}

 	function removeItem(id: string) {
-		if (items.length <= 1) {
-			if (items[0].parentId) items[0].parentId = null;
-			items = [...items];
-			emitChange();
-			return;
-		}
-		items = items.map((i) => (i.parentId === id ? { ...i, parentId: null } : i));
+		if (items.length <= 1) return;
 		const index = items.findIndex((i) => i.id === id);
 		items.splice(index, 1);
 		items = [...items];
@@ -135,178 +96,33 @@
 			e.preventDefault();
 			removeItem(id);
 			setTimeout(() => {
-				const inputs = document.querySelectorAll<HTMLElement>('[data-testid="checklist-input"]');
+				const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
 				inputs[Math.max(0, index - 1)]?.focus();
 			}, 0);
-		} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-			const inputs = Array.from(document.querySelectorAll<HTMLElement>('[data-testid="checklist-input"]'));
-			const current = inputs.findIndex((el) => el.dataset.itemId === id);
-			const target = e.key === 'ArrowUp' ? current - 1 : current + 1;
-			if (target >= 0 && target < inputs.length) {
-				e.preventDefault();
-				inputs[target].focus();
-			}
-		} else if (e.key === 'Tab' && !e.shiftKey) {
-			e.preventDefault();
-			items = indentItem(id, items, activeItems);
-			emitChange();
-		} else if (e.key === 'Tab' && e.shiftKey) {
-			e.preventDefault();
-			items = outdentItem(id, items);
-			emitChange();
 		}
 	}

-	// Svelte action: sets innerHTML on mount and syncs from external changes only.
-	// While the user is typing (element is focused), we don't re-render — that would
-	// destroy the cursor. Linkification happens on blur via the onblur handler.
-	function editableContent(node: HTMLElement, text: string) {
-		node.innerHTML = linkifyText(text);
-		return {
-			update(newText: string) {
-				if (document.activeElement !== node) {
-					node.innerHTML = linkifyText(newText);
-				}
-			}
-		};
-	}
-
-	function handleLinkClick(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		const anchor = target.closest('a');
-		if (anchor) {
-			e.preventDefault();
-			e.stopPropagation();
-			linkPopover = { url: anchor.href, anchor: anchor.getBoundingClientRect() };
-		}
-	}
-
-	function handlePaste(e: ClipboardEvent) {
-		e.preventDefault();
-		const text = (e.clipboardData?.getData('text/plain') ?? '').replace(/[\r\n]+/g, ' ');
-		const selection = window.getSelection();
-		if (!selection?.rangeCount) return;
-		const range = selection.getRangeAt(0);
-		range.deleteContents();
-		range.insertNode(document.createTextNode(text));
-		range.collapse(false);
-		selection.removeAllRanges();
-		selection.addRange(range);
-		(e.target as HTMLElement).dispatchEvent(new Event('input', { bubbles: true }));
-	}
-
-	// --- Directional lock drag handle ---
-	// Instead of blocking DnD events (which corrupts its internal state),
-	// we detect horizontal intent and store the pending operation. DnD runs
-	// its full course unimpeded. After DnD finalizes, we apply the indent.
-	let dragStartX = 0;
-	let dragStartY = 0;
-	let pendingIndent: { id: string; direction: 'indent' | 'outdent' } | null = null;
-	let directionLocked = false;
-	const LOCK_THRESHOLD = 10;
-	const INDENT_THRESHOLD = 32;
-
-	function windowPointerMove(e: PointerEvent) {
-		if (directionLocked) return;
-
-		const dx = Math.abs(e.clientX - dragStartX);
-		const dy = Math.abs(e.clientY - dragStartY);
-		if (dx >= LOCK_THRESHOLD || dy >= LOCK_THRESHOLD) {
-			directionLocked = true;
-			if (dx <= dy) {
-				// Vertical — DnD handles it, we're done
-				removeWindowListeners();
-			}
-			// Horizontal — keep listening for pointerup to measure total dx
-		}
-	}
-
-	function windowPointerUp(e: PointerEvent) {
-		const dx = e.clientX - dragStartX;
-		if (Math.abs(dx) > INDENT_THRESHOLD && directionLocked && currentDragItemId) {
-			pendingIndent = {
-				id: currentDragItemId,
-				direction: dx > 0 ? 'indent' : 'outdent'
-			};
-		}
-		removeWindowListeners();
-		directionLocked = false;
-	}
-
-	function addWindowListeners() {
-		window.addEventListener('pointermove', windowPointerMove, { capture: true });
-		window.addEventListener('pointerup', windowPointerUp, { capture: true });
-	}
-
-	function removeWindowListeners() {
-		window.removeEventListener('pointermove', windowPointerMove, { capture: true });
-		window.removeEventListener('pointerup', windowPointerUp, { capture: true });
-	}
-
-	let currentDragItemId = '';
-	function handleDragPointerDown(e: PointerEvent, id: string) {
-		dragStartX = e.clientX;
-		dragStartY = e.clientY;
-		directionLocked = false;
-		pendingIndent = null;
-		currentDragItemId = id;
-		addWindowListeners();
-	}
-
-	onDestroy(removeWindowListeners);
-
-	// --- DnD handlers ---
-	function recomputeParentIds(reorderedItems: ChecklistItem[]): ChecklistItem[] {
-		let lastTopLevelId: string | null = null;
-		return reorderedItems.map((item) => {
-			if (item.parentId === null) {
-				lastTopLevelId = item.id;
-				return item;
-			}
-			return { ...item, parentId: lastTopLevelId };
-		});
-	}
-
 	function handleDndConsider(e: CustomEvent<DndEvent<ChecklistItem>>) {
+		// Merge reordered active items with done items
 		items = [...e.detail.items, ...items.filter((i) => i.checked)];
 	}

 	function handleDndFinalize(e: CustomEvent<DndEvent<ChecklistItem>>) {
-		const reorderedActive = recomputeParentIds(e.detail.items);
-		items = [...reorderedActive, ...items.filter((i) => i.checked)];
+		items = [...e.detail.items, ...items.filter((i) => i.checked)];
 		emitChange();
-
-		// Apply pending indent/outdent from horizontal drag (after DnD fully cleans up)
-		if (pendingIndent && pendingIndent.id) {
-			const { id, direction } = pendingIndent;
-			pendingIndent = null;
-			if (direction === 'indent') {
-				items = indentItem(id, items, activeItems);
-			} else {
-				items = outdentItem(id, items);
-			}
-			emitChange();
-		}
 	}
 </script>

 <div class="space-y-0.5" data-testid="checklist">
 	<section
-		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
+		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: {} }}
 		onconsider={handleDndConsider}
 		onfinalize={handleDndFinalize}
 		class="space-y-0.5"
 	>
 		{#each activeItems as item (item.id)}
-			<div class="group flex items-center gap-2 py-1.5 outline-none {item.parentId ? 'pl-8' : ''}"
-				data-testid={item.parentId ? 'checklist-child-row' : undefined}
-				animate:flip={{ duration: flipDurationMs }}>
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div use:dragHandle
-					aria-label="drag handle"
-					onpointerdown={(e) => handleDragPointerDown(e, item.id)}
-					class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150 touch-none outline-none"
-					data-testid="checklist-drag-handle">
+			<div class="group flex items-center gap-2 py-1.5" animate:flip={{ duration: flipDurationMs }}>
+				<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
 					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
 				</div>
 				<input
@@ -316,30 +132,15 @@
 					class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
 					data-testid="checklist-checkbox"
 				/>
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					contenteditable="true"
-					use:editableContent={item.text}
-					oninput={(e) => updateText(item.id, (e.target as HTMLElement).innerHTML)}
+				<input
+					type="text"
+					value={item.text}
+					oninput={(e) => updateText(item.id, (e.target as HTMLInputElement).value)}
 					onkeydown={(e) => handleKeydown(e, item.id)}
-					onclick={handleLinkClick}
-					onpaste={handlePaste}
-					onblur={(e) => {
-						const el = e.currentTarget as HTMLElement;
-						requestAnimationFrame(() => {
-							if (el.isConnected && !el.contains(document.activeElement)) {
-								el.innerHTML = linkifyText(item.text);
-							}
-						});
-					}}
-					class="flex-1 min-w-0 bg-transparent text-sm outline-none break-words {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
-					data-placeholder="List item"
-					aria-placeholder="List item"
+					class="flex-1 min-w-0 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
+					placeholder="List item"
 					data-testid="checklist-input"
-					data-item-id={item.id}
-					role="textbox"
-					tabindex="0"
-				></div>
+				/>
 				<button
 					onclick={() => removeItem(item.id)}
 					class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
@@ -373,42 +174,29 @@
 			</button>

 			{#if doneExpanded}
-				<div class="mt-1 space-y-0.5" data-testid="checklist-done-section">
-					{#each doneSectionGroups as group}
-						{#if group.parentLabel}
-							<div class="flex items-center gap-2 py-1.5 pl-5" data-testid="checklist-done-parent-label">
-								<input type="checkbox" disabled class="h-4 w-4 rounded border-[var(--border-subtle)] opacity-50" />
-								<span class="text-sm text-[var(--text-muted)] break-words min-w-0">{@html linkifyText(group.parentLabel.text)}</span>
-							</div>
-						{/if}
-						{#each group.children as item (item.id)}
-							<div class="group flex items-center gap-2 py-1.5 {item.parentId ? 'pl-10' : 'pl-5'}">
-								<input
-									type="checkbox"
-									checked={item.checked}
-									onchange={() => toggleItem(item.id)}
-									class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
-									data-testid="checklist-done-checkbox"
-								/>
-								<span class="flex-1 text-sm text-[var(--text-muted)] line-through break-words min-w-0">{@html linkifyText(item.text)}</span>
-								<button
-									onclick={() => removeItem(item.id)}
-									class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
-									aria-label="Remove item"
-									data-testid="checklist-done-remove"
-								>
-									<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
-								</button>
-							</div>
-						{/each}
+				<div class="mt-1 space-y-0.5 pl-5" data-testid="checklist-done-section">
+					{#each doneItems as item (item.id)}
+						<div class="group flex items-center gap-2 py-1.5">
+							<input
+								type="checkbox"
+								checked={item.checked}
+								onchange={() => toggleItem(item.id)}
+								class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
+								data-testid="checklist-done-checkbox"
+							/>
+							<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
+							<button
+								onclick={() => removeItem(item.id)}
+								class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
+								aria-label="Remove item"
+								data-testid="checklist-done-remove"
+							>
+								<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
+							</button>
+						</div>
 					{/each}
 				</div>
 			{/if}
 		</div>
 	{/if}
-
-	{#if linkPopover}
-		<LinkPopover url={linkPopover.url} anchor={linkPopover.anchor} onClose={() => (linkPopover = null)} />
-	{/if}
 </div>
-
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { COLOR_OPTIONS, getNoteColor } from '$lib/utils/colors.js';
-	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
+	import { NOTE_COLORS, COLOR_OPTIONS } from '$lib/utils/colors.js';
 	import type { NoteColor } from '$lib/types/index.js';

 	interface Props {
@@ -13,10 +12,11 @@

 <div class="flex flex-wrap gap-1" data-testid="color-picker">
 	{#each COLOR_OPTIONS as option}
+		{@const colors = NOTE_COLORS[option.value]}
 		<button
 			onclick={() => onSelect(option.value)}
 			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-[var(--text)]' : 'border-[var(--border-subtle)]'}"
-			style="background-color: {getNoteColor(option.value, getIsDarkMode())}"
+			style="background-color: {colors.bg}"
 			title={option.label}
 			data-testid="color-{option.value}"
 		></button>
@@ -1,73 +0,0 @@
-<script lang="ts">
-	import ExternalLink from 'lucide-svelte/icons/external-link';
-	import { onMount } from 'svelte';
-
-	interface Props {
-		url: string;
-		anchor: DOMRect;
-		onClose: () => void;
-	}
-
-	let { url, anchor, onClose }: Props = $props();
-
-	let popoverEl: HTMLDivElement | undefined = $state();
-	let top = $state(0);
-	let left = $state(0);
-
-	onMount(() => {
-		if (!popoverEl) return;
-		const rect = popoverEl.getBoundingClientRect();
-
-		// Position below the anchor link, or above if near viewport bottom
-		const spaceBelow = window.innerHeight - anchor.bottom;
-		if (spaceBelow >= rect.height + 8) {
-			top = anchor.bottom + 4;
-		} else {
-			top = anchor.top - rect.height - 4;
-		}
-
-		left = anchor.left;
-		// Clamp to viewport
-		if (left + rect.width > window.innerWidth - 8) {
-			left = window.innerWidth - rect.width - 8;
-		}
-		if (left < 8) left = 8;
-	});
-
-	function handleClickOutside(e: MouseEvent) {
-		if (popoverEl && !popoverEl.contains(e.target as Node)) {
-			onClose();
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			onClose();
-		}
-	}
-
-	function openLink() {
-		window.open(url, '_blank', 'noopener');
-		onClose();
-	}
-</script>
-
-<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} onscroll={onClose} onresize={onClose} />
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	bind:this={popoverEl}
-	class="fixed z-50 flex items-center gap-1.5 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2 py-1.5 shadow-[var(--card-shadow)]"
-	style="top: {top}px; left: {left}px;"
-	onclick={(e) => e.stopPropagation()}
-	data-testid="link-popover"
->
-	<button
-		onclick={openLink}
-		class="flex items-center gap-1 text-xs text-[var(--primary)] hover:text-[var(--primary-hover)]"
-		data-testid="link-popover-open"
-	>
-		<ExternalLink class="h-3.5 w-3.5" />
-		Open
-	</button>
-</div>
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { getNoteColor } from '$lib/utils/colors.js';
-	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
+	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, leaveNote, currentFilter } from '$lib/stores/notes.js';
 	import ImageLightbox from './ImageLightbox.svelte';
+	import CollaboratorPopover from './CollaboratorPopover.svelte';
 	import SharingIndicator from './SharingIndicator.svelte';
 	import type { Note } from '$lib/types/index.js';
 	import Undo2 from 'lucide-svelte/icons/undo-2';
@@ -12,13 +12,10 @@
 	import Archive from 'lucide-svelte/icons/archive';
 	import ArchiveRestore from 'lucide-svelte/icons/archive-restore';
 	import UserMinus from 'lucide-svelte/icons/user-minus';
-	import { tooltip } from '$lib/utils/tooltip.js';
-	import { linkifyText } from '$lib/utils/checklist.js';

 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
-		indented: boolean;
 	}

 	interface Props {
@@ -30,7 +27,8 @@
 	let { note, onEdit, fullHeight = false }: Props = $props();

 	$effect(() => {
-		cardStyle = `background-color: ${getNoteColor(note.color, getIsDarkMode())}`;
+		const colors = NOTE_COLORS[note.color];
+		cardStyle = `background-color: ${colors.bg}`;
 	});

 	let cardStyle = $state('');
@@ -41,14 +39,10 @@

 	const checklistItems = $derived<ChecklistItem[]>(
 		note.checklistMode
-			? note.content.split('\n').filter(l => l.trim()).map(line => {
-					const indented = line.startsWith('  - [');
-					return {
-						text: line.replace(/^ {0,2}- \[[ x]\] /, ''),
-						checked: /^ {0,2}- \[x\] /.test(line),
-						indented
-					};
-				})
+			? note.content.split('\n').filter(l => l.trim()).map(line => ({
+					text: line.replace(/^- \[[ x]\] /, ''),
+					checked: line.startsWith('- [x] ')
+				}))
 			: []
 	);

@@ -119,7 +113,7 @@
 			<button
 				onclick={stop(() => togglePin(note.id, note.pinned))}
 				class="rounded-sm p-1 text-[var(--primary)] hover:bg-[var(--border)]/10"
-				use:tooltip={"Unpin"}
+				title="Unpin"
 				data-testid="pin-indicator"
 			>
 				<Bookmark class="h-4 w-4 fill-[var(--primary)]" />
@@ -132,13 +126,9 @@
 	{/if}

 	{#if note.checklistMode && checklistItems.length > 0}
-		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview"
-			onclick={(e) => { if ((e.target as HTMLElement).closest('a')) e.stopPropagation(); }}
-			onkeydown={(e) => { if ((e.target as HTMLElement).closest('a')) e.stopPropagation(); }}>
+		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
 			{#each sortedChecklistItems.slice(0, 8) as item}
-				<li class="flex items-start gap-2 text-sm {item.indented ? 'pl-4 ' : ''}{item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
-					data-testid={item.indented ? 'card-checklist-child' : undefined}>
+				<li class="flex items-start gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
 					<input
 						type="checkbox"
 						checked={item.checked}
@@ -146,7 +136,7 @@
 						class="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-[var(--border-subtle)] text-[var(--primary)]"
 						data-testid="card-checklist-checkbox"
 					/>
-					<span class="break-words min-w-0">{@html linkifyText(item.text)}</span>
+					<span class="break-words min-w-0">{item.text}</span>
 				</li>
 			{/each}
 			{#if checklistItems.length > 8}
@@ -165,7 +155,7 @@
 			<button
 				onclick={stop(() => restoreNote(note.id))}
 				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-				use:tooltip={"Restore"}
+				title="Restore"
 				data-testid="restore-btn"
 			>
 				<Undo2 class="h-4 w-4" />
@@ -173,7 +163,7 @@
 			<button
 				onclick={stop(() => deleteNote(note.id))}
 				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-				use:tooltip={"Delete forever"}
+				title="Delete forever"
 				data-testid="delete-forever-btn"
 			>
 				<Trash2 class="h-4 w-4 text-[var(--destructive)]" />
@@ -183,7 +173,7 @@
 				<button
 					onclick={stop(() => togglePin(note.id, note.pinned))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					use:tooltip={"Pin"}
+					title="Pin"
 					data-testid="pin-btn"
 				>
 					<Bookmark class="h-4 w-4" />
@@ -193,7 +183,7 @@
 				<button
 					onclick={stop(() => unarchiveNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					use:tooltip={"Unarchive"}
+					title="Unarchive"
 					data-testid="unarchive-btn"
 				>
 					<ArchiveRestore class="h-4 w-4" />
@@ -202,7 +192,7 @@
 				<button
 					onclick={stop(() => archiveNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					use:tooltip={"Archive"}
+					title="Archive"
 					data-testid="archive-btn"
 				>
 					<Archive class="h-4 w-4" />
@@ -212,7 +202,7 @@
 				<button
 					onclick={stop(() => leaveNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					use:tooltip={"Leave note"}
+					title="Leave note"
 					data-testid="leave-btn"
 				>
 					<UserMinus class="h-4 w-4" />
@@ -221,7 +211,7 @@
 				<button
 					onclick={stop(() => trashNote(note.id))}
 					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
-					use:tooltip={"Trash"}
+					title="Delete"
 					data-testid="trash-btn"
 				>
 					<Trash2 class="h-4 w-4" />
@@ -7,10 +7,9 @@
 	import ImageUpload from './ImageUpload.svelte';
 	import ShareDialog from './ShareDialog.svelte';
 	import NoteHistory from './NoteHistory.svelte';
-	import { updateNote, createNote, trashNote, archiveNote } from '$lib/stores/notes.js';
+	import { updateNote, createNote } from '$lib/stores/notes.js';
 	import { notes } from '$lib/stores/notes.js';
-	import { getNoteColor } from '$lib/utils/colors.js';
-	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
+	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { getPreferences } from '$lib/stores/preferences.svelte.js';
 	import type { Editor } from '@tiptap/core';
 	import type { Note, NoteColor, Attachment, Collaborator } from '$lib/types/index.js';
@@ -24,21 +23,14 @@
 	import Users from 'lucide-svelte/icons/users';
 	import Globe from 'lucide-svelte/icons/globe';
 	import History from 'lucide-svelte/icons/history';
-	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
-	import Trash2 from 'lucide-svelte/icons/trash-2';
-	import ListX from 'lucide-svelte/icons/list-x';
-	import Archive from 'lucide-svelte/icons/archive';
-	import { parseChecklist, serializeChecklist } from '$lib/utils/checklist.js';
-	import { tooltip } from '$lib/utils/tooltip.js';

 	interface Props {
 		note: Note | null;
 		isNew?: boolean;
-		initialChecklistMode?: boolean;
 		onClose: () => void;
 	}

-	const { note, isNew = false, initialChecklistMode = false, onClose }: Props = $props();
+	const { note, isNew = false, onClose }: Props = $props();
 	const prefs = getPreferences();

 	// svelte-ignore state_referenced_locally
@@ -48,7 +40,7 @@
 	// svelte-ignore state_referenced_locally
 	let color = $state<NoteColor>(note?.color ?? prefs.defaultNoteColor);
 	// svelte-ignore state_referenced_locally
-	let checklistMode = $state(note?.checklistMode ?? initialChecklistMode);
+	let checklistMode = $state(note?.checklistMode ?? false);
 	let showColorPicker = $state(false);
 	let showImageUpload = $state(false);
 	// svelte-ignore state_referenced_locally
@@ -63,100 +55,6 @@
 	// svelte-ignore state_referenced_locally
 	let currentlyNew = $state(isNew);

-	// Auto-save: track last-saved state to detect real changes
-	let lastSavedTitle = note?.title ?? '';
-	let lastSavedContent = note?.content ?? '';
-	let lastSavedColor: NoteColor = note?.color ?? prefs.defaultNoteColor;
-	let lastSavedChecklistMode = note?.checklistMode ?? initialChecklistMode;
-	let isSaving = false;
-	let savingPromise: Promise<void> | null = null;
-	let autoSaveTimer: ReturnType<typeof setTimeout> | undefined;
-	// TiptapEditor fires onUpdate on init with round-tripped markdown that may differ
-	// from the original. Track whether auto-save should be active yet.
-	let autoSaveReady = isNew;
-
-	function hasUnsavedChanges(): boolean {
-		return (
-			title !== lastSavedTitle ||
-			content !== lastSavedContent ||
-			color !== lastSavedColor ||
-			checklistMode !== lastSavedChecklistMode
-		);
-	}
-
-	async function performSave() {
-		if (isSaving) return;
-		// Snapshot current fields to avoid races with user edits during await
-		const snap = { title, content, color, checklistMode };
-		if (!snap.title.trim() && !snap.content.trim()) return;
-		if (
-			snap.title === lastSavedTitle &&
-			snap.content === lastSavedContent &&
-			snap.color === lastSavedColor &&
-			snap.checklistMode === lastSavedChecklistMode
-		) return;
-
-		isSaving = true;
-		try {
-			if (currentlyNew) {
-				const created = await createNote(snap);
-				if (created) {
-					noteId = created.id;
-					currentlyNew = false;
-					lastSavedTitle = snap.title;
-					lastSavedContent = snap.content;
-					lastSavedColor = snap.color;
-					lastSavedChecklistMode = snap.checklistMode;
-				}
-			} else if (noteId) {
-				const updated = await updateNote(noteId, snap);
-				if (updated) {
-					lastSavedTitle = snap.title;
-					lastSavedContent = snap.content;
-					lastSavedColor = snap.color;
-					lastSavedChecklistMode = snap.checklistMode;
-				}
-			}
-		} finally {
-			isSaving = false;
-		}
-	}
-
-	// Debounced auto-save: triggers 2s after the user stops editing
-	$effect(() => {
-		const _t = title;
-		const _c = content;
-		const _col = color;
-		const _cm = checklistMode;
-
-		if (!autoSaveReady) {
-			// Absorb TiptapEditor's initial content normalization as the baseline
-			lastSavedContent = _c;
-			autoSaveReady = true;
-			return;
-		}
-
-		if (_t === lastSavedTitle && _c === lastSavedContent && _col === lastSavedColor && _cm === lastSavedChecklistMode) return;
-		if (!_t.trim() && !_c.trim()) return;
-
-		autoSaveTimer = setTimeout(() => {
-			savingPromise = performSave();
-		}, 2000);
-
-		return () => clearTimeout(autoSaveTimer);
-	});
-
-	// Safety net: save on tab close / navigation
-	$effect(() => {
-		function handleBeforeUnload() {
-			if (hasUnsavedChanges() && (title.trim() || content.trim())) {
-				performSave();
-			}
-		}
-		window.addEventListener('beforeunload', handleBeforeUnload);
-		return () => window.removeEventListener('beforeunload', handleBeforeUnload);
-	});
-
 	// svelte-ignore state_referenced_locally
 	let attachmentsList = $state<Attachment[]>(note?.attachments ?? []);

@@ -171,29 +69,6 @@

 	let showShareDialog = $state(false);
 	let showHistory = $state(false);
-	let showOverflowMenu = $state(false);
-	let overflowBtnEl: HTMLButtonElement | undefined = $state();
-	let overflowMenuEl: HTMLDivElement | undefined = $state();
-
-	// Close overflow menu when clicking outside
-	$effect(() => {
-		if (!showOverflowMenu) return;
-		function handleClickOutside(e: MouseEvent) {
-			const target = e.target as Node;
-			if (overflowBtnEl?.contains(target) || overflowMenuEl?.contains(target)) return;
-			showOverflowMenu = false;
-		}
-		// Use setTimeout to avoid the current click from closing the menu
-		const timer = setTimeout(() => document.addEventListener('click', handleClickOutside), 0);
-		return () => {
-			clearTimeout(timer);
-			document.removeEventListener('click', handleClickOutside);
-		};
-	});
-
-	const hasDoneItems = $derived(
-		checklistMode && content.includes('[x]')
-	);
 	// svelte-ignore state_referenced_locally
 	let collaboratorsList = $state<Collaborator[]>(note?.collaborators ?? []);
 	// svelte-ignore state_referenced_locally
@@ -282,13 +157,7 @@
 	});

 	function handleAttachmentUpload(attachment: Attachment) {
-		const updated = [...attachmentsList, attachment];
-		attachmentsList = updated;
-		if (noteId) {
-			notes.update((list) =>
-				list.map((n) => (n.id === noteId ? { ...n, attachments: updated } : n))
-			);
-		}
+		attachmentsList = [...attachmentsList, attachment];
 	}

 	async function handleToggleFeatured(attachmentId: string, featured: boolean) {
@@ -300,14 +169,9 @@
 				body: JSON.stringify({ featured })
 			});
 			if (res.ok) {
-				const updated = attachmentsList.map((a) =>
+				attachmentsList = attachmentsList.map((a) =>
 					a.id === attachmentId ? { ...a, featured } : a
 				);
-				attachmentsList = updated;
-				// Keep the notes store in sync so the card reflects featured state
-				notes.update((list) =>
-					list.map((n) => (n.id === noteId ? { ...n, attachments: updated } : n))
-				);
 			}
 		} catch (err) {
 			console.error('Failed to toggle featured:', err);
@@ -320,11 +184,7 @@
 			await fetch(`/api/notes/${noteId}/attachments?attachmentId=${attachmentId}`, {
 				method: 'DELETE'
 			});
-			const updated = attachmentsList.filter((a) => a.id !== attachmentId);
-			attachmentsList = updated;
-			notes.update((list) =>
-				list.map((n) => (n.id === noteId ? { ...n, attachments: updated } : n))
-			);
+			attachmentsList = attachmentsList.filter((a) => a.id !== attachmentId);
 		} catch (err) {
 			console.error('Failed to remove attachment:', err);
 		}
@@ -332,14 +192,15 @@

 	let bgStyle = $state('');
 	$effect(() => {
-		bgStyle = `background-color: ${getNoteColor(color, getIsDarkMode())}`;
+		const colors = NOTE_COLORS[color];
+		bgStyle = `background-color: ${colors.bg}`;
 	});

-	// Close on backdrop tap/click. On close, a transparent shield stays in the DOM
-	// for 400ms to absorb the browser's delayed synthetic click that would otherwise
-	// pass through to NoteCards underneath (ghost click).
+	// Use pointer events to detect backdrop clicks. Unlike mouse events,
+	// pointer events are never synthetically re-dispatched from touch, so
+	// the tap that opened the editor on mobile cannot ghost-click the overlay.
+	// Both pointerdown and pointerup must target the overlay itself to close.
 	let pointerdownOnOverlay = false;
-	let closing = $state(false);

 	function handleOverlayPointerdown(e: PointerEvent) {
 		pointerdownOnOverlay = e.target === e.currentTarget;
@@ -350,37 +211,35 @@
 		pointerdownOnOverlay = false;
 	}

-	function dismissOverlay() {
-		closing = true;
-		setTimeout(() => onClose(), 400);
-	}
-
 	async function saveAndClose() {
-		clearTimeout(autoSaveTimer);
-		// Wait for any in-flight auto-save to finish
-		if (savingPromise) await savingPromise;
-
 		if (!title.trim() && !content.trim()) {
-			dismissOverlay();
+			onClose();
 			return;
 		}

-		// Final save if auto-save hasn't caught up yet
-		if (hasUnsavedChanges()) {
-			await performSave();
+		if (currentlyNew) {
+			await createNote({ title, content, color, checklistMode });
+		} else if (noteId) {
+			await updateNote(noteId, { title, content, color, checklistMode });
 		}
-		dismissOverlay();
+		onClose();
 	}

 	/** Auto-save a new note without closing, returns the new note ID */
 	async function autoSave(): Promise<string | null> {
 		if (!currentlyNew) return noteId;
-		clearTimeout(autoSaveTimer);
-		if (savingPromise) await savingPromise;
-		// For feature-triggered saves (image upload, share), use 'Untitled' fallback
-		if (!title.trim()) title = 'Untitled';
-		await performSave();
-		return noteId;
+		const created = await createNote({
+			title: title || 'Untitled',
+			content,
+			color,
+			checklistMode
+		});
+		if (created) {
+			noteId = created.id;
+			currentlyNew = false;
+			return created.id;
+		}
+		return null;
 	}

 	async function toggleImageUpload() {
@@ -408,45 +267,16 @@
 			requestAnimationFrame(() => textareaEl?.focus());
 		}
 	}
-
-	async function handleArchive() {
-		showOverflowMenu = false;
-		if (noteId) {
-			await archiveNote(noteId);
-			dismissOverlay();
-		}
-	}
-
-	async function handleTrash() {
-		showOverflowMenu = false;
-		if (noteId) {
-			await trashNote(noteId);
-			dismissOverlay();
-		}
-	}
-
-	function deleteCheckedItems() {
-		const items = parseChecklist(content).filter((i) => !i.checked);
-		content = serializeChecklist(items);
-		showOverflowMenu = false;
-	}
-
-	function uncheckAllItems() {
-		const items = parseChecklist(content).map((i) => ({ ...i, checked: false }));
-		content = serializeChecklist(items);
-		showOverflowMenu = false;
-	}
 </script>

 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="fixed inset-0 z-40 {closing ? '' : 'flex items-start justify-center overflow-y-auto bg-black/50 pt-20 pb-10 animate-[fade-in_150ms_ease-out]'}"
+	class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/50 pt-20 pb-10 animate-[fade-in_150ms_ease-out]"
 	onpointerdown={handleOverlayPointerdown}
 	onpointerup={handleOverlayPointerup}
 	onkeydown={handleKeydown}
 	data-testid="note-editor-overlay"
 >
-	{#if !closing}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="mx-4 flex w-full max-w-xl md:max-w-2xl flex-col overflow-hidden rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
@@ -528,7 +358,7 @@
 					<button
 						onclick={() => (showColorPicker = !showColorPicker)}
 						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-						use:tooltip={"Background color"}
+						title="Background color"
 						data-testid="color-picker-toggle"
 					>
 						<Palette class="h-5 w-5 text-[var(--text-muted)]" />
@@ -540,22 +370,51 @@
 					{/if}
 				</div>

+				<!-- Checklist mode toggle -->
+				<button
+					onclick={() => (checklistMode = !checklistMode)}
+					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+					title={checklistMode ? 'Switch to text' : 'Checklist mode'}
+					data-testid="checklist-toggle"
+				>
+					{#if checklistMode}
+						<Type class="h-5 w-5" />
+					{:else}
+						<SquareCheck class="h-5 w-5" />
+					{/if}
+				</button>
+
 				<!-- Image attachment toggle -->
 				<button
 					onclick={toggleImageUpload}
 					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-					use:tooltip={"Attachments"}
+					title="Image attachments"
 					data-testid="image-toggle"
 				>
 					<ImageIcon class="h-5 w-5 {showImageUpload ? 'text-[var(--primary)]' : ''}" />
 				</button>

-				<!-- Share button -->
+				<!-- Raw markdown mode toggle -->
+				<button
+					onclick={toggleMarkdownMode}
+					class="rounded-sm p-2 hover:bg-[var(--border)]/10 disabled:opacity-30 disabled:cursor-not-allowed"
+					title={rawMarkdownMode ? 'Rich text mode' : 'Markdown mode'}
+					disabled={checklistMode}
+					data-testid="markdown-toggle"
+				>
+					{#if rawMarkdownMode}
+						<FileText class="h-5 w-5" />
+					{:else}
+						<FileCode class="h-5 w-5" />
+					{/if}
+				</button>
+
+				<!-- Share button (owner only for new shares, all for viewing) -->
 				{#if isOwner}
 					<button
 						onclick={toggleShareDialog}
 						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-						use:tooltip={"Share"}
+						title="Share note"
 						data-testid="share-toggle"
 					>
 						{#if hasPublicLink}
@@ -567,33 +426,22 @@
 						{/if}
 					</button>
 				{:else if isShared}
-					<span class="flex items-center gap-1 rounded-sm p-2 text-[var(--text-muted)]" use:tooltip={"Shared note"}>
+					<span class="flex items-center gap-1 rounded-sm p-2 text-[var(--text-muted)]" title="Shared note">
 						<Users class="h-5 w-5" />
 					</span>
 				{/if}

-				<!-- Archive button (only for saved notes) -->
+				<!-- History button (only for saved notes) -->
 				{#if !currentlyNew}
 					<button
-						onclick={handleArchive}
+						onclick={toggleHistory}
 						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-						use:tooltip={"Archive"}
-						data-testid="archive-note-btn"
+						title="Version history"
+						data-testid="history-toggle"
 					>
-						<Archive class="h-5 w-5" />
+						<History class="h-5 w-5 {showHistory ? 'text-[var(--primary)]' : ''}" />
 					</button>
 				{/if}
-
-				<!-- Overflow menu trigger -->
-				<button
-					bind:this={overflowBtnEl}
-					onclick={() => (showOverflowMenu = !showOverflowMenu)}
-					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
-					use:tooltip={"More"}
-					data-testid="overflow-menu-btn"
-				>
-					<EllipsisVertical class="h-5 w-5" />
-				</button>
 			</div>

 			<button
@@ -605,98 +453,6 @@
 			</button>
 		</div>
 	</div>
-
-	<!-- Overflow menu dropdown (rendered outside the card to escape overflow-hidden) -->
-	{#if showOverflowMenu && overflowBtnEl}
-		{@const rect = overflowBtnEl.getBoundingClientRect()}
-		<div
-			bind:this={overflowMenuEl}
-			class="fixed z-50 w-max whitespace-nowrap rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] py-1 shadow-[var(--card-shadow)]"
-			style="bottom: {window.innerHeight - rect.top + 4}px; right: {window.innerWidth - rect.right}px;"
-			data-testid="overflow-menu"
-		>
-			<!-- Checklist mode toggle -->
-			<button
-				onclick={() => { checklistMode = !checklistMode; showOverflowMenu = false; }}
-				class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
-				data-testid="checklist-toggle"
-			>
-				{#if checklistMode}
-					<Type class="h-4 w-4" />
-					Switch to text
-				{:else}
-					<SquareCheck class="h-4 w-4" />
-					Checklist mode
-				{/if}
-			</button>
-
-			<!-- Markdown mode toggle (not available in checklist mode) -->
-			{#if !checklistMode}
-				<button
-					onclick={() => { toggleMarkdownMode(); showOverflowMenu = false; }}
-					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
-					data-testid="markdown-toggle"
-				>
-					{#if rawMarkdownMode}
-						<FileText class="h-4 w-4" />
-						Rich text mode
-					{:else}
-						<FileCode class="h-4 w-4" />
-						Markdown mode
-					{/if}
-				</button>
-			{/if}
-
-			<!-- History -->
-			{#if !currentlyNew}
-				<button
-					onclick={() => { toggleHistory(); showOverflowMenu = false; }}
-					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
-					data-testid="history-toggle"
-				>
-					<History class="h-4 w-4 {showHistory ? 'text-[var(--primary)]' : ''}" />
-					Version history
-				</button>
-			{/if}
-
-			<!-- Trash (only for saved notes) -->
-			{#if !currentlyNew}
-				<div class="my-1 border-t border-[var(--border-subtle)]"></div>
-				<button
-					onclick={handleTrash}
-					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--destructive)] hover:bg-[var(--border)]/10"
-					data-testid="trash-note-btn"
-				>
-					<Trash2 class="h-4 w-4" />
-					Move to trash
-				</button>
-			{/if}
-
-			<!-- Checklist-specific actions -->
-			{#if checklistMode}
-				<div class="my-1 border-t border-[var(--border-subtle)]"></div>
-				{#if hasDoneItems}
-					<button
-						onclick={deleteCheckedItems}
-						class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
-						data-testid="delete-checked-btn"
-					>
-						<Trash2 class="h-4 w-4" />
-						Delete checked
-					</button>
-				{/if}
-				<button
-					onclick={uncheckAllItems}
-					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--border)]/10"
-					data-testid="uncheck-all-btn"
-				>
-					<ListX class="h-4 w-4" />
-					Uncheck all
-				</button>
-			{/if}
-		</div>
-	{/if}
-	{/if}
 </div>

 {#if showShareDialog && noteId}
@@ -6,8 +6,6 @@
 	import { onMount } from 'svelte';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
 	import Plus from 'lucide-svelte/icons/plus';
-	import SquareCheck from 'lucide-svelte/icons/square-check';
-	import { tooltip } from '$lib/utils/tooltip.js';

 	interface Props {
 		filter: NoteFilter;
@@ -18,7 +16,6 @@

 	let editingNote: Note | null = $state(null);
 	let showNewNote = $state(false);
-	let newNoteChecklist = $state(false);

 	// Sync store with route props and reload notes when filter changes
 	$effect(() => {
@@ -35,7 +32,6 @@
 	function closeEditor() {
 		editingNote = null;
 		showNewNote = false;
-		newNoteChecklist = false;
 		history.replaceState(null, '', location.pathname);
 	}

@@ -59,24 +55,14 @@

 {#if filter === 'all' && !tag}
 	<div class="mx-auto mb-6 hidden max-w-xl md:block">
-		<div class="flex cursor-pointer items-center gap-0 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] transition-colors hover:border-[var(--primary)]">
-			<button
-				onclick={() => (showNewNote = true)}
-				class="flex flex-1 cursor-pointer items-center gap-3 px-4 py-3 text-left text-sm text-[var(--text-muted)] hover:text-[var(--primary)]"
-				data-testid="new-note-btn"
-			>
-				<Plus class="h-4 w-4" />
-				Add a crumb...
-			</button>
-			<button
-				onclick={() => { newNoteChecklist = true; showNewNote = true; }}
-				class="cursor-pointer rounded-sm p-3 text-[var(--text-muted)] hover:text-[var(--primary)]"
-				use:tooltip={"New checklist"}
-				data-testid="new-checklist-btn"
-			>
-				<SquareCheck class="h-4 w-4" />
-			</button>
-		</div>
+		<button
+			onclick={() => (showNewNote = true)}
+			class="flex w-full items-center gap-3 rounded-sm border border-dashed border-[var(--border-subtle)] bg-[var(--bg-surface)] px-4 py-3 text-left text-sm text-[var(--text-muted)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
+			data-testid="new-note-btn"
+		>
+			<Plus class="h-4 w-4" />
+			Add a crumb...
+		</button>
 	</div>
 	<button
 		onclick={() => (showNewNote = true)}
@@ -133,7 +119,7 @@
 {/if}

 {#if showNewNote}
-	<NoteEditor note={null} isNew={true} initialChecklistMode={newNoteChecklist} onClose={closeEditor} />
+	<NoteEditor note={null} isNew={true} onClose={closeEditor} />
 {/if}

 {#if editingNote}
@@ -43,23 +43,19 @@
 		try {
 			if (publicShareToken) {
 				const res = await fetch(`/api/notes/${noteId}/share`, { method: 'DELETE' });
-				if (!res.ok) {
-					showToast('Failed to remove share link', 'error');
-					return;
+				if (res.ok) {
+					publicShareToken = null;
+					onShareUpdate(null);
+					showToast('Public link removed', 'success');
 				}
-				publicShareToken = null;
-				onShareUpdate(null);
-				showToast('Public link removed', 'success');
 			} else {
 				const res = await fetch(`/api/notes/${noteId}/share`, { method: 'POST' });
-				if (!res.ok) {
-					showToast('Failed to create share link', 'error');
-					return;
+				if (res.ok) {
+					const data = await res.json();
+					publicShareToken = data.token;
+					onShareUpdate(data.token);
+					showToast('Public link created', 'success');
 				}
-				const data = await res.json();
-				publicShareToken = data.token;
-				onShareUpdate(data.token);
-				showToast('Public link created', 'success');
 			}
 		} catch {
 			showToast('Failed to update share link', 'error');
@@ -66,7 +66,7 @@

 	{#if showPopover}
 		<div
-			class="absolute right-0 top-full z-20 mt-1 min-w-[180px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
+			class="absolute right-0 bottom-full z-20 mb-1 min-w-[180px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
 			data-testid="sharing-popover"
 		>
 			{#if hasPublicLink}
@@ -3,7 +3,7 @@ import { createTestDb } from './db/test-helpers.js';
 import { users, sessions } from './db/schema.js';
 import { eq } from 'drizzle-orm';
 import * as argon2 from 'argon2';
-import { randomBytes, randomUUID } from 'crypto';
+import { randomBytes } from 'crypto';
 import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
 import type * as schema from './db/schema.js';

@@ -16,16 +16,16 @@ beforeEach(() => {

 describe('Auth - Password Hashing', () => {
 	it('should hash and verify a password correctly', async () => {
-		const password = randomUUID();
+		const password = 'mysecurepassword';
 		const hash = await argon2.hash(password);

 		expect(hash).not.toBe(password);
 		expect(await argon2.verify(hash, password)).toBe(true);
-		expect(await argon2.verify(hash, randomUUID())).toBe(false);
+		expect(await argon2.verify(hash, 'wrongpassword')).toBe(false);
 	});

 	it('should produce different hashes for the same password', async () => {
-		const password = randomUUID();
+		const password = 'mysecurepassword';
 		const hash1 = await argon2.hash(password);
 		const hash2 = await argon2.hash(password);

@@ -37,7 +37,7 @@ describe('Auth - Password Hashing', () => {

 describe('Auth - User Setup', () => {
 	it('should create a user with hashed password', async () => {
-		const password = randomUUID();
+		const password = 'testpassword123';
 		const hash = await argon2.hash(password);

 		await db.insert(users).values({
@@ -238,20 +238,21 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote

 	if (input.title !== undefined) { sharedUpdates.title = input.title; hasSharedUpdates = true; }
 	if (input.content !== undefined) {
-		// 3-way merge to preserve concurrent edits from other users.
-		// Only attempt merge when there's a concurrent edit: the client's
-		// baseVersion is behind the current version, meaning someone else
-		// saved between the client's load and this save.
-		const hasConcurrentEdit = input.baseVersion !== undefined
-			&& input.baseVersion < existing.version;
-
-		if (hasConcurrentEdit && input.content !== existing.content) {
-			const baseSnapshot = db.select({ content: noteVersions.content })
-				.from(noteVersions)
-				.where(and(eq(noteVersions.noteId, id), lte(noteVersions.version, input.baseVersion!)))
-				.orderBy(desc(noteVersions.version))
-				.limit(1)
-				.get();
+		// 3-way merge to preserve concurrent edits from other users
+		if (input.content !== existing.content) {
+			const baseSnapshot = input.baseVersion !== undefined
+				? db.select({ content: noteVersions.content })
+					.from(noteVersions)
+					.where(and(eq(noteVersions.noteId, id), lte(noteVersions.version, input.baseVersion)))
+					.orderBy(desc(noteVersions.version))
+					.limit(1)
+					.get()
+				: db.select({ content: noteVersions.content })
+					.from(noteVersions)
+					.where(eq(noteVersions.noteId, id))
+					.orderBy(desc(noteVersions.version))
+					.limit(1)
+					.get();

 			if (baseSnapshot && baseSnapshot.content !== existing.content) {
 				sharedUpdates.content = mergeContent(baseSnapshot.content, input.content, existing.content);
@@ -1,99 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mergeNotesByVersion } from './notes.js';
-import type { Note } from '$lib/types/index.js';
-
-function makeNote(overrides: Partial<Note> = {}): Note {
-	return {
-		id: 'note-1',
-		title: 'Test',
-		content: '- [ ] Item',
-		color: 'default',
-		pinned: false,
-		archived: false,
-		trashed: false,
-		trashedAt: null,
-		checklistMode: true,
-		sortOrder: 0,
-		createdAt: new Date(),
-		updatedAt: new Date(),
-		version: 1,
-		tags: [],
-		attachments: [],
-		collaborators: [],
-		isOwner: true,
-		isShared: false,
-		...overrides
-	};
-}
-
-describe('mergeNotesByVersion', () => {
-	it('keeps the local note when it has a higher version than the incoming note', () => {
-		const local = makeNote({ id: 'n1', version: 3, content: '- [x] Checked' });
-		const incoming = makeNote({ id: 'n1', version: 2, content: '- [ ] Unchecked' });
-
-		const result = mergeNotesByVersion([local], [incoming]);
-
-		expect(result).toHaveLength(1);
-		expect(result[0].content).toBe('- [x] Checked');
-		expect(result[0].version).toBe(3);
-	});
-
-	it('uses the incoming note when it has a higher or equal version', () => {
-		const local = makeNote({ id: 'n1', version: 2, content: '- [ ] Old' });
-		const incoming = makeNote({ id: 'n1', version: 3, content: '- [x] New' });
-
-		const result = mergeNotesByVersion([local], [incoming]);
-
-		expect(result).toHaveLength(1);
-		expect(result[0].content).toBe('- [x] New');
-		expect(result[0].version).toBe(3);
-	});
-
-	it('uses the incoming note when versions are equal', () => {
-		const local = makeNote({ id: 'n1', version: 2, content: 'local' });
-		const incoming = makeNote({ id: 'n1', version: 2, content: 'incoming' });
-
-		const result = mergeNotesByVersion([local], [incoming]);
-
-		expect(result[0].content).toBe('incoming');
-	});
-
-	it('handles notes not present in the local store', () => {
-		const incoming = makeNote({ id: 'n2', version: 1 });
-
-		const result = mergeNotesByVersion([], [incoming]);
-
-		expect(result).toHaveLength(1);
-		expect(result[0].id).toBe('n2');
-	});
-
-	it('preserves local-only notes not present in the incoming data', () => {
-		const localOnly = makeNote({ id: 'n1', version: 1, content: 'just created' });
-		const serverNote = makeNote({ id: 'n2', version: 1, content: 'from server' });
-
-		const result = mergeNotesByVersion([localOnly], [serverNote]);
-
-		expect(result).toHaveLength(2);
-		expect(result.find((n) => n.id === 'n1')?.content).toBe('just created');
-		expect(result.find((n) => n.id === 'n2')?.content).toBe('from server');
-	});
-
-	it('preserves multiple notes correctly during a race condition', () => {
-		const localNotes = [
-			makeNote({ id: 'n1', version: 5, content: '- [x] Just saved' }),
-			makeNote({ id: 'n2', version: 1, content: 'unchanged' })
-		];
-		const incomingNotes = [
-			makeNote({ id: 'n1', version: 4, content: '- [ ] Stale from server' }),
-			makeNote({ id: 'n2', version: 2, content: 'updated on server' })
-		];
-
-		const result = mergeNotesByVersion(localNotes, incomingNotes);
-
-		expect(result).toHaveLength(2);
-		// n1: local version 5 > incoming version 4 → keep local
-		expect(result[0].content).toBe('- [x] Just saved');
-		// n2: local version 1 < incoming version 2 → use incoming
-		expect(result[1].content).toBe('updated on server');
-	});
-});
@@ -53,35 +53,12 @@ function isNetworkError(err: unknown): boolean {
 	return err instanceof TypeError;
 }

-/**
- * Merge incoming notes with current store, keeping the higher-version note
- * when a conflict exists. This prevents a stale loadNotes response from
- * overwriting a just-saved note (race between sync interval and updateNote).
- */
-export function mergeNotesByVersion(current: Note[], incoming: Note[]): Note[] {
-	const currentMap = new Map(current.map((n) => [n.id, n]));
-	const incomingIds = new Set<string>();
-	const merged = incoming.map((incomingNote) => {
-		incomingIds.add(incomingNote.id);
-		const local = currentMap.get(incomingNote.id);
-		if (local && local.version > incomingNote.version) return local;
-		return incomingNote;
-	});
-	// Preserve local-only notes (e.g. just created, not yet in server/IDB response)
-	for (const local of current) {
-		if (!incomingIds.has(local.id)) {
-			merged.push(local);
-		}
-	}
-	return merged;
-}
-
 export async function loadNotes(filter: NoteFilter = 'all') {
 	// Load from IDB first for instant display
 	try {
 		const cached = await getAllNotes();
 		if (cached.length > 0) {
-			notes.update((current) => current.length > 0 ? mergeNotesByVersion(current, cached) : cached);
+			notes.set(cached);
 		}
 	} catch {
 		// IDB unavailable — continue with server fetch
@@ -94,7 +71,7 @@ export async function loadNotes(filter: NoteFilter = 'all') {
 		const res = await fetch(`/api/notes?filter=${filter}`);
 		if (res.ok) {
 			const data: Note[] = await res.json();
-			notes.update((current) => mergeNotesByVersion(current, data));
+			notes.set(data);
 			currentFilter.set(filter);

 			// Update IDB with server state
@@ -4,7 +4,6 @@ import { DEFAULT_PREFERENCES, BOOLEAN_PREF_KEYS } from '$lib/types/preferences.j
 describe('preferences defaults', () => {
 	it('should have correct default values', () => {
 		expect(DEFAULT_PREFERENCES).toEqual({
-			theme: 'system',
 			defaultNoteMode: 'richtext',
 			defaultNoteColor: 'default',
 			hideFooter: false,
@@ -1,7 +1,6 @@
 import type { NoteColor } from './index.js';

 export interface UserPreferences {
-	theme: 'system' | 'light' | 'dark';
 	defaultNoteMode: 'richtext' | 'markdown';
 	defaultNoteColor: NoteColor;
 	hideFooter: boolean;
@@ -12,7 +11,6 @@ export interface UserPreferences {
 }

 export const DEFAULT_PREFERENCES: UserPreferences = {
-	theme: 'system',
 	defaultNoteMode: 'richtext',
 	defaultNoteColor: 'default',
 	hideFooter: false,
@@ -1,326 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem, linkifyText, unlinkifyHtml, type ChecklistItem } from '$lib/utils/checklist.js';
-
-describe('parseChecklist', () => {
-	it('parses flat checklist items', () => {
-		const items = parseChecklist('- [ ] Milk\n- [x] Eggs');
-		expect(items).toHaveLength(2);
-		expect(items[0]).toMatchObject({ text: 'Milk', checked: false, parentId: null });
-		expect(items[1]).toMatchObject({ text: 'Eggs', checked: true, parentId: null });
-	});
-
-	it('parses nested children with 2-space prefix', () => {
-		const items = parseChecklist('- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs');
-		expect(items).toHaveLength(3);
-		expect(items[0]).toMatchObject({ text: 'Groceries', checked: false, parentId: null });
-		expect(items[1]).toMatchObject({ text: 'Milk', checked: false, parentId: items[0].id });
-		expect(items[2]).toMatchObject({ text: 'Eggs', checked: true, parentId: items[0].id });
-	});
-
-	it('treats orphaned children as top-level', () => {
-		const items = parseChecklist('  - [ ] Orphan\n- [ ] Parent');
-		expect(items[0]).toMatchObject({ text: 'Orphan', parentId: null });
-	});
-
-	it('returns one empty item for blank content', () => {
-		const items = parseChecklist('');
-		expect(items).toHaveLength(1);
-		expect(items[0]).toMatchObject({ text: '', checked: false, parentId: null });
-	});
-
-	it('handles mixed top-level and nested items', () => {
-		const content = '- [ ] A\n  - [ ] A1\n  - [ ] A2\n- [ ] B\n  - [x] B1';
-		const items = parseChecklist(content);
-		expect(items).toHaveLength(5);
-		expect(items[1].parentId).toBe(items[0].id);
-		expect(items[2].parentId).toBe(items[0].id);
-		expect(items[4].parentId).toBe(items[3].id);
-	});
-});
-
-describe('serializeChecklist', () => {
-	it('serializes flat items', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'Milk', checked: false, parentId: null },
-			{ id: '2', text: 'Eggs', checked: true, parentId: null }
-		];
-		expect(serializeChecklist(items)).toBe('- [ ] Milk\n- [x] Eggs');
-	});
-
-	it('serializes nested items with 2-space prefix', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'Groceries', checked: false, parentId: null },
-			{ id: '2', text: 'Milk', checked: false, parentId: '1' },
-			{ id: '3', text: 'Eggs', checked: true, parentId: '1' }
-		];
-		expect(serializeChecklist(items)).toBe('- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs');
-	});
-
-	it('groups children under parents regardless of array order', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '3', text: 'B', checked: false, parentId: null },
-			{ id: '2', text: 'A1', checked: false, parentId: '1' }
-		];
-		const result = serializeChecklist(items);
-		expect(result).toBe('- [ ] A\n  - [ ] A1\n- [ ] B');
-	});
-
-	it('round-trips parse then serialize', () => {
-		const original = '- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs\n- [ ] Clean';
-		const items = parseChecklist(original);
-		expect(serializeChecklist(items)).toBe(original);
-	});
-});
-
-describe('toggleItemWithCascade', () => {
-	it('checking a parent checks all children', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'Parent', checked: false, parentId: null },
-			{ id: '2', text: 'Child A', checked: false, parentId: '1' },
-			{ id: '3', text: 'Child B', checked: false, parentId: '1' }
-		];
-		const result = toggleItemWithCascade('1', items);
-		expect(result.every((i) => i.checked)).toBe(true);
-	});
-
-	it('unchecking a parent unchecks all children', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'Parent', checked: true, parentId: null },
-			{ id: '2', text: 'Child A', checked: true, parentId: '1' },
-			{ id: '3', text: 'Child B', checked: true, parentId: '1' }
-		];
-		const result = toggleItemWithCascade('1', items);
-		expect(result.every((i) => !i.checked)).toBe(true);
-	});
-
-	it('checking a child does not affect parent', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'Parent', checked: false, parentId: null },
-			{ id: '2', text: 'Child', checked: false, parentId: '1' }
-		];
-		const result = toggleItemWithCascade('2', items);
-		expect(result.find((i) => i.id === '1')!.checked).toBe(false);
-		expect(result.find((i) => i.id === '2')!.checked).toBe(true);
-	});
-
-	it('unchecking a child with deleted parent orphans it', () => {
-		const items: ChecklistItem[] = [
-			{ id: '2', text: 'Orphan', checked: true, parentId: 'deleted-id' }
-		];
-		const result = toggleItemWithCascade('2', items);
-		expect(result[0].checked).toBe(false);
-		expect(result[0].parentId).toBeNull();
-	});
-
-	it('unchecking a child repositions it after its parent and siblings', () => {
-		// Simulates: parent + 2 children, one child checked (at end of array as done item)
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'Parent', checked: false, parentId: null },
-			{ id: '3', text: 'Child B', checked: false, parentId: '1' },
-			{ id: '4', text: 'Other', checked: false, parentId: null },
-			{ id: '2', text: 'Child A', checked: true, parentId: '1' }  // done, at end
-		];
-		const result = toggleItemWithCascade('2', items);
-		// Child A should be repositioned after Child B (last sibling), not stay at end
-		const ids = result.map(i => i.id);
-		expect(ids).toEqual(['1', '3', '2', '4']);
-		expect(result.find(i => i.id === '2')!.checked).toBe(false);
-	});
-});
-
-describe('indentItem', () => {
-	it('sets parentId to nearest preceding top-level item', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '2', text: 'B', checked: false, parentId: null }
-		];
-		const active = items.filter(i => !i.checked);
-		const result = indentItem('2', items, active);
-		expect(result.find((i) => i.id === '2')!.parentId).toBe('1');
-	});
-
-	it('no-op if already a child', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '2', text: 'B', checked: false, parentId: '1' }
-		];
-		const active = items.filter(i => !i.checked);
-		const result = indentItem('2', items, active);
-		expect(result).toEqual(items);
-	});
-
-	it('no-op if first item (no parent above)', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null }
-		];
-		const active = items.filter(i => !i.checked);
-		const result = indentItem('1', items, active);
-		expect(result[0].parentId).toBeNull();
-	});
-
-	it('reparents children to grandparent when indenting a parent', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '2', text: 'B', checked: false, parentId: null },
-			{ id: '3', text: 'C', checked: false, parentId: '2' },
-			{ id: '4', text: 'D', checked: false, parentId: '2' }
-		];
-		const active = items.filter(i => !i.checked);
-		const result = indentItem('2', items, active);
-		expect(result.find((i) => i.id === '2')!.parentId).toBe('1');
-		expect(result.find((i) => i.id === '3')!.parentId).toBe('1');
-		expect(result.find((i) => i.id === '4')!.parentId).toBe('1');
-	});
-});
-
-describe('outdentItem', () => {
-	it('sets parentId to null', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '2', text: 'B', checked: false, parentId: '1' }
-		];
-		const result = outdentItem('2', items);
-		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
-	});
-
-	it('no-op if already top-level', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null }
-		];
-		const result = outdentItem('1', items);
-		expect(result[0].parentId).toBeNull();
-	});
-
-	it('adopts consecutive siblings below with same parentId', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '2', text: 'B', checked: false, parentId: '1' },
-			{ id: '3', text: 'C', checked: false, parentId: '1' },
-			{ id: '4', text: 'D', checked: false, parentId: '1' },
-			{ id: '5', text: 'E', checked: false, parentId: null }
-		];
-		const result = outdentItem('2', items);
-		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
-		expect(result.find((i) => i.id === '3')!.parentId).toBe('2');
-		expect(result.find((i) => i.id === '4')!.parentId).toBe('2');
-		expect(result.find((i) => i.id === '5')!.parentId).toBeNull();
-	});
-
-	it('stops adoption at first non-sibling', () => {
-		const items: ChecklistItem[] = [
-			{ id: '1', text: 'A', checked: false, parentId: null },
-			{ id: '2', text: 'B', checked: false, parentId: '1' },
-			{ id: '5', text: 'E', checked: false, parentId: null },
-			{ id: '3', text: 'C', checked: false, parentId: '1' }
-		];
-		const result = outdentItem('2', items);
-		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
-		expect(result.find((i) => i.id === '5')!.parentId).toBeNull();
-		expect(result.find((i) => i.id === '3')!.parentId).toBe('1');
-	});
-});
-
-describe('linkifyText', () => {
-	it('converts https URLs to anchor tags', () => {
-		expect(linkifyText('visit https://example.com today')).toBe(
-			'visit <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">https://example.com</a> today'
-		);
-	});
-
-	it('converts http URLs to anchor tags', () => {
-		expect(linkifyText('go to http://example.com')).toBe(
-			'go to <a href="http://example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">http://example.com</a>'
-		);
-	});
-
-	it('converts bare www URLs with https href', () => {
-		expect(linkifyText('check www.example.com')).toBe(
-			'check <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">www.example.com</a>'
-		);
-	});
-
-	it('handles multiple URLs in one string', () => {
-		const result = linkifyText('see https://a.com and https://b.com');
-		expect(result).toContain('href="https://a.com"');
-		expect(result).toContain('href="https://b.com"');
-	});
-
-	it('returns plain text unchanged when no URLs present', () => {
-		expect(linkifyText('just some text')).toBe('just some text');
-	});
-
-	it('HTML-escapes user content to prevent XSS', () => {
-		expect(linkifyText('<script>alert("xss")</script>')).toBe(
-			'&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
-		);
-	});
-
-	it('HTML-escapes text around URLs', () => {
-		expect(linkifyText('<b>bold</b> https://example.com')).toContain('&lt;b&gt;bold&lt;/b&gt;');
-		expect(linkifyText('<b>bold</b> https://example.com')).toContain('href="https://example.com"');
-	});
-
-	it('handles URL at start of string', () => {
-		expect(linkifyText('https://example.com is great')).toContain('href="https://example.com"');
-	});
-
-	it('handles URL at end of string', () => {
-		expect(linkifyText('visit https://example.com')).toContain('href="https://example.com"');
-	});
-
-	it('does not linkify partial matches without protocol or www', () => {
-		expect(linkifyText('example.com is not linked')).toBe('example.com is not linked');
-	});
-
-	it('handles URLs with paths and query strings', () => {
-		const url = 'https://example.com/path?q=1&b=2';
-		const result = linkifyText(url);
-		expect(result).toContain('href="https://example.com/path?q=1&amp;b=2"');
-	});
-
-	it('strips trailing punctuation from URLs', () => {
-		expect(linkifyText('see https://example.com.')).toBe(
-			'see <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="checklist-link">https://example.com</a>.'
-		);
-	});
-
-	it('returns empty string for empty input', () => {
-		expect(linkifyText('')).toBe('');
-	});
-});
-
-describe('unlinkifyHtml', () => {
-	it('strips anchor tags and returns text content', () => {
-		expect(unlinkifyHtml('visit <a href="https://example.com">https://example.com</a> today'))
-			.toBe('visit https://example.com today');
-	});
-
-	it('returns plain text unchanged', () => {
-		expect(unlinkifyHtml('just text')).toBe('just text');
-	});
-
-	it('handles multiple anchor tags', () => {
-		expect(unlinkifyHtml('<a href="https://a.com">https://a.com</a> and <a href="https://b.com">https://b.com</a>'))
-			.toBe('https://a.com and https://b.com');
-	});
-
-	it('returns empty string for empty input', () => {
-		expect(unlinkifyHtml('')).toBe('');
-	});
-
-	it('handles div and br tags from contenteditable', () => {
-		expect(unlinkifyHtml('line1<br>line2')).toBe('line1line2');
-	});
-
-	it('decodes HTML entities after stripping tags', () => {
-		expect(unlinkifyHtml('Tom &amp; Jerry')).toBe('Tom & Jerry');
-		expect(unlinkifyHtml('&lt;b&gt;bold&lt;/b&gt;')).toBe('<b>bold</b>');
-		expect(unlinkifyHtml('say &quot;hello&quot;')).toBe('say "hello"');
-	});
-
-	it('converts &nbsp; from contenteditable to regular spaces', () => {
-		expect(unlinkifyHtml('hello&nbsp;world')).toBe('hello world');
-		expect(unlinkifyHtml('a&nbsp;&nbsp;b')).toBe('a  b');
-	});
-});
@@ -1,199 +0,0 @@
-export interface ChecklistItem {
-	id: string;
-	text: string;
-	checked: boolean;
-	parentId: string | null;
-}
-
-export function generateId(): string {
-	return crypto.randomUUID();
-}
-
-export function isChild(item: ChecklistItem): boolean {
-	return item.parentId !== null;
-}
-
-export function getChildren(parentId: string, items: ChecklistItem[]): ChecklistItem[] {
-	return items.filter((i) => i.parentId === parentId);
-}
-
-export function getParent(item: ChecklistItem, items: ChecklistItem[]): ChecklistItem | undefined {
-	return item.parentId ? items.find((i) => i.id === item.parentId) : undefined;
-}
-
-export function toggleItemWithCascade(id: string, items: ChecklistItem[]): ChecklistItem[] {
-	const target = items.find((i) => i.id === id)!;
-	const newChecked = !target.checked;
-
-	let result = items.map((item) => {
-		if (item.id === id) return { ...item, checked: newChecked };
-		if (item.parentId === id) return { ...item, checked: newChecked };
-		return item;
-	});
-
-	// When unchecking a child: reposition it after its parent/siblings in the array
-	// (otherwise it stays at the end of the array where done items live)
-	if (!newChecked && target.parentId) {
-		const parentExists = result.some((i) => i.id === target.parentId);
-		if (!parentExists) {
-			// Parent deleted — orphan it
-			result = result.map((i) => (i.id === id ? { ...i, parentId: null } : i));
-		} else {
-			// Remove the item from its current position
-			const uncheckedItem = result.find((i) => i.id === id)!;
-			result = result.filter((i) => i.id !== id);
-			// Find the last sibling or the parent, insert after it
-			let insertAfter = -1;
-			for (let i = 0; i < result.length; i++) {
-				if (result[i].id === target.parentId || result[i].parentId === target.parentId) {
-					insertAfter = i;
-				}
-			}
-			if (insertAfter >= 0) {
-				result.splice(insertAfter + 1, 0, uncheckedItem);
-			} else {
-				result.push(uncheckedItem);
-			}
-		}
-	}
-
-	return result;
-}
-
-export function indentItem(id: string, items: ChecklistItem[], activeItems: ChecklistItem[]): ChecklistItem[] {
-	const item = items.find((i) => i.id === id);
-	if (!item || item.parentId !== null) return items;
-
-	const activeIndex = activeItems.findIndex((i) => i.id === id);
-	let newParentId: string | null = null;
-	for (let i = activeIndex - 1; i >= 0; i--) {
-		if (activeItems[i].parentId === null) {
-			newParentId = activeItems[i].id;
-			break;
-		}
-	}
-	if (!newParentId) return items;
-
-	return items.map((i) => {
-		if (i.id === id) return { ...i, parentId: newParentId };
-		if (i.parentId === id) return { ...i, parentId: newParentId };
-		return i;
-	});
-}
-
-export function outdentItem(id: string, items: ChecklistItem[]): ChecklistItem[] {
-	const index = items.findIndex((i) => i.id === id);
-	const item = items[index];
-	if (!item || item.parentId === null) return items;
-
-	const originalParentId = item.parentId;
-
-	const adoptees: string[] = [];
-	for (let i = index + 1; i < items.length; i++) {
-		if (items[i].parentId === originalParentId) {
-			adoptees.push(items[i].id);
-		} else {
-			break;
-		}
-	}
-
-	return items.map((i) => {
-		if (i.id === id) return { ...i, parentId: null };
-		if (adoptees.includes(i.id)) return { ...i, parentId: id };
-		return i;
-	});
-}
-
-export function parseChecklist(text: string): ChecklistItem[] {
-	if (!text.trim()) return [{ id: generateId(), text: '', checked: false, parentId: null }];
-
-	let lastTopLevelId: string | null = null;
-	return text.split('\n').map((line) => {
-		if (line.startsWith('  - [x] ')) {
-			return { id: generateId(), text: line.slice(8), checked: true, parentId: lastTopLevelId };
-		}
-		if (line.startsWith('  - [ ] ')) {
-			return { id: generateId(), text: line.slice(8), checked: false, parentId: lastTopLevelId };
-		}
-		const item: ChecklistItem = { id: generateId(), text: '', checked: false, parentId: null };
-		if (line.startsWith('- [x] ')) {
-			item.text = line.slice(6);
-			item.checked = true;
-		} else if (line.startsWith('- [ ] ')) {
-			item.text = line.slice(6);
-		} else {
-			item.text = line;
-		}
-		lastTopLevelId = item.id;
-		return item;
-	});
-}
-
-export function serializeChecklist(items: ChecklistItem[]): string {
-	const topLevel = items.filter((i) => i.parentId === null);
-	const childMap = new Map<string, ChecklistItem[]>();
-	for (const item of items) {
-		if (item.parentId) {
-			const siblings = childMap.get(item.parentId) ?? [];
-			siblings.push(item);
-			childMap.set(item.parentId, siblings);
-		}
-	}
-
-	const lines: string[] = [];
-	for (const parent of topLevel) {
-		lines.push(`- [${parent.checked ? 'x' : ' '}] ${parent.text}`);
-		const children = childMap.get(parent.id) ?? [];
-		for (const child of children) {
-			lines.push(`  - [${child.checked ? 'x' : ' '}] ${child.text}`);
-		}
-	}
-	return lines.join('\n');
-}
-
-function escapeHtml(text: string): string {
-	return text
-		.replace(/&/g, '&amp;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/"/g, '&quot;');
-}
-
-const URL_REGEX = /(?:https?:\/\/|www\.)[^\s<]+[^\s<.,;:!?)'"}\]]/g;
-
-export function linkifyText(text: string): string {
-	if (!text) return '';
-
-	const matches: { index: number; match: string; href: string }[] = [];
-	let m: RegExpExecArray | null;
-	const regex = new RegExp(URL_REGEX.source, 'g');
-
-	while ((m = regex.exec(text)) !== null) {
-		const match = m[0];
-		const href = match.startsWith('www.') ? `https://${match}` : match;
-		matches.push({ index: m.index, match, href });
-	}
-
-	if (matches.length === 0) return escapeHtml(text);
-
-	let result = '';
-	let lastIndex = 0;
-	for (const { index, match, href } of matches) {
-		result += escapeHtml(text.slice(lastIndex, index));
-		result += `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="checklist-link">${escapeHtml(match)}</a>`;
-		lastIndex = index + match.length;
-	}
-	result += escapeHtml(text.slice(lastIndex));
-	return result;
-}
-
-export function unlinkifyHtml(html: string): string {
-	if (!html) return '';
-	return html
-		.replace(/<[^>]*>/g, '')
-		.replace(/&nbsp;/g, ' ')
-		.replace(/&amp;/g, '&')
-		.replace(/&lt;/g, '<')
-		.replace(/&gt;/g, '>')
-		.replace(/&quot;/g, '"');
-}
@@ -1,25 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { getNoteColor, NOTE_COLORS, NOTE_COLORS_DARK } from '$lib/utils/colors.js';
-
-describe('getNoteColor', () => {
-	it('returns light color when isDark is false', () => {
-		expect(getNoteColor('default', false)).toBe('#faf5eb');
-		expect(getNoteColor('coral', false)).toBe('#faafa8');
-	});
-
-	it('returns dark color when isDark is true', () => {
-		expect(getNoteColor('default', true)).toBe('#2a2520');
-		expect(getNoteColor('coral', true)).toBe('#4a2522');
-	});
-
-	it('returns default color for unknown color name', () => {
-		expect(getNoteColor('unknown' as any, false)).toBe('#faf5eb');
-		expect(getNoteColor('unknown' as any, true)).toBe('#2a2520');
-	});
-
-	it('has matching keys in light and dark color maps', () => {
-		const lightKeys = Object.keys(NOTE_COLORS).sort();
-		const darkKeys = Object.keys(NOTE_COLORS_DARK).sort();
-		expect(lightKeys).toEqual(darkKeys);
-	});
-});
@@ -15,26 +15,6 @@ export const NOTE_COLORS: Record<NoteColor, { bg: string; label: string }> = {
 	chalk: { bg: '#efeff1', label: 'Chalk' }
 };

-export const NOTE_COLORS_DARK: Record<NoteColor, { bg: string; label: string }> = {
-	default: { bg: '#2a2520', label: 'Default' },
-	coral: { bg: '#4a2522', label: 'Coral' },
-	peach: { bg: '#4a3020', label: 'Peach' },
-	sand: { bg: '#3a3520', label: 'Sand' },
-	mint: { bg: '#2a3a22', label: 'Mint' },
-	sage: { bg: '#223a32', label: 'Sage' },
-	fog: { bg: '#222e3a', label: 'Fog' },
-	storm: { bg: '#1e2a35', label: 'Storm' },
-	dusk: { bg: '#352540', label: 'Dusk' },
-	blossom: { bg: '#3a2830', label: 'Blossom' },
-	clay: { bg: '#302e28', label: 'Clay' },
-	chalk: { bg: '#2e2e30', label: 'Chalk' }
-};
-
-export function getNoteColor(color: NoteColor, isDark: boolean): string {
-	const map = isDark ? NOTE_COLORS_DARK : NOTE_COLORS;
-	return (map[color] ?? map.default).bg;
-}
-
 export const COLOR_OPTIONS = Object.entries(NOTE_COLORS).map(([value, { label }]) => ({
 	value: value as NoteColor,
 	label
@@ -1,42 +0,0 @@
-import { browser } from '$app/environment';
-
-const LIGHT_THEME_COLOR = '#f0e6d3';
-const DARK_THEME_COLOR = '#1a1715';
-
-let darkMode = $state(false);
-
-export function getIsDarkMode(): boolean {
-	return darkMode;
-}
-
-export function applyTheme(theme: 'system' | 'light' | 'dark'): void {
-	if (!browser) return;
-
-	// Validate input
-	if (theme !== 'system' && theme !== 'light' && theme !== 'dark') {
-		theme = 'system';
-	}
-
-	// Resolve system preference
-	let resolved = theme;
-	if (theme === 'system') {
-		const prefersDark =
-			typeof window.matchMedia === 'function' &&
-			window.matchMedia('(prefers-color-scheme: dark)').matches;
-		resolved = prefersDark ? 'dark' : 'light';
-	}
-
-	const isDark = resolved === 'dark';
-	darkMode = isDark;
-
-	if (isDark) {
-		document.documentElement.setAttribute('data-theme', 'dark');
-	} else {
-		document.documentElement.removeAttribute('data-theme');
-	}
-
-	const meta = document.querySelector('meta[name="theme-color"]');
-	if (meta) {
-		meta.setAttribute('content', isDark ? DARK_THEME_COLOR : LIGHT_THEME_COLOR);
-	}
-}
@@ -1,70 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-
-// Mock $app/environment
-vi.mock('$app/environment', () => ({ browser: true }));
-
-describe('applyTheme', () => {
-	let applyTheme: (theme: 'system' | 'light' | 'dark') => void;
-
-	beforeEach(async () => {
-		// Reset DOM
-		document.documentElement.removeAttribute('data-theme');
-		const meta = document.querySelector('meta[name="theme-color"]');
-		if (meta) meta.remove();
-		const metaEl = document.createElement('meta');
-		metaEl.setAttribute('name', 'theme-color');
-		metaEl.setAttribute('content', '#f0e6d3');
-		document.head.appendChild(metaEl);
-
-		// Reset module state
-		vi.resetModules();
-		const mod = await import('$lib/utils/theme.svelte.js');
-		applyTheme = mod.applyTheme;
-	});
-
-	it('sets data-theme="dark" for dark mode', () => {
-		applyTheme('dark');
-		expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-	});
-
-	it('removes data-theme for light mode', () => {
-		document.documentElement.setAttribute('data-theme', 'dark');
-		applyTheme('light');
-		expect(document.documentElement.hasAttribute('data-theme')).toBe(false);
-	});
-
-	it('updates meta theme-color for dark mode', () => {
-		applyTheme('dark');
-		const meta = document.querySelector('meta[name="theme-color"]');
-		expect(meta?.getAttribute('content')).toBe('#1a1715');
-	});
-
-	it('updates meta theme-color for light mode', () => {
-		applyTheme('dark');
-		applyTheme('light');
-		const meta = document.querySelector('meta[name="theme-color"]');
-		expect(meta?.getAttribute('content')).toBe('#f0e6d3');
-	});
-
-	it('falls back to system for unknown values', () => {
-		// matchMedia returns false by default in jsdom → resolves to light
-		applyTheme('invalid' as 'system' | 'light' | 'dark');
-		expect(document.documentElement.hasAttribute('data-theme')).toBe(false);
-	});
-
-	it('resolves system preference to dark when prefers-color-scheme is dark', () => {
-		Object.defineProperty(window, 'matchMedia', {
-			writable: true,
-			value: vi.fn().mockImplementation((query: string) => ({
-				matches: query === '(prefers-color-scheme: dark)',
-				media: query,
-				addEventListener: vi.fn(),
-				removeEventListener: vi.fn(),
-				dispatchEvent: vi.fn()
-			}))
-		});
-		applyTheme('system');
-		expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-	});
-});
@@ -1,83 +0,0 @@
-/**
- * Custom tooltip action — drop-in replacement for title attributes.
- * Usage: <button use:tooltip={"Label"}>
- * Or with options: <button use:tooltip={{ text: "Label", position: "bottom" }}>
- */
-
-export type TooltipPosition = 'top' | 'bottom';
-
-interface TooltipOptions {
-	text: string;
-	position?: TooltipPosition;
-}
-
-function parseOptions(value: string | TooltipOptions): { text: string; position: TooltipPosition } {
-	if (typeof value === 'string') return { text: value, position: 'top' };
-	return { text: value.text, position: value.position ?? 'top' };
-}
-
-export function tooltip(node: HTMLElement, value: string | TooltipOptions) {
-	let opts = parseOptions(value);
-	let el: HTMLDivElement | null = null;
-	let timeout: ReturnType<typeof setTimeout> | undefined;
-
-	function show() {
-		timeout = setTimeout(() => {
-			if (!opts.text) return;
-			el = document.createElement('div');
-			el.className = 'tooltip-popup';
-			el.textContent = opts.text;
-			document.body.appendChild(el);
-			position();
-		}, 400);
-	}
-
-	function position() {
-		if (!el) return;
-		const rect = node.getBoundingClientRect();
-		const tipRect = el.getBoundingClientRect();
-
-		let top: number;
-		if (opts.position === 'bottom') {
-			top = rect.bottom + 6;
-		} else {
-			top = rect.top - tipRect.height - 6;
-		}
-
-		let left = rect.left + rect.width / 2 - tipRect.width / 2;
-		// Clamp to viewport
-		left = Math.max(8, Math.min(left, window.innerWidth - tipRect.width - 8));
-
-		el.style.top = `${top}px`;
-		el.style.left = `${left}px`;
-		el.classList.add('tooltip-visible');
-	}
-
-	function hide() {
-		clearTimeout(timeout);
-		if (el) {
-			el.remove();
-			el = null;
-		}
-	}
-
-	node.addEventListener('mouseenter', show);
-	node.addEventListener('mouseleave', hide);
-	node.addEventListener('pointerdown', hide);
-	// Remove native title to prevent double tooltip
-	const nativeTitle = node.getAttribute('title');
-	if (nativeTitle) node.removeAttribute('title');
-
-	return {
-		update(newValue: string | TooltipOptions) {
-			opts = parseOptions(newValue);
-		},
-		destroy() {
-			hide();
-			node.removeEventListener('mouseenter', show);
-			node.removeEventListener('mouseleave', hide);
-			node.removeEventListener('pointerdown', hide);
-			if (nativeTitle) node.setAttribute('title', nativeTitle);
-		}
-	};
-}
@@ -9,22 +9,6 @@
 <div class="space-y-8">
 	<h2 class="text-xl font-bold text-[var(--text)]">Preferences</h2>

-	<!-- Theme -->
-	<div class="space-y-2">
-		<span class="block text-sm font-medium text-[var(--text)]">Theme</span>
-		<div class="flex gap-1" role="group" aria-label="Theme">
-			{#each [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']] as [value, label]}
-				<button
-					onclick={() => updatePreference('theme', value as 'system' | 'light' | 'dark')}
-					class="rounded-sm border px-4 py-2 text-sm transition-colors {prefs.theme === value ? 'border-[var(--primary)] bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'border-[var(--border-subtle)] text-[var(--text)] hover:border-[var(--primary)]'}"
-					data-testid="pref-theme-{value}"
-				>
-					{label}
-				</button>
-			{/each}
-		</div>
-	</div>
-
 	<!-- Default note mode -->
 	<div class="space-y-2">
 		<span class="block text-sm font-medium text-[var(--text)]">Default note mode</span>
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
-	import { linkifyText } from '$lib/utils/checklist.js';
 	import type { NoteColor, PublicAttachment } from '$lib/types/index.js';

 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
-		indented: boolean;
 	}

 	const { data } = $props();
@@ -21,14 +19,10 @@
 		? data.content
 				.split('\n')
 				.filter((l: string) => l.trim())
-				.map((line: string) => {
-					const indented = line.startsWith('  - [');
-					return {
-						text: line.replace(/^ {0,2}- \[[ x]\] /, ''),
-						checked: /^ {0,2}- \[x\] /.test(line),
-						indented
-					};
-				})
+				.map((line: string) => ({
+					text: line.replace(/^- \[[ x]\] /, ''),
+					checked: line.startsWith('- [x] ')
+				}))
 		: [];

 	const activeChecklistItems = checklistItems.filter((i) => !i.checked);
@@ -70,10 +64,9 @@
 				<ul class="space-y-2" data-testid="shared-note-checklist">
 					{#each sortedChecklistItems as item}
 						<li
-							class="flex items-start gap-2 text-sm {item.indented ? 'pl-4 ' : ''}{item.checked
+							class="flex items-start gap-2 text-sm {item.checked
 								? 'text-[var(--text-muted)] line-through'
 								: 'text-[var(--text)]'}"
-							data-testid={item.indented ? 'shared-checklist-child' : undefined}
 						>
 							<input
 								type="checkbox"
@@ -81,7 +74,7 @@
 								disabled
 								class="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-[var(--border-subtle)]"
 							/>
-							<span class="break-words min-w-0">{@html linkifyText(item.text)}</span>
+							<span class="break-words min-w-0">{item.text}</span>
 						</li>
 					{/each}
 				</ul>
@@ -1,16 +1,9 @@
 <script lang="ts">
 	import '../app.css';
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 	import { pwaInfo } from 'virtual:pwa-info';
-	import { browser } from '$app/environment';
-	import { getPreferences } from '$lib/stores/preferences.svelte.js';
-	import { applyTheme } from '$lib/utils/theme.svelte.js';

 	let { children } = $props();
-	let mediaQuery: MediaQueryList | undefined;
-	let systemListener: ((e: MediaQueryListEvent) => void) | undefined;
-
-	const prefs = $derived(getPreferences());

 	onMount(async () => {
 		if (pwaInfo) {
@@ -27,28 +20,6 @@
 		}
 	});

-	$effect(() => {
-		if (!browser) return;
-		const theme = prefs.theme ?? 'system';
-		applyTheme(theme);
-
-		// Listen for system preference changes when in system mode
-		if (systemListener && mediaQuery) {
-			mediaQuery.removeEventListener('change', systemListener);
-		}
-		if (theme === 'system') {
-			mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-			systemListener = () => applyTheme('system');
-			mediaQuery.addEventListener('change', systemListener);
-		}
-	});
-
-	onDestroy(() => {
-		if (systemListener && mediaQuery) {
-			mediaQuery.removeEventListener('change', systemListener);
-		}
-	});
-
 	const webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
 </script>

@@ -26,16 +26,12 @@ export const GET: RequestHandler = async ({ params, url, getClientAddress }) =>
 	const filePath = wantThumb && attachment.thumbnailPath ? attachment.thumbnailPath : attachment.path;
 	const mimeType = wantThumb && attachment.thumbnailPath ? 'image/webp' : attachment.mimeType;

-	try {
-		const buffer = await readFile(filePath);
-		return new Response(buffer, {
-			headers: {
-				'Content-Type': mimeType,
-				'Content-Disposition': `inline; filename="${attachment.filename}"`,
-				'Cache-Control': 'public, max-age=3600'
-			}
-		});
-	} catch {
-		throw error(404, 'Attachment not found');
-	}
+	const buffer = await readFile(filePath);
+	return new Response(buffer, {
+		headers: {
+			'Content-Type': mimeType,
+			'Content-Disposition': `inline; filename="${attachment.filename}"`,
+			'Cache-Control': 'public, max-age=3600'
+		}
+	});
 };
@@ -3,7 +3,7 @@
  "info": {
    "title": "Crumbs API",
    "description": "Auto-generated API spec for crumbs",
-    "version": "0.27.1",
+    "version": "0.21.9",
    "contact": {
      "name": "Bretzel",
      "url": "https://bretzel.app"
@@ -541,47 +541,6 @@
        }
      }
    },
-    "/api/notes/{id}/share": {
-      "parameters": [
-        {
-          "name": "id",
-          "in": "path",
-          "required": true,
-          "schema": {
-            "type": "string"
-          }
-        }
-      ],
-      "post": {
-        "tags": [
-          "Notes"
-        ],
-        "responses": {
-          "200": {
-            "description": "Success"
-          }
-        },
-        "requestBody": {
-          "content": {
-            "application/json": {
-              "schema": {
-                "type": "object"
-              }
-            }
-          }
-        }
-      },
-      "delete": {
-        "tags": [
-          "Notes"
-        ],
-        "responses": {
-          "200": {
-            "description": "Success"
-          }
-        }
-      }
-    },
    "/api/notes/{id}/versions": {
      "parameters": [
        {
@@ -769,58 +728,6 @@
        }
      }
    },
-    "/api/shared/{token}": {
-      "parameters": [
-        {
-          "name": "token",
-          "in": "path",
-          "required": true,
-          "schema": {
-            "type": "string"
-          }
-        }
-      ],
-      "get": {
-        "tags": [
-          "Shared"
-        ],
-        "responses": {
-          "200": {
-            "description": "Success"
-          }
-        }
-      }
-    },
-    "/api/shared/{token}/attachment/{attachmentId}": {
-      "parameters": [
-        {
-          "name": "token",
-          "in": "path",
-          "required": true,
-          "schema": {
-            "type": "string"
-          }
-        },
-        {
-          "name": "attachmentId",
-          "in": "path",
-          "required": true,
-          "schema": {
-            "type": "string"
-          }
-        }
-      ],
-      "get": {
-        "tags": [
-          "Shared"
-        ],
-        "responses": {
-          "200": {
-            "description": "Success"
-          }
-        }
-      }
-    },
    "/api/sync": {
      "post": {
        "tags": [
@@ -1,8 +1,4 @@
 import { test, expect, setupAndLogin } from './helpers/fixtures.js';
-import { readFileSync } from 'fs';
-import { TEST_CREDENTIALS_FILE } from './global-setup';
-
-const { userPassword } = JSON.parse(readFileSync(TEST_CREDENTIALS_FILE, 'utf-8'));

 test.describe.serial('Authentication', () => {
 	test('Scenario: Unauthenticated user is prompted to set up or log in', async ({ page }) => {
@@ -82,7 +78,7 @@ test.describe('Multi-user', () => {
 			data: {
 				email: 'user2@test.com',
 				displayName: 'User Two',
-				password: userPassword,
+				password: 'userpassword123',
 				role: 'user'
 			}
 		});
@@ -1,83 +0,0 @@
-import { test, expect, noteCard, createNote } from './helpers/fixtures.js';
-
-test.describe('Auto-save', () => {
-	test('Scenario: New note is auto-saved without closing the editor', async ({ authenticatedPage: page }) => {
-		// When the user starts a new note and types a title and content
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Auto-saved Note');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('This should be saved automatically');
-
-		// Then the note is persisted after the auto-save delay (2s debounce)
-		await expect(noteCard(page, 'Auto-saved Note')).toBeVisible({ timeout: 5000 });
-
-		// And closing the editor preserves the note
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Auto-saved Note')).toBeVisible();
-	});
-
-	test('Scenario: Edits to an existing note are auto-saved', async ({ authenticatedPage: page }) => {
-		// Given a note titled "Edit Me" exists
-		await createNote(page, 'Edit Me', 'Original content');
-
-		// When the user opens the note and changes the title
-		await noteCard(page, 'Edit Me').click();
-		await page.getByTestId('note-title-input').clear();
-		await page.getByTestId('note-title-input').fill('Edited Title');
-
-		// Then the updated title is auto-saved after the debounce delay
-		// Wait for the API call that confirms the save
-		await page.waitForResponse(
-			(res) => res.url().includes('/api/notes/') && res.request().method() === 'PATCH',
-			{ timeout: 5000 }
-		);
-
-		// And the note card reflects the change while editor is still open
-		await expect(noteCard(page, 'Edited Title')).toBeVisible();
-
-		// Cleanup: close the editor
-		await page.getByTestId('close-editor-btn').click();
-	});
-
-	test('Scenario: Empty note is not auto-saved', async ({ authenticatedPage: page }) => {
-		// Given the current number of notes
-		const noteCards = page.locator('[data-testid="note-card"]');
-		const countBefore = await noteCards.count();
-
-		// When the user opens a new note but leaves it empty
-		await page.getByTestId('new-note-btn').click();
-
-		// And waits longer than the auto-save delay
-		await page.waitForTimeout(3000);
-
-		// And closes the empty editor
-		await page.getByTestId('close-editor-btn').click();
-
-		// Then no new note was created
-		const countAfter = await noteCards.count();
-		expect(countAfter).toBe(countBefore);
-	});
-
-	test('Scenario: Auto-save persists note across page reload', async ({ authenticatedPage: page }) => {
-		// When the user creates a note and waits for auto-save
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Auto-save Survives Reload');
-		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
-		await editor.click();
-		await editor.pressSequentially('Content that survives');
-
-		// Wait for auto-save to fire
-		await page.waitForResponse(
-			(res) => res.url().includes('/api/notes') && res.request().method() === 'POST',
-			{ timeout: 5000 }
-		);
-
-		// When the page is reloaded without closing the editor
-		await page.reload();
-		await page.waitForLoadState('networkidle');
-
-		// Then the note is still visible
-		await expect(noteCard(page, 'Auto-save Survives Reload')).toBeVisible();
-	});
-});
@@ -1,20 +1,13 @@
 import { test, expect, noteCard } from './helpers/fixtures.js';
 import type { Page } from '@playwright/test';

-/** Toggle checklist mode via the overflow menu. */
-async function toggleChecklistMode(page: Page) {
-	await page.getByTestId('overflow-menu-btn').click();
-	await page.getByTestId('checklist-toggle').click();
-}
-
 /** Create a checklist note via UI. Leaves the editor closed. */
 async function createChecklistNote(page: Page, title: string, items: string[]) {
 	await page.getByTestId('new-note-btn').click();
 	await page.getByTestId('note-title-input').fill(title);
-	await toggleChecklistMode(page);
+	await page.getByTestId('checklist-toggle').click();
 	for (let i = 0; i < items.length; i++) {
-		await page.getByTestId('checklist-input').nth(i).focus();
-		await page.keyboard.type(items[i]);
+		await page.getByTestId('checklist-input').nth(i).fill(items[i]);
 		if (i < items.length - 1) {
 			await page.getByTestId('checklist-input').nth(i).press('Enter');
 		}
@@ -29,7 +22,7 @@ test.describe('Checklist', () => {
 		await page.getByTestId('new-note-btn').click();

 		// When the user enables checklist mode
-		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-toggle').click();

 		// Then the checklist component is displayed
 		await expect(page.getByTestId('checklist')).toBeVisible();
@@ -47,7 +40,7 @@ test.describe('Checklist', () => {

 		// Then the checklist is displayed with the saved item
 		await expect(page.getByTestId('checklist')).toBeVisible();
-		await expect(page.getByTestId('checklist-input').first()).toHaveText('Buy milk');
+		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Buy milk');
 	});

 	test('Scenario: Checked item moves to the done section', async ({ authenticatedPage: page }) => {
@@ -67,37 +60,11 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-done-checkbox').first()).toBeChecked();
 	});

-	test('Scenario: Sequential check and uncheck both persist correctly', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with an item "Buy milk" exists
-		await createChecklistNote(page, 'Tasks2', ['Buy milk']);
-
-		// When the user checks the item and closes
-		await noteCard(page, 'Tasks2').click();
-		await page.getByTestId('checklist-checkbox').first().click();
-		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
-		await page.getByTestId('close-editor-btn').click();
-
-		// Then the checked state persists
-		await noteCard(page, 'Tasks2').click();
-		await expect(page.getByTestId('checklist-done-checkbox').first()).toBeChecked();
-
-		// When the user unchecks the item from the done section and closes
-		await page.getByTestId('checklist-done-checkbox').first().click();
-		await expect(page.getByTestId('checklist-checkbox')).toHaveCount(1);
-		await page.getByTestId('close-editor-btn').click();
-
-		// Then the unchecked state also persists (not reverted by 3-way merge)
-		await noteCard(page, 'Tasks2').click();
-		await expect(page.getByTestId('checklist-checkbox')).toHaveCount(1);
-		await expect(page.getByTestId('checklist-input').first()).toHaveText('Buy milk');
-	});
-
 	test('Scenario: Enter key adds a new checklist item', async ({ authenticatedPage: page }) => {
 		// Given a checklist with one item
 		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('First item');
+		await page.getByTestId('checklist-toggle').click();
+		await page.getByTestId('checklist-input').first().fill('First item');

 		// When the user presses Enter
 		await page.getByTestId('checklist-input').first().press('Enter');
@@ -106,38 +73,11 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
 	});

-	test('Scenario: Enter key focuses new item on reopened note with checked items before active ones', async ({ authenticatedPage: page }) => {
-		// Given a saved checklist note where checked items precede active items
-		// (this happens when reopening a note — parseChecklist preserves the
-		// saved order rather than grouping active items first)
-		await createChecklistNote(page, 'Groceries', ['Milk', 'Eggs', 'Bread', 'Butter']);
-
-		// Reopen and check items 1 and 2 so saved content has checked items first
-		await noteCard(page, 'Groceries').click();
-		await page.getByTestId('checklist-checkbox').nth(0).click(); // Milk → done
-		await page.getByTestId('checklist-checkbox').nth(0).click(); // Eggs (now first active) → done
-		await page.getByTestId('close-editor-btn').click();
-
-		// Reopen — parseChecklist restores saved order: [x]Milk, [x]Eggs, [ ]Bread, [ ]Butter
-		// The checked items precede active ones in items[], but only active ones render as inputs
-		await noteCard(page, 'Groceries').click();
-		await expect(page.getByTestId('checklist-input')).toHaveCount(2); // Bread, Butter active
-
-		// When the user presses Enter on the first active item (Bread)
-		await page.getByTestId('checklist-input').first().press('Enter');
-
-		// Then focus moves to the newly created empty item
-		await expect(page.getByTestId('checklist-input')).toHaveCount(3);
-		await expect(page.getByTestId('checklist-input').nth(1)).toBeFocused();
-		await expect(page.getByTestId('checklist-input').nth(1)).toHaveText('');
-	});
-
 	test('Scenario: Backspace on empty item removes it from the list', async ({ authenticatedPage: page }) => {
 		// Given a checklist with two items where the second is empty
 		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('First item');
+		await page.getByTestId('checklist-toggle').click();
+		await page.getByTestId('checklist-input').first().fill('First item');
 		await page.getByTestId('checklist-input').first().press('Enter');
 		await expect(page.getByTestId('checklist-input')).toHaveCount(2);

@@ -152,19 +92,17 @@ test.describe('Checklist', () => {
 		// Given a checklist note with two items
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Hide Done Test');
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('Done task');
+		await page.getByTestId('checklist-toggle').click();
+		await page.getByTestId('checklist-input').first().fill('Done task');
 		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Pending task');
+		await page.getByTestId('checklist-input').nth(1).fill('Pending task');

 		// When the user completes the first item
 		await page.getByTestId('checklist-checkbox').first().click();

 		// Then only the pending item remains in the active list
 		await expect(page.getByTestId('checklist-input')).toHaveCount(1);
-		await expect(page.getByTestId('checklist-input').first()).toHaveText('Pending task');
+		await expect(page.getByTestId('checklist-input').first()).toHaveValue('Pending task');

 		// And the done section shows the completed item
 		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
@@ -172,288 +110,17 @@ test.describe('Checklist', () => {
 		await expect(page.getByTestId('checklist-done-section')).toContainText('Done task');
 	});

-	test('Scenario: Arrow keys navigate between checklist items', async ({ authenticatedPage: page }) => {
-		// Given a checklist with three items
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('First');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Second');
-		await page.getByTestId('checklist-input').nth(1).press('Enter');
-		await page.getByTestId('checklist-input').nth(2).focus();
-		await page.keyboard.type('Third');
-
-		// When the user presses ArrowUp from the third item
-		await page.getByTestId('checklist-input').nth(2).press('ArrowUp');
-
-		// Then focus moves to the second item
-		await expect(page.getByTestId('checklist-input').nth(1)).toBeFocused();
-
-		// When the user presses ArrowDown
-		await page.getByTestId('checklist-input').nth(1).press('ArrowDown');
-
-		// Then focus moves back to the third item
-		await expect(page.getByTestId('checklist-input').nth(2)).toBeFocused();
-	});
-
-	test('Scenario: Tab indents an item and Shift+Tab outdents it', async ({ authenticatedPage: page }) => {
-		// Given a checklist with two top-level items
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('Parent');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Child');
-
-		// When the user presses Tab on the second item
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-
-		// Then the item becomes indented
-		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
-
-		// When the user presses Shift+Tab
-		await page.getByTestId('checklist-input').nth(1).press('Shift+Tab');
-
-		// Then the item returns to top-level
-		await expect(page.getByTestId('checklist-child-row')).toHaveCount(0);
-	});
-
-	test('Scenario: Checking a parent checks all its children', async ({ authenticatedPage: page }) => {
-		// Given a checklist with a parent and two children
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('Buy groceries');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Milk');
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-		await page.getByTestId('checklist-input').nth(1).press('Enter');
-		await page.getByTestId('checklist-input').nth(2).focus();
-		await page.keyboard.type('Eggs');
-
-		// When the user checks the parent
-		await page.getByTestId('checklist-checkbox').first().click();
-
-		// Then all items move to done section
-		await expect(page.getByTestId('checklist-toggle-done')).toContainText('3 done');
-		await expect(page.getByTestId('checklist-input')).toHaveCount(0);
-	});
-
-	test('Scenario: Checking a child shows read-only parent label in done section', async ({ authenticatedPage: page }) => {
-		// Given a checklist with a parent and a child
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('Groceries');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Milk');
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-
-		// When the user checks only the child
-		await page.getByTestId('checklist-checkbox').nth(1).click();
-
-		// Then the done section shows a parent label above the checked child
-		await expect(page.getByTestId('checklist-toggle-done')).toContainText('1 done');
-		await expect(page.getByTestId('checklist-done-parent-label')).toBeVisible();
-		await expect(page.getByTestId('checklist-done-parent-label')).toContainText('Groceries');
-	});
-
-	test('Scenario: Unchecking a parent from done restores group to active', async ({ authenticatedPage: page }) => {
-		// Given a checklist with a parent and child, all checked
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('Shopping');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Milk');
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-		await page.getByTestId('checklist-checkbox').first().click();
-		await expect(page.getByTestId('checklist-toggle-done')).toContainText('2 done');
-
-		// When the user unchecks the parent from the done section
-		await page.getByTestId('checklist-done-checkbox').first().click();
-
-		// Then both parent and child return to active
-		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
-		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
-	});
-
-	test('Scenario: Nested items persist after close and reopen', async ({ authenticatedPage: page }) => {
-		// Given a checklist with nested items
-		await createChecklistNote(page, 'Nested Persist', ['Parent', 'Child']);
-
-		// Reopen and indent the second item
-		await noteCard(page, 'Nested Persist').click();
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
-		await page.getByTestId('close-editor-btn').click();
-
-		// When the user reopens the note
-		await noteCard(page, 'Nested Persist').click();
-
-		// Then the nesting is preserved
-		await expect(page.getByTestId('checklist-child-row')).toHaveCount(1);
-	});
-
-	test('Scenario: Enter on a child creates a sibling at the same level', async ({ authenticatedPage: page }) => {
-		// Given a checklist with a parent and a child
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('Parent');
-		await page.getByTestId('checklist-input').first().press('Enter');
-		await page.getByTestId('checklist-input').nth(1).focus();
-		await page.keyboard.type('Child 1');
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-
-		// When the user presses Enter on the child
-		await page.getByTestId('checklist-input').nth(1).press('Enter');
-
-		// Then a new child is created at the same level
-		await expect(page.getByTestId('checklist-child-row')).toHaveCount(2);
-		await expect(page.getByTestId('checklist-input').nth(2)).toBeFocused();
-	});
-
-	test('Scenario: NoteCard preview shows indentation for nested items', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with nested items
-		await createChecklistNote(page, 'Indent Preview Note', ['Parent', 'Child']);
-		await noteCard(page, 'Indent Preview Note').click();
-		await page.getByTestId('checklist-input').nth(1).press('Tab');
-		await page.getByTestId('close-editor-btn').click();
-
-		// Then the NoteCard preview shows the child indented (scoped to this card)
-		const card = noteCard(page, 'Indent Preview Note');
-		await expect(card.getByTestId('card-checklist-child')).toHaveCount(1);
-	});
-
 	test('Scenario: Disabling checklist mode restores the rich text editor', async ({ authenticatedPage: page }) => {
 		// Given checklist mode is enabled on a new note
 		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-toggle').click();
 		await expect(page.getByTestId('checklist')).toBeVisible();

 		// When the user disables checklist mode
-		await toggleChecklistMode(page);
+		await page.getByTestId('checklist-toggle').click();

 		// Then the rich text editor is displayed again
 		await expect(page.getByTestId('tiptap-editor')).toBeVisible();
 		await expect(page.getByTestId('checklist')).not.toBeVisible();
 	});
-
-	test('Scenario: Delete checked items removes only done items', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with two checked and one unchecked item
-		await createChecklistNote(page, 'Cleanup', ['Keep me', 'Done 1', 'Done 2']);
-		await noteCard(page, 'Cleanup').click();
-		await page.getByTestId('checklist-checkbox').nth(1).click();
-		await page.getByTestId('checklist-checkbox').nth(1).click();
-		await expect(page.getByTestId('checklist-toggle-done')).toContainText('2 done');
-
-		// When the user deletes checked items via the overflow menu
-		await page.getByTestId('overflow-menu-btn').click();
-		await page.getByTestId('delete-checked-btn').click();
-
-		// Then only the unchecked item remains
-		await expect(page.getByTestId('checklist-input')).toHaveCount(1);
-		await expect(page.getByTestId('checklist-input').first()).toHaveText('Keep me');
-		await expect(page.getByTestId('checklist-toggle-done')).not.toBeVisible();
-	});
-
-	test('Scenario: Uncheck all items moves everything back to active', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with checked items
-		await createChecklistNote(page, 'Reset', ['Item A', 'Item B']);
-		await noteCard(page, 'Reset').click();
-		await page.getByTestId('checklist-checkbox').first().click();
-		await page.getByTestId('checklist-checkbox').first().click();
-		await expect(page.getByTestId('checklist-toggle-done')).toContainText('2 done');
-
-		// When the user unchecks all via the overflow menu
-		await page.getByTestId('overflow-menu-btn').click();
-		await page.getByTestId('uncheck-all-btn').click();
-
-		// Then all items are back in the active section
-		await expect(page.getByTestId('checklist-input')).toHaveCount(2);
-		await expect(page.getByTestId('checklist-toggle-done')).not.toBeVisible();
-	});
-
-	test('Scenario: URL typed in a checklist item becomes a clickable link', async ({ authenticatedPage: page }) => {
-		// Given a new checklist note
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-
-		// When the user types a URL and leaves the field
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('check https://example.com today');
-		await page.getByTestId('note-title-input').focus();
-
-		// Then the URL is rendered as a link
-		const link = page.getByTestId('checklist-input').first().locator('a');
-		await expect(link).toBeVisible();
-		await expect(link).toHaveAttribute('href', 'https://example.com');
-	});
-
-	test('Scenario: Clicking a link in a checklist item shows the link popover', async ({ authenticatedPage: page }) => {
-		// Given a checklist item with a URL
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('https://example.com');
-		await page.getByTestId('note-title-input').focus();
-
-		// When the user clicks the link
-		await page.getByTestId('checklist-input').first().locator('a').click();
-
-		// Then the link popover appears with an Open button
-		await expect(page.getByTestId('link-popover')).toBeVisible();
-		await expect(page.getByTestId('link-popover-open')).toBeVisible();
-	});
-
-	test('Scenario: Link popover dismisses on Escape', async ({ authenticatedPage: page }) => {
-		// Given a link popover is open
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('https://example.com');
-		await page.getByTestId('note-title-input').focus();
-		await page.getByTestId('checklist-input').first().locator('a').click();
-		await expect(page.getByTestId('link-popover')).toBeVisible();
-
-		// When the user presses Escape
-		await page.keyboard.press('Escape');
-
-		// Then the popover is dismissed
-		await expect(page.getByTestId('link-popover')).not.toBeVisible();
-	});
-
-	test('Scenario: Links in done section are clickable', async ({ authenticatedPage: page }) => {
-		// Given a checklist item with a URL is checked
-		await page.getByTestId('new-note-btn').click();
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('https://example.com');
-		await page.getByTestId('checklist-checkbox').first().click();
-
-		// Then the done section shows the URL as a link
-		await expect(page.getByTestId('checklist-done-section').locator('a.checklist-link')).toBeVisible();
-	});
-
-	test('Scenario: Links in NoteCard preview are rendered', async ({ authenticatedPage: page }) => {
-		// Given a checklist note with a URL
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Link Note');
-		await toggleChecklistMode(page);
-		await page.getByTestId('checklist-input').first().focus();
-		await page.keyboard.type('visit https://example.com');
-		await page.getByTestId('close-editor-btn').click();
-
-		// Then the NoteCard preview shows the URL as a link
-		const card = noteCard(page, 'Link Note');
-		await expect(card.locator('a.checklist-link')).toBeVisible();
-		await expect(card.locator('a.checklist-link')).toHaveAttribute('href', 'https://example.com');
-	});
 });
@@ -1,87 +0,0 @@
-import { test, expect, createNote } from './helpers/fixtures.js';
-
-test.describe.serial('Dark mode', () => {
-	test('Scenario: Theme toggle persists selection across page reload', async ({
-		authenticatedPage: page
-	}) => {
-		// Given the user is on the preferences page
-		await page.goto('/settings/preferences');
-		await page.waitForLoadState('networkidle');
-
-		// When the user selects dark theme
-		// Set up response listener BEFORE clicking (response may arrive before waitForResponse)
-		const prefSaved = page.waitForResponse((r) => r.url().includes('/api/preferences') && r.ok());
-		await page.getByTestId('pref-theme-dark').click();
-
-		// Then the page applies dark theme
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-
-		// Wait for preference to persist to server before reloading
-		await prefSaved;
-
-		// When the page is reloaded
-		await page.reload();
-		await page.waitForLoadState('networkidle');
-
-		// Then the dark theme persists (FOUC script applies it before paint)
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-		await expect(page.getByTestId('pref-theme-dark')).toHaveClass(/font-medium/);
-	});
-
-	test('Scenario: Light mode removes dark theme attribute', async ({
-		authenticatedPage: page
-	}) => {
-		// Given dark theme is active
-		await page.goto('/settings/preferences');
-		await page.waitForLoadState('networkidle');
-		await page.getByTestId('pref-theme-dark').click();
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-
-		// When the user selects light theme
-		await page.getByTestId('pref-theme-light').click();
-
-		// Then the dark theme attribute is removed
-		await expect(page.locator('html')).not.toHaveAttribute('data-theme');
-	});
-
-	test('Scenario: System mode follows OS dark preference', async ({
-		authenticatedPage: page
-	}) => {
-		// Given the OS prefers dark mode
-		await page.emulateMedia({ colorScheme: 'dark' });
-
-		// When the user navigates to preferences with system theme active
-		await page.goto('/settings/preferences');
-		await page.waitForLoadState('networkidle');
-		await page.getByTestId('pref-theme-system').click();
-
-		// Then the page applies dark theme from system preference
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-	});
-
-	test('Scenario: Note cards use dark colors in dark mode', async ({
-		authenticatedPage: page
-	}) => {
-		// Given a note exists
-		await page.goto('/');
-		await page.waitForLoadState('networkidle');
-		await createNote(page, 'Dark Mode Test Note');
-
-		// And dark theme is active
-		await page.goto('/settings/preferences');
-		await page.waitForLoadState('networkidle');
-		await page.getByTestId('pref-theme-dark').click();
-		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-
-		// When viewing the notes page
-		await page.goto('/');
-		await page.waitForLoadState('networkidle');
-
-		// Then note cards should have dark background colors
-		const noteCard = page.getByTestId('note-card').first();
-		await expect(noteCard).toBeVisible();
-		const bg = await noteCard.evaluate((el) => getComputedStyle(el).backgroundColor);
-		// Dark default color is #2a2520 = rgb(42, 37, 32); NOT light default rgb(250, 245, 235)
-		expect(bg).not.toBe('rgb(250, 245, 235)');
-	});
-});
@@ -13,17 +13,11 @@ async function runTiptapCommand(page: Page, commandFn: string) {
 	);
 }

-/** Toggle markdown mode via the overflow menu. */
-async function toggleMarkdownMode(page: Page) {
-	await page.getByTestId('overflow-menu-btn').click();
-	await page.getByTestId('markdown-toggle').click();
-}
-
 /** Type content into the TipTap editor via markdown mode (reliable for e2e) */
 async function typeViaMarkdown(page: Page, content: string) {
-	await toggleMarkdownMode(page);
+	await page.getByTestId('markdown-toggle').click();
 	await page.getByTestId('note-content-input').fill(content);
-	await toggleMarkdownMode(page);
+	await page.getByTestId('markdown-toggle').click();
 }

 test.describe('Rich text formatting', () => {
@@ -40,7 +34,7 @@ test.describe('Rich text formatting', () => {
 		await expect(editor.locator('strong')).toHaveText('world');

 		// And the markdown content contains bold syntax
-		await toggleMarkdownMode(page);
+		await page.getByTestId('markdown-toggle').click();
 		await expect(page.getByTestId('note-content-input')).toHaveValue('hello **world**');
 	});

@@ -101,7 +95,7 @@ test.describe('Rich text formatting', () => {
 		await expect(editor.locator('strong')).toHaveText('bold');

 		// When the user toggles markdown mode
-		await toggleMarkdownMode(page);
+		await page.getByTestId('markdown-toggle').click();

 		// Then the raw markdown textarea is shown with the markdown source
 		await expect(page.getByTestId('note-content-input')).toBeVisible();
@@ -1,8 +1,6 @@
-import { existsSync, unlinkSync, writeFileSync } from 'fs';
-import { randomUUID } from 'crypto';
+import { existsSync, unlinkSync } from 'fs';

 const TEST_DB = './data/test-crumbs.db';
-export const TEST_CREDENTIALS_FILE = './data/test-credentials.json';

 export default function globalSetup() {
 	// Clean test database before E2E run so each run starts fresh
@@ -12,14 +10,4 @@ export default function globalSetup() {
 			unlinkSync(path);
 		}
 	}
-
-	// Generate random passwords for this test run, shared across all workers
-	writeFileSync(
-		TEST_CREDENTIALS_FILE,
-		JSON.stringify({
-			testPassword: `test-${randomUUID()}`,
-			collabPassword: `collab-${randomUUID()}`,
-			userPassword: `user-${randomUUID()}`
-		})
-	);
 }
@@ -1,16 +1,12 @@
 import { test as base, expect, type Page, type Locator } from '@playwright/test';
-import { readFileSync } from 'fs';
 import { collectCoverage } from './coverage';
-import { TEST_CREDENTIALS_FILE } from '../global-setup';
-
-const { testPassword, collabPassword } = JSON.parse(readFileSync(TEST_CREDENTIALS_FILE, 'utf-8'));

 const TEST_EMAIL = 'admin@test.com';
-const TEST_PASSWORD = testPassword;
+const TEST_PASSWORD = 'testpassword123';
 const TEST_DISPLAY_NAME = 'Test Admin';

 const COLLAB_EMAIL = 'collab@test.com';
-const COLLAB_PASSWORD = collabPassword;
+const COLLAB_PASSWORD = 'collabpass123';
 const COLLAB_NAME = 'Collaborator User';

 /** Find a specific note card by its title text */
@@ -4,14 +4,12 @@ import path from 'path';
 export default defineConfig({
 	resolve: {
 		alias: {
-			$lib: path.resolve(__dirname, 'src/lib'),
-			'$app/environment': path.resolve(__dirname, 'src/lib/__mocks__/app-environment.ts')
+			$lib: path.resolve(__dirname, 'src/lib')
 		}
 	},
 	test: {
 		include: ['src/**/*.test.ts'],
 		environment: 'node',
-		setupFiles: ['src/lib/__mocks__/svelte-runes.ts'],
 		coverage: {
 			provider: 'v8',
 			reporter: ['text', 'html', 'lcov', 'json-summary'],
@@ -292,7 +292,7 @@
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener">Docs</a></li>
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/LICENSE" target="_blank" rel="noopener">License</a></li>
 			</ul>
-			<span class="footer-version">v0.28.2</span>
+			<span class="footer-version">v0.22.3</span>
 		</div>
 	</footer>