feat: color picking for pen

apps/web/src/lib/canvas/canvas-store.svelte.ts

···
   const lineTool = new LineTool();
   const arrowTool = new ArrowTool();
   const textTool = new TextTool();
-  const penTool = new PenTool(() => brushStore.get());
+  const getPenBrushConfig = () => {
+    const { color: _color, ...config } = brushStore.get();
+    return config;
+  };
+  const getPenStrokeStyle = () => {
+    const brush = brushStore.get();
+    return { color: brush.color, opacity: 1 };
+  };
+  const penTool = new PenTool(getPenBrushConfig, getPenStrokeStyle);
   const tools = createToolMap([selectTool, rectTool, ellipseTool, lineTool, arrowTool, textTool, penTool]);
 
   const textEditor = new TextEditorController(store, getViewport, refreshCursor);

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

···
 <script lang="ts">
-	import type { BrushConfig } from 'inkfinite-core';
+	import type { BrushSettings } from '$lib/status';
 
 	type Props = {
-		brush: BrushConfig;
-		onBrushChange: (brush: BrushConfig) => void;
+		brush: BrushSettings;
+		onBrushChange: (brush: BrushSettings) => void;
 		disabled?: boolean;
 	};
 
···
 	let smoothing = $derived(brush.smoothing);
 	let streamline = $derived(brush.streamline);
 	let simulatePressure = $derived(brush.simulatePressure);
+	let color = $derived(brush.color);
 
 	$effect(() => {
 		size = brush.size;
···
 		smoothing = brush.smoothing;
 		streamline = brush.streamline;
 		simulatePressure = brush.simulatePressure;
+		color = brush.color;
 	});
 
 	$effect(() => {
···
 	}
 
 	function handleSizeChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleThinningInput(event: Event) {
···
 	}
 
 	function handleThinningChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleSmoothingInput(event: Event) {
···
 	}
 
 	function handleSmoothingChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleStreamlineInput(event: Event) {
···
 	}
 
 	function handleStreamlineChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleSimulatePressureChange(event: Event) {
 		const input = event.currentTarget as HTMLInputElement;
 		simulatePressure = input.checked;
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
+	}
+
+	function handleColorInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		color = input.value;
+	}
+
+	function handleColorChange() {
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 </script>
 
···
 					oninput={handleStreamlineInput}
 					onchange={handleStreamlineChange}
 					aria-label="Brush streamline" />
+			</div>
+
+			<div class="brush-popover__control brush-popover__control--color">
+				<label for="brush-color">
+					<span class="brush-popover__label">Color</span>
+					<span class="brush-popover__value">{color}</span>
+				</label>
+				<input
+					id="brush-color"
+					type="color"
+					value={color}
+					oninput={handleColorInput}
+					onchange={handleColorChange}
+					aria-label="Brush color" />
 			</div>
 
 			<div class="brush-popover__control brush-popover__control--checkbox">
···
 	.brush-popover__control--checkbox label {
 		flex-direction: row;
 		gap: 8px;
+	}
+
+	.brush-popover__control--color input[type='color'] {
+		width: 100%;
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		height: 32px;
+		background: var(--surface);
+		cursor: pointer;
 	}
 
 	.brush-popover__control--checkbox input[type='checkbox'] {

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

···
 <script lang="ts">
-	import type { BrushStore } from '$lib/status';
+	import type { BrushSettings, BrushStore } from '$lib/status';
 	import type {
 		ArrowShape,
 		Box2,
-		BrushConfig,
 		EditorState as EditorStateType,
 		EllipseShape,
 		LineShape,
···
 	let strokeColorValue = $state(DEFAULT_STROKE_COLOR);
 	let fillDisabled = $state(true);
 	let strokeDisabled = $state(true);
-	let brush = $derived<BrushConfig>(brushStore.get());
+	let brush = $derived<BrushSettings>(brushStore.get());
 
 	$effect(() => {
 		editorState = store.getState();
···
 		applyStrokeColor(input.value);
 	}
 
-	function handleBrushChange(newBrush: BrushConfig) {
+	function handleBrushChange(newBrush: BrushSettings) {
 		brushStore.set(newBrush);
 	}
 </script>

apps/web/src/lib/status.ts

···
   set(next: SnapSettings): void;
 };
 
+export type BrushSettings = BrushConfig & { color: string };
+
 export type BrushStore = {
-  get(): BrushConfig;
-  subscribe(listener: (brush: BrushConfig) => void): () => void;
-  update(updater: (brush: BrushConfig) => BrushConfig): void;
-  set(next: BrushConfig): void;
+  get(): BrushSettings;
+  subscribe(listener: (brush: BrushSettings) => void): () => void;
+  update(updater: (brush: BrushSettings) => BrushSettings): void;
+  set(next: BrushSettings): void;
 };
 
 export type PersistenceManager = {
···
   };
 }
 
-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>();
+export function createBrushStore(initial?: Partial<BrushSettings>): BrushStore {
+  const defaults: BrushSettings = {
+    size: 16,
+    thinning: 0.5,
+    smoothing: 0.5,
+    streamline: 0.5,
+    simulatePressure: true,
+    color: "#88c0d0",
+  };
+  let value: BrushSettings = { ...defaults, ...initial };
+  const listeners = new Set<(brush: BrushSettings) => void>();
 
   return {
     get() {

apps/web/src/lib/tests/BrushPopover.svelte.test.ts

···
 import BrushPopover from "$lib/components/BrushPopover.svelte";
-import type { BrushConfig } from "inkfinite-core";
+import type { BrushSettings } from "$lib/status";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render } from "vitest-browser-svelte";
 import { page } from "vitest/browser";
 
 describe("BrushPopover", () => {
-  const defaultBrush: BrushConfig = {
+  const defaultBrush: BrushSettings = {
     size: 16,
     thinning: 0.5,
     smoothing: 0.5,
     streamline: 0.5,
     simulatePressure: true,
+    color: "#88c0d0",
   };
 
   beforeEach(async () => {
···
   });
 
   describe("Brush Controls", () => {
-    it("displays all brush sliders when open", async () => {
+    it("displays all brush controls when open", async () => {
       const onBrushChange = vi.fn();
       render(BrushPopover, { brush: defaultBrush, onBrushChange });
 
···
       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(/brush color/i)).toBeInTheDocument();
       await expect.element(page.getByLabelText(/simulate pressure/i)).toBeInTheDocument();
     });
 
     it("displays current brush values", async () => {
-      const customBrush: BrushConfig = {
+      const customBrush: BrushSettings = {
         size: 20,
         thinning: 0.7,
         smoothing: 0.3,
         streamline: 0.9,
         simulatePressure: false,
+        color: "#ff6600",
       };
       const onBrushChange = vi.fn();
       render(BrushPopover, { brush: customBrush, onBrushChange });
···
       await checkbox.click();
 
       expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, simulatePressure: false });
+    });
+
+    it("calls onBrushChange when color input changes", async () => {
+      const onBrushChange = vi.fn();
+      render(BrushPopover, { brush: defaultBrush, onBrushChange });
+
+      const button = page.getByRole("button", { name: /brush settings/i });
+      await button.click();
+
+      const colorInput = page.getByLabelText(/brush color/i);
+      await colorInput.fill("#ff5577");
+
+      expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, color: "#ff5577" });
     });
   });
 });

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

···
       set: () => {},
     }),
     createBrushStore: () => ({
-      get: () => ({ size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true }),
+      get: () => ({
+        size: 16,
+        thinning: 0.5,
+        smoothing: 0.5,
+        streamline: 0.5,
+        simulatePressure: true,
+        color: "#88c0d0",
+      }),
       subscribe: () => () => {},
       update: () => {},
       set: () => {},

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

···
       set: () => {},
     }),
     createBrushStore: () => ({
-      get: () => ({ size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true }),
+      get: () => ({
+        size: 16,
+        thinning: 0.5,
+        smoothing: 0.5,
+        streamline: 0.5,
+        simulatePressure: true,
+        color: "#88c0d0",
+      }),
       subscribe: () => () => {},
       update: () => {},
       set: () => {},

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

···
       set: () => {},
     }),
     createBrushStore: () => ({
-      get: () => ({ size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5, simulatePressure: true }),
+      get: () => ({
+        size: 16,
+        thinning: 0.5,
+        smoothing: 0.5,
+        streamline: 0.5,
+        simulatePressure: true,
+        color: "#88c0d0",
+      }),
       subscribe: () => () => {},
       update: () => {},
       set: () => {},

packages/core/src/tools/pen.ts

···
 import type { Action } from "../actions";
-import type { BrushConfig, StrokePoint } from "../model";
+import type { BrushConfig, StrokePoint, StrokeStyle } from "../model";
 import { createId, ShapeRecord } from "../model";
 import type { EditorState, ToolId } from "../reactivity";
 import { getCurrentPage } from "../reactivity";
···
 /**
  * Default stroke style
  */
-const DEFAULT_STYLE = { color: "#000000", opacity: 1.0 };
+const DEFAULT_STYLE: StrokeStyle = { color: "#000000", opacity: 1.0 };
 
 /**
  * Pen tool - creates freehand stroke shapes using perfect-freehand
···
   readonly id: ToolId = "pen";
   private toolState: PenToolState;
   private getBrush: () => BrushConfig;
+  private getStrokeStyle: () => StrokeStyle;
 
-  constructor(getBrush?: () => BrushConfig) {
+  constructor(getBrush?: () => BrushConfig, getStrokeStyle?: () => StrokeStyle) {
     this.toolState = {
       isDrawing: false,
       draftPoints: [],
···
       lastUpdateFrame: null,
     };
     this.getBrush = getBrush ?? (() => DEFAULT_BRUSH);
+    this.getStrokeStyle = getStrokeStyle ?? (() => DEFAULT_STYLE);
   }
 
   onEnter(state: EditorState): EditorState {
···
     const shapeId = createId("shape");
     const firstPoint: StrokePoint = [action.world.x, action.world.y];
 
+    const strokeStyle = { ...this.getStrokeStyle() };
+
     const shape = ShapeRecord.createStroke(currentPage.id, 0, 0, {
       points: [firstPoint],
       brush: this.getBrush(),
-      style: DEFAULT_STYLE,
+      style: strokeStyle,
     }, shapeId);
 
     this.toolState.isDrawing = true;

packages/core/tests/pen-tool.test.ts

···
       }
     });
 
+    it("applies injected stroke style when creating strokes", () => {
+      const tool = new PenTool(undefined, () => ({ color: "#88c0d0", opacity: 0.75 }));
+      const store = new Store();
+      const page = PageRecord.create("Page 1", "page:1");
+
+      store.setState((state) => ({
+        ...state,
+        doc: { ...state.doc, pages: { [page.id]: page } },
+        ui: { ...state.ui, currentPageId: page.id },
+      }));
+
+      let state = store.getState();
+
+      state = tool.onAction(state, createPointerDownAction(0, 0));
+      state = tool.onAction(state, createPointerMoveAction(10, 0));
+      state = tool.onAction(state, createPointerUpAction(10, 0));
+
+      const shape = state.doc.shapes[Object.keys(state.doc.shapes)[0]];
+      expect(shape?.type).toBe("stroke");
+      if (shape?.type === "stroke") {
+        expect(shape.props.style.color).toBe("#88c0d0");
+        expect(shape.props.style.opacity).toBeCloseTo(0.75);
+      }
+    });
+
     it("should not add point if moved less than minimum distance", () => {
       const tool = new PenTool();
       const store = new Store();