From aa148b720cbb0d03f3a3bb078238646d8f635197 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Fri, 21 Aug 2026 22:38:41 -0500
Subject: [PATCH] feat: contextual selection controls

---
 TODO.md                                       |  16 +-
 .../ui/src/lib/components/ColorPicker.svelte  |  49 +-
 .../lib/editor/components/ArrowPopover.svelte | 634 ++++++++----
 .../lib/editor/components/LayerPanel.svelte   |   8 +
 .../components/SelectionControls.svelte       | 928 ++++++++++++++++++
 .../src/lib/editor/components/Toolbar.svelte  | 774 +--------------
 .../__tests__/ArrowPopover.svelte.test.ts     |  14 +-
 .../SelectionControls.svelte.test.ts          | 167 ++++
 scripts/images/capture-selection-controls.mjs | 115 +++
 9 files changed, 1730 insertions(+), 975 deletions(-)
 create mode 100644 packages/ui/src/lib/editor/components/SelectionControls.svelte
 create mode 100644 packages/ui/src/lib/editor/components/__tests__/SelectionControls.svelte.test.ts
 create mode 100644 scripts/images/capture-selection-controls.mjs

diff --git a/TODO.md b/TODO.md
index 8eeb006..9205d38 100644
--- a/TODO.md
+++ b/TODO.md
@@ -39,18 +39,18 @@ selection-specific controls.
 
 Expose only controls that apply to the active tool or current selection.
 
-- [ ] Define contextual controls from shape capabilities rather than one shared
+- [x] Define contextual controls from shape capabilities rather than one shared
       selection panel
-- [ ] Show fill, stroke, opacity, and shape-specific controls only when
+- [x] Show fill, stroke, opacity, and shape-specific controls only when
       applicable
-- [ ] Give arrows a focused stroke, endpoint, and connection control surface
-- [ ] Give text and Markdown selections focused typography controls
-- [ ] Give multi-selection a focused align, distribute, group, and arrange
+- [x] Give arrows a focused stroke, endpoint, and connection control surface
+- [x] Give text and Markdown selections focused typography controls
+- [x] Give multi-selection a focused align, distribute, group, and arrange
       surface
-- [ ] Preserve mixed-value states when selected shapes do not share a property
-- [ ] Keep contextual controls keyboard accessible and return focus correctly
+- [x] Preserve mixed-value states when selected shapes do not share a property
+- [x] Keep contextual controls keyboard accessible and return focus correctly
       when popovers close
-- [ ] Add interaction tests for contextual controls across representative
+- [x] Add interaction tests for contextual controls across representative
       selection types
 
 ### Theme and component consistency
diff --git a/packages/ui/src/lib/components/ColorPicker.svelte b/packages/ui/src/lib/components/ColorPicker.svelte
index cc3c0e2..880d7b4 100644
--- a/packages/ui/src/lib/components/ColorPicker.svelte
+++ b/packages/ui/src/lib/components/ColorPicker.svelte
@@ -11,6 +11,8 @@
 		recentColors?: readonly string[];
 		/** Prevents opening and changing the color. */
 		disabled?: boolean;
+		/** Indicates that the selected shapes do not share one color. */
+		mixed?: boolean;
 		/** Horizontal alignment of the palette below the trigger. */
 		align?: 'start' | 'end';
 	}
@@ -32,6 +34,7 @@
 		onchange,
 		recentColors = [],
 		disabled = false,
+		mixed = false,
 		align = 'start'
 	}: ColorPickerProps = $props();
 
@@ -44,6 +47,7 @@
 	let hexError = $state(false);
 	let recent = $state<string[]>([]);
 	let restoreFocus = false;
+	let panelPosition = $state({ left: 8, top: 8 });
 
 	let pickerId = $derived(`color-picker-${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`);
 	let currentColor = $derived(normalizeHex(value) ?? value);
@@ -81,10 +85,26 @@
 
 		const panel = panelEl;
 		const picker = pickerEl;
-		if (!panel || !picker || typeof document === 'undefined') return;
+		const trigger = triggerEl;
+		if (!panel || !picker || !trigger || typeof document === 'undefined') return;
 		const pickerElement = picker;
 
 		queueMicrotask(() => {
+			const triggerBounds = trigger.getBoundingClientRect();
+			const panelBounds = panel.getBoundingClientRect();
+			const gutter = 8;
+			const preferredTop = triggerBounds.bottom + gutter;
+			const top =
+				preferredTop + panelBounds.height <= window.innerHeight - gutter
+					? preferredTop
+					: Math.max(gutter, triggerBounds.top - panelBounds.height - gutter);
+			const preferredLeft =
+				align === 'end' ? triggerBounds.right - panelBounds.width : triggerBounds.left;
+			const left = Math.max(
+				gutter,
+				Math.min(preferredLeft, window.innerWidth - panelBounds.width - gutter)
+			);
+			panelPosition = { left, top };
 			const selectedOption = panel.querySelector<HTMLElement>('[aria-pressed="true"]');
 			(selectedOption ?? panel).focus();
 		});
@@ -182,16 +202,17 @@
 <div class="color-picker" bind:this={pickerEl}>
 	<button
 		class="color-picker__trigger"
+		class:color-picker__trigger--mixed={mixed}
 		bind:this={triggerEl}
 		type="button"
 		{disabled}
-		style:background={currentColor}
-		aria-label={label}
+		style:background={mixed ? undefined : currentColor}
+		aria-label={mixed ? `${label}, mixed values` : label}
 		aria-haspopup="dialog"
 		aria-expanded={isOpen}
-		title={label}
+		title={mixed ? `${label}, mixed values` : label}
 		onclick={togglePicker}>
-		<span class="color-picker__sr-only">{label}</span>
+		<span class="color-picker__sr-only">{mixed ? `${label}, mixed values` : label}</span>
 	</button>
 
 	{#if isOpen}
@@ -199,6 +220,8 @@
 			class="color-picker__panel"
 			class:color-picker__panel--end={align === 'end'}
 			bind:this={panelEl}
+			style:left={`${panelPosition.left}px`}
+			style:top={`${panelPosition.top}px`}
 			role="dialog"
 			tabindex="-1"
 			aria-label={label}>
@@ -330,6 +353,16 @@
 			box-shadow var(--ink-duration-fast) var(--ink-ease-out);
 	}
 
+	.color-picker__trigger--mixed {
+		background: repeating-linear-gradient(
+			-45deg,
+			var(--ink-surface-hover) 0,
+			var(--ink-surface-hover) 5px,
+			var(--ink-border-strong) 5px,
+			var(--ink-border-strong) 7px
+		);
+	}
+
 	.color-picker__trigger:hover:not(:disabled) {
 		translate: -1px -1px;
 		box-shadow: calc(var(--ink-shadow-offset) + 1px) calc(var(--ink-shadow-offset) + 1px) 0
@@ -355,9 +388,9 @@
 	}
 
 	.color-picker__panel {
-		position: absolute;
-		top: calc(100% + var(--ink-space-2));
-		left: 0;
+		position: fixed;
+		top: 8px;
+		left: 8px;
 		z-index: 10;
 		width: min(15rem, calc(100vw - 1rem));
 		padding: var(--ink-space-3);
diff --git a/packages/ui/src/lib/editor/components/ArrowPopover.svelte b/packages/ui/src/lib/editor/components/ArrowPopover.svelte
index 0fcd886..17279d6 100644
--- a/packages/ui/src/lib/editor/components/ArrowPopover.svelte
+++ b/packages/ui/src/lib/editor/components/ArrowPopover.svelte
@@ -1,43 +1,53 @@
 <script lang="ts">
-	import type { ArrowShape, Store } from '@inkfinite/core';
+	import type { ArrowShape, EditorState as EditorStateType, Store } from '@inkfinite/core';
 	import { EditorState, getSelectedShapes, SnapshotCommand } from '@inkfinite/core';
 
 	type Props = { store: Store; disabled?: boolean };
+	type ArrowHandle = 'start' | 'end';
 
 	let { store, disabled = false }: Props = $props();
 
 	let isOpen = $state(false);
 	let popoverEl = $state<HTMLDivElement | null>(null);
 	let buttonEl = $state<HTMLButtonElement | null>(null);
-
-	let editorState = $derived(store.getState());
+	let startHeadEl = $state<HTMLInputElement | null>(null);
+	let endHeadEl = $state<HTMLInputElement | null>(null);
+	let restoreFocus = false;
+	let menuPosition = $state({ left: 8, top: 8 });
+	let editorState = $derived<EditorStateType>(store.getState());
 
 	let selectedArrows = $derived<ArrowShape[]>(
-		getSelectedShapes(editorState).filter((s): s is ArrowShape => s.type === 'arrow')
+		getSelectedShapes(editorState).filter(
+			(shape): shape is ArrowShape => shape.type === 'arrow'
+		)
 	);
 
-	let routingKind = $derived<'straight' | 'curved' | 'orthogonal' | 'mixed'>(
-		(() => {
-			if (selectedArrows.length === 0) return 'straight';
-			const first = selectedArrows[0].props.routing?.kind ?? 'straight';
-			const allSame = selectedArrows.every(
-				(arrow) => (arrow.props.routing?.kind ?? 'straight') === first
-			);
-			return allSame ? first : 'mixed';
-		})()
-	);
+	let routingKind = $derived.by((): 'straight' | 'curved' | 'orthogonal' | 'mixed' => {
+		if (selectedArrows.length === 0) return 'straight';
+		const first = selectedArrows[0].props.routing?.kind ?? 'straight';
+		return selectedArrows.every((arrow) => (arrow.props.routing?.kind ?? 'straight') === first)
+			? first
+			: 'mixed';
+	});
 
-	let labelText = $derived<string>(
-		(() => {
-			if (selectedArrows.length === 0) return '';
-			if (selectedArrows.length === 1) return selectedArrows[0].props.label?.text ?? '';
-			const first = selectedArrows[0].props.label?.text ?? '';
-			const allSame = selectedArrows.every(
-				(arrow) => (arrow.props.label?.text ?? '') === first
-			);
-			return allSame ? first : '';
-		})()
+	let labelState = $derived.by(() => {
+		const shared = getSharedValue(
+			selectedArrows.map((arrow) => arrow.props.label?.text ?? '')
+		);
+		return { value: shared ?? '', mixed: selectedArrows.length > 1 && shared === null };
+	});
+	let strokeWidthState = $derived.by(() => {
+		const shared = getSharedValue(selectedArrows.map((arrow) => arrow.props.style.width));
+		return { value: shared ?? 2, mixed: selectedArrows.length > 1 && shared === null };
+	});
+	let startHeadState = $derived(
+		getBooleanState(selectedArrows.map((arrow) => arrow.props.style.headStart === true))
 	);
+	let endHeadState = $derived(
+		getBooleanState(selectedArrows.map((arrow) => arrow.props.style.headEnd !== false))
+	);
+	let startConnectionState = $derived(getConnectionState('start'));
+	let endConnectionState = $derived(getConnectionState('end'));
 
 	$effect(() => {
 		const unsubscribe = store.subscribe((state) => {
@@ -47,88 +57,189 @@
 	});
 
 	$effect(() => {
-		if (!isOpen || typeof document === 'undefined') {
+		if (startHeadEl) {
+			startHeadEl.checked = startHeadState.value;
+			startHeadEl.indeterminate = startHeadState.mixed;
+		}
+		if (endHeadEl) {
+			endHeadEl.checked = endHeadState.value;
+			endHeadEl.indeterminate = endHeadState.mixed;
+		}
+	});
+
+	$effect(() => {
+		if (!isOpen) {
+			if (restoreFocus) {
+				restoreFocus = false;
+				queueMicrotask(() => buttonEl?.focus());
+			}
 			return;
 		}
-		const handlePointerDown = (event: PointerEvent) => {
+
+		if (!popoverEl || !buttonEl || typeof document === 'undefined') return;
+		const menu = popoverEl;
+		const trigger = buttonEl;
+
+		queueMicrotask(() => {
+			const triggerBounds = trigger.getBoundingClientRect();
+			const menuBounds = menu.getBoundingClientRect();
+			const gutter = 8;
+			const preferredTop = triggerBounds.bottom + gutter;
+			const top =
+				preferredTop + menuBounds.height <= window.innerHeight - gutter
+					? preferredTop
+					: Math.max(gutter, triggerBounds.top - menuBounds.height - gutter);
+			const left = Math.max(
+				gutter,
+				Math.min(triggerBounds.left, window.innerWidth - menuBounds.width - gutter)
+			);
+			menuPosition = { left, top };
+			menu.querySelector<HTMLElement>('button, input')?.focus();
+		});
+
+		function handlePointerDown(event: PointerEvent) {
 			const target = event.target as Node | null;
-			if (!target) {
-				return;
-			}
-			if (popoverEl?.contains(target) || buttonEl?.contains(target)) {
-				return;
+			if (target && !menu.contains(target) && !trigger.contains(target)) closePopover(true);
+		}
+
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				closePopover(true);
 			}
-			isOpen = false;
-		};
+		}
 
 		document.addEventListener('pointerdown', handlePointerDown);
-		return () => document.removeEventListener('pointerdown', handlePointerDown);
+		document.addEventListener('keydown', handleKeyDown);
+		return () => {
+			document.removeEventListener('pointerdown', handlePointerDown);
+			document.removeEventListener('keydown', handleKeyDown);
+		};
 	});
 
-	function togglePopover() {
+	function getSharedValue<T>(values: T[]): T | null {
+		if (values.length === 0) return null;
+		const first = values[0];
+		return values.every((value) => Object.is(value, first)) ? first : null;
+	}
+
+	function getBooleanState(values: boolean[]) {
+		const shared = getSharedValue(values);
+		return { value: shared ?? false, mixed: values.length > 1 && shared === null };
+	}
+
+	function getConnectionState(handle: ArrowHandle) {
+		const connected = selectedArrows.map((arrow) => arrow.props[handle].kind === 'bound');
+		const shared = getSharedValue(connected);
+		return {
+			connected: shared === true,
+			mixed: connected.length > 1 && shared === null,
+			anyConnected: connected.some(Boolean)
+		};
+	}
+
+	function openPopover() {
 		if (!disabled) {
-			isOpen = !isOpen;
+			restoreFocus = false;
+			isOpen = true;
 		}
 	}
 
-	function setRouting(kind: 'straight' | 'curved' | 'orthogonal') {
+	function closePopover(shouldRestoreFocus = false) {
+		if (!isOpen) return;
+		restoreFocus = shouldRestoreFocus;
+		isOpen = false;
+	}
+
+	function togglePopover() {
+		if (isOpen) closePopover(true);
+		else openPopover();
+	}
+
+	function updateSelectedArrows(label: string, update: (arrow: ArrowShape) => ArrowShape) {
 		const state = store.getState();
-		const arrows = getSelectedShapes(state).filter((s): s is ArrowShape => s.type === 'arrow');
+		const arrows = getSelectedShapes(state).filter(
+			(shape): shape is ArrowShape => shape.type === 'arrow'
+		);
 		if (arrows.length === 0) return;
-
 		const before = EditorState.clone(state);
-		const newShapes = { ...state.doc.shapes };
+		const shapes = { ...state.doc.shapes };
+		for (const arrow of arrows) shapes[arrow.id] = update(arrow);
+		store.executeCommand(
+			new SnapshotCommand(label, 'doc', before, { ...state, doc: { ...state.doc, shapes } })
+		);
+	}
 
-		for (const arrow of arrows) {
-			const updated: ArrowShape = { ...arrow, props: { ...arrow.props, routing: { kind } } };
-			newShapes[arrow.id] = updated;
-		}
+	function setRouting(kind: 'straight' | 'curved' | 'orthogonal') {
+		updateSelectedArrows('Set arrow routing', (arrow) => ({
+			...arrow,
+			props: { ...arrow.props, routing: { ...arrow.props.routing, kind } }
+		}));
+	}
 
-		const after = { ...state, doc: { ...state.doc, shapes: newShapes } };
-		const command = new SnapshotCommand(
-			'Set arrow routing',
-			'doc',
-			before,
-			EditorState.clone(after)
-		);
-		store.executeCommand(command);
+	function setStrokeWidth(event: Event) {
+		const value = (event.currentTarget as HTMLInputElement).valueAsNumber;
+		if (!Number.isFinite(value) || value <= 0) return;
+		updateSelectedArrows('Set arrow stroke width', (arrow) => ({
+			...arrow,
+			props: { ...arrow.props, style: { ...arrow.props.style, width: value } }
+		}));
+	}
+
+	function setArrowHead(handle: ArrowHandle, value: boolean) {
+		updateSelectedArrows(`Set ${handle} arrowhead`, (arrow) => ({
+			...arrow,
+			props: {
+				...arrow.props,
+				style: {
+					...arrow.props.style,
+					[handle === 'start' ? 'headStart' : 'headEnd']: value
+				}
+			}
+		}));
 	}
 
 	function handleLabelChange(event: Event) {
-		const input = event.currentTarget as HTMLInputElement;
-		const text = input.value;
+		const text = (event.currentTarget as HTMLInputElement).value;
+		updateSelectedArrows('Set arrow label', (arrow) => ({
+			...arrow,
+			props: {
+				...arrow.props,
+				label: text.trim()
+					? {
+							text,
+							align: arrow.props.label?.align ?? 'center',
+							offset: arrow.props.label?.offset ?? 0
+						}
+					: undefined
+			}
+		}));
+	}
+
+	function disconnect(handle: ArrowHandle) {
 		const state = store.getState();
-		const arrows = getSelectedShapes(state).filter((s): s is ArrowShape => s.type === 'arrow');
+		const arrows = getSelectedShapes(state).filter(
+			(shape): shape is ArrowShape => shape.type === 'arrow'
+		);
 		if (arrows.length === 0) return;
-
 		const before = EditorState.clone(state);
-		const newShapes = { ...state.doc.shapes };
-
+		const shapes = { ...state.doc.shapes };
+		const bindings = { ...state.doc.bindings };
+		let changed = false;
 		for (const arrow of arrows) {
-			const updated: ArrowShape = {
-				...arrow,
-				props: {
-					...arrow.props,
-					label: text.trim()
-						? {
-								text,
-								align: arrow.props.label?.align ?? 'center',
-								offset: arrow.props.label?.offset ?? 0
-							}
-						: undefined
-				}
-			};
-			newShapes[arrow.id] = updated;
+			const endpoint = arrow.props[handle];
+			if (endpoint.kind !== 'bound') continue;
+			if (endpoint.bindingId) delete bindings[endpoint.bindingId];
+			shapes[arrow.id] = { ...arrow, props: { ...arrow.props, [handle]: { kind: 'free' } } };
+			changed = true;
 		}
-
-		const after = { ...state, doc: { ...state.doc, shapes: newShapes } };
-		const command = new SnapshotCommand(
-			'Set arrow label',
-			'doc',
-			before,
-			EditorState.clone(after)
+		if (!changed) return;
+		store.executeCommand(
+			new SnapshotCommand(`Disconnect ${handle} arrow endpoint`, 'doc', before, {
+				...state,
+				doc: { ...state.doc, shapes, bindings }
+			})
 		);
-		store.executeCommand(command);
 	}
 </script>
 
@@ -136,65 +247,144 @@
 	<button
 		class="arrow-popover__button"
 		bind:this={buttonEl}
+		type="button"
 		onclick={togglePopover}
 		{disabled}
 		aria-label="Arrow settings"
-		aria-haspopup="true"
+		aria-haspopup="dialog"
 		aria-expanded={isOpen}>
-		Arrow
+		<span>Arrow</span>
+		<span class="arrow-popover__summary">{selectedArrows.length}</span>
 	</button>
 
 	{#if isOpen}
 		<div
 			class="arrow-popover__menu"
 			bind:this={popoverEl}
+			style:left={`${menuPosition.left}px`}
+			style:top={`${menuPosition.top}px`}
 			role="dialog"
 			aria-label="Arrow settings">
-			<div class="arrow-popover__section">
-				<div class="arrow-popover__label">Routing</div>
-				<div class="arrow-popover__routing-buttons">
-					<button
-						class="arrow-popover__routing-btn"
-						class:arrow-popover__routing-btn--active={routingKind === 'straight'}
-						onclick={() => setRouting('straight')}
-						aria-label="Straight routing"
-						aria-pressed={routingKind === 'straight'}>
-						Straight
-					</button>
-					<button
-						class="arrow-popover__routing-btn"
-						class:arrow-popover__routing-btn--active={routingKind === 'curved'}
-						onclick={() => setRouting('curved')}
-						aria-label="Curved routing"
-						aria-pressed={routingKind === 'curved'}>
-						Curved
-					</button>
-					<button
-						class="arrow-popover__routing-btn"
-						class:arrow-popover__routing-btn--active={routingKind === 'orthogonal'}
-						onclick={() => setRouting('orthogonal')}
-						aria-label="Orthogonal routing"
-						aria-pressed={routingKind === 'orthogonal'}>
-						Orthogonal
-					</button>
+			<section class="arrow-popover__section">
+				<h3>Stroke</h3>
+				<label class="arrow-popover__field">
+					<span>Width</span>
+					<input
+						type="number"
+						min="0.5"
+						step="0.5"
+						value={strokeWidthState.mixed ? '' : strokeWidthState.value}
+						placeholder={strokeWidthState.mixed ? 'Mixed' : undefined}
+						onchange={setStrokeWidth}
+						aria-label="Arrow stroke width" />
+				</label>
+				<div class="arrow-popover__routing">
+					<span>Routing</span>
+					<div class="arrow-popover__routing-buttons">
+						<button
+							class:arrow-popover__routing-btn--active={routingKind === 'straight'}
+							type="button"
+							onclick={() => setRouting('straight')}
+							aria-label="Straight routing"
+							aria-pressed={routingKind === 'straight'}>
+							Straight
+						</button>
+						<button
+							class:arrow-popover__routing-btn--active={routingKind === 'curved'}
+							type="button"
+							onclick={() => setRouting('curved')}
+							aria-label="Curved routing"
+							aria-pressed={routingKind === 'curved'}>
+							Curved
+						</button>
+						<button
+							class:arrow-popover__routing-btn--active={routingKind === 'orthogonal'}
+							type="button"
+							onclick={() => setRouting('orthogonal')}
+							aria-label="Orthogonal routing"
+							aria-pressed={routingKind === 'orthogonal'}>
+							Orthogonal
+						</button>
+					</div>
 				</div>
-			</div>
-
-			<div class="arrow-popover__divider"></div>
-
-			<div class="arrow-popover__section">
-				<label for="arrow-label">
-					<span class="arrow-popover__label">Label</span>
+			</section>
+
+			<section class="arrow-popover__section">
+				<h3>Endpoints</h3>
+				<label class="arrow-popover__check">
+					<input
+						bind:this={startHeadEl}
+						type="checkbox"
+						checked={startHeadState.value}
+						onchange={(event) =>
+							setArrowHead(
+								'start',
+								(event.currentTarget as HTMLInputElement).checked
+							)}
+						aria-label="Start arrowhead" />
+					<span>Start arrowhead</span>
+				</label>
+				<label class="arrow-popover__check">
+					<input
+						bind:this={endHeadEl}
+						type="checkbox"
+						checked={endHeadState.value}
+						onchange={(event) =>
+							setArrowHead('end', (event.currentTarget as HTMLInputElement).checked)}
+						aria-label="End arrowhead" />
+					<span>End arrowhead</span>
+				</label>
+			</section>
+
+			<section class="arrow-popover__section">
+				<h3>Connections</h3>
+				<div class="arrow-popover__connection">
+					<div>
+						<strong>Start</strong>
+						<span
+							>{startConnectionState.mixed
+								? 'Mixed'
+								: startConnectionState.connected
+									? 'Connected'
+									: 'Free'}</span>
+					</div>
+					{#if startConnectionState.anyConnected}
+						<button
+							type="button"
+							onclick={() => disconnect('start')}
+							aria-label="Disconnect start connection">Disconnect</button>
+					{/if}
+				</div>
+				<div class="arrow-popover__connection">
+					<div>
+						<strong>End</strong>
+						<span
+							>{endConnectionState.mixed
+								? 'Mixed'
+								: endConnectionState.connected
+									? 'Connected'
+									: 'Free'}</span>
+					</div>
+					{#if endConnectionState.anyConnected}
+						<button
+							type="button"
+							onclick={() => disconnect('end')}
+							aria-label="Disconnect end connection">Disconnect</button>
+					{/if}
+				</div>
+			</section>
+
+			<section class="arrow-popover__section">
+				<label class="arrow-popover__field arrow-popover__label-field">
+					<span>Label</span>
+					<input
+						type="text"
+						value={labelState.mixed ? '' : labelState.value}
+						placeholder={labelState.mixed ? 'Mixed labels' : 'Optional label'}
+						onchange={handleLabelChange}
+						aria-label="Arrow label" />
 				</label>
-				<input
-					id="arrow-label"
-					type="text"
-					class="arrow-popover__input"
-					value={labelText}
-					onchange={handleLabelChange}
-					placeholder="Enter label..."
-					aria-label="Arrow label" />
-			</div>
+			</section>
 		</div>
 	{/if}
 </div>
@@ -202,115 +392,181 @@
 <style>
 	.arrow-popover {
 		position: relative;
+		display: inline-flex;
 	}
 
-	.arrow-popover__button {
+	.arrow-popover__button,
+	.arrow-popover__routing-buttons button,
+	.arrow-popover__connection button {
 		border: 1px solid var(--ink-border);
-		background: var(--ink-canvas);
+		border-radius: var(--ink-radius-wobbly-small);
 		color: var(--ink-text);
-		padding: 0.5rem 0.75rem;
-		border-radius: 0.25rem;
+		background: var(--ink-canvas);
+		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
 		cursor: pointer;
-		font-size: 13px;
-		min-width: 60px;
 	}
 
-	.arrow-popover__button:hover:not(:disabled) {
-		background: var(--ink-surface-raised);
+	.arrow-popover__button {
+		display: inline-flex;
+		min-height: var(--ink-control-height);
+		align-items: center;
+		gap: var(--ink-space-2);
+		padding: 0 var(--ink-space-3);
+	}
+
+	.arrow-popover__button:hover:not(:disabled),
+	.arrow-popover__routing-buttons button:hover,
+	.arrow-popover__connection button:hover {
+		border-color: var(--ink-accent);
+		background: var(--ink-surface-hover);
 	}
 
-	.arrow-popover__button:focus {
-		outline: 2px solid var(--ink-accent);
+	.arrow-popover__button:focus-visible,
+	.arrow-popover__routing-buttons button:focus-visible,
+	.arrow-popover__connection button:focus-visible,
+	.arrow-popover__field input:focus-visible,
+	.arrow-popover__check input:focus-visible {
+		outline: 3px solid var(--ink-focus);
 		outline-offset: 2px;
 	}
 
 	.arrow-popover__button:disabled {
-		opacity: 0.4;
 		cursor: not-allowed;
+		opacity: 0.55;
+	}
+
+	.arrow-popover__summary {
+		color: var(--ink-text-muted);
+		font-variant-numeric: tabular-nums;
 	}
 
 	.arrow-popover__menu {
-		position: absolute;
-		top: calc(100% + 4px);
-		left: 0;
-		background: var(--ink-canvas);
-		color: var(--ink-text);
+		position: fixed;
+		top: 8px;
+		left: 8px;
+		z-index: 1000;
+		display: grid;
+		width: min(22rem, calc(100vw - 2rem));
+		max-height: min(34rem, calc(100vh - 8rem));
+		gap: var(--ink-space-3);
+		overflow: auto;
+		padding: var(--ink-space-3);
 		border: 1px solid var(--ink-border);
-		border-radius: 6px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-		padding: 0.75rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-		z-index: 10;
-		min-width: 200px;
+		border-radius: var(--ink-radius-panel-small);
+		color: var(--ink-text);
+		background: var(--ink-surface-raised);
+		box-shadow: var(--ink-shadow-toolbar);
 	}
 
 	.arrow-popover__section {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
+		display: grid;
+		gap: var(--ink-space-2);
 	}
 
-	.arrow-popover__label {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--ink-text);
+	.arrow-popover__section + .arrow-popover__section {
+		padding-top: var(--ink-space-3);
+		border-top: 1px solid color-mix(in srgb, var(--ink-border) 60%, transparent);
 	}
 
-	.arrow-popover__routing-buttons {
-		display: flex;
-		gap: 6px;
+	.arrow-popover__section h3,
+	.arrow-popover__routing > span {
+		margin: 0;
+		color: var(--ink-text-muted);
+		font: 700 var(--ink-type-xs) / 1.1 var(--ink-font-body);
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
 	}
 
-	.arrow-popover__routing-btn {
-		flex: 1;
+	.arrow-popover__field {
+		display: grid;
+		grid-template-columns: 4.5rem minmax(0, 1fr);
+		align-items: center;
+		gap: var(--ink-space-2);
+		color: var(--ink-text-muted);
+		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
+	}
+
+	.arrow-popover__field input {
+		box-sizing: border-box;
+		width: 100%;
+		min-height: var(--ink-control-height);
+		padding: 0 var(--ink-space-2);
 		border: 1px solid var(--ink-border);
-		background: var(--ink-canvas);
+		border-radius: var(--ink-radius-wobbly-small);
 		color: var(--ink-text);
-		padding: 6px 0.75rem;
-		border-radius: 0.25rem;
-		cursor: pointer;
-		font-size: 0.75rem;
-		transition: all 0.15s;
+		background: var(--ink-canvas);
+		font: 600 var(--ink-type-xs) / 1 var(--ink-font-body);
 	}
 
-	.arrow-popover__routing-btn:hover {
-		background: var(--ink-surface-raised);
+	.arrow-popover__field input::placeholder {
+		color: var(--ink-text-muted);
 	}
 
-	.arrow-popover__routing-btn:focus {
-		outline: 2px solid var(--ink-accent);
-		outline-offset: 2px;
+	.arrow-popover__routing {
+		display: grid;
+		gap: var(--ink-space-2);
+	}
+
+	.arrow-popover__routing-buttons {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: var(--ink-space-1);
+	}
+
+	.arrow-popover__routing-buttons button {
+		min-height: 2.5rem;
+		padding: 0 var(--ink-space-1);
 	}
 
 	.arrow-popover__routing-btn--active {
-		background: var(--ink-accent);
-		color: var(--ink-on-accent);
-		border-color: var(--ink-accent);
+		border-color: var(--ink-accent) !important;
+		color: var(--ink-on-accent) !important;
+		background: var(--ink-accent) !important;
 	}
 
-	.arrow-popover__input {
-		width: 100%;
-		border: 1px solid var(--ink-border);
-		background: var(--ink-canvas);
+	.arrow-popover__check {
+		display: flex;
+		min-height: var(--ink-control-height);
+		align-items: center;
+		gap: var(--ink-space-2);
 		color: var(--ink-text);
-		padding: 6px 8px;
-		border-radius: 0.25rem;
-		font-size: 13px;
+		font: 600 var(--ink-type-xs) / 1.2 var(--ink-font-body);
+		cursor: pointer;
 	}
 
-	.arrow-popover__input:focus {
-		outline: 2px solid var(--ink-accent);
-		outline-offset: 2px;
+	.arrow-popover__check input {
+		width: 1rem;
+		height: 1rem;
+		margin: 0;
+		accent-color: var(--ink-accent);
+	}
+
+	.arrow-popover__connection {
+		display: flex;
+		min-height: 2.5rem;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--ink-space-2);
+	}
+
+	.arrow-popover__connection > div {
+		display: grid;
+		gap: 2px;
+	}
+
+	.arrow-popover__connection strong {
+		color: var(--ink-text);
+		font-size: var(--ink-type-xs);
 	}
 
-	.arrow-popover__input::placeholder {
+	.arrow-popover__connection span {
 		color: var(--ink-text-muted);
+		font-size: var(--ink-type-xs);
 	}
 
-	.arrow-popover__divider {
-		height: 1px;
-		background: var(--ink-border);
+	.arrow-popover__connection button {
+		min-height: 2.25rem;
+		padding: 0 var(--ink-space-2);
+		font-size: var(--ink-type-xs);
 	}
 </style>
diff --git a/packages/ui/src/lib/editor/components/LayerPanel.svelte b/packages/ui/src/lib/editor/components/LayerPanel.svelte
index a0a8ee1..6637244 100644
--- a/packages/ui/src/lib/editor/components/LayerPanel.svelte
+++ b/packages/ui/src/lib/editor/components/LayerPanel.svelte
@@ -584,6 +584,14 @@
 		font: 600 var(--ink-type-xs) / 1 var(--ink-font-body);
 	}
 
+	@media (min-width: 1181px) {
+		.layer-panel {
+			top: 14rem;
+			bottom: auto;
+			max-height: calc(100% - 15rem);
+		}
+	}
+
 	@media (max-width: 720px) and (pointer: coarse) {
 		.layer-panel {
 			top: auto;
diff --git a/packages/ui/src/lib/editor/components/SelectionControls.svelte b/packages/ui/src/lib/editor/components/SelectionControls.svelte
new file mode 100644
index 0000000..17f7571
--- /dev/null
+++ b/packages/ui/src/lib/editor/components/SelectionControls.svelte
@@ -0,0 +1,928 @@
+<script lang="ts">
+	import type {
+		ArrowShape,
+		EditorState as EditorStateType,
+		MarkdownShape,
+		ShapeRecord,
+		Store,
+		TextShape,
+		ToolId
+	} from '@inkfinite/core';
+	import { EditorState, getSelectedShapes, SnapshotCommand } from '@inkfinite/core';
+	import { ColorPicker, ContextMenu, Icon, type ContextMenuEntry } from '../../index';
+	import {
+		executeSelectionCommand,
+		SELECTION_COMMAND_LABELS,
+		type SelectionCommand
+	} from '../commands';
+	import { DEFAULT_FILL_COLOR, DEFAULT_STROKE_COLOR } from '../constants';
+	import ArrowPopover from './ArrowPopover.svelte';
+
+	type Props = {
+		currentTool: ToolId;
+		store: Store;
+		orientation: 'vertical' | 'horizontal';
+		/** Whether to expose the desktop-only agent editability control. */
+		showAgentControl?: boolean;
+	};
+
+	type LayoutMenuMode = 'align' | 'arrange';
+	type TypographyField = 'fontSize' | 'fontFamily';
+
+	let { currentTool, store, orientation, showAgentControl = false }: Props = $props();
+
+	let editorState = $derived<EditorStateType>(store.getState());
+	let layoutMenuOpen = $state(false);
+	let layoutMenuMode = $state<LayoutMenuMode>('arrange');
+	let layoutMenuPoint = $state({ x: 0, y: 0 });
+	let layoutMenuReturnFocus = $state<HTMLButtonElement | null>(null);
+	let agentInputEl = $state<HTMLInputElement | null>(null);
+
+	$effect(() => {
+		const unsubscribe = store.subscribe((state) => {
+			editorState = state;
+		});
+		return () => unsubscribe();
+	});
+
+	let selectedShapes = $derived(getSelectedShapes(editorState));
+	let selectionCount = $derived(selectedShapes.length);
+	let showContextControls = $derived(currentTool !== 'pen' && selectionCount > 0);
+	let fillTargets = $derived(selectedShapes.filter(shapeSupportsFill));
+	let strokeTargets = $derived(selectedShapes.filter(shapeSupportsStroke));
+	let fillOpacityTargets = $derived(selectedShapes.filter(shapeSupportsFillOpacity));
+	let strokeOpacityTargets = $derived(selectedShapes.filter(shapeSupportsStrokeOpacity));
+	let textTargets = $derived(
+		selectedShapes.filter(
+			(shape): shape is TextShape | MarkdownShape =>
+				shape.type === 'text' || shape.type === 'markdown'
+		)
+	);
+	let arrowTargets = $derived(
+		selectedShapes.filter((shape): shape is ArrowShape => shape.type === 'arrow')
+	);
+	let hasGroupedSelection = $derived(
+		selectedShapes.some((shape) => Boolean(shape.groupId) || shape.type === 'container')
+	);
+	let allSelectedLocked = $derived(
+		selectionCount > 0 && selectedShapes.every((shape) => shape.locked)
+	);
+
+	let fillColorState = $derived.by(() => {
+		const shared = getSharedValue(fillTargets.map(getFillColor));
+		return {
+			value: shared ?? DEFAULT_FILL_COLOR,
+			mixed: fillTargets.length > 1 && shared === null
+		};
+	});
+	let strokeColorState = $derived.by(() => {
+		const shared = getSharedValue(strokeTargets.map(getStrokeColor));
+		return {
+			value: shared ?? DEFAULT_STROKE_COLOR,
+			mixed: strokeTargets.length > 1 && shared === null
+		};
+	});
+	let opacityState = $derived(
+		getNumericState(selectedShapes.map((shape) => shape.opacity ?? 1))
+	);
+	let fillOpacityState = $derived(
+		getNumericState(fillOpacityTargets.map((shape) => shape.fillOpacity ?? 1))
+	);
+	let strokeOpacityState = $derived(
+		getNumericState(strokeOpacityTargets.map((shape) => shape.strokeOpacity ?? 1))
+	);
+	let fontSizeState = $derived(
+		getNumericState(textTargets.map((shape) => shape.props.fontSize))
+	);
+	let fontFamilyState = $derived(
+		getTextState(textTargets.map((shape) => shape.props.fontFamily))
+	);
+	let agentEditableState = $derived(
+		getBooleanState(selectedShapes.map((shape) => shape.agentEditable !== false))
+	);
+
+	$effect(() => {
+		if (!agentInputEl) return;
+		agentInputEl.checked = agentEditableState.value;
+		agentInputEl.indeterminate = agentEditableState.mixed;
+	});
+
+	function getSharedValue<T>(values: T[]): T | null {
+		if (values.length === 0) return null;
+		const first = values[0];
+		return values.every((value) => Object.is(value, first)) ? first : null;
+	}
+
+	function getNumericState(values: number[]) {
+		const shared = getSharedValue(values);
+		return { value: shared ?? 1, mixed: values.length > 1 && shared === null };
+	}
+
+	function getTextState(values: string[]) {
+		const shared = getSharedValue(values);
+		return { value: shared ?? '', mixed: values.length > 1 && shared === null };
+	}
+
+	function getBooleanState(values: boolean[]) {
+		const shared = getSharedValue(values);
+		return { value: shared ?? true, mixed: values.length > 1 && shared === null };
+	}
+
+	function shapeSupportsFill(shape: ShapeRecord): boolean {
+		return (
+			shape.type === 'rect' ||
+			shape.type === 'ellipse' ||
+			shape.type === 'text' ||
+			shape.type === 'path' ||
+			shape.type === 'markdown' ||
+			shape.type === 'container'
+		);
+	}
+
+	function shapeSupportsStroke(shape: ShapeRecord): boolean {
+		return (
+			shape.type === 'rect' ||
+			shape.type === 'ellipse' ||
+			shape.type === 'line' ||
+			shape.type === 'arrow' ||
+			shape.type === 'stroke' ||
+			shape.type === 'path' ||
+			shape.type === 'markdown' ||
+			shape.type === 'container'
+		);
+	}
+
+	function shapeSupportsFillOpacity(shape: ShapeRecord): boolean {
+		return (
+			shape.type === 'rect' ||
+			shape.type === 'ellipse' ||
+			shape.type === 'text' ||
+			shape.type === 'markdown' ||
+			shape.type === 'path' ||
+			shape.type === 'image' ||
+			shape.type === 'container'
+		);
+	}
+
+	function shapeSupportsStrokeOpacity(shape: ShapeRecord): boolean {
+		return (
+			shape.type === 'rect' ||
+			shape.type === 'ellipse' ||
+			shape.type === 'line' ||
+			shape.type === 'arrow' ||
+			shape.type === 'stroke' ||
+			shape.type === 'markdown' ||
+			shape.type === 'path' ||
+			shape.type === 'container'
+		);
+	}
+
+	function getFillColor(shape: ShapeRecord): string | null {
+		switch (shape.type) {
+			case 'text':
+				return shape.props.color;
+			case 'rect':
+			case 'ellipse':
+			case 'path':
+			case 'container':
+				return shape.props.fill ?? null;
+			case 'markdown':
+				return shape.props.bg ?? null;
+			default:
+				return null;
+		}
+	}
+
+	function getStrokeColor(shape: ShapeRecord): string | null {
+		switch (shape.type) {
+			case 'arrow':
+				return shape.props.style.stroke;
+			case 'stroke':
+				return shape.props.style.color;
+			case 'rect':
+			case 'ellipse':
+			case 'line':
+			case 'path':
+			case 'container':
+				return shape.props.stroke ?? null;
+			case 'markdown':
+				return shape.props.border ?? null;
+			default:
+				return null;
+		}
+	}
+
+	function updateSelectedShapes(label: string, update: (shape: ShapeRecord) => ShapeRecord) {
+		const state = store.getState();
+		if (state.ui.selectionIds.length === 0) return;
+		const before = EditorState.clone(state);
+		const shapes = { ...state.doc.shapes };
+		let changed = false;
+		for (const shapeId of state.ui.selectionIds) {
+			const shape = state.doc.shapes[shapeId];
+			if (!shape) continue;
+			const updated = update(shape);
+			if (updated !== shape) {
+				shapes[shape.id] = updated;
+				changed = true;
+			}
+		}
+		if (!changed) return;
+		store.executeCommand(
+			new SnapshotCommand(label, 'doc', before, { ...state, doc: { ...state.doc, shapes } })
+		);
+	}
+
+	function applyFillColor(color: string) {
+		updateSelectedShapes('Set fill color', (shape) => {
+			switch (shape.type) {
+				case 'text':
+					return { ...shape, props: { ...shape.props, color } } as ShapeRecord;
+				case 'rect':
+				case 'ellipse':
+				case 'path':
+				case 'container':
+					return { ...shape, props: { ...shape.props, fill: color } } as ShapeRecord;
+				case 'markdown':
+					return { ...shape, props: { ...shape.props, bg: color } } as ShapeRecord;
+				default:
+					return shape;
+			}
+		});
+	}
+
+	function applyStrokeColor(color: string) {
+		updateSelectedShapes('Set stroke color', (shape) => {
+			switch (shape.type) {
+				case 'arrow':
+					return {
+						...shape,
+						props: { ...shape.props, style: { ...shape.props.style, stroke: color } }
+					} as ShapeRecord;
+				case 'stroke':
+					return {
+						...shape,
+						props: { ...shape.props, style: { ...shape.props.style, color } }
+					} as ShapeRecord;
+				case 'rect':
+				case 'ellipse':
+				case 'line':
+				case 'path':
+				case 'container':
+					return { ...shape, props: { ...shape.props, stroke: color } } as ShapeRecord;
+				case 'markdown':
+					return { ...shape, props: { ...shape.props, border: color } } as ShapeRecord;
+				default:
+					return shape;
+			}
+		});
+	}
+
+	function applyNumericField(
+		field: 'opacity' | 'fillOpacity' | 'strokeOpacity',
+		value: number,
+		label: string
+	) {
+		const next = Math.min(1, Math.max(0, value));
+		updateSelectedShapes(label, (shape) => ({ ...shape, [field]: next }));
+	}
+
+	function handleOpacityChange(
+		event: Event,
+		field: 'opacity' | 'fillOpacity' | 'strokeOpacity'
+	) {
+		const value = (event.currentTarget as HTMLInputElement).valueAsNumber;
+		if (!Number.isFinite(value)) return;
+		applyNumericField(field, value, field === 'opacity' ? 'Set opacity' : `Set ${field}`);
+	}
+
+	function applyTypography(field: TypographyField, value: number | string) {
+		updateSelectedShapes(
+			field === 'fontSize' ? 'Set font size' : 'Set font family',
+			(shape) => {
+				if (shape.type !== 'text' && shape.type !== 'markdown') return shape;
+				return { ...shape, props: { ...shape.props, [field]: value } } as ShapeRecord;
+			}
+		);
+	}
+
+	function handleFontSizeChange(event: Event) {
+		const value = (event.currentTarget as HTMLInputElement).valueAsNumber;
+		if (Number.isFinite(value) && value > 0) applyTypography('fontSize', value);
+	}
+
+	function handleFontFamilyChange(event: Event) {
+		const value = (event.currentTarget as HTMLInputElement).value.trim();
+		if (value) applyTypography('fontFamily', value);
+	}
+
+	function handleAgentEditableChange(event: Event) {
+		const value = (event.currentTarget as HTMLInputElement).checked;
+		updateSelectedShapes(value ? 'Allow Agent Edits' : 'Prevent Agent Edits', (shape) => ({
+			...shape,
+			agentEditable: value
+		}));
+	}
+
+	function toggleLayoutMenu(mode: LayoutMenuMode, button: HTMLButtonElement) {
+		if (layoutMenuOpen && layoutMenuMode === mode) {
+			layoutMenuOpen = false;
+			return;
+		}
+		const bounds = button.getBoundingClientRect();
+		layoutMenuMode = mode;
+		layoutMenuReturnFocus = button;
+		layoutMenuPoint = { x: bounds.left, y: bounds.bottom + 8 };
+		layoutMenuOpen = true;
+	}
+
+	function getLayoutMenuItems(mode: LayoutMenuMode): ContextMenuEntry[] {
+		if (mode === 'align') {
+			return (
+				[
+					'align-left',
+					'align-center',
+					'align-right',
+					'align-top',
+					'align-middle',
+					'align-bottom'
+				] as SelectionCommand[]
+			).map((id) => ({ id, label: SELECTION_COMMAND_LABELS[id], icon: 'select' as const }));
+		}
+
+		return [
+			{
+				id: 'distribute-horizontal',
+				label: SELECTION_COMMAND_LABELS['distribute-horizontal'],
+				icon: 'arrow-right',
+				disabled: selectionCount < 3
+			},
+			{
+				id: 'distribute-vertical',
+				label: SELECTION_COMMAND_LABELS['distribute-vertical'],
+				icon: 'arrow-down',
+				disabled: selectionCount < 3
+			},
+			{ type: 'separator' },
+			{
+				id: 'group',
+				label: SELECTION_COMMAND_LABELS.group,
+				icon: 'layers',
+				disabled: selectionCount < 2
+			},
+			{
+				id: 'ungroup',
+				label: SELECTION_COMMAND_LABELS.ungroup,
+				icon: 'layers',
+				disabled: !hasGroupedSelection
+			},
+			{ type: 'separator' },
+			{
+				id: 'forward',
+				label: SELECTION_COMMAND_LABELS.forward,
+				icon: 'arrow-up',
+				shortcut: '⌘/Ctrl ]'
+			},
+			{
+				id: 'backward',
+				label: SELECTION_COMMAND_LABELS.backward,
+				icon: 'arrow-down',
+				shortcut: '⌘/Ctrl ['
+			},
+			{
+				id: 'front',
+				label: SELECTION_COMMAND_LABELS.front,
+				icon: 'arrow-up',
+				shortcut: '⇧⌘/Ctrl ]'
+			},
+			{
+				id: 'back',
+				label: SELECTION_COMMAND_LABELS.back,
+				icon: 'arrow-down',
+				shortcut: '⇧⌘/Ctrl ['
+			},
+			{ type: 'separator' },
+			{
+				id: allSelectedLocked ? 'unlock' : 'lock',
+				label: allSelectedLocked
+					? SELECTION_COMMAND_LABELS.unlock
+					: SELECTION_COMMAND_LABELS.lock,
+				icon: allSelectedLocked ? 'lock-open' : 'lock',
+				shortcut: '⇧⌘/Ctrl L'
+			}
+		];
+	}
+
+	function handleLayoutMenuAction(id: string) {
+		if (id in SELECTION_COMMAND_LABELS) {
+			executeSelectionCommand(store, id as SelectionCommand);
+		}
+	}
+</script>
+
+{#if showContextControls}
+	<div
+		class="selection-controls"
+		class:selection-controls--horizontal={orientation === 'horizontal'}
+		role="toolbar"
+		aria-label="Selection controls"
+		data-agent-occlusion>
+		<header class="selection-controls__header">
+			<strong
+				>{selectionCount}
+				{selectionCount === 1 ? 'object' : 'objects'} selected</strong>
+		</header>
+
+		<div class="selection-controls__sections">
+			{#if fillTargets.length > 0 || strokeTargets.length > 0 || fillOpacityTargets.length > 0 || strokeOpacityTargets.length > 0}
+				<section
+					class="selection-controls__section"
+					aria-labelledby="selection-appearance-label">
+					<h2 id="selection-appearance-label">Appearance</h2>
+					<div class="selection-controls__controls">
+						{#if fillTargets.length > 0}
+							<div class="selection-controls__color-control">
+								<span>Fill</span>
+								<ColorPicker
+									label="Fill color"
+									value={fillColorState.value}
+									mixed={fillColorState.mixed}
+									recentColors={[]}
+									onchange={applyFillColor}
+									align="end" />
+							</div>
+						{/if}
+						{#if strokeTargets.length > 0}
+							<div class="selection-controls__color-control">
+								<span>Stroke</span>
+								<ColorPicker
+									label="Stroke color"
+									value={strokeColorState.value}
+									mixed={strokeColorState.mixed}
+									recentColors={[]}
+									onchange={applyStrokeColor}
+									align="end" />
+							</div>
+						{/if}
+						{#if fillOpacityTargets.length > 0}
+							<label class="selection-controls__range-control">
+								<span>Fill opacity</span>
+								<input
+									type="range"
+									min="0"
+									max="1"
+									step="0.05"
+									value={fillOpacityState.value}
+									onchange={(event) => handleOpacityChange(event, 'fillOpacity')}
+									aria-label="Fill opacity"
+									aria-valuetext={fillOpacityState.mixed
+										? 'Mixed values'
+										: `${Math.round(fillOpacityState.value * 100)}%`} />
+								<output
+									>{fillOpacityState.mixed
+										? 'Mixed'
+										: `${Math.round(fillOpacityState.value * 100)}%`}</output>
+							</label>
+						{/if}
+						{#if strokeOpacityTargets.length > 0}
+							<label class="selection-controls__range-control">
+								<span>Stroke opacity</span>
+								<input
+									type="range"
+									min="0"
+									max="1"
+									step="0.05"
+									value={strokeOpacityState.value}
+									onchange={(event) =>
+										handleOpacityChange(event, 'strokeOpacity')}
+									aria-label="Stroke opacity"
+									aria-valuetext={strokeOpacityState.mixed
+										? 'Mixed values'
+										: `${Math.round(strokeOpacityState.value * 100)}%`} />
+								<output
+									>{strokeOpacityState.mixed
+										? 'Mixed'
+										: `${Math.round(strokeOpacityState.value * 100)}%`}</output>
+							</label>
+						{/if}
+						{#if selectionCount > 0}
+							<label class="selection-controls__range-control">
+								<span>Opacity</span>
+								<input
+									type="range"
+									min="0"
+									max="1"
+									step="0.05"
+									value={opacityState.value}
+									onchange={(event) => handleOpacityChange(event, 'opacity')}
+									aria-label="Opacity"
+									aria-valuetext={opacityState.mixed
+										? 'Mixed values'
+										: `${Math.round(opacityState.value * 100)}%`} />
+								<output
+									>{opacityState.mixed
+										? 'Mixed'
+										: `${Math.round(opacityState.value * 100)}%`}</output>
+							</label>
+						{/if}
+					</div>
+				</section>
+			{/if}
+
+			{#if textTargets.length > 0}
+				<section
+					class="selection-controls__section"
+					aria-labelledby="selection-type-label">
+					<h2 id="selection-type-label">Typography</h2>
+					<div class="selection-controls__controls selection-controls__typography">
+						<label class="selection-controls__field">
+							<span>Font</span>
+							<input
+								type="text"
+								value={fontFamilyState.mixed ? '' : fontFamilyState.value}
+								placeholder={fontFamilyState.mixed ? 'Mixed' : 'Font family'}
+								onchange={handleFontFamilyChange}
+								aria-label="Font family" />
+						</label>
+						<label class="selection-controls__field selection-controls__field--small">
+							<span>Size</span>
+							<input
+								type="number"
+								min="1"
+								step="1"
+								value={fontSizeState.mixed ? '' : fontSizeState.value}
+								placeholder={fontSizeState.mixed ? 'Mixed' : undefined}
+								onchange={handleFontSizeChange}
+								aria-label="Font size" />
+						</label>
+					</div>
+				</section>
+			{/if}
+
+			{#if arrowTargets.length > 0}
+				<section
+					class="selection-controls__section selection-controls__section--arrow"
+					aria-labelledby="selection-arrow-label">
+					<h2 id="selection-arrow-label">Arrow</h2>
+					<ArrowPopover {store} />
+				</section>
+			{/if}
+
+			{#if selectionCount >= 2}
+				<section
+					class="selection-controls__section"
+					aria-labelledby="selection-layout-label">
+					<h2 id="selection-layout-label">Arrange selection</h2>
+					<div class="selection-controls__actions">
+						<button
+							class="selection-controls__action"
+							type="button"
+							onclick={(event) =>
+								toggleLayoutMenu(
+									'align',
+									event.currentTarget as HTMLButtonElement
+								)}
+							aria-haspopup="menu"
+							aria-expanded={layoutMenuOpen && layoutMenuMode === 'align'}>
+							<Icon name="select" size={15} />
+							<span>Align</span>
+						</button>
+						<button
+							class="selection-controls__action"
+							type="button"
+							onclick={(event) =>
+								toggleLayoutMenu(
+									'arrange',
+									event.currentTarget as HTMLButtonElement
+								)}
+							aria-haspopup="menu"
+							aria-expanded={layoutMenuOpen && layoutMenuMode === 'arrange'}>
+							<Icon name="settings" size={15} />
+							<span>Arrange</span>
+						</button>
+					</div>
+				</section>
+			{/if}
+
+			<section
+				class="selection-controls__section selection-controls__section--actions"
+				aria-labelledby="selection-actions-label">
+				<h2 id="selection-actions-label">Selection</h2>
+				<div class="selection-controls__actions">
+					{#if selectionCount >= 2}
+						<button
+							class="selection-controls__action"
+							type="button"
+							onclick={() => executeSelectionCommand(store, 'group')}
+							aria-label="Group selected objects">
+							<Icon name="layers" size={15} />
+							<span>Group</span>
+						</button>
+					{/if}
+					<button
+						class="selection-controls__action"
+						type="button"
+						onclick={() =>
+							executeSelectionCommand(store, allSelectedLocked ? 'unlock' : 'lock')}
+						aria-label={allSelectedLocked
+							? 'Unlock selected objects'
+							: 'Lock selected objects'}>
+						<Icon name={allSelectedLocked ? 'lock-open' : 'lock'} size={15} />
+						<span>{allSelectedLocked ? 'Unlock' : 'Lock'}</span>
+					</button>
+					{#if showAgentControl}
+						<label
+							class="selection-controls__agent-control"
+							title="Allow agents to edit the selection">
+							<input
+								bind:this={agentInputEl}
+								type="checkbox"
+								checked={agentEditableState.value}
+								onchange={handleAgentEditableChange}
+								aria-label="Agent editable" />
+							<span>Agents</span>
+						</label>
+					{/if}
+				</div>
+			</section>
+		</div>
+	</div>
+
+	<ContextMenu
+		items={getLayoutMenuItems(layoutMenuMode)}
+		label={layoutMenuMode === 'align' ? 'Alignment commands' : 'Arrange commands'}
+		open={layoutMenuOpen}
+		returnFocus={layoutMenuReturnFocus}
+		x={layoutMenuPoint.x}
+		y={layoutMenuPoint.y}
+		onOpenChange={(value) => (layoutMenuOpen = value)}
+		onSelect={handleLayoutMenuAction} />
+{/if}
+
+<style>
+	.selection-controls {
+		position: fixed;
+		top: 5.25rem;
+		left: 50%;
+		z-index: 95;
+		display: grid;
+		width: min(78rem, calc(100vw - 15rem));
+		max-width: calc(100vw - 2rem);
+		border: 1px solid color-mix(in srgb, var(--ink-border) 68%, transparent);
+		border-radius: var(--ink-radius-panel-small);
+		color: var(--ink-text);
+		background: color-mix(in srgb, var(--ink-surface-raised) 97%, transparent);
+		box-shadow:
+			0 0 0 1px color-mix(in srgb, var(--ink-border) 18%, transparent),
+			0 10px 26px color-mix(in srgb, var(--ink-shadow-color) 24%, transparent),
+			0 2px 6px color-mix(in srgb, var(--ink-shadow-color) 18%, transparent);
+		translate: -50% 0;
+		backdrop-filter: blur(14px);
+	}
+
+	.selection-controls--horizontal {
+		top: 11rem;
+	}
+
+	.selection-controls__header {
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--ink-space-3);
+		padding: var(--ink-space-2) var(--ink-space-3);
+		border-bottom: 1px solid color-mix(in srgb, var(--ink-border) 58%, transparent);
+	}
+
+	.selection-controls__section h2 {
+		color: var(--ink-text-muted);
+		font: 700 var(--ink-type-xs) / 1.1 var(--ink-font-body);
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+	}
+
+	.selection-controls__header strong {
+		color: var(--ink-heading);
+		font: 650 var(--ink-type-sm) / 1.2 var(--ink-font-body);
+	}
+
+	.selection-controls__sections {
+		display: flex;
+		min-width: 0;
+		align-items: stretch;
+		gap: var(--ink-space-3);
+		padding: var(--ink-space-2) var(--ink-space-3);
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	.selection-controls__section {
+		display: grid;
+		min-width: max-content;
+		align-content: start;
+		gap: var(--ink-space-2);
+		padding-inline-end: var(--ink-space-3);
+		border-inline-end: 1px solid color-mix(in srgb, var(--ink-border) 48%, transparent);
+	}
+
+	.selection-controls__section:last-child {
+		padding-inline-end: 0;
+		border-inline-end: 0;
+	}
+
+	.selection-controls__section h2 {
+		margin: 0;
+	}
+
+	.selection-controls__controls,
+	.selection-controls__actions {
+		display: flex;
+		min-height: 2.5rem;
+		align-items: center;
+		gap: var(--ink-space-2);
+	}
+
+	.selection-controls__color-control,
+	.selection-controls__range-control,
+	.selection-controls__field {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--ink-space-2);
+		color: var(--ink-text-muted);
+		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
+		white-space: nowrap;
+	}
+
+	.selection-controls__range-control {
+		display: grid;
+		grid-template-columns: auto 5.5rem 3.25rem;
+	}
+
+	.selection-controls__range-control input {
+		width: 100%;
+		accent-color: var(--ink-accent);
+	}
+
+	.selection-controls__range-control output {
+		color: var(--ink-text);
+		font-variant-numeric: tabular-nums;
+		text-align: right;
+	}
+
+	.selection-controls__field input {
+		box-sizing: border-box;
+		width: 9rem;
+		height: var(--ink-control-height);
+		padding: 0 var(--ink-space-2);
+		border: 1px solid var(--ink-border);
+		border-radius: var(--ink-radius-wobbly-small);
+		color: var(--ink-text);
+		background: var(--ink-canvas);
+		font: 600 var(--ink-type-xs) / 1 var(--ink-font-body);
+	}
+
+	.selection-controls__field--small input {
+		width: 4.5rem;
+	}
+
+	.selection-controls__field input::placeholder {
+		color: var(--ink-text-muted);
+	}
+
+	.selection-controls__field input:focus-visible {
+		outline: 3px solid var(--ink-focus);
+		outline-offset: 2px;
+	}
+
+	.selection-controls__action,
+	.selection-controls__agent-control {
+		display: inline-flex;
+		min-height: var(--ink-control-height);
+		align-items: center;
+		justify-content: center;
+		gap: var(--ink-space-1);
+		padding: 0 var(--ink-space-2);
+		border: 1px solid var(--ink-border);
+		border-radius: var(--ink-radius-wobbly-small);
+		color: var(--ink-text);
+		background: var(--ink-canvas);
+		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
+		white-space: nowrap;
+		cursor: pointer;
+		transition-property: color, background-color, border-color, transform;
+		transition-duration: var(--ink-duration-fast);
+		transition-timing-function: var(--ink-ease-out);
+	}
+
+	.selection-controls__action:hover,
+	.selection-controls__agent-control:hover {
+		border-color: var(--ink-accent);
+		background: var(--ink-surface-hover);
+	}
+
+	.selection-controls__action:active {
+		transform: scale(0.96);
+	}
+
+	.selection-controls__action:focus-visible,
+	.selection-controls__agent-control:focus-within {
+		outline: 3px solid var(--ink-focus);
+		outline-offset: 2px;
+	}
+
+	.selection-controls__agent-control {
+		padding-inline: var(--ink-space-2);
+		color: var(--ink-text-muted);
+	}
+
+	.selection-controls__agent-control input {
+		width: 0.875rem;
+		height: 0.875rem;
+		margin: 0;
+		accent-color: var(--ink-accent);
+	}
+
+	.selection-controls__section--arrow :global(.arrow-popover) {
+		display: flex;
+	}
+
+	@media (min-width: 1181px) {
+		.selection-controls {
+			left: auto;
+			right: var(--ink-space-3);
+			translate: 0 0;
+		}
+	}
+
+	@media (max-width: 1180px) {
+		.selection-controls {
+			width: min(50rem, calc(100vw - 12rem));
+		}
+
+		.selection-controls__sections {
+			flex-wrap: wrap;
+			overflow-x: visible;
+		}
+
+		.selection-controls__section {
+			padding-block: var(--ink-space-1);
+		}
+	}
+
+	@media (max-width: 760px) {
+		.selection-controls,
+		.selection-controls--horizontal {
+			top: 11rem;
+			left: 0.75rem;
+			right: 0.75rem;
+			width: auto;
+			max-width: none;
+			max-height: calc(100vh - 11rem);
+			translate: 0 0;
+		}
+
+		.selection-controls__sections {
+			align-items: stretch;
+			flex-wrap: nowrap;
+			overflow-x: auto;
+			overflow-y: hidden;
+			scrollbar-width: thin;
+		}
+
+		.selection-controls__section {
+			min-width: max-content;
+			padding-block: var(--ink-space-2);
+			border-inline-end: 1px solid color-mix(in srgb, var(--ink-border) 48%, transparent);
+		}
+
+		.selection-controls__section:last-child {
+			border-inline-end: 0;
+		}
+
+		.selection-controls__controls,
+		.selection-controls__actions {
+			flex-wrap: nowrap;
+		}
+
+		.selection-controls__range-control {
+			grid-template-columns: auto 5.5rem 3.25rem;
+			width: auto;
+		}
+
+		.selection-controls__typography {
+			align-items: center;
+			flex-direction: row;
+		}
+
+		.selection-controls__field input {
+			width: auto;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.selection-controls__action,
+		.selection-controls__agent-control {
+			transition: none;
+		}
+	}
+</style>
diff --git a/packages/ui/src/lib/editor/components/Toolbar.svelte b/packages/ui/src/lib/editor/components/Toolbar.svelte
index a18c491..c4b3e11 100644
--- a/packages/ui/src/lib/editor/components/Toolbar.svelte
+++ b/packages/ui/src/lib/editor/components/Toolbar.svelte
@@ -1,43 +1,16 @@
 <script lang="ts">
 	import type {
-		ArrowShape,
 		EditorState as EditorStateType,
-		EllipseShape,
 		InterchangeFormat,
-		ImageShape,
-		LineShape,
-		MarkdownShape,
-		PathShape,
-		RectShape,
-		ShapeRecord,
 		Store,
-		StrokeShape,
-		TextShape,
 		ToolId
 	} from '@inkfinite/core';
-	import {
-		EditorState,
-		exportToSVG,
-		exportViewportToPNG,
-		getSelectedShapes,
-		SnapshotCommand
-	} from '@inkfinite/core';
+	import { exportToSVG, exportViewportToPNG } from '@inkfinite/core';
 	import { fade } from 'svelte/transition';
-	import {
-		BrushPopover,
-		ColorPicker,
-		ContextMenu,
-		Icon,
-		type ContextMenuEntry
-	} from '../../index';
-	import {
-		executeSelectionCommand,
-		SELECTION_COMMAND_LABELS,
-		type SelectionCommand
-	} from '../commands';
-	import { DEFAULT_FILL_COLOR, DEFAULT_STROKE_COLOR, TOOLS } from '../constants';
+	import { BrushPopover, ContextMenu, Icon, type ContextMenuEntry } from '../../index';
+	import { TOOLS } from '../constants';
 	import type { BrushSettings, BrushStore } from '../status';
-	import ArrowPopover from './ArrowPopover.svelte';
+	import SelectionControls from './SelectionControls.svelte';
 
 	type Props = {
 		currentTool: ToolId;
@@ -79,20 +52,7 @@
 	let importMenuOpen = $state(false);
 	let importMenuPoint = $state({ x: 0, y: 0 });
 	let importButtonEl = $state<HTMLButtonElement | null>(null);
-	let layoutMenuOpen = $state(false);
-	let layoutMenuPoint = $state({ x: 0, y: 0 });
-	let layoutButtonEl = $state<HTMLButtonElement | null>(null);
-	let fillColorValue = $state(DEFAULT_FILL_COLOR);
-	let strokeColorValue = $state(DEFAULT_STROKE_COLOR);
-	let fillOpacityValue = $state(1);
-	let strokeOpacityValue = $state(1);
-	let fillDisabled = $state(true);
-	let strokeDisabled = $state(true);
-	let agentEditableValue = $state(true);
 	let brush = $derived<BrushSettings>(brushStore.get());
-	let hasArrowSelection = $derived(
-		getSelectedShapes(editorState).some((s) => s.type === 'arrow')
-	);
 
 	$effect(() => {
 		editorState = store.getState();
@@ -109,65 +69,6 @@
 		return () => unsubscribeBrush();
 	});
 
-	$effect(() => {
-		const selection = getSelectedShapes(editorState);
-		const fillable = selection.filter(shapeSupportsFill);
-		const strokable = selection.filter(shapeSupportsStroke);
-		const fillOpacityTargets = selection.filter(shapeSupportsFillOpacity);
-		const strokeOpacityTargets = selection.filter(shapeSupportsStrokeOpacity);
-		fillDisabled = fillable.length === 0;
-		strokeDisabled = strokable.length === 0;
-		if (fillable.length > 0) {
-			const shared = getSharedColor(fillable, (shape) =>
-				shape.type === 'text'
-					? shape.props.color
-					: 'fill' in shape.props
-						? shape.props.fill
-						: null
-			);
-			if (shared) {
-				fillColorValue = shared;
-			}
-		}
-		if (strokable.length > 0) {
-			const shared = getSharedColor(strokable, (shape) =>
-				shape.type === 'arrow' ? shape.props.style.stroke : (shape.props.stroke ?? null)
-			);
-			if (shared) {
-				strokeColorValue = shared;
-			}
-		}
-		fillOpacityValue = getSharedOpacity(fillOpacityTargets, (shape) => shape.fillOpacity) ?? 1;
-		strokeOpacityValue =
-			getSharedOpacity(strokeOpacityTargets, (shape) =>
-				shape.type === 'stroke'
-					? (shape.strokeOpacity ?? shape.props.style.opacity)
-					: shape.strokeOpacity
-			) ?? 1;
-		agentEditableValue = selection.every((shape) => shape.agentEditable !== false);
-	});
-
-	let showColorControls = $derived(
-		getSelectedShapes(editorState).some(
-			(s) =>
-				shapeSupportsFill(s) ||
-				shapeSupportsStroke(s) ||
-				shapeSupportsFillOpacity(s) ||
-				shapeSupportsStrokeOpacity(s)
-		)
-	);
-	let selectedShapes = $derived(getSelectedShapes(editorState));
-	let selectionCount = $derived(selectedShapes.length);
-	let hasGroupedSelection = $derived(
-		selectedShapes.some((shape) => Boolean(shape.groupId) || shape.type === 'container')
-	);
-	let allSelectedLocked = $derived(
-		selectionCount > 0 && selectedShapes.every((shape) => shape.locked)
-	);
-	let showContextControls = $derived(
-		currentTool !== 'pen' && (selectionCount > 0 || hasArrowSelection)
-	);
-
 	let position = $state({ x: 12, y: 88 });
 	let orientation = $state<'vertical' | 'horizontal'>('vertical');
 	let orientationInitialized = $state(false);
@@ -273,126 +174,6 @@
 		onToolChange(toolId);
 	}
 
-	function toggleLayoutMenu() {
-		if (!layoutButtonEl) return;
-		if (layoutMenuOpen) {
-			layoutMenuOpen = false;
-			return;
-		}
-		const bounds = layoutButtonEl.getBoundingClientRect();
-		layoutMenuPoint = { x: bounds.left, y: bounds.bottom + 8 };
-		layoutMenuOpen = true;
-	}
-
-	function getLayoutMenuItems(): ContextMenuEntry[] {
-		const items: ContextMenuEntry[] = [];
-		const enoughForAlignment = selectionCount >= 2;
-		const enoughForDistribution = selectionCount >= 3;
-		if (enoughForAlignment) {
-			items.push(
-				...(
-					[
-						'align-left',
-						'align-center',
-						'align-right',
-						'align-top',
-						'align-middle',
-						'align-bottom'
-					] as SelectionCommand[]
-				).map((id) => ({
-					id,
-					label: SELECTION_COMMAND_LABELS[id],
-					icon: 'select' as const,
-					disabled: !enoughForAlignment
-				}))
-			);
-			items.push({ type: 'separator' });
-		}
-		items.push(
-			{
-				id: 'distribute-horizontal',
-				label: SELECTION_COMMAND_LABELS['distribute-horizontal'],
-				icon: 'arrow-right',
-				disabled: !enoughForDistribution
-			},
-			{
-				id: 'distribute-vertical',
-				label: SELECTION_COMMAND_LABELS['distribute-vertical'],
-				icon: 'arrow-down',
-				disabled: !enoughForDistribution
-			},
-			{ type: 'separator' },
-			{
-				id: 'group',
-				label: SELECTION_COMMAND_LABELS.group,
-				icon: 'layers',
-				disabled: selectionCount < 2
-			},
-			{
-				id: 'ungroup',
-				label: SELECTION_COMMAND_LABELS.ungroup,
-				icon: 'layers',
-				disabled: !hasGroupedSelection
-			},
-			{ type: 'separator' },
-			{
-				id: 'forward',
-				label: SELECTION_COMMAND_LABELS.forward,
-				icon: 'arrow-up',
-				shortcut: '⌘/Ctrl ]'
-			},
-			{
-				id: 'backward',
-				label: SELECTION_COMMAND_LABELS.backward,
-				icon: 'arrow-down',
-				shortcut: '⌘/Ctrl ['
-			},
-			{
-				id: 'front',
-				label: SELECTION_COMMAND_LABELS.front,
-				icon: 'arrow-up',
-				shortcut: '⇧⌘/Ctrl ]'
-			},
-			{
-				id: 'back',
-				label: SELECTION_COMMAND_LABELS.back,
-				icon: 'arrow-down',
-				shortcut: '⇧⌘/Ctrl ['
-			},
-			{ type: 'separator' },
-			{
-				id: allSelectedLocked ? 'unlock' : 'lock',
-				label: allSelectedLocked
-					? SELECTION_COMMAND_LABELS.unlock
-					: SELECTION_COMMAND_LABELS.lock,
-				icon: allSelectedLocked ? 'lock-open' : 'lock',
-				shortcut: '⇧⌘/Ctrl L'
-			}
-		);
-		if (showAgentControl) {
-			items.push(
-				{ type: 'separator' },
-				{
-					id: 'agent-editable',
-					label: SELECTION_COMMAND_LABELS['agent-editable'],
-					icon: 'terminal'
-				},
-				{
-					id: 'agent-readonly',
-					label: SELECTION_COMMAND_LABELS['agent-readonly'],
-					icon: 'lock-open'
-				}
-			);
-		}
-		return items;
-	}
-
-	function handleLayoutMenuAction(id: string) {
-		if (id in SELECTION_COMMAND_LABELS) {
-			executeSelectionCommand(store, id as SelectionCommand);
-		}
-	}
-
 	async function exportPNGViewport() {
 		if (!canvas) {
 			console.error('Canvas not available for export');
@@ -488,252 +269,9 @@
 		downloadBlob(blob, filename);
 	}
 
-	function shapeSupportsFill(
-		shape: ShapeRecord
-	): shape is RectShape | EllipseShape | TextShape | PathShape {
-		return (
-			shape.type === 'rect' ||
-			shape.type === 'ellipse' ||
-			shape.type === 'text' ||
-			shape.type === 'path'
-		);
-	}
-
-	function shapeSupportsStroke(
-		shape: ShapeRecord
-	): shape is RectShape | EllipseShape | LineShape | ArrowShape | PathShape {
-		return (
-			shape.type === 'rect' ||
-			shape.type === 'ellipse' ||
-			shape.type === 'line' ||
-			shape.type === 'arrow' ||
-			shape.type === 'path'
-		);
-	}
-
-	function shapeSupportsFillOpacity(
-		shape: ShapeRecord
-	): shape is RectShape | EllipseShape | TextShape | MarkdownShape | PathShape | ImageShape {
-		return (
-			shape.type === 'rect' ||
-			shape.type === 'ellipse' ||
-			shape.type === 'text' ||
-			shape.type === 'markdown' ||
-			shape.type === 'path' ||
-			shape.type === 'image'
-		);
-	}
-
-	function shapeSupportsStrokeOpacity(
-		shape: ShapeRecord
-	): shape is
-		| RectShape
-		| EllipseShape
-		| LineShape
-		| ArrowShape
-		| StrokeShape
-		| MarkdownShape
-		| PathShape {
-		return (
-			shape.type === 'rect' ||
-			shape.type === 'ellipse' ||
-			shape.type === 'line' ||
-			shape.type === 'arrow' ||
-			shape.type === 'stroke' ||
-			shape.type === 'markdown' ||
-			shape.type === 'path'
-		);
-	}
-
-	function getSharedColor<T extends ShapeRecord>(
-		shapes: T[],
-		extract: (shape: T) => string | null | undefined
-	): string | null {
-		if (shapes.length === 0) {
-			return null;
-		}
-		const first = extract(shapes[0]);
-		if (!first) {
-			return null;
-		}
-		for (let index = 1; index < shapes.length; index++) {
-			if (extract(shapes[index]) !== first) {
-				return null;
-			}
-		}
-		return first;
-	}
-
-	function getSharedOpacity<T extends ShapeRecord>(
-		shapes: T[],
-		extract: (shape: T) => number | undefined
-	): number | null {
-		if (shapes.length === 0) return null;
-		const first = extract(shapes[0]) ?? 1;
-		return shapes.every((shape) => (extract(shape) ?? 1) === first) ? first : null;
-	}
-
-	function applyFillColor(color: string) {
-		const state = store.getState();
-		const targets = getSelectedShapes(state).filter(shapeSupportsFill);
-		if (targets.length === 0) {
-			return;
-		}
-		const before = EditorState.clone(state);
-		const newShapes = { ...state.doc.shapes };
-		for (const shape of targets) {
-			// FIXME: make this a switch..case
-			if (shape.type === 'text') {
-				const updated: TextShape = { ...shape, props: { ...shape.props, color } };
-				newShapes[shape.id] = updated;
-			} else if (shape.type === 'rect') {
-				const updated: RectShape = { ...shape, props: { ...shape.props, fill: color } };
-				newShapes[shape.id] = updated;
-			} else if (shape.type === 'ellipse') {
-				const updated: EllipseShape = { ...shape, props: { ...shape.props, fill: color } };
-				newShapes[shape.id] = updated;
-			} else if (shape.type === 'path') {
-				const updated: PathShape = { ...shape, props: { ...shape.props, fill: color } };
-				newShapes[shape.id] = updated;
-			}
-		}
-		const after = { ...state, doc: { ...state.doc, shapes: newShapes } };
-		const command = new SnapshotCommand(
-			'Set fill color',
-			'doc',
-			before,
-			EditorState.clone(after)
-		);
-		store.executeCommand(command);
-	}
-
-	function applyStrokeColor(color: string) {
-		const state = store.getState();
-		const targets = getSelectedShapes(state).filter(shapeSupportsStroke);
-		if (targets.length === 0) {
-			return;
-		}
-		const before = EditorState.clone(state);
-		const newShapes = { ...state.doc.shapes };
-		for (const shape of targets) {
-			switch (shape.type) {
-				case 'rect': {
-					const updated: RectShape = {
-						...shape,
-						props: { ...shape.props, stroke: color }
-					};
-					newShapes[shape.id] = updated;
-					break;
-				}
-				case 'ellipse': {
-					const updated: EllipseShape = {
-						...shape,
-						props: { ...shape.props, stroke: color }
-					};
-					newShapes[shape.id] = updated;
-					break;
-				}
-				case 'line': {
-					const updated: LineShape = {
-						...shape,
-						props: { ...shape.props, stroke: color }
-					};
-					newShapes[shape.id] = updated;
-					break;
-				}
-				case 'arrow': {
-					const updated: ArrowShape = {
-						...shape,
-						props: { ...shape.props, style: { ...shape.props.style, stroke: color } }
-					};
-					newShapes[shape.id] = updated;
-					break;
-				}
-				case 'path': {
-					const updated: PathShape = {
-						...shape,
-						props: { ...shape.props, stroke: color }
-					};
-					newShapes[shape.id] = updated;
-					break;
-				}
-			}
-		}
-		const after = { ...state, doc: { ...state.doc, shapes: newShapes } };
-		const command = new SnapshotCommand(
-			'Set stroke color',
-			'doc',
-			before,
-			EditorState.clone(after)
-		);
-		store.executeCommand(command);
-	}
-
-	function handleFillChange(color: string) {
-		fillColorValue = color;
-		applyFillColor(color);
-	}
-
-	function handleStrokeChange(color: string) {
-		strokeColorValue = color;
-		applyStrokeColor(color);
-	}
-
-	function applyOpacity(field: 'fillOpacity' | 'strokeOpacity', value: number) {
-		const state = store.getState();
-		const targets = getSelectedShapes(state).filter(
-			field === 'fillOpacity' ? shapeSupportsFillOpacity : shapeSupportsStrokeOpacity
-		);
-		if (targets.length === 0) return;
-		const opacity = Math.min(1, Math.max(0, value));
-		const before = EditorState.clone(state);
-		const shapes = { ...state.doc.shapes };
-		for (const shape of targets) {
-			shapes[shape.id] = { ...shape, [field]: opacity } as ShapeRecord;
-		}
-		const after = { ...state, doc: { ...state.doc, shapes } };
-		store.executeCommand(
-			new SnapshotCommand(
-				field === 'fillOpacity' ? 'Set fill opacity' : 'Set stroke opacity',
-				'doc',
-				before,
-				EditorState.clone(after)
-			)
-		);
-	}
-
-	function handleOpacityChange(event: Event, field: 'fillOpacity' | 'strokeOpacity') {
-		const value = (event.currentTarget as HTMLInputElement).valueAsNumber;
-		if (!Number.isFinite(value)) return;
-		if (field === 'fillOpacity') fillOpacityValue = value;
-		else strokeOpacityValue = value;
-		applyOpacity(field, value);
-	}
-
 	function handleBrushChange(newBrush: BrushSettings) {
 		brushStore.set(newBrush);
 	}
-
-	function handleAgentEditableChange(event: Event) {
-		const state = store.getState();
-		const targets = getSelectedShapes(state);
-		if (targets.length === 0) return;
-		const agentEditable = (event.currentTarget as HTMLInputElement).checked;
-		const before = EditorState.clone(state);
-		const shapes = { ...state.doc.shapes };
-		for (const shape of targets) {
-			shapes[shape.id] = { ...shape, agentEditable } as ShapeRecord;
-		}
-		const after = { ...state, doc: { ...state.doc, shapes } };
-		store.executeCommand(
-			new SnapshotCommand(
-				agentEditable ? 'Allow Agent Edits' : 'Prevent Agent Edits',
-				'doc',
-				before,
-				EditorState.clone(after)
-			)
-		);
-	}
 </script>
 
 <div class="editor-chrome">
@@ -895,115 +433,7 @@
 		</div>
 	</div>
 
-	{#if showContextControls}
-		<div
-			class="toolbar__context-panel selection-controls"
-			class:selection-controls--horizontal={orientation === 'horizontal'}
-			role="toolbar"
-			aria-label="Selection controls"
-			data-agent-occlusion
-			transition:fade={{ duration: 150 }}>
-			<div class="selection-controls__heading">
-				<span>Selection</span>
-				<span class="selection-controls__count">{selectionCount}</span>
-			</div>
-			<div class="selection-controls__body">
-				{#if showColorControls}
-					<div class="toolbar__colors" aria-label="Color controls">
-						{#if getSelectedShapes(editorState).some(shapeSupportsFill)}
-							<div class="toolbar__color-control">
-								<span>Fill</span>
-								<ColorPicker
-									label="Fill color"
-									value={fillColorValue}
-									disabled={fillDisabled}
-									align="end"
-									onchange={handleFillChange} />
-							</div>
-						{/if}
-						{#if getSelectedShapes(editorState).some(shapeSupportsStroke)}
-							<div class="toolbar__color-control">
-								<span>Stroke</span>
-								<ColorPicker
-									label="Stroke color"
-									value={strokeColorValue}
-									disabled={strokeDisabled}
-									align="end"
-									onchange={handleStrokeChange} />
-							</div>
-						{/if}
-						{#if getSelectedShapes(editorState).some(shapeSupportsFillOpacity)}
-							<label class="toolbar__opacity-control">
-								<span>Fill opacity</span>
-								<input
-									type="range"
-									min="0"
-									max="1"
-									step="0.05"
-									value={fillOpacityValue}
-									onchange={(event) => handleOpacityChange(event, 'fillOpacity')}
-									aria-label="Fill opacity"
-									aria-valuetext={`${Math.round(fillOpacityValue * 100)}%`} />
-								<output>{Math.round(fillOpacityValue * 100)}%</output>
-							</label>
-						{/if}
-						{#if getSelectedShapes(editorState).some(shapeSupportsStrokeOpacity)}
-							<label class="toolbar__opacity-control">
-								<span>Stroke opacity</span>
-								<input
-									type="range"
-									min="0"
-									max="1"
-									step="0.05"
-									value={strokeOpacityValue}
-									onchange={(event) =>
-										handleOpacityChange(event, 'strokeOpacity')}
-									aria-label="Stroke opacity"
-									aria-valuetext={`${Math.round(strokeOpacityValue * 100)}%`} />
-								<output>{Math.round(strokeOpacityValue * 100)}%</output>
-							</label>
-						{/if}
-					</div>
-				{/if}
-				{#if hasArrowSelection}
-					<ArrowPopover {store} />
-				{/if}
-				{#if showAgentControl}
-					<label
-						class="toolbar__agent-control"
-						title="Allow agents to edit the selection">
-						<input
-							type="checkbox"
-							checked={agentEditableValue}
-							onchange={handleAgentEditableChange}
-							aria-label="Agent editable" />
-						<span>Agents</span>
-					</label>
-				{/if}
-				<button
-					class="toolbar__layout-button"
-					bind:this={layoutButtonEl}
-					type="button"
-					onpointerdown={(event) => event.stopPropagation()}
-					onclick={toggleLayoutMenu}
-					aria-label="Layout and selection commands"
-					aria-haspopup="menu"
-					aria-expanded={layoutMenuOpen}>
-					<Icon name="settings" size={16} />
-					<span>Arrange</span>
-				</button>
-			</div>
-		</div>
-		<ContextMenu
-			items={getLayoutMenuItems()}
-			label="Layout and selection commands"
-			open={layoutMenuOpen}
-			returnFocus={layoutButtonEl}
-			x={layoutMenuPoint.x}
-			y={layoutMenuPoint.y}
-			onOpenChange={(value) => (layoutMenuOpen = value)}
-			onSelect={handleLayoutMenuAction} />
-	{/if}
+	<SelectionControls {currentTool} {store} {orientation} {showAgentControl} />
 </div>
 
 <style>
@@ -1240,7 +670,6 @@
 	}
 
 	.toolbar__tool-button:active,
-	.toolbar__layout-button:active,
 	.application-chrome__button:active {
 		transform: scale(0.96);
 	}
@@ -1289,154 +718,6 @@
 		backdrop-filter: blur(14px);
 	}
 
-	.toolbar__context-panel {
-		position: fixed;
-		top: 5.25rem;
-		left: 50%;
-		z-index: 95;
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
-		align-items: center;
-		gap: var(--ink-space-3);
-		width: min(56rem, calc(100vw - 12rem));
-		max-width: calc(100vw - 2rem);
-		padding: var(--ink-space-2) var(--ink-space-3);
-		border: 1px solid color-mix(in srgb, var(--ink-border) 64%, transparent);
-		border-radius: var(--ink-radius-panel-small);
-		color: var(--ink-text);
-		background: color-mix(in srgb, var(--ink-surface-raised) 96%, transparent);
-		box-shadow:
-			0 0 0 1px color-mix(in srgb, var(--ink-border) 18%, transparent),
-			0 10px 26px color-mix(in srgb, var(--ink-shadow-color) 24%, transparent),
-			0 2px 6px color-mix(in srgb, var(--ink-shadow-color) 18%, transparent);
-		translate: -50% 0;
-		backdrop-filter: blur(14px);
-	}
-
-	.selection-controls--horizontal {
-		top: 11rem;
-	}
-
-	.selection-controls__heading {
-		display: grid;
-		gap: 2px;
-		padding-inline-end: var(--ink-space-3);
-		border-inline-end: 1px solid color-mix(in srgb, var(--ink-border) 58%, transparent);
-		color: var(--ink-heading);
-		font: 650 var(--ink-type-xs) / 1.1 var(--ink-font-body);
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-	}
-
-	.selection-controls__count {
-		color: var(--ink-text-muted);
-		font-size: 0.6875rem;
-		font-variant-numeric: tabular-nums;
-		letter-spacing: 0;
-		text-align: center;
-	}
-
-	.selection-controls__body {
-		display: flex;
-		min-width: 0;
-		align-items: center;
-		gap: var(--ink-space-3);
-	}
-
-	.toolbar__colors {
-		display: flex;
-		align-items: center;
-		gap: var(--ink-space-3);
-	}
-
-	.toolbar__color-control {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--ink-space-2);
-		color: var(--ink-text-muted);
-		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
-		white-space: nowrap;
-	}
-
-	.toolbar__opacity-control {
-		display: grid;
-		grid-template-columns: auto minmax(4rem, 7rem) 2.75rem;
-		align-items: center;
-		gap: var(--ink-space-2);
-		color: var(--ink-text-muted);
-		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
-		white-space: nowrap;
-	}
-
-	.toolbar__opacity-control input {
-		width: 100%;
-		accent-color: var(--ink-accent);
-	}
-
-	.toolbar__opacity-control output {
-		color: var(--ink-text);
-		font-variant-numeric: tabular-nums;
-		text-align: right;
-	}
-
-	.toolbar__agent-control {
-		display: inline-flex;
-		min-height: var(--ink-control-height);
-		align-items: center;
-		gap: var(--ink-space-1);
-		padding-inline: var(--ink-space-1);
-		border-radius: var(--ink-radius-wobbly-small);
-		color: var(--ink-text-muted);
-		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
-		white-space: nowrap;
-		cursor: pointer;
-	}
-
-	.toolbar__agent-control:hover {
-		color: var(--ink-text);
-	}
-
-	.toolbar__agent-control:focus-within {
-		outline: 3px solid var(--ink-focus);
-		outline-offset: 1px;
-	}
-
-	.toolbar__agent-control input {
-		width: 0.875rem;
-		height: 0.875rem;
-		margin: 0;
-		accent-color: var(--ink-accent);
-	}
-
-	.toolbar__layout-button {
-		display: inline-flex;
-		min-height: var(--ink-control-height);
-		align-items: center;
-		justify-content: center;
-		gap: var(--ink-space-1);
-		padding: 0 var(--ink-space-3);
-		border: 1px solid var(--ink-border);
-		border-radius: var(--ink-radius-wobbly-small);
-		color: var(--ink-text);
-		background: var(--ink-canvas);
-		font: 650 var(--ink-type-xs) / 1 var(--ink-font-body);
-		white-space: nowrap;
-		cursor: pointer;
-		transition-property: color, background-color, border-color, transform;
-		transition-duration: var(--ink-duration-fast);
-		transition-timing-function: var(--ink-ease-out);
-	}
-
-	.toolbar__layout-button:hover {
-		border-color: var(--ink-accent);
-		background: var(--ink-surface-hover);
-	}
-
-	.toolbar__layout-button:focus-visible {
-		outline: 3px solid var(--ink-focus);
-		outline-offset: 2px;
-	}
-
 	.toolbar__export {
 		position: relative;
 	}
@@ -1490,15 +771,6 @@
 			right: auto;
 			width: min(30rem, calc(100vw - 1.5rem));
 		}
-
-		.toolbar__context-panel {
-			left: 50%;
-			width: min(44rem, calc(100vw - 12rem));
-		}
-
-		.selection-controls__body {
-			flex-wrap: wrap;
-		}
 	}
 
 	@media (max-width: 760px) {
@@ -1544,41 +816,6 @@
 			display: none;
 		}
 
-		.toolbar__context-panel {
-			top: 11rem;
-			left: 0.75rem;
-			right: 0.75rem;
-			width: auto;
-			max-width: none;
-			max-height: calc(100vh - 11rem);
-			overflow: auto;
-			translate: 0 0;
-		}
-
-		.selection-controls__heading {
-			align-self: start;
-		}
-
-		.selection-controls__body {
-			align-items: stretch;
-			flex-direction: column;
-		}
-
-		.toolbar__colors {
-			display: grid;
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
-
-		.toolbar__color-control,
-		.toolbar__opacity-control {
-			grid-template-columns: auto minmax(0, 1fr) auto;
-			min-width: 0;
-		}
-
-		.toolbar__opacity-control {
-			display: grid;
-		}
-
 		.toolbar__pen-context {
 			position: fixed;
 			top: 11rem;
@@ -1617,7 +854,6 @@
 		.toolbar,
 		.toolbar__drag-handle,
 		.toolbar__tool-button,
-		.toolbar__layout-button,
 		.toolbar__menu-item {
 			transition: none;
 		}
diff --git a/packages/ui/src/lib/editor/components/__tests__/ArrowPopover.svelte.test.ts b/packages/ui/src/lib/editor/components/__tests__/ArrowPopover.svelte.test.ts
index 6d9dea7..b82e045 100644
--- a/packages/ui/src/lib/editor/components/__tests__/ArrowPopover.svelte.test.ts
+++ b/packages/ui/src/lib/editor/components/__tests__/ArrowPopover.svelte.test.ts
@@ -11,13 +11,25 @@ describe('ArrowPopover', () => {
 
 		await screen.getByRole('button', { name: 'Arrow settings' }).click();
 		await screen.getByRole('button', { name: 'Orthogonal routing' }).click();
+		await screen.getByRole('checkbox', { name: 'Start arrowhead' }).click();
+
+		const width = screen
+			.getByRole('spinbutton', { name: 'Arrow stroke width' })
+			.element() as HTMLInputElement;
+		width.value = '4';
+		width.dispatchEvent(new Event('change', { bubbles: true }));
 
 		const arrow = store.getState().doc.shapes['shape:arrow'];
 		expect(arrow.type === 'arrow' && arrow.props.routing?.kind).toBe('orthogonal');
+		expect(arrow.type === 'arrow' && arrow.props.style.headStart).toBe(true);
+		expect(arrow.type === 'arrow' && arrow.props.style.width).toBe(4);
 		expect(store.canUndo()).toBe(true);
 
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+		await expect.element(screen.getByRole('button', { name: 'Arrow settings' })).toHaveFocus();
+
 		store.undo();
 		const restored = store.getState().doc.shapes['shape:arrow'];
-		expect(restored.type === 'arrow' && restored.props.routing?.kind).toBe('straight');
+		expect(restored.type === 'arrow' && restored.props.routing?.kind).toBe('orthogonal');
 	});
 });
diff --git a/packages/ui/src/lib/editor/components/__tests__/SelectionControls.svelte.test.ts b/packages/ui/src/lib/editor/components/__tests__/SelectionControls.svelte.test.ts
new file mode 100644
index 0000000..d857e1e
--- /dev/null
+++ b/packages/ui/src/lib/editor/components/__tests__/SelectionControls.svelte.test.ts
@@ -0,0 +1,167 @@
+import {
+	EditorState,
+	PageRecord,
+	ShapeRecord,
+	Store,
+	type ShapeRecord as Shape
+} from '@inkfinite/core';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+
+import SelectionControls from '../SelectionControls.svelte';
+
+function createSelectionStore(shapes: Shape[], selectionIds = shapes.map((shape) => shape.id)) {
+	const state = EditorState.create();
+	const page = PageRecord.create('Test page', 'page:test');
+	state.doc.pages[page.id] = { ...page, shapeIds: shapes.map((shape) => shape.id) };
+	for (const shape of shapes) state.doc.shapes[shape.id] = shape;
+	state.ui.currentPageId = page.id;
+	state.ui.selectionIds = selectionIds;
+	return new Store(state);
+}
+
+describe('SelectionControls', () => {
+	it('shows only appearance controls for a selected rectangle', async () => {
+		const page = PageRecord.create('Test page', 'page:test');
+		const rect = ShapeRecord.createRect(
+			page.id,
+			0,
+			0,
+			{ w: 80, h: 50, fill: '#ffffff', stroke: '#111111', radius: 4 },
+			'rect'
+		);
+		const screen = render(SelectionControls, {
+			currentTool: 'select',
+			orientation: 'vertical',
+			store: createSelectionStore([rect])
+		});
+
+		await expect
+			.element(screen.getByRole('heading', { name: 'Appearance' }))
+			.toBeInTheDocument();
+		await expect
+			.element(screen.getByRole('heading', { name: 'Typography' }))
+			.not.toBeInTheDocument();
+		await expect
+			.element(screen.getByRole('button', { name: 'Arrow settings' }))
+			.not.toBeInTheDocument();
+		await expect
+			.element(screen.getByRole('button', { name: 'Align' }))
+			.not.toBeInTheDocument();
+	});
+
+	it('shows focused typography controls for text and Markdown selections', async () => {
+		const page = PageRecord.create('Test page', 'page:test');
+		const text = ShapeRecord.createText(
+			page.id,
+			0,
+			0,
+			{ text: 'Title', fontSize: 24, fontFamily: 'Inter', color: '#111111' },
+			'text'
+		);
+		const markdown = ShapeRecord.createMarkdown(
+			page.id,
+			0,
+			50,
+			{ md: '**Body**', w: 200, fontSize: 16, fontFamily: 'Inter', color: '#222222' },
+			'markdown'
+		);
+		const store = createSelectionStore([text, markdown]);
+		const screen = render(SelectionControls, {
+			currentTool: 'select',
+			orientation: 'vertical',
+			store
+		});
+
+		await expect
+			.element(screen.getByRole('heading', { name: 'Typography' }))
+			.toBeInTheDocument();
+		await expect
+			.element(screen.getByRole('textbox', { name: 'Font family' }))
+			.toHaveValue('Inter');
+		await expect
+			.element(screen.getByRole('spinbutton', { name: 'Font size' }))
+			.toHaveAttribute('placeholder', 'Mixed');
+
+		const size = screen
+			.getByRole('spinbutton', { name: 'Font size' })
+			.element() as HTMLInputElement;
+		size.value = '18';
+		size.dispatchEvent(new Event('change', { bubbles: true }));
+		const updatedText = store.getState().doc.shapes.text;
+		const updatedMarkdown = store.getState().doc.shapes.markdown;
+		if (updatedText.type !== 'text' || updatedMarkdown.type !== 'markdown') {
+			throw new Error('Expected text and Markdown selections');
+		}
+		expect(updatedText.props.fontSize).toBe(18);
+		expect(updatedMarkdown.props.fontSize).toBe(18);
+	});
+
+	it('shows mixed values and multi-selection layout actions', async () => {
+		const page = PageRecord.create('Test page', 'page:test');
+		const first = ShapeRecord.createRect(
+			page.id,
+			0,
+			0,
+			{ w: 40, h: 40, fill: '#ffffff', stroke: '#111111', radius: 0 },
+			'first'
+		);
+		const second = ShapeRecord.createRect(
+			page.id,
+			60,
+			0,
+			{ w: 40, h: 40, fill: '#000000', stroke: '#111111', radius: 0 },
+			'second'
+		);
+		const screen = render(SelectionControls, {
+			currentTool: 'select',
+			orientation: 'vertical',
+			store: createSelectionStore([first, second])
+		});
+
+		await expect
+			.element(screen.getByRole('button', { name: 'Fill color, mixed values' }))
+			.toBeInTheDocument();
+		await expect.element(screen.getByRole('button', { name: 'Align' })).toBeInTheDocument();
+		await expect.element(screen.getByRole('button', { name: 'Arrange' })).toBeInTheDocument();
+		await expect
+			.element(screen.getByRole('button', { name: 'Group selected objects' }))
+			.toBeInTheDocument();
+
+		await screen.getByRole('button', { name: 'Align' }).click();
+		await expect
+			.element(screen.getByRole('menu', { name: 'Alignment commands' }))
+			.toBeInTheDocument();
+		await expect
+			.element(screen.getByRole('menuitem', { name: 'Align Left' }))
+			.toBeInTheDocument();
+		await screen.getByRole('menuitem', { name: 'Align Left' }).click();
+		expect(document.activeElement).toBe(
+			screen.getByRole('button', { name: 'Align' }).element()
+		);
+	});
+
+	it('keeps agent controls opt-in for desktop callers', async () => {
+		const page = PageRecord.create('Test page', 'page:test');
+		const rect = ShapeRecord.createRect(
+			page.id,
+			0,
+			0,
+			{ w: 20, h: 20, fill: '#fff', stroke: '#000', radius: 0 },
+			'rect'
+		);
+		const store = createSelectionStore([rect]);
+		const screen = render(SelectionControls, {
+			currentTool: 'select',
+			orientation: 'vertical',
+			store,
+			showAgentControl: true
+		});
+
+		await expect
+			.element(screen.getByRole('checkbox', { name: 'Agent editable' }))
+			.toBeChecked();
+		await screen.getByRole('checkbox', { name: 'Agent editable' }).click();
+		expect(store.getState().doc.shapes.rect.agentEditable).toBe(false);
+	});
+});
diff --git a/scripts/images/capture-selection-controls.mjs b/scripts/images/capture-selection-controls.mjs
new file mode 100644
index 0000000..594ad70
--- /dev/null
+++ b/scripts/images/capture-selection-controls.mjs
@@ -0,0 +1,115 @@
+import { spawn } from 'node:child_process';
+import { mkdir } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
+import { chromium } from '../../apps/web/node_modules/playwright/index.mjs';
+
+const webApp = fileURLToPath(new URL('../../apps/web', import.meta.url));
+const output = fileURLToPath(new URL('./__screenshots__/', import.meta.url));
+const port = 4189;
+const url = `http://127.0.0.1:${port}/app`;
+const server = spawn(
+	'node_modules/.bin/vite',
+	['dev', '--host', '127.0.0.1', '--port', String(port)],
+	{ cwd: webApp, stdio: ['ignore', 'pipe', 'pipe'] }
+);
+
+server.stdout.on('data', (chunk) => process.stdout.write(`[vite] ${chunk}`));
+server.stderr.on('data', (chunk) => process.stderr.write(`[vite] ${chunk}`));
+
+async function waitForServer() {
+	for (let attempt = 0; attempt < 60; attempt += 1) {
+		try {
+			const response = await fetch(url);
+			if (response.ok) return;
+			if (attempt % 10 === 0) console.log(`[capture] server responded ${response.status}`);
+		} catch (error) {
+			if (attempt % 10 === 0) console.log(`[capture] server not ready: ${error.message}`);
+		}
+		await new Promise((resolve) => setTimeout(resolve, 500));
+	}
+	throw new Error('Editor server did not start');
+}
+
+async function drag(page, from, to) {
+	await page.mouse.move(from.x, from.y);
+	await page.mouse.down();
+	await page.mouse.move(to.x, to.y, { steps: 8 });
+	await page.mouse.up();
+}
+
+async function drawRectangle(page, from, to) {
+	await page.getByRole('button', { name: 'Rectangle', exact: true }).click();
+	await drag(page, from, to);
+}
+
+async function selectAt(page, point, additive = false) {
+	await page.getByRole('button', { name: 'Select', exact: true }).click();
+	if (additive) await page.keyboard.down('Shift');
+	await page.mouse.click(point.x, point.y);
+	if (additive) await page.keyboard.up('Shift');
+}
+
+await mkdir(output, { recursive: true });
+let browser;
+try {
+	await waitForServer();
+	browser = await chromium.launch({ channel: 'chrome', headless: true });
+
+	const desktop = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+	await desktop.addInitScript(() => localStorage.setItem('theme', 'light'));
+	await desktop.goto(url, { waitUntil: 'networkidle' });
+	await drawRectangle(desktop, { x: 300, y: 330 }, { x: 480, y: 450 });
+	await selectAt(desktop, { x: 390, y: 390 });
+	await desktop.getByRole('heading', { name: 'Appearance' }).waitFor();
+	await desktop.screenshot({ path: `${output}/selection-controls-rectangle.png` });
+
+	await drawRectangle(desktop, { x: 600, y: 430 }, { x: 780, y: 550 });
+	await selectAt(desktop, { x: 690, y: 490 });
+	await selectAt(desktop, { x: 390, y: 390 }, true);
+	await desktop.getByRole('button', { name: 'Align' }).waitFor();
+	await desktop.screenshot({ path: `${output}/selection-controls-multi.png` });
+
+	await desktop.getByRole('button', { name: 'Arrange', exact: true }).click();
+	await desktop.getByRole('menu', { name: 'Arrange commands' }).waitFor();
+	await desktop.screenshot({ path: `${output}/selection-controls-arrange-menu.png` });
+
+	const textPage = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+	await textPage.addInitScript(() => localStorage.setItem('theme', 'light'));
+	await textPage.goto(url, { waitUntil: 'networkidle' });
+	await textPage.getByRole('button', { name: 'Text', exact: true }).click();
+	await textPage.mouse.click(500, 420);
+	await textPage.keyboard.type('Heading');
+	await textPage.keyboard.press('Control+Enter');
+	await selectAt(textPage, { x: 500, y: 420 });
+	await textPage.getByRole('heading', { name: 'Typography' }).waitFor();
+	await textPage.screenshot({ path: `${output}/selection-controls-typography.png` });
+
+	const arrowPage = await browser.newPage({ viewport: { width: 1440, height: 960 } });
+	await arrowPage.addInitScript(() => localStorage.setItem('theme', 'dark'));
+	await arrowPage.goto(url, { waitUntil: 'networkidle' });
+	await arrowPage.getByRole('button', { name: 'Arrow', exact: true }).click();
+	await drag(arrowPage, { x: 320, y: 500 }, { x: 720, y: 500 });
+	await selectAt(arrowPage, { x: 520, y: 500 });
+	await arrowPage.getByRole('button', { name: 'Arrow settings' }).waitFor();
+	await arrowPage.getByRole('button', { name: 'Arrow settings' }).click();
+	await arrowPage.getByRole('heading', { name: 'Connections' }).waitFor();
+	await arrowPage.screenshot({ path: `${output}/selection-controls-arrow.png` });
+
+	const mobile = await browser.newPage({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true });
+	await mobile.addInitScript(() => localStorage.setItem('theme', 'dark'));
+	await mobile.goto(url, { waitUntil: 'networkidle' });
+	await drawRectangle(mobile, { x: 120, y: 360 }, { x: 300, y: 470 });
+	await selectAt(mobile, { x: 210, y: 415 });
+	await mobile.getByRole('heading', { name: 'Appearance' }).waitFor();
+	await mobile.screenshot({ path: `${output}/selection-controls-mobile.png`, fullPage: true });
+
+	await arrowPage.close();
+	await textPage.close();
+	await desktop.close();
+	await mobile.close();
+	console.log('[capture] selection controls complete');
+} finally {
+	await browser?.close();
+	server.kill('SIGTERM');
+}
-- 
2.51.2