chore: bump version to 0.25.0

- Remove unused flushSync import
- Fix removeItem single-item branch: emit change and trigger reactivity
- Remove misleading role="button" + tabindex from drag handle
- Use anchored regex for checked detection instead of line.includes('[x]')
  in NoteCard and public share page (prevents false positive on item text)
- Fix NoteCard preview E2E test: scope assertion to specific card, use
  unique title to avoid collision
- Restore arrow key navigation E2E test

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docker-compose.yml

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

docs/ARCHITECTURE.md

@@ -103,6 +103,21 @@ Key tables:
 - `shared_notes` - Public share links (noteId → token, 1:1 with cascade delete)
 - `sync_log` - Sync operation history
 
+### Nested Checklist Serialization
+
+Checklist items are stored as plain text in the note `content` field, one item per line. Child items use a 2-space indent prefix:
+
+```
+- [ ] Parent item
+  - [ ] Child item
+  - [x] Checked child item
+- [x] Another parent
+```
+
+- A line starting with `  - [ ]` or `  - [x]` (2 spaces) is parsed as a child of the preceding top-level item.
+- The `parentId` field on `ChecklistItem` is **runtime-only** — it is derived from position during parsing and never stored explicitly.
+- This format is fully backward compatible: flat checklists (no indented lines) parse identically to before.
+
 ### Collaboration Access Control
 
 Notes support sharing with other users on the same instance:

docs/FEATURES.md

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.24.0",
+  "version": "0.25.0",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",

src/lib/components/Checklist.svelte

@@ -3,14 +3,10 @@
 	import Plus from 'lucide-svelte/icons/plus';
 	import GripVertical from 'lucide-svelte/icons/grip-vertical';
 	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { onDestroy } from 'svelte';
 	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
-
-	interface ChecklistItem {
-		id: string;
-		text: string;
-		checked: boolean;
-	}
+	import { type ChecklistItem, generateId, parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem } from '$lib/utils/checklist.js';
 
 	interface Props {
 		content: string;
@@ -24,40 +20,69 @@
 	let doneExpanded = $state(true);
 	const flipDurationMs = 150;
 
+	// Track the last content we emitted so we can distinguish self-originated
+	// changes from external ones (sync, history restore, etc.)
+	let lastEmitted = content;
+
+	// Re-parse items when content changes externally (not from our own emitChange)
+	$effect(() => {
+		if (content !== lastEmitted) {
+			items = parseChecklist(content);
+			lastEmitted = content;
+		}
+	});
+
 	let activeItems = $derived(items.filter((i) => !i.checked));
 	let doneItems = $derived(items.filter((i) => i.checked));
 	let doneCount = $derived(doneItems.length);
 
-	function generateId(): string {
-		return crypto.randomUUID();
+	interface DoneSectionGroup {
+		parentLabel: ChecklistItem | null;
+		children: ChecklistItem[];
 	}
 
-	function parseChecklist(text: string): ChecklistItem[] {
-		if (!text.trim()) return [{ id: generateId(), text: '', checked: false }];
-		const lines = text.split('\n');
-		return lines.map((line) => {
-			if (line.startsWith('- [x] ')) return { id: generateId(), text: line.slice(6), checked: true };
-			if (line.startsWith('- [ ] ')) return { id: generateId(), text: line.slice(6), checked: false };
-			return { id: generateId(), text: line, checked: false };
-		});
-	}
+	let doneSectionGroups = $derived.by(() => {
+		const groups: DoneSectionGroup[] = [];
+		const childrenByParent = new Map<string, ChecklistItem[]>();
+		const topLevelDone: ChecklistItem[] = [];
 
-	function serializeChecklist(list: ChecklistItem[]): string {
-		return list
-			.map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
-			.join('\n');
-	}
+		for (const item of doneItems) {
+			if (item.parentId) {
+				const siblings = childrenByParent.get(item.parentId) ?? [];
+				siblings.push(item);
+				childrenByParent.set(item.parentId, siblings);
+			} else {
+				topLevelDone.push(item);
+			}
+		}
+
+		for (const item of topLevelDone) {
+			const doneChildren = childrenByParent.get(item.id) ?? [];
+			groups.push({ parentLabel: null, children: [item, ...doneChildren] });
+			childrenByParent.delete(item.id);
+		}
+
+		for (const [parentId, children] of childrenByParent) {
+			const parent = items.find((i) => i.id === parentId);
+			if (parent) {
+				groups.push({ parentLabel: parent, children });
+			} else {
+				groups.push({ parentLabel: null, children });
+			}
+		}
+
+		return groups;
+	});
 
 	function emitChange() {
-		onChange(serializeChecklist(items));
+		const serialized = serializeChecklist(items);
+		lastEmitted = serialized;
+		onChange(serialized);
 	}
 
 	function toggleItem(id: string) {
-		const item = items.find((i) => i.id === id);
-		if (item) {
-			item.checked = !item.checked;
-			emitChange();
-		}
+		items = toggleItemWithCascade(id, items);
+		emitChange();
 	}
 
 	function updateText(id: string, text: string) {
@@ -69,13 +94,16 @@
 	}
 
 	function addItem(afterIndex: number) {
-		const newItem = { id: generateId(), text: '', checked: false };
+		const afterItem = items[afterIndex];
+		const newItem: ChecklistItem = {
+			id: generateId(),
+			text: '',
+			checked: false,
+			parentId: afterItem?.parentId ?? null
+		};
 		items.splice(afterIndex + 1, 0, newItem);
 		items = [...items];
 		emitChange();
-		// Focus by unique ID — positional indexing breaks when checked items
-		// are interleaved in items[] (e.g. reopened notes) because the DOM
-		// only renders active items as inputs
 		const newId = newItem.id;
 		setTimeout(() => {
 			document.querySelector<HTMLInputElement>(`[data-item-id="${newId}"]`)?.focus();
@@ -83,7 +111,13 @@
 	}
 
 	function removeItem(id: string) {
-		if (items.length <= 1) return;
+		if (items.length <= 1) {
+			if (items[0].parentId) items[0].parentId = null;
+			items = [...items];
+			emitChange();
+			return;
+		}
+		items = items.map((i) => (i.parentId === id ? { ...i, parentId: null } : i));
 		const index = items.findIndex((i) => i.id === id);
 		items.splice(index, 1);
 		items = [...items];
@@ -110,30 +144,129 @@
 				e.preventDefault();
 				inputs[target].focus();
 			}
+		} else if (e.key === 'Tab' && !e.shiftKey) {
+			e.preventDefault();
+			items = indentItem(id, items, activeItems);
+			emitChange();
+		} else if (e.key === 'Tab' && e.shiftKey) {
+			e.preventDefault();
+			items = outdentItem(id, items);
+			emitChange();
 		}
 	}
 
+	// --- Directional lock drag handle ---
+	// Instead of blocking DnD events (which corrupts its internal state),
+	// we detect horizontal intent and store the pending operation. DnD runs
+	// its full course unimpeded. After DnD finalizes, we apply the indent.
+	let dragStartX = 0;
+	let dragStartY = 0;
+	let pendingIndent: { id: string; direction: 'indent' | 'outdent' } | null = null;
+	let directionLocked = false;
+	const LOCK_THRESHOLD = 10;
+	const INDENT_THRESHOLD = 32;
+
+	function windowPointerMove(e: PointerEvent) {
+		if (directionLocked) return;
+
+		const dx = Math.abs(e.clientX - dragStartX);
+		const dy = Math.abs(e.clientY - dragStartY);
+		if (dx >= LOCK_THRESHOLD || dy >= LOCK_THRESHOLD) {
+			directionLocked = true;
+			if (dx <= dy) {
+				// Vertical — DnD handles it, we're done
+				removeWindowListeners();
+			}
+			// Horizontal — keep listening for pointerup to measure total dx
+		}
+	}
+
+	function windowPointerUp(e: PointerEvent) {
+		const dx = e.clientX - dragStartX;
+		if (Math.abs(dx) > INDENT_THRESHOLD && directionLocked && currentDragItemId) {
+			pendingIndent = {
+				id: currentDragItemId,
+				direction: dx > 0 ? 'indent' : 'outdent'
+			};
+		}
+		removeWindowListeners();
+		directionLocked = false;
+	}
+
+	function addWindowListeners() {
+		window.addEventListener('pointermove', windowPointerMove, { capture: true });
+		window.addEventListener('pointerup', windowPointerUp, { capture: true });
+	}
+
+	function removeWindowListeners() {
+		window.removeEventListener('pointermove', windowPointerMove, { capture: true });
+		window.removeEventListener('pointerup', windowPointerUp, { capture: true });
+	}
+
+	let currentDragItemId = '';
+	function handleDragPointerDown(e: PointerEvent, id: string) {
+		dragStartX = e.clientX;
+		dragStartY = e.clientY;
+		directionLocked = false;
+		pendingIndent = null;
+		currentDragItemId = id;
+		addWindowListeners();
+	}
+
+	onDestroy(removeWindowListeners);
+
+	// --- DnD handlers ---
+	function recomputeParentIds(reorderedItems: ChecklistItem[]): ChecklistItem[] {
+		let lastTopLevelId: string | null = null;
+		return reorderedItems.map((item) => {
+			if (item.parentId === null) {
+				lastTopLevelId = item.id;
+				return item;
+			}
+			return { ...item, parentId: lastTopLevelId };
+		});
+	}
+
 	function handleDndConsider(e: CustomEvent<DndEvent<ChecklistItem>>) {
-		// Merge reordered active items with done items
 		items = [...e.detail.items, ...items.filter((i) => i.checked)];
 	}
 
 	function handleDndFinalize(e: CustomEvent<DndEvent<ChecklistItem>>) {
-		items = [...e.detail.items, ...items.filter((i) => i.checked)];
+		const reorderedActive = recomputeParentIds(e.detail.items);
+		items = [...reorderedActive, ...items.filter((i) => i.checked)];
 		emitChange();
+
+		// Apply pending indent/outdent from horizontal drag (after DnD fully cleans up)
+		if (pendingIndent && pendingIndent.id) {
+			const { id, direction } = pendingIndent;
+			pendingIndent = null;
+			if (direction === 'indent') {
+				items = indentItem(id, items, activeItems);
+			} else {
+				items = outdentItem(id, items);
+			}
+			emitChange();
+		}
 	}
 </script>
 
 <div class="space-y-0.5" data-testid="checklist">
 	<section
-		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: {} }}
+		use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
 		onconsider={handleDndConsider}
 		onfinalize={handleDndFinalize}
 		class="space-y-0.5"
 	>
 		{#each activeItems as item (item.id)}
-			<div class="group flex items-center gap-2 py-1.5" animate:flip={{ duration: flipDurationMs }}>
-				<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
+			<div class="group flex items-center gap-2 py-1.5 outline-none {item.parentId ? 'pl-8' : ''}"
+				data-testid={item.parentId ? 'checklist-child-row' : undefined}
+				animate:flip={{ duration: flipDurationMs }}>
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div use:dragHandle
+					aria-label="drag handle"
+					onpointerdown={(e) => handleDragPointerDown(e, item.id)}
+					class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150 touch-none outline-none"
+					data-testid="checklist-drag-handle">
 					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
 				</div>
 				<input
@@ -186,29 +319,38 @@
 			</button>
 
 			{#if doneExpanded}
-				<div class="mt-1 space-y-0.5 pl-5" data-testid="checklist-done-section">
-					{#each doneItems as item (item.id)}
-						<div class="group flex items-center gap-2 py-1.5">
-							<input
-								type="checkbox"
-								checked={item.checked}
-								onchange={() => toggleItem(item.id)}
-								class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
-								data-testid="checklist-done-checkbox"
-							/>
-							<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
-							<button
-								onclick={() => removeItem(item.id)}
-								class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
-								aria-label="Remove item"
-								data-testid="checklist-done-remove"
-							>
-								<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
-							</button>
-						</div>
+				<div class="mt-1 space-y-0.5" data-testid="checklist-done-section">
+					{#each doneSectionGroups as group}
+						{#if group.parentLabel}
+							<div class="flex items-center gap-2 py-1.5 pl-5" data-testid="checklist-done-parent-label">
+								<input type="checkbox" disabled class="h-4 w-4 rounded border-[var(--border-subtle)] opacity-50" />
+								<span class="text-sm text-[var(--text-muted)]">{group.parentLabel.text}</span>
+							</div>
+						{/if}
+						{#each group.children as item (item.id)}
+							<div class="group flex items-center gap-2 py-1.5 {item.parentId ? 'pl-10' : 'pl-5'}">
+								<input
+									type="checkbox"
+									checked={item.checked}
+									onchange={() => toggleItem(item.id)}
+									class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
+									data-testid="checklist-done-checkbox"
+								/>
+								<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
+								<button
+									onclick={() => removeItem(item.id)}
+									class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
+									aria-label="Remove item"
+									data-testid="checklist-done-remove"
+								>
+									<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
+								</button>
+							</div>
+						{/each}
 					{/each}
 				</div>
 			{/if}
 		</div>
 	{/if}
 </div>
+

src/lib/components/NoteCard.svelte

@@ -16,6 +16,7 @@
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
+		indented: boolean;
 	}
 
 	interface Props {
@@ -38,10 +39,14 @@
 
 	const checklistItems = $derived<ChecklistItem[]>(
 		note.checklistMode
-			? note.content.split('\n').filter(l => l.trim()).map(line => ({
-					text: line.replace(/^- \[[ x]\] /, ''),
-					checked: line.startsWith('- [x] ')
-				}))
+			? note.content.split('\n').filter(l => l.trim()).map(line => {
+					const indented = line.startsWith('  - [');
+					return {
+						text: line.replace(/^ {0,2}- \[[ x]\] /, ''),
+						checked: /^ {0,2}- \[x\] /.test(line),
+						indented
+					};
+				})
 			: []
 	);
 
@@ -127,7 +132,8 @@
 	{#if note.checklistMode && checklistItems.length > 0}
 		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
 			{#each sortedChecklistItems.slice(0, 8) as item}
-				<li class="flex items-start gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
+				<li class="flex items-start gap-2 text-sm {item.indented ? 'pl-4 ' : ''}{item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
+					data-testid={item.indented ? 'card-checklist-child' : undefined}>
 					<input
 						type="checkbox"
 						checked={item.checked}

src/lib/stores/notes.test.ts

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

src/lib/stores/notes.ts

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

src/lib/utils/checklist.test.ts

@@ -0,0 +1,222 @@
+import { describe, it, expect } from 'vitest';
+import { parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem, type ChecklistItem } from '$lib/utils/checklist.js';
+
+describe('parseChecklist', () => {
+	it('parses flat checklist items', () => {
+		const items = parseChecklist('- [ ] Milk\n- [x] Eggs');
+		expect(items).toHaveLength(2);
+		expect(items[0]).toMatchObject({ text: 'Milk', checked: false, parentId: null });
+		expect(items[1]).toMatchObject({ text: 'Eggs', checked: true, parentId: null });
+	});
+
+	it('parses nested children with 2-space prefix', () => {
+		const items = parseChecklist('- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs');
+		expect(items).toHaveLength(3);
+		expect(items[0]).toMatchObject({ text: 'Groceries', checked: false, parentId: null });
+		expect(items[1]).toMatchObject({ text: 'Milk', checked: false, parentId: items[0].id });
+		expect(items[2]).toMatchObject({ text: 'Eggs', checked: true, parentId: items[0].id });
+	});
+
+	it('treats orphaned children as top-level', () => {
+		const items = parseChecklist('  - [ ] Orphan\n- [ ] Parent');
+		expect(items[0]).toMatchObject({ text: 'Orphan', parentId: null });
+	});
+
+	it('returns one empty item for blank content', () => {
+		const items = parseChecklist('');
+		expect(items).toHaveLength(1);
+		expect(items[0]).toMatchObject({ text: '', checked: false, parentId: null });
+	});
+
+	it('handles mixed top-level and nested items', () => {
+		const content = '- [ ] A\n  - [ ] A1\n  - [ ] A2\n- [ ] B\n  - [x] B1';
+		const items = parseChecklist(content);
+		expect(items).toHaveLength(5);
+		expect(items[1].parentId).toBe(items[0].id);
+		expect(items[2].parentId).toBe(items[0].id);
+		expect(items[4].parentId).toBe(items[3].id);
+	});
+});
+
+describe('serializeChecklist', () => {
+	it('serializes flat items', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Milk', checked: false, parentId: null },
+			{ id: '2', text: 'Eggs', checked: true, parentId: null }
+		];
+		expect(serializeChecklist(items)).toBe('- [ ] Milk\n- [x] Eggs');
+	});
+
+	it('serializes nested items with 2-space prefix', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Groceries', checked: false, parentId: null },
+			{ id: '2', text: 'Milk', checked: false, parentId: '1' },
+			{ id: '3', text: 'Eggs', checked: true, parentId: '1' }
+		];
+		expect(serializeChecklist(items)).toBe('- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs');
+	});
+
+	it('groups children under parents regardless of array order', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '3', text: 'B', checked: false, parentId: null },
+			{ id: '2', text: 'A1', checked: false, parentId: '1' }
+		];
+		const result = serializeChecklist(items);
+		expect(result).toBe('- [ ] A\n  - [ ] A1\n- [ ] B');
+	});
+
+	it('round-trips parse then serialize', () => {
+		const original = '- [ ] Groceries\n  - [ ] Milk\n  - [x] Eggs\n- [ ] Clean';
+		const items = parseChecklist(original);
+		expect(serializeChecklist(items)).toBe(original);
+	});
+});
+
+describe('toggleItemWithCascade', () => {
+	it('checking a parent checks all children', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: false, parentId: null },
+			{ id: '2', text: 'Child A', checked: false, parentId: '1' },
+			{ id: '3', text: 'Child B', checked: false, parentId: '1' }
+		];
+		const result = toggleItemWithCascade('1', items);
+		expect(result.every((i) => i.checked)).toBe(true);
+	});
+
+	it('unchecking a parent unchecks all children', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: true, parentId: null },
+			{ id: '2', text: 'Child A', checked: true, parentId: '1' },
+			{ id: '3', text: 'Child B', checked: true, parentId: '1' }
+		];
+		const result = toggleItemWithCascade('1', items);
+		expect(result.every((i) => !i.checked)).toBe(true);
+	});
+
+	it('checking a child does not affect parent', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: false, parentId: null },
+			{ id: '2', text: 'Child', checked: false, parentId: '1' }
+		];
+		const result = toggleItemWithCascade('2', items);
+		expect(result.find((i) => i.id === '1')!.checked).toBe(false);
+		expect(result.find((i) => i.id === '2')!.checked).toBe(true);
+	});
+
+	it('unchecking a child with deleted parent orphans it', () => {
+		const items: ChecklistItem[] = [
+			{ id: '2', text: 'Orphan', checked: true, parentId: 'deleted-id' }
+		];
+		const result = toggleItemWithCascade('2', items);
+		expect(result[0].checked).toBe(false);
+		expect(result[0].parentId).toBeNull();
+	});
+
+	it('unchecking a child repositions it after its parent and siblings', () => {
+		// Simulates: parent + 2 children, one child checked (at end of array as done item)
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'Parent', checked: false, parentId: null },
+			{ id: '3', text: 'Child B', checked: false, parentId: '1' },
+			{ id: '4', text: 'Other', checked: false, parentId: null },
+			{ id: '2', text: 'Child A', checked: true, parentId: '1' }  // done, at end
+		];
+		const result = toggleItemWithCascade('2', items);
+		// Child A should be repositioned after Child B (last sibling), not stay at end
+		const ids = result.map(i => i.id);
+		expect(ids).toEqual(['1', '3', '2', '4']);
+		expect(result.find(i => i.id === '2')!.checked).toBe(false);
+	});
+});
+
+describe('indentItem', () => {
+	it('sets parentId to nearest preceding top-level item', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: null }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('2', items, active);
+		expect(result.find((i) => i.id === '2')!.parentId).toBe('1');
+	});
+
+	it('no-op if already a child', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('2', items, active);
+		expect(result).toEqual(items);
+	});
+
+	it('no-op if first item (no parent above)', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('1', items, active);
+		expect(result[0].parentId).toBeNull();
+	});
+
+	it('reparents children to grandparent when indenting a parent', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: null },
+			{ id: '3', text: 'C', checked: false, parentId: '2' },
+			{ id: '4', text: 'D', checked: false, parentId: '2' }
+		];
+		const active = items.filter(i => !i.checked);
+		const result = indentItem('2', items, active);
+		expect(result.find((i) => i.id === '2')!.parentId).toBe('1');
+		expect(result.find((i) => i.id === '3')!.parentId).toBe('1');
+		expect(result.find((i) => i.id === '4')!.parentId).toBe('1');
+	});
+});
+
+describe('outdentItem', () => {
+	it('sets parentId to null', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' }
+		];
+		const result = outdentItem('2', items);
+		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
+	});
+
+	it('no-op if already top-level', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null }
+		];
+		const result = outdentItem('1', items);
+		expect(result[0].parentId).toBeNull();
+	});
+
+	it('adopts consecutive siblings below with same parentId', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' },
+			{ id: '3', text: 'C', checked: false, parentId: '1' },
+			{ id: '4', text: 'D', checked: false, parentId: '1' },
+			{ id: '5', text: 'E', checked: false, parentId: null }
+		];
+		const result = outdentItem('2', items);
+		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
+		expect(result.find((i) => i.id === '3')!.parentId).toBe('2');
+		expect(result.find((i) => i.id === '4')!.parentId).toBe('2');
+		expect(result.find((i) => i.id === '5')!.parentId).toBeNull();
+	});
+
+	it('stops adoption at first non-sibling', () => {
+		const items: ChecklistItem[] = [
+			{ id: '1', text: 'A', checked: false, parentId: null },
+			{ id: '2', text: 'B', checked: false, parentId: '1' },
+			{ id: '5', text: 'E', checked: false, parentId: null },
+			{ id: '3', text: 'C', checked: false, parentId: '1' }
+		];
+		const result = outdentItem('2', items);
+		expect(result.find((i) => i.id === '2')!.parentId).toBeNull();
+		expect(result.find((i) => i.id === '5')!.parentId).toBeNull();
+		expect(result.find((i) => i.id === '3')!.parentId).toBe('1');
+	});
+});

src/lib/utils/checklist.ts

@@ -0,0 +1,152 @@
+export interface ChecklistItem {
+	id: string;
+	text: string;
+	checked: boolean;
+	parentId: string | null;
+}
+
+export function generateId(): string {
+	return crypto.randomUUID();
+}
+
+export function isChild(item: ChecklistItem): boolean {
+	return item.parentId !== null;
+}
+
+export function getChildren(parentId: string, items: ChecklistItem[]): ChecklistItem[] {
+	return items.filter((i) => i.parentId === parentId);
+}
+
+export function getParent(item: ChecklistItem, items: ChecklistItem[]): ChecklistItem | undefined {
+	return item.parentId ? items.find((i) => i.id === item.parentId) : undefined;
+}
+
+export function toggleItemWithCascade(id: string, items: ChecklistItem[]): ChecklistItem[] {
+	const target = items.find((i) => i.id === id)!;
+	const newChecked = !target.checked;
+
+	let result = items.map((item) => {
+		if (item.id === id) return { ...item, checked: newChecked };
+		if (item.parentId === id) return { ...item, checked: newChecked };
+		return item;
+	});
+
+	// When unchecking a child: reposition it after its parent/siblings in the array
+	// (otherwise it stays at the end of the array where done items live)
+	if (!newChecked && target.parentId) {
+		const parentExists = result.some((i) => i.id === target.parentId);
+		if (!parentExists) {
+			// Parent deleted — orphan it
+			result = result.map((i) => (i.id === id ? { ...i, parentId: null } : i));
+		} else {
+			// Remove the item from its current position
+			const uncheckedItem = result.find((i) => i.id === id)!;
+			result = result.filter((i) => i.id !== id);
+			// Find the last sibling or the parent, insert after it
+			let insertAfter = -1;
+			for (let i = 0; i < result.length; i++) {
+				if (result[i].id === target.parentId || result[i].parentId === target.parentId) {
+					insertAfter = i;
+				}
+			}
+			if (insertAfter >= 0) {
+				result.splice(insertAfter + 1, 0, uncheckedItem);
+			} else {
+				result.push(uncheckedItem);
+			}
+		}
+	}
+
+	return result;
+}
+
+export function indentItem(id: string, items: ChecklistItem[], activeItems: ChecklistItem[]): ChecklistItem[] {
+	const item = items.find((i) => i.id === id);
+	if (!item || item.parentId !== null) return items;
+
+	const activeIndex = activeItems.findIndex((i) => i.id === id);
+	let newParentId: string | null = null;
+	for (let i = activeIndex - 1; i >= 0; i--) {
+		if (activeItems[i].parentId === null) {
+			newParentId = activeItems[i].id;
+			break;
+		}
+	}
+	if (!newParentId) return items;
+
+	return items.map((i) => {
+		if (i.id === id) return { ...i, parentId: newParentId };
+		if (i.parentId === id) return { ...i, parentId: newParentId };
+		return i;
+	});
+}
+
+export function outdentItem(id: string, items: ChecklistItem[]): ChecklistItem[] {
+	const index = items.findIndex((i) => i.id === id);
+	const item = items[index];
+	if (!item || item.parentId === null) return items;
+
+	const originalParentId = item.parentId;
+
+	const adoptees: string[] = [];
+	for (let i = index + 1; i < items.length; i++) {
+		if (items[i].parentId === originalParentId) {
+			adoptees.push(items[i].id);
+		} else {
+			break;
+		}
+	}
+
+	return items.map((i) => {
+		if (i.id === id) return { ...i, parentId: null };
+		if (adoptees.includes(i.id)) return { ...i, parentId: id };
+		return i;
+	});
+}
+
+export function parseChecklist(text: string): ChecklistItem[] {
+	if (!text.trim()) return [{ id: generateId(), text: '', checked: false, parentId: null }];
+
+	let lastTopLevelId: string | null = null;
+	return text.split('\n').map((line) => {
+		if (line.startsWith('  - [x] ')) {
+			return { id: generateId(), text: line.slice(8), checked: true, parentId: lastTopLevelId };
+		}
+		if (line.startsWith('  - [ ] ')) {
+			return { id: generateId(), text: line.slice(8), checked: false, parentId: lastTopLevelId };
+		}
+		const item: ChecklistItem = { id: generateId(), text: '', checked: false, parentId: null };
+		if (line.startsWith('- [x] ')) {
+			item.text = line.slice(6);
+			item.checked = true;
+		} else if (line.startsWith('- [ ] ')) {
+			item.text = line.slice(6);
+		} else {
+			item.text = line;
+		}
+		lastTopLevelId = item.id;
+		return item;
+	});
+}
+
+export function serializeChecklist(items: ChecklistItem[]): string {
+	const topLevel = items.filter((i) => i.parentId === null);
+	const childMap = new Map<string, ChecklistItem[]>();
+	for (const item of items) {
+		if (item.parentId) {
+			const siblings = childMap.get(item.parentId) ?? [];
+			siblings.push(item);
+			childMap.set(item.parentId, siblings);
+		}
+	}
+
+	const lines: string[] = [];
+	for (const parent of topLevel) {
+		lines.push(`- [${parent.checked ? 'x' : ' '}] ${parent.text}`);
+		const children = childMap.get(parent.id) ?? [];
+		for (const child of children) {
+			lines.push(`  - [${child.checked ? 'x' : ' '}] ${child.text}`);
+		}
+	}
+	return lines.join('\n');
+}

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

@@ -6,6 +6,7 @@
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
+		indented: boolean;
 	}
 
 	const { data } = $props();
@@ -19,10 +20,14 @@
 		? data.content
 				.split('\n')
 				.filter((l: string) => l.trim())
-				.map((line: string) => ({
-					text: line.replace(/^- \[[ x]\] /, ''),
-					checked: line.startsWith('- [x] ')
-				}))
+				.map((line: string) => {
+					const indented = line.startsWith('  - [');
+					return {
+						text: line.replace(/^ {0,2}- \[[ x]\] /, ''),
+						checked: /^ {0,2}- \[x\] /.test(line),
+						indented
+					};
+				})
 		: [];
 
 	const activeChecklistItems = checklistItems.filter((i) => !i.checked);
@@ -64,9 +69,10 @@
 				<ul class="space-y-2" data-testid="shared-note-checklist">
 					{#each sortedChecklistItems as item}
 						<li
-							class="flex items-start gap-2 text-sm {item.checked
+							class="flex items-start gap-2 text-sm {item.indented ? 'pl-4 ' : ''}{item.checked
 								? 'text-[var(--text-muted)] line-through'
 								: 'text-[var(--text)]'}"
+							data-testid={item.indented ? 'shared-checklist-child' : undefined}
 						>
 							<input
 								type="checkbox"

static/api/openapi.json

@@ -3,7 +3,7 @@
   "info": {
     "title": "Crumbs API",
     "description": "Auto-generated API spec for crumbs",
-    "version": "0.21.9",
+    "version": "0.24.0",
     "contact": {
       "name": "Bretzel",
       "url": "https://bretzel.app"
@@ -541,6 +541,47 @@
         }
       }
     },
+    "/api/notes/{id}/share": {
+      "parameters": [
+        {
+          "name": "id",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        }
+      ],
+      "post": {
+        "tags": [
+          "Notes"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        },
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object"
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "tags": [
+          "Notes"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        }
+      }
+    },
     "/api/notes/{id}/versions": {
       "parameters": [
         {
@@ -728,6 +769,58 @@
         }
       }
     },
+    "/api/shared/{token}": {
+      "parameters": [
+        {
+          "name": "token",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        }
+      ],
+      "get": {
+        "tags": [
+          "Shared"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        }
+      }
+    },
+    "/api/shared/{token}/attachment/{attachmentId}": {
+      "parameters": [
+        {
+          "name": "token",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        },
+        {
+          "name": "attachmentId",
+          "in": "path",
+          "required": true,
+          "schema": {
+            "type": "string"
+          }
+        }
+      ],
+      "get": {
+        "tags": [
+          "Shared"
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          }
+        }
+      }
+    },
     "/api/sync": {
       "post": {
         "tags": [

tests/e2e/checklist.spec.ts

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

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.24.0</span>
+			<span class="footer-version">v0.25.0</span>
 		</div>
 	</footer>