Label gap, proportional glow, hover-out fade, centered coarse sliders

- LABEL_GAP 6 -> 2 (user: labels sit way too far below their nodes).
- Hover glow is now PROPORTIONAL to the disc — outer radius = node radius
  x 1.7 (GLOW_SCALE), matching the blur-a-copy-of-the-disc mental model,
  instead of the old constant +6px pad that read huge on small nodes and
  thin on big ones. GLOW_ALPHA 0.45 -> 0.3.
- Hover-OUT fade was broken by construction: draw() gated the glow on
  hoverId, which nulls instantly on leave, so the 180ms fade-out ran
  invisibly and the glow popped off in one frame. New hoverNode field
  outlives hoverId through the outgoing fade (cleared when the fade
  completes); verified live: 8 distinct frames over ~200ms then stable.
- Sliders rescaled per spec: ALL five are now log-scaled 0-100 with the
  default dead-center at 50 (ranges chosen as default/4..default*4:
  node/arrow/label size 0.5-8, edge width 0.25-4, labelZoom 0.0625-4),
  coarse step 5 (21 stops; labels-until-zoom was "way too granular" at
  201). Generic toSliderPosition/fromSliderPosition replace the
  labelZoom-only pair; sanitize clamps follow the same range constants;
  size sliders display compact values ("2", "1.6", "0.75").
EOF

components/graph-canvas.ts

@@ -112,13 +112,13 @@ export interface RendererCallbacks {
 const LABEL_SIZE = 12; // px — the default label size (settings.labelSize scales it)
 const LABEL_WEIGHT = "500";
 const LABEL_MAX_WIDTH = 170; // px — wraps long names instead of a wide strip
-const LABEL_GAP = 6; // px between node edge and first label line
+const LABEL_GAP = 2; // px between node edge and first label line (was 6 — user: way too far)
 const LABEL_LINE_HEIGHT = 1.3;
 /** Zoom span (camera-ratio units) over which labels fade together. */
 export const LABELS_FADE_SPAN = 0.5;
 
-const GLOW_PAD = 6; // px the halo extends beyond the node disc (constant)
-const GLOW_ALPHA = 0.45; // halo opacity at the disc edge, fading outward
+const GLOW_SCALE = 1.7; // halo outer radius = node radius x this (proportional, like blurring a copy of the disc)
+const GLOW_ALPHA = 0.3; // halo opacity at the disc edge, fading outward
 const HOVER_FADE_MS = 180; // hover halo opacity fade length
 const ZOOM_EASE_MS = 45; // wheel-zoom glide: exponential-ease time constant (~250ms per notch)
 
@@ -327,6 +327,11 @@ export class GraphCanvasRenderer {
 	// Hover transition: fade 0 = resting, 1 = fully hovered; the animating
 	// flag keeps the loop scheduled until the fade settles (then rAF stops).
 	private hoverId: string | null = null;
+	/** The node the glow is drawn on. OUTLIVES hoverId on hover-out so the
+	 *  fade has something to draw (hoverId nulls instantly; without this
+	 *  the glow popped off in one frame instead of fading). Cleared when
+	 *  the outgoing fade completes. */
+	private hoverNode: CanvasNode | null = null;
 	private hoverFade = 0;
 	private hoverFrom = 0;
 	private hoverTarget = 0;
@@ -548,6 +553,9 @@ export class GraphCanvasRenderer {
 	private setHover(nodeId: string | null): void {
 		if (nodeId === this.hoverId && this.hoverTarget === (nodeId ? 1 : 0)) return;
 		this.hoverId = nodeId;
+		// Hover-out deliberately KEEPS hoverNode: the glow must fade out
+		// from the last hovered node, not vanish with the id.
+		if (nodeId) this.hoverNode = this.nodeById.get(nodeId) ?? null;
 		// Rebase the animation from the CURRENT fade: rapid hover toggles
 		// glide instead of snapping (ported from the sigma-era behavior).
 		this.hoverFrom = this.hoverFade;
@@ -596,6 +604,8 @@ export class GraphCanvasRenderer {
 		if (this.hoverFade === this.hoverTarget) return false;
 		const t = Math.min((performance.now() - this.hoverStart) / HOVER_FADE_MS, 1);
 		this.hoverFade = this.hoverFrom + (this.hoverTarget - this.hoverFrom) * t;
+		// Outgoing fade finished — release the glow node.
+		if (this.hoverTarget === 0 && this.hoverFade === 0) this.hoverNode = null;
 		return t < 1;
 	}
 
@@ -655,7 +665,7 @@ export class GraphCanvasRenderer {
 		const nodeR = settings.nodeSize * s;
 		this.world = {
 			nodeR,
-			glowOuter: (settings.nodeSize + GLOW_PAD) * s,
+			glowOuter: nodeR * GLOW_SCALE,
 			labelSize: settings.labelSize * s,
 			labelGap: LABEL_GAP * s,
 		};
@@ -813,10 +823,10 @@ export class GraphCanvasRenderer {
 		// name, both on the SAME fade factor. World units like everything
 		// else. Shows even when labels are zoomed out (hover is its own
 		// affordance, not a label).
-		if (this.hoverId && this.hoverFade > 0.02) {
-			const n = this.visible && !this.visible.has(this.hoverId)
+		if (this.hoverNode && this.hoverFade > 0.02) {
+			const n = this.visible && !this.visible.has(this.hoverNode.id)
 				? null // filtered out by search — no glow on hidden nodes
-				: this.nodeById.get(this.hoverId);
+				: this.hoverNode;
 			if (n) {
 				const glow = ctx.createRadialGradient(n.x, n.y, nodeR, n.x, n.y, glowOuter);
 				glow.addColorStop(0, rgbaFromHex(data.colors.node, GLOW_ALPHA * this.hoverFade));

components/graph-view.tsx

@@ -69,11 +69,17 @@ import forceAtlas2 from "graphology-layout-forceatlas2";
 import { seededRandom, type GraphNode, type GraphSnapshot } from "@/src/core";
 import { GraphCanvasRenderer, type GraphRenderSettings } from "./graph-canvas.ts";
 import {
+	ARROW_LENGTH_RANGE,
 	DEFAULT_RENDER_SETTINGS,
+	EDGE_WIDTH_RANGE,
+	LABEL_SIZE_RANGE,
+	LABEL_ZOOM_MAX,
+	LABEL_ZOOM_MIN,
+	NODE_SIZE_RANGE,
+	fromSliderPosition,
 	labelZoomDisplay,
-	labelZoomToSlider,
 	sanitizeRenderSettings,
-	sliderToLabelZoom,
+	toSliderPosition,
 } from "@/src/core";
 
 /** The uniform node look (no state classes — canvas wants hex, not oklch):
@@ -133,6 +139,11 @@ interface Selection {
 }
 
 /** One labeled range row for the rendering-settings panel. */
+/** Compact size display for the log sliders: "2", "1.6", "0.75". */
+function sizeDisplay(v: number): string {
+	return `${v >= 1 ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100}`;
+}
+
 function SettingSlider({
 	label,
 	min,
@@ -498,50 +509,58 @@ export function GraphView() {
 					</div>
 					{settingsOpen && (
 						<div className="mt-1.5 flex flex-col gap-2 border-t pt-1.5">
+							{/* All sliders: log-scaled 0-100, step 5, so every
+							    DEFAULT sits at 50 (src/core/render-settings.ts). */}
 							<SettingSlider
 								label="Node size"
-								min={1}
-								max={14}
-								step={0.5}
-								value={settings.nodeSize}
-								onChange={(v) => changeSettings((cur) => ({ ...cur, nodeSize: v }))}
+								min={0}
+								max={100}
+								step={5}
+								value={toSliderPosition(settings.nodeSize, NODE_SIZE_RANGE.min, NODE_SIZE_RANGE.max)}
+								display={sizeDisplay(settings.nodeSize)}
+								onChange={(p) =>
+									changeSettings((cur) => ({ ...cur, nodeSize: fromSliderPosition(p, NODE_SIZE_RANGE.min, NODE_SIZE_RANGE.max) }))}
 							/>
 							<SettingSlider
 								label="Edge width"
-								min={0.25}
-								max={4}
-								step={0.25}
-								value={settings.edgeWidth}
-								onChange={(v) => changeSettings((cur) => ({ ...cur, edgeWidth: v }))}
+								min={0}
+								max={100}
+								step={5}
+								value={toSliderPosition(settings.edgeWidth, EDGE_WIDTH_RANGE.min, EDGE_WIDTH_RANGE.max)}
+								display={sizeDisplay(settings.edgeWidth)}
+								onChange={(p) =>
+									changeSettings((cur) => ({ ...cur, edgeWidth: fromSliderPosition(p, EDGE_WIDTH_RANGE.min, EDGE_WIDTH_RANGE.max) }))}
 							/>
 							<SettingSlider
 								label="Arrowhead size"
-								min={1}
-								max={15}
-								step={0.5}
-								value={settings.arrowLength}
-								onChange={(v) => changeSettings((cur) => ({ ...cur, arrowLength: v }))}
+								min={0}
+								max={100}
+								step={5}
+								value={toSliderPosition(settings.arrowLength, ARROW_LENGTH_RANGE.min, ARROW_LENGTH_RANGE.max)}
+								display={sizeDisplay(settings.arrowLength)}
+								onChange={(p) =>
+									changeSettings((cur) => ({ ...cur, arrowLength: fromSliderPosition(p, ARROW_LENGTH_RANGE.min, ARROW_LENGTH_RANGE.max) }))}
 							/>
 							<SettingSlider
 								label="Label size"
-								min={1}
-								max={24}
-								step={0.5}
-								value={settings.labelSize}
-								onChange={(v) => changeSettings((cur) => ({ ...cur, labelSize: v }))}
+								min={0}
+								max={100}
+								step={5}
+								value={toSliderPosition(settings.labelSize, LABEL_SIZE_RANGE.min, LABEL_SIZE_RANGE.max)}
+								display={sizeDisplay(settings.labelSize)}
+								onChange={(p) =>
+									changeSettings((cur) => ({ ...cur, labelSize: fromSliderPosition(p, LABEL_SIZE_RANGE.min, LABEL_SIZE_RANGE.max) }))}
 							/>
-							{/* Log-scaled: the useful band (0.25–0.5 in camera-ratio
-							    units) sits mid-slider; displayed units normalize the
-							    default (0.5) to "1×". Slider position ↔ labelZoom via
-							    src/core/render-settings.ts. */}
+							{/* Displayed units normalize the default (0.5) to "1×". */}
 							<SettingSlider
 								label="Labels until zoom"
 								min={0}
-								max={1000}
+								max={100}
 								step={5}
-								value={labelZoomToSlider(settings.labelZoom)}
+								value={toSliderPosition(settings.labelZoom, LABEL_ZOOM_MIN, LABEL_ZOOM_MAX)}
 								display={labelZoomDisplay(settings.labelZoom)}
-								onChange={(v) => changeSettings((cur) => ({ ...cur, labelZoom: sliderToLabelZoom(v) }))}
+								onChange={(p) =>
+									changeSettings((cur) => ({ ...cur, labelZoom: fromSliderPosition(p, LABEL_ZOOM_MIN, LABEL_ZOOM_MAX) }))}
 							/>
 							<label className="flex cursor-pointer items-center justify-between text-[11px] text-muted-foreground">
 								<span>Cluster labels</span>