diff --git a/TODO.txt b/TODO.txt
index d28e3d6..d033930 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -131,188 +131,10 @@ and history-driven syncing.
 14. Milestone N: Status Bar (Editor HUD)                                  *wb-N*
 ================================================================================
 
-Goal:
-Add a bottom status bar that surfaces the "always-useful" editor telemetry:
-cursor position, zoom, active tool/mode, selection summary, and persistence
-state - with a clean core → UI boundary.
-
-Design inspirations:
-- Zoom controls commonly expose percentage + "zoom to fit/selection" shortcuts.
-Svelte integration detail:
-- Use $effect to subscribe/unsubscribe to external sources (runs client-side;
-  cleanup function runs on re-run/unmount).
-
-------------------------------------------------------------------------------
-N1. Define the StatusBar view model (core, pure TS)
-------------------------------------------------------------------------------
-
-/packages/core/src/ui/statusbar.ts
-[x] Define StatusBarVM (single object the UI renders):
-    - cursorWorld: { x, y }         " world coords (always)
-    - cursorScreen: { x, y }?       " optional dev-only
-    - zoomPct: number               " e.g. 100, 67, 250
-    - toolId: ToolId                " select/rect/pen/...
-    - mode: string                  " 'idle'|'dragging'|'panning'|'text-edit'
-    - selection:
-        - count: number
-        - kind?: string             " optional: 'rect', 'mixed', etc.
-        - bounds?: { w, h }         " optional v1
-    - snap:
-        - enabled: boolean
-        - gridSize?: number         " if grid enabled
-        - angleStepDeg?: number     " if angle snapping exists
-    - persistence:
-        - backend: 'indexeddb'
-        - state: 'saved'|'saving'|'error'
-        - lastSavedAt?: number      " epoch ms
-        - pendingWrites?: number    " queue depth if you batch writes
-        - errorMsg?: string
-
-Notes:
-- This VM is intentionally READ-ONLY and derived from existing editor state,
-  input state, and persistence sink state.
-
-(DoD):
-- StatusBarVM compiles and is stable enough to render even before UI exists.
-
-------------------------------------------------------------------------------
-N2. Provide selectors / derivations for StatusBarVM
-------------------------------------------------------------------------------
-
-/packages/core/src/ui/statusbar.ts
-[x] Implement pure functions:
-    - getZoomPct(state) -> number
-    - getToolId(state) -> ToolId
-    - getSelectionSummary(state) -> { count, kind?, bounds? }
-    - getSnapSummary(state) -> snap summary (default safe values)
-
-Cursor position source:
-[x] Define a minimal CursorState in core (NOT persisted):
-    - cursorWorld: Vec2
-    - cursorScreen?: Vec2
-    - lastMoveAt: number
-
-[x] Add updateCursor(world, screen?) action + reducer handler (or direct setter)
-    that ONLY touches CursorState (no history command, no persistence).
-
-(DoD):
-- You can compute StatusBarVM from (EditorState + CursorState + PersistState).
-
-------------------------------------------------------------------------------
-N3. Wire cursor updates from pointer movement (apps/web)
-------------------------------------------------------------------------------
-
-/apps/web/src/lib/input.ts
-[x] On pointermove (or mousemove when not captured):
-    - compute world coords using camera.screenToWorld
-    - dispatch updateCursor(world, screen)
-
-Performance:
-[x] Throttle cursor updates:
-    - v0: requestAnimationFrame coalescing (only publish latest per frame)
-    - avoid flooding render/history/persistence
-
-(DoD):
-- Cursor world coordinates update smoothly while moving the mouse.
-
-------------------------------------------------------------------------------
-N4. Add persistence status signals (Dexie + persistence sink integration)
-------------------------------------------------------------------------------
-
-Goal:
-Expose persistence state without touching the history system (Milestone L is
-done; persistence is already hooked to history in Milestone M).
-
-/apps/web/src/lib/status.ts
-[x] Extend your persistence sink (from Milestone M) to expose a small status:
-    - pendingWrites counter (increment on enqueue, decrement on commit)
-    - lastSavedAt timestamp (set on successful commit)
-    - lastError (set on failed commit)
-[x] Use Dexie liveQuery to observe the current board’s updatedAt from IndexedDB
-    and reflect it in the UI (helps confirm persisted state across tabs).
-
-(DoD):
-- Status bar can show: "Saving…" when pendingWrites > 0, and "Saved" with time
-  when pendingWrites reaches 0.
-
-------------------------------------------------------------------------------
-N5. Implement StatusBar.svelte using runes
-------------------------------------------------------------------------------
-
-/apps/web/src/lib/components/StatusBar.svelte
-[ ] Render left → right (suggested):
-    - Tool + mode
-    - Cursor: X,Y (world)
-    - Selection summary
-    - Snap/grid summary
-    - Zoom %
-    - Save state ("Saved 3s ago" / "Saving…" / "Error")
-
-[ ] Consume state via runes:
-    - keep a local $state(snapshot) for EditorState
-    - keep a local $state(cursor) for CursorState
-    - keep a local $state(persist) for PersistStatus
-
-Subscriptions:
-[ ] Use $effect to subscribe to any external streams and return cleanup
-    unsubscribe.
-
-Formatting:
-[ ] Cursor formatting:
-    - v0: integers
-    - v1: configurable precision (e.g. 0.1 units when zoomed in)
-
-(DoD):
-- Status bar is visible, updates live, and never causes noticeable jank.
-
-------------------------------------------------------------------------------
-N6. Interactions (small, high-value)
-------------------------------------------------------------------------------
-
-Zoom control:
-[ ] Clicking zoomPct opens a tiny menu:
-    - 50%, 100%, 200%
-    - Zoom to fit
-    - Zoom to selection
-(Inspiration: zoom/view options + shortcuts in Figma/FigJam.)
-
-Snap toggles:
-[ ] Add quick toggles (optional v0, recommended v1):
-    - snap enabled
-    - grid enabled
-
-(DoD):
-- Zoom is discoverable and controllable from the status bar.
-
-------------------------------------------------------------------------------
-N7. Tests
-------------------------------------------------------------------------------
-
-Core unit tests (/packages/core/test/statusbar.test.ts):
-[ ] getZoomPct returns expected values from camera zoom
-[ ] selection summary is correct (0, 1, many)
-[ ] snap summary defaults safe when features disabled
-
-Web integration tests (optional v0):
-[ ] cursor update throttling: 100 pointermoves in a tick results in <= 1 state
-    publication per frame (if you implement rAF coalescing)
-
-Persistence tests (web):
-[ ] pendingWrites transitions: 0 -> N -> 0 yields state 'saving' then 'saved'
-[ ] error sets 'error' state and preserves lastSavedAt
-
-------------------------------------------------------------------------------
-Definition of Done
-------------------------------------------------------------------------------
-
-- Status bar shows:
-    - cursor world position
-    - zoom percentage
-    - active tool/mode
-    - selection count
-    - persistence state (Saved/Saving/Error + lastSavedAt)
-- Cursor updates are throttled and do not spam history or persistence.
-- UI subscriptions use $effect with cleanup.
+The HUD is now powered end-to-end via a `StatusBarVM` + cursor store, a web
+persistence/snap manager, and `StatusBar.svelte` with zoom menu and snap/grid
+toggles backed by unit/integration tests for selectors, cursor throttling,
+persistence transitions, and Canvas wiring.
 
 ================================================================================
 15. Milestone O: Export (PNG/SVG)                                         *wb-O*
diff --git a/apps/web/src/lib/canvas/Canvas.svelte b/apps/web/src/lib/canvas/Canvas.svelte
index c32228c..6489ee6 100644
--- a/apps/web/src/lib/canvas/Canvas.svelte
+++ b/apps/web/src/lib/canvas/Canvas.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
 	import HistoryViewer from '$lib/components/HistoryViewer.svelte';
+	import StatusBar from '$lib/components/StatusBar.svelte';
 	import Toolbar from '$lib/components/Toolbar.svelte';
 	import { createInputAdapter, type InputAdapter } from '$lib/input';
-	import { createPersistenceManager } from '$lib/status';
+	import {
+		createPersistenceManager,
+		createSnapStore,
+		createStatusStore,
+		type SnapStore,
+		type StatusStore
+	} from '$lib/status';
 	import {
 		ArrowTool,
 		CursorStore,
@@ -33,6 +40,8 @@
 	let repo: ReturnType<typeof createWebDocRepo> | null = null;
 	let sink: PersistenceSink | null = null;
 	let persistenceManager: ReturnType<typeof createPersistenceManager> | null = null;
+	const fallbackStatusStore = createStatusStore({ backend: 'indexeddb', state: 'saved', pendingWrites: 0 });
+	let persistenceStatusStore = $state<StatusStore>(fallbackStatusStore);
 	let activeBoardId: string | null = null;
 
 	const store = new Store(undefined, {
@@ -45,6 +54,7 @@
 		}
 	});
 	const cursorStore = new CursorStore();
+	const snapStore: SnapStore = createSnapStore();
 
 	function applyLoadedDoc(doc: LoadedDoc) {
 		const firstPageId = doc.order.pageIds[0] ?? Object.keys(doc.pages)[0] ?? null;
@@ -96,23 +106,24 @@
 	}
 
 	function handleAction(action: Action) {
-		if (action.type === 'key-down') {
+		const actionWithSnap = applySnapping(action);
+		if (actionWithSnap.type === 'key-down') {
 			const isPrimary =
-				(action.modifiers.meta && navigator.platform.toUpperCase().includes('MAC')) ||
-				(action.modifiers.ctrl && !navigator.platform.toUpperCase().includes('MAC'));
+				(actionWithSnap.modifiers.meta && navigator.platform.toUpperCase().includes('MAC')) ||
+				(actionWithSnap.modifiers.ctrl && !navigator.platform.toUpperCase().includes('MAC'));
 
-			if (isPrimary && !action.modifiers.shift && (action.key === 'z' || action.key === 'Z')) {
+			if (isPrimary && !actionWithSnap.modifiers.shift && (actionWithSnap.key === 'z' || actionWithSnap.key === 'Z')) {
 				store.undo();
 				return;
 			}
 
-			if (isPrimary && action.modifiers.shift && (action.key === 'z' || action.key === 'Z')) {
+			if (isPrimary && actionWithSnap.modifiers.shift && (actionWithSnap.key === 'z' || actionWithSnap.key === 'Z')) {
 				store.redo();
 				return;
 			}
 		}
 
-		applyActionWithHistory(action);
+		applyActionWithHistory(actionWithSnap);
 	}
 
 	function statesEqual(a: EditorState, b: EditorState): boolean {
@@ -148,15 +159,40 @@
 		}
 	}
 
+	function applySnapping(action: Action): Action {
+		const snap = snapStore.get();
+		if (!snap.snapEnabled || !snap.gridEnabled) {
+			return action;
+		}
+		if (!('world' in action)) {
+			return action;
+		}
+		const snapCoord = (value: number) => Math.round(value / snap.gridSize) * snap.gridSize;
+		const snappedWorld = { x: snapCoord(action.world.x), y: snapCoord(action.world.y) };
+		return { ...action, world: snappedWorld };
+	}
+
 	let canvas: HTMLCanvasElement;
 	let renderer: Renderer | null = null;
 	let inputAdapter: InputAdapter | null = null;
 
+	function getViewport(): Viewport {
+		if (canvas) {
+			const rect = canvas.getBoundingClientRect();
+			return { width: rect.width || 1, height: rect.height || 1 };
+		}
+		if (typeof window !== 'undefined') {
+			return { width: window.innerWidth || 1, height: window.innerHeight || 1 };
+		}
+		return { width: 1, height: 1 };
+	}
+
 	onMount(() => {
 		const db = new InkfiniteDB();
 		repo = createWebDocRepo(db);
 		persistenceManager = createPersistenceManager(db, repo, { sink: { debounceMs: 200 } });
 		sink = persistenceManager.sink;
+		persistenceStatusStore = persistenceManager.status;
 		let disposed = false;
 
 		const hydrate = async () => {
@@ -183,11 +219,6 @@
 
 		hydrate();
 
-		function getViewport(): Viewport {
-			const rect = canvas.getBoundingClientRect();
-			return { width: rect.width, height: rect.height };
-		}
-
 		function getCamera() {
 			return store.getState().camera;
 		}
@@ -226,6 +257,8 @@
 		activeBoardId = null;
 		persistenceManager?.dispose();
 		persistenceManager = null;
+		fallbackStatusStore.update(() => ({ backend: 'indexeddb', state: 'saved', pendingWrites: 0 }));
+		persistenceStatusStore = fallbackStatusStore;
 	});
 </script>
 
@@ -233,6 +266,7 @@
 	<Toolbar currentTool={currentToolId} onToolChange={handleToolChange} onHistoryClick={handleHistoryClick} />
 	<canvas bind:this={canvas}></canvas>
 	<HistoryViewer {store} bind:open={historyViewerOpen} onClose={handleHistoryClose} />
+	<StatusBar {store} cursor={cursorStore} persistence={persistenceStatusStore} snap={snapStore} {getViewport} />
 </div>
 
 <style>
diff --git a/apps/web/src/lib/components/StatusBar.svelte b/apps/web/src/lib/components/StatusBar.svelte
new file mode 100644
index 0000000..22f87a8
--- /dev/null
+++ b/apps/web/src/lib/components/StatusBar.svelte
@@ -0,0 +1,391 @@
+<script lang="ts">
+	import type { SnapSettings, SnapStore, StatusStore } from '$lib/status';
+	import {
+		type Box2,
+		type CursorState,
+		type CursorStore,
+		type EditorState,
+		type PersistenceStatus,
+		type Store,
+		EditorState as EditorStateOps,
+		buildStatusBarVM,
+		getSelectedShapes,
+		getShapesOnCurrentPage,
+		shapeBounds
+	} from 'inkfinite-core';
+
+	type Viewport = { width: number; height: number };
+	const defaultViewport = () => ({ width: 1, height: 1 });
+
+	type Props = {
+		store: Store;
+		cursor: CursorStore;
+		persistence: StatusStore;
+		snap: SnapStore;
+		getViewport?: () => Viewport;
+	};
+
+	let { store, cursor, persistence, snap, getViewport = defaultViewport }: Props = $props();
+
+	let editorSnapshot: EditorState = EditorStateOps.create();
+	let cursorSnapshot: CursorState = { cursorWorld: { x: 0, y: 0 }, lastMoveAt: Date.now() };
+	let persistenceSnapshot: PersistenceStatus = { backend: 'indexeddb', state: 'saved', pendingWrites: 0 };
+	let snapSnapshot = $state<SnapSettings>({ snapEnabled: false, gridEnabled: false, gridSize: 10 });
+	let statusVm = $state(buildStatusBarVM(editorSnapshot, cursorSnapshot, persistenceSnapshot));
+	let zoomMenuOpen = $state(false);
+	let zoomMenuEl = $state<HTMLDivElement | null>(null);
+	let zoomButtonEl = $state<HTMLButtonElement | null>(null);
+
+	function updateVm() {
+		statusVm = buildStatusBarVM(editorSnapshot, cursorSnapshot, persistenceSnapshot);
+	}
+
+	$effect(() => {
+		const currentStore = store;
+		editorSnapshot = currentStore.getState();
+		const unsubscribe = currentStore.subscribe((state) => {
+			editorSnapshot = state;
+			updateVm();
+		});
+		return () => unsubscribe();
+	});
+
+	$effect(() => {
+		const currentCursor = cursor;
+		cursorSnapshot = currentCursor.getState();
+		const unsubscribe = currentCursor.subscribe((state) => {
+			cursorSnapshot = state;
+			updateVm();
+		});
+		return () => unsubscribe();
+	});
+
+	$effect(() => {
+		const currentPersistence = persistence;
+		persistenceSnapshot = currentPersistence.get();
+		const unsubscribe = currentPersistence.subscribe((state) => {
+			persistenceSnapshot = state;
+			updateVm();
+		});
+		return () => unsubscribe();
+	});
+
+	$effect(() => {
+		const currentSnap = snap;
+		snapSnapshot = currentSnap.get();
+		const unsubscribe = currentSnap.subscribe((state) => {
+			snapSnapshot = state;
+			updateVm();
+		});
+		return () => unsubscribe();
+	});
+
+	$effect(() => {
+		if (!zoomMenuOpen || typeof document === 'undefined') {
+			return;
+		}
+		const handlePointerDown = (event: PointerEvent) => {
+			const target = event.target as Node | null;
+			if (!target) {
+				return;
+			}
+			if (zoomMenuEl?.contains(target) || zoomButtonEl?.contains(target)) {
+				return;
+			}
+			zoomMenuOpen = false;
+		};
+
+		document.addEventListener('pointerdown', handlePointerDown);
+		return () => document.removeEventListener('pointerdown', handlePointerDown);
+	});
+
+	function getViewportSize(): Viewport {
+		return getViewport();
+	}
+
+	function formatCursorCoord(value: number): string {
+		return Math.round(value).toString();
+	}
+
+	function formatSelection(): string {
+		const selection = statusVm.selection;
+		if (selection.count === 0) {
+			return 'No selection';
+		}
+		if (selection.count === 1) {
+			const bounds = selection.bounds;
+			const size = bounds ? ` ${Math.round(bounds.w)}×${Math.round(bounds.h)}` : '';
+			return `${selection.kind ?? 'shape'}${size}`;
+		}
+		return `${selection.count} items`;
+	}
+
+	function formatPersistenceSummary(): string {
+		const state = statusVm.persistence;
+		if (state.state === 'error') {
+			return state.errorMsg ? `Error: ${state.errorMsg}` : 'Error';
+		}
+		if (state.state === 'saving' || (state.pendingWrites ?? 0) > 0) {
+			return 'Saving…';
+		}
+		if (state.lastSavedAt) {
+			const seconds = Math.floor((Date.now() - state.lastSavedAt) / 1000);
+			if (seconds < 1) {
+				return 'Saved just now';
+			}
+			if (seconds < 60) {
+				return `Saved ${seconds}s ago`;
+			}
+			const minutes = Math.floor(seconds / 60);
+			return `Saved ${minutes}m ago`;
+		}
+		return 'Saved';
+	}
+
+	function setZoomPercent(percent: number) {
+		const zoom = percent / 100;
+		store.setState((state) => ({ ...state, camera: { ...state.camera, zoom } }));
+		zoomMenuOpen = false;
+	}
+
+	function zoomToBounds(bounds: Box2) {
+		const viewport = getViewportSize();
+		const width = bounds.max.x - bounds.min.x || 1;
+		const height = bounds.max.y - bounds.min.y || 1;
+		const margin = 80;
+		const scaleX = (viewport.width - margin) / width;
+		const scaleY = (viewport.height - margin) / height;
+		const zoom = Math.max(Math.min(scaleX, scaleY), 0.05);
+		const center = { x: (bounds.min.x + bounds.max.x) / 2, y: (bounds.min.y + bounds.max.y) / 2 };
+		store.setState((state) => ({ ...state, camera: { x: center.x, y: center.y, zoom } }));
+		zoomMenuOpen = false;
+	}
+
+	function zoomToFit() {
+		const shapes = getShapesOnCurrentPage(editorSnapshot);
+		if (shapes.length === 0) {
+			setZoomPercent(100);
+			return;
+		}
+		const bounds = shapes.reduce<Box2 | null>((acc, shape) => {
+			const shapeBox = shapeBounds(shape);
+			if (!acc) {
+				return shapeBox;
+			}
+			return {
+				min: { x: Math.min(acc.min.x, shapeBox.min.x), y: Math.min(acc.min.y, shapeBox.min.y) },
+				max: { x: Math.max(acc.max.x, shapeBox.max.x), y: Math.max(acc.max.y, shapeBox.max.y) }
+			};
+		}, null);
+
+		if (bounds) {
+			zoomToBounds(bounds);
+		}
+	}
+
+	function zoomToSelection() {
+		const shapes = getSelectedShapes(editorSnapshot);
+		if (shapes.length === 0) {
+			zoomToFit();
+			return;
+		}
+
+		const bounds = shapes.reduce<Box2 | null>((acc, shape) => {
+			const shapeBox = shapeBounds(shape);
+			if (!acc) {
+				return shapeBox;
+			}
+			return {
+				min: { x: Math.min(acc.min.x, shapeBox.min.x), y: Math.min(acc.min.y, shapeBox.min.y) },
+				max: { x: Math.max(acc.max.x, shapeBox.max.x), y: Math.max(acc.max.y, shapeBox.max.y) }
+			};
+		}, null);
+
+		if (bounds) {
+			zoomToBounds(bounds);
+		}
+	}
+
+	const zoomPresets = [
+		{ label: '50%', value: 50 },
+		{ label: '100%', value: 100 },
+		{ label: '200%', value: 200 }
+	];
+
+	function handleSnapToggle(event: Event) {
+		const target = event.currentTarget as HTMLInputElement;
+		snap.update((current) => ({ ...current, snapEnabled: target.checked }));
+	}
+
+	function handleGridToggle(event: Event) {
+		const target = event.currentTarget as HTMLInputElement;
+		snap.update((current) => ({ ...current, gridEnabled: target.checked }));
+	}
+</script>
+
+<div class="status-bar">
+	<div class="status-section">
+		<span class="label">Tool</span>
+		<span class="value">{statusVm.toolId}</span>
+		<span class="mode">{statusVm.mode}</span>
+	</div>
+
+	<div class="status-section">
+		<span class="label">Cursor</span>
+		<span class="value">
+			{formatCursorCoord(statusVm.cursorWorld.x)}, {formatCursorCoord(statusVm.cursorWorld.y)}
+		</span>
+	</div>
+
+	<div class="status-section">
+		<span class="label">Selection</span>
+		<span class="value">{formatSelection()}</span>
+	</div>
+
+	<div class="status-section snap">
+		<span class="label">Snap</span>
+		<div class="toggle-row">
+			<label class="toggle">
+				<input type="checkbox" checked={snapSnapshot.snapEnabled} onchange={handleSnapToggle} />
+				<span>Main</span>
+			</label>
+			<label class="toggle">
+				<input type="checkbox" checked={snapSnapshot.gridEnabled} onchange={handleGridToggle} />
+				<span>Grid</span>
+			</label>
+		</div>
+	</div>
+
+	<div class="status-section zoom">
+		<span class="label">Zoom</span>
+		<button class="zoom-button" bind:this={zoomButtonEl} onclick={() => (zoomMenuOpen = !zoomMenuOpen)}>
+			{statusVm.zoomPct}%
+		</button>
+
+		{#if zoomMenuOpen}
+			<div class="zoom-menu" bind:this={zoomMenuEl}>
+				{#each zoomPresets as preset}
+					<button onclick={() => setZoomPercent(preset.value)}>{preset.label}</button>
+				{/each}
+				<div class="menu-divider"></div>
+				<button onclick={zoomToFit}>Zoom to fit</button>
+				<button onclick={zoomToSelection}>Zoom to selection</button>
+			</div>
+		{/if}
+	</div>
+
+	<div class="status-section persistence">
+		<span class="label">Sync</span>
+		<span class="value" class:error={statusVm.persistence.state === 'error'}>{formatPersistenceSummary()}</span>
+	</div>
+</div>
+
+<style>
+	.status-bar {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+		gap: 12px;
+		padding: 8px 16px;
+		background: var(--surface-elevated);
+		border-top: 1px solid var(--border);
+		font-size: 13px;
+		align-items: center;
+		min-height: 48px;
+	}
+
+	.status-section {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		position: relative;
+	}
+
+	.status-section.snap,
+	.status-section.zoom {
+		align-items: flex-start;
+	}
+
+	.toggle-row {
+		display: flex;
+		gap: 8px;
+	}
+
+	.toggle {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 12px;
+		color: var(--text);
+	}
+
+	.toggle input {
+		margin: 0;
+	}
+
+	.label {
+		font-size: 11px;
+		color: var(--text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.value {
+		font-weight: 500;
+		color: var(--text);
+	}
+
+	.value.error {
+		color: var(--error, #d14343);
+	}
+
+	.mode {
+		font-size: 12px;
+		color: var(--text-muted);
+	}
+
+	.zoom-button {
+		border: 1px solid var(--border);
+		background: var(--surface);
+		padding: 4px 8px;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+
+	.zoom-button:hover {
+		background: var(--surface-elevated);
+	}
+
+	.zoom-menu {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		background: var(--surface);
+		border: 1px solid var(--border);
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		padding: 8px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		z-index: 10;
+	}
+
+	.zoom-menu button {
+		border: none;
+		background: transparent;
+		padding: 4px 8px;
+		border-radius: 4px;
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.zoom-menu button:hover {
+		background: var(--surface-elevated);
+	}
+
+	.menu-divider {
+		height: 1px;
+		background: var(--border);
+		margin: 6px 0;
+	}
+</style>
diff --git a/apps/web/src/lib/status.ts b/apps/web/src/lib/status.ts
index 56a6584..4a16c78 100644
--- a/apps/web/src/lib/status.ts
+++ b/apps/web/src/lib/status.ts
@@ -20,6 +20,15 @@ type LiveQueryFactory = typeof liveQuery;
 
 export type PersistenceManagerOptions = { sink?: PersistenceSinkOptions; liveQueryFn?: LiveQueryFactory };
 
+export type SnapSettings = { snapEnabled: boolean; gridEnabled: boolean; gridSize: number };
+
+export type SnapStore = {
+  get(): SnapSettings;
+  subscribe(listener: (snap: SnapSettings) => void): () => void;
+  update(updater: (snap: SnapSettings) => SnapSettings): void;
+  set(next: SnapSettings): void;
+};
+
 export type PersistenceManager = {
   sink: PersistenceSink;
   status: StatusStore;
@@ -120,7 +129,7 @@ export function createPersistenceManager(
   };
 }
 
-function createStatusStore(initial: PersistenceStatus): StatusStore {
+export function createStatusStore(initial: PersistenceStatus): StatusStore {
   let value = initial;
   const listeners = new Set<StatusListener>();
 
@@ -166,3 +175,34 @@ function hasPatchChanges(patch: DocPatch): boolean {
 
   return false;
 }
+
+export function createSnapStore(initial?: Partial<SnapSettings>): SnapStore {
+  const defaults: SnapSettings = { snapEnabled: false, gridEnabled: false, gridSize: 10 };
+  let value: SnapSettings = { ...defaults, ...initial };
+  const listeners = new Set<(snap: SnapSettings) => void>();
+
+  return {
+    get() {
+      return value;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      listener(value);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    update(updater) {
+      value = updater(value);
+      for (const listener of listeners) {
+        listener(value);
+      }
+    },
+    set(next) {
+      value = next;
+      for (const listener of listeners) {
+        listener(value);
+      }
+    },
+  };
+}
diff --git a/apps/web/src/lib/tests/Canvas.history.test.ts b/apps/web/src/lib/tests/Canvas.history.test.ts
index 8b825ea..4e297e1 100644
--- a/apps/web/src/lib/tests/Canvas.history.test.ts
+++ b/apps/web/src/lib/tests/Canvas.history.test.ts
@@ -43,7 +43,23 @@ vi.mock("../input", () => {
   };
 });
 
-vi.mock("$lib/status", () => ({ createPersistenceManager: persistenceMocks.createPersistenceManager }));
+vi.mock(
+  "$lib/status",
+  () => ({
+    createPersistenceManager: persistenceMocks.createPersistenceManager,
+    createStatusStore: () => ({
+      get: () => ({ backend: "indexeddb", state: "saved", pendingWrites: 0 }),
+      subscribe: () => () => {},
+      update: () => {},
+    }),
+    createSnapStore: () => ({
+      get: () => ({ snapEnabled: false, gridEnabled: false, gridSize: 10 }),
+      subscribe: () => () => {},
+      update: () => {},
+      set: () => {},
+    }),
+  }),
+);
 
 vi.mock("inkfinite-renderer", () => {
   return { createRenderer: vi.fn(() => ({ dispose: vi.fn(), markDirty: vi.fn() })) };
@@ -259,6 +275,18 @@ vi.mock("inkfinite-core", () => {
     },
     createWebDocRepo,
     createPersistenceSink: vi.fn(() => ({ enqueueDocPatch: sinkEnqueueSpy, flush: vi.fn() })),
+    buildStatusBarVM: () => ({
+      cursorWorld: { x: 0, y: 0 },
+      zoomPct: 100,
+      toolId: "select",
+      mode: "idle",
+      selection: { count: 0 },
+      snap: { enabled: false },
+      persistence: { backend: "indexeddb", state: "saved" },
+    }),
+    getSelectedShapes: () => [],
+    getShapesOnCurrentPage: () => [],
+    shapeBounds: () => ({ min: { x: 0, y: 0 }, max: { x: 0, y: 0 } }),
     diffDoc: vi.fn(() => ({})),
     InkfiniteDB: class {},
     __storeInstances: storeInstances,
diff --git a/apps/web/src/lib/tests/Canvas.svelte.test.ts b/apps/web/src/lib/tests/Canvas.svelte.test.ts
index b623bf5..3a673d9 100644
--- a/apps/web/src/lib/tests/Canvas.svelte.test.ts
+++ b/apps/web/src/lib/tests/Canvas.svelte.test.ts
@@ -17,6 +17,17 @@ vi.mock("$lib/status", () => {
       setActiveBoard: () => {},
       dispose: () => {},
     }),
+    createStatusStore: () => ({
+      get: () => ({ backend: "indexeddb", state: "saved", pendingWrites: 0 }),
+      subscribe: () => () => {},
+      update: () => {},
+    }),
+    createSnapStore: () => ({
+      get: () => ({ snapEnabled: false, gridEnabled: false, gridSize: 10 }),
+      subscribe: () => () => {},
+      update: () => {},
+      set: () => {},
+    }),
   };
 });
 
@@ -86,6 +97,13 @@ describe("Canvas component", () => {
     expect(style.flexDirection).toBe("column");
   });
 
+  it("should render the status bar", () => {
+    const { container } = render(Canvas);
+    const statusBar = container.querySelector(".status-bar");
+
+    expect(statusBar).toBeTruthy();
+  });
+
   it("should render all tool buttons in toolbar", () => {
     const { container } = render(Canvas);
     const toolButtons = container.querySelectorAll(".tool-button");