chore: bump version to 0.31.0

Separates --hover-wash from --border so the softened dark-mode border grey
no longer collapses hover/active tint washes to near-invisibility (measured
5% wash on --bg-surface: 4.7 -> 17.0 RGB distance). Light mode is unaffected
since --hover-wash falls back to var(--border) in :root.

Also fixes stale/incorrect claims surfaced by the final review: the
checkbox rule and missing CSS variables in CLAUDE.md, the "warm parchment"
description of dark mode in FEATURES.md, the chip contrast claim in the
palette design doc (chips are 3:1 UI, not 4:1 text), and adds a measured
lightness-floor test guarding against chips regressing to card lightness.

CLAUDE.md

@@ -37,9 +37,41 @@ All colors are CSS variables in `src/app.css`. Never use hardcoded Tailwind colo
 | `--success-bg/text` | warm greens | Success states |
 | `--card-shadow` | `2px 2px 0px` | Hard-offset retro shadow (no blur) |
 | `--card-shadow-hover` | `3px 3px 0px` | Hover shadow in primary gold |
+| `--accent-check` | `var(--primary)` (light) / `#c8a44a` (dark) | Checkbox accent color — dimmed gold in dark mode so a long done-list doesn't shout |
+| `--hover-wash` | `var(--border)` (light) / `#ece3d3` (dark) | Tint source for hover/active washes (`bg-[var(--hover-wash)]/N`) — kept cream in dark mode since `--border`'s mid-grey is invisible at low opacity |
 
 Note colors for cards are defined in `src/lib/utils/colors.ts`.
 
+### Dark theme
+
+Dark mode overrides every colour variable in `[data-theme="dark"]` (`src/app.css`). It is not a
+mechanical inversion of light mode — two differences are deliberate:
+
+- **`--primary` differs per theme.** `#C8860A` on parchment, `#e0a030` on ink. The light gold reads
+  mustard on a dark background.
+- **`--border` is a warm mid-grey (`#57514b`), not mirrored cream.** A bright 1px line on a dark
+  background reads as glare rather than structure; the hard offset shadow carries the retro framing.
+
+Note colours have two representations, and they are not interchangeable:
+
+| Map | Function | Used by | Role |
+|---|---|---|---|
+| `NOTE_COLORS` / `NOTE_COLORS_DARK` | `getNoteColor(color, isDark)` | Cards, editor, share page | Quiet **surface** you read text on |
+| `NOTE_CHIPS_DARK` | `getNoteChip(color, isDark)` | `ColorPicker` only | Vivid **label** you identify at a glance |
+
+A dark card sits at low lightness, where a 28px picker circle would read as a grey dot — small
+patches lose apparent saturation. Never fill a picker swatch with `getNoteColor()`. In light mode
+`getNoteChip()` returns the pastel card colour, because there the pastels *are* the cards.
+
+When changing any dark note colour, keep the invariants asserted in `src/lib/utils/colors.test.ts`:
+AA contrast (4.5:1) against both `--text` and `--text-muted` on every dark surface, no two dark card
+surfaces closer than an RGB distance of 8, no two dark chips closer than an RGB distance of 25, and
+`getNoteChip()` returning the card colour in light mode but a distinct chip in dark mode.
+
+`--bg-base` is duplicated as a literal in `src/app.html` (FOUC script) and
+`src/lib/utils/theme.svelte.ts` (`DARK_THEME_COLOR`) for the browser theme-colour. Update all three
+together.
+
 ### Typography
 
 - **Body**: `JetBrains Mono` (monospace) — the hacker/dev aesthetic
@@ -53,7 +85,7 @@ Note colors for cards are defined in `src/lib/utils/colors.ts`.
 - **Borders**: Default card borders use `--border-subtle`. `--border` is for strong emphasis (editor, login card). Hover borders use `--primary`.
 - **Animations**: Crisp and fast (150ms `ease-out`). No spring physics, no bounce. The retro feel comes from snappy transitions.
 - **Background texture**: A subtle 4px pixel grid overlay at 3% opacity (defined in `body::before`).
-- **Checkboxes**: Use `accent-color: var(--primary)` globally — gold checkboxes match the theme.
+- **Checkboxes**: Use `accent-color: var(--accent-check)` globally — resolves to `--primary` in light mode and to a dimmed gold (`#c8a44a`) in dark mode so a long done-list doesn't shout.
 - **Icons**: Lucide icons throughout. Keep at 16-20px size.
 - **Hover actions**: Never use `hidden group-hover:block` for action buttons — they're invisible on mobile (no hover). Use the opacity pattern instead: `max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100`. This keeps actions always visible on touch devices and hover-revealed on desktop.
 

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.28.3
+    image: ghcr.io/bretzel-app/crumbs:0.30.1
     container_name: crumbs
     ports:
       - "3000:3000"

docs/ARCHITECTURE.md

@@ -159,7 +159,10 @@ Theme switching uses CSS variable overrides on the `<html>` element:
 - **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
+- **Note card colors**: `getNoteColor()` in `src/lib/utils/colors.ts` accepts a `dark` boolean and
+  returns the appropriate surface variant per theme. Picker swatches use `getNoteChip()` instead —
+  in dark mode the card surfaces are too dark to be identifiable as small circles, so the picker
+  draws from a separate vivid `NOTE_CHIPS_DARK` map.
 
 ## File Organization
 

docs/FEATURES.md

@@ -71,7 +71,7 @@
 
 ### 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
+- Dark mode uses near-neutral warm ink surfaces (not a sepia-tinted parchment) — 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
 

docs/superpowers/plans/2026-07-31-dark-palette-rework.md

@@ -0,0 +1,557 @@
+# Dark Theme Palette Rework 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:** Replace the dark theme's palette with a systematically generated one, and decouple the colour-picker swatch from the note card surface so the twelve colours are distinguishable.
+
+**Architecture:** Purely a colour-data and CSS-variable change. `NOTE_COLORS_DARK` in `src/lib/utils/colors.ts` gets new values; a new `NOTE_CHIPS_DARK` map plus `getNoteChip()` serves the picker only. The `[data-theme="dark"]` block in `src/app.css` is rewritten. Consumers (`NoteCard`, `NoteEditor`, the public share page) already resolve colour through `getNoteColor()` and need no changes — only `ColorPicker.svelte` switches functions.
+
+**Tech Stack:** SvelteKit + Svelte 5 runes, Tailwind CSS v4, Vitest (unit), Playwright (e2e), pnpm.
+
+**Spec:** `docs/superpowers/specs/2026-07-31-dark-palette-design.md`
+
+## Global Constraints
+
+- Light mode must not change. Any diff touching `NOTE_COLORS` (the light map) or `:root` colour values other than the new `--accent-check` is out of scope.
+- Never hardcode Tailwind colours (`text-gray-500`, `bg-red-600`). Always reference CSS variables. (Project rule, `CLAUDE.md`.)
+- Run `pnpm check` before every commit — not just tests. (Project rule.)
+- Run `pnpm build` before `pnpm test:e2e` locally, or e2e tests run against a stale bundle.
+- Conventional commit prefixes: `feat:`, `fix:`, `chore:`, `docs:`, `refactor:`, `test:`.
+- Exact dark palette values are given verbatim in each task. Do not re-derive or "improve" them — they were generated to hold WCAG AA against `--text` and `--text-muted` on all twelve surfaces, and hand-tweaking breaks that.
+
+---
+
+### Task 1: New dark note-card colours
+
+**Files:**
+- Modify: `src/lib/utils/colors.ts:18-31` (the `NOTE_COLORS_DARK` map)
+- Test: `src/lib/utils/colors.test.ts`
+- Modify: `tests/e2e/public-sharing.spec.ts` (asserted dark `fog` value)
+- Modify: `tests/e2e/dark-mode.spec.ts:84` (stale comment)
+
+**Interfaces:**
+- Consumes: nothing from earlier tasks.
+- Produces: `NOTE_COLORS_DARK` with the values below. `getNoteColor(color: NoteColor, isDark: boolean): string` keeps its existing signature. Task 2 relies on `getNoteColor` being unchanged; Task 2's chip values must differ from every value here.
+
+- [ ] **Step 1: Write the failing invariant tests**
+
+Add to `src/lib/utils/colors.test.ts`. These assert the *properties* that broke, not the hex strings — a hex-only test would have passed happily on the old broken palette.
+
+```ts
+/** WCAG relative luminance. */
+function relativeLuminance(hex: string): number {
+	const n = parseInt(hex.slice(1), 16);
+	const channels = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+		const s = v / 255;
+		return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+	});
+	return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+}
+
+function contrastRatio(a: string, b: string): number {
+	const [l1, l2] = [relativeLuminance(a), relativeLuminance(b)];
+	return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+
+describe('dark note colours', () => {
+	// Must track [data-theme="dark"] in src/app.css.
+	const DARK_TEXT = '#ece3d3';
+	const DARK_TEXT_MUTED = '#b3a695';
+
+	it('keeps body text above the AA threshold on every dark card', () => {
+		for (const [name, { bg }] of Object.entries(NOTE_COLORS_DARK)) {
+			expect(contrastRatio(bg, DARK_TEXT), `${name} (${bg})`).toBeGreaterThanOrEqual(4.5);
+		}
+	});
+
+	it('keeps muted text above the AA threshold on every dark card', () => {
+		// This is the invariant the old palette broke: muted/struck-through text
+		// became unreadable on the lighter surfaces.
+		for (const [name, { bg }] of Object.entries(NOTE_COLORS_DARK)) {
+			expect(contrastRatio(bg, DARK_TEXT_MUTED), `${name} (${bg})`).toBeGreaterThanOrEqual(4.5);
+		}
+	});
+
+	it('holds the twelve surfaces within a narrow lightness band so they read as a family', () => {
+		const luminances = Object.values(NOTE_COLORS_DARK).map((c) => relativeLuminance(c.bg));
+		expect(Math.max(...luminances) - Math.min(...luminances)).toBeLessThan(0.03);
+	});
+});
+```
+
+- [ ] **Step 2: Run the tests to verify they fail**
+
+Run: `pnpm test:unit colors`
+Expected: FAIL. Only the two hex-pinning assertions fail (they still pin the old values). The AA
+tests are forward guards, not regressions of the old palette — the old palette actually clears
+both AA thresholds. The distinguishability test is the one that would fail on the old palette
+(its closest pair, `fog`/`storm`, sits at RGB distance 7.5).
+
+- [ ] **Step 3: Replace the dark palette**
+
+In `src/lib/utils/colors.ts`, replace the whole `NOTE_COLORS_DARK` map with these values exactly:
+
+```ts
+export const NOTE_COLORS_DARK: Record<NoteColor, { bg: string; label: string }> = {
+	default: { bg: '#21201f', label: 'Default' },
+	coral: { bg: '#3f1f1c', label: 'Coral' },
+	peach: { bg: '#3f2b1c', label: 'Peach' },
+	sand: { bg: '#3c371b', label: 'Sand' },
+	mint: { bg: '#2a3d1d', label: 'Mint' },
+	sage: { bg: '#1f3d36', label: 'Sage' },
+	fog: { bg: '#253946', label: 'Fog' },
+	storm: { bg: '#1d283d', label: 'Storm' },
+	dusk: { bg: '#3d2843', label: 'Dusk' },
+	blossom: { bg: '#3d2129', label: 'Blossom' },
+	clay: { bg: '#363126', label: 'Clay' },
+	chalk: { bg: '#303036', label: 'Chalk' }
+};
+```
+
+Note for the implementer: `blossom` and `storm` intentionally shift hue relative to their light counterparts (toward pink and true blue). At higher chroma the original hues collided with `coral`/`peach` and `fog`. This is deliberate — see the spec.
+
+- [ ] **Step 4: Update the two hex assertions that pin the old values**
+
+In `src/lib/utils/colors.test.ts`, the existing `getNoteColor` tests assert old hexes. Change them:
+
+```ts
+	it('returns dark color when isDark is true', () => {
+		expect(getNoteColor('default', true)).toBe('#21201f');
+		expect(getNoteColor('coral', true)).toBe('#3f1f1c');
+	});
+
+	it('returns default color for unknown color name', () => {
+		expect(getNoteColor('unknown' as any, false)).toBe('#faf5eb');
+		expect(getNoteColor('unknown' as any, true)).toBe('#21201f');
+	});
+```
+
+- [ ] **Step 5: Run the unit tests to verify they pass**
+
+Run: `pnpm test:unit colors`
+Expected: PASS, all tests in the file.
+
+- [ ] **Step 6: Update the e2e test that asserts a dark note colour**
+
+`tests/e2e/public-sharing.spec.ts` — the "Shared note follows a dark-mode visitor theme" scenario asserts dark `fog`. `#253946` is `rgb(37, 57, 70)`:
+
+```ts
+		await expect(publicPage.getByTestId('shared-note')).toHaveCSS(
+			'background-color',
+			'rgb(37, 57, 70)'
+		);
+```
+
+In `tests/e2e/dark-mode.spec.ts:84`, the assertion itself is a negative one (`not.toBe` light default) and needs no change, but its comment names the old hex. Update it:
+
+```ts
+		// Dark default color is #21201f = rgb(33, 32, 31); NOT light default rgb(250, 245, 235)
+```
+
+- [ ] **Step 7: Verify types, then the full e2e suites that touch colour**
+
+Run: `pnpm check`
+Expected: 0 errors.
+
+Run: `pnpm build && pnpm test:e2e public-sharing dark-mode organization`
+Expected: PASS. (`organization.spec.ts` exercises the picker but asserts no hex, so it should be unaffected — it is in the list to prove that.)
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add src/lib/utils/colors.ts src/lib/utils/colors.test.ts tests/e2e/public-sharing.spec.ts tests/e2e/dark-mode.spec.ts
+git commit -m "feat(theme): rebuild dark note colours as a consistent family"
+```
+
+---
+
+### Task 2: Decouple picker swatches from card surfaces
+
+**Files:**
+- Modify: `src/lib/utils/colors.ts` (add `NOTE_CHIPS_DARK` and `getNoteChip`)
+- Modify: `src/lib/components/ColorPicker.svelte:2,19`
+- Test: `src/lib/utils/colors.test.ts`
+- Test: `tests/e2e/dark-mode.spec.ts`
+
+**Interfaces:**
+- Consumes: `NOTE_COLORS_DARK` and `getNoteColor(color: NoteColor, isDark: boolean): string` from Task 1.
+- Produces: `NOTE_CHIPS_DARK: Record<NoteColor, string>` and `getNoteChip(color: NoteColor, isDark: boolean): string`. No later task depends on these.
+
+- [ ] **Step 1: Write the failing tests**
+
+Add to `src/lib/utils/colors.test.ts`:
+
+```ts
+describe('getNoteChip', () => {
+	it('returns the card colour in light mode, where pastels already are the cards', () => {
+		for (const color of Object.keys(NOTE_COLORS) as NoteColor[]) {
+			expect(getNoteChip(color, false)).toBe(getNoteColor(color, false));
+		}
+	});
+
+	it('returns a distinct vivid chip in dark mode, not the card surface', () => {
+		for (const color of Object.keys(NOTE_COLORS_DARK) as NoteColor[]) {
+			expect(getNoteChip(color, true)).not.toBe(getNoteColor(color, true));
+		}
+	});
+
+	it('falls back to default for an unknown colour', () => {
+		expect(getNoteChip('unknown' as any, true)).toBe(NOTE_CHIPS_DARK.default);
+	});
+
+	it('has matching keys with the colour maps', () => {
+		expect(Object.keys(NOTE_CHIPS_DARK).sort()).toEqual(Object.keys(NOTE_COLORS_DARK).sort());
+	});
+
+	it('keeps every pair of chips far enough apart to tell apart at 28px', () => {
+		// The regression this guards: at low chroma coral/peach/blossom and
+		// fog/storm collapse into each other.
+		const entries = Object.entries(NOTE_CHIPS_DARK);
+		for (let i = 0; i < entries.length; i++) {
+			for (let j = i + 1; j < entries.length; j++) {
+				const [[nameA, a], [nameB, b]] = [entries[i], entries[j]];
+				const toRgb = (hex: string) => {
+					const n = parseInt(hex.slice(1), 16);
+					return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+				};
+				const [ra, ga, ba] = toRgb(a);
+				const [rb, gb, bb] = toRgb(b);
+				const distance = Math.hypot(ra - rb, ga - gb, ba - bb);
+				expect(distance, `${nameA} vs ${nameB}`).toBeGreaterThan(25);
+			}
+		}
+	});
+});
+```
+
+Extend the import at the top of the file:
+
+```ts
+import {
+	getNoteColor,
+	getNoteChip,
+	NOTE_COLORS,
+	NOTE_COLORS_DARK,
+	NOTE_CHIPS_DARK
+} from '$lib/utils/colors.js';
+import type { NoteColor } from '$lib/types/index.js';
+```
+
+- [ ] **Step 2: Run the tests to verify they fail**
+
+Run: `pnpm test:unit colors`
+Expected: FAIL — `getNoteChip is not a function` / `NOTE_CHIPS_DARK` undefined.
+
+- [ ] **Step 3: Add the chip map and accessor**
+
+Append to `src/lib/utils/colors.ts`, after `getNoteColor`:
+
+```ts
+/**
+ * Picker swatches are labels, not surfaces. A 28px circle at card lightness
+ * reads as a grey dot — small patches lose apparent saturation — so the dark
+ * picker uses vivid mid-lightness chips that share the card's hue but not its
+ * lightness. Light mode needs no equivalent: there the pastels are the cards.
+ */
+export const NOTE_CHIPS_DARK: Record<NoteColor, string> = {
+	default: '#8d857c',
+	coral: '#d04f43',
+	peach: '#cd7c42',
+	sand: '#c7b138',
+	mint: '#7bbd4c',
+	sage: '#47b89d',
+	fog: '#609abe',
+	storm: '#547bc0',
+	dusk: '#a965bd',
+	blossom: '#c05d78',
+	clay: '#b5954a',
+	chalk: '#c3c3c8'
+};
+
+export function getNoteChip(color: NoteColor, isDark: boolean): string {
+	if (!isDark) return getNoteColor(color, false);
+	return NOTE_CHIPS_DARK[color] ?? NOTE_CHIPS_DARK.default;
+}
+```
+
+- [ ] **Step 4: Run the tests to verify they pass**
+
+Run: `pnpm test:unit colors`
+Expected: PASS.
+
+- [ ] **Step 5: Point the picker at the chips**
+
+In `src/lib/components/ColorPicker.svelte`, change the import on line 2 and the style on line 19:
+
+```svelte
+	import { COLOR_OPTIONS, getNoteChip } from '$lib/utils/colors.js';
+```
+
+```svelte
+			style="background-color: {getNoteChip(option.value, getIsDarkMode())}"
+```
+
+Leave everything else alone — the 2px `--border-subtle` ring stays, and it's what gives each swatch its boundary regardless of fill.
+
+- [ ] **Step 6: Add the e2e scenario**
+
+Append inside the `test.describe.serial('Dark mode', ...)` block in `tests/e2e/dark-mode.spec.ts`:
+
+```ts
+	test('Scenario: Colour picker swatches are identifiable in dark mode', 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 opens the colour picker while editing a note
+		await page.goto('/');
+		await page.waitForLoadState('networkidle');
+		await page.getByTestId('new-note-btn').click();
+		await page.getByTestId('note-title-input').fill('Swatch Test');
+		await page.getByTestId('color-picker-toggle').click();
+		await expect(page.getByTestId('color-picker')).toBeVisible();
+
+		// Then a swatch shows its vivid chip rather than the muted card surface
+		await expect(page.getByTestId('color-coral')).toHaveCSS(
+			'background-color',
+			'rgb(208, 79, 67)'
+		);
+
+		await page.getByTestId('close-editor-btn').click();
+	});
+```
+
+- [ ] **Step 7: Verify**
+
+Run: `pnpm check`
+Expected: 0 errors.
+
+Run: `pnpm build && pnpm test:e2e dark-mode organization`
+Expected: PASS.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add src/lib/utils/colors.ts src/lib/utils/colors.test.ts src/lib/components/ColorPicker.svelte tests/e2e/dark-mode.spec.ts
+git commit -m "feat(theme): give the dark colour picker vivid identifiable chips"
+```
+
+---
+
+### Task 3: New dark CSS variables and checkbox accent
+
+**Files:**
+- Modify: `src/app.css:6-24` (`:root` — add `--accent-check` only), `src/app.css:26-42` (the `[data-theme="dark"]` block), `src/app.css:44-48` (`accent-color`)
+
+**Interfaces:**
+- Consumes: nothing. The `--text`/`--text-muted` values here must match the constants asserted in Task 1's tests (`#ece3d3`, `#b3a695`).
+- Produces: `--accent-check` custom property, available in both themes.
+
+- [ ] **Step 1: Add `--accent-check` to `:root`**
+
+In the `:root` block in `src/app.css`, after `--grid-dot`:
+
+```css
+	--grid-dot: #1a1a2e;
+	--accent-check: var(--primary);
+```
+
+- [ ] **Step 2: Replace the dark block**
+
+Replace the entire `[data-theme="dark"]` block with:
+
+```css
+[data-theme="dark"] {
+	--bg-base: #141312;
+	--bg-surface: #1e1c1b;
+	--primary: #e0a030;
+	--primary-hover: #f2b855;
+	--text: #ece3d3;
+	--text-muted: #b3a695;
+	--border: #57514b;
+	--border-subtle: #302d2b;
+	--destructive: #e2705c;
+	--error-bg: #3a2320;
+	--error-border: #5c3a34;
+	--error-text: #f0a898;
+	--success-bg: #1f2e1f;
+	--success-text: #8fc97a;
+	--card-shadow: 2px 2px 0px var(--border-subtle);
+	--card-shadow-hover: 3px 3px 0px var(--primary);
+	--grid-dot: #ece3d3;
+	/* Dimmed so a long done-list of gold checkboxes doesn't shout. */
+	--accent-check: #c8a44a;
+}
+```
+
+Two of these reverse earlier decisions on purpose: `--primary` is no longer shared with light mode (`#C8860A` reads mustard on ink), and `--border` is a warm mid-grey rather than the mirrored cream `#e8dcc8` (a bright 1px line on a dark background reads as glare, not structure).
+
+- [ ] **Step 3: Point `accent-color` at the new variable**
+
+In the `html, body` rule:
+
+```css
+html, body {
+	font-family: 'JetBrains Mono', monospace;
+	accent-color: var(--accent-check);
+	overscroll-behavior-y: none;
+}
+```
+
+- [ ] **Step 4: Verify light mode is untouched and dark mode renders**
+
+Run: `pnpm check`
+Expected: 0 errors.
+
+Run: `pnpm build && pnpm test:e2e dark-mode public-sharing`
+Expected: PASS. Task 1's e2e assertions cover the dark note colours; nothing asserts the chrome variables, so this step is proving no regression rather than proving the change.
+
+Then look at it: `pnpm preview`, open the app, switch to dark in Settings → Preferences, and check the notes grid, the sidebar, an open editor, and a checklist with done items. Contrast maths can't judge the pixel-grid overlay or the gold hover states.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/app.css
+git commit -m "feat(theme): replace dark surfaces, borders and accents with the warm ink palette"
+```
+
+---
+
+### Task 4: Sync the browser theme-colour with the new base
+
+**Files:**
+- Modify: `src/lib/utils/theme.svelte.ts:4`
+- Modify: `src/app.html:21`
+- Test: `src/lib/utils/theme.test.ts:40`
+
+**Interfaces:**
+- Consumes: `--bg-base` `#141312` from Task 3. These two hardcoded copies must equal it.
+- Produces: nothing.
+
+- [ ] **Step 1: Update the failing test first**
+
+In `src/lib/utils/theme.test.ts`:
+
+```ts
+	it('updates meta theme-color for dark mode', () => {
+		applyTheme('dark');
+		const meta = document.querySelector('meta[name="theme-color"]');
+		expect(meta?.getAttribute('content')).toBe('#141312');
+	});
+```
+
+- [ ] **Step 2: Run it to verify it fails**
+
+Run: `pnpm test:unit theme`
+Expected: FAIL — received `#1a1715`.
+
+- [ ] **Step 3: Update both hardcoded copies**
+
+`src/lib/utils/theme.svelte.ts` line 4:
+
+```ts
+const DARK_THEME_COLOR = '#141312';
+```
+
+`src/app.html` line 21, inside the FOUC script:
+
+```js
+            if (m) m.content = '#141312';
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+Run: `pnpm test:unit theme`
+Expected: PASS.
+
+- [ ] **Step 5: Verify and commit**
+
+Run: `pnpm check && pnpm test:unit`
+Expected: 0 errors, all unit tests pass.
+
+```bash
+git add src/lib/utils/theme.svelte.ts src/app.html src/lib/utils/theme.test.ts
+git commit -m "fix(theme): sync browser theme-colour with the new dark base"
+```
+
+---
+
+### Task 5: Document the palette
+
+**Files:**
+- Modify: `CLAUDE.md` (the "Design system: Retro Parchment" section)
+- Modify: `docs/ARCHITECTURE.md:155-165` (the dark mode section)
+
+**Interfaces:**
+- Consumes: everything from Tasks 1-4.
+- Produces: nothing.
+
+- [ ] **Step 1: Document the dark palette in `CLAUDE.md`**
+
+The colour table there lists only light values, which is why the dark palette drifted in the first place. After the existing table and the note about `src/lib/utils/colors.ts`, add:
+
+```markdown
+### Dark theme
+
+Dark mode overrides every colour variable in `[data-theme="dark"]` (`src/app.css`). It is not a
+mechanical inversion of light mode — two differences are deliberate:
+
+- **`--primary` differs per theme.** `#C8860A` on parchment, `#e0a030` on ink. The light gold reads
+  mustard on a dark background.
+- **`--border` is a warm mid-grey (`#57514b`), not mirrored cream.** A bright 1px line on a dark
+  background reads as glare rather than structure; the hard offset shadow carries the retro framing.
+
+Note colours have two representations, and they are not interchangeable:
+
+| Map | Function | Used by | Role |
+|---|---|---|---|
+| `NOTE_COLORS` / `NOTE_COLORS_DARK` | `getNoteColor(color, isDark)` | Cards, editor, share page | Quiet **surface** you read text on |
+| `NOTE_CHIPS_DARK` | `getNoteChip(color, isDark)` | `ColorPicker` only | Vivid **label** you identify at a glance |
+
+A dark card sits at ~18% lightness, where a 28px picker circle would read as a grey dot — small
+patches lose apparent saturation. Never fill a picker swatch with `getNoteColor()`. In light mode
+`getNoteChip()` returns the pastel card colour, because there the pastels *are* the cards.
+
+When changing any dark note colour, keep the invariants asserted in `src/lib/utils/colors.test.ts`:
+AA contrast against both `--text` and `--text-muted` on every surface, a narrow lightness band across
+the twelve, and no two chips closer than an RGB distance of 25.
+
+`--bg-base` is duplicated as a literal in `src/app.html` (FOUC script) and
+`src/lib/utils/theme.svelte.ts` (`DARK_THEME_COLOR`) for the browser theme-colour. Update all three
+together.
+```
+
+- [ ] **Step 2: Update `docs/ARCHITECTURE.md`**
+
+In the dark mode section, the line describing note colours currently mentions only `getNoteColor()`. Replace it with:
+
+```markdown
+- **Note card colors**: `getNoteColor()` in `src/lib/utils/colors.ts` accepts a `dark` boolean and
+  returns the appropriate surface variant per theme. Picker swatches use `getNoteChip()` instead —
+  in dark mode the card surfaces are too dark to be identifiable as small circles, so the picker
+  draws from a separate vivid `NOTE_CHIPS_DARK` map.
+```
+
+- [ ] **Step 3: Verify the docs match the code**
+
+Re-read both edited sections against `src/lib/utils/colors.ts` and `src/app.css`. Every function name, map name, file path and hex value must exist as written. No verification command can catch a wrong hex in prose — check it by eye.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add CLAUDE.md docs/ARCHITECTURE.md
+git commit -m "docs: document the dark palette and the card-vs-chip distinction"
+```
+
+---
+
+## Final verification
+
+- [ ] `pnpm check` — 0 errors
+- [ ] `pnpm test:unit` — all pass
+- [ ] `pnpm build && pnpm test:e2e` — full suite passes
+- [ ] Manual pass in dark mode: notes grid, sidebar, header, open editor, checklist with done items, colour picker, a public share link, an error state (e.g. a failed login), and light mode unchanged

docs/superpowers/specs/2026-07-31-dark-palette-design.md

@@ -0,0 +1,205 @@
+# Dark Theme Palette Rework — Design Spec
+
+**Date:** 2026-07-31
+**Status:** Approved
+**Supersedes the palette portion of:** `2026-03-20-dark-mode-design.md`
+
+## Summary
+
+The dark theme's colours were authored one at a time rather than as a set. The result: twelve note
+colours that collapse into indistinguishable dark mud, a picker of twelve grey dots, sepia-tinted
+surfaces, and a near-white editor outline that reads as glare. This spec replaces the dark palette
+with a systematically generated one, and splits the picker swatch from the card surface — they are
+different jobs and should not share a value.
+
+Light mode is unchanged.
+
+## Problems being fixed
+
+1. **Note colours are indistinguishable.** `coral #4a2522`, `peach #4a3020` and `clay #302e28` differ
+   by a few percent lightness with almost no chroma. Lightness wanders across the set (17%–19%) with
+   no consistent relationship, so they don't read as a family.
+2. **Several cards don't separate from the page.** `clay`, `chalk` and `default` sit within a few
+   percent of `--bg-base`, so cards lose their edges.
+3. **The picker is unreadable.** `ColorPicker.svelte` fills each swatch with the card background. A
+   28px circle at 18% lightness cannot read as a colour — small patches lose apparent saturation, so
+   twelve swatches become twelve grey dots.
+4. **Surfaces are sepia.** `--bg-base #1a1715` / `--bg-surface #2a2520` are brown-tinted; combined
+   with gold and cream on top, the UI reads dim rather than crisp.
+5. **The editor frame glares.** `--border` mirrors light mode's near-black ink as near-white cream.
+   The mirror is false: dark-on-light edges absorb, light-on-dark edges emit. At equal contrast the
+   inverted border reads as a glowing rectangle, not as structure.
+
+## Decisions
+
+| # | Decision | Choice |
+|---|---|---|
+| 1 | Base surfaces | **Warm ink** — pull the brown out, keep a trace of warmth |
+| 2 | Card lightness | **Deep tinted (~18%)** — colours identifiable, page still reads dark |
+| 3 | Picker swatches | **Vivid mid-lightness chips**, decoupled from the card colour |
+| 4 | Chip scope | **Dark mode only** — light mode keeps its pastel swatches |
+| 5 | Chrome | **Quiet frame** — `--border` becomes warm mid-grey, not cream |
+
+On (4): in light mode the pastels genuinely *are* the card colours, so they preview correctly there.
+Only dark mode needs the split.
+
+## 1. CSS variables (`src/app.css`)
+
+Replace the `[data-theme="dark"]` block:
+
+```css
+[data-theme="dark"] {
+  --bg-base: #141312;
+  --bg-surface: #1e1c1b;
+  --primary: #e0a030;
+  --primary-hover: #f2b855;
+  --text: #ece3d3;
+  --text-muted: #b3a695;
+  --border: #57514b;
+  --border-subtle: #302d2b;
+  --destructive: #e2705c;
+  --error-bg: #3a2320;
+  --error-border: #5c3a34;
+  --error-text: #f0a898;
+  --success-bg: #1f2e1f;
+  --success-text: #8fc97a;
+  --card-shadow: 2px 2px 0px var(--border-subtle);
+  --card-shadow-hover: 3px 3px 0px var(--primary);
+  --grid-dot: #ece3d3;
+  --accent-check: #c8a44a;
+}
+```
+
+Three of these are notable changes rather than tweaks:
+
+- **`--primary` is no longer shared across themes.** `#C8860A` was chosen for parchment; on ink it
+  reads mustard. Dark mode gets `#e0a030` (8.17:1 on the page).
+- **`--border` becomes `#57514b`** instead of cream `#e8dcc8`. Frames the editor without glare; the
+  hard offset shadow still carries the retro structure.
+- **`--text-muted` lifts `#9a8e7e` → `#b3a695`.** Required for AA on the tinted cards. This is the
+  widest-reaching change in the spec — every muted element in dark mode shifts slightly.
+
+### Checkbox accent
+
+`accent-color: var(--primary)` makes a long done-list shout in dark mode. Add a dedicated variable so
+the checkbox can be dimmed independently of links and the brand:
+
+```css
+:root { --accent-check: var(--primary); }   /* light: unchanged */
+html, body { accent-color: var(--accent-check); }
+```
+
+## 2. Note card colours (`src/lib/utils/colors.ts`)
+
+Replace `NOTE_COLORS_DARK`. Every entry keeps its light counterpart's hue, holds lightness
+near-constant against today's values (measured average change: +4.1 saturation points, −0.18
+lightness points), and nudges two crowded hues apart (`blossom` and `storm` shift toward pink
+and true blue respectively) so the twelve read as distinguishable siblings rather than a smudge.
+The visible improvement in dark mode comes from the base surfaces, the picker chips, the
+softened border, and the lifted gold — not from the card surfaces, which are close in chroma to
+the previous dark values.
+
+```ts
+export const NOTE_COLORS_DARK: Record<NoteColor, { bg: string; label: string }> = {
+  default: { bg: '#21201f', label: 'Default' },
+  coral:   { bg: '#3f1f1c', label: 'Coral' },
+  peach:   { bg: '#3f2b1c', label: 'Peach' },
+  sand:    { bg: '#3c371b', label: 'Sand' },
+  mint:    { bg: '#2a3d1d', label: 'Mint' },
+  sage:    { bg: '#1f3d36', label: 'Sage' },
+  fog:     { bg: '#253946', label: 'Fog' },
+  storm:   { bg: '#1d283d', label: 'Storm' },
+  dusk:    { bg: '#3d2843', label: 'Dusk' },
+  blossom: { bg: '#3d2129', label: 'Blossom' },
+  clay:    { bg: '#363126', label: 'Clay' },
+  chalk:   { bg: '#303036', label: 'Chalk' }
+};
+```
+
+**Two hues are deliberately nudged apart.** At low chroma, `coral`/`peach`/`blossom` are three
+barely-different oranges and `fog`/`storm` are two barely-different blues — invisible in light mode,
+but they collide once chroma rises. So in dark mode `blossom` moves toward pink (H344) and `storm`
+toward true blue (H218). Their light-mode values are untouched, so the same note is a slightly
+different hue in each theme. This is an accepted trade: distinguishable beats identical.
+
+Measured on these values: body text ≥ 9.25:1, muted text ≥ 4.94:1, links ≥ 5.18:1 on every card.
+All clear WCAG AA.
+
+## 3. Picker chips (`src/lib/utils/colors.ts`)
+
+New map, used only by the picker, only in dark mode:
+
+```ts
+export const NOTE_CHIPS_DARK: Record<NoteColor, string> = {
+  default: '#8d857c', coral: '#d04f43', peach: '#cd7c42', sand:  '#c7b138',
+  mint:    '#7bbd4c', sage:  '#47b89d', fog:   '#609abe', storm: '#547bc0',
+  dusk:    '#a965bd', blossom: '#c05d78', clay: '#b5954a', chalk: '#c3c3c8'
+};
+
+/** Picker swatch colour: a vivid label, not the card surface. */
+export function getNoteChip(color: NoteColor, isDark: boolean): string {
+  if (!isDark) return getNoteColor(color, false);   // light mode: pastel == card
+  return NOTE_CHIPS_DARK[color] ?? NOTE_CHIPS_DARK.default;
+}
+```
+
+`default` and `chalk` stay deliberately neutral (grey and off-white) — they are the "no colour"
+slots. Chips are non-text UI, so WCAG's bar is 3:1, not 4:1; every chip clears that comfortably
+against `--bg-surface`, with the lowest at `coral` 3.95:1 (`storm` 4.02:1, `blossom` 4.10:1). The
+closest pair (`fog`/`storm`) is separated by an RGB distance of 33, which is comfortably tellable
+apart at 28px.
+
+`ColorPicker.svelte` switches from `getNoteColor` to `getNoteChip`. Nothing else uses chips — cards,
+the editor and the public share page keep calling `getNoteColor`.
+
+## 4. Theme-colour meta tag
+
+`#1a1715` is hardcoded in two places that must stay in sync with `--bg-base`:
+
+- `src/app.html` (the FOUC script, `m.content = '#1a1715'`)
+- `src/lib/utils/theme.svelte.ts` (`DARK_THEME_COLOR`)
+
+Both become `#141312`.
+
+## Files to modify
+
+| File | Change |
+|---|---|
+| `src/app.css` | Rewrite `[data-theme="dark"]`; add `--accent-check` to `:root`; point `accent-color` at it |
+| `src/lib/utils/colors.ts` | New `NOTE_COLORS_DARK`; add `NOTE_CHIPS_DARK` + `getNoteChip()` |
+| `src/lib/components/ColorPicker.svelte` | Use `getNoteChip()` instead of `getNoteColor()` |
+| `src/app.html` | Theme-colour `#1a1715` → `#141312` |
+| `src/lib/utils/theme.svelte.ts` | `DARK_THEME_COLOR` → `#141312` |
+| `src/lib/utils/colors.test.ts` | Update dark `default` assertions; add `getNoteChip` coverage |
+| `src/lib/utils/theme.test.ts` | Update theme-colour assertion |
+| `tests/e2e/dark-mode.spec.ts` | Update asserted dark default `rgb(42,37,32)` → `rgb(33,32,31)` |
+| `tests/e2e/public-sharing.spec.ts` | Update asserted dark `fog` `rgb(34,46,58)` → `rgb(37,57,70)` |
+| `CLAUDE.md` | Document the dark palette and the card-vs-chip distinction in the design system section |
+| `docs/ARCHITECTURE.md` | Update the dark mode section for `getNoteChip` |
+
+Nothing needs to change in `NoteCard`, `NoteEditor`, or the share page — they already resolve colour
+through `getNoteColor`, so they inherit the new palette.
+
+## Testing
+
+**Unit (`colors.test.ts`)** — the palette is data, so test its invariants rather than its hex values:
+
+- `getNoteChip(c, false)` equals `getNoteColor(c, false)` for all twelve (light mode is unchanged)
+- `getNoteChip(c, true)` differs from `getNoteColor(c, true)` for all twelve (chip ≠ surface)
+- unknown colour falls back to `default` in both maps
+- every dark card holds ≥ 4.5:1 against `--text-muted #b3a695` — this is the invariant that broke
+  before, so it gets asserted rather than eyeballed
+- no two dark chips are within an RGB distance of 25 (guards the crowded-hue regression)
+
+**E2E (`dark-mode.spec.ts`)** — extend the existing "note cards use dark colors" scenario to assert a
+picker swatch is *not* the card background, which is the bug in user-visible terms.
+
+**Manual** — the pixel-grid overlay and gold hover states want a real look on device; contrast maths
+can't judge those.
+
+## Out of scope
+
+- Light mode, including its picker
+- The 12-colour set itself (no colours added, removed, or renamed)
+- Per-note custom colours
+- `prefers-contrast` / high-contrast variants

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.28.4",
+  "version": "0.31.0",
   "type": "module",
   "packageManager": "pnpm@9.15.9",
   "license": "MIT",

src/app.css

@@ -21,29 +21,44 @@
 	--card-shadow: 2px 2px 0px var(--border-subtle);
 	--card-shadow-hover: 3px 3px 0px var(--primary);
 	--grid-dot: #1a1a2e;
+	--accent-check: var(--primary);
+	/* Tint source for hover/active washes. Light mode reuses the ink border, so
+	   light styling is byte-identical; dark mode keeps the cream that --border
+	   used to supply, because a mid-grey wash is invisible on a dark surface. */
+	--hover-wash: var(--border);
 }
 
 [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;
+	--bg-base: #141312;
+	--bg-surface: #1e1c1b;
+	--primary: #e0a030;
+	--primary-hover: #f2b855;
+	--text: #ece3d3;
+	--text-muted: #b3a695;
+	--border: #57514b;
+	--border-subtle: #302d2b;
+	--destructive: #e2705c;
+	--error-bg: #3a2320;
+	--error-border: #5c3a34;
+	--error-text: #f0a898;
+	--success-bg: #1f2e1f;
+	--success-text: #8fc97a;
 	--card-shadow: 2px 2px 0px var(--border-subtle);
 	--card-shadow-hover: 3px 3px 0px var(--primary);
-	--grid-dot: #e8dcc8;
+	--grid-dot: #ece3d3;
+	/* Dimmed so a long done-list of gold checkboxes doesn't shout. */
+	--accent-check: #c8a44a;
+	--hover-wash: #ece3d3;
 }
 
-body {
+html, body {
 	font-family: 'JetBrains Mono', monospace;
-	accent-color: var(--primary);
+	accent-color: var(--accent-check);
+	overscroll-behavior-y: none;
+}
+
+body.editor-scroll-locked {
+	overflow: hidden;
 }
 
 body::before {
@@ -68,6 +83,11 @@ body::before {
 	to { opacity: 1; transform: scale(1) translateY(0); }
 }
 
+@keyframes slide-up {
+	from { transform: translateY(100%); }
+	to { transform: translateY(0); }
+}
+
 /* Prose overrides for parchment theme */
 .prose {
 	--tw-prose-body: var(--text);

src/app.d.ts

@@ -15,7 +15,9 @@ declare global {
 			} | null;
 		}
 		// interface PageData {}
-		// interface PageState {}
+		interface PageState {
+			noteEditorOpen?: boolean;
+		}
 		// interface Platform {}
 	}
 }

src/app.html

@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- interactive-widget=resizes-content: on Android the keyboard shrinks the layout viewport via
+         the native inset path, so bottom-anchored UI (editor toolbar) lands exactly on the keyboard —
+         Chromium's visualViewport.height can under-report by the nav-bar height. iOS ignores this
+         attribute and relies on the visualViewport tracking in NoteEditor instead. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
     <meta name="theme-color" content="#f0e6d3" />
     <script>
       (function() {
@@ -14,7 +18,7 @@
           if (t === 'dark') {
             document.documentElement.setAttribute('data-theme', 'dark');
             var m = document.querySelector('meta[name="theme-color"]');
-            if (m) m.content = '#1a1715';
+            if (m) m.content = '#141312';
           }
         } catch(e) {}
       })();

src/lib/components/ColorPicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { COLOR_OPTIONS, getNoteColor } from '$lib/utils/colors.js';
+	import { COLOR_OPTIONS, getNoteChip } from '$lib/utils/colors.js';
 	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
 	import type { NoteColor } from '$lib/types/index.js';
 
@@ -16,7 +16,7 @@
 		<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: {getNoteChip(option.value, getIsDarkMode())}"
 			title={option.label}
 			data-testid="color-{option.value}"
 		></button>

src/lib/components/FormattingToolbar.svelte

@@ -44,24 +44,57 @@
 	function getAttrs(type: string) { void tick; return editor?.getAttributes(type) ?? {}; }
 
 	let openDropdown: string | null = $state(null);
+	let dropdownAnchorEl: HTMLElement | null = $state(null);
 	let linkUrl: string = $state('');
 	let linkInput: HTMLInputElement | undefined = $state();
+	let ignorePositionInvalidationUntil = 0;
 
-	function toggleDropdown(name: string) {
+	const dropdownGap = 4;
+	const viewportMargin = 10;
+
+	function toggleDropdown(name: string, anchorEl: HTMLElement) {
 		if (openDropdown === name) {
-			openDropdown = null;
+			closeDropdowns();
 		} else {
+			ignorePositionInvalidationUntil = performance.now() + 600;
 			openDropdown = name;
+			dropdownAnchorEl = anchorEl;
 			if (name === 'link') {
 				linkUrl = editor?.getAttributes('link').href ?? '';
-				// Focus input after Svelte renders the popover
 				requestAnimationFrame(() => linkInput?.focus());
 			}
 		}
 	}
 
+	function handleDropdownClick(name: string, event: MouseEvent) {
+		toggleDropdown(name, event.currentTarget as HTMLElement);
+	}
+
+	function preventToolbarMouseFocus(event: MouseEvent) {
+		if (event.button === 0) event.preventDefault();
+	}
+
+	function handleCommandClick(command: () => void) {
+		command();
+	}
+
 	function closeDropdowns() {
 		openDropdown = null;
+		dropdownAnchorEl = null;
+	}
+
+	function closeDropdownsAfterPositionChange() {
+		if (!openDropdown || performance.now() < ignorePositionInvalidationUntil) return;
+		closeDropdowns();
+	}
+
+	function getDropdownStyle(rect: DOMRect, width: number): string {
+		const left = Math.max(viewportMargin, Math.min(rect.left, window.innerWidth - width - viewportMargin));
+		// CSS `bottom` on position:fixed and getBoundingClientRect() both use layout-viewport
+		// coordinates, so the reference height must be innerHeight — visualViewport.height is
+		// smaller while the keyboard is open and would push the dropdown behind the keyboard.
+		const bottom = window.innerHeight - rect.top + dropdownGap;
+		return `bottom: ${bottom}px; left: ${left}px;`;
 	}
 
 	function applyLink() {
@@ -88,15 +121,15 @@
 	const chevronSize = 14;
 
 	function btnClass(active: boolean = false, disabled: boolean = false): string {
-		return `shrink-0 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''} ${disabled ? 'opacity-30' : ''}`;
+		return `shrink-0 rounded p-1.5 text-[var(--text)] hover:bg-[var(--hover-wash)]/10 ${active ? 'text-[var(--primary)] bg-[var(--hover-wash)]/10' : ''} ${disabled ? 'opacity-30' : ''}`;
 	}
 
 	function dropdownBtnClass(active: boolean = false): string {
-		return `shrink-0 flex items-center gap-0.5 rounded p-1.5 text-[var(--text)] hover:bg-[var(--border)]/10 ${active ? 'text-[var(--primary)] bg-[var(--border)]/10' : ''}`;
+		return `shrink-0 flex items-center gap-0.5 rounded p-1.5 text-[var(--text)] hover:bg-[var(--hover-wash)]/10 ${active ? 'text-[var(--primary)] bg-[var(--hover-wash)]/10' : ''}`;
 	}
 
 	function dropdownItemClass(active: boolean = false): string {
-		return `flex w-full items-center gap-2 rounded px-3 py-1.5 text-sm text-[var(--text)] hover:bg-[var(--border)]/5 ${active ? 'bg-[var(--border)]/5' : ''}`;
+		return `flex w-full items-center gap-2 rounded px-3 py-1.5 text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/5 ${active ? 'bg-[var(--hover-wash)]/5' : ''}`;
 	}
 
 	function handlePointerDown(event: PointerEvent) {
@@ -112,17 +145,32 @@
 			closeDropdowns();
 		}
 	}
+
+	$effect(() => {
+		if (!openDropdown || !window.visualViewport) return;
+
+		window.visualViewport.addEventListener('resize', closeDropdownsAfterPositionChange);
+		window.visualViewport.addEventListener('scroll', closeDropdownsAfterPositionChange);
+		return () => {
+			window.visualViewport?.removeEventListener('resize', closeDropdownsAfterPositionChange);
+			window.visualViewport?.removeEventListener('scroll', closeDropdownsAfterPositionChange);
+		};
+	});
 </script>
 
 <svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
+<svelte:window onscroll={closeDropdownsAfterPositionChange} onresize={closeDropdownsAfterPositionChange} />
 
 <div
-	class="flex flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
+	class="flex overflow-x-auto md:flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1 scrollbar-hide"
+	style="scrollbar-width: none; -ms-overflow-style: none;"
 	data-testid="formatting-toolbar"
+	onscroll={closeDropdownsAfterPositionChange}
 >
 	<!-- Undo/Redo -->
 	<button
-		onclick={() => editor?.chain().focus().undo().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().undo().run())}
 		disabled={!canUndo()}
 		class={btnClass(false, !canUndo())}
 		title="Undo"
@@ -131,7 +179,8 @@
 		<Undo2 size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().redo().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().redo().run())}
 		disabled={!canRedo()}
 		class={btnClass(false, !canRedo())}
 		title="Redo"
@@ -144,7 +193,8 @@
 
 	<!-- Inline -->
 	<button
-		onclick={() => editor?.chain().focus().toggleBold().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleBold().run())}
 		class={btnClass(isActive('bold'))}
 		title="Bold (Ctrl+B)"
 		data-testid="format-bold"
@@ -152,7 +202,8 @@
 		<Bold size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleItalic().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleItalic().run())}
 		class={btnClass(isActive('italic'))}
 		title="Italic (Ctrl+I)"
 		data-testid="format-italic"
@@ -160,7 +211,8 @@
 		<Italic size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleStrike().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleStrike().run())}
 		class={btnClass(isActive('strike'))}
 		title="Strikethrough (Ctrl+Shift+X)"
 		data-testid="format-strikethrough"
@@ -168,7 +220,8 @@
 		<Strikethrough size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleUnderline().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleUnderline().run())}
 		class={btnClass(isActive('underline'))}
 		title="Underline (Ctrl+U)"
 		data-testid="format-underline"
@@ -179,9 +232,10 @@
 	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
 
 	<!-- Heading dropdown -->
-	<div class="relative" data-dropdown="heading">
+	<div data-dropdown="heading">
 		<button
-			onclick={() => toggleDropdown('heading')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('heading', e)}
 			class={dropdownBtnClass(isActive('heading'))}
 			title="Heading"
 			data-testid="format-heading"
@@ -189,40 +243,13 @@
 			<Heading size={iconSize} />
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'heading'}
-			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('heading', { level: 1 }))}
-					data-testid="format-h1"
-				>
-					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
-					<span class="font-semibold">Heading 1</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('heading', { level: 2 }))}
-					data-testid="format-h2"
-				>
-					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
-					<span>Heading 2</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('heading', { level: 3 }))}
-					data-testid="format-h3"
-				>
-					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
-					<span>Heading 3</span>
-				</button>
-			</div>
-		{/if}
 	</div>
 
 	<!-- List dropdown -->
-	<div class="relative" data-dropdown="list">
+	<div data-dropdown="list">
 		<button
-			onclick={() => toggleDropdown('list')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('list', e)}
 			class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList') || isActive('taskList'))}
 			title="Lists"
 			data-testid="format-list"
@@ -230,98 +257,26 @@
 			<List size={iconSize} />
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'list'}
-			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('bulletList'))}
-					data-testid="format-bullet-list"
-				>
-					<List size={iconSize} />
-					<span>Bullet list</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('orderedList'))}
-					data-testid="format-ordered-list"
-				>
-					<ListOrdered size={iconSize} />
-					<span>Ordered list</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleTaskList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive('taskList'))}
-					data-testid="format-task-list"
-				>
-					<ListChecks size={iconSize} />
-					<span>Task list</span>
-				</button>
-			</div>
-		{/if}
 	</div>
 
 	<!-- Link popover -->
-	<div class="relative" data-dropdown="link">
+	<div data-dropdown="link">
 		<button
-			onclick={() => toggleDropdown('link')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('link', e)}
 			class={btnClass(isActive('link'))}
 			title="Insert link (Ctrl+K)"
 			data-testid="format-link"
 		>
 			<Link size={iconSize} />
 		</button>
-		{#if openDropdown === 'link'}
-			<div class="absolute left-1/2 bottom-full z-50 mb-1 -translate-x-1/2 rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5">
-				<form
-					class="flex items-center gap-1"
-					onsubmit={(e) => { e.preventDefault(); applyLink(); }}
-				>
-					<input
-						bind:this={linkInput}
-						bind:value={linkUrl}
-						type="url"
-						placeholder="Paste a link..."
-						class="w-44 bg-transparent px-1.5 py-1 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
-						data-testid="format-link-input"
-					/>
-					<button
-						type="submit"
-						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)]"
-						title="Apply link"
-						data-testid="format-link-apply"
-					>
-						<CornerDownLeft size={16} />
-					</button>
-					<div class="mx-0.5 h-4 w-px bg-[var(--border-subtle)]"></div>
-					<button
-						type="button"
-						onclick={openLink}
-						disabled={!getAttrs('link').href}
-						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)] disabled:opacity-30"
-						title="Open link"
-						data-testid="format-link-open"
-					>
-						<ExternalLink size={16} />
-					</button>
-					<button
-						type="button"
-						onclick={removeLink}
-						disabled={!isActive('link')}
-						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-red-500 disabled:opacity-30"
-						title="Remove link"
-						data-testid="format-unlink"
-					>
-						<Trash2 size={16} />
-					</button>
-				</form>
-			</div>
-		{/if}
 	</div>
 
 	<!-- Table dropdown -->
-	<div class="relative" data-dropdown="table">
+	<div data-dropdown="table">
 		<button
-			onclick={() => toggleDropdown('table')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('table', e)}
 			class={dropdownBtnClass(isActive('table'))}
 			title="Table"
 			data-testid="format-table"
@@ -329,68 +284,13 @@
 			<Table2 size={iconSize} />
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'table'}
-			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-table-insert"
-				>
-					<Table2 size={iconSize} />
-					<span>Insert table</span>
-				</button>
-				{#if isActive('table')}
-					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-					<button
-						onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-add-row"
-					>
-						<BetweenHorizontalEnd size={iconSize} />
-						<span>Add row</span>
-					</button>
-					<button
-						onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-add-col"
-					>
-						<BetweenVerticalEnd size={iconSize} />
-						<span>Add column</span>
-					</button>
-					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-					<button
-						onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-delete-row"
-					>
-						<Minus size={iconSize} />
-						<span>Delete row</span>
-					</button>
-					<button
-						onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
-						class={dropdownItemClass()}
-						data-testid="format-table-delete-col"
-					>
-						<Minus size={iconSize} />
-						<span>Delete column</span>
-					</button>
-					<button
-						onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
-						class={`${dropdownItemClass()} text-[var(--destructive)]`}
-						data-testid="format-table-delete"
-					>
-						<RemoveFormatting size={iconSize} />
-						<span>Delete table</span>
-					</button>
-				{/if}
-			</div>
-		{/if}
 	</div>
 
 	<!-- Alignment dropdown -->
-	<div class="relative" data-dropdown="align">
+	<div data-dropdown="align">
 		<button
-			onclick={() => toggleDropdown('align')}
+			onmousedown={preventToolbarMouseFocus}
+			onclick={(e) => handleDropdownClick('align', e)}
 			class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))}
 			title="Text alignment"
 			data-testid="format-align"
@@ -406,49 +306,14 @@
 			{/if}
 			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'align'}
-			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'left' }))}
-					data-testid="format-align-left"
-				>
-					<AlignLeft size={iconSize} />
-					<span>Left</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'center' }))}
-					data-testid="format-align-center"
-				>
-					<AlignCenter size={iconSize} />
-					<span>Center</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'right' }))}
-					data-testid="format-align-right"
-				>
-					<AlignRight size={iconSize} />
-					<span>Right</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
-					class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
-					data-testid="format-align-justify"
-				>
-					<AlignJustify size={iconSize} />
-					<span>Justify</span>
-				</button>
-			</div>
-		{/if}
 	</div>
 
 	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
 
 	<!-- Block-level formatting -->
 	<button
-		onclick={() => editor?.chain().focus().toggleCode().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleCode().run())}
 		class={btnClass(isActive('code'))}
 		title="Inline code"
 		data-testid="format-code"
@@ -456,7 +321,8 @@
 		<Code size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleBlockquote().run())}
 		class={btnClass(isActive('blockquote'))}
 		title="Blockquote"
 		data-testid="format-blockquote"
@@ -464,7 +330,8 @@
 		<TextQuote size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().toggleCodeBlock().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().toggleCodeBlock().run())}
 		class={btnClass(isActive('codeBlock'))}
 		title="Code block"
 		data-testid="format-code-block"
@@ -472,7 +339,8 @@
 		<CodeXml size={iconSize} />
 	</button>
 	<button
-		onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+		onmousedown={preventToolbarMouseFocus}
+		onclick={() => handleCommandClick(() => editor?.chain().focus().setHorizontalRule().run())}
 		class={btnClass()}
 		title="Divider"
 		data-testid="format-hr"
@@ -480,3 +348,244 @@
 		<Minus size={iconSize} />
 	</button>
 </div>
+
+<!-- Render dropdown menus in a fixed portal so they aren't clipped by overflow-x-auto -->
+{#if openDropdown && dropdownAnchorEl}
+	{@const rect = dropdownAnchorEl.getBoundingClientRect()}
+	
+	{#if openDropdown === 'heading'}
+		<div
+			class="fixed z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 170)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('heading', { level: 1 }))}
+				data-testid="format-h1"
+			>
+				<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
+				<span class="font-semibold">Heading 1</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('heading', { level: 2 }))}
+				data-testid="format-h2"
+			>
+				<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
+				<span>Heading 2</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('heading', { level: 3 }))}
+				data-testid="format-h3"
+			>
+				<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
+				<span>Heading 3</span>
+			</button>
+		</div>
+	{:else if openDropdown === 'list'}
+		<div
+			class="fixed z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 190)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('bulletList'))}
+				data-testid="format-bullet-list"
+			>
+				<List size={iconSize} />
+				<span>Bullet list</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('orderedList'))}
+				data-testid="format-ordered-list"
+			>
+				<ListOrdered size={iconSize} />
+				<span>Ordered list</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().toggleTaskList().run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive('taskList'))}
+				data-testid="format-task-list"
+			>
+				<ListChecks size={iconSize} />
+				<span>Task list</span>
+			</button>
+		</div>
+	{:else if openDropdown === 'link'}
+		<div
+			class="fixed z-50 mb-1 min-w-[200px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5"
+			style={getDropdownStyle(rect, 220)}
+			data-dropdown="true"
+		>
+			<form
+				class="flex items-center gap-1"
+				onsubmit={(e) => { e.preventDefault(); applyLink(); }}
+			>
+				<input
+					bind:this={linkInput}
+					bind:value={linkUrl}
+					type="url"
+					placeholder="Paste a link..."
+					class="w-44 bg-transparent px-1.5 py-1 text-base md:text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+					data-testid="format-link-input"
+				/>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					type="submit"
+					class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--hover-wash)]/5 hover:text-[var(--text)]"
+					title="Apply link"
+					data-testid="format-link-apply"
+				>
+					<CornerDownLeft size={16} />
+				</button>
+				<div class="mx-0.5 h-4 w-px bg-[var(--border-subtle)]"></div>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					type="button"
+					onclick={openLink}
+					disabled={!getAttrs('link').href}
+					class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--hover-wash)]/5 hover:text-[var(--text)] disabled:opacity-30"
+					title="Open link"
+					data-testid="format-link-open"
+				>
+					<ExternalLink size={16} />
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					type="button"
+					onclick={removeLink}
+					disabled={!isActive('link')}
+					class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--hover-wash)]/5 hover:text-[var(--destructive)] disabled:opacity-30"
+					title="Remove link"
+					data-testid="format-link-remove"
+				>
+					<Trash2 size={16} />
+				</button>
+			</form>
+		</div>
+	{:else if openDropdown === 'table'}
+		<div
+			class="fixed z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 210)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
+				class={dropdownItemClass()}
+				data-testid="format-insert-table"
+			>
+				<Table2 size={iconSize} />
+				<span>Insert table</span>
+			</button>
+			{#if isActive('table')}
+				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-add-row"
+				>
+					<BetweenHorizontalEnd size={iconSize} />
+					<span>Add row</span>
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-add-column"
+				>
+					<BetweenVerticalEnd size={iconSize} />
+					<span>Add column</span>
+				</button>
+				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-delete-row"
+				>
+					<Minus size={iconSize} />
+					<span>Delete row</span>
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
+					class={dropdownItemClass()}
+					data-testid="format-delete-column"
+				>
+					<Minus size={iconSize} />
+					<span>Delete column</span>
+				</button>
+				<button
+					onmousedown={preventToolbarMouseFocus}
+					onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
+					class={`${dropdownItemClass()} text-[var(--destructive)]`}
+					data-testid="format-delete-table"
+				>
+					<RemoveFormatting size={iconSize} />
+					<span>Delete table</span>
+				</button>
+			{/if}
+		</div>
+	{:else if openDropdown === 'align'}
+		<div
+			class="fixed z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1"
+			style={getDropdownStyle(rect, 180)}
+			data-dropdown="true"
+		>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'left' }))}
+				data-testid="format-align-left"
+			>
+				<AlignLeft size={iconSize} />
+				<span>Left</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'center' }))}
+				data-testid="format-align-center"
+			>
+				<AlignCenter size={iconSize} />
+				<span>Center</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'right' }))}
+				data-testid="format-align-right"
+			>
+				<AlignRight size={iconSize} />
+				<span>Right</span>
+			</button>
+			<button
+				onmousedown={preventToolbarMouseFocus}
+				onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
+				class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
+				data-testid="format-align-justify"
+			>
+				<AlignJustify size={iconSize} />
+				<span>Justify</span>
+			</button>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	[data-testid="formatting-toolbar"]::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/Layout/Header.svelte

@@ -21,7 +21,7 @@
 	{:else}
 		<button
 			onclick={onMenuToggle}
-			class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+			class="rounded-sm p-2 hover:bg-[var(--hover-wash)]/10"
 			aria-label="Toggle sidebar"
 		>
 			<Menu class="h-6 w-6 text-[var(--text)]" />
@@ -40,7 +40,7 @@
 		<!-- Mobile search icon -->
 		<button
 			onclick={() => (mobileSearchOpen = true)}
-			class="ml-auto rounded-sm p-2 hover:bg-[var(--border)]/10 lg:hidden"
+			class="ml-auto rounded-sm p-2 hover:bg-[var(--hover-wash)]/10 lg:hidden"
 			aria-label="Search"
 		>
 			<Search class="h-5 w-5 text-[var(--text)]" />

src/lib/components/NoteCard.svelte

@@ -118,7 +118,7 @@
 		{#if note.pinned}
 			<button
 				onclick={stop(() => togglePin(note.id, note.pinned))}
-				class="rounded-sm p-1 text-[var(--primary)] hover:bg-[var(--border)]/10"
+				class="rounded-sm p-1 text-[var(--primary)] hover:bg-[var(--hover-wash)]/10"
 				use:tooltip={"Unpin"}
 				data-testid="pin-indicator"
 			>
@@ -164,7 +164,7 @@
 		{#if $currentFilter === 'trashed'}
 			<button
 				onclick={stop(() => restoreNote(note.id))}
-				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+				class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 				use:tooltip={"Restore"}
 				data-testid="restore-btn"
 			>
@@ -172,7 +172,7 @@
 			</button>
 			<button
 				onclick={stop(() => deleteNote(note.id))}
-				class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+				class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 				use:tooltip={"Delete forever"}
 				data-testid="delete-forever-btn"
 			>
@@ -182,7 +182,7 @@
 			{#if !note.pinned}
 				<button
 					onclick={stop(() => togglePin(note.id, note.pinned))}
-					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"Pin"}
 					data-testid="pin-btn"
 				>
@@ -192,7 +192,7 @@
 			{#if $currentFilter === 'archived'}
 				<button
 					onclick={stop(() => unarchiveNote(note.id))}
-					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"Unarchive"}
 					data-testid="unarchive-btn"
 				>
@@ -201,7 +201,7 @@
 			{:else}
 				<button
 					onclick={stop(() => archiveNote(note.id))}
-					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"Archive"}
 					data-testid="archive-btn"
 				>
@@ -211,7 +211,7 @@
 			{#if note.isShared && !note.isOwner}
 				<button
 					onclick={stop(() => leaveNote(note.id))}
-					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"Leave note"}
 					data-testid="leave-btn"
 				>
@@ -220,7 +220,7 @@
 			{:else}
 				<button
 					onclick={stop(() => trashNote(note.id))}
-					class="rounded-sm p-1.5 hover:bg-[var(--border)]/10"
+					class="rounded-sm p-1.5 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"Trash"}
 					data-testid="trash-btn"
 				>

src/lib/components/NoteEditor.svelte

@@ -1,5 +1,11 @@
+<script module lang="ts">
+	let bodyScrollLockCount = 0;
+</script>
+
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { pushState } from '$app/navigation';
+	import { page } from '$app/state';
 	import ColorPicker from './ColorPicker.svelte';
 	import Checklist from './Checklist.svelte';
 	import FormattingToolbar from './FormattingToolbar.svelte';
@@ -28,6 +34,7 @@
 	import Trash2 from 'lucide-svelte/icons/trash-2';
 	import ListX from 'lucide-svelte/icons/list-x';
 	import Archive from 'lucide-svelte/icons/archive';
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
 	import { parseChecklist, serializeChecklist } from '$lib/utils/checklist.js';
 	import { tooltip } from '$lib/utils/tooltip.js';
 
@@ -160,19 +167,68 @@
 	// svelte-ignore state_referenced_locally
 	let attachmentsList = $state<Attachment[]>(note?.attachments ?? []);
 
+	let viewportHeight = $state('100dvh');
+	let viewportTop = $state('0px');
+
 	// Guard against mobile ghost clicks: on touch devices, a tap on the note card
 	// can produce a synthetic click that lands on editor buttons rendered at the same
 	// coordinates. Suppress pointer events on toolbar controls until mount completes.
 	let toolbarInteractive = $state(false);
 	onMount(() => {
+		function updateViewport() {
+			if (window.visualViewport) {
+				viewportHeight = `${window.visualViewport.height}px`;
+				viewportTop = `${window.visualViewport.offsetTop}px`;
+			} else {
+				viewportHeight = `${window.innerHeight}px`;
+				viewportTop = '0px';
+			}
+		}
+
+		updateViewport();
+		const handleVisualViewportChange = () => {
+			requestAnimationFrame(updateViewport);
+		};
+
+		if (window.visualViewport) {
+			window.visualViewport.addEventListener('resize', handleVisualViewportChange);
+			window.visualViewport.addEventListener('scroll', handleVisualViewportChange);
+		} else {
+			window.addEventListener('resize', handleVisualViewportChange);
+		}
+
 		const timer = setTimeout(() => { toolbarInteractive = true; }, 150);
-		return () => clearTimeout(timer);
+		
+		return () => {
+			clearTimeout(timer);
+			if (window.visualViewport) {
+				window.visualViewport.removeEventListener('resize', handleVisualViewportChange);
+				window.visualViewport.removeEventListener('scroll', handleVisualViewportChange);
+			} else {
+				window.removeEventListener('resize', handleVisualViewportChange);
+			}
+		};
+	});
+
+	// Lock body scroll while editor is open. Multiple editor instances can overlap during
+	// the ghost-click grace period, so keep the class until the last instance unmounts.
+	$effect(() => {
+		bodyScrollLockCount += 1;
+		document.body.classList.add('editor-scroll-locked');
+		return () => {
+			bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+			if (bodyScrollLockCount === 0) {
+				document.body.classList.remove('editor-scroll-locked');
+			}
+		};
 	});
 
 	let showShareDialog = $state(false);
 	let showHistory = $state(false);
 	let showOverflowMenu = $state(false);
-	let overflowBtnEl: HTMLButtonElement | undefined = $state();
+	let desktopOverflowBtnEl: HTMLButtonElement | undefined = $state();
+	let mobileOverflowBtnEl: HTMLButtonElement | undefined = $state();
+	let overflowAnchorEl: HTMLButtonElement | undefined = $state();
 	let overflowMenuEl: HTMLDivElement | undefined = $state();
 
 	// Close overflow menu when clicking outside
@@ -180,7 +236,7 @@
 		if (!showOverflowMenu) return;
 		function handleClickOutside(e: MouseEvent) {
 			const target = e.target as Node;
-			if (overflowBtnEl?.contains(target) || overflowMenuEl?.contains(target)) return;
+			if (overflowAnchorEl?.contains(target) || overflowMenuEl?.contains(target)) return;
 			showOverflowMenu = false;
 		}
 		// Use setTimeout to avoid the current click from closing the menu
@@ -350,8 +406,34 @@
 		pointerdownOnOverlay = false;
 	}
 
+	// Close on browser back — Android back button / iOS back swipe. The editor is
+	// fullscreen on mobile with no backdrop to tap, so back must dismiss it instead of
+	// leaving the page. On mount, push a shallow-routing history entry; navigating back
+	// pops it and closes the editor. UI closes pop the entry themselves via
+	// history.back() so no stale entry is left behind.
+	let historyEntryPushed = false;
+
+	onMount(() => {
+		// Reuse an existing entry (e.g. back-navigating to a note restored from the
+		// URL hash) instead of stacking a second one.
+		if (!page.state.noteEditorOpen) {
+			pushState('', { noteEditorOpen: true });
+		}
+		historyEntryPushed = true;
+	});
+
+	$effect(() => {
+		if (page.state.noteEditorOpen || !historyEntryPushed || closing) return;
+		historyEntryPushed = false;
+		saveAndClose();
+	});
+
 	function dismissOverlay() {
 		closing = true;
+		if (historyEntryPushed) {
+			historyEntryPushed = false;
+			history.back();
+		}
 		setTimeout(() => onClose(), 400);
 	}
 
@@ -440,7 +522,8 @@
 
 <!-- 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 left-0 w-full z-40 {closing ? '' : 'flex md:items-start justify-center md:overflow-y-auto md:bg-black/50 md:pt-20 md:pb-10 animate-[fade-in_150ms_ease-out]'}"
+	style="top: {viewportTop}; height: {viewportHeight};"
 	onpointerdown={handleOverlayPointerdown}
 	onpointerup={handleOverlayPointerup}
 	onkeydown={handleKeydown}
@@ -449,29 +532,52 @@
 	{#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]"
+		class="relative flex h-full w-full flex-col md:overflow-hidden border-0 md:h-auto md:max-w-xl md:mx-4 lg:max-w-2xl md:rounded-sm md:border md:border-[var(--border)] md:shadow-[var(--card-shadow)] animate-[slide-up_150ms_ease-out] md:animate-[pop-in_150ms_ease-out]"
 		style={bgStyle}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
 		data-testid="note-editor"
 	>
-		<!-- Title -->
-		<input
-			type="text"
-			placeholder="Title"
-			bind:value={title}
-			class="w-full bg-transparent px-4 pt-4 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
-			data-testid="note-title-input"
-			onkeydown={(e) => {
-				if (e.key === 'Enter') {
-					e.preventDefault();
-					if (textareaEl) textareaEl.focus();
-					else if (tiptapEditor) tiptapEditor.commands.focus('start');
-				}
-			}}
-		/>
+		<!-- Gap filler to hide iOS Safari keyboard animation/viewport lag -->
+		<div class="absolute top-full left-0 w-full h-[50vh] md:hidden" style={bgStyle}></div>
+		<!-- Header (Mobile: Back + Title, Desktop: just Title) -->
+		<div class="flex items-center gap-2 border-b md:border-b-0 border-[var(--border-subtle)] px-2 py-2 md:px-4 md:pt-4 md:pb-0 shrink-0 touch-none">
+			<!-- Mobile Back Button -->
+			<button
+				onclick={saveAndClose}
+				class="md:hidden rounded-sm p-2 text-[var(--text)] hover:bg-[var(--hover-wash)]/10 flex items-center shrink-0"
+				aria-label="Back"
+			>
+				<ArrowLeft class="h-6 w-6" />
+			</button>
+			<!-- Title -->
+			<input
+				type="text"
+				placeholder="Title"
+				bind:value={title}
+				class="flex-1 min-w-0 bg-transparent px-2 md:px-0 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+				data-testid="note-title-input"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						if (textareaEl) textareaEl.focus();
+						else if (tiptapEditor) tiptapEditor.commands.focus('start');
+					}
+				}}
+			/>
+			
+			<!-- Mobile Overflow Trigger -->
+			<button
+				bind:this={mobileOverflowBtnEl}
+				onclick={() => { showOverflowMenu = !showOverflowMenu; overflowAnchorEl = mobileOverflowBtnEl; }}
+				class="md:hidden rounded-sm p-2 hover:bg-[var(--hover-wash)]/10 text-[var(--text)] shrink-0"
+				data-testid="mobile-overflow-menu-btn"
+			>
+				<EllipsisVertical class="h-6 w-6" />
+			</button>
+		</div>
 
 		<!-- Content -->
-		<div class="max-h-[60vh] overflow-y-auto">
+		<div class="flex-1 overflow-y-auto overscroll-contain md:max-h-[60vh] md:flex-none">
 			{#if checklistMode}
 				<div class="px-4 py-2">
 					<Checklist {content} onChange={(c) => (content = c)} />
@@ -481,7 +587,7 @@
 					bind:this={textareaEl}
 					placeholder="Add a crumb..."
 					bind:value={content}
-					class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+					class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-base md:text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
 					rows="12"
 					data-testid="note-content-input"
 				></textarea>
@@ -498,7 +604,7 @@
 
 		<!-- Image attachments -->
 		{#if noteId && (showImageUpload || attachmentsList.length > 0)}
-			<div class="border-t border-[var(--border-subtle)] px-4 py-2">
+			<div class="border-t border-[var(--border-subtle)] px-4 py-2 shrink-0">
 				<ImageUpload
 					noteId={noteId}
 					attachments={attachmentsList}
@@ -512,14 +618,14 @@
 
 		<!-- Formatting toolbar -->
 		{#if !rawMarkdownMode && !checklistMode}
-			<div style={toolbarInteractive ? '' : 'pointer-events: none'}>
+			<div class="shrink-0 touch-pan-x" style={toolbarInteractive ? '' : 'pointer-events: none'}>
 				<FormattingToolbar editor={tiptapEditor} tick={editorTick} />
 			</div>
 		{/if}
 
-		<!-- Toolbar -->
+		<!-- Toolbar (Desktop only) -->
 		<div
-			class="flex items-center justify-between border-t border-[var(--border-subtle)] px-2 py-2"
+			class="hidden md:flex shrink-0 items-center justify-between border-t border-[var(--border-subtle)] px-2 py-2 touch-none"
 			style={toolbarInteractive ? '' : 'pointer-events: none'}
 		>
 			<div class="flex items-center gap-1">
@@ -527,7 +633,7 @@
 				<div class="relative">
 					<button
 						onclick={() => (showColorPicker = !showColorPicker)}
-						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+						class="rounded-sm p-2 hover:bg-[var(--hover-wash)]/10"
 						use:tooltip={"Background color"}
 						data-testid="color-picker-toggle"
 					>
@@ -543,7 +649,7 @@
 				<!-- Image attachment toggle -->
 				<button
 					onclick={toggleImageUpload}
-					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+					class="rounded-sm p-2 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"Attachments"}
 					data-testid="image-toggle"
 				>
@@ -554,7 +660,7 @@
 				{#if isOwner}
 					<button
 						onclick={toggleShareDialog}
-						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+						class="rounded-sm p-2 hover:bg-[var(--hover-wash)]/10"
 						use:tooltip={"Share"}
 						data-testid="share-toggle"
 					>
@@ -576,7 +682,7 @@
 				{#if !currentlyNew}
 					<button
 						onclick={handleArchive}
-						class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+						class="rounded-sm p-2 hover:bg-[var(--hover-wash)]/10"
 						use:tooltip={"Archive"}
 						data-testid="archive-note-btn"
 					>
@@ -586,9 +692,9 @@
 
 				<!-- Overflow menu trigger -->
 				<button
-					bind:this={overflowBtnEl}
-					onclick={() => (showOverflowMenu = !showOverflowMenu)}
-					class="rounded-sm p-2 hover:bg-[var(--border)]/10"
+					bind:this={desktopOverflowBtnEl}
+					onclick={() => { showOverflowMenu = !showOverflowMenu; overflowAnchorEl = desktopOverflowBtnEl; }}
+					class="rounded-sm p-2 hover:bg-[var(--hover-wash)]/10"
 					use:tooltip={"More"}
 					data-testid="overflow-menu-btn"
 				>
@@ -598,7 +704,7 @@
 
 			<button
 				onclick={saveAndClose}
-				class="rounded-sm px-4 py-1 text-sm font-medium text-[var(--text)] hover:bg-[var(--border)]/10"
+				class="hidden md:block rounded-sm px-4 py-1 text-sm font-medium text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 				data-testid="close-editor-btn"
 			>
 				Close
@@ -607,18 +713,71 @@
 	</div>
 
 	<!-- Overflow menu dropdown (rendered outside the card to escape overflow-hidden) -->
-	{#if showOverflowMenu && overflowBtnEl}
-		{@const rect = overflowBtnEl.getBoundingClientRect()}
+	{#if showOverflowMenu && overflowAnchorEl}
+		{@const rect = overflowAnchorEl.getBoundingClientRect()}
+		{@const isMobileTrigger = overflowAnchorEl === mobileOverflowBtnEl}
 		<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;"
+			style={isMobileTrigger ? `top: ${rect.bottom + 4}px; right: ${window.innerWidth - rect.right}px;` : `bottom: ${window.innerHeight - rect.top + 4}px; right: ${window.innerWidth - rect.right}px;`}
 			data-testid="overflow-menu"
 		>
+			<!-- Mobile-only actions -->
+			{#if isMobileTrigger}
+				<!-- Color picker -->
+				<div class="px-3 py-2 w-56 whitespace-normal">
+					<span class="mb-2 block text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">Color</span>
+					<ColorPicker selected={color} onSelect={(c) => { handleColorSelect(c); showOverflowMenu = false; }} />
+				</div>
+
+				<!-- Attachments -->
+				<button
+					onclick={() => { toggleImageUpload(); showOverflowMenu = false; }}
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
+				>
+					<ImageIcon class="h-4 w-4 {showImageUpload ? 'text-[var(--primary)]' : ''}" />
+					Attachments
+				</button>
+
+				<!-- Share -->
+				{#if isOwner}
+					<button
+						onclick={() => { toggleShareDialog(); showOverflowMenu = false; }}
+						class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
+					>
+						{#if hasPublicLink}
+							<Globe class="h-4 w-4 text-[var(--primary)]" />
+						{:else if isShared}
+							<Users class="h-4 w-4 text-[var(--primary)]" />
+						{:else}
+							<UserPlus class="h-4 w-4" />
+						{/if}
+						Share
+					</button>
+				{:else if isShared}
+					<div class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text-muted)]">
+						<Users class="h-4 w-4" />
+						Shared note
+					</div>
+				{/if}
+
+				<!-- Archive -->
+				{#if !currentlyNew}
+					<button
+						onclick={handleArchive}
+						class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
+					>
+						<Archive class="h-4 w-4" />
+						Archive
+					</button>
+				{/if}
+
+				<div class="my-1 border-t border-[var(--border-subtle)]"></div>
+			{/if}
 			<!-- 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"
+				class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 				data-testid="checklist-toggle"
 			>
 				{#if checklistMode}
@@ -634,7 +793,7 @@
 			{#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"
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 					data-testid="markdown-toggle"
 				>
 					{#if rawMarkdownMode}
@@ -651,7 +810,7 @@
 			{#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"
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 					data-testid="history-toggle"
 				>
 					<History class="h-4 w-4 {showHistory ? 'text-[var(--primary)]' : ''}" />
@@ -664,7 +823,7 @@
 				<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"
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--destructive)] hover:bg-[var(--hover-wash)]/10"
 					data-testid="trash-note-btn"
 				>
 					<Trash2 class="h-4 w-4" />
@@ -678,7 +837,7 @@
 				{#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"
+						class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 						data-testid="delete-checked-btn"
 					>
 						<Trash2 class="h-4 w-4" />
@@ -687,7 +846,7 @@
 				{/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"
+					class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 					data-testid="uncheck-all-btn"
 				>
 					<ListX class="h-4 w-4" />

src/lib/components/NoteHistory.svelte

@@ -116,7 +116,7 @@
 			</div>
 			<button
 				onclick={onClose}
-				class="rounded-sm p-1 hover:bg-[var(--border)]/10"
+				class="rounded-sm p-1 hover:bg-[var(--hover-wash)]/10"
 				title="Close history"
 				data-testid="close-history-btn"
 			>
@@ -140,7 +140,7 @@
 						{#each versions as v (v.id)}
 							<li>
 								<button
-									class="w-full px-3 py-3 text-left hover:bg-[var(--border)]/10 transition-colors {selectedVersion?.id === v.id ? 'bg-[var(--primary)]/10 border-l-2 border-[var(--primary)]' : ''}"
+									class="w-full px-3 py-3 text-left hover:bg-[var(--hover-wash)]/10 transition-colors {selectedVersion?.id === v.id ? 'bg-[var(--primary)]/10 border-l-2 border-[var(--primary)]' : ''}"
 									onclick={() => selectVersion(v.id)}
 									data-testid="version-item"
 								>
@@ -195,7 +195,7 @@
 										</button>
 										<button
 											onclick={() => (showConfirm = false)}
-											class="rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-xs font-medium text-[var(--text)] hover:bg-[var(--border)]/10"
+											class="rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-xs font-medium text-[var(--text)] hover:bg-[var(--hover-wash)]/10"
 										>
 											Cancel
 										</button>

src/lib/components/NotesView.svelte

@@ -4,6 +4,7 @@
 	import TagFilter from '$lib/components/TagFilter.svelte';
 	import { pinnedNotes, unpinnedNotes, selectedTag, currentFilter, notes, notesLoaded, loadNotes, updateSortOrders } from '$lib/stores/notes.js';
 	import { onMount } from 'svelte';
+	import { replaceState } from '$app/navigation';
 	import type { Note, NoteFilter } from '$lib/types/index.js';
 	import Plus from 'lucide-svelte/icons/plus';
 	import SquareCheck from 'lucide-svelte/icons/square-check';
@@ -27,16 +28,19 @@
 		loadNotes(filter);
 	});
 
+	// Use SvelteKit's replaceState (not the raw history API) so the router keeps
+	// ownership of the entry — NoteEditor's close-on-back relies on popstate being
+	// handled by SvelteKit.
 	function openEditor(note: Note) {
 		editingNote = note;
-		history.replaceState(null, '', `#${note.id}`);
+		replaceState(`#${note.id}`, {});
 	}
 
 	function closeEditor() {
 		editingNote = null;
 		showNewNote = false;
 		newNoteChecklist = false;
-		history.replaceState(null, '', location.pathname);
+		replaceState(location.pathname, {});
 	}
 
 	function handleReorder(noteIds: string[]) {

src/lib/components/SearchBar.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
+	import { searchQuery, searchResults } from '$lib/stores/notes.js';
 	import type { Note } from '$lib/types/index.js';
 	import Search from 'lucide-svelte/icons/search';
 	import X from 'lucide-svelte/icons/x';
 	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	import { onDestroy } from 'svelte';
 
 	interface Props {
 		onClose?: () => void;
@@ -12,41 +13,64 @@
 	let { onClose }: Props = $props();
 
 	let query = $state('');
-	let originalNotes: Note[] = [];
-	let isSearching = $state(false);
 	let inputEl: HTMLInputElement | undefined = $state();
+	let searchController: AbortController | undefined;
 
 	$effect(() => {
 		if (onClose) inputEl?.focus();
 	});
 
+	onDestroy(() => {
+		searchController?.abort();
+		searchQuery.set('');
+		searchResults.set([]);
+	});
+
 	async function handleSearch() {
-		if (!query.trim()) {
-			if (isSearching) {
-				notes.set(originalNotes);
-				isSearching = false;
-			}
+		searchController?.abort();
+		searchController = undefined;
+
+		const trimmedQuery = query.trim();
+
+		if (!trimmedQuery) {
+			searchQuery.set('');
+			searchResults.set([]);
 			return;
 		}
 
-		if (!isSearching) {
-			notes.subscribe((n) => (originalNotes = n))();
-			isSearching = true;
-		}
+		const controller = new AbortController();
+		searchController = controller;
 
-		const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
-		if (res.ok) {
-			const results = await res.json();
-			notes.set(results);
+		try {
+			const res = await fetch(`/api/search?q=${encodeURIComponent(trimmedQuery)}`, {
+				signal: controller.signal
+			});
+			if (res.ok) {
+				const results: Note[] = await res.json();
+				if (searchController !== controller || query.trim() !== trimmedQuery) return;
+				// Commit the query alongside its results so the view switches to the
+				// (possibly empty) result set only once it's ready — this avoids
+				// flashing an empty state over the current notes while the request is
+				// in flight, and keeps searchQuery consistent with searchResults on
+				// a failed request (neither updates).
+				searchResults.set(results);
+				searchQuery.set(trimmedQuery);
+			}
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === 'AbortError')) {
+				console.error('Search failed:', error);
+			}
+		} finally {
+			if (searchController === controller) searchController = undefined;
 		}
 	}
 
 	function clearSearch() {
+		searchController?.abort();
+		searchController = undefined;
 		query = '';
-		if (isSearching) {
-			notes.set(originalNotes);
-			isSearching = false;
-		}
+		searchQuery.set('');
+		searchResults.set([]);
 	}
 
 	function close() {

src/lib/components/ShareDialog.svelte

@@ -168,7 +168,7 @@
 			<h2 class="text-sm font-semibold text-[var(--text)]">Share note</h2>
 			<button
 				onclick={onClose}
-				class="rounded-sm p-1 hover:bg-[var(--border)]/10"
+				class="rounded-sm p-1 hover:bg-[var(--hover-wash)]/10"
 				title="Close"
 			>
 				<X class="h-4 w-4" />
@@ -277,7 +277,7 @@
 				</li>
 				<!-- Collaborators -->
 				{#each collaborators as collab}
-					<li class="flex items-center justify-between rounded-sm px-2 py-1.5 hover:bg-[var(--border)]/10" data-testid="share-collaborator">
+					<li class="flex items-center justify-between rounded-sm px-2 py-1.5 hover:bg-[var(--hover-wash)]/10" data-testid="share-collaborator">
 						<span class="text-sm text-[var(--text)]">
 							{collab.displayName || collab.email}
 						</span>

src/lib/components/TiptapEditor.svelte

@@ -27,6 +27,54 @@
 	let element: HTMLDivElement | undefined = $state();
 	let editor: Editor | undefined = $state();
 
+	function isTaskCheckboxTarget(target: EventTarget | null): boolean {
+		if (target instanceof Element) {
+			const checkbox = target.matches('input[type="checkbox"]')
+				? target
+				: target.closest('label')?.querySelector('input[type="checkbox"]');
+			return checkbox !== null && checkbox !== undefined;
+		}
+		return false;
+	}
+
+	function isTouchDevice(): boolean {
+		return window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
+	}
+
+	function handleWrapperPointerDown(event: PointerEvent) {
+		if (event.pointerType === 'touch' && isTaskCheckboxTarget(event.target)) {
+			event.preventDefault();
+		}
+	}
+
+	function handleWrapperClick(event: MouseEvent) {
+		if (isTaskCheckboxTarget(event.target)) {
+			return;
+		}
+
+		editor?.commands.focus();
+	}
+
+	function handleWrapperChangeCapture(event: Event) {
+		if (!isTouchDevice() || !(event.target instanceof HTMLInputElement)) return;
+		if (event.target.type !== 'checkbox' || !editor) return;
+
+		const taskItem = event.target.closest('li[data-checked]');
+		if (!taskItem) return;
+
+		const taskItemPosition = editor.view.posAtDOM(taskItem, 0) - 1;
+		const taskItemNode = editor.state.doc.nodeAt(taskItemPosition);
+		if (taskItemNode?.type.name !== 'taskItem') return;
+
+		event.stopPropagation();
+		editor.view.dispatch(
+			editor.state.tr.setNodeMarkup(taskItemPosition, undefined, {
+				...taskItemNode.attrs,
+				checked: event.target.checked
+			})
+		);
+	}
+
 	onMount(() => {
 		editor = new Editor({
 			element: element!,
@@ -72,12 +120,14 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	bind:this={element}
-	class="tiptap-wrapper prose prose-sm flex min-h-[300px] max-w-none flex-col px-4 py-2 text-[var(--text)]"
+	class="tiptap-wrapper prose md:prose-sm flex min-h-[300px] max-w-none flex-col px-4 py-2 text-[var(--text)]"
 	data-testid="tiptap-editor"
 	role="textbox"
 	aria-multiline="true"
 	tabindex="0"
-	onclick={() => editor?.commands.focus()}
+	onpointerdown={handleWrapperPointerDown}
+	onclick={handleWrapperClick}
+	onchangecapture={handleWrapperChangeCapture}
 ></div>
 
 <style>

src/lib/server/notes-service.test.ts

@@ -263,6 +263,46 @@ describe('updateNote', () => {
 		const updated = updateNote(db, OWNER_ID, 'n1', { title: 'Now with #newtag' });
 		expect(updated!.tags).toContain('newtag');
 	});
+
+	it('should merge concurrent content edits using the snapshot created by the first update', () => {
+		seedNote('n1', {
+			title: 'Shopping',
+			content: '- [ ] Milk\n- [ ] Bread',
+			checklistMode: true,
+			version: 1
+		});
+		shareNote('n1');
+
+		const ownerUpdate = updateNote(db, OWNER_ID, 'n1', {
+			content: '- [ ] Milk\n- [x] Bread',
+			baseVersion: 1
+		});
+		expect(ownerUpdate!.version).toBe(2);
+
+		const collabUpdate = updateNote(db, COLLAB_ID, 'n1', {
+			content: '- [x] Milk\n- [ ] Bread',
+			baseVersion: 1
+		});
+
+		expect(collabUpdate!.content).toBe('- [x] Milk\n- [x] Bread');
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots.some((snapshot) => snapshot.version === 1)).toBe(true);
+	});
+
+	it('should keep the incoming edit when a metadata-only bump left no base snapshot', () => {
+		seedNote('n1', { title: 'Note', content: 'hello', version: 1 });
+
+		// A metadata-only change bumps the version but creates no snapshot.
+		updateNote(db, OWNER_ID, 'n1', { pinned: true });
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(0);
+
+		// A later concurrent content edit based on the pre-bump version therefore has
+		// no base to merge against — the incoming edit must be preserved, not dropped.
+		const edited = updateNote(db, OWNER_ID, 'n1', { content: 'hello world', baseVersion: 1 });
+
+		expect(edited!.content).toBe('hello world');
+	});
 });
 
 describe('deleteNote', () => {

src/lib/server/notes-service.ts

@@ -1,6 +1,6 @@
 import type { Db } from './db/index.js';
-import { notes, noteTags, tags, noteCollaborators, noteUserState, noteVersions } from './db/schema.js';
-import { eq, and, desc, like, or, inArray, sql, lte } from 'drizzle-orm';
+import { notes, noteTags, tags, noteCollaborators, noteUserState } from './db/schema.js';
+import { eq, and, like, or, inArray, sql } from 'drizzle-orm';
 import { v4 as uuidv4 } from 'uuid';
 import { extractTags } from '$lib/utils/tags.js';
 import { fetchTagsForNotes, syncNoteTags } from './tags.js';
@@ -8,8 +8,8 @@ import { fetchAttachmentsForNotes } from './attachments.js';
 import { fetchCollaboratorsForNotes } from './collaborators.js';
 import { fetchSharesForNotes } from './shares-service.js';
 import { canAccessNote } from './api-utils.js';
-import { createSnapshot } from './versions-service.js';
-import { mergeContent } from '$lib/utils/content-merge.js';
+import { createSnapshot, getBaseContent } from './versions-service.js';
+import { mergeContentUpdate } from '$lib/utils/content-merge.js';
 import type { NoteFilter } from '$lib/types/index.js';
 
 interface NoteRow {
@@ -238,29 +238,18 @@ 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.
+		// Preserve concurrent edits at line/block granularity when the client
+		// saved from an older note version.
 		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();
-
-			if (baseSnapshot && baseSnapshot.content !== existing.content) {
-				sharedUpdates.content = mergeContent(baseSnapshot.content, input.content, existing.content);
-			} else {
-				sharedUpdates.content = input.content;
-			}
-		} else {
-			sharedUpdates.content = input.content;
-		}
+		sharedUpdates.content = hasConcurrentEdit
+			? mergeContentUpdate({
+				baseContent: getBaseContent(db, id, input.baseVersion),
+				incomingContent: input.content,
+				currentContent: existing.content
+			})
+			: input.content;
 		hasSharedUpdates = true;
 	}
 	if (input.color !== undefined) { sharedUpdates.color = input.color; hasSharedUpdates = true; }
@@ -278,6 +267,22 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote
 		if (input.sortOrder !== undefined) { sharedUpdates.sortOrder = input.sortOrder; hasSharedUpdates = true; }
 	}
 
+	const hasActualContentChange =
+		(input.title !== undefined && input.title !== existing.title) ||
+		(sharedUpdates.content !== undefined && sharedUpdates.content !== existing.content) ||
+		(input.color !== undefined && input.color !== existing.color) ||
+		(input.checklistMode !== undefined && input.checklistMode !== existing.checklistMode);
+
+	if (hasActualContentChange) {
+		createSnapshot(db, id, {
+			version: existing.version,
+			title: existing.title,
+			content: existing.content,
+			checklistMode: existing.checklistMode,
+			color: existing.color
+		});
+	}
+
 	if (hasSharedUpdates || isOwner) {
 		db.update(notes).set(sharedUpdates).where(eq(notes.id, id)).run();
 	}
@@ -324,23 +329,6 @@ export function updateNote(db: Db, userId: number, id: string, input: UpdateNote
 		}
 	}
 
-	// Create a version snapshot only when at least one content field actually changed
-	const hasActualContentChange =
-		(input.title !== undefined && input.title !== existing.title) ||
-		(input.content !== undefined && input.content !== existing.content) ||
-		(input.color !== undefined && input.color !== existing.color) ||
-		(input.checklistMode !== undefined && input.checklistMode !== existing.checklistMode);
-
-	if (hasActualContentChange) {
-		createSnapshot(db, id, {
-			version: existing.version,
-			title: existing.title,
-			content: existing.content,
-			checklistMode: existing.checklistMode,
-			color: existing.color
-		});
-	}
-
 	return getNote(db, userId, id);
 }
 

src/lib/server/versions-service.test.ts

@@ -3,7 +3,7 @@ import { createTestDb } from './db/test-helpers.js';
 import { users, notes, noteVersions } from './db/schema.js';
 import { eq } from 'drizzle-orm';
 import type { Db } from './db/index.js';
-import { createSnapshot, listVersions, getVersion, snapshotCurrentNote } from './versions-service.js';
+import { createSnapshot, listVersions, getVersion, snapshotCurrentNote, getBaseContent } from './versions-service.js';
 
 let db: Db;
 
@@ -44,6 +44,32 @@ beforeEach(() => {
 	seedUser();
 });
 
+describe('getBaseContent', () => {
+	it('returns null when the base version is unknown', () => {
+		seedNote();
+		expect(getBaseContent(db, NOTE_ID, undefined)).toBeNull();
+	});
+
+	it('returns the snapshot content at or before the base version', () => {
+		seedNote();
+		createSnapshot(db, NOTE_ID, { version: 1, title: 'T', content: 'v1', checklistMode: false, color: 'default' });
+		createSnapshot(db, NOTE_ID, { version: 3, title: 'T', content: 'v3', checklistMode: false, color: 'default' });
+
+		expect(getBaseContent(db, NOTE_ID, 2)).toBe('v1');
+		expect(getBaseContent(db, NOTE_ID, 3)).toBe('v3');
+	});
+
+	it('returns null instead of a newer snapshot when none exists at or before the base version', () => {
+		seedNote();
+		// Only a snapshot NEWER than the requested base exists (e.g. the real base was
+		// pruned). Using it as the merge base would treat unseen lines as deletions,
+		// so getBaseContent must return null rather than fall back to it.
+		createSnapshot(db, NOTE_ID, { version: 5, title: 'T', content: 'v5', checklistMode: false, color: 'default' });
+
+		expect(getBaseContent(db, NOTE_ID, 2)).toBeNull();
+	});
+});
+
 describe('createSnapshot', () => {
 	it('should store a snapshot for a note', () => {
 		seedNote();

src/lib/server/versions-service.ts

@@ -1,18 +1,46 @@
 import type { Db } from './db/index.js';
 import { noteVersions, notes } from './db/schema.js';
-import { eq, and, desc } from 'drizzle-orm';
+import { eq, and, desc, lte } from 'drizzle-orm';
 import { v4 as uuidv4 } from 'uuid';
 import type { NoteVersion, NoteVersionSummary, NoteColor } from '$lib/types/index.js';
 
 const MAX_VERSIONS_PER_NOTE = 50;
 const CONTENT_PREVIEW_LENGTH = 80;
 
+export type Transaction = Parameters<Parameters<Db['transaction']>[0]>[0];
+export type SnapshotDb = Db | Transaction;
+
+/**
+ * Resolve the 3-way merge base for a concurrent edit: the content of the snapshot
+ * at or before the client's base version. Returns null when the base version is
+ * unknown or no snapshot at/before it exists. Callers must NOT substitute a newer
+ * snapshot as the base — a base newer than what the client actually saw makes the
+ * merge treat other users' lines as deletions and silently drop them.
+ */
+export function getBaseContent(
+	db: SnapshotDb,
+	noteId: string,
+	baseVersion: number | undefined
+): string | null {
+	if (baseVersion === undefined) return null;
+
+	const snapshot = db
+		.select({ content: noteVersions.content })
+		.from(noteVersions)
+		.where(and(eq(noteVersions.noteId, noteId), lte(noteVersions.version, baseVersion)))
+		.orderBy(desc(noteVersions.version))
+		.limit(1)
+		.get();
+
+	return snapshot?.content ?? null;
+}
+
 /**
  * Create a snapshot of a note's current state.
  * Only called when content actually changed. Prunes snapshots beyond MAX_VERSIONS_PER_NOTE.
  */
 export function createSnapshot(
-db: Db,
+db: SnapshotDb,
 noteId: string,
 snapshot: {
 version: number;

src/lib/stores/notes.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { mergeNotesByVersion } from './notes.js';
+import { mergeNotesByVersion, reconcileSearchResults } from './notes.js';
 import type { Note } from '$lib/types/index.js';
 
 function makeNote(overrides: Partial<Note> = {}): Note {
@@ -97,3 +97,49 @@ describe('mergeNotesByVersion', () => {
 		expect(result[1].content).toBe('updated on server');
 	});
 });
+
+describe('reconcileSearchResults', () => {
+	it('replaces a stale result with the canonical note', () => {
+		const canonical = makeNote({ id: 'n1', title: 'Updated', version: 2 });
+
+		const result = reconcileSearchResults(
+			[canonical],
+			[makeNote({ id: 'n1', title: 'Stale', version: 1 })]
+		);
+
+		expect(result).toEqual([canonical]);
+	});
+
+	it('keeps a result absent from the canonical store (hit not yet loaded locally)', () => {
+		const serverHit = makeNote({ id: 'n2', title: 'From another device' });
+
+		const result = reconcileSearchResults([makeNote({ id: 'n1' })], [serverHit]);
+
+		expect(result).toEqual([serverHit]);
+	});
+
+	it('drops a result that is trashed in the canonical store', () => {
+		const trashed = makeNote({ id: 'n1', trashed: true });
+
+		const result = reconcileSearchResults([trashed], [makeNote({ id: 'n1', trashed: false })]);
+
+		expect(result).toEqual([]);
+	});
+
+	it('preserves result order while reconciling a mix of cases', () => {
+		const canonical = makeNote({ id: 'n1', title: 'Canonical', version: 2 });
+		const trashed = makeNote({ id: 'n2', trashed: true });
+		const absent = makeNote({ id: 'n3', title: 'Absent' });
+
+		const result = reconcileSearchResults(
+			[canonical, trashed],
+			[makeNote({ id: 'n1', title: 'Stale', version: 1 }), trashed, absent]
+		);
+
+		expect(result).toEqual([canonical, absent]);
+	});
+
+	it('returns an empty array when there are no results', () => {
+		expect(reconcileSearchResults([makeNote({ id: 'n1' })], [])).toEqual([]);
+	});
+});

src/lib/stores/notes.ts

@@ -8,11 +8,41 @@ export const notes = writable<Note[]>([]);
 export const currentFilter = writable<NoteFilter>('all');
 export const selectedTag = writable<string | null>(null);
 export const notesLoaded = writable(false);
+export const searchQuery = writable<string>('');
+export const searchResults = writable<Note[]>([]);
+
+/**
+ * Reconcile search results against the canonical notes store so local edits and
+ * trashing propagate into the active result set without re-querying the server.
+ *
+ * A result absent from the canonical store is kept as-is — it's a server hit not
+ * yet loaded locally (e.g. created on another device), and dropping it would make
+ * valid matches disappear mid-session. Notes removed locally (deleted or left) are
+ * pruned explicitly at their call sites; trashed notes are dropped here.
+ */
+export function reconcileSearchResults(canonicalNotes: Note[], results: Note[]): Note[] {
+	const notesMap = new Map(canonicalNotes.map((note) => [note.id, note]));
+	return results.flatMap((result) => {
+		const canonical = notesMap.get(result.id);
+		if (!canonical) return [result];
+		return canonical.trashed ? [] : [canonical];
+	});
+}
+
+// Keep searchResults in sync with edits/trashing in the notes store. These search
+// stores (like the others in this module) are client-only state; the subscription
+// lives for the app's lifetime and is intentionally never unsubscribed.
+notes.subscribe(($notes) => {
+	searchResults.update(($results) => {
+		if ($results.length === 0) return $results;
+		return reconcileSearchResults($notes, $results);
+	});
+});
 
 export const filteredNotes = derived(
-	[notes, selectedTag, currentFilter],
-	([$notes, $selectedTag, $filter]) => {
-		let result = $notes;
+	[notes, selectedTag, currentFilter, searchQuery, searchResults],
+	([$notes, $selectedTag, $filter, $searchQuery, $searchResults]) => {
+		let result = $searchQuery.trim() ? $searchResults : $notes;
 		if ($filter === 'all') {
 			result = result.filter((n) => !n.trashed && !n.archived);
 		} else if ($filter === 'archived') {
@@ -218,6 +248,7 @@ export async function deleteNote(id: string): Promise<boolean> {
 		const res = await fetch(`/api/notes/${id}`, { method: 'DELETE' });
 		if (res.ok) {
 			notes.update((list) => list.filter((n) => n.id !== id));
+			searchResults.update((list) => list.filter((n) => n.id !== id));
 			await deleteNoteFromIdb(id);
 			return true;
 		}
@@ -225,6 +256,7 @@ export async function deleteNote(id: string): Promise<boolean> {
 	} catch (err) {
 		if (isNetworkError(err)) {
 			notes.update((list) => list.filter((n) => n.id !== id));
+			searchResults.update((list) => list.filter((n) => n.id !== id));
 			await deleteNoteFromIdb(id);
 			await addToSyncQueue({ noteId: id, operation: 'delete', timestamp: Date.now() });
 			showToast('Saved offline — will sync when reconnected', 'info');
@@ -263,6 +295,7 @@ export async function leaveNote(id: string): Promise<boolean> {
 		const res = await fetch(`/api/notes/${id}/collaborators?userId=self`, { method: 'DELETE' });
 		if (res.ok) {
 			notes.update((list) => list.filter((n) => n.id !== id));
+			searchResults.update((list) => list.filter((n) => n.id !== id));
 			await deleteNoteFromIdb(id);
 			return true;
 		}

src/lib/sync/server.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { createTestDb } from '../server/db/test-helpers.js';
-import { notes, noteCollaborators, noteUserState, users, syncLog } from '../server/db/schema.js';
+import { notes, noteCollaborators, noteUserState, users, syncLog, noteVersions } from '../server/db/schema.js';
 import { eq, and } from 'drizzle-orm';
 import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
 import type * as schema from '../server/db/schema.js';
@@ -289,6 +289,64 @@ describe('processSyncPush — shared notes', () => {
 		expect(note.content).toBe('- [x] Milk\n- [x] Bread');
 	});
 
+	it('should create a base snapshot during sync so later queued edits can merge', async () => {
+		const t1 = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', {
+			updatedAt: t1,
+			createdAt: t1,
+			content: '- [ ] Milk\n- [ ] Bread',
+			checklistMode: true,
+			version: 1
+		});
+
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t1.getTime() + 1000,
+			data: { content: '- [ ] Milk\n- [x] Bread' },
+			baseVersion: 1
+		}], OWNER_ID);
+
+		await processSyncPush(db, [{
+			noteId: 'n1',
+			operation: 'update',
+			timestamp: t1.getTime() + 2000,
+			data: { content: '- [x] Milk\n- [ ] Bread' },
+			baseVersion: 1
+		}], COLLAB_ID);
+
+		const note = db.select().from(notes).where(eq(notes.id, 'n1')).get()!;
+		expect(note.content).toBe('- [x] Milk\n- [x] Bread');
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots.some((snapshot) => snapshot.version === 1)).toBe(true);
+	});
+
+	it('should retain at most 50 snapshots created by sync updates', async () => {
+		const createdAt = new Date('2024-01-01T00:00:00Z');
+		seedSharedNote('n1', {
+			updatedAt: createdAt,
+			createdAt,
+			content: 'version 1',
+			version: 1
+		});
+
+		for (let version = 2; version <= 52; version++) {
+			await processSyncPush(db, [{
+				noteId: 'n1',
+				operation: 'update',
+				timestamp: createdAt.getTime() + version,
+				data: { content: `version ${version}` },
+				baseVersion: version - 1
+			}], OWNER_ID);
+		}
+
+		const snapshots = db.select().from(noteVersions).where(eq(noteVersions.noteId, 'n1')).all();
+		expect(snapshots).toHaveLength(50);
+		expect(snapshots.some((snapshot) => snapshot.version === 1)).toBe(false);
+		expect(snapshots.some((snapshot) => snapshot.version === 51)).toBe(true);
+	});
+
 	it('should not allow non-collaborator to update the note', async () => {
 		const t1 = new Date('2024-01-01T00:00:00Z');
 		// Create note without sharing with user 3

src/lib/sync/server.ts

@@ -1,37 +1,12 @@
 import type { Db } from '$lib/server/db/index.js';
-import { notes, noteCollaborators, noteUserState, noteVersions, syncLog } from '$lib/server/db/schema.js';
-import { eq, gt, and, or, sql, desc, lte } from 'drizzle-orm';
+import { notes, noteCollaborators, noteUserState, syncLog } from '$lib/server/db/schema.js';
+import { eq, gt, and, sql } from 'drizzle-orm';
 import { extractTags } from '$lib/utils/tags.js';
 import { syncNoteTags } from '$lib/server/tags.js';
-import { canAccessNote } from '$lib/server/api-utils.js';
-import { mergeContent } from '$lib/utils/content-merge.js';
+import { createSnapshot, getBaseContent } from '$lib/server/versions-service.js';
+import { mergeContentUpdate } from '$lib/utils/content-merge.js';
 import type { SyncQueueItem } from './idb.js';
 
-/**
- * Find the base content for 3-way merge from version snapshots.
- * Returns the content from the snapshot at or before the given version,
- * or the current note content if no snapshot is found.
- */
-function getBaseContent(tx: Parameters<Parameters<Db['transaction']>[0]>[0], noteId: string, baseVersion?: number): string | null {
-	if (baseVersion !== undefined) {
-		const snapshot = tx.select({ content: noteVersions.content })
-			.from(noteVersions)
-			.where(and(eq(noteVersions.noteId, noteId), lte(noteVersions.version, baseVersion)))
-			.orderBy(desc(noteVersions.version))
-			.limit(1)
-			.get();
-		if (snapshot) return snapshot.content;
-	}
-	// Fallback: get the most recent snapshot before the current version
-	const latest = tx.select({ content: noteVersions.content })
-		.from(noteVersions)
-		.where(eq(noteVersions.noteId, noteId))
-		.orderBy(desc(noteVersions.version))
-		.limit(1)
-		.get();
-	return latest?.content ?? null;
-}
-
 /**
  * Process incoming sync changes from client.
  */
@@ -69,16 +44,17 @@ export async function processSyncPush(db: Db, changes: SyncQueueItem[], userId:
 						if (change.data.color !== undefined) sharedData.color = change.data.color;
 						if (change.data.checklistMode !== undefined) sharedData.checklistMode = change.data.checklistMode;
 
-						// Content: 3-way merge to preserve concurrent edits from other users
+						// Content: merge only when the client saved from an older note version.
 						if (change.data.content !== undefined && change.data.content !== note.content) {
-							const baseContent = getBaseContent(tx, change.noteId, change.baseVersion);
-							if (baseContent !== null && baseContent !== note.content) {
-								// 3-way merge: base, incoming (local), server current (remote)
-								sharedData.content = mergeContent(baseContent, change.data.content, note.content);
-							} else {
-								// No base or base matches server — take incoming content
-								sharedData.content = change.data.content;
-							}
+							const hasConcurrentEdit = change.baseVersion !== undefined
+								&& change.baseVersion < note.version;
+							sharedData.content = hasConcurrentEdit
+								? mergeContentUpdate({
+									baseContent: getBaseContent(tx, change.noteId, change.baseVersion),
+									incomingContent: change.data.content,
+									currentContent: note.content
+								})
+								: change.data.content;
 						}
 
 						if (isOwner) {
@@ -92,6 +68,22 @@ export async function processSyncPush(db: Db, changes: SyncQueueItem[], userId:
 							if (change.data.sortOrder !== undefined) sharedData.sortOrder = change.data.sortOrder;
 						}
 
+						const hasActualContentChange =
+							(change.data.title !== undefined && change.data.title !== note.title) ||
+							(sharedData.content !== undefined && sharedData.content !== note.content) ||
+							(change.data.color !== undefined && change.data.color !== note.color) ||
+							(change.data.checklistMode !== undefined && change.data.checklistMode !== note.checklistMode);
+
+						if (hasActualContentChange) {
+							createSnapshot(tx, change.noteId, {
+								version: note.version,
+								title: note.title,
+								content: note.content,
+								checklistMode: note.checklistMode,
+								color: note.color
+							});
+						}
+
 						tx.update(notes)
 							.set(sharedData)
 							.where(eq(notes.id, change.noteId))

src/lib/utils/colors.test.ts

@@ -1,5 +1,12 @@
 import { describe, it, expect } from 'vitest';
-import { getNoteColor, NOTE_COLORS, NOTE_COLORS_DARK } from '$lib/utils/colors.js';
+import {
+	getNoteColor,
+	getNoteChip,
+	NOTE_COLORS,
+	NOTE_COLORS_DARK,
+	NOTE_CHIPS_DARK
+} from '$lib/utils/colors.js';
+import type { NoteColor } from '$lib/types/index.js';
 
 describe('getNoteColor', () => {
 	it('returns light color when isDark is false', () => {
@@ -8,13 +15,13 @@ describe('getNoteColor', () => {
 	});
 
 	it('returns dark color when isDark is true', () => {
-		expect(getNoteColor('default', true)).toBe('#2a2520');
-		expect(getNoteColor('coral', true)).toBe('#4a2522');
+		expect(getNoteColor('default', true)).toBe('#21201f');
+		expect(getNoteColor('coral', true)).toBe('#3f1f1c');
 	});
 
 	it('returns default color for unknown color name', () => {
 		expect(getNoteColor('unknown' as any, false)).toBe('#faf5eb');
-		expect(getNoteColor('unknown' as any, true)).toBe('#2a2520');
+		expect(getNoteColor('unknown' as any, true)).toBe('#21201f');
 	});
 
 	it('has matching keys in light and dark color maps', () => {
@@ -23,3 +30,115 @@ describe('getNoteColor', () => {
 		expect(lightKeys).toEqual(darkKeys);
 	});
 });
+
+function toRgb(hex: string): [number, number, number] {
+	const n = parseInt(hex.slice(1), 16);
+	return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+/** WCAG relative luminance. */
+function relativeLuminance(hex: string): number {
+	const channels = toRgb(hex).map((v) => {
+		const s = v / 255;
+		return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+	});
+	return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+}
+
+function contrastRatio(a: string, b: string): number {
+	const [l1, l2] = [relativeLuminance(a), relativeLuminance(b)];
+	return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+
+function rgbDistance(a: string, b: string): number {
+	const [ra, ga, ba] = toRgb(a);
+	const [rb, gb, bb] = toRgb(b);
+	return Math.hypot(ra - rb, ga - gb, ba - bb);
+}
+
+describe('dark note colours', () => {
+	// Must track [data-theme="dark"] in src/app.css.
+	const DARK_TEXT = '#ece3d3';
+	const DARK_TEXT_MUTED = '#b3a695';
+
+	it('keeps body text above the AA threshold on every dark card', () => {
+		for (const [name, { bg }] of Object.entries(NOTE_COLORS_DARK)) {
+			expect(contrastRatio(bg, DARK_TEXT), `${name} (${bg})`).toBeGreaterThanOrEqual(4.5);
+		}
+	});
+
+	it('keeps muted text above the AA threshold on every dark card', () => {
+		// The shipped dark theme failed this at 3.77:1 with its previous muted
+		// colour (#9a8e7e). This guard exists so a future palette edit cannot
+		// reintroduce it — it does not discriminate the old surfaces, which were
+		// darker and so scored higher against the lifted muted colour.
+		for (const [name, { bg }] of Object.entries(NOTE_COLORS_DARK)) {
+			expect(contrastRatio(bg, DARK_TEXT_MUTED), `${name} (${bg})`).toBeGreaterThanOrEqual(4.5);
+		}
+	});
+
+	it('keeps every pair of dark surfaces distinguishable', () => {
+		// The old palette failed this: fog and storm sat 7.55 apart, so the twelve
+		// colours read as one dark smudge. Threshold 8 clears that while leaving
+		// headroom above the current closest pair, coral/peach at 12.0.
+		const entries = Object.entries(NOTE_COLORS_DARK);
+		for (let i = 0; i < entries.length; i++) {
+			for (let j = i + 1; j < entries.length; j++) {
+				const [[nameA, a], [nameB, b]] = [entries[i], entries[j]];
+				const distance = rgbDistance(a.bg, b.bg);
+				expect(distance, `${nameA} vs ${nameB}`).toBeGreaterThan(8);
+			}
+		}
+	});
+});
+
+describe('getNoteChip', () => {
+	it('returns the card colour in light mode, where pastels already are the cards', () => {
+		for (const color of Object.keys(NOTE_COLORS) as NoteColor[]) {
+			expect(getNoteChip(color, false)).toBe(getNoteColor(color, false));
+		}
+	});
+
+	it('returns a distinct vivid chip in dark mode, not the card surface', () => {
+		for (const color of Object.keys(NOTE_COLORS_DARK) as NoteColor[]) {
+			expect(getNoteChip(color, true)).not.toBe(getNoteColor(color, true));
+		}
+	});
+
+	it('falls back to default for an unknown colour', () => {
+		expect(getNoteChip('unknown' as any, true)).toBe(NOTE_CHIPS_DARK.default);
+	});
+
+	it('has matching keys with the colour maps', () => {
+		expect(Object.keys(NOTE_CHIPS_DARK).sort()).toEqual(Object.keys(NOTE_COLORS_DARK).sort());
+	});
+
+	it('keeps every pair of chips far enough apart to tell apart at 28px', () => {
+		// The regression this guards: at low chroma coral/peach/blossom and
+		// fog/storm collapse into each other.
+		const entries = Object.entries(NOTE_CHIPS_DARK);
+		for (let i = 0; i < entries.length; i++) {
+			for (let j = i + 1; j < entries.length; j++) {
+				const [[nameA, a], [nameB, b]] = [entries[i], entries[j]];
+				const distance = rgbDistance(a, b);
+				expect(distance, `${nameA} vs ${nameB}`).toBeGreaterThan(25);
+			}
+		}
+	});
+
+	it('keeps every chip lighter than every card, so chips read as vivid dots', () => {
+		// A chip set to card-lightness values could still pass the pairwise
+		// distance test above (25 apart) while being just as dark as the cards,
+		// reintroducing the "twelve grey dots" bug this palette fixed. Measured:
+		// the lightest card (mint) has luminance 0.0392; the darkest chip (coral)
+		// has luminance 0.1941 — almost 5x higher, comfortable headroom either
+		// side of the 0.1 threshold below.
+		const cardLuminances = Object.values(NOTE_COLORS_DARK).map(({ bg }) => relativeLuminance(bg));
+		const maxCardLuminance = Math.max(...cardLuminances);
+		expect(maxCardLuminance).toBeLessThan(0.1);
+
+		for (const [name, chip] of Object.entries(NOTE_CHIPS_DARK)) {
+			expect(relativeLuminance(chip), name).toBeGreaterThan(0.1);
+		}
+	});
+});

src/lib/utils/colors.ts

@@ -16,18 +16,18 @@ export const NOTE_COLORS: Record<NoteColor, { bg: string; label: string }> = {
 };
 
 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' }
+	default: { bg: '#21201f', label: 'Default' },
+	coral: { bg: '#3f1f1c', label: 'Coral' },
+	peach: { bg: '#3f2b1c', label: 'Peach' },
+	sand: { bg: '#3c371b', label: 'Sand' },
+	mint: { bg: '#2a3d1d', label: 'Mint' },
+	sage: { bg: '#1f3d36', label: 'Sage' },
+	fog: { bg: '#253946', label: 'Fog' },
+	storm: { bg: '#1d283d', label: 'Storm' },
+	dusk: { bg: '#3d2843', label: 'Dusk' },
+	blossom: { bg: '#3d2129', label: 'Blossom' },
+	clay: { bg: '#363126', label: 'Clay' },
+	chalk: { bg: '#303036', label: 'Chalk' }
 };
 
 export function getNoteColor(color: NoteColor, isDark: boolean): string {
@@ -39,3 +39,29 @@ export const COLOR_OPTIONS = Object.entries(NOTE_COLORS).map(([value, { label }]
 	value: value as NoteColor,
 	label
 }));
+
+/**
+ * Picker swatches are labels, not surfaces. A 28px circle at card lightness
+ * reads as a grey dot — small patches lose apparent saturation — so the dark
+ * picker uses vivid mid-lightness chips that share the card's hue but not its
+ * lightness. Light mode needs no equivalent: there the pastels are the cards.
+ */
+export const NOTE_CHIPS_DARK: Record<NoteColor, string> = {
+	default: '#8d857c',
+	coral: '#d04f43',
+	peach: '#cd7c42',
+	sand: '#c7b138',
+	mint: '#7bbd4c',
+	sage: '#47b89d',
+	fog: '#609abe',
+	storm: '#547bc0',
+	dusk: '#a965bd',
+	blossom: '#c05d78',
+	clay: '#b5954a',
+	chalk: '#c3c3c8'
+};
+
+export function getNoteChip(color: NoteColor, isDark: boolean): string {
+	if (!isDark) return getNoteColor(color, false);
+	return NOTE_CHIPS_DARK[color] ?? NOTE_CHIPS_DARK.default;
+}

src/lib/utils/content-merge.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { mergeContent, mergeContentTwoWay } from './content-merge.js';
+import { mergeContent, mergeContentUpdate } from './content-merge.js';
 
 describe('mergeContent (3-way)', () => {
 	it('should return remote when local is unchanged', () => {
@@ -89,17 +89,56 @@ describe('mergeContent (3-way)', () => {
 	});
 });
 
-describe('mergeContentTwoWay', () => {
-	it('should return remote when both are identical', () => {
-		expect(mergeContentTwoWay('hello', 'hello')).toBe('hello');
+describe('mergeContentUpdate', () => {
+	it('should merge an incoming update against current content when a base is available', () => {
+		const result = mergeContentUpdate({
+			baseContent: '- [ ] Milk\n- [ ] Bread',
+			incomingContent: '- [x] Milk\n- [ ] Bread',
+			currentContent: '- [ ] Milk\n- [x] Bread'
+		});
+
+		expect(result).toBe('- [x] Milk\n- [x] Bread');
 	});
 
-	it('should attempt merge when contents differ', () => {
-		const local = '- [x] Milk\n- [ ] Bread';
-		const remote = '- [ ] Milk\n- [ ] Bread\n- [ ] Eggs';
+	it('should keep the incoming edit when no base snapshot is available', () => {
+		// Without a common ancestor a 3-way merge is impossible; dropping the
+		// incoming edit would silently lose the user's changes.
+		const result = mergeContentUpdate({
+			baseContent: null,
+			incomingContent: '- [x] Milk',
+			currentContent: '- [ ] Bread'
+		});
 
-		const result = mergeContentTwoWay(local, remote);
-		// Without a base, conflict resolution prefers remote
-		expect(result).toContain('- [ ] Bread');
+		expect(result).toBe('- [x] Milk');
+	});
+
+	it('should keep current content when the incoming edit equals it', () => {
+		const result = mergeContentUpdate({
+			baseContent: null,
+			incomingContent: 'same',
+			currentContent: 'same'
+		});
+
+		expect(result).toBe('same');
+	});
+
+	it('should keep current content when the incoming edit matches the base (no local change)', () => {
+		const result = mergeContentUpdate({
+			baseContent: 'base',
+			incomingContent: 'base',
+			currentContent: 'server changed'
+		});
+
+		expect(result).toBe('server changed');
+	});
+
+	it('should take the incoming edit when the server is unchanged from the base', () => {
+		const result = mergeContentUpdate({
+			baseContent: 'base',
+			incomingContent: 'incoming change',
+			currentContent: 'base'
+		});
+
+		expect(result).toBe('incoming change');
 	});
 });

src/lib/utils/content-merge.ts

@@ -78,11 +78,28 @@ export function mergeContent(base: string, local: string, remote: string): strin
 }
 
 /**
- * 2-way merge fallback when no base is available.
- * Uses an empty string as the base, so all lines from both sides appear
- * as additions. For conflicts (same region), prefers remote.
+ * Merge an incoming content snapshot into the current server content.
+ *
+ * Uses a 3-way merge when a base (common ancestor) is available. Without a base —
+ * e.g. the base snapshot was pruned, or the version was bumped by a metadata-only
+ * change that created no snapshot — a 3-way merge is impossible, so keep the
+ * incoming edit rather than silently discarding the user's changes.
  */
-export function mergeContentTwoWay(local: string, remote: string): string {
-	if (local === remote) return remote;
-	return mergeContent('', local, remote);
+export function mergeContentUpdate(input: {
+	baseContent: string | null;
+	incomingContent: string;
+	currentContent: string;
+}): string {
+	const { baseContent, incomingContent, currentContent } = input;
+
+	if (incomingContent === currentContent) return currentContent;
+	if (baseContent === incomingContent) return currentContent;
+	if (baseContent === currentContent) return incomingContent;
+
+	if (baseContent === null) {
+		console.warn('[content-merge] no base snapshot for concurrent edit; keeping incoming content');
+		return incomingContent;
+	}
+
+	return mergeContent(baseContent, incomingContent, currentContent);
 }

src/lib/utils/theme.svelte.ts

@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
 
 const LIGHT_THEME_COLOR = '#f0e6d3';
-const DARK_THEME_COLOR = '#1a1715';
+const DARK_THEME_COLOR = '#141312';
 
 let darkMode = $state(false);
 

src/lib/utils/theme.test.ts

@@ -37,7 +37,7 @@ describe('applyTheme', () => {
 	it('updates meta theme-color for dark mode', () => {
 		applyTheme('dark');
 		const meta = document.querySelector('meta[name="theme-color"]');
-		expect(meta?.getAttribute('content')).toBe('#1a1715');
+		expect(meta?.getAttribute('content')).toBe('#141312');
 	});
 
 	it('updates meta theme-color for light mode', () => {

src/routes/(share)/s/[token]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { NOTE_COLORS } from '$lib/utils/colors.js';
+	import { getNoteColor } 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';
@@ -12,8 +12,12 @@
 
 	const { data } = $props();
 
+	// Both palettes are emitted as custom properties so the card follows the visitor's theme on the
+	// first paint — the CSS variables in app.css switch on [data-theme], which app.html sets before
+	// hydration, so a JS-resolved single colour would flash the wrong palette on this SSR page.
 	const noteColor = data.color as NoteColor;
-	const bgColor = NOTE_COLORS[noteColor]?.bg ?? NOTE_COLORS.default.bg;
+	const bgLight = getNoteColor(noteColor, false);
+	const bgDark = getNoteColor(noteColor, true);
 
 	const renderedContent = renderMarkdown(data.content);
 
@@ -55,8 +59,8 @@
 
 <div class="mx-4 w-full max-w-2xl py-10">
 	<article
-		class="rounded-sm border border-[var(--border-subtle)] shadow-[var(--card-shadow)] overflow-hidden"
-		style="background-color: {bgColor}"
+		class="note-surface rounded-sm border border-[var(--border-subtle)] shadow-[var(--card-shadow)] overflow-hidden"
+		style="--note-bg: {bgLight}; --note-bg-dark: {bgDark}"
 		data-testid="shared-note"
 	>
 		<div class="px-6 py-5">
@@ -128,3 +132,13 @@
 		</a>
 	</div>
 </div>
+
+<style>
+	.note-surface {
+		background-color: var(--note-bg);
+	}
+
+	:global([data-theme='dark']) .note-surface {
+		background-color: var(--note-bg-dark);
+	}
+</style>

tests/e2e/dark-mode.spec.ts

@@ -81,7 +81,33 @@ test.describe.serial('Dark mode', () => {
 		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)
+		// Dark default color is #21201f = rgb(33, 32, 31); NOT light default rgb(250, 245, 235)
 		expect(bg).not.toBe('rgb(250, 245, 235)');
 	});
+
+	test('Scenario: Colour picker swatches are identifiable in dark mode', 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 opens the colour picker while editing a note
+		await page.goto('/');
+		await page.waitForLoadState('networkidle');
+		await page.getByTestId('new-note-btn').click();
+		await page.getByTestId('note-title-input').fill('Swatch Test');
+		await page.getByTestId('color-picker-toggle').click();
+		await expect(page.getByTestId('color-picker')).toBeVisible();
+
+		// Then a swatch shows its vivid chip rather than the muted card surface
+		await expect(page.getByTestId('color-coral')).toHaveCSS(
+			'background-color',
+			'rgb(208, 79, 67)'
+		);
+
+		await page.getByTestId('close-editor-btn').click();
+	});
 });

tests/e2e/formatting.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, noteCard } from './helpers/fixtures.js';
-import type { Page } from '@playwright/test';
+import { devices, type Page } from '@playwright/test';
 
 /** Run a TipTap command chain via the exposed editor instance on the DOM element */
 async function runTiptapCommand(page: Page, commandFn: string) {
@@ -13,6 +13,29 @@ async function runTiptapCommand(page: Page, commandFn: string) {
 	);
 }
 
+/**
+ * Read the `checked` attribute of the first task item from the live ProseMirror
+ * document. This reflects the editor's document state, not just the native
+ * checkbox widget — so it catches a widget/document desync where the DOM
+ * checkbox toggles but the transaction never updates the node.
+ */
+async function firstTaskItemChecked(page: Page): Promise<boolean> {
+	return page.getByTestId('tiptap-editor').evaluate((el) => {
+		const editor = (el as any).__tiptapEditor;
+		if (!editor) throw new Error('TipTap editor not found on element');
+		let checked: boolean | undefined;
+		editor.state.doc.descendants((node: any) => {
+			if (checked === undefined && node.type.name === 'taskItem') {
+				checked = Boolean(node.attrs.checked);
+				return false;
+			}
+			return true;
+		});
+		if (checked === undefined) throw new Error('No task item found in document');
+		return checked;
+	});
+}
+
 /** Toggle markdown mode via the overflow menu. */
 async function toggleMarkdownMode(page: Page) {
 	await page.getByTestId('overflow-menu-btn').click();
@@ -109,3 +132,52 @@ test.describe('Rich text formatting', () => {
 		await expect(page.getByTestId('note-content-input')).toHaveValue('Hello **bold** world');
 	});
 });
+
+test.describe('Rich text formatting on mobile', () => {
+	const pixel7 = devices['Pixel 7'];
+	test.use({
+		viewport: pixel7.viewport,
+		userAgent: pixel7.userAgent,
+		deviceScaleFactor: pixel7.deviceScaleFactor,
+		isMobile: pixel7.isMobile,
+		hasTouch: pixel7.hasTouch
+	});
+
+	test('Scenario: Tapping a task-list checkbox does not focus the editor', async ({ authenticatedPage: page }) => {
+		// Given a regular text note contains a task list in the rich-text editor
+		await page.getByTestId('new-note-fab').click();
+		await page.getByTestId('mobile-overflow-menu-btn').click();
+		await page.getByTestId('markdown-toggle').click();
+		await page.getByTestId('note-content-input').fill('- [ ] Mobile task');
+		await page.getByTestId('mobile-overflow-menu-btn').click();
+		await page.getByTestId('markdown-toggle').click();
+
+		const richTextEditor = page.getByTestId('tiptap-editor').locator('.tiptap');
+		const checkbox = richTextEditor.locator('input[type="checkbox"]');
+		await expect(checkbox).not.toBeChecked();
+		await expect(richTextEditor).not.toBeFocused();
+		await richTextEditor.evaluate((element) => {
+			element.dataset.focusCount = '0';
+			element.addEventListener('focus', () => {
+				element.dataset.focusCount = String(Number(element.dataset.focusCount) + 1);
+			});
+		});
+
+		// When the checkbox is tapped, the change propagates to the editor's document
+		// without focus ever entering the editor (which would open the mobile keyboard)
+		await checkbox.tap();
+
+		await expect(checkbox).toBeChecked();
+		expect(await firstTaskItemChecked(page)).toBe(true);
+		await expect(richTextEditor).not.toBeFocused();
+		await expect(richTextEditor).toHaveAttribute('data-focus-count', '0');
+
+		// And unchecking propagates to the document too, still without focusing the editor
+		await checkbox.tap();
+
+		await expect(checkbox).not.toBeChecked();
+		expect(await firstTaskItemChecked(page)).toBe(false);
+		await expect(richTextEditor).not.toBeFocused();
+		await expect(richTextEditor).toHaveAttribute('data-focus-count', '0');
+	});
+});

tests/e2e/helpers/fixtures.ts

@@ -104,6 +104,11 @@ export async function createNote(page: Page, title: string, content?: string) {
 		await editor.pressSequentially(content);
 	}
 	await page.getByTestId('close-editor-btn').click();
+	// Wait for the editor to fully unmount, not just start closing. The close is
+	// animated and dismisses via an async history.back() (see NoteEditor); returning
+	// before it settles lets a following page.goto race that navigation and abort it
+	// (net::ERR_ABORTED). The outer overlay is removed only when the close completes.
+	await expect(page.getByTestId('note-editor-overlay')).toHaveCount(0);
 	await expect(noteCard(page, title)).toBeVisible();
 }
 

tests/e2e/notes-crud.spec.ts

@@ -23,6 +23,40 @@ test.describe('Notes CRUD', () => {
 		await expect(page.getByText('Updated Title')).toBeVisible();
 	});
 
+	test('Scenario: Browser back closes the open editor instead of leaving the page', async ({ authenticatedPage: page }) => {
+		// Given a note titled "Back Closes Me" exists
+		await createNote(page, 'Back Closes Me', 'Some content');
+
+		// Given the note is open in the editor
+		await noteCard(page, 'Back Closes Me').click();
+		await expect(page.getByTestId('note-editor')).toBeVisible();
+
+		// When the user navigates back
+		await page.goBack();
+
+		// Then the editor is closed and the notes list is still shown
+		await expect(page.getByTestId('note-editor')).not.toBeVisible();
+		await expect(noteCard(page, 'Back Closes Me')).toBeVisible();
+	});
+
+	test('Scenario: Closing the editor leaves browser history clean', async ({ authenticatedPage: page }) => {
+		// Given a note titled "Clean History" exists
+		await createNote(page, 'Clean History');
+
+		// Given the user opened and closed the note
+		await noteCard(page, 'Clean History').click();
+		await expect(page.getByTestId('note-editor')).toBeVisible();
+		await page.getByTestId('close-editor-btn').click();
+		await expect(page.getByTestId('note-editor')).not.toBeVisible();
+
+		// When the user navigates back
+		await page.goBack();
+
+		// Then the editor does not reopen and the note's URL is gone from history
+		await expect(page.getByTestId('note-editor')).not.toBeVisible();
+		expect(page.url()).not.toContain('#');
+	});
+
 	test('Scenario: Trashed note disappears from the main view', async ({ authenticatedPage: page }) => {
 		// Given a note titled "Delete Me" exists
 		await createNote(page, 'Delete Me');

tests/e2e/public-sharing.spec.ts

@@ -121,6 +121,54 @@ test.describe('Public Note Sharing', () => {
 		await expect(card.getByTestId('sharing-indicator')).toBeVisible();
 	});
 
+	test('Scenario: Shared note follows a dark-mode visitor theme', async ({
+		authenticatedPage: page,
+		browser
+	}) => {
+		// Given a publicly shared note colored "fog"
+		const note = await createNoteViaApi(page, 'Dark Visitor Note', 'Readable in dark mode');
+		await page.request.patch(`/api/notes/${note.id}`, { data: { color: 'fog' } });
+		const token = await createShareViaApi(page, note.id);
+
+		// When a visitor whose system prefers dark mode opens the share URL
+		const context = await browser.newContext({ colorScheme: 'dark' });
+		const publicPage = await context.newPage();
+		await publicPage.goto(`/s/${token}`);
+
+		// Then the note is rendered on the dark "fog" surface, so its text stays legible
+		await expect(publicPage.locator('html')).toHaveAttribute('data-theme', 'dark');
+		await expect(publicPage.getByTestId('shared-note')).toHaveCSS(
+			'background-color',
+			'rgb(37, 57, 70)'
+		);
+
+		await context.close();
+	});
+
+	test('Scenario: Shared note follows a light-mode visitor theme', async ({
+		authenticatedPage: page,
+		browser
+	}) => {
+		// Given a publicly shared note colored "fog"
+		const note = await createNoteViaApi(page, 'Light Visitor Note', 'Readable in light mode');
+		await page.request.patch(`/api/notes/${note.id}`, { data: { color: 'fog' } });
+		const token = await createShareViaApi(page, note.id);
+
+		// When a visitor whose system prefers light mode opens the share URL
+		const context = await browser.newContext({ colorScheme: 'light' });
+		const publicPage = await context.newPage();
+		await publicPage.goto(`/s/${token}`);
+
+		// Then the note is rendered on the light "fog" surface
+		await expect(publicPage.locator('html')).not.toHaveAttribute('data-theme', 'dark');
+		await expect(publicPage.getByTestId('shared-note')).toHaveCSS(
+			'background-color',
+			'rgb(212, 228, 237)'
+		);
+
+		await context.close();
+	});
+
 	test('Scenario: Copy link button copies to clipboard', async ({
 		authenticatedPage: page
 	}) => {

tests/e2e/search.spec.ts

@@ -31,4 +31,84 @@ test.describe('Search', () => {
 		// Then no notes are displayed
 		await expect(page.getByTestId('note-card')).toHaveCount(0);
 	});
+
+	test('Scenario: Background sync preserves active search results', async ({ authenticatedPage: page }) => {
+		await createNote(page, 'Sync Search Target 3812925');
+		await createNote(page, 'Sync Search Other 3812925');
+
+		await page.getByTestId('search-input').fill('Sync Search Target 3812925');
+		await expect(page.getByText('Sync Search Target 3812925')).toBeVisible();
+		await expect(page.getByText('Sync Search Other 3812925')).not.toBeVisible();
+
+		const notesReloaded = page.waitForResponse(
+			(response) => response.url().includes('/api/notes?filter=all') && response.ok()
+		);
+		await page.getByTestId('sync-indicator').click();
+		await notesReloaded;
+
+		await expect(page.getByText('Sync Search Target 3812925')).toBeVisible();
+		await expect(page.getByText('Sync Search Other 3812925')).not.toBeVisible();
+	});
+
+	test('Scenario: A stale response cannot replace newer search results', async ({ authenticatedPage: page }) => {
+		await createNote(page, 'Race Slow 3812925');
+		await createNote(page, 'Race Fast 3812925');
+
+		const slowResponse = await page.request.get('/api/search?q=Race%20Slow%203812925');
+		const fastResponse = await page.request.get('/api/search?q=Race%20Fast%203812925');
+		const slowResults = await slowResponse.json();
+		const fastResults = await fastResponse.json();
+
+		await page.route('**/api/search?*', async (route) => {
+			const requestQuery = new URL(route.request().url()).searchParams.get('q');
+			if (requestQuery === 'Race Slow 3812925') {
+				await new Promise((resolve) => setTimeout(resolve, 250));
+				await route.fulfill({ json: slowResults });
+				return;
+			}
+			await route.fulfill({ json: fastResults });
+		});
+
+		const searchInput = page.getByTestId('search-input');
+		const slowRequestStarted = page.waitForRequest(
+			(request) => new URL(request.url()).searchParams.get('q') === 'Race Slow 3812925'
+		);
+		await searchInput.fill('Race Slow 3812925');
+		await slowRequestStarted;
+		await searchInput.fill('Race Fast 3812925');
+
+		await expect(page.getByText('Race Fast 3812925')).toBeVisible();
+		await expect(page.getByText('Race Slow 3812925')).not.toBeVisible();
+		await page.waitForTimeout(300);
+		await expect(page.getByText('Race Fast 3812925')).toBeVisible();
+		await expect(page.getByText('Race Slow 3812925')).not.toBeVisible();
+	});
+
+	test('Scenario: Current notes stay visible while a search request is in flight', async ({ authenticatedPage: page }) => {
+		// Given two notes exist
+		await createNote(page, 'Flash Alpha 771903');
+		await createNote(page, 'Flash Beta 771903');
+
+		// And the search request is held open before it can respond
+		let releaseSearch: () => void = () => {};
+		const searchGate = new Promise<void>((resolve) => {
+			releaseSearch = resolve;
+		});
+		await page.route('**/api/search?*', async (route) => {
+			await searchGate;
+			await route.continue();
+		});
+
+		// When the user starts a search
+		await page.getByTestId('search-input').fill('Flash Alpha 771903');
+
+		// Then the current notes stay on screen instead of flashing an empty state
+		await expect(page.getByText('Flash Beta 771903')).toBeVisible();
+		await expect(page.getByText('Flash Alpha 771903')).toBeVisible();
+
+		// And once the results arrive, only the match remains
+		releaseSearch();
+		await expect(page.getByText('Flash Alpha 771903')).toBeVisible();
+		await expect(page.getByText('Flash Beta 771903')).not.toBeVisible();
+	});
 });

website/index.html

@@ -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.4</span>
+			<span class="footer-version">v0.31.0</span>
 		</div>
 	</footer>