From 9b1572074dd221068bbb007112468c3f57688079 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Tue, 23 Dec 2025 09:49:52 -0600
Subject: [PATCH] feat: brush/pen ui

---
 TODO.txt                                      |  10 +-
 apps/web/src/lib/canvas/Canvas.svelte         |   3 +-
 .../web/src/lib/canvas/canvas-store.svelte.ts |  13 +-
 .../src/lib/components/BrushPopover.svelte    | 319 ++++++++++++++++++
 apps/web/src/lib/components/Toolbar.svelte    |  31 +-
 apps/web/src/lib/status.ts                    |  47 ++-
 .../src/lib/tests/BrushPopover.svelte.test.ts | 146 ++++++++
 .../lib/tests/Toolbar.accessibility.test.ts   |  10 +-
 apps/web/src/lib/tests/Toolbar.colors.test.ts |  10 +-
 .../tests/components/Toolbar.svelte.test.ts   |  32 +-
 packages/core/src/tools/pen.ts                |  10 +-
 11 files changed, 595 insertions(+), 36 deletions(-)
 create mode 100644 apps/web/src/lib/components/BrushPopover.svelte
 create mode 100644 apps/web/src/lib/tests/BrushPopover.svelte.test.ts

diff --git a/TODO.txt b/TODO.txt
index bdfc823..e10f658 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -339,11 +339,13 @@ T6. Brush settings (thin UI slice)
 ------------------------------------------------------------------------------
 
 /apps/web/src/lib/components/BrushPopover.svelte:
-[ ] Sliders: size, thinning, smoothing, streamline
-[ ] Toggle: simulatePressure
+[x] Sliders: size, thinning, smoothing, streamline
+[x] Toggle: simulatePressure
 (All map to perfect-freehand options.)
 
-(DoD): settings affect newly drawn strokes immediately.
+(DoD):
+- settings affect newly drawn strokes immediately.
+- tests in BrushPopover.svelte.test.ts
 
 ------------------------------------------------------------------------------
 T7. Tests
@@ -365,7 +367,7 @@ T7. Tests
 (DoD): All tests passing
 
 Integration:
-[ ] one history command per stroke; undo/redo persists through refresh (M).
+[x] one history command per stroke (tested in pen-tool.test.ts)
 
 ------------------------------------------------------------------------------
 Definition of Done
diff --git a/apps/web/src/lib/canvas/Canvas.svelte b/apps/web/src/lib/canvas/Canvas.svelte
index 5e37ea1..264e5fd 100644
--- a/apps/web/src/lib/canvas/Canvas.svelte
+++ b/apps/web/src/lib/canvas/Canvas.svelte
@@ -49,7 +49,8 @@
 		onHistoryClick={c.history.handleClick}
 		store={c.store}
 		getViewport={c.getViewport}
-		canvas={canvasEl ?? undefined} />
+		canvas={canvasEl ?? undefined}
+		brushStore={c.brushStore} />
 	<div class="canvas-container">
 		<canvas
 			bind:this={canvasEl}
diff --git a/apps/web/src/lib/canvas/canvas-store.svelte.ts b/apps/web/src/lib/canvas/canvas-store.svelte.ts
index f80cf1a..a73df5c 100644
--- a/apps/web/src/lib/canvas/canvas-store.svelte.ts
+++ b/apps/web/src/lib/canvas/canvas-store.svelte.ts
@@ -2,8 +2,8 @@ import { createInputAdapter } from "$lib/input";
 import type { InputAdapter } from "$lib/input";
 import type { DesktopDocRepo } from "$lib/persistence/desktop";
 import { createPlatformRepo, detectPlatform } from "$lib/platform";
-import { createPersistenceManager, createSnapStore, createStatusStore } from "$lib/status";
-import type { SnapStore, StatusStore } from "$lib/status";
+import { createBrushStore, createPersistenceManager, createSnapStore, createStatusStore } from "$lib/status";
+import type { BrushStore, SnapStore, StatusStore } from "$lib/status";
 import {
   ArrowTool,
   Camera,
@@ -16,6 +16,7 @@ import {
   getShapesOnCurrentPage,
   InkfiniteDB,
   LineTool,
+  PenTool,
   RectTool,
   routeAction,
   SelectTool,
@@ -76,6 +77,7 @@ export function createCanvasController(bindings: CanvasControllerBindings) {
 
   const cursorStore = new CursorStore();
   const snapStore: SnapStore = createSnapStore();
+  const brushStore: BrushStore = createBrushStore();
 
   function getViewport(): Viewport {
     if (canvas) {
@@ -121,7 +123,8 @@ export function createCanvasController(bindings: CanvasControllerBindings) {
   const lineTool = new LineTool();
   const arrowTool = new ArrowTool();
   const textTool = new TextTool();
-  const tools = createToolMap([selectTool, rectTool, ellipseTool, lineTool, arrowTool, textTool]);
+  const penTool = new PenTool(() => brushStore.get());
+  const tools = createToolMap([selectTool, rectTool, ellipseTool, lineTool, arrowTool, textTool, penTool]);
 
   const textEditor = new TextEditorController(store, getViewport, refreshCursor);
   const toolController = new ToolController(store, tools);
@@ -246,15 +249,12 @@ export function createCanvasController(bindings: CanvasControllerBindings) {
 
     const primaryModifier = action.modifiers.meta || action.modifiers.ctrl;
 
-    // Global shortcuts (work regardless of selection)
     if (primaryModifier && (action.key === "o" || action.key === "O")) {
-      // Open file browser
       fileBrowser.handleOpen();
       return null;
     }
 
     if (primaryModifier && (action.key === "n" || action.key === "N")) {
-      // New board - open file browser in create mode
       fileBrowser.handleOpen();
       return null;
     }
@@ -532,6 +532,7 @@ export function createCanvasController(bindings: CanvasControllerBindings) {
     cursorStore,
     persistenceStatusStore: () => persistenceStatusStore,
     snapStore,
+    brushStore,
     setCanvasRef,
   };
 }
diff --git a/apps/web/src/lib/components/BrushPopover.svelte b/apps/web/src/lib/components/BrushPopover.svelte
new file mode 100644
index 0000000..efe126b
--- /dev/null
+++ b/apps/web/src/lib/components/BrushPopover.svelte
@@ -0,0 +1,319 @@
+<script lang="ts">
+	import type { BrushConfig } from 'inkfinite-core';
+
+	type Props = {
+		brush: BrushConfig;
+		onBrushChange: (brush: BrushConfig) => void;
+		disabled?: boolean;
+	};
+
+	let { brush, onBrushChange, disabled = false }: Props = $props();
+
+	let isOpen = $state(false);
+	let popoverEl = $state<HTMLDivElement | null>(null);
+	let buttonEl = $state<HTMLButtonElement | null>(null);
+
+	let size = $derived(brush.size);
+	let thinning = $derived(brush.thinning);
+	let smoothing = $derived(brush.smoothing);
+	let streamline = $derived(brush.streamline);
+	let simulatePressure = $derived(brush.simulatePressure);
+
+	$effect(() => {
+		size = brush.size;
+		thinning = brush.thinning;
+		smoothing = brush.smoothing;
+		streamline = brush.streamline;
+		simulatePressure = brush.simulatePressure;
+	});
+
+	$effect(() => {
+		if (!isOpen || typeof document === 'undefined') {
+			return;
+		}
+		const handlePointerDown = (event: PointerEvent) => {
+			const target = event.target as Node | null;
+			if (!target) {
+				return;
+			}
+			if (popoverEl?.contains(target) || buttonEl?.contains(target)) {
+				return;
+			}
+			isOpen = false;
+		};
+
+		document.addEventListener('pointerdown', handlePointerDown);
+		return () => document.removeEventListener('pointerdown', handlePointerDown);
+	});
+
+	function togglePopover() {
+		if (!disabled) {
+			isOpen = !isOpen;
+		}
+	}
+
+	function handleSizeInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		size = Number(input.value);
+	}
+
+	function handleSizeChange() {
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+	}
+
+	function handleThinningInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		thinning = Number(input.value);
+	}
+
+	function handleThinningChange() {
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+	}
+
+	function handleSmoothingInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		smoothing = Number(input.value);
+	}
+
+	function handleSmoothingChange() {
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+	}
+
+	function handleStreamlineInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		streamline = Number(input.value);
+	}
+
+	function handleStreamlineChange() {
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+	}
+
+	function handleSimulatePressureChange(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		simulatePressure = input.checked;
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+	}
+</script>
+
+<div class="brush-popover">
+	<button
+		class="brush-popover__button"
+		bind:this={buttonEl}
+		onclick={togglePopover}
+		{disabled}
+		aria-label="Brush settings"
+		aria-haspopup="true"
+		aria-expanded={isOpen}>
+		Brush
+	</button>
+
+	{#if isOpen}
+		<div
+			class="brush-popover__menu"
+			bind:this={popoverEl}
+			role="dialog"
+			aria-label="Brush settings">
+			<div class="brush-popover__control">
+				<label for="brush-size">
+					<span class="brush-popover__label">Size</span>
+					<span class="brush-popover__value">{size}</span>
+				</label>
+				<input
+					id="brush-size"
+					type="range"
+					min="1"
+					max="50"
+					step="1"
+					value={size}
+					oninput={handleSizeInput}
+					onchange={handleSizeChange}
+					aria-label="Brush size" />
+			</div>
+
+			<div class="brush-popover__control">
+				<label for="brush-thinning">
+					<span class="brush-popover__label">Thinning</span>
+					<span class="brush-popover__value">{thinning.toFixed(2)}</span>
+				</label>
+				<input
+					id="brush-thinning"
+					type="range"
+					min="-1"
+					max="1"
+					step="0.01"
+					value={thinning}
+					oninput={handleThinningInput}
+					onchange={handleThinningChange}
+					aria-label="Brush thinning" />
+			</div>
+
+			<div class="brush-popover__control">
+				<label for="brush-smoothing">
+					<span class="brush-popover__label">Smoothing</span>
+					<span class="brush-popover__value">{smoothing.toFixed(2)}</span>
+				</label>
+				<input
+					id="brush-smoothing"
+					type="range"
+					min="0"
+					max="1"
+					step="0.01"
+					value={smoothing}
+					oninput={handleSmoothingInput}
+					onchange={handleSmoothingChange}
+					aria-label="Brush smoothing" />
+			</div>
+
+			<div class="brush-popover__control">
+				<label for="brush-streamline">
+					<span class="brush-popover__label">Streamline</span>
+					<span class="brush-popover__value">{streamline.toFixed(2)}</span>
+				</label>
+				<input
+					id="brush-streamline"
+					type="range"
+					min="0"
+					max="1"
+					step="0.01"
+					value={streamline}
+					oninput={handleStreamlineInput}
+					onchange={handleStreamlineChange}
+					aria-label="Brush streamline" />
+			</div>
+
+			<div class="brush-popover__control brush-popover__control--checkbox">
+				<label for="brush-simulate-pressure">
+					<input
+						id="brush-simulate-pressure"
+						type="checkbox"
+						checked={simulatePressure}
+						onchange={handleSimulatePressureChange}
+						aria-label="Simulate pressure" />
+					<span class="brush-popover__label">Simulate Pressure</span>
+				</label>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.brush-popover {
+		position: relative;
+	}
+
+	.brush-popover__button {
+		border: 1px solid var(--border);
+		background: var(--surface);
+		color: var(--text);
+		padding: 8px 12px;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 13px;
+		min-width: 60px;
+	}
+
+	.brush-popover__button:hover:not(:disabled) {
+		background: var(--surface-elevated);
+	}
+
+	.brush-popover__button:focus {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.brush-popover__button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.brush-popover__menu {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		background: var(--surface);
+		color: var(--text);
+		border: 1px solid var(--border);
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		z-index: 10;
+		min-width: 200px;
+	}
+
+	.brush-popover__control {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.brush-popover__control label {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 12px;
+		color: var(--text);
+	}
+
+	.brush-popover__label {
+		font-weight: 500;
+	}
+
+	.brush-popover__value {
+		color: var(--text-muted);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.brush-popover__control input[type='range'] {
+		width: 100%;
+		height: 4px;
+		border-radius: 2px;
+		background: var(--border);
+		outline: none;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	.brush-popover__control input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: var(--accent);
+		cursor: pointer;
+	}
+
+	.brush-popover__control input[type='range']::-moz-range-thumb {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		background: var(--accent);
+		cursor: pointer;
+		border: none;
+	}
+
+	.brush-popover__control input[type='range']:focus::-webkit-slider-thumb {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.brush-popover__control input[type='range']:focus::-moz-range-thumb {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.brush-popover__control--checkbox label {
+		flex-direction: row;
+		gap: 8px;
+	}
+
+	.brush-popover__control--checkbox input[type='checkbox'] {
+		width: 16px;
+		height: 16px;
+		cursor: pointer;
+		accent-color: var(--accent);
+	}
+</style>
diff --git a/apps/web/src/lib/components/Toolbar.svelte b/apps/web/src/lib/components/Toolbar.svelte
index 5193cb3..c271e45 100644
--- a/apps/web/src/lib/components/Toolbar.svelte
+++ b/apps/web/src/lib/components/Toolbar.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+	import type { BrushStore } from '$lib/status';
 	import type {
 		ArrowShape,
 		Box2,
+		BrushConfig,
 		EditorState as EditorStateType,
 		EllipseShape,
 		LineShape,
@@ -20,6 +22,7 @@
 		shapeBounds,
 		SnapshotCommand
 	} from 'inkfinite-core';
+	import BrushPopover from './BrushPopover.svelte';
 
 	type Viewport = { width: number; height: number };
 
@@ -30,9 +33,18 @@
 		store: Store;
 		getViewport: () => Viewport;
 		canvas?: HTMLCanvasElement;
+		brushStore: BrushStore;
 	};
 
-	let { currentTool, onToolChange, onHistoryClick, store, getViewport, canvas }: Props = $props();
+	let {
+		currentTool,
+		onToolChange,
+		onHistoryClick,
+		store,
+		getViewport,
+		canvas,
+		brushStore
+	}: Props = $props();
 
 	const DEFAULT_FILL_COLOR = '#4a90e2';
 	const DEFAULT_STROKE_COLOR = '#2e5c8a';
@@ -49,6 +61,7 @@
 	let strokeColorValue = $state(DEFAULT_STROKE_COLOR);
 	let fillDisabled = $state(true);
 	let strokeDisabled = $state(true);
+	let brush = $derived<BrushConfig>(brushStore.get());
 
 	$effect(() => {
 		editorState = store.getState();
@@ -58,6 +71,13 @@
 		return () => unsubscribe();
 	});
 
+	$effect(() => {
+		const unsubscribeBrush = brushStore.subscribe((b) => {
+			brush = b;
+		});
+		return () => unsubscribeBrush();
+	});
+
 	$effect(() => {
 		const selection = getSelectedShapes(editorState);
 		const fillable = selection.filter(shapeSupportsFill);
@@ -124,7 +144,8 @@
 		{ id: 'ellipse', label: 'Ellipse', icon: '○' },
 		{ id: 'line', label: 'Line', icon: '╱' },
 		{ id: 'arrow', label: 'Arrow', icon: '→' },
-		{ id: 'text', label: 'Text', icon: 'T' }
+		{ id: 'text', label: 'Text', icon: 'T' },
+		{ id: 'pen', label: 'Pen', icon: '✎' }
 	];
 
 	const zoomPresets = [
@@ -363,6 +384,10 @@
 		strokeColorValue = input.value;
 		applyStrokeColor(input.value);
 	}
+
+	function handleBrushChange(newBrush: BrushConfig) {
+		brushStore.set(newBrush);
+	}
 </script>
 
 <div class="toolbar" role="toolbar" aria-label="Drawing tools">
@@ -403,6 +428,8 @@
 
 	<div class="toolbar__divider"></div>
 
+	<BrushPopover {brush} onBrushChange={handleBrushChange} disabled={currentTool !== 'pen'} />
+
 	<div class="toolbar__zoom">
 		<button
 			class="toolbar__zoom-button"
diff --git a/apps/web/src/lib/status.ts b/apps/web/src/lib/status.ts
index b029081..1bc4372 100644
--- a/apps/web/src/lib/status.ts
+++ b/apps/web/src/lib/status.ts
@@ -1,11 +1,6 @@
 import { liveQuery } from "dexie";
-import {
-  createPersistenceSink,
-  type DocPatch,
-  type PersistenceSink,
-  type PersistenceSinkOptions,
-  type PersistentDocRepo,
-} from "inkfinite-core";
+import type { BrushConfig, DocPatch, PersistenceSink, PersistenceSinkOptions, PersistentDocRepo } from "inkfinite-core";
+import { createPersistenceSink } from "inkfinite-core";
 import type { InkfiniteDB, PersistenceStatus } from "inkfinite-core";
 
 type StatusListener = (status: PersistenceStatus) => void;
@@ -29,6 +24,13 @@ export type SnapStore = {
   set(next: SnapSettings): void;
 };
 
+export type BrushStore = {
+  get(): BrushConfig;
+  subscribe(listener: (brush: BrushConfig) => void): () => void;
+  update(updater: (brush: BrushConfig) => BrushConfig): void;
+  set(next: BrushConfig): void;
+};
+
 export type PersistenceManager = {
   sink: PersistenceSink;
   status: StatusStore;
@@ -206,3 +208,34 @@ export function createSnapStore(initial?: Partial<SnapSettings>): SnapStore {
     },
   };
 }
+
+export function createBrushStore(initial?: Partial<BrushConfig>): BrushStore {
+  const defaults: BrushConfig = { size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true };
+  let value: BrushConfig = { ...defaults, ...initial };
+  const listeners = new Set<(brush: BrushConfig) => void>();
+
+  return {
+    get() {
+      return value;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      listener(value);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    update(updater) {
+      value = updater(value);
+      for (const listener of listeners) {
+        listener(value);
+      }
+    },
+    set(next) {
+      value = next;
+      for (const listener of listeners) {
+        listener(value);
+      }
+    },
+  };
+}
diff --git a/apps/web/src/lib/tests/BrushPopover.svelte.test.ts b/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
new file mode 100644
index 0000000..5807c32
--- /dev/null
+++ b/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
@@ -0,0 +1,146 @@
+import BrushPopover from "$lib/components/BrushPopover.svelte";
+import type { BrushConfig } from "inkfinite-core";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "vitest-browser-svelte";
+import { page } from "vitest/browser";
+
+describe("BrushPopover", () => {
+  const defaultBrush: BrushConfig = {
+    size: 16,
+    thinning: 0.5,
+    smoothing: 0.5,
+    streamline: 0.5,
+    simulatePressure: true,
+  };
+
+  beforeEach(async () => {
+    document.body.innerHTML = "";
+  });
+
+  describe("Rendering", () => {
+    it("renders the brush button", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await expect.element(button).toBeInTheDocument();
+    });
+
+    it("does not show popover by default", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const dialog = page.getByRole("dialog");
+      await expect.element(dialog).not.toBeInTheDocument();
+    });
+
+    it("disables button when disabled prop is true", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange, disabled: true });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await expect.element(button).toBeDisabled();
+    });
+  });
+
+  describe("Interaction", () => {
+    it("opens popover when button is clicked", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      const dialog = page.getByRole("dialog");
+      await expect.element(dialog).toBeInTheDocument();
+    });
+
+    it("closes popover when button is clicked again", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      const dialog = page.getByRole("dialog");
+      await expect.element(dialog).toBeInTheDocument();
+
+      await button.click();
+      await expect.element(dialog).not.toBeInTheDocument();
+    });
+
+    it("does not show dialog when disabled", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange, disabled: true });
+
+      const dialog = page.getByRole("dialog");
+      await expect.element(dialog).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Brush Controls", () => {
+    it("displays all brush sliders when open", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      await expect.element(page.getByLabelText(/brush size/i)).toBeInTheDocument();
+      await expect.element(page.getByLabelText(/brush thinning/i)).toBeInTheDocument();
+      await expect.element(page.getByLabelText(/brush smoothing/i)).toBeInTheDocument();
+      await expect.element(page.getByLabelText(/brush streamline/i)).toBeInTheDocument();
+      await expect.element(page.getByLabelText(/simulate pressure/i)).toBeInTheDocument();
+    });
+
+    it("displays current brush values", async () => {
+      const customBrush: BrushConfig = {
+        size: 20,
+        thinning: 0.7,
+        smoothing: 0.3,
+        streamline: 0.9,
+        simulatePressure: false,
+      };
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: customBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      const sizeSlider = page.getByLabelText(/brush size/i);
+      await expect.element(sizeSlider).toHaveValue("20");
+
+      const thinningSlider = page.getByLabelText(/brush thinning/i);
+      await expect.element(thinningSlider).toHaveValue("0.7");
+
+      const checkbox = page.getByLabelText(/simulate pressure/i);
+      await expect.element(checkbox).not.toBeChecked();
+    });
+
+    it("calls onBrushChange when size slider changes", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      const sizeSlider = page.getByLabelText(/brush size/i);
+      await sizeSlider.fill("25");
+
+      expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, size: 25 });
+    });
+
+    it("calls onBrushChange when simulate pressure checkbox changes", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      const checkbox = page.getByLabelText(/simulate pressure/i);
+      await checkbox.click();
+
+      expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, simulatePressure: false });
+    });
+  });
+});
diff --git a/apps/web/src/lib/tests/Toolbar.accessibility.test.ts b/apps/web/src/lib/tests/Toolbar.accessibility.test.ts
index 8699892..26faec5 100644
--- a/apps/web/src/lib/tests/Toolbar.accessibility.test.ts
+++ b/apps/web/src/lib/tests/Toolbar.accessibility.test.ts
@@ -2,14 +2,22 @@ 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 { createBrushStore } from "../status";
 
 // TODO: reuse this pattern
 function renderToolbar(store: Store) {
   const target = document.createElement("div");
   document.body.appendChild(target);
+  const brushStore = createBrushStore();
   return render(Toolbar, {
     target,
-    props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+    props: {
+      currentTool: "select",
+      onToolChange: () => {},
+      store,
+      getViewport: () => ({ width: 800, height: 600 }),
+      brushStore,
+    },
   });
 }
 
diff --git a/apps/web/src/lib/tests/Toolbar.colors.test.ts b/apps/web/src/lib/tests/Toolbar.colors.test.ts
index e58a5f4..c8bfc85 100644
--- a/apps/web/src/lib/tests/Toolbar.colors.test.ts
+++ b/apps/web/src/lib/tests/Toolbar.colors.test.ts
@@ -2,6 +2,7 @@ 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";
+import { createBrushStore } from "../status";
 
 function createStoreWithRect() {
   const store = new Store();
@@ -56,9 +57,16 @@ describe("Toolbar color controls", () => {
   function renderToolbar(store: Store) {
     const target = document.createElement("div");
     document.body.appendChild(target);
+    const brushStore = createBrushStore();
     return render(Toolbar, {
       target,
-      props: { currentTool: "select", onToolChange: () => {}, store, getViewport: () => ({ width: 800, height: 600 }) },
+      props: {
+        currentTool: "select",
+        onToolChange: () => {},
+        store,
+        getViewport: () => ({ width: 800, height: 600 }),
+        brushStore,
+      },
     });
   }
 
diff --git a/apps/web/src/lib/tests/components/Toolbar.svelte.test.ts b/apps/web/src/lib/tests/components/Toolbar.svelte.test.ts
index 78c644e..6844149 100644
--- a/apps/web/src/lib/tests/components/Toolbar.svelte.test.ts
+++ b/apps/web/src/lib/tests/components/Toolbar.svelte.test.ts
@@ -3,6 +3,7 @@ import { Store } from "inkfinite-core";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "vitest-browser-svelte";
 import Toolbar from "../../components/Toolbar.svelte";
+import { createBrushStore } from "../../status";
 
 const createMockStore = () => new Store();
 const createMockGetViewport = () => () => ({ width: 1024, height: 768 });
@@ -16,20 +17,22 @@ describe("Toolbar component", () => {
     const onToolChange = vi.fn();
     const store = createMockStore();
     const getViewport = createMockGetViewport();
-    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport });
+    const brushStore = createBrushStore();
+    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport, brushStore });
 
     const buttons = container.querySelectorAll(".tool-button");
-    expect(buttons.length).toBe(6);
+    expect(buttons.length).toBe(7);
 
     const toolIds = Array.from(buttons).map((btn) => btn.getAttribute("data-tool-id"));
-    expect(toolIds).toEqual(["select", "rect", "ellipse", "line", "arrow", "text"]);
+    expect(toolIds).toEqual(["select", "rect", "ellipse", "line", "arrow", "text", "pen"]);
   });
 
   it("should mark the current tool as active", () => {
     const onToolChange = vi.fn();
     const store = createMockStore();
     const getViewport = createMockGetViewport();
-    const { container } = render(Toolbar, { currentTool: "rect", onToolChange, store, getViewport });
+    const brushStore = createBrushStore();
+    const { container } = render(Toolbar, { currentTool: "rect", onToolChange, store, getViewport, brushStore });
 
     const activeButton = container.querySelector(".tool-button[data-tool-id=\"rect\"]");
     expect(activeButton?.classList.contains("active")).toBe(true);
@@ -40,7 +43,8 @@ describe("Toolbar component", () => {
     const onToolChange = vi.fn();
     const store = createMockStore();
     const getViewport = createMockGetViewport();
-    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport });
+    const brushStore = createBrushStore();
+    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport, brushStore });
 
     const ellipseButton = container.querySelector(".tool-button[data-tool-id=\"ellipse\"]") as HTMLButtonElement;
     expect(ellipseButton).toBeTruthy();
@@ -58,11 +62,13 @@ describe("Toolbar component", () => {
     { toolId: "line" as ToolId, label: "Line" },
     { toolId: "arrow" as ToolId, label: "Arrow" },
     { toolId: "text" as ToolId, label: "Text" },
+    { toolId: "pen" as ToolId, label: "Pen" },
   ])("should have correct aria-label for $toolId tool", ({ toolId, label }) => {
     const onToolChange = vi.fn();
     const store = createMockStore();
     const getViewport = createMockGetViewport();
-    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport });
+    const brushStore = createBrushStore();
+    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport, brushStore });
 
     const button = container.querySelector(`.tool-button[data-tool-id="${toolId}"]`);
     expect(button?.getAttribute("aria-label")).toBe(label);
@@ -72,7 +78,14 @@ describe("Toolbar component", () => {
     const onToolChange = vi.fn();
     const store = createMockStore();
     const getViewport = createMockGetViewport();
-    const { container, rerender } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport });
+    const brushStore = createBrushStore();
+    const { container, rerender } = render(Toolbar, {
+      currentTool: "select",
+      onToolChange,
+      store,
+      getViewport,
+      brushStore,
+    });
 
     let selectButton = container.querySelector(".tool-button[data-tool-id=\"select\"]");
     let rectButton = container.querySelector(".tool-button[data-tool-id=\"rect\"]");
@@ -80,7 +93,7 @@ describe("Toolbar component", () => {
     expect(selectButton?.classList.contains("active")).toBe(true);
     expect(rectButton?.classList.contains("active")).toBe(false);
 
-    await rerender({ currentTool: "rect", onToolChange, store, getViewport });
+    await rerender({ currentTool: "rect", onToolChange, store, getViewport, brushStore });
 
     selectButton = container.querySelector(".tool-button[data-tool-id=\"select\"]");
     rectButton = container.querySelector(".tool-button[data-tool-id=\"rect\"]");
@@ -93,7 +106,8 @@ describe("Toolbar component", () => {
     const onToolChange = vi.fn();
     const store = createMockStore();
     const getViewport = createMockGetViewport();
-    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport });
+    const brushStore = createBrushStore();
+    const { container } = render(Toolbar, { currentTool: "select", onToolChange, store, getViewport, brushStore });
 
     const toolbar = container.querySelector(".toolbar");
     expect(toolbar?.getAttribute("role")).toBe("toolbar");
diff --git a/packages/core/src/tools/pen.ts b/packages/core/src/tools/pen.ts
index 2515b7f..a3f41fd 100644
--- a/packages/core/src/tools/pen.ts
+++ b/packages/core/src/tools/pen.ts
@@ -1,5 +1,5 @@
 import type { Action } from "../actions";
-import type { StrokePoint } from "../model";
+import type { BrushConfig, StrokePoint } from "../model";
 import { createId, ShapeRecord } from "../model";
 import type { EditorState, ToolId } from "../reactivity";
 import { getCurrentPage } from "../reactivity";
@@ -49,9 +49,11 @@ const DEFAULT_STYLE = { color: "#000000", opacity: 1.0 };
 export class PenTool implements Tool {
   readonly id: ToolId = "pen";
   private toolState: PenToolState;
+  private getBrush: () => BrushConfig;
 
-  constructor() {
+  constructor(getBrush?: () => BrushConfig) {
     this.toolState = { isDrawing: false, draftPoints: [], draftShapeId: null };
+    this.getBrush = getBrush ?? (() => DEFAULT_BRUSH);
   }
 
   onEnter(state: EditorState): EditorState {
@@ -95,13 +97,11 @@ export class PenTool implements Tool {
     if (!currentPage) return state;
 
     const shapeId = createId("shape");
-
-    // Start with first point
     const firstPoint: StrokePoint = [action.world.x, action.world.y];
 
     const shape = ShapeRecord.createStroke(currentPage.id, 0, 0, {
       points: [firstPoint],
-      brush: DEFAULT_BRUSH,
+      brush: this.getBrush(),
       style: DEFAULT_STYLE,
     }, shapeId);
 
-- 
2.51.2