@fjader/svelte 0.2.0 → 0.2.2

package/dist/components/charts/ChartCell.svelte

@@ -426,6 +426,8 @@
 		onInteractorPointerDown: null,
 		onInteractorPointerMove: null,
 		onInteractorPointerUp: null,
+		onInteractorDragEnd: null,
+		reroutePress: () => reroutePress(),
 		activators: new Set()
 	};
 
@@ -469,10 +471,87 @@
 		}
 	}
 
+	// The origin is read on pointer enter, but the chart can move under a pointer
+	// already inside it: a scroll that carries on after the pointer arrives (the
+	// wheel passes through to the page for a moment, see WheelInteractionControl),
+	// a resize, or content above it changing height. Scroll and resize mark it
+	// stale; layout shifts fire no event, so it is also re-read every
+	// ORIGIN_CHECK_MS while hovered. Re-reading every frame instead cost a forced
+	// layout on most frames, for a chart that almost never moves.
+	const ORIGIN_CHECK_MS = 250;
+	let pointerInside = false;
+	let originStale = false;
+	let originCheckedAt = 0;
+	// Whether the pointer is over the SVG and its last position there, to
+	// re-apply the hover when the chart moves under a still pointer. The position
+	// is current only while pointerOverSvg holds: moves over the facet label or
+	// palette are not tracked.
+	let pointerOverSvg = false;
+	let lastClientX = 0;
+	let lastClientY = 0;
+
+	/**
+	 * The element of the SVG at a viewport position, or null outside it. A fresh
+	 * hit test on the chart's root (a shadow root, if the host renders into one),
+	 * for when an event's target cannot say: during pointer capture it is the
+	 * capturing element, and a chart moving under a still pointer fires no event.
+	 */
+	function svgElementAt(clientX: number, clientY: number): Element | null {
+		const root = chartCellEl?.getRootNode() as Document | ShadowRoot | undefined;
+		const hit = root?.elementFromPoint?.(clientX, clientY) ?? null;
+		return hit && svg?.contains(hit) ? hit : null;
+	}
+
+	function markOriginStale(): void {
+		originStale = true;
+	}
+
+	/** Re-read the origin when stale or due, from the frame callback while hovered. */
+	function checkSvgOrigin(): void {
+		const now = performance.now();
+		if (!originStale && now - originCheckedAt < ORIGIN_CHECK_MS) return;
+		originStale = false;
+		originCheckedAt = now;
+
+		const left = svgLeft;
+		const top = svgTop;
+		refreshSvgOrigin();
+		if (svgLeft === left && svgTop === top) return;
+		// The chart moved under a still pointer: move the crosshair with it. A
+		// drag or pan in progress gets its next position from the next move.
+		if (!pointerOverSvg || pressPointerId != null) return;
+		// Something else may be under the pointer now. Layout was just flushed by
+		// the origin read, so the hit test is cheap, and this runs only on a move.
+		const overBrush = !!svgElementAt(lastClientX, lastClientY)?.closest('.brush-overlay');
+		updateHover(lastClientX - svgLeft, lastClientY - svgTop, overBrush);
+	}
+
+	// Its own callback rather than the tooltip's, which faceted cells do not have.
+	onMount(() => {
+		const originCallback = () => {
+			if (pointerInside) checkSvgOrigin();
+		};
+		gpuCoordinator.addFrameCallback(originCallback);
+		return () => gpuCoordinator.removeFrameCallback(originCallback);
+	});
+
+	function handleSvgPointerEnter(event: PointerEvent) {
+		pointerOverSvg = true;
+		lastClientX = event.clientX;
+		lastClientY = event.clientY;
+	}
+
+	function handleSvgPointerLeave() {
+		pointerOverSvg = false;
+	}
+
 	function handleChartPointerEnter(event: PointerEvent) {
 		activateSources();
 		hoverSettle.enter();
 		refreshSvgOrigin();
+		pointerInside = true;
+		originStale = false;
+		originCheckedAt = performance.now();
 		gpuCoordinator.setChartHovered(layout.chartId);
 		wheelControl.handlePointerEnter();
 		// Focus so [ / ] keyboard shortcuts work for tooltip cycling.
@@ -485,6 +564,8 @@
 	}
 
 	function handleChartPointerLeave() {
+		pointerInside = false;
+		pointerOverSvg = false;
 		hoverSettle.leave();
 		gpuCoordinator.setChartUnhovered(layout.chartId);
 		wheelControl.handlePointerLeave();
@@ -557,7 +638,20 @@
 		paletteOpen = !paletteOpen;
 	}
 
+	/** Whether a key event's target takes text: an input, a textarea, or contenteditable. */
+	function isEditable(target: EventTarget | null): boolean {
+		const el = target as HTMLElement | null;
+		return !!el && (el.isContentEditable || el.tagName === 'INPUT' || el.tagName === 'TEXTAREA');
+	}
+
 	function handleKeyDown(event: KeyboardEvent) {
+		// Space over a chart is the brushes' pan key, so it must not scroll the
+		// page, which is what the browser does with Space on the focused cell.
+		// Only while the pointer is inside: the cell keeps focus after it leaves.
+		// Not in a text field, such as the command palette's input.
+		if (event.code === 'Space' && pointerInside && !isEditable(event.target)) {
+			event.preventDefault();
+		}
 		if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
 			event.preventDefault();
 			paletteOpen = !paletteOpen;
@@ -643,22 +737,59 @@
 		activePanY = false;
 	}
 
+	// The press under way, for reroutePress: its pointer, where it is now, and
+	// whether it was re-routed (then never a click, which would clear a brush).
+	let pressPointerId: number | null = null;
+	let pressClientX = 0;
+	let pressClientY = 0;
+	let pressRerouted = false;
+
 	function handlePointerDown(event: PointerEvent) {
 		hoverSettle.hold(true);
 		event.preventDefault();
 		chartCellEl?.focus({ preventScroll: true });
 
-		pointerBuffer.x = ptrX(event);
-		pointerBuffer.y = ptrY(event);
+		pressPointerId = event.pointerId;
+		pressRerouted = false;
+		pressClientX = event.clientX;
+		pressClientY = event.clientY;
+		routePress(event.target as Element, event.pointerId, event.clientX, event.clientY);
+	}
+
+	/**
+	 * Route the press under way again where the pointer is now, ending what it
+	 * was doing first. The element under the pointer comes from a fresh hit
+	 * test, since during pointer capture the events' target is the capturing
+	 * element.
+	 */
+	function reroutePress() {
+		if (pressPointerId == null || isReordering) return;
+		if (isPanning) stopPan();
+		else chartContext.onInteractorDragEnd?.();
+		pressRerouted = true;
+
+		const target = svgElementAt(pressClientX, pressClientY) ?? svg;
+		if (target) routePress(target, pressPointerId, pressClientX, pressClientY);
+	}
+
+	/**
+	 * Offer a press to the interactor, and pan if it declines. `target` is the
+	 * element under the pointer: a press on a brush's overlay goes to the brush
+	 * even just outside the plot area, where its edge handles reach.
+	 */
+	function routePress(target: Element, pointerId: number, clientX: number, clientY: number) {
+		pointerBuffer.x = clientX - svgLeft;
+		pointerBuffer.y = clientY - svgTop;
 		const { xInBounds, yInBounds, innerPoint } = layout.getActiveAxes(pointerBuffer);
 
 		// Parallel axes are vertical — yInBounds is sufficient, nearestParallelAxis handles x-proximity.
 		// This mirrors how regular charts let margin interactions target the in-bounds axis.
 		const parallelInBounds = yInBounds && !!scales.parallelScales;
 
+		const onBrush = !!target.closest?.('[data-brush-handle]');
 		if (
-			((xInBounds && yInBounds) || parallelInBounds) &&
-			chartContext.onInteractorPointerDown?.(event, innerPoint)
+			((xInBounds && yInBounds) || parallelInBounds || onBrush) &&
+			chartContext.onInteractorPointerDown?.(target, pointerId, innerPoint)
 		) {
 			currentInnerX = null;
 			currentInnerY = null;
@@ -676,7 +807,7 @@
 			scales.clearCurrentDataPoints();
 			currentInnerX = null;
 			currentInnerY = null;
-			(event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+			target.setPointerCapture?.(pointerId);
 			return;
 		}
 
@@ -688,7 +819,7 @@
 			scales.startParallelReorder(innerPoint.x, layout.innerWidth)
 		) {
 			isReordering = true;
-			(event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+			target.setPointerCapture?.(pointerId);
 			return;
 		}
 
@@ -708,7 +839,7 @@
 		scales.clearCurrentDataPoints();
 		currentInnerX = null;
 		currentInnerY = null;
-		(event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+		target.setPointerCapture?.(pointerId);
 	}
 
 	/** The pointer buffer set to an SVG-root position, for layout methods that read a Point. */
@@ -719,6 +850,12 @@
 	}
 
 	function processPointerMove(event: PointerEvent) {
+		if (event.pointerId === pressPointerId) {
+			pressClientX = event.clientX;
+			pressClientY = event.clientY;
+		}
+		lastClientX = event.clientX;
+		lastClientY = event.clientY;
 		const x = ptrX(event);
 		const y = ptrY(event);
 		if (isReordering) {
@@ -732,8 +869,8 @@
 		} else if (
 			chartContext.onInteractorPointerMove?.(event, layout.toInnerCoordinates(setPointer(x, y)))
 		) {
-			// Brush move/resize use stopPropagation, bypassing handlePointerDown cleanup.
-			// Guard ensures this only runs once on the first captured move.
+			// Clear the hover point once per drag. A press clears it when the
+			// interactor takes it, but a press re-routed mid-drag can start one too.
 			if (currentInnerX != null) {
 				currentInnerX = null;
 				currentInnerY = null;
@@ -741,31 +878,36 @@
 				tooltipManager?.updatePosition(null, null);
 			}
 		} else {
-			pointerBuffer.x = x;
-			pointerBuffer.y = y;
-
-			if (layout.isWithinInnerBounds(pointerBuffer)) {
-				const innerPoint = layout.toInnerCoordinates(pointerBuffer);
-				currentInnerX = innerPoint.x;
-				currentInnerY = innerPoint.y;
-				scales.updateCurrentDataPoints(innerPoint, layout.innerWidth, layout.innerHeight);
-				// Suppress tooltip over brush overlays — crosshair/margin labels stay active
-				const overBrush = (event.target as Element)?.closest?.('.brush-overlay');
-				if (overBrush) {
-					tooltipManager?.updatePosition(null, null);
-				} else {
-					tooltipManager?.updatePointerScreen(x, y);
-					tooltipManager?.updatePosition(
-						scales.xScaleState?.currentDataPoint,
-						scales.yScaleState?.currentDataPoint
-					);
-				}
-			} else {
-				currentInnerX = null;
-				currentInnerY = null;
-				scales.clearCurrentDataPoints();
+			const overBrush = !!(event.target as Element)?.closest?.('.brush-overlay');
+			updateHover(x, y, overBrush);
+		}
+	}
+
+	/** Crosshair, hover points and tooltip for the pointer at an SVG-root position. */
+	function updateHover(x: number, y: number, overBrush: boolean): void {
+		pointerBuffer.x = x;
+		pointerBuffer.y = y;
+
+		if (layout.isWithinInnerBounds(pointerBuffer)) {
+			const innerPoint = layout.toInnerCoordinates(pointerBuffer);
+			currentInnerX = innerPoint.x;
+			currentInnerY = innerPoint.y;
+			scales.updateCurrentDataPoints(innerPoint, layout.innerWidth, layout.innerHeight);
+			// Suppress tooltip over brush overlays — crosshair/margin labels stay active
+			if (overBrush) {
 				tooltipManager?.updatePosition(null, null);
+			} else {
+				tooltipManager?.updatePointerScreen(x, y);
+				tooltipManager?.updatePosition(
+					scales.xScaleState?.currentDataPoint,
+					scales.yScaleState?.currentDataPoint
+				);
 			}
+		} else {
+			currentInnerX = null;
+			currentInnerY = null;
+			scales.clearCurrentDataPoints();
+			tooltipManager?.updatePosition(null, null);
 		}
 	}
 
@@ -780,6 +922,11 @@
 	}
 
 	function handlePointerUp(event: PointerEvent) {
+		const rerouted = pressRerouted && event.pointerId === pressPointerId;
+		if (event.pointerId === pressPointerId) {
+			pressPointerId = null;
+			pressRerouted = false;
+		}
 		hoverSettle.hold(false);
 		if (isReordering) {
 			isReordering = false;
@@ -787,11 +934,17 @@
 			scales.endParallelReorder();
 			return;
 		}
-		if (chartContext.onInteractorPointerUp?.(event)) return;
+		// A re-routed press ends as a drag even if it never moved: it is no click.
+		if (rerouted) chartContext.onInteractorDragEnd?.();
+		else if (chartContext.onInteractorPointerUp?.(event)) return;
+		(event.target as Element | null)?.releasePointerCapture?.(event.pointerId);
+		stopPan();
+	}
+
+	function stopPan() {
 		isPanning = false;
 		activePanX = false;
 		activePanY = false;
-		(event.target as Element | null)?.releasePointerCapture?.(event.pointerId);
 		scales.endPan();
 		scales.endParallelPan();
 	}
@@ -872,6 +1025,8 @@
 	const cellReady = $derived(layout.isReady);
 </script>
 
+<svelte:window onscrollcapture={markOriginStale} onresize={markOriginStale} />
+
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="chart-cell"
@@ -912,6 +1067,8 @@
 				width={layout.width}
 				height={layout.height}
 				onwheel={handleWheel}
+				onpointerenter={handleSvgPointerEnter}
+				onpointerleave={handleSvgPointerLeave}
 				onpointerdown={handlePointerDown}
 				onpointermove={handlePointerMove}
 				onpointerrawupdate={handlePointerRawUpdate}

package/dist/components/charts/ChartContainer.svelte

@@ -441,6 +441,9 @@
 		onInteractorPointerDown: null,
 		onInteractorPointerMove: null,
 		onInteractorPointerUp: null,
+		onInteractorDragEnd: null,
+		// Presses belong to the chart cells, whose context the brushes get.
+		reroutePress: () => {},
 		activators: new Set()
 	};
 

package/dist/components/marks/RectYMark.svelte

@@ -366,5 +366,4 @@
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}
 	/>
-	>
 {/if}

package/dist/components/rendering/Areas.svelte

@@ -3,6 +3,7 @@
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
 	import { getCurveWGSL, getCurveResolution } from '../../gpu/CurveShaderLib';
+	import { NAN_WGSL } from '../../gpu/NanShaderLib';
 	import { DEFAULT_FILL_COLOR } from '../../scales/color-utils';
 	import type { ChartContext, WebGPUCanvasContext, CurveType } from '../../types';
 
@@ -159,9 +160,7 @@
   @group(1) @binding(4) var<storage, read> colorValues: array<f32>;
   {{FACET_BINDING}}
 
-  fn isNaN(v: f32) -> bool {
-    return v != v;
-  }
+  ${NAN_WGSL}
 
   // Map (dimension, boundary) to (x, y) based on orientation
   fn makePoint(dimVal: f32, boundaryVal: f32) -> vec2<f32> {

package/dist/components/rendering/Lines.svelte

@@ -3,6 +3,7 @@
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
 	import { getCurveWGSL, getCurveResolution } from '../../gpu/CurveShaderLib';
+	import { NAN_WGSL } from '../../gpu/NanShaderLib';
 	import { DEFAULT_STROKE_COLOR } from '../../scales/color-utils';
 	import type { ChartContext, WebGPUCanvasContext, CurveType } from '../../types';
 	import type { M4Decimator } from '../../gpu/decimation/M4Decimator.svelte';
@@ -156,9 +157,7 @@
   @group(1) @binding(3) var<storage, read> colorValues: array<f32>;
   {{FACET_BINDING}}
 
-  fn isNaN(v: f32) -> bool {
-    return v != v;
-  }
+  ${NAN_WGSL}
 
   const DISCARD_POS = vec4<f32>(2.0, 2.0, 2.0, 1.0);
 

package/dist/components/rendering/ParallelLines.svelte

@@ -3,6 +3,7 @@
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
 	import { getCurveWGSL, getCurveResolution } from '../../gpu/CurveShaderLib';
+	import { NAN_WGSL } from '../../gpu/NanShaderLib';
 	import { DEFAULT_STROKE_COLOR } from '../../scales/color-utils';
 	import type { ChartContext, CurveType, WebGPUCanvasContext } from '../../types';
 
@@ -123,7 +124,7 @@
   // writes; only linear math is applied to them today.
   @group(1) @binding(3) var<uniform> axisScales: array<ScaleParam, ${MAX_AXES}>;
 
-  fn isNaN(v: f32) -> bool { return v != v; }
+  ${NAN_WGSL}
   const DISCARD_POS = vec4<f32>(2.0, 2.0, 2.0, 1.0);
 
   fn getAxisOrder(visualIdx: u32) -> u32 {

package/dist/data/DataAccessor.js

@@ -29,7 +29,7 @@ export class ArrowDataAccessor {
         // FAST PATH: Single chunk numeric - try to return underlying buffer directly.
         // NULL handling: Query-level COALESCE(CAST(expr AS REAL), 'NaN'::REAL)
         // converts SQL NULLs to the NaN float value, so Arrow columns from Fjader
-        // queries have nullCount=0 and clean buffers. GPU shaders detect NaN (v != v)
+        // queries have nullCount=0 and clean buffers. GPU shaders detect NaN by its bit pattern (NanShaderLib)
         // and discard those vertices to create gaps in lines/areas.
         if (!isStringType && col.data.length === 1) {
             const chunk = col.data[0];

package/dist/gpu/ColorScaleShaderLib.d.ts

@@ -17,4 +17,4 @@ export declare const COLOR_CONFIG_SLOT_BASE_OFFSET = 32;
 export declare const NO_SLOT_TABLE = 4294967295;
 export declare const COLOR_SCALE_STRUCTS = "\nstruct ColorConfig {\n    domainMin: f32,         // byte 0  \u2014 pre-transformed for non-linear types\n    domainMax: f32,         // byte 4  \u2014 pre-transformed for non-linear types\n    rampOffset: u32,        // byte 8\n    paletteOffset: u32,     // byte 12\n    paletteSize: u32,       // byte 16\n    scaleType: u32,         // byte 20 \u2014 scheme rendering type (ordinal/sequential/diverging/cyclical)\n    transformType: u32,     // byte 24 \u2014 normalization transform (linear/log/symlog/sqrt/pow)\n    transformParam: f32,    // byte 28 \u2014 symlog constant C, or pow exponent\n    slotBase: u32,          // byte 32 \u2014 base into identitySlots, or NO_SLOT_TABLE\n    _pad0: u32,             // byte 36\n    _pad1: u32,             // byte 40\n    _pad2: u32,             // byte 44\n}\n\n/**\n * slotBase when this scale's channel already carries a palette index rather\n * than an identity id. Distinct from base 0, which is a real block \u2014 the\n * permanently empty one \u2014 so it cannot be confused with \"not placed\".\n */\nconst NO_SLOT_TABLE: u32 = 0xFFFFFFFFu;\n\nconst COLOR_SCALE_ORDINAL: u32 = 0u;\nconst COLOR_SCALE_SEQUENTIAL: u32 = 1u;\nconst COLOR_SCALE_DIVERGING: u32 = 2u;\nconst COLOR_SCALE_CYCLICAL: u32 = 3u;\n\nconst COLOR_TRANSFORM_LINEAR: u32 = 0u;\nconst COLOR_TRANSFORM_LOG: u32 = 1u;\nconst COLOR_TRANSFORM_SYMLOG: u32 = 2u;\nconst COLOR_TRANSFORM_SQRT: u32 = 3u;\nconst COLOR_TRANSFORM_POW: u32 = 4u;\n";
 export declare const COLOR_SCALE_BINDINGS = "\n@group(2) @binding(1) var<storage, read> colorConfigs: array<ColorConfig>;\n@group(2) @binding(2) var<storage, read> colorRamps: array<vec4<f32>>;\n@group(2) @binding(3) var<storage, read> ordinalPalettes: array<vec4<f32>>;\n";
-export declare const COLOR_SCALE_FUNCTIONS = "\nfn applyColorTransform(config: ColorConfig, value: f32) -> f32 {\n    switch config.transformType {\n        case COLOR_TRANSFORM_LOG: {\n            return log(max(value, 1e-38));\n        }\n        case COLOR_TRANSFORM_SYMLOG: {\n            let c = config.transformParam;\n            return sign(value) * log(1.0 + abs(value / c));\n        }\n        case COLOR_TRANSFORM_SQRT: {\n            return sign(value) * sqrt(abs(value));\n        }\n        case COLOR_TRANSFORM_POW: {\n            return sign(value) * pow(abs(value), config.transformParam);\n        }\n        default: {\n            return value;\n        }\n    }\n}\n\nfn normalizeValue(config: ColorConfig, value: f32) -> f32 {\n    let transformed = applyColorTransform(config, value);\n\n    let range = config.domainMax - config.domainMin;\n\n    if (abs(range) < 0.0001) {\n        return 0.5;\n    }\n\n    let t_raw = (transformed - config.domainMin) / range;\n\n    if (config.scaleType == COLOR_SCALE_CYCLICAL) {\n        return fract(t_raw);\n    }\n\n    return clamp(t_raw, 0.0, 1.0);\n}\n\nfn sampleRamp(config: ColorConfig, t: f32) -> vec4<f32> {\n    let idx = min(u32(t * 255.0), 255u); // Must match COLOR_RAMP_RESOLUTION (256 stops)\n    return colorRamps[config.rampOffset + idx];\n}\n\nfn samplePalette(config: ColorConfig, categoryIndex: u32) -> vec4<f32> {\n    // The channel carries an identity id, which is stable and has nothing to do\n    // with this scale's palette. Resolve it to this scale's own rank first; the\n    // palette is indexed by rank, so the plotted categories take palette colours\n    // in order and the wrap below is over the PLOTTED count, not the dim's.\n    var idx = categoryIndex;\n    if (config.slotBase != NO_SLOT_TABLE) {\n        let slot = identitySlot(config.slotBase, categoryIndex);\n        if (slot < 0.0) {\n            // Not ranked by this scale: a category outside its domain.\n            return vec4<f32>(0.0, 0.0, 0.0, 0.0);\n        }\n        idx = u32(slot);\n    }\n    return ordinalPalettes[config.paletteOffset + (idx % config.paletteSize)];\n}\n\nfn getColorFromScale(scaleIndex: u32, value: f32, nullColor: vec4<f32>) -> vec4<f32> {\n    let config = colorConfigs[scaleIndex];\n\n    if (config.scaleType == COLOR_SCALE_ORDINAL) {\n        // 0-based indexing: -1 = null, 0+ = valid categories\n        if (value < 0.0) {\n            return nullColor;\n        }\n        let catIdx = u32(value);\n        return samplePalette(config, catIdx);\n    }\n\n    if (value != value) {\n        return nullColor;\n    }\n\n    // Log requires strictly positive values \u2014 treat \u22640 as unmappable\n    if (config.transformType == COLOR_TRANSFORM_LOG && value <= 0.0) {\n        return nullColor;\n    }\n\n    let t = normalizeValue(config, value);\n    return sampleRamp(config, t);\n}\n\nfn getOrdinalColor(scaleIndex: u32, categoryIndex: u32, nullColor: vec4<f32>) -> vec4<f32> {\n    // Note: This function expects u32, so caller must handle -1 check before casting\n    let config = colorConfigs[scaleIndex];\n    return samplePalette(config, categoryIndex);\n}\n\nfn getContinuousColor(scaleIndex: u32, value: f32, nullColor: vec4<f32>) -> vec4<f32> {\n    if (value != value) {\n        return nullColor;\n    }\n    let config = colorConfigs[scaleIndex];\n    if (config.transformType == COLOR_TRANSFORM_LOG && value <= 0.0) {\n        return nullColor;\n    }\n    let t = normalizeValue(config, value);\n    return sampleRamp(config, t);\n}\n";
+export declare const COLOR_SCALE_FUNCTIONS: string;

package/dist/gpu/ColorScaleShaderLib.js

@@ -1,3 +1,4 @@
+import { isNanExpr } from './NanShaderLib';
 // src/lib/gpu/ColorScaleShaderLib.ts
 // ---------------------------------------------------------------------------
 // Design note: branching vs JIT-compiled shaders for color normalization
@@ -148,7 +149,7 @@ fn getColorFromScale(scaleIndex: u32, value: f32, nullColor: vec4<f32>) -> vec4<
         return samplePalette(config, catIdx);
     }
 
-    if (value != value) {
+    if (${isNanExpr('value')}) {
         return nullColor;
     }
 
@@ -168,7 +169,7 @@ fn getOrdinalColor(scaleIndex: u32, categoryIndex: u32, nullColor: vec4<f32>) ->
 }
 
 fn getContinuousColor(scaleIndex: u32, value: f32, nullColor: vec4<f32>) -> vec4<f32> {
-    if (value != value) {
+    if (${isNanExpr('value')}) {
         return nullColor;
     }
     let config = colorConfigs[scaleIndex];

package/dist/gpu/NanShaderLib.d.ts

@@ -0,0 +1,30 @@
+/**
+ * NaN tests for WGSL that a shader compiler cannot remove.
+ *
+ * fjader sends nulls to the GPU as NaN. WGSL lets an implementation assume
+ * floats are finite, and Apple's Metal compilers act on that: `v != v` and
+ * `!(v == v)` can compile to `false`, so a NaN goes undetected. Whether that
+ * happens depends on the GPU generation and on the code around the test, so a
+ * check that works on one Mac can be gone on another. /test/nan-probe shows
+ * what a given GPU does.
+ *
+ * These test the bit pattern instead: an exponent of all ones and a non-zero
+ * mantissa. That is integer arithmetic, which no float assumption touches.
+ *
+ * `NAN_BITS` is the quiet NaN written wherever a shader needs to produce one.
+ * Writing it as bits into a u32 view of the buffer keeps it exact; producing
+ * a NaN through float arithmetic is not guaranteed to.
+ */
+/** The quiet NaN fjader writes, as bits. */
+export declare const NAN_BITS_HEX = "0x7FC00000u";
+/**
+ * `isNanBits(u)` for a value read through a u32 view, and `isNaN(v)` for one
+ * already loaded as f32. Prefer the u32 view where a shader can read the
+ * buffer that way: it never loads the NaN as a float at all.
+ */
+export declare const NAN_WGSL = "\nconst NAN_BITS: u32 = 0x7FC00000u;\n\nfn isNanBits(u: u32) -> bool {\n\treturn (u & 0x7fffffffu) > 0x7f800000u;\n}\n\nfn isNaN(v: f32) -> bool {\n\treturn isNanBits(bitcast<u32>(v));\n}\n";
+/**
+ * The same test as an expression, for shader libraries that are pasted into
+ * other shaders and so cannot define functions those shaders may define too.
+ */
+export declare function isNanExpr(f32Expr: string): string;

package/dist/gpu/NanShaderLib.js

@@ -0,0 +1,42 @@
+/**
+ * NaN tests for WGSL that a shader compiler cannot remove.
+ *
+ * fjader sends nulls to the GPU as NaN. WGSL lets an implementation assume
+ * floats are finite, and Apple's Metal compilers act on that: `v != v` and
+ * `!(v == v)` can compile to `false`, so a NaN goes undetected. Whether that
+ * happens depends on the GPU generation and on the code around the test, so a
+ * check that works on one Mac can be gone on another. /test/nan-probe shows
+ * what a given GPU does.
+ *
+ * These test the bit pattern instead: an exponent of all ones and a non-zero
+ * mantissa. That is integer arithmetic, which no float assumption touches.
+ *
+ * `NAN_BITS` is the quiet NaN written wherever a shader needs to produce one.
+ * Writing it as bits into a u32 view of the buffer keeps it exact; producing
+ * a NaN through float arithmetic is not guaranteed to.
+ */
+/** The quiet NaN fjader writes, as bits. */
+export const NAN_BITS_HEX = '0x7FC00000u';
+/**
+ * `isNanBits(u)` for a value read through a u32 view, and `isNaN(v)` for one
+ * already loaded as f32. Prefer the u32 view where a shader can read the
+ * buffer that way: it never loads the NaN as a float at all.
+ */
+export const NAN_WGSL = /* wgsl */ `
+const NAN_BITS: u32 = ${NAN_BITS_HEX};
+
+fn isNanBits(u: u32) -> bool {
+	return (u & 0x7fffffffu) > 0x7f800000u;
+}
+
+fn isNaN(v: f32) -> bool {
+	return isNanBits(bitcast<u32>(v));
+}
+`;
+/**
+ * The same test as an expression, for shader libraries that are pasted into
+ * other shaders and so cannot define functions those shaders may define too.
+ */
+export function isNanExpr(f32Expr) {
+    return `((bitcast<u32>(${f32Expr}) & 0x7fffffffu) > 0x7f800000u)`;
+}

package/dist/gpu/ResolveShader.d.ts

@@ -69,7 +69,7 @@ export declare const RESOLVE_IMMEDIATE_SIZE = 12;
  * hand every dispatch the last one's values. Immediates are pass state, set in
  * command order, so each dispatch reads its own.
  */
-export declare const RESOLVE_SHADER = "\nrequires immediate_address_space;\n\nstruct Params {\n  // Elements in this range. The rest of the buffer is left alone.\n  count: u32,\n  // 0 -> from, 1 -> to. Shared by every element of the range.\n  t: f32,\n  // Where the range starts, in all three buffers alike.\n  offset: u32,\n};\n\n@group(0) @binding(0) var<storage, read>       valueFrom: array<f32>;\n@group(0) @binding(1) var<storage, read>       valueTo:   array<f32>;\n@group(0) @binding(2) var<storage, read_write> resolved:  array<f32>;\nvar<immediate> params: Params;\n\n@compute @workgroup_size(64)\nfn main(@builtin(global_invocation_id) gid: vec3<u32>) {\n  if (gid.x >= params.count) {\n    return;\n  }\n  let j = params.offset + gid.x;\n  let a = valueFrom[j];\n  let b = valueTo[j];\n  // A NaN on either side means one end of this transition is not a number, so\n  // there is nothing to interpolate along. Take the destination and be done.\n  // Note the test has to be explicit: every comparison against NaN is false, so\n  // mix() would silently propagate it instead.\n  // Equal ends take b too, so they come out exact on any driver \u2014 see above.\n  let takeTo = a == b || a != a || b != b;\n  resolved[j] = select(mix(a, b, params.t), b, takeTo);\n}\n";
+export declare const RESOLVE_SHADER: string;
 /**
  * The same expression in JS, and the reason it exists.
  *

package/dist/gpu/ResolveShader.js

@@ -1,3 +1,4 @@
+import { isNanExpr } from './NanShaderLib';
 /**
  * The resolve kernel: `resolved[j] = mix(from[j], to[j], t)` over one range.
  *
@@ -96,10 +97,10 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
   let b = valueTo[j];
   // A NaN on either side means one end of this transition is not a number, so
   // there is nothing to interpolate along. Take the destination and be done.
-  // Note the test has to be explicit: every comparison against NaN is false, so
-  // mix() would silently propagate it instead.
+  // Note the test has to be explicit, and on the bits: mix() would silently
+  // propagate a NaN, and a compiler may fold a float test like a != a to false.
   // Equal ends take b too, so they come out exact on any driver — see above.
-  let takeTo = a == b || a != a || b != b;
+  let takeTo = a == b || ${isNanExpr('a')} || ${isNanExpr('b')};
   resolved[j] = select(mix(a, b, params.t), b, takeTo);
 }
 `;

package/dist/gpu/SizeScaleShaderLib.d.ts

@@ -28,4 +28,4 @@ export declare const MAX_SIZE_SLOTS = 64;
  * in WGSL, and the shared slot table already relies on the same thing.
  */
 export declare const SIZE_SCALE_BINDINGS = "\n@group(2) @binding(4) var<uniform> sizeConfigs: array<SizeConfig, 64>;\n";
-export declare const SIZE_SCALE_FUNCTIONS = "\nfn getSizeFromScale(scaleIndex: u32, value: f32) -> f32 {\n    let config = sizeConfigs[scaleIndex];\n\n    // Handle NaN \u2192 rangeMin\n    if (value != value) {\n        return config.rangeMin;\n    }\n\n    let range = config.domainMax - config.domainMin;\n\n    // Degenerate domain \u2192 midpoint of range\n    if (abs(range) < 0.0001) {\n        return (config.rangeMin + config.rangeMax) * 0.5;\n    }\n\n    // Normalize to [0, 1]\n    let t = clamp((value - config.domainMin) / range, 0.0, 1.0);\n\n    // Sqrt for area-proportional scaling\n    let s = sqrt(t);\n\n    // Interpolate to pixel range\n    return config.rangeMin + s * (config.rangeMax - config.rangeMin);\n}\n";
+export declare const SIZE_SCALE_FUNCTIONS: string;

package/dist/gpu/SizeScaleShaderLib.js

@@ -1,3 +1,4 @@
+import { isNanExpr } from './NanShaderLib';
 // src/lib/gpu/SizeScaleShaderLib.js
 export const SIZE_SCALE_STRUCTS = /* wgsl */ `
 struct SizeConfig {
@@ -43,7 +44,7 @@ fn getSizeFromScale(scaleIndex: u32, value: f32) -> f32 {
     let config = sizeConfigs[scaleIndex];
 
     // Handle NaN → rangeMin
-    if (value != value) {
+    if (${isNanExpr('value')}) {
         return config.rangeMin;
     }