diff --git a/ROADMAP.md b/ROADMAP.md
index 1a1625c..620918e 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -62,11 +62,11 @@ export, and repurpose, not substitutes for missing editor behavior.
 
 ### Editor polish
 
-The editor already separates drawing tools, application actions, contextual
-selection controls, and library insertion. After the workflows above settle,
-finish the consistency pass across control states, menus, popovers, pointer
-targets, viewport edges, and Storybook examples. Light and dark themes should
-continue to use the shared Inkfinite tokens with theme-specific contrast.
+The editor separates drawing tools, application actions, contextual selection
+controls, and library insertion. Shared controls now cover interaction states,
+pointer targets, menu and popover behavior, viewport-edge placement, and focus
+restoration. Storybook and end-to-end tests cover the important combinations in
+light and dark themes.
 
 ### Permissioned MCP
 
diff --git a/TODO.md b/TODO.md
index 1106f57..435cfaf 100644
--- a/TODO.md
+++ b/TODO.md
@@ -55,18 +55,18 @@ and rendered output where visual fidelity matters.
 
 ## Editor polish
 
-- [ ] Standardize hover, pressed, selected, disabled, busy, and focus-visible
+- [x] Standardize hover, pressed, selected, disabled, busy, and focus-visible
       states
-- [ ] Standardize menu and popover placement, dismissal, and focus restoration
-- [ ] Standardize control heights, icon sizes, spacing, and minimum pointer
+- [x] Standardize menu and popover placement, dismissal, and focus restoration
+- [x] Standardize control heights, icon sizes, spacing, and minimum pointer
       targets
-- [ ] Remove controls whose hover state is visually indistinguishable from
+- [x] Remove controls whose hover state is visually indistinguishable from
       idle
-- [ ] Verify menus and popovers remain inside the viewport at editor edges
-- [ ] Verify tool changes, selection changes, and viewport actions do not cause
+- [x] Verify menus and popovers remain inside the viewport at editor edges
+- [x] Verify tool changes, selection changes, and viewport actions do not cause
       unintended layout jumps
-- [ ] Add Storybook coverage for important component states and combinations
-- [ ] Add end-to-end coverage for menus, popovers, focus restoration, and
+- [x] Add Storybook coverage for important component states and combinations
+- [x] Add end-to-end coverage for menus, popovers, focus restoration, and
       viewport-edge placement
 
 ## Permissioned MCP
diff --git a/apps/web/e2e/editor-controls.spec.ts b/apps/web/e2e/editor-controls.spec.ts
new file mode 100644
index 0000000..5cc0112
--- /dev/null
+++ b/apps/web/e2e/editor-controls.spec.ts
@@ -0,0 +1,49 @@
+import { expect, test } from './fixtures/editor';
+
+async function expectInsideViewport(locator: import('@playwright/test').Locator) {
+	const box = await locator.boundingBox();
+	const viewport = locator.page().viewportSize();
+	expect(box).not.toBeNull();
+	expect(viewport).not.toBeNull();
+	expect(box!.x).toBeGreaterThanOrEqual(0);
+	expect(box!.y).toBeGreaterThanOrEqual(0);
+	expect(box!.x + box!.width).toBeLessThanOrEqual(viewport!.width);
+	expect(box!.y + box!.height).toBeLessThanOrEqual(viewport!.height);
+}
+
+test('menus stay in the viewport and restore focus', async ({ editor, page }) => {
+	await editor.open();
+
+	const exportButton = page.getByRole('button', { name: 'Export drawing' });
+	await exportButton.click();
+	const exportMenu = page.getByRole('menu', { name: 'Export options' });
+	await expect(exportMenu).toBeVisible();
+	await expectInsideViewport(exportMenu);
+	await page.keyboard.press('Escape');
+	await expect(exportButton).toBeFocused();
+
+	const shapesButton = page.getByRole('button', { name: 'Shapes', exact: true });
+	await shapesButton.click();
+	const shapesMenu = page.getByRole('menu', { name: 'Shape tools' });
+	await expectInsideViewport(shapesMenu);
+	await page.keyboard.press('Escape');
+	await expect(shapesButton).toBeFocused();
+
+	const zoomButton = page.getByRole('button', { name: 'Zoom level' });
+	await zoomButton.click();
+	await expectInsideViewport(page.getByRole('menu', { name: 'Zoom options' }));
+	await page.keyboard.press('Escape');
+	await expect(zoomButton).toBeFocused();
+});
+
+test('tool and menu changes do not move the canvas', async ({ editor, page }) => {
+	await editor.open();
+	const canvas = page.locator('canvas').first();
+	const initial = await canvas.boundingBox();
+
+	await page.getByRole('button', { name: 'Direct Select', exact: true }).click();
+	await page.getByRole('button', { name: 'Shapes', exact: true }).click();
+	await page.keyboard.press('Escape');
+
+	expect(await canvas.boundingBox()).toEqual(initial);
+});
diff --git a/apps/web/src/lib/tests/Toolbar.accessibility.test.ts b/apps/web/src/lib/tests/Toolbar.accessibility.test.ts
index afc6b96..ce6f515 100644
--- a/apps/web/src/lib/tests/Toolbar.accessibility.test.ts
+++ b/apps/web/src/lib/tests/Toolbar.accessibility.test.ts
@@ -40,7 +40,7 @@ describe('Toolbar accessibility', () => {
 
 		const exportButton = container.querySelector('.toolbar__export-button');
 		expect(exportButton?.getAttribute('aria-label')).toBe('Export drawing');
-		expect(exportButton?.getAttribute('aria-haspopup')).toBe('true');
+		expect(exportButton?.getAttribute('aria-haspopup')).toBe('menu');
 		expect(exportButton?.getAttribute('aria-expanded')).toBe('false');
 		const importButton = container.querySelector('.toolbar__import-button');
 		expect(importButton?.getAttribute('aria-label')).toBe('Import');
@@ -59,11 +59,10 @@ describe('Toolbar accessibility', () => {
 
 		await new Promise((resolve) => setTimeout(resolve, 0));
 
-		const exportMenu = container.querySelector('.toolbar__export-menu');
-		expect(exportMenu?.getAttribute('role')).toBe('menu');
-		expect(exportMenu?.getAttribute('aria-label')).toBe('Export options');
+		const exportMenu = container.querySelector('[role="menu"][aria-label="Export options"]');
+		expect(exportMenu).toBeTruthy();
 
-		const menuItems = container.querySelectorAll('.toolbar__export-menu .toolbar__menu-item');
+		const menuItems = exportMenu?.querySelectorAll('[role="menuitem"]') ?? [];
 		expect(menuItems.length).toBe(5);
 		menuItems.forEach((item) => {
 			expect(item.getAttribute('role')).toBe('menuitem');
diff --git a/packages/ui/src/lib/components/BrushPopover.svelte b/packages/ui/src/lib/components/BrushPopover.svelte
index e6d2c52..c64f1ae 100644
--- a/packages/ui/src/lib/components/BrushPopover.svelte
+++ b/packages/ui/src/lib/components/BrushPopover.svelte
@@ -19,11 +19,15 @@
 </script>
 
 <script lang="ts">
+	import { tick } from 'svelte';
+
 	let { brush, onBrushChange, disabled = false, align = 'start' }: BrushPopoverProps = $props();
 
 	let isOpen = $state(false);
 	let popoverEl = $state<HTMLDivElement | null>(null);
 	let buttonEl = $state<HTMLButtonElement | null>(null);
+	let menuPosition = $state({ left: 8, top: 8 });
+	let positioned = $state(false);
 
 	let size = $derived(brush.size);
 	let thinning = $derived(brush.thinning);
@@ -42,22 +46,56 @@
 	});
 
 	$effect(() => {
-		if (!isOpen || typeof document === 'undefined') {
-			return;
+		if (!isOpen || typeof document === 'undefined') return;
+		let cancelled = false;
+
+		async function positionMenu() {
+			positioned = false;
+			await tick();
+			if (cancelled || !popoverEl || !buttonEl) return;
+			const gutter = 8;
+			const trigger = buttonEl.getBoundingClientRect();
+			const menu = popoverEl.getBoundingClientRect();
+			const preferredLeft = align === 'end' ? trigger.right - menu.width : trigger.left;
+			const below = trigger.bottom + gutter;
+			const top =
+				below + menu.height <= window.innerHeight - gutter
+					? below
+					: trigger.top - menu.height - gutter;
+			menuPosition = {
+				left: Math.max(
+					gutter,
+					Math.min(preferredLeft, window.innerWidth - menu.width - gutter)
+				),
+				top: Math.max(gutter, Math.min(top, window.innerHeight - menu.height - gutter))
+			};
+			positioned = true;
+			await tick();
+			popoverEl.querySelector<HTMLElement>('input, button')?.focus();
 		}
+
+		void positionMenu();
 		const handlePointerDown = (event: PointerEvent) => {
 			const target = event.target as Node | null;
-			if (!target) {
-				return;
-			}
-			if (popoverEl?.contains(target) || buttonEl?.contains(target)) {
-				return;
-			}
+			if (!target || popoverEl?.contains(target) || buttonEl?.contains(target)) return;
+			isOpen = false;
+		};
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key !== 'Escape') return;
+			event.preventDefault();
 			isOpen = false;
+			buttonEl?.focus();
 		};
 
 		document.addEventListener('pointerdown', handlePointerDown);
-		return () => document.removeEventListener('pointerdown', handlePointerDown);
+		document.addEventListener('keydown', handleKeyDown);
+		window.addEventListener('resize', positionMenu);
+		return () => {
+			cancelled = true;
+			document.removeEventListener('pointerdown', handlePointerDown);
+			document.removeEventListener('keydown', handleKeyDown);
+			window.removeEventListener('resize', positionMenu);
+		};
 	});
 
 	function togglePopover() {
@@ -133,9 +171,11 @@
 	{#if isOpen}
 		<div
 			class="brush-popover__menu"
-			class:brush-popover__menu--end={align === 'end'}
 			bind:this={popoverEl}
 			role="dialog"
+			style:left={`${menuPosition.left}px`}
+			style:top={`${menuPosition.top}px`}
+			style:visibility={positioned ? 'visible' : 'hidden'}
 			aria-label="Brush settings">
 			<div class="brush-popover__control">
 				<label for="brush-size">
@@ -240,11 +280,12 @@
 	}
 
 	.brush-popover__button {
-		border: var(--ink-line-width) solid var(--ink-border-strong);
+		min-height: var(--ink-control-height);
+		border: var(--ink-line-width) solid var(--ink-border);
 		background: var(--ink-surface-raised);
 		color: var(--ink-text);
-		padding: 0.5rem 0.75rem;
-		border-radius: 0.25rem;
+		padding: 0 var(--ink-space-3);
+		border-radius: var(--ink-radius-control-small);
 		cursor: pointer;
 		font-size: 13px;
 		min-width: 60px;
@@ -254,7 +295,11 @@
 		background: var(--ink-surface-hover);
 	}
 
-	.brush-popover__button:focus {
+	.brush-popover__button:active:not(:disabled) {
+		transform: scale(0.96);
+	}
+
+	.brush-popover__button:focus-visible {
 		outline: 3px solid var(--ink-focus);
 		outline-offset: 2px;
 	}
@@ -265,9 +310,7 @@
 	}
 
 	.brush-popover__menu {
-		position: absolute;
-		top: calc(100% + 4px);
-		left: 0;
+		position: fixed;
 		background: var(--ink-surface-raised);
 		color: var(--ink-text);
 		border: var(--ink-line-width) solid var(--ink-border-strong);
@@ -277,13 +320,8 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0.75rem;
-		z-index: 10;
-		min-width: 200px;
-	}
-
-	.brush-popover__menu--end {
-		right: 0;
-		left: auto;
+		z-index: 1000;
+		width: min(14rem, calc(100vw - 1rem));
 	}
 
 	.brush-popover__control {
diff --git a/packages/ui/src/lib/components/ContextMenu.svelte b/packages/ui/src/lib/components/ContextMenu.svelte
index 75e2b06..de88e79 100644
--- a/packages/ui/src/lib/components/ContextMenu.svelte
+++ b/packages/ui/src/lib/components/ContextMenu.svelte
@@ -3,6 +3,8 @@
 
 	/** One actionable row in a context menu. */
 	export type ContextMenuItem = {
+		/** Accessible name when the visible label needs more context. */
+		accessibleLabel?: string;
 		checked?: boolean;
 		danger?: boolean;
 		disabled?: boolean;
@@ -28,6 +30,10 @@
 		open: boolean;
 		/** Uses denser rows for long command collections. */
 		compact?: boolean;
+		/** Aligns the menu's right edge to x instead of its left edge. */
+		align?: 'start' | 'end';
+		/** Places the menu above y instead of below it. */
+		placement?: 'below' | 'above';
 		returnFocus?: HTMLElement | null;
 		x: number;
 		y: number;
@@ -43,6 +49,8 @@
 		items,
 		label = 'Context menu',
 		compact = false,
+		align = 'start',
+		placement = 'below',
 		onOpenChange,
 		onSelect,
 		open,
@@ -70,8 +78,16 @@
 			// Keep commands above the editor's fixed status bar.
 			const bottomGutter = 56;
 			const bounds = menuEl.getBoundingClientRect();
-			left = Math.max(gutter, Math.min(x, window.innerWidth - bounds.width - gutter));
-			top = Math.max(gutter, Math.min(y, window.innerHeight - bounds.height - bottomGutter));
+			const preferredLeft = align === 'end' ? x - bounds.width : x;
+			const preferredTop = placement === 'above' ? y - bounds.height : y;
+			left = Math.max(
+				gutter,
+				Math.min(preferredLeft, window.innerWidth - bounds.width - gutter)
+			);
+			top = Math.max(
+				gutter,
+				Math.min(preferredTop, window.innerHeight - bounds.height - bottomGutter)
+			);
 			positioned = true;
 			await tick();
 			if (cancelled) return;
@@ -159,6 +175,7 @@
 					class="ink-context-menu__item"
 					class:ink-context-menu__item--danger={entry.danger}
 					role={entry.checked === undefined ? 'menuitem' : 'menuitemcheckbox'}
+					aria-label={entry.accessibleLabel}
 					aria-checked={entry.checked}
 					disabled={entry.disabled}
 					onclick={() => select(entry)}>
diff --git a/packages/ui/src/lib/components/stories/IconButton.stories.ts b/packages/ui/src/lib/components/stories/IconButton.stories.ts
index 3afa140..0c504b2 100644
--- a/packages/ui/src/lib/components/stories/IconButton.stories.ts
+++ b/packages/ui/src/lib/components/stories/IconButton.stories.ts
@@ -14,3 +14,4 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 export const Selected: Story = { args: { selected: true } };
+export const Disabled: Story = { args: { disabled: true } };
diff --git a/packages/ui/src/lib/editor/canvas/NavigationControls.svelte b/packages/ui/src/lib/editor/canvas/NavigationControls.svelte
index bfe1e43..de9a368 100644
--- a/packages/ui/src/lib/editor/canvas/NavigationControls.svelte
+++ b/packages/ui/src/lib/editor/canvas/NavigationControls.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Store } from '@inkfinite/core';
-	import { Icon } from '../../index';
+	import { ContextMenu, Icon, type ContextMenuEntry } from '../../index';
 	import { ZOOM_PRESETS } from '../constants';
 	import type { CameraController } from './controllers/camera-controller';
 
@@ -8,7 +8,7 @@
 	let zoomPercent = $state(100);
 	let zoomMenuOpen = $state(false);
 	let zoomButtonEl = $state<HTMLButtonElement | null>(null);
-	let zoomMenuEl = $state<HTMLDivElement | null>(null);
+	let zoomMenuPoint = $state({ x: 0, y: 0 });
 
 	$effect(() => {
 		zoomPercent = camera.getZoomPercent();
@@ -17,28 +17,6 @@
 		});
 	});
 
-	$effect(() => {
-		if (!zoomMenuOpen || typeof document === 'undefined') return;
-
-		const handlePointerDown = (event: PointerEvent) => {
-			const target = event.target as Node | null;
-			if (!target || zoomButtonEl?.contains(target) || zoomMenuEl?.contains(target)) return;
-			zoomMenuOpen = false;
-		};
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.key !== 'Escape') return;
-			zoomMenuOpen = false;
-			zoomButtonEl?.focus();
-		};
-
-		document.addEventListener('pointerdown', handlePointerDown);
-		document.addEventListener('keydown', handleKeyDown);
-		return () => {
-			document.removeEventListener('pointerdown', handlePointerDown);
-			document.removeEventListener('keydown', handleKeyDown);
-		};
-	});
-
 	function setZoomPercent(percent: number) {
 		camera.setZoomPercent(percent);
 		zoomMenuOpen = false;
@@ -53,6 +31,36 @@
 		camera.fitSelection();
 		zoomMenuOpen = false;
 	}
+
+	function toggleZoomMenu() {
+		if (!zoomButtonEl) return;
+		if (zoomMenuOpen) {
+			zoomMenuOpen = false;
+			return;
+		}
+		const bounds = zoomButtonEl.getBoundingClientRect();
+		zoomMenuPoint = { x: bounds.left, y: bounds.top - 8 };
+		zoomMenuOpen = true;
+	}
+
+	function zoomMenuItems(): ContextMenuEntry[] {
+		return [
+			...ZOOM_PRESETS.map((preset) => ({
+				id: `zoom:${preset.value}`,
+				label: preset.label,
+				accessibleLabel: `Zoom to ${preset.label}`
+			})),
+			{ type: 'separator' as const },
+			{ id: 'fit-all', label: 'Zoom to fit' },
+			{ id: 'fit-selection', label: 'Zoom to selection' }
+		];
+	}
+
+	function handleZoomAction(id: string) {
+		if (id === 'fit-all') return fitAll();
+		if (id === 'fit-selection') return fitSelection();
+		if (id.startsWith('zoom:')) setZoomPercent(Number(id.slice(5)));
+	}
 </script>
 
 <nav class="navigation-controls" aria-label="Canvas navigation" data-agent-occlusion>
@@ -67,7 +75,7 @@
 		type="button"
 		class="navigation-controls__zoom"
 		bind:this={zoomButtonEl}
-		onclick={() => (zoomMenuOpen = !zoomMenuOpen)}
+		onclick={toggleZoomMenu}
 		aria-label="Zoom level"
 		aria-haspopup="true"
 		aria-expanded={zoomMenuOpen}
@@ -82,24 +90,16 @@
 		onclick={() => camera.fitAll()}
 		aria-label="Fit drawing"
 		title="Fit drawing (Shift+1)">Fit</button>
-	{#if zoomMenuOpen}
-		<div
-			class="navigation-controls__menu"
-			bind:this={zoomMenuEl}
-			role="menu"
-			aria-label="Zoom options">
-			{#each ZOOM_PRESETS as preset (`${preset.label}:${preset.value}`)}
-				<button
-					type="button"
-					role="menuitem"
-					onclick={() => setZoomPercent(preset.value)}
-					aria-label="Zoom to {preset.label}">{preset.label}</button>
-			{/each}
-			<span class="navigation-controls__menu-divider" role="separator"></span>
-			<button type="button" role="menuitem" onclick={fitAll}>Zoom to fit</button>
-			<button type="button" role="menuitem" onclick={fitSelection}>Zoom to selection</button>
-		</div>
-	{/if}
+	<ContextMenu
+		items={zoomMenuItems()}
+		label="Zoom options"
+		open={zoomMenuOpen}
+		returnFocus={zoomButtonEl}
+		x={zoomMenuPoint.x}
+		y={zoomMenuPoint.y}
+		placement="above"
+		onOpenChange={(value) => (zoomMenuOpen = value)}
+		onSelect={handleZoomAction} />
 </nav>
 
 <style>
@@ -167,36 +167,6 @@
 		background: color-mix(in srgb, var(--ink-border) 58%, transparent);
 	}
 
-	.navigation-controls__menu {
-		position: absolute;
-		left: var(--ink-space-1);
-		bottom: calc(100% + var(--ink-space-2));
-		display: grid;
-		gap: var(--ink-space-1);
-		min-width: 10rem;
-		padding: var(--ink-space-1);
-		border-radius: var(--ink-radius-panel-small);
-		background: var(--ink-surface-raised);
-		box-shadow:
-			0 0 0 1px color-mix(in srgb, var(--ink-border) 58%, transparent),
-			var(--ink-shadow-popover);
-	}
-
-	.navigation-controls__menu button {
-		justify-content: flex-start;
-		width: 100%;
-		min-width: 0;
-		padding-inline: var(--ink-space-3);
-		font-weight: 600;
-		text-align: left;
-	}
-
-	.navigation-controls__menu-divider {
-		height: 1px;
-		margin-inline: var(--ink-space-2);
-		background: color-mix(in srgb, var(--ink-border) 58%, transparent);
-	}
-
 	@media (prefers-reduced-motion: reduce) {
 		.navigation-controls button {
 			transition: none;
diff --git a/packages/ui/src/lib/editor/components/Toolbar.svelte b/packages/ui/src/lib/editor/components/Toolbar.svelte
index 7cb74ee..9d39e55 100644
--- a/packages/ui/src/lib/editor/components/Toolbar.svelte
+++ b/packages/ui/src/lib/editor/components/Toolbar.svelte
@@ -51,7 +51,7 @@
 
 	let editorState = $derived<EditorStateType>(store.getState());
 	let exportMenuOpen = $state(false);
-	let exportMenuEl = $state<HTMLDivElement | null>(null);
+	let exportMenuPoint = $state({ x: 0, y: 0 });
 	let exportButtonEl = $state<HTMLButtonElement | null>(null);
 	let importMenuOpen = $state(false);
 	let importMenuPoint = $state({ x: 0, y: 0 });
@@ -95,25 +95,6 @@
 		}
 	});
 
-	$effect(() => {
-		if (!exportMenuOpen || typeof document === 'undefined') {
-			return;
-		}
-		const handlePointerDown = (event: PointerEvent) => {
-			const target = event.target as Node | null;
-			if (!target) {
-				return;
-			}
-			if (exportMenuEl?.contains(target) || exportButtonEl?.contains(target)) {
-				return;
-			}
-			exportMenuOpen = false;
-		};
-
-		document.addEventListener('pointerdown', handlePointerDown);
-		return () => document.removeEventListener('pointerdown', handlePointerDown);
-	});
-
 	function handleDragStart(event: PointerEvent) {
 		if (event.button !== 0) return;
 		isDragging = true;
@@ -238,6 +219,58 @@
 		onExportEditable?.(format);
 	}
 
+	function toggleExportMenu() {
+		if (interchangeBusy || !exportButtonEl) return;
+		if (exportMenuOpen) {
+			exportMenuOpen = false;
+			return;
+		}
+		const bounds = exportButtonEl.getBoundingClientRect();
+		exportMenuPoint = { x: bounds.right, y: bounds.bottom + 8 };
+		exportMenuOpen = true;
+	}
+
+	function getExportMenuItems(): ContextMenuEntry[] {
+		return [
+			{
+				id: 'excalidraw',
+				label: 'Excalidraw',
+				accessibleLabel: 'Export as Excalidraw editable document'
+			},
+			{
+				id: 'json-canvas',
+				label: 'Obsidian Canvas',
+				accessibleLabel: 'Export as Obsidian Canvas editable document'
+			},
+			{ type: 'separator' },
+			{ id: 'png', label: 'PNG (Viewport)', accessibleLabel: 'Export current view as PNG' },
+			{ id: 'svg-all', label: 'SVG (All)', accessibleLabel: 'Export all shapes as SVG' },
+			{
+				id: 'svg-selection',
+				label: 'SVG (Selection)',
+				accessibleLabel: 'Export selected shapes as SVG'
+			}
+		];
+	}
+
+	function handleExportMenuAction(id: string) {
+		switch (id) {
+			case 'excalidraw':
+			case 'json-canvas':
+				exportEditable(id);
+				break;
+			case 'png':
+				void exportPNGViewport();
+				break;
+			case 'svg-all':
+				void exportSVGAll();
+				break;
+			case 'svg-selection':
+				void exportSVGSelection();
+				break;
+		}
+	}
+
 	function toggleImportMenu() {
 		if (interchangeBusy || !importButtonEl) return;
 		if (importMenuOpen) {
@@ -364,65 +397,28 @@
 				onOpenChange={(value) => (importMenuOpen = value)}
 				onSelect={handleImportMenuAction} />
 
-			<div class="toolbar__export">
-				<button
-					class="application-chrome__button toolbar__export-button"
-					bind:this={exportButtonEl}
-					type="button"
-					onclick={() => (exportMenuOpen = !exportMenuOpen)}
-					aria-label="Export drawing"
-					aria-haspopup="true"
-					aria-expanded={exportMenuOpen}
-					disabled={interchangeBusy}>
-					<Icon name="save" size={17} />
-					<span class="application-chrome__label">Export</span>
-				</button>
-
-				{#if exportMenuOpen}
-					<div
-						class="toolbar__export-menu"
-						bind:this={exportMenuEl}
-						role="menu"
-						aria-label="Export options">
-						<button
-							class="toolbar__menu-item"
-							role="menuitem"
-							aria-label="Export as Excalidraw editable document"
-							onclick={() => exportEditable('excalidraw')}>
-							Excalidraw
-						</button>
-						<button
-							class="toolbar__menu-item"
-							role="menuitem"
-							aria-label="Export as Obsidian Canvas editable document"
-							onclick={() => exportEditable('json-canvas')}>
-							Obsidian Canvas
-						</button>
-						<div class="toolbar__menu-separator" role="separator"></div>
-						<button
-							class="toolbar__menu-item"
-							role="menuitem"
-							onclick={exportPNGViewport}
-							aria-label="Export current view as PNG">
-							PNG (Viewport)
-						</button>
-						<button
-							class="toolbar__menu-item"
-							role="menuitem"
-							onclick={exportSVGAll}
-							aria-label="Export all shapes as SVG">
-							SVG (All)
-						</button>
-						<button
-							class="toolbar__menu-item"
-							role="menuitem"
-							onclick={exportSVGSelection}
-							aria-label="Export selected shapes as SVG">
-							SVG (Selection)
-						</button>
-					</div>
-				{/if}
-			</div>
+			<button
+				class="application-chrome__button toolbar__export-button"
+				bind:this={exportButtonEl}
+				type="button"
+				onclick={toggleExportMenu}
+				aria-label="Export drawing"
+				aria-haspopup="menu"
+				aria-expanded={exportMenuOpen}
+				disabled={interchangeBusy}>
+				<Icon name="save" size={17} />
+				<span class="application-chrome__label">Export</span>
+			</button>
+			<ContextMenu
+				items={getExportMenuItems()}
+				label="Export options"
+				open={exportMenuOpen}
+				align="end"
+				returnFocus={exportButtonEl}
+				x={exportMenuPoint.x}
+				y={exportMenuPoint.y}
+				onOpenChange={(value) => (exportMenuOpen = value)}
+				onSelect={handleExportMenuAction} />
 		</div>
 	</header>
 
@@ -804,54 +800,6 @@
 		backdrop-filter: blur(14px);
 	}
 
-	.toolbar__export {
-		position: relative;
-	}
-
-	.toolbar__export-menu {
-		position: absolute;
-		top: calc(100% + var(--ink-space-2));
-		right: 0;
-		z-index: 1000;
-		display: grid;
-		min-width: 12rem;
-		gap: var(--ink-space-1);
-		padding: var(--ink-space-1);
-		border: 1px solid var(--ink-border);
-		border-radius: var(--ink-radius-panel-small);
-		color: var(--ink-text);
-		background: var(--ink-surface-raised);
-		box-shadow: var(--ink-shadow-popover);
-	}
-
-	.toolbar__menu-item {
-		min-height: 2.5rem;
-		padding: 0 var(--ink-space-2);
-		border: 0;
-		border-radius: var(--ink-radius-control-small);
-		color: var(--ink-text);
-		background: transparent;
-		font: 600 var(--ink-type-sm) / 1.2 var(--ink-font-body);
-		text-align: left;
-		cursor: pointer;
-	}
-
-	.toolbar__menu-item:hover,
-	.toolbar__menu-item:focus-visible {
-		background: var(--ink-surface-hover);
-	}
-
-	.toolbar__menu-item:focus-visible {
-		outline: 3px solid var(--ink-focus);
-		outline-offset: -2px;
-	}
-
-	.toolbar__menu-separator {
-		height: 1px;
-		margin: var(--ink-space-1) var(--ink-space-2);
-		background: var(--ink-border);
-	}
-
 	@media (max-width: 1180px) {
 		.application-chrome {
 			right: auto;
@@ -909,14 +857,6 @@
 			right: 0.75rem;
 			width: auto;
 		}
-
-		.toolbar__export-menu {
-			position: fixed;
-			top: 4.5rem;
-			right: 0.75rem;
-			left: auto;
-			min-width: min(15rem, calc(100vw - 1.5rem));
-		}
 	}
 
 	@media (max-width: 480px) {
@@ -939,8 +879,7 @@
 		.application-chrome__button,
 		.toolbar,
 		.toolbar__drag-handle,
-		.toolbar__tool-button,
-		.toolbar__menu-item {
+		.toolbar__tool-button {
 			transition: none;
 		}
 	}
diff --git a/packages/ui/src/lib/editor/components/stories/Toolbar.stories.ts b/packages/ui/src/lib/editor/components/stories/Toolbar.stories.ts
index 7756626..94524da 100644
--- a/packages/ui/src/lib/editor/components/stories/Toolbar.stories.ts
+++ b/packages/ui/src/lib/editor/components/stories/Toolbar.stories.ts
@@ -25,3 +25,5 @@ type Story = StoryObj<typeof meta>;
 export const Web: Story = { args: { showAgentControl: false } };
 
 export const Desktop: Story = { args: { showAgentControl: true } };
+
+export const Busy: Story = { args: { interchangeBusy: true } };