feat: snapping with pointer state management and grid adjustments/guidelines

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

···
 	});
 	const cursorStore = new CursorStore();
 	const snapStore: SnapStore = createSnapStore();
+	const pointerState = $state({ isPointerDown: false });
+	const snapProvider = { get: () => snapStore.get() };
+	const cursorProvider = { get: () => cursorStore.getState() };
+	const pointerStateProvider = { get: () => pointerState };
+	let pendingCommandStart: EditorState | null = null;
 
 	function applyLoadedDoc(doc: LoadedDoc) {
 		const firstPageId = doc.order.pageIds[0] ?? Object.keys(doc.pages)[0] ?? null;
···
 
 	function handleAction(action: Action) {
 		const actionWithSnap = applySnapping(action);
+
+		if (actionWithSnap.type === 'pointer-down' && actionWithSnap.button === 0) {
+			pointerState.isPointerDown = true;
+			pendingCommandStart = EditorState.clone(store.getState());
+			const changed = applyImmediateAction(actionWithSnap);
+			if (!changed) {
+				pendingCommandStart = null;
+			}
+			return;
+		}
+
+		if (actionWithSnap.type === 'pointer-move' && pointerState.isPointerDown && pendingCommandStart) {
+			void applyImmediateAction(actionWithSnap);
+			return;
+		}
+
+		if (actionWithSnap.type === 'pointer-up' && actionWithSnap.button === 0) {
+			pointerState.isPointerDown = false;
+			if (pendingCommandStart) {
+				const committed = commitPendingCommand(actionWithSnap, pendingCommandStart);
+				pendingCommandStart = null;
+				if (committed) {
+					return;
+				}
+			}
+		}
+
 		if (actionWithSnap.type === 'key-down') {
 			const isPrimary =
 				(actionWithSnap.modifiers.meta && navigator.platform.toUpperCase().includes('MAC')) ||
···
 		applyActionWithHistory(actionWithSnap);
 	}
 
+	function applyImmediateAction(action: Action): boolean {
+		const before = store.getState();
+		const nextState = routeAction(before, action, tools);
+		if (statesEqual(before, nextState)) {
+			return false;
+		}
+		store.setState(() => nextState);
+		return true;
+	}
+
+	function commitPendingCommand(action: Action, startState: EditorState): boolean {
+		const before = store.getState();
+		const nextState = routeAction(before, action, tools);
+		const finalState = statesEqual(before, nextState) ? before : nextState;
+		if (statesEqual(startState, finalState)) {
+			return false;
+		}
+		const kind = getCommandKind(startState, finalState);
+		const commandName = describeAction(action, kind);
+		const command = new SnapshotCommand(
+			commandName,
+			kind,
+			EditorState.clone(startState),
+			EditorState.clone(finalState)
+		);
+		store.executeCommand(command);
+		return true;
+	}
+
 	function statesEqual(a: EditorState, b: EditorState): boolean {
 		return a.doc === b.doc && a.camera === b.camera && a.ui === b.ui;
 	}
···
 			return store.getState().camera;
 		}
 
-		renderer = createRenderer(canvas, store);
+		renderer = createRenderer(canvas, store, { snapProvider, cursorProvider, pointerStateProvider });
 		inputAdapter = createInputAdapter({
 			canvas,
 			getCamera,
···
 	.editor {
 		width: 100%;
 		height: 100%;
+		min-height: 0;
 		display: flex;
 		flex-direction: column;
 	}
 
 	canvas {
 		flex: 1;
+		min-height: 0;
 		display: block;
 		touch-action: none;
 		cursor: default;

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

···
 	let editorSnapshot: EditorState = EditorStateOps.create();
 	let cursorSnapshot: CursorState = { cursorWorld: { x: 0, y: 0 }, lastMoveAt: Date.now() };
 	let persistenceSnapshot: PersistenceStatus = { backend: 'indexeddb', state: 'saved', pendingWrites: 0 };
-	let snapSnapshot = $state<SnapSettings>({ snapEnabled: false, gridEnabled: false, gridSize: 10 });
+	let snapSnapshot = $state<SnapSettings>({ snapEnabled: false, gridEnabled: true, gridSize: 25 });
 	let statusVm = $state(buildStatusBarVM(editorSnapshot, cursorSnapshot, persistenceSnapshot));
 	let zoomMenuOpen = $state(false);
 	let zoomMenuEl = $state<HTMLDivElement | null>(null);

apps/web/src/lib/status.ts

···
 }
 
 export function createSnapStore(initial?: Partial<SnapSettings>): SnapStore {
-  const defaults: SnapSettings = { snapEnabled: false, gridEnabled: false, gridSize: 10 };
+  const defaults: SnapSettings = { snapEnabled: false, gridEnabled: true, gridSize: 25 };
   let value: SnapSettings = { ...defaults, ...initial };
   const listeners = new Set<(snap: SnapSettings) => void>();
 

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

···
       timestamp: Date.now(),
     });
 
+    handler?.({
+      type: "pointer-move",
+      screen: { x: 10, y: 10 },
+      world: { x: 10, y: 10 },
+      buttons: { left: true, middle: false, right: false },
+      modifiers: { ctrl: false, shift: false, alt: false, meta: false },
+      timestamp: Date.now(),
+    });
+
+    handler?.({
+      type: "pointer-up",
+      screen: { x: 10, y: 10 },
+      world: { x: 10, y: 10 },
+      button: 0,
+      buttons: { left: false, middle: false, right: false },
+      modifiers: { ctrl: false, shift: false, alt: false, meta: false },
+      timestamp: Date.now(),
+    });
+
     const stores = (InkfiniteCore as any).__storeInstances as Array<{ commands: any[] }>;
     expect(stores.at(-1)?.commands).toHaveLength(1);
     expect(stores.at(-1)?.commands[0].kind).toBe("doc");

packages/renderer/src/index.ts

···
 import type {
   ArrowShape,
   Camera,
+  CursorState,
   EditorState,
   EllipseShape,
   LineShape,
···
   markDirty(): void;
 }
 
+export type SnapSettings = { snapEnabled: boolean; gridEnabled: boolean; gridSize: number };
+
+export type RendererOptions = {
+  snapProvider?: { get(): SnapSettings };
+  cursorProvider?: { get(): CursorState };
+  pointerStateProvider?: { get(): { isPointerDown: boolean } };
+};
+
 /**
  * Create a canvas renderer
  *
···
  *
  * @param canvas - The HTMLCanvasElement to render to
  * @param store - The editor state store
+ * @param gridProvider - Optional provider for grid settings (snap store)
  * @returns Renderer instance with dispose method
  */
-export function createRenderer(canvas: HTMLCanvasElement, store: Store): Renderer {
+export function createRenderer(canvas: HTMLCanvasElement, store: Store, options?: RendererOptions): Renderer {
   const maybeContext = canvas.getContext("2d");
   if (!maybeContext) {
     throw new Error("Failed to get 2D context from canvas");
···
 
     const viewport: Viewport = { width: canvas.width / getPixelRatio(), height: canvas.height / getPixelRatio() };
 
-    drawScene(context, state, viewport);
+    const snapSettings = options?.snapProvider?.get();
+    const cursorState = options?.cursorProvider?.get();
+    const pointerState = options?.pointerStateProvider?.get();
+    drawScene(context, state, viewport, snapSettings, cursorState, pointerState);
   }
 
   /**
···
 /**
  * Draw the entire scene
  */
-function drawScene(context: CanvasRenderingContext2D, state: EditorState, viewport: Viewport) {
+function drawScene(
+  context: CanvasRenderingContext2D,
+  state: EditorState,
+  viewport: Viewport,
+  snapSettings?: SnapSettings,
+  cursorState?: CursorState,
+  pointerState?: { isPointerDown: boolean },
+) {
   context.clearRect(0, 0, viewport.width, viewport.height);
 
   context.save();
 
   applyCameraTransform(context, state.camera, viewport);
 
-  drawGrid(context, state.camera, viewport);
+  drawGrid(context, state.camera, viewport, snapSettings);
 
   const shapes = getShapesOnCurrentPage(state);
   for (const shape of shapes) {
···
   }
 
   drawSelection(context, state, shapes);
+
+  drawSnapGuides(context, state.camera, viewport, snapSettings, cursorState, pointerState);
 
   context.restore();
 }
···
  * Draws a subtle grid that helps with spatial awareness and alignment.
  * The grid adapts to zoom level to maintain visual clarity.
  */
-function drawGrid(context: CanvasRenderingContext2D, camera: Camera, viewport: Viewport) {
-  const gridSize = 50;
+function drawGrid(context: CanvasRenderingContext2D, camera: Camera, viewport: Viewport, snapSettings?: SnapSettings) {
+  if (snapSettings && !snapSettings.gridEnabled) {
+    return;
+  }
+  const gridSize = snapSettings?.gridSize ?? 50;
   const minorGridColor = "rgba(128, 128, 128, 0.1)";
   const majorGridColor = "rgba(128, 128, 128, 0.2)";
 
···
     context.lineTo(endX, y);
     context.stroke();
   }
+}
+
+function drawSnapGuides(
+  context: CanvasRenderingContext2D,
+  camera: Camera,
+  viewport: Viewport,
+  snapSettings?: SnapSettings,
+  cursorState?: CursorState,
+  pointerState?: { isPointerDown: boolean },
+) {
+  if (!snapSettings?.snapEnabled || !cursorState || !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 halfWidth = viewport.width / (2 * camera.zoom);
+  const halfHeight = viewport.height / (2 * camera.zoom);
+  const minX = camera.x - halfWidth;
+  const maxX = camera.x + halfWidth;
+  const minY = camera.y - halfHeight;
+  const maxY = camera.y + halfHeight;
+
+  context.save();
+  const dashLength = 4 / camera.zoom;
+  context.setLineDash([dashLength, dashLength]);
+  context.lineWidth = 1 / camera.zoom;
+  context.strokeStyle = "rgba(59, 130, 246, 0.6)";
+
+  context.beginPath();
+  context.moveTo(minX, snappedY);
+  context.lineTo(maxX, snappedY);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(snappedX, minY);
+  context.lineTo(snappedX, maxY);
+  context.stroke();
+
+  context.setLineDash([]);
+  context.fillStyle = "rgba(59, 130, 246, 0.6)";
+  context.beginPath();
+  context.arc(snappedX, snappedY, 4 / camera.zoom, 0, Math.PI * 2);
+  context.fill();
+
+  context.restore();
 }
 
 /**