From 4acb3a614c8fba9253e9082dbbed2214c7e64b00 Mon Sep 17 00:00:00 2001
From: agent <agent@srazka.com>
Date: Sun, 27 Sep 2026 17:27:39 +0000
Subject: [PATCH] Replace page glow with a flat outline and add a canvas grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pages now get a crisp 1 screen-px outline instead of a blurred shadow,
and the canvas background shows faint world-anchored grid lines that
pan and zoom with the pages (spacing steps up ×4 when zoomed out).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app.css                          |  6 ++++--
 src/lib/components/CanvasView.svelte | 14 +++++++++++++-
 src/lib/components/PageView.svelte   |  3 ++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8b7ba45..76440c5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -59,7 +59,8 @@
 	--success: #2f9e5c;
 	--warn: #d9901b;
 	--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
-	--page-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+	--page-line: rgba(0, 0, 0, 0.18);
+	--grid-line: rgba(0, 0, 0, 0.05);
 	--ghost: rgba(0, 0, 0, 0.045);
 	--ghost-border: rgba(0, 0, 0, 0.12);
 	--radius: 6px;
@@ -85,7 +86,8 @@
 	--success: #44cf6e;
 	--warn: #e9973f;
 	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
-	--page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.5);
+	--page-line: rgba(255, 255, 255, 0.16);
+	--grid-line: rgba(255, 255, 255, 0.04);
 	--ghost: rgba(255, 255, 255, 0.04);
 	--ghost-border: rgba(255, 255, 255, 0.14);
 	color-scheme: dark;
diff --git a/src/lib/components/CanvasView.svelte b/src/lib/components/CanvasView.svelte
index 4f05d39..d401e9b 100644
--- a/src/lib/components/CanvasView.svelte
+++ b/src/lib/components/CanvasView.svelte
@@ -28,6 +28,13 @@
 	let stage: HTMLDivElement;
 	const cssVars = pageCssVars();
 
+	// Background grid: world-anchored, stepping up ×4 when zoomed out so lines never get denser than ~12px.
+	const gridStep = $derived.by(() => {
+		let step = 24 * viewport.scale;
+		while (step < 12) step *= 4;
+		return step;
+	});
+
 	// ---- autosave --------------------------------------------------------
 	$effect(() => {
 		if (doc.version > 0) untrack(() => workspace.scheduleSave());
@@ -522,6 +529,7 @@
 		class:panning
 		class:erasing={tools.tool === 'eraser'}
 		bind:this={stage}
+		style="--grid: {gridStep}px; background-position: {viewport.x}px {viewport.y}px"
 		onpointerdown={onPointerDown}
 		onpointermove={onPointerMove}
 		onpointerup={onPointerUp}
@@ -660,7 +668,11 @@
 		touch-action: none;
 		user-select: none;
 		-webkit-user-select: none;
-		background: var(--bg-canvas);
+		background-color: var(--bg-canvas);
+		background-image:
+			linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+			linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
+		background-size: var(--grid) var(--grid);
 	}
 	.stage :global(.cm-content) {
 		user-select: text;
diff --git a/src/lib/components/PageView.svelte b/src/lib/components/PageView.svelte
index 51843b8..ad52f25 100644
--- a/src/lib/components/PageView.svelte
+++ b/src/lib/components/PageView.svelte
@@ -49,7 +49,8 @@
 		inset: 0;
 		background: #ffffff;
 		overflow: hidden;
-		box-shadow: var(--page-shadow);
+		/* Crisp 1 screen-px outline, no blur. */
+		box-shadow: 0 0 0 calc(1px / var(--s)) var(--page-line);
 	}
 	.paper.invert {
 		filter: invert(0.88) hue-rotate(180deg);