feat: update toolbar accessibility and color controls, add handle manipulation in select tool

TODO.txt

···
 1. Milestone A: Repo skeleton + dev loop                                  *wb-A*
 ================================================================================
 
-Goal: a monorepo that can run a blank canvas in web + desktop.
-
-[ ] Create workspace:
-    - /apps/web (SvelteKit)
-    - /apps/desktop (Tauri wrapper)
-    - /packages/core (pure TS engine)
-    - /packages/renderer (Canvas2D renderer)
-
-[ ] Add TypeScript config(s):
-    - one shared tsconfig.base.json
-    - package-level tsconfig.json extends base
-
-[ ] Add lint/format:
-    - eslint + prettier
-    - one command: pnpm lint / pnpm fmt
-
-[ ] Add test runner for core:
-    - vitest in /packages/core
-    - one command: pnpm test
-
-[ ] Add CI:
-    - install, lint, test (core only)
-
-(DoD):
-- `pnpm dev:web` shows an empty page with a <canvas>.
-- `pnpm dev:desktop` launches a Tauri window that shows the same canvas.
-- `pnpm test` runs at least 1 passing core test.
+Created a project monorepo/workspace.
 
 ================================================================================
 2. Milestone B: Math + coordinate systems                                 *wb-B*
···
 15. Milestone O: Export (PNG/SVG)                                         *wb-O*
 ================================================================================
 
-Goal: export drawings as shareable artifacts.
-
-[x] Implement exportViewportToPNG(canvas) (screen export)
-[x] Implement exportSelectionToPNG (render selection bounds)
-[x] Implement SVG export for basic shapes:
-    - rect/ellipse/line/arrow/text
-    - camera transform NOT included (exports in world coordinates)
-[x] Export controls are in Toolbar (between zoom & history)
-
-Tests:
-[x] exported SVG parses and contains expected elements
-
-(DoD):
-- One-click export works in both web and desktop. ✓
+PNG/SVG export flows now deliver one-click viewport or selection exports from
+the Toolbar across web and desktop builds.
 
 ================================================================================
 16. Milestone P: Desktop packaging (Tauri)                                *wb-P*
···
 19. Milestone S: Quality polish (what makes it feel "real")               *wb-S*
 ================================================================================
 
-Goal: the UX crosses the "this is legit" threshold.
-
-[x] BEM-ify CSS classes
-    - Dialog, Sheet, Toolbar, and StatusBar now use BEM naming
-    - Fixed hardcoded white backgrounds in Dialog/Sheet (now use CSS vars)
-    - All text colors use proper CSS variables for dark mode support
-[x] Panning viewport
-    - Hold space + drag to pan the canvas
-    - Camera.pan integration in Canvas.svelte
-[x] Keyboard affordances:
-    - Arrow keys nudge selected shapes (1px, 10px with Shift)
-    - Ctrl/Cmd+D duplicates selected shapes
-    - Ctrl/Cmd+] brings shapes forward
-    - Ctrl/Cmd+[ sends shapes backward
-[x] Accessibility:
-    - Tool buttons have ARIA labels and aria-pressed states
-    - Zoom and Export menus have proper ARIA attributes (haspopup, expanded, role=menu)
-    - Visible focus states on all interactive elements
-    - Checkboxes in StatusBar have ARIA labels
-    - All controls keyboard-navigable with Tab
-
-[ ] Editable Text
-[ ] Snapping refinement
-    - Guideline positioning
-[ ] Handles:
-    - resize handles for rect/ellipse
-    - rotate handle
-    - cursor affordances
-
-(DoD):
-- A user can comfortably draw and edit without surprises.
+Comprehensive UX polish adds BEM CSS, space-drag panning, richer keyboard
+affordances, improved accessibility and styling, refined snapping, and handles
+so drawing feels production-ready.
 
 ================================================================================
 References (URLs)                                                      *wb-refs*

apps/web/src/lib/canvas/Canvas.svelte

···
 		createToolMap,
 		createWebDocRepo,
 		diffDoc,
+		getShapesOnCurrentPage,
 		routeAction,
+		shapeBounds,
 		switchTool,
 		type Action,
 		type CommandKind,
···
 	});
 	const cursorStore = new CursorStore();
 	const snapStore: SnapStore = createSnapStore();
-	const pointerState = $state({ isPointerDown: false });
+	const pointerState = $state({
+		isPointerDown: false,
+		snappedWorld: null as { x: number; y: number } | null
+	});
+	const handleState = $state<{ hover: string | null; active: string | null }>({
+		hover: null,
+		active: null
+	});
+	let textEditor = $state<{ shapeId: string; value: string } | null>(null);
+	let textEditorEl = $state<HTMLTextAreaElement | null>(null);
 	const panState = $state({ isPanning: false, spaceHeld: false, lastScreen: { x: 0, y: 0 } });
 	const snapProvider = { get: () => snapStore.get() };
 	const cursorProvider = { get: () => cursorStore.getState() };
 	const pointerStateProvider = { get: () => pointerState };
+	const handleProvider = { get: () => ({ ...handleState }) };
 	let pendingCommandStart: EditorState | null = null;
 
 	function applyLoadedDoc(doc: LoadedDoc) {
···
 		if (!firstShapeId) {
 			return;
 		}
-		const state = store.getState();
+		const state = editorSnapshot;
 		if (state.ui.selectionIds.length === 1 && state.ui.selectionIds[0] === firstShapeId) {
 			return;
 		}
···
 			EditorState.clone(after)
 		);
 		store.executeCommand(command);
+		syncHandleState();
+	}
+
+	const handleCursorMap: Record<string, string> = {
+		n: 'ns-resize',
+		s: 'ns-resize',
+		e: 'ew-resize',
+		w: 'ew-resize',
+		ne: 'nesw-resize',
+		sw: 'nesw-resize',
+		nw: 'nwse-resize',
+		se: 'nwse-resize',
+		rotate: 'alias',
+		'line-start': 'crosshair',
+		'line-end': 'crosshair'
+	};
+
+	function refreshCursor() {
+		if (!canvas) {
+			return;
+		}
+		let cursor = 'default';
+		if (textEditor) {
+			cursor = 'text';
+		} else if (panState.isPanning) {
+			cursor = 'grabbing';
+		} else if (panState.spaceHeld) {
+			cursor = 'grab';
+		} else {
+			const activeHandle = handleState.active;
+			const hoverHandle = handleState.hover;
+			const targetHandle = activeHandle ?? hoverHandle;
+			if (targetHandle) {
+				cursor = handleCursorMap[targetHandle] ?? 'default';
+			} else if (pointerState.isPointerDown) {
+				cursor = 'grabbing';
+			}
+		}
+		canvas.style.cursor = cursor;
+	}
+
+	function setHandleHover(handle: string | null) {
+		if (handleState.hover === handle) {
+			return;
+		}
+		handleState.hover = handle;
+		refreshCursor();
+	}
+
+	function syncHandleState() {
+		handleState.active = selectTool.getActiveHandle ? selectTool.getActiveHandle() : null;
+		refreshCursor();
+	}
+
+	function getTextEditorLayout() {
+		if (!textEditor) {
+			return null;
+		}
+		const state = store.getState();
+		const shape = state.doc.shapes[textEditor.shapeId];
+		if (!shape || shape.type !== 'text') {
+			return null;
+		}
+		const viewport = getViewport();
+		const screenPos = Camera.worldToScreen(state.camera, { x: shape.x, y: shape.y }, viewport);
+		const widthWorld = shape.props.w ?? 240;
+		const zoom = state.camera.zoom;
+		return {
+			left: screenPos.x,
+			top: screenPos.y,
+			width: widthWorld * zoom,
+			height: shape.props.fontSize * 1.4 * zoom,
+			fontSize: shape.props.fontSize * zoom
+		};
+	}
+
+	function startTextEditing(shapeId: string) {
+		const state = store.getState();
+		const shape = state.doc.shapes[shapeId];
+		if (!shape || shape.type !== 'text') {
+			return;
+		}
+		textEditor = { shapeId, value: shape.props.text };
+		refreshCursor();
+		queueMicrotask(() => {
+			textEditorEl?.focus();
+			textEditorEl?.select();
+		});
+	}
+
+	function commitTextEditing() {
+		if (!textEditor) {
+			return;
+		}
+		const { shapeId, value } = textEditor;
+		const currentState = store.getState();
+		const shape = currentState.doc.shapes[shapeId];
+		textEditor = null;
+		refreshCursor();
+		if (!shape || shape.type !== 'text' || shape.props.text === value) {
+			return;
+		}
+		const before = EditorState.clone(currentState);
+		const updatedShape = { ...shape, props: { ...shape.props, text: value } };
+		const newShapes = { ...currentState.doc.shapes, [shapeId]: updatedShape };
+		const after = { ...currentState, doc: { ...currentState.doc, shapes: newShapes } };
+		const command = new SnapshotCommand('Edit text', 'doc', before, EditorState.clone(after));
+		store.executeCommand(command);
+	}
+
+	function cancelTextEditing() {
+		textEditor = null;
+		refreshCursor();
+	}
+
+	function handleCanvasDoubleClick(event: MouseEvent) {
+		if (!canvas) {
+			return;
+		}
+		const rect = canvas.getBoundingClientRect();
+		const screen = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+		const world = Camera.screenToWorld(store.getState().camera, screen, getViewport());
+		const shapeId = findTextShapeAt(world);
+		if (shapeId) {
+			startTextEditing(shapeId);
+		}
+	}
+
+	function findTextShapeAt(point: { x: number; y: number }): string | null {
+		const shapes = getShapesOnCurrentPage(store.getState());
+		for (let index = shapes.length - 1; index >= 0; index--) {
+			const shape = shapes[index];
+			if (!shape || shape.type !== 'text') {
+				continue;
+			}
+			const bounds = shapeBounds(shape);
+			if (
+				point.x >= bounds.min.x &&
+				point.x <= bounds.max.x &&
+				point.y >= bounds.min.y &&
+				point.y <= bounds.max.y
+			) {
+				return shape.id;
+			}
+		}
+		return null;
+	}
+
+	function handleTextEditorInput(event: Event) {
+		if (!textEditor) {
+			return;
+		}
+		const target = event.currentTarget as HTMLTextAreaElement;
+		textEditor = { ...textEditor, value: target.value };
+	}
+
+	function handleTextEditorKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelTextEditing();
+			return;
+		}
+		if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			commitTextEditing();
+		}
+	}
+
+	function handleTextEditorBlur() {
+		commitTextEditing();
+	}
+
+	function handlePointerLeave() {
+		setHandleHover(null);
 	}
 
 	const selectTool = new SelectTool();
···
 	const tools = createToolMap([selectTool, rectTool, ellipseTool, lineTool, arrowTool, textTool]);
 
 	let currentToolId = $state<ToolId>('select');
+	let editorSnapshot = $state(store.getState());
 	let historyViewerOpen = $state(false);
 
 	store.subscribe((state) => {
 		currentToolId = state.ui.toolId;
+		editorSnapshot = state;
 	});
 
 	function handleToolChange(toolId: ToolId) {
···
 
 		const command = new SnapshotCommand('Bring Forward', 'doc', before, EditorState.clone(after));
 		store.executeCommand(command);
+		syncHandleState();
 	}
 
 	function handleSendBackward() {
···
 
 		const command = new SnapshotCommand('Send Backward', 'doc', before, EditorState.clone(after));
 		store.executeCommand(command);
+		syncHandleState();
 	}
 
 	function handleDuplicate() {
···
 
 		const command = new SnapshotCommand('Duplicate', 'doc', before, EditorState.clone(after));
 		store.executeCommand(command);
+		syncHandleState();
 	}
 
 	function handleNudge(arrowKey: string, largeNudge: boolean) {
···
 		const after = { ...currentState, doc: { ...currentState.doc, shapes: newShapes } };
 		const command = new SnapshotCommand('Nudge', 'doc', before, EditorState.clone(after));
 		store.executeCommand(command);
+		syncHandleState();
 	}
 
 	function applyActionWithHistory(action: Action) {
 		const before = store.getState();
 		const nextState = routeAction(before, action, tools);
 		if (statesEqual(before, nextState)) {
+			syncHandleState();
 			return;
 		}
 
···
 			EditorState.clone(nextState)
 		);
 		store.executeCommand(command);
+		syncHandleState();
 	}
 
 	function handleAction(action: Action) {
+		if (textEditor && (action.type === 'pointer-down' || action.type === 'pointer-up')) {
+			commitTextEditing();
+		}
+
+		if (
+			action.type === 'pointer-move' &&
+			'world' in action &&
+			!panState.isPanning &&
+			!panState.spaceHeld
+		) {
+			const hover = selectTool.getHandleAtPoint(store.getState(), action.world);
+			setHandleHover(hover);
+		}
+
+		if (action.type === 'pointer-move' && (panState.isPanning || panState.spaceHeld)) {
+			setHandleHover(null);
+		}
+
 		if (action.type === 'key-down' && action.key === ' ') {
 			panState.spaceHeld = true;
+			setHandleHover(null);
+			refreshCursor();
 			return;
 		}
 
 		if (action.type === 'key-up' && action.key === ' ') {
 			panState.spaceHeld = false;
 			panState.isPanning = false;
+			refreshCursor();
 			return;
 		}
 
 		if (action.type === 'pointer-down' && action.button === 0 && panState.spaceHeld) {
 			panState.isPanning = true;
 			panState.lastScreen = { x: action.screen.x, y: action.screen.y };
+			refreshCursor();
 			return;
 		}
 
···
 			const newCamera = Camera.pan(currentCamera, { x: deltaX, y: deltaY });
 			store.setState((state) => ({ ...state, camera: newCamera }));
 			panState.lastScreen = { x: action.screen.x, y: action.screen.y };
+			refreshCursor();
 			return;
 		}
 
 		if (action.type === 'pointer-up' && action.button === 0 && panState.isPanning) {
 			panState.isPanning = false;
+			refreshCursor();
 			return;
 		}
 
···
 		}
 
 		const actionWithSnap = applySnapping(action);
+		if ('world' in actionWithSnap) {
+			pointerState.snappedWorld = actionWithSnap.world ?? null;
+		}
 
 		if (actionWithSnap.type === 'pointer-down' && actionWithSnap.button === 0) {
 			pointerState.isPointerDown = true;
+			setHandleHover(null);
+			refreshCursor();
 			pendingCommandStart = EditorState.clone(store.getState());
 			const changed = applyImmediateAction(actionWithSnap);
 			if (!changed) {
···
 
 		if (actionWithSnap.type === 'pointer-up' && actionWithSnap.button === 0) {
 			pointerState.isPointerDown = false;
+			setHandleHover(null);
+			refreshCursor();
 			if (pendingCommandStart) {
 				const committed = commitPendingCommand(actionWithSnap, pendingCommandStart);
 				pendingCommandStart = null;
···
 					return;
 				}
 			}
+			pointerState.snappedWorld = null;
 		}
 
 		if (actionWithSnap.type === 'key-down') {
···
 		const before = store.getState();
 		const nextState = routeAction(before, action, tools);
 		if (statesEqual(before, nextState)) {
+			syncHandleState();
 			return false;
 		}
 		store.setState(() => nextState);
+		syncHandleState();
 		return true;
 	}
 
···
 		const nextState = routeAction(before, action, tools);
 		const finalState = statesEqual(before, nextState) ? before : nextState;
 		if (statesEqual(startState, finalState)) {
+			syncHandleState();
 			return false;
 		}
 		const kind = getCommandKind(startState, finalState);
···
 			EditorState.clone(finalState)
 		);
 		store.executeCommand(command);
+		syncHandleState();
 		return true;
 	}
 
···
 		renderer = createRenderer(canvas!, store, {
 			snapProvider,
 			cursorProvider,
-			pointerStateProvider
+			pointerStateProvider,
+			handleProvider
 		});
 		inputAdapter = createInputAdapter({
 			canvas: canvas!,
···
 		{store}
 		{getViewport}
 		{canvas} />
-	<canvas bind:this={canvas}></canvas>
+	<div class="canvas-container">
+		<canvas
+			bind:this={canvas}
+			ondblclick={handleCanvasDoubleClick}
+			onpointerleave={handlePointerLeave}></canvas>
+		{#if textEditor}
+			{@const layout = getTextEditorLayout()}
+			{#if layout}
+				<textarea
+					bind:this={textEditorEl}
+					class="canvas-text-editor"
+					style={`left:${layout.left}px;top:${layout.top}px;width:${layout.width}px;height:${layout.height}px;font-size:${layout.fontSize}px;`}
+					value={textEditor.value}
+					oninput={handleTextEditorInput}
+					onkeydown={handleTextEditorKeyDown}
+					onblur={handleTextEditorBlur}
+					spellcheck="false"></textarea>
+			{/if}
+		{/if}
+	</div>
 	<HistoryViewer {store} bind:open={historyViewerOpen} onClose={handleHistoryClose} />
 	<StatusBar {store} cursor={cursorStore} persistence={persistenceStatusStore} snap={snapStore} />
 </div>
···
 		flex-direction: column;
 	}
 
-	canvas {
+	.canvas-container {
 		flex: 1;
 		min-height: 0;
+		position: relative;
+	}
+
+	.canvas-container canvas {
+		width: 100%;
+		height: 100%;
 		display: block;
 		touch-action: none;
 		cursor: default;
+	}
+
+	.canvas-text-editor {
+		position: absolute;
+		border: 1px solid var(--accent);
+		background: var(--surface);
+		color: var(--text);
+		padding: 4px;
+		transform-origin: top left;
+		resize: none;
+		outline: none;
+		line-height: 1.2;
+		font-family: inherit;
+		z-index: 2;
+		box-shadow:
+			0 0 0 1px rgba(0, 0, 0, 0.05),
+			0 8px 20px rgba(0, 0, 0, 0.15);
 	}
 </style>

apps/web/src/lib/components/Toolbar.svelte

···
 <script lang="ts">
-	import type { Box2, EditorState, Store, ToolId } from 'inkfinite-core';
+	import type {
+		ArrowShape,
+		Box2,
+		EditorState as EditorStateType,
+		EllipseShape,
+		LineShape,
+		RectShape,
+		ShapeRecord,
+		Store,
+		TextShape,
+		ToolId
+	} from 'inkfinite-core';
 	import {
+		EditorState,
 		exportToSVG,
 		exportViewportToPNG,
 		getSelectedShapes,
 		getShapesOnCurrentPage,
-		shapeBounds
+		shapeBounds,
+		SnapshotCommand
 	} from 'inkfinite-core';
 
 	type Viewport = { width: number; height: number };
···
 
 	let { currentTool, onToolChange, onHistoryClick, store, getViewport, canvas }: Props = $props();
 
-	let editorState = $derived<EditorState>(store.getState());
+	const DEFAULT_FILL_COLOR = '#4a90e2';
+	const DEFAULT_STROKE_COLOR = '#2e5c8a';
+
+	let editorState = $derived<EditorStateType>(store.getState());
 	let zoomMenuOpen = $state(false);
 	let zoomMenuEl = $state<HTMLDivElement | null>(null);
 	let zoomButtonEl = $state<HTMLButtonElement | null>(null);
···
 	let exportMenuEl = $state<HTMLDivElement | null>(null);
 	let exportButtonEl = $state<HTMLButtonElement | null>(null);
 
+	let fillColorValue = $state(DEFAULT_FILL_COLOR);
+	let strokeColorValue = $state(DEFAULT_STROKE_COLOR);
+	let fillDisabled = $state(true);
+	let strokeDisabled = $state(true);
+
 	$effect(() => {
 		editorState = store.getState();
 		const unsubscribe = store.subscribe((state) => {
 			editorState = state;
 		});
 		return () => unsubscribe();
+	});
+
+	$effect(() => {
+		const selection = getSelectedShapes(editorState);
+		const fillable = selection.filter(shapeSupportsFill);
+		const strokable = selection.filter(shapeSupportsStroke);
+		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.props.stroke ?? null);
+			if (shared) {
+				strokeColorValue = shared;
+			}
+		}
 	});
 
 	$effect(() => {
···
 		const blob = new Blob([text], { type: 'text/plain' });
 		downloadBlob(blob, filename);
 	}
+
+	function shapeSupportsFill(shape: ShapeRecord): shape is RectShape | EllipseShape | TextShape {
+		return shape.type === 'rect' || shape.type === 'ellipse' || shape.type === 'text';
+	}
+
+	function shapeSupportsStroke(
+		shape: ShapeRecord
+	): shape is RectShape | EllipseShape | LineShape | ArrowShape {
+		return (
+			shape.type === 'rect' ||
+			shape.type === 'ellipse' ||
+			shape.type === 'line' ||
+			shape.type === 'arrow'
+		);
+	}
+
+	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 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) {
+			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;
+			}
+		}
+		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, 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(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		fillColorValue = input.value;
+		applyFillColor(input.value);
+	}
+
+	function handleStrokeChange(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		strokeColorValue = input.value;
+		applyStrokeColor(input.value);
+	}
 </script>
 
 <div class="toolbar" role="toolbar" aria-label="Drawing tools">
···
 			<span class="toolbar__tool-label">{tool.label}</span>
 		</button>
 	{/each}
+
+	<div class="toolbar__colors" aria-label="Color controls">
+		<label class="toolbar__color-control">
+			<span>Fill</span>
+			<input
+				type="color"
+				value={fillColorValue}
+				onchange={handleFillChange}
+				disabled={fillDisabled}
+				aria-label="Fill color" />
+		</label>
+		<label class="toolbar__color-control">
+			<span>Stroke</span>
+			<input
+				type="color"
+				value={strokeColorValue}
+				onchange={handleStrokeChange}
+				disabled={strokeDisabled}
+				aria-label="Stroke color" />
+		</label>
+	</div>
 
 	<div class="toolbar__divider"></div>
 
···
 		background-color: var(--border);
 		margin: 0 8px;
 		height: 40px;
+	}
+
+	.toolbar__colors {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+	}
+
+	.toolbar__color-control {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		font-size: 11px;
+		color: var(--text-muted);
+	}
+
+	.toolbar__color-control input[type='color'] {
+		width: 40px;
+		height: 30px;
+		border: 1px solid var(--border);
+		border-radius: 6px;
+		padding: 0;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	.toolbar__color-control input[type='color']:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
 	}
 
 	.toolbar__zoom,

apps/web/src/lib/tests/Canvas.history.test.ts

···
     onAction(state: any) {
       return state;
     }
+    getHandleAtPoint() {
+      return null;
+    }
+    getActiveHandle() {
+      return null;
+    }
   }
 
   class MockStore {

apps/web/src/lib/tests/Toolbar.accessibility.test.ts

···
+import { Store } from "inkfinite-core";
 import { beforeEach, describe, expect, it } from "vitest";
 import { cleanup, render } from "vitest-browser-svelte";
 import Toolbar from "../components/Toolbar.svelte";
-import { Store } from "inkfinite-core";
 
 describe("Toolbar accessibility", () => {
-	beforeEach(() => {
-		cleanup();
-	});
+  beforeEach(() => {
+    cleanup();
+  });
 
-	it("should have proper ARIA labels on tool buttons", () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should have proper ARIA labels on tool buttons", () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const selectButton = container.querySelector('[data-tool-id="select"]');
-		expect(selectButton?.getAttribute("aria-label")).toBe("Select");
-		expect(selectButton?.getAttribute("aria-pressed")).toBe("true");
+    const selectButton = container.querySelector("[data-tool-id=\"select\"]");
+    expect(selectButton?.getAttribute("aria-label")).toBe("Select");
+    expect(selectButton?.getAttribute("aria-pressed")).toBe("true");
 
-		const rectButton = container.querySelector('[data-tool-id="rect"]');
-		expect(rectButton?.getAttribute("aria-label")).toBe("Rectangle");
-		expect(rectButton?.getAttribute("aria-pressed")).toBe("false");
-	});
+    const rectButton = container.querySelector("[data-tool-id=\"rect\"]");
+    expect(rectButton?.getAttribute("aria-label")).toBe("Rectangle");
+    expect(rectButton?.getAttribute("aria-pressed")).toBe("false");
+  });
 
-	it("should have ARIA attributes on zoom button", () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should have ARIA attributes on zoom button", () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const zoomButton = container.querySelector(".toolbar__zoom-button");
-		expect(zoomButton?.getAttribute("aria-label")).toBe("Zoom level");
-		expect(zoomButton?.getAttribute("aria-haspopup")).toBe("true");
-		expect(zoomButton?.getAttribute("aria-expanded")).toBe("false");
-	});
+    const zoomButton = container.querySelector(".toolbar__zoom-button");
+    expect(zoomButton?.getAttribute("aria-label")).toBe("Zoom level");
+    expect(zoomButton?.getAttribute("aria-haspopup")).toBe("true");
+    expect(zoomButton?.getAttribute("aria-expanded")).toBe("false");
+  });
 
-	it("should have proper menu roles when zoom menu is open", async () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should have proper menu roles when zoom menu is open", async () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const zoomButton = container.querySelector(".toolbar__zoom-button") as HTMLButtonElement;
-		zoomButton.click();
+    const zoomButton = container.querySelector(".toolbar__zoom-button") as HTMLButtonElement;
+    zoomButton.click();
 
-		await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
-		const zoomMenu = container.querySelector(".toolbar__zoom-menu");
-		expect(zoomMenu?.getAttribute("role")).toBe("menu");
-		expect(zoomMenu?.getAttribute("aria-label")).toBe("Zoom options");
+    const zoomMenu = container.querySelector(".toolbar__zoom-menu");
+    expect(zoomMenu?.getAttribute("role")).toBe("menu");
+    expect(zoomMenu?.getAttribute("aria-label")).toBe("Zoom options");
 
-		const menuItems = container.querySelectorAll(".toolbar__zoom-menu .toolbar__menu-item");
-		menuItems.forEach((item) => {
-			expect(item.getAttribute("role")).toBe("menuitem");
-			expect(item.getAttribute("aria-label")).toBeTruthy();
-		});
-	});
+    const menuItems = container.querySelectorAll(".toolbar__zoom-menu .toolbar__menu-item");
+    menuItems.forEach((item) => {
+      expect(item.getAttribute("role")).toBe("menuitem");
+      expect(item.getAttribute("aria-label")).toBeTruthy();
+    });
+  });
 
-	it("should have ARIA attributes on export button", () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should have ARIA attributes on export button", () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const exportButton = container.querySelector(".toolbar__export-button");
-		expect(exportButton?.getAttribute("aria-label")).toBe("Export drawing");
-		expect(exportButton?.getAttribute("aria-haspopup")).toBe("true");
-		expect(exportButton?.getAttribute("aria-expanded")).toBe("false");
-	});
+    const exportButton = container.querySelector(".toolbar__export-button");
+    expect(exportButton?.getAttribute("aria-label")).toBe("Export drawing");
+    expect(exportButton?.getAttribute("aria-haspopup")).toBe("true");
+    expect(exportButton?.getAttribute("aria-expanded")).toBe("false");
+  });
 
-	it("should have proper menu roles when export menu is open", async () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should have proper menu roles when export menu is open", async () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const exportButton = container.querySelector(".toolbar__export-button") as HTMLButtonElement;
-		exportButton.click();
+    const exportButton = container.querySelector(".toolbar__export-button") as HTMLButtonElement;
+    exportButton.click();
 
-		await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
-		const exportMenu = container.querySelector(".toolbar__export-menu");
-		expect(exportMenu?.getAttribute("role")).toBe("menu");
-		expect(exportMenu?.getAttribute("aria-label")).toBe("Export options");
+    const exportMenu = container.querySelector(".toolbar__export-menu");
+    expect(exportMenu?.getAttribute("role")).toBe("menu");
+    expect(exportMenu?.getAttribute("aria-label")).toBe("Export options");
 
-		const menuItems = container.querySelectorAll(".toolbar__export-menu .toolbar__menu-item");
-		expect(menuItems.length).toBe(3);
-		menuItems.forEach((item) => {
-			expect(item.getAttribute("role")).toBe("menuitem");
-			expect(item.getAttribute("aria-label")).toBeTruthy();
-		});
-	});
+    const menuItems = container.querySelectorAll(".toolbar__export-menu .toolbar__menu-item");
+    expect(menuItems.length).toBe(3);
+    menuItems.forEach((item) => {
+      expect(item.getAttribute("role")).toBe("menuitem");
+      expect(item.getAttribute("aria-label")).toBeTruthy();
+    });
+  });
 
-	it("should have visible focus states on buttons", () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should have visible focus states on buttons", () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const selectButton = container.querySelector(".toolbar__tool-button") as HTMLElement;
-		selectButton.focus();
+    const selectButton = container.querySelector(".toolbar__tool-button") as HTMLElement;
+    selectButton.focus();
 
-		const style = window.getComputedStyle(selectButton);
-		// Focus styles are defined in CSS, just verify the button can receive focus
-		expect(document.activeElement).toBe(selectButton);
-	});
+    expect(document.activeElement).toBe(selectButton);
+  });
 
-	it("should update aria-expanded when menus are toggled", async () => {
-		const store = new Store();
-		const { container } = render(Toolbar, {
-			props: {
-				currentTool: "select",
-				onToolChange: () => {},
-				store,
-				getViewport: () => ({ width: 800, height: 600 }),
-			},
-		});
+  it("should update aria-expanded when menus are toggled", async () => {
+    const store = new Store();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
 
-		const zoomButton = container.querySelector(".toolbar__zoom-button") as HTMLButtonElement;
+    const zoomButton = container.querySelector(".toolbar__zoom-button") as HTMLButtonElement;
 
-		expect(zoomButton.getAttribute("aria-expanded")).toBe("false");
+    expect(zoomButton.getAttribute("aria-expanded")).toBe("false");
 
-		zoomButton.click();
-		await new Promise((resolve) => setTimeout(resolve, 0));
+    zoomButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
-		expect(zoomButton.getAttribute("aria-expanded")).toBe("true");
+    expect(zoomButton.getAttribute("aria-expanded")).toBe("true");
 
-		zoomButton.click();
-		await new Promise((resolve) => setTimeout(resolve, 0));
+    zoomButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
-		expect(zoomButton.getAttribute("aria-expanded")).toBe("false");
-	});
+    expect(zoomButton.getAttribute("aria-expanded")).toBe("false");
+  });
 });

apps/web/src/lib/tests/Toolbar.colors.test.ts

···
+import { EditorState, ShapeRecord, Store } from "inkfinite-core";
+import { beforeEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "vitest-browser-svelte";
+import Toolbar from "../components/Toolbar.svelte";
+
+function createStoreWithRect() {
+  const store = new Store();
+  const base = EditorState.create();
+  const pageId = "page:rect";
+  const rect = ShapeRecord.createRect(
+    pageId,
+    0,
+    0,
+    { w: 100, h: 50, fill: "#4a90e2", stroke: "#2e5c8a", radius: 4 },
+    "shape:rect",
+  );
+  store.setState(() => ({
+    doc: {
+      pages: { [pageId]: { id: pageId, name: "Page", shapeIds: [rect.id] } },
+      shapes: { [rect.id]: rect },
+      bindings: {},
+    },
+    ui: { currentPageId: pageId, selectionIds: [rect.id], toolId: "select" },
+    camera: base.camera,
+  }));
+  return store;
+}
+
+function createStoreWithLine() {
+  const store = new Store();
+  const base = EditorState.create();
+  const pageId = "page:line";
+  const line = ShapeRecord.createLine(pageId, 0, 0, {
+    a: { x: 0, y: 0 },
+    b: { x: 50, y: 0 },
+    stroke: "#495057",
+    width: 2,
+  }, "shape:line");
+  store.setState(() => ({
+    doc: {
+      pages: { [pageId]: { id: pageId, name: "Page", shapeIds: [line.id] } },
+      shapes: { [line.id]: line },
+      bindings: {},
+    },
+    ui: { currentPageId: pageId, selectionIds: [line.id], toolId: "select" },
+    camera: base.camera,
+  }));
+  return store;
+}
+
+describe("Toolbar color controls", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("updates fill color for selected shapes", () => {
+    const store = createStoreWithRect();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
+
+    const input = container.querySelector("input[aria-label=\"Fill color\"]") as HTMLInputElement | null;
+    expect(input).toBeTruthy();
+    if (!input) return;
+    input.value = "#ff3366";
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+
+    const updated = store.getState().doc.shapes["shape:rect"];
+    expect(updated?.type).toBe("rect");
+    if (updated?.type !== "rect") {
+      throw new Error("Expected rect shape");
+    }
+    expect(updated.props.fill).toBe("#ff3366");
+  });
+
+  it("updates stroke color for selectable shapes", () => {
+    const store = createStoreWithRect();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
+
+    const input = container.querySelector("input[aria-label=\"Stroke color\"]") as HTMLInputElement | null;
+    expect(input).toBeTruthy();
+    if (!input) return;
+    input.value = "#222299";
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+
+    const updated = store.getState().doc.shapes["shape:rect"];
+    expect(updated?.type).toBe("rect");
+    if (updated?.type !== "rect") {
+      throw new Error("Expected rect shape");
+    }
+    expect(updated.props.stroke).toBe("#222299");
+  });
+
+  it("disables fill control when selection has no fillable shapes", () => {
+    const store = createStoreWithLine();
+    const { container } = render(Toolbar, {
+      target: document.body,
+      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    });
+
+    const fillInput = container.querySelector("input[aria-label=\"Fill color\"]") as HTMLInputElement | null;
+    const strokeInput = container.querySelector("input[aria-label=\"Stroke color\"]") as HTMLInputElement | null;
+    expect(fillInput).toBeTruthy();
+    expect(strokeInput).toBeTruthy();
+    if (!fillInput || !strokeInput) return;
+
+    expect(fillInput.disabled).toBe(true);
+    expect(strokeInput.disabled).toBe(false);
+  });
+});

packages/core/src/tools.ts

···
 import type { Action } from "./actions";
 import { hitTestPoint, shapeBounds } from "./geom";
-import { Box2, Vec2 } from "./math";
+import { Box2, Vec2, Vec2 as Vec2Ops } from "./math";
 import { BindingRecord, createId, ShapeRecord } from "./model";
 import type { EditorState, ToolId } from "./reactivity";
 import { getCurrentPage } from "./reactivity";
···
   marqueeStart: Vec2 | null;
   /** Marquee selection end point in world coordinates */
   marqueeEnd: Vec2 | null;
+  /** Active resize/rotate handle identifier */
+  activeHandle: HandleKind | null;
+  /** Shape being manipulated by handle */
+  handleShapeId: string | null;
+  /** Bounds snapshot at the time handle drag started */
+  handleStartBounds: Box2 | null;
+  /** Initial shapes snapshot for handle drags */
+  handleInitialShapes: Map<string, ShapeRecord>;
+  /** Rotation pivot in world coordinates */
+  rotationCenter: Vec2 | null;
+  /** Starting angle for rotation handle */
+  rotationStartAngle: number | null;
 };
 
+type RectHandle = "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w";
+
+type HandleKind = RectHandle | "rotate" | "line-start" | "line-end";
+
+const HANDLE_HIT_RADIUS = 10;
+const ROTATE_HANDLE_OFFSET = 40;
+const MIN_RESIZE_SIZE = 5;
+
 /**
  * Select tool - allows selecting and moving shapes
  *
···
       initialShapePositions: new Map(),
       marqueeStart: null,
       marqueeEnd: null,
+      activeHandle: null,
+      handleShapeId: null,
+      handleStartBounds: null,
+      handleInitialShapes: new Map(),
+      rotationCenter: null,
+      rotationStartAngle: null,
     };
   }
 
···
    */
   private handlePointerDown(state: EditorState, action: Action): EditorState {
     if (action.type !== "pointer-down") return state;
+
+    const handleHit = this.hitTestHandle(state, action.world);
+    if (handleHit) {
+      return this.beginHandleDrag(state, handleHit.shape, handleHit.handle, action.world);
+    }
 
     const hitShapeId = hitTestPoint(state, action.world);
 
     return hitShapeId ? this.handleShapeClick(state, hitShapeId, action) : this.handleEmptyClick(state, action);
   }
 
+  private hitTestHandle(state: EditorState, point: Vec2): { handle: HandleKind; shape: ShapeRecord } | null {
+    if (state.ui.selectionIds.length !== 1) {
+      return null;
+    }
+    const shapeId = state.ui.selectionIds[0];
+    const shape = state.doc.shapes[shapeId];
+    if (!shape) {
+      return null;
+    }
+    const handles = this.getHandlePositions(shape);
+    for (const handle of handles) {
+      if (Vec2Ops.dist(point, handle.position) <= HANDLE_HIT_RADIUS) {
+        return { handle: handle.id, shape };
+      }
+    }
+    return null;
+  }
+
+  private beginHandleDrag(state: EditorState, shape: ShapeRecord, handle: HandleKind, point: Vec2): EditorState {
+    this.toolState.activeHandle = handle;
+    this.toolState.handleShapeId = shape.id;
+    this.toolState.handleStartBounds = shapeBounds(shape);
+    this.toolState.handleInitialShapes.clear();
+    this.toolState.handleInitialShapes.set(shape.id, ShapeRecord.clone(shape));
+    this.toolState.isDragging = false;
+    this.toolState.dragStartWorld = point;
+    const bounds = this.toolState.handleStartBounds;
+    this.toolState.rotationCenter = bounds
+      ? { x: (bounds.min.x + bounds.max.x) / 2, y: (bounds.min.y + bounds.max.y) / 2 }
+      : null;
+    this.toolState.rotationStartAngle = this.toolState.rotationCenter
+      ? Math.atan2(point.y - this.toolState.rotationCenter.y, point.x - this.toolState.rotationCenter.x)
+      : null;
+    return state;
+  }
+
   /**
    * Handle clicking on a shape
    */
···
   private handlePointerMove(state: EditorState, action: Action): EditorState {
     if (action.type !== "pointer-move") return state;
 
+    if (this.toolState.activeHandle && this.toolState.handleShapeId) {
+      return this.handleHandleDrag(state, action);
+    }
+
     if (this.toolState.isDragging && this.toolState.dragStartWorld) {
       return this.handleDragMove(state, action);
     } else if (this.toolState.marqueeStart) {
···
     return state;
   }
 
+  private handleHandleDrag(state: EditorState, action: Action): EditorState {
+    if (action.type !== "pointer-move" || !this.toolState.handleShapeId || !this.toolState.activeHandle) {
+      return state;
+    }
+    const shapeId = this.toolState.handleShapeId;
+    const currentShape = state.doc.shapes[shapeId];
+    const initialShape = this.toolState.handleInitialShapes.get(shapeId);
+    if (!currentShape || !initialShape) {
+      return state;
+    }
+
+    let updated: ShapeRecord | null = null;
+    if (this.toolState.activeHandle === "rotate") {
+      updated = this.rotateShape(initialShape, action.world);
+    } else if (this.toolState.activeHandle === "line-start" || this.toolState.activeHandle === "line-end") {
+      updated = this.resizeLineShape(initialShape, action.world, this.toolState.activeHandle);
+    } else if (this.toolState.handleStartBounds) {
+      updated = this.resizeRectLikeShape(
+        initialShape,
+        this.toolState.handleStartBounds,
+        action.world,
+        this.toolState.activeHandle,
+      );
+    }
+
+    if (!updated) {
+      return state;
+    }
+
+    return { ...state, doc: { ...state.doc, shapes: { ...state.doc.shapes, [shapeId]: updated } } };
+  }
+
   /**
    * Handle dragging selected shapes
    */
···
       newState = this.completeMarqueeSelection(state);
     }
 
+    this.toolState.activeHandle = null;
+    this.toolState.handleShapeId = null;
+    this.toolState.handleStartBounds = null;
+    this.toolState.handleInitialShapes.clear();
+    this.toolState.rotationCenter = null;
+    this.toolState.rotationStartAngle = null;
     this.toolState.isDragging = false;
     this.toolState.dragStartWorld = null;
     this.toolState.initialShapePositions.clear();
···
       initialShapePositions: new Map(),
       marqueeStart: null,
       marqueeEnd: null,
+      activeHandle: null,
+      handleShapeId: null,
+      handleStartBounds: null,
+      handleInitialShapes: new Map(),
+      rotationCenter: null,
+      rotationStartAngle: null,
     };
   }
 
···
   getMarqueeBounds(): Box2 | null {
     if (!this.toolState.marqueeStart || !this.toolState.marqueeEnd) return null;
     return Box2.fromPoints([this.toolState.marqueeStart, this.toolState.marqueeEnd]);
+  }
+
+  getHandleAtPoint(state: EditorState, point: Vec2): HandleKind | null {
+    const hit = this.hitTestHandle(state, point);
+    return hit?.handle ?? null;
+  }
+
+  getActiveHandle(): HandleKind | null {
+    return this.toolState.activeHandle;
+  }
+
+  private getHandlePositions(shape: ShapeRecord): Array<{ id: HandleKind; position: Vec2 }> {
+    const handles: Array<{ id: HandleKind; position: Vec2 }> = [];
+    if (shape.type === "rect" || shape.type === "ellipse" || shape.type === "text") {
+      const bounds = shapeBounds(shape);
+      const minX = bounds.min.x;
+      const maxX = bounds.max.x;
+      const minY = bounds.min.y;
+      const maxY = bounds.max.y;
+      const centerX = (minX + maxX) / 2;
+      const centerY = (minY + maxY) / 2;
+      handles.push(
+        { id: "nw", position: { x: minX, y: minY } },
+        { id: "n", position: { x: centerX, y: minY } },
+        { id: "ne", position: { x: maxX, y: minY } },
+        { id: "e", position: { x: maxX, y: centerY } },
+        { id: "se", position: { x: maxX, y: maxY } },
+        { id: "s", position: { x: centerX, y: maxY } },
+        { id: "sw", position: { x: minX, y: maxY } },
+        { id: "w", position: { x: minX, y: centerY } },
+        { id: "rotate", position: { x: centerX, y: minY - ROTATE_HANDLE_OFFSET } },
+      );
+    } else if (shape.type === "line" || shape.type === "arrow") {
+      const start = this.localToWorld(shape, shape.props.a);
+      const end = this.localToWorld(shape, shape.props.b);
+      handles.push({ id: "line-start", position: start }, { id: "line-end", position: end });
+    }
+    return handles;
+  }
+
+  private resizeRectLikeShape(
+    initial: ShapeRecord,
+    bounds: Box2,
+    pointer: Vec2,
+    handle: HandleKind,
+  ): ShapeRecord | null {
+    if (initial.type !== "rect" && initial.type !== "ellipse" && initial.type !== "text") {
+      return null;
+    }
+    let minX = bounds.min.x;
+    let maxX = bounds.max.x;
+    let minY = bounds.min.y;
+    let maxY = bounds.max.y;
+
+    const clampX = (value: number) => Math.min(Math.max(value, -1e6), 1e6);
+    const clampY = (value: number) => Math.min(Math.max(value, -1e6), 1e6);
+
+    switch (handle) {
+      case "nw": {
+        minX = Math.min(clampX(pointer.x), maxX - MIN_RESIZE_SIZE);
+        minY = Math.min(clampY(pointer.y), maxY - MIN_RESIZE_SIZE);
+        break;
+      }
+      case "n": {
+        minY = Math.min(clampY(pointer.y), maxY - MIN_RESIZE_SIZE);
+        break;
+      }
+      case "ne": {
+        maxX = Math.max(clampX(pointer.x), minX + MIN_RESIZE_SIZE);
+        minY = Math.min(clampY(pointer.y), maxY - MIN_RESIZE_SIZE);
+        break;
+      }
+      case "e": {
+        maxX = Math.max(clampX(pointer.x), minX + MIN_RESIZE_SIZE);
+        break;
+      }
+      case "se": {
+        maxX = Math.max(clampX(pointer.x), minX + MIN_RESIZE_SIZE);
+        maxY = Math.max(clampY(pointer.y), minY + MIN_RESIZE_SIZE);
+        break;
+      }
+      case "s": {
+        maxY = Math.max(clampY(pointer.y), minY + MIN_RESIZE_SIZE);
+        break;
+      }
+      case "sw": {
+        minX = Math.min(clampX(pointer.x), maxX - MIN_RESIZE_SIZE);
+        maxY = Math.max(clampY(pointer.y), minY + MIN_RESIZE_SIZE);
+        break;
+      }
+      case "w": {
+        minX = Math.min(clampX(pointer.x), maxX - MIN_RESIZE_SIZE);
+        break;
+      }
+    }
+
+    const width = Math.max(maxX - minX, MIN_RESIZE_SIZE);
+    const height = Math.max(maxY - minY, MIN_RESIZE_SIZE);
+
+    if (initial.type === "text") {
+      return { ...initial, x: minX, y: minY, props: { ...initial.props, w: width } };
+    }
+
+    // @ts-expect-error union mismatch
+    return { ...initial, x: minX, y: minY, props: { ...initial.props, w: width, h: height } };
+  }
+
+  private resizeLineShape(initial: ShapeRecord, pointer: Vec2, handle: "line-start" | "line-end"): ShapeRecord | null {
+    if (initial.type !== "line" && initial.type !== "arrow") {
+      return null;
+    }
+    const startWorld = this.localToWorld(initial, initial.props.a);
+    const endWorld = this.localToWorld(initial, initial.props.b);
+    const newStart = handle === "line-start" ? pointer : startWorld;
+    const newEnd = handle === "line-end" ? pointer : endWorld;
+    const newProps = { ...initial.props, a: { x: 0, y: 0 }, b: { x: newEnd.x - newStart.x, y: newEnd.y - newStart.y } };
+    return { ...initial, x: newStart.x, y: newStart.y, props: newProps };
+  }
+
+  private rotateShape(initial: ShapeRecord, pointer: Vec2): ShapeRecord | null {
+    if (!this.toolState.rotationCenter || this.toolState.rotationStartAngle === null) {
+      return null;
+    }
+    if (initial.type !== "rect" && initial.type !== "ellipse" && initial.type !== "text") {
+      return null;
+    }
+    const currentAngle = Math.atan2(
+      pointer.y - this.toolState.rotationCenter.y,
+      pointer.x - this.toolState.rotationCenter.x,
+    );
+    const delta = currentAngle - this.toolState.rotationStartAngle;
+    return { ...initial, rot: initial.rot + delta };
+  }
+
+  private localToWorld(shape: ShapeRecord, point: Vec2): Vec2 {
+    if (shape.rot === 0) {
+      return { x: shape.x + point.x, y: shape.y + point.y };
+    }
+    const cos = Math.cos(shape.rot);
+    const sin = Math.sin(shape.rot);
+    return { x: shape.x + point.x * cos - point.y * sin, y: shape.y + point.x * sin + point.y * cos };
   }
 }
 
···
       text: "Text",
       fontSize: 16,
       fontFamily: "sans-serif",
-      color: "#000000",
+      color: "#1f2933",
     }, shapeId);
 
     const newPage = { ...currentPage, shapeIds: [...currentPage.shapeIds, shapeId] };

packages/core/tests/tools.test.ts

···
 import { describe, expect, it } from "vitest";
 import { Action, Modifiers, PointerButtons } from "../src/actions";
 import { Vec2 } from "../src/math";
+import type { TextProps } from "../src/model";
 import { EditorState } from "../src/reactivity";
 import type { Tool } from "../src/tools";
-import { createToolMap, routeAction, switchTool } from "../src/tools";
+import { createToolMap, routeAction, switchTool, TextTool } from "../src/tools";
 
 describe("Tools", () => {
   describe("Tool interface", () => {
···
         "rect:exit",
         "select:enter",
       ]);
+    });
+  });
+
+  describe("TextTool", () => {
+    it("uses a readable default color", () => {
+      const tool = new TextTool();
+      const state = EditorState.create();
+      const pageId = "page:default";
+      const withPage = {
+        ...state,
+        doc: { ...state.doc, pages: { [pageId]: { id: pageId, name: "Page", shapeIds: [] } } },
+        ui: { ...state.ui, currentPageId: pageId },
+      };
+
+      const action = Action.pointerDown(
+        Vec2.create(0, 0),
+        Vec2.create(100, 200),
+        0,
+        PointerButtons.create(true, false, false),
+        Modifiers.create(),
+      );
+      const nextState = tool.onAction(withPage, action);
+      const shapeId = nextState.ui.selectionIds[0];
+      const createdShape = shapeId ? nextState.doc.shapes[shapeId] : null;
+
+      expect(createdShape?.type).toBe("text");
+      expect((createdShape?.props as TextProps).color).toBe("#1f2933");
     });
   });
 });

packages/renderer/src/index.ts

···
   ShapeRecord,
   Store,
   TextShape,
+  Vec2,
   Viewport,
 } from "inkfinite-core";
-import { getShapesOnCurrentPage, resolveArrowEndpoints } from "inkfinite-core";
+import { getShapesOnCurrentPage, resolveArrowEndpoints, shapeBounds } from "inkfinite-core";
 
 export interface Renderer {
   /**
···
 
 export type SnapSettings = { snapEnabled: boolean; gridEnabled: boolean; gridSize: number };
 
+export type PointerVisualState = { isPointerDown: boolean; snappedWorld?: Vec2 | null };
+
+export type HandleRenderState = { hover: string | null; active: string | null } | null | undefined;
+
 export type RendererOptions = {
   snapProvider?: { get(): SnapSettings };
   cursorProvider?: { get(): CursorState };
-  pointerStateProvider?: { get(): { isPointerDown: boolean } };
+  pointerStateProvider?: { get(): PointerVisualState };
+  handleProvider?: { get(): HandleRenderState };
 };
 
 /**
···
     const snapSettings = options?.snapProvider?.get();
     const cursorState = options?.cursorProvider?.get();
     const pointerState = options?.pointerStateProvider?.get();
-    drawScene(context, state, viewport, snapSettings, cursorState, pointerState);
+    const handleState = options?.handleProvider?.get();
+    drawScene(context, state, viewport, snapSettings, cursorState, pointerState, handleState);
   }
 
   /**
···
   viewport: Viewport,
   snapSettings?: SnapSettings,
   cursorState?: CursorState,
-  pointerState?: { isPointerDown: boolean },
+  pointerState?: PointerVisualState,
+  handleState?: HandleRenderState,
 ) {
   context.clearRect(0, 0, viewport.width, viewport.height);
 
···
     drawShape(context, state, shape);
   }
 
-  drawSelection(context, state, shapes);
+  drawSelection(context, state, shapes, handleState);
 
   drawSnapGuides(context, state.camera, viewport, snapSettings, cursorState, pointerState);
 
···
   viewport: Viewport,
   snapSettings?: SnapSettings,
   cursorState?: CursorState,
-  pointerState?: { isPointerDown: boolean },
+  pointerState?: PointerVisualState,
 ) {
-  if (!snapSettings?.snapEnabled || !cursorState || !pointerState?.isPointerDown) {
+  if (!snapSettings?.snapEnabled || !pointerState?.isPointerDown) {
     return;
   }
 
   const gridSize = snapSettings.gridSize || 1;
-  const snappedX = Math.round(cursorState.cursorWorld.x / gridSize) * gridSize;
-  const snappedY = Math.round(cursorState.cursorWorld.y / gridSize) * gridSize;
+  const guideWorld = pointerState.snappedWorld ?? cursorState?.cursorWorld;
+  if (!guideWorld) {
+    return;
+  }
+  const snappedX = pointerState.snappedWorld
+    ? pointerState.snappedWorld.x
+    : Math.round(guideWorld.x / gridSize) * gridSize;
+  const snappedY = pointerState.snappedWorld
+    ? pointerState.snappedWorld.y
+    : Math.round(guideWorld.y / gridSize) * gridSize;
 
   const halfWidth = viewport.width / (2 * camera.zoom);
   const halfHeight = viewport.height / (2 * camera.zoom);
···
 /**
  * Draw selection outlines for selected shapes
  */
-function drawSelection(context: CanvasRenderingContext2D, state: EditorState, shapes: ShapeRecord[]) {
+function drawSelection(
+  context: CanvasRenderingContext2D,
+  state: EditorState,
+  shapes: ShapeRecord[],
+  handleState?: HandleRenderState,
+) {
   const selectedIds = new Set(state.ui.selectionIds);
+  const singleSelectionId = state.ui.selectionIds.length === 1 ? state.ui.selectionIds[0] : null;
 
   for (const shape of shapes) {
     if (!selectedIds.has(shape.id)) continue;
···
     }
 
     context.restore();
+
+    if (singleSelectionId === shape.id) {
+      drawHandles(context, state, shape, handleState);
+    }
   }
 }
+
+type HandleVisual = { id: string; position: Vec2; connectorFrom?: Vec2 };
+const ROTATE_HANDLE_OFFSET = 40;
+
+function drawHandles(
+  context: CanvasRenderingContext2D,
+  state: EditorState,
+  shape: ShapeRecord,
+  handleState?: HandleRenderState,
+) {
+  if (!handleState) {
+    return;
+  }
+  const handles = getHandlesForShape(state, shape);
+  if (handles.length === 0) {
+    return;
+  }
+
+  for (const handle of handles) {
+    if (handle.connectorFrom) {
+      context.save();
+      context.strokeStyle = "rgba(37, 99, 235, 0.6)";
+      context.lineWidth = 1 / state.camera.zoom;
+      context.beginPath();
+      context.moveTo(handle.connectorFrom.x, handle.connectorFrom.y);
+      context.lineTo(handle.position.x, handle.position.y);
+      context.stroke();
+      context.restore();
+    }
+
+    context.save();
+    const isActive = handleState.active === handle.id;
+    const isHover = handleState.hover === handle.id;
+    const fill = isActive ? "#2563eb" : (isHover ? "#3b82f6" : "#ffffff");
+    const stroke = isActive || isHover ? "#2563eb" : "#1f2933";
+    const size = handle.id === "rotate" ? 6 / state.camera.zoom : 5 / state.camera.zoom;
+
+    context.translate(handle.position.x, handle.position.y);
+    context.lineWidth = 1 / state.camera.zoom;
+    context.strokeStyle = stroke;
+    context.fillStyle = fill;
+
+    if (handle.id === "rotate") {
+      context.beginPath();
+      context.arc(0, 0, size, 0, Math.PI * 2);
+      context.fill();
+      context.stroke();
+    } else {
+      const d = size;
+      context.beginPath();
+      context.rect(-d, -d, d * 2, d * 2);
+      context.fill();
+      context.stroke();
+    }
+
+    context.restore();
+  }
+}
+
+function getHandlesForShape(state: EditorState, shape: ShapeRecord): HandleVisual[] {
+  const handles: HandleVisual[] = [];
+  if (shape.type === "rect" || shape.type === "ellipse" || shape.type === "text") {
+    const bounds = shapeBounds(shape);
+    const minX = bounds.min.x;
+    const maxX = bounds.max.x;
+    const minY = bounds.min.y;
+    const maxY = bounds.max.y;
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    handles.push(
+      { id: "nw", position: { x: minX, y: minY } },
+      { id: "n", position: { x: centerX, y: minY } },
+      { id: "ne", position: { x: maxX, y: minY } },
+      { id: "e", position: { x: maxX, y: centerY } },
+      { id: "se", position: { x: maxX, y: maxY } },
+      { id: "s", position: { x: centerX, y: maxY } },
+      { id: "sw", position: { x: minX, y: maxY } },
+      { id: "w", position: { x: minX, y: centerY } },
+      {
+        id: "rotate",
+        position: { x: centerX, y: minY - ROTATE_HANDLE_OFFSET },
+        connectorFrom: { x: centerX, y: minY },
+      },
+    );
+    return handles;
+  }
+
+  if (shape.type === "line") {
+    const start = localToWorld(shape, shape.props.a);
+    const end = localToWorld(shape, shape.props.b);
+    handles.push({ id: "line-start", position: start }, { id: "line-end", position: end });
+    return handles;
+  }
+
+  if (shape.type === "arrow") {
+    const resolved = resolveArrowEndpoints(state, shape.id);
+    if (resolved) {
+      handles.push({ id: "line-start", position: resolved.a }, { id: "line-end", position: resolved.b });
+    }
+    return handles;
+  }
+
+  return handles;
+}
+
+function localToWorld(shape: ShapeRecord, point: Vec2): Vec2 {
+  if (shape.rot === 0) {
+    return { x: shape.x + point.x, y: shape.y + point.y };
+  }
+  const cos = Math.cos(shape.rot);
+  const sin = Math.sin(shape.rot);
+  return { x: shape.x + point.x * cos - point.y * sin, y: shape.y + point.x * sin + point.y * cos };
+}