Cluster hulls: fix inverted offset normal, kill per-frame blur, labels toggle

Three problems from the first cut (user report 2026-09-13), all rooted
and fixed:

1. Boundaries reshaping on zoom — an inward offset normal. In y-down
   screen coordinates, monotone chain yields clockwise-on-screen hulls,
   whose OUTWARD normal is (dy, -dx); the code used (-dy, dx), so the
   14px padding pulled every hull vertex 14-20px INWARD. Zoomed in this
   mostly passed; zoomed out, once a cluster projected smaller than ~2x
   the pad, vertices crossed the centroid and the polygon self-
   intersected — spiky garbage re-forming every frame. Geometry moved to
   components/cluster-geometry.ts (exported, unit-tested) with the
   corrected normal; tests pin the direction (offset moves every vertex
   AWAY from the centroid; stays sane when the hull is smaller than the
   pad; hull orientation asserted clockwise-on-screen).

2. GPU ~100% + audible coil whine on any interaction — the hull redraw
   was hooked to sigma's afterRender, which fires for EVERY render
   including ~a dozen hover-animation frames per hover, and each redraw
   rasterized ~32 fills through ctx.filter blur(12px), a GPU-heavy
   full-canvas filter. Now: redraws happen ONLY on camera updates and
   resizes (hover leaves the hull canvas untouched — verified live),
   and the blur is replaced with layered low-alpha fills (soft edge at
   a fraction of the cost, no canvas filter at all).

3. Cluster labels cluttering the view — a persisted 'Cluster labels'
   checkbox in the rendering settings (hulls stay, text toggles).

377/377 tests, typecheck, lint, build green. Live-verified: hover does
not repaint hulls, zoom does; far zoom-out yields 3 contiguous tinted
regions (no fragmentation); toggle clears/returns labels and persists.

tests/clusters.test.ts

@@ -7,6 +7,7 @@
 import { strict as assert } from "node:assert";
 import { describe, test } from "node:test";
 import { detectCommunities, matchClusterLabelings, MIN_CLUSTER_SIZE } from "../src/core/clusters.ts";
+import { clusterHue, convexHull, offsetPolygon, outwardNormal } from "../components/cluster-geometry.ts";
 import type { Community } from "../src/core/clusters.ts";
 import type { ClusterLabeling } from "../src/core/contracts.ts";
 
@@ -72,6 +73,98 @@ describe("matchClusterLabelings", () => {
 	});
 });
 
+describe("hull geometry (the inward-normal regression)", () => {
+	// Screen coordinates: y grows DOWN. The first implementation used
+	// (-dy, dx) as the "outward" normal — which points INWARD for the
+	// clockwise-on-screen rings monotone chain produces here, shrinking
+	// every hull by the pad and inverting it entirely once a cluster
+	// projected smaller than ~2x the pad (spiky shape churn on zoom).
+
+	const dist = (a: { x: number; y: number }, b: { x: number; y: number }) => Math.hypot(a.x - b.x, a.y - b.y);
+
+	test("outwardNormal points away from a square's interior (screen coords)", () => {
+		const square = [
+			{ x: 0, y: 0 },
+			{ x: 10, y: 0 },
+			{ x: 10, y: 10 },
+			{ x: 0, y: 10 },
+		];
+		const center = { x: 5, y: 5 };
+		for (let i = 0; i < 4; i++) {
+			const a = square[i]!;
+			const b = square[(i + 1) % 4]!;
+			const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+			const n = outwardNormal(a, b);
+			// The normal translated from the edge midpoint moves AWAY from the center.
+			const moved = { x: mid.x + n.x, y: mid.y + n.y };
+			assert.ok(dist(moved, center) > dist(mid, center), `edge ${i}: normal points inward`);
+		}
+	});
+
+	test("offsetPolygon moves every vertex AWAY from the centroid", () => {
+		const hull = convexHull([
+			{ x: 0, y: 0 }, { x: 40, y: 3 }, { x: 55, y: 30 }, { x: 20, y: 44 }, { x: 2, y: 25 },
+		]);
+		const centroid = {
+			x: hull.reduce((s, p) => s + p.x, 0) / hull.length,
+			y: hull.reduce((s, p) => s + p.y, 0) / hull.length,
+		};
+		for (const [i, v] of hull.entries()) {
+			const moved = offsetPolygon(hull, 14)[i]!;
+			assert.ok(
+				dist(moved, centroid) > dist(v, centroid),
+				`vertex ${i} moved inward (was ${dist(v, centroid).toFixed(1)}, now ${dist(moved, centroid).toFixed(1)})`,
+			);
+		}
+	});
+
+	test("offsetPolygon stays sane when the hull is SMALLER than the pad (the zoom-out case)", () => {
+		// A 10px cluster padded by 14px: must still be a simple polygon
+		// (no vertex crossing the centroid, no inversion).
+		const hull = convexHull([
+			{ x: 0, y: 0 }, { x: 10, y: 1 }, { x: 9, y: 9 }, { x: 1, y: 8 },
+		]);
+		const centroid = {
+			x: hull.reduce((s, p) => s + p.x, 0) / hull.length,
+			y: hull.reduce((s, p) => s + p.y, 0) / hull.length,
+		};
+		const moved = offsetPolygon(hull, 14);
+		for (const v of moved) {
+			assert.ok(dist(v, centroid) >= 10, `vertex collapsed past the centroid: ${JSON.stringify(v)}`);
+		}
+		// Vertex ORDER stays angularly monotone around the centroid (no self-intersection).
+		const angles = moved.map((v) => Math.atan2(v.y - centroid.y, v.x - centroid.x));
+		let prev = angles[0]!;
+		for (const a of angles.slice(1)) {
+			let d = a - prev;
+			while (d > Math.PI) d -= 2 * Math.PI;
+			while (d < -Math.PI) d += 2 * Math.PI;
+			assert.ok(d !== 0, "duplicate angle — degenerate offset");
+			prev = a;
+		}
+	});
+
+	test("convexHull returns a clockwise-on-screen ring (the orientation the normal math assumes)", () => {
+		const hull = convexHull([
+			{ x: 0, y: 0 }, { x: 10, y: 0 }, { x: 10, y: 10 }, { x: 0, y: 10 },
+		]);
+		// Signed area in code coords: clockwise-on-screen (y-down) = positive.
+		let area = 0;
+		for (let i = 0; i < hull.length; i++) {
+			const a = hull[i]!;
+			const b = hull[(i + 1) % hull.length]!;
+			area += a.x * b.y - b.x * a.y;
+		}
+		assert.ok(area / 2 > 0, `expected positive (clockwise-on-screen) area, got ${area / 2}`);
+	});
+
+	test("clusterHue is stable per id and spreads", () => {
+		assert.equal(clusterHue("clu_abc123def456"), clusterHue("clu_abc123def456"));
+		const hues = new Set(Array.from({ length: 40 }, (_, i) => clusterHue(`clu_${i}`)));
+		assert.ok(hues.size > 25, `expected spread hues, got ${hues.size}`);
+	});
+});
+
 describe("detectCommunities", () => {
 	test("two dense cliques joined by a single bridge split into two communities", () => {
 		const left = ids(4, "L");