From cf03e484e93421ab4b73848ceb4f05f3e47ae642 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Tue, 23 Dec 2025 10:13:14 -0600
Subject: [PATCH] feat: color picking for pen

---
 .../web/src/lib/canvas/canvas-store.svelte.ts | 10 +++-
 .../src/lib/components/BrushPopover.svelte    | 50 ++++++++++++++++---
 apps/web/src/lib/components/Toolbar.svelte    |  7 ++-
 apps/web/src/lib/status.ts                    | 25 +++++++---
 .../src/lib/tests/BrushPopover.svelte.test.ts | 24 +++++++--
 apps/web/src/lib/tests/Canvas.history.test.ts |  9 +++-
 .../web/src/lib/tests/Canvas.keyboard.test.ts |  9 +++-
 apps/web/src/lib/tests/Canvas.svelte.test.ts  |  9 +++-
 packages/core/src/tools/pen.ts                | 12 +++--
 packages/core/tests/pen-tool.test.ts          | 25 ++++++++++
 10 files changed, 148 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/lib/canvas/canvas-store.svelte.ts b/apps/web/src/lib/canvas/canvas-store.svelte.ts
index a73df5c..e7bb202 100644
--- a/apps/web/src/lib/canvas/canvas-store.svelte.ts
+++ b/apps/web/src/lib/canvas/canvas-store.svelte.ts
@@ -123,7 +123,15 @@ export function createCanvasController(bindings: CanvasControllerBindings) {
   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);
diff --git a/apps/web/src/lib/components/BrushPopover.svelte b/apps/web/src/lib/components/BrushPopover.svelte
index efe126b..5c55a53 100644
--- a/apps/web/src/lib/components/BrushPopover.svelte
+++ b/apps/web/src/lib/components/BrushPopover.svelte
@@ -1,9 +1,9 @@
 <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;
 	};
 
@@ -18,6 +18,7 @@
 	let smoothing = $derived(brush.smoothing);
 	let streamline = $derived(brush.streamline);
 	let simulatePressure = $derived(brush.simulatePressure);
+	let color = $derived(brush.color);
 
 	$effect(() => {
 		size = brush.size;
@@ -25,6 +26,7 @@
 		smoothing = brush.smoothing;
 		streamline = brush.streamline;
 		simulatePressure = brush.simulatePressure;
+		color = brush.color;
 	});
 
 	$effect(() => {
@@ -58,7 +60,7 @@
 	}
 
 	function handleSizeChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleThinningInput(event: Event) {
@@ -67,7 +69,7 @@
 	}
 
 	function handleThinningChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleSmoothingInput(event: Event) {
@@ -76,7 +78,7 @@
 	}
 
 	function handleSmoothingChange() {
-		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure });
+		onBrushChange({ size, thinning, smoothing, streamline, simulatePressure, color });
 	}
 
 	function handleStreamlineInput(event: Event) {
@@ -85,13 +87,22 @@
 	}
 
 	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>
 
@@ -181,6 +192,20 @@
 					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">
 				<label for="brush-simulate-pressure">
 					<input
@@ -310,6 +335,15 @@
 		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'] {
 		width: 16px;
 		height: 16px;
diff --git a/apps/web/src/lib/components/Toolbar.svelte b/apps/web/src/lib/components/Toolbar.svelte
index c271e45..4f0583f 100644
--- a/apps/web/src/lib/components/Toolbar.svelte
+++ b/apps/web/src/lib/components/Toolbar.svelte
@@ -1,9 +1,8 @@
 <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,
@@ -61,7 +60,7 @@
 	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();
@@ -385,7 +384,7 @@
 		applyStrokeColor(input.value);
 	}
 
-	function handleBrushChange(newBrush: BrushConfig) {
+	function handleBrushChange(newBrush: BrushSettings) {
 		brushStore.set(newBrush);
 	}
 </script>
diff --git a/apps/web/src/lib/status.ts b/apps/web/src/lib/status.ts
index 1bc4372..0eb653f 100644
--- a/apps/web/src/lib/status.ts
+++ b/apps/web/src/lib/status.ts
@@ -24,11 +24,13 @@ export type SnapStore = {
   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 = {
@@ -209,10 +211,17 @@ 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>();
+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() {
diff --git a/apps/web/src/lib/tests/BrushPopover.svelte.test.ts b/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
index 5807c32..79ee57b 100644
--- a/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
+++ b/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
@@ -1,16 +1,17 @@
 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 () => {
@@ -79,7 +80,7 @@ describe("BrushPopover", () => {
   });
 
   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 });
 
@@ -90,16 +91,18 @@ describe("BrushPopover", () => {
       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 });
@@ -142,5 +145,18 @@ describe("BrushPopover", () => {
 
       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" });
+    });
   });
 });
diff --git a/apps/web/src/lib/tests/Canvas.history.test.ts b/apps/web/src/lib/tests/Canvas.history.test.ts
index 24a1a3c..625333f 100644
--- a/apps/web/src/lib/tests/Canvas.history.test.ts
+++ b/apps/web/src/lib/tests/Canvas.history.test.ts
@@ -60,7 +60,14 @@ vi.mock(
       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: () => {},
diff --git a/apps/web/src/lib/tests/Canvas.keyboard.test.ts b/apps/web/src/lib/tests/Canvas.keyboard.test.ts
index 7b9a53e..b0c635f 100644
--- a/apps/web/src/lib/tests/Canvas.keyboard.test.ts
+++ b/apps/web/src/lib/tests/Canvas.keyboard.test.ts
@@ -79,7 +79,14 @@ vi.mock(
       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: () => {},
diff --git a/apps/web/src/lib/tests/Canvas.svelte.test.ts b/apps/web/src/lib/tests/Canvas.svelte.test.ts
index 51864be..4182949 100644
--- a/apps/web/src/lib/tests/Canvas.svelte.test.ts
+++ b/apps/web/src/lib/tests/Canvas.svelte.test.ts
@@ -29,7 +29,14 @@ vi.mock("$lib/status", () => {
       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: () => {},
diff --git a/packages/core/src/tools/pen.ts b/packages/core/src/tools/pen.ts
index 75f0715..e161d07 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 { 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";
@@ -44,7 +44,7 @@ const DEFAULT_BRUSH = { size: 16, thinning: 0.5, smoothing: 0.5, streamline: 0.5
 /**
  * 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
@@ -59,8 +59,9 @@ export class PenTool implements Tool {
   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: [],
@@ -69,6 +70,7 @@ export class PenTool implements Tool {
       lastUpdateFrame: null,
     };
     this.getBrush = getBrush ?? (() => DEFAULT_BRUSH);
+    this.getStrokeStyle = getStrokeStyle ?? (() => DEFAULT_STYLE);
   }
 
   onEnter(state: EditorState): EditorState {
@@ -114,10 +116,12 @@ export class PenTool implements Tool {
     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;
diff --git a/packages/core/tests/pen-tool.test.ts b/packages/core/tests/pen-tool.test.ts
index 9ede2f3..4f12bb4 100644
--- a/packages/core/tests/pen-tool.test.ts
+++ b/packages/core/tests/pen-tool.test.ts
@@ -224,6 +224,31 @@ describe("PenTool", () => {
       }
     });
 
+    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();
-- 
2.51.2