insomni-plot 0.1.0-alpha.0

package/dist/core.mjs

@@ -0,0 +1,1047 @@
+import { $ as percent, A as valueLabelMark, At as viridis, C as areaSwatch, Ct as rdbu, D as pointSwatch, Dt as set3, E as lineSwatch, Et as set2, F as barMark, Ft as truncateToWidth, G as defineCurve, H as stackedBarMark, Ht as timeScale, I as categoricalBarMark, It as bandScale, K as resamplePoints, L as groupedBarMark, Lt as groupedBandScale, M as DOTTED_PATTERN, Mt as leftAxis, Nt as rightAxis, O as bandMark, Ot as spectral, P as areaMark, Pt as topAxis, Q as fixed, R as lineMark, Rt as linearScale, S as polyFit, St as purples, T as legend, Tt as set1, U as stack, Ut as timeTickFormat, V as stackedAreaMark, Vt as sqrtScale, W as cardinalCurve, Wt as timeTicks, Z as currency, _ as quantile, _t as pastel, a as linearPreset, at as category10, b as linearFit, bt as prgn, c as bin, ct as continuousPalette, d as binWithBreaks, dt as greens, et as siNumber, f as boxStats, ft as greys, g as kde, gt as paired, h as jitter, ht as oranges, i as createRangePresets, it as categoricalPalette, j as DASHED_PATTERN, jt as bottomAxis, k as ruleMark, kt as tableau10, l as binBreaks, lt as coolwarm, m as histogramMeasureValue, mt as magma, n as createDataViewport, nt as blues, o as logPreset, ot as cividis, p as groupBy, pt as inferno, q as colorBar, r as linkViewports, rt as brbg, s as timePreset, st as colorScale, t as bindDataViewport, tt as accent, u as binBy, ut as dark2, v as rollingWindow, vt as piyg, w as barSwatch, wt as reds, x as loessFit, xt as puor, y as confidenceBand, yt as plasma, z as pointMark, zt as logScale } from "./interactions-DEFL_F4E.mjs";
+import { Texture, createLayer, rgba } from "insomni";
+import { resolveRoot } from "insomni/internal";
+//#region src/heatmap/types.ts
+function resolveSpec(spec) {
+	const [nx, ny] = spec.bins;
+	if (!Number.isInteger(nx) || !Number.isInteger(ny) || nx < 1 || ny < 1) throw new Error("heatmapLayer: `bins` entries must be positive integers.");
+	const weightScale = spec.weightScale ?? 1e6;
+	if (!Number.isFinite(weightScale) || weightScale <= 0) throw new Error("heatmapLayer: `weightScale` must be a positive finite number.");
+	const viewport = spec.viewport ?? null;
+	const xDomain = spec.xDomain ?? (viewport ? viewport.visibleXDomain : null);
+	const yDomain = spec.yDomain ?? (viewport ? viewport.visibleYDomain : null);
+	const frame = spec.frame ?? viewport?.frame ?? null;
+	if (!xDomain || !yDomain) throw new Error("heatmapLayer: `xDomain` and `yDomain` are required when no `viewport` is provided.");
+	if (!frame) throw new Error("heatmapLayer: `frame` is required when no `viewport` is provided.");
+	return {
+		x: spec.x,
+		y: spec.y,
+		weight: spec.weight ?? (() => 1),
+		nx,
+		ny,
+		x0: xDomain[0],
+		x1: xDomain[1],
+		y0: yDomain[0],
+		y1: yDomain[1],
+		frame,
+		viewport,
+		svgExport: spec.svgExport ?? "auto",
+		colorMap: spec.colorMap,
+		weightScale,
+		interpolation: spec.interpolation ?? "nearest",
+		normalize: spec.normalize ?? "max"
+	};
+}
+/**
+* Apply the configured normalization to a raw bin value, given the grid's
+* `max`. Returns a `[0, 1]` parameter for palette sampling.
+*/
+function normalizeValue(value, max, mode) {
+	if (max <= 0 || value <= 0) return 0;
+	if (mode === "max") return value / max;
+	if (mode === "sqrt") return Math.sqrt(value / max);
+	return Math.log1p(value) / Math.log1p(max);
+}
+function clamp01(v) {
+	if (v < 0) return 0;
+	if (v > 1) return 1;
+	return v;
+}
+function nextPow2(n) {
+	let p = 1;
+	while (p < n) p <<= 1;
+	return p;
+}
+//#endregion
+//#region src/heatmap/cpu.ts
+var HeatmapCpuRenderer = class {
+	spec;
+	data;
+	bins;
+	max = 0;
+	dirty = true;
+	constructor(spec, data) {
+		this.spec = spec;
+		this.data = data;
+		this.bins = new Float64Array(spec.nx * spec.ny);
+	}
+	setData(data) {
+		this.data = data;
+		this.dirty = true;
+	}
+	markDirty() {
+		this.dirty = true;
+	}
+	/** Largest bin weight after the most recent rebin. Useful for legend domains. */
+	getMax() {
+		if (this.dirty) this.rebin();
+		return this.max;
+	}
+	build() {
+		if (this.dirty) this.rebin();
+		const { nx, ny, frame, colorMap, normalize } = this.spec;
+		const max = this.max;
+		const layer = createLayer({ space: "ui" });
+		if (max <= 0) return [layer];
+		const cellW = frame.width / nx;
+		const cellH = frame.height / ny;
+		for (let iy = 0; iy < ny; iy++) for (let ix = 0; ix < nx; ix++) {
+			const v = this.bins[iy * nx + ix];
+			if (v <= 0) continue;
+			layer.pushRect({
+				x: frame.x + ix * cellW,
+				y: frame.y + iy * cellH,
+				width: cellW,
+				height: cellH,
+				fill: colorMap(normalizeValue(v, max, normalize))
+			});
+		}
+		return [layer];
+	}
+	rebin() {
+		const spec = this.spec;
+		const { nx, ny, x0, x1, y0, y1 } = spec;
+		const dx = x1 - x0;
+		const dy = y1 - y0;
+		const bins = this.bins;
+		bins.fill(0);
+		if (dx === 0 || dy === 0) {
+			this.max = 0;
+			this.dirty = false;
+			return;
+		}
+		let max = 0;
+		for (const datum of this.data) {
+			const xv = spec.x(datum);
+			const yv = spec.y(datum);
+			const tx = (xv - x0) / dx;
+			const ty = (yv - y0) / dy;
+			if (tx < 0 || tx >= 1 || ty < 0 || ty >= 1) continue;
+			const ix = Math.min(nx - 1, Math.floor(tx * nx));
+			const idx = (ny - 1 - Math.min(ny - 1, Math.floor(ty * ny))) * nx + ix;
+			const w = spec.weight(datum);
+			const next = bins[idx] + w;
+			bins[idx] = next;
+			if (next > max) max = next;
+		}
+		this.max = max;
+		this.dirty = false;
+	}
+};
+//#endregion
+//#region src/heatmap/gpu.ts
+var HeatmapGpuRenderer = class {
+	spec;
+	data;
+	state = null;
+	dirty = true;
+	constructor(spec, data) {
+		this.spec = spec;
+		this.data = data;
+	}
+	setData(data) {
+		this.data = data;
+		this.dirty = true;
+	}
+	markDirty() {
+		this.dirty = true;
+	}
+	/**
+	* Build (or refresh) the GPU heatmap and return the drawable that renders it.
+	*
+	* `root` owns the GPU buffers/textures/pipelines; `renderer` is the v3
+	* {@link Renderer2D} whose `compute(cb)` seam the binning passes are recorded
+	* onto. The returned {@link Layer} is a `space:"ui"` layer with a single sprite
+	* pointing at the compute-written output texture, drawn in submission order
+	* (the same post-main slot as before). The sprite layer is cleared and
+	* re-pushed each frame so the pack content naturally changes when data is
+	* dirty — no separate `bumpVersion` needed.
+	*
+	* The compute callback is queued (not submitted) here; it runs when the
+	* caller invokes `renderer.render(...)`, immediately before the render pass,
+	* so the colormap output is visible to this layer's draw in the same frame.
+	*/
+	build(root, renderer) {
+		const state = this.ensureState(root);
+		this.updateSprite(state);
+		if (this.dirty) {
+			this.uploadDataBuffer(state);
+			renderer.compute((encoder) => {
+				const pass = encoder.beginComputePass({ label: "heatmap-pass" });
+				this.runPasses(state, pass);
+				pass.end();
+			});
+			this.dirty = false;
+		}
+		return state.spriteLayer;
+	}
+	destroy() {
+		if (!this.state) return;
+		this.state.dataBuffer.destroy();
+		this.state.binBuffer.destroy();
+		this.state.maxBuffer.destroy();
+		this.state.paramsBuffer.destroy();
+		this.state.lutTexture.destroy();
+		this.state.outputWrapper.destroy();
+		this.state = null;
+	}
+	ensureState(root) {
+		if (this.state) return this.state;
+		const spec = this.spec;
+		const device = root.device;
+		const nx = spec.nx;
+		const ny = spec.ny;
+		const binBuffer = device.createBuffer({
+			label: "heatmap-bins",
+			size: Math.max(nx * ny * 4, 16),
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		});
+		const maxBuffer = device.createBuffer({
+			label: "heatmap-max",
+			size: 16,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		});
+		const paramsBuffer = device.createBuffer({
+			label: "heatmap-params",
+			size: 48,
+			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+		});
+		const initialCapacity = Math.max(1, this.data.length);
+		const dataBuffer = device.createBuffer({
+			label: "heatmap-data",
+			size: initialCapacity * 16,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		});
+		const lutTexture = device.createTexture({
+			label: "heatmap-lut",
+			size: [
+				256,
+				1,
+				1
+			],
+			format: "rgba8unorm",
+			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+		});
+		const lutView = lutTexture.createView();
+		const outputTexture = device.createTexture({
+			label: "heatmap-output",
+			size: [
+				nx,
+				ny,
+				1
+			],
+			format: "rgba8unorm",
+			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST
+		});
+		const outputView = outputTexture.createView();
+		const outputWrapper = new Texture(outputTexture, nx, ny);
+		const clearModule = device.createShaderModule({
+			label: "heatmap-clear",
+			code: CLEAR_WGSL
+		});
+		const splatModule = device.createShaderModule({
+			label: "heatmap-splat",
+			code: SPLAT_WGSL
+		});
+		const reduceModule = device.createShaderModule({
+			label: "heatmap-reduce",
+			code: REDUCE_WGSL
+		});
+		const colormapModule = device.createShaderModule({
+			label: "heatmap-colormap",
+			code: COLORMAP_WGSL
+		});
+		const clearLayout = device.createBindGroupLayout({
+			label: "heatmap-clear",
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 1,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 2,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "uniform" }
+				}
+			]
+		});
+		const splatLayout = device.createBindGroupLayout({
+			label: "heatmap-splat",
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "read-only-storage" }
+				},
+				{
+					binding: 1,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 2,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "uniform" }
+				}
+			]
+		});
+		const reduceLayout = device.createBindGroupLayout({
+			label: "heatmap-reduce",
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 1,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 2,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "uniform" }
+				}
+			]
+		});
+		const colormapLayout = device.createBindGroupLayout({
+			label: "heatmap-colormap",
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 1,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "storage" }
+				},
+				{
+					binding: 2,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: "uniform" }
+				},
+				{
+					binding: 3,
+					visibility: GPUShaderStage.COMPUTE,
+					texture: {
+						sampleType: "float",
+						viewDimension: "2d"
+					}
+				},
+				{
+					binding: 4,
+					visibility: GPUShaderStage.COMPUTE,
+					storageTexture: {
+						access: "write-only",
+						format: "rgba8unorm",
+						viewDimension: "2d"
+					}
+				}
+			]
+		});
+		const clearPipeline = device.createComputePipeline({
+			label: "heatmap-clear-pipeline",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [clearLayout] }),
+			compute: {
+				module: clearModule,
+				entryPoint: "main"
+			}
+		});
+		const splatPipeline = device.createComputePipeline({
+			label: "heatmap-splat-pipeline",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [splatLayout] }),
+			compute: {
+				module: splatModule,
+				entryPoint: "main"
+			}
+		});
+		const reducePipeline = device.createComputePipeline({
+			label: "heatmap-reduce-pipeline",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [reduceLayout] }),
+			compute: {
+				module: reduceModule,
+				entryPoint: "main"
+			}
+		});
+		const colormapPipeline = device.createComputePipeline({
+			label: "heatmap-colormap-pipeline",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [colormapLayout] }),
+			compute: {
+				module: colormapModule,
+				entryPoint: "main"
+			}
+		});
+		const clearBindGroup = device.createBindGroup({
+			layout: clearLayout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: binBuffer }
+				},
+				{
+					binding: 1,
+					resource: { buffer: maxBuffer }
+				},
+				{
+					binding: 2,
+					resource: { buffer: paramsBuffer }
+				}
+			]
+		});
+		const splatBindGroup = device.createBindGroup({
+			layout: splatLayout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: dataBuffer }
+				},
+				{
+					binding: 1,
+					resource: { buffer: binBuffer }
+				},
+				{
+					binding: 2,
+					resource: { buffer: paramsBuffer }
+				}
+			]
+		});
+		const reduceBindGroup = device.createBindGroup({
+			layout: reduceLayout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: binBuffer }
+				},
+				{
+					binding: 1,
+					resource: { buffer: maxBuffer }
+				},
+				{
+					binding: 2,
+					resource: { buffer: paramsBuffer }
+				}
+			]
+		});
+		const colormapBindGroup = device.createBindGroup({
+			layout: colormapLayout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: binBuffer }
+				},
+				{
+					binding: 1,
+					resource: { buffer: maxBuffer }
+				},
+				{
+					binding: 2,
+					resource: { buffer: paramsBuffer }
+				},
+				{
+					binding: 3,
+					resource: lutView
+				},
+				{
+					binding: 4,
+					resource: outputView
+				}
+			]
+		});
+		writeLut(device, lutTexture, spec.colorMap);
+		writeParams(device, paramsBuffer, spec, this.data.length);
+		this.state = {
+			root,
+			device,
+			dataBuffer,
+			dataCapacity: initialCapacity,
+			binBuffer,
+			maxBuffer,
+			paramsBuffer,
+			lutTexture,
+			lutView,
+			outputTexture,
+			outputView,
+			outputWrapper,
+			clearPipeline,
+			splatPipeline,
+			reducePipeline,
+			colormapPipeline,
+			splatLayout,
+			clearBindGroup,
+			splatBindGroup,
+			reduceBindGroup,
+			colormapBindGroup,
+			spriteLayer: createLayer({ space: "ui" }),
+			dataCount: this.data.length
+		};
+		return this.state;
+	}
+	uploadDataBuffer(state) {
+		const spec = this.spec;
+		const n = this.data.length;
+		state.dataCount = n;
+		if (n > state.dataCapacity) {
+			state.dataBuffer.destroy();
+			const next = nextPow2(n);
+			state.dataBuffer = state.device.createBuffer({
+				label: "heatmap-data",
+				size: next * 16,
+				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+			});
+			state.dataCapacity = next;
+			state.splatBindGroup = state.device.createBindGroup({
+				layout: state.splatLayout,
+				entries: [
+					{
+						binding: 0,
+						resource: { buffer: state.dataBuffer }
+					},
+					{
+						binding: 1,
+						resource: { buffer: state.binBuffer }
+					},
+					{
+						binding: 2,
+						resource: { buffer: state.paramsBuffer }
+					}
+				]
+			});
+		}
+		if (n > 0) {
+			const packed = new Float32Array(n * 4);
+			for (let i = 0; i < n; i++) {
+				const datum = this.data[i];
+				packed[i * 4 + 0] = spec.x(datum);
+				packed[i * 4 + 1] = spec.y(datum);
+				packed[i * 4 + 2] = spec.weight(datum);
+				packed[i * 4 + 3] = 0;
+			}
+			state.device.queue.writeBuffer(state.dataBuffer, 0, packed);
+		}
+		writeParams(state.device, state.paramsBuffer, spec, n);
+	}
+	updateSprite(state) {
+		const spec = this.spec;
+		state.spriteLayer.clear();
+		state.spriteLayer.pushSprite({
+			pos: {
+				x: spec.frame.x + spec.frame.width * .5,
+				y: spec.frame.y + spec.frame.height * .5
+			},
+			size: {
+				x: spec.frame.width,
+				y: spec.frame.height
+			},
+			texture: state.outputWrapper,
+			anchor: {
+				x: .5,
+				y: .5
+			}
+		});
+	}
+	runPasses(state, pass) {
+		const spec = this.spec;
+		const cellCount = spec.nx * spec.ny;
+		pass.setPipeline(state.clearPipeline);
+		pass.setBindGroup(0, state.clearBindGroup);
+		pass.dispatchWorkgroups(Math.ceil(cellCount / 256));
+		if (state.dataCount > 0) {
+			pass.setPipeline(state.splatPipeline);
+			pass.setBindGroup(0, state.splatBindGroup);
+			pass.dispatchWorkgroups(Math.ceil(state.dataCount / 256));
+		}
+		pass.setPipeline(state.reducePipeline);
+		pass.setBindGroup(0, state.reduceBindGroup);
+		pass.dispatchWorkgroups(1);
+		pass.setPipeline(state.colormapPipeline);
+		pass.setBindGroup(0, state.colormapBindGroup);
+		pass.dispatchWorkgroups(Math.ceil(spec.nx / 8), Math.ceil(spec.ny / 8));
+	}
+};
+function writeParams(device, buffer, spec, count) {
+	const bytes = /* @__PURE__ */ new ArrayBuffer(48);
+	const u32 = new Uint32Array(bytes);
+	const f32 = new Float32Array(bytes);
+	u32[0] = spec.nx;
+	u32[1] = spec.ny;
+	u32[2] = count;
+	f32[3] = spec.weightScale;
+	f32[4] = spec.x0;
+	f32[5] = spec.x1;
+	f32[6] = spec.y0;
+	f32[7] = spec.y1;
+	u32[8] = spec.nx * spec.ny;
+	u32[9] = spec.normalize === "log" ? 1 : spec.normalize === "sqrt" ? 2 : 0;
+	device.queue.writeBuffer(buffer, 0, bytes);
+}
+function writeLut(device, texture, palette) {
+	const bytes = new Uint8Array(256 * 4);
+	for (let i = 0; i < 256; i++) {
+		const c = palette(i / 255);
+		const a = clamp01(c.a);
+		bytes[i * 4 + 0] = Math.round(clamp01(c.r) * a * 255);
+		bytes[i * 4 + 1] = Math.round(clamp01(c.g) * a * 255);
+		bytes[i * 4 + 2] = Math.round(clamp01(c.b) * a * 255);
+		bytes[i * 4 + 3] = Math.round(a * 255);
+	}
+	device.queue.writeTexture({ texture }, bytes, {
+		bytesPerRow: 256 * 4,
+		rowsPerImage: 1
+	}, [
+		256,
+		1,
+		1
+	]);
+}
+const PARAMS_WGSL = `
+struct Params {
+  bins: vec2u,
+  count: u32,
+  weightScale: f32,
+  xDomain: vec2f,
+  yDomain: vec2f,
+  cellCount: u32,
+  normalize: u32,  // 0=max, 1=log, 2=sqrt
+};
+`;
+const CLEAR_WGSL = `${PARAMS_WGSL}
+@group(0) @binding(0) var<storage, read_write> bins: array<atomic<i32>>;
+@group(0) @binding(1) var<storage, read_write> maxCell: array<atomic<i32>, 1>;
+@group(0) @binding(2) var<uniform> params: Params;
+
+@compute @workgroup_size(256)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  if (i >= params.cellCount) {
+    return;
+  }
+  atomicStore(&bins[i], 0);
+  if (i == 0u) {
+    atomicStore(&maxCell[0], 0);
+  }
+}
+`;
+const SPLAT_WGSL = `${PARAMS_WGSL}
+@group(0) @binding(0) var<storage, read> data: array<vec4f>;
+@group(0) @binding(1) var<storage, read_write> bins: array<atomic<i32>>;
+@group(0) @binding(2) var<uniform> params: Params;
+
+@compute @workgroup_size(256)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let i = gid.x;
+  if (i >= params.count) {
+    return;
+  }
+  let datum = data[i];
+  let xv = datum.x;
+  let yv = datum.y;
+  let w = datum.z;
+
+  let dx = params.xDomain.y - params.xDomain.x;
+  let dy = params.yDomain.y - params.yDomain.x;
+  if (dx == 0.0 || dy == 0.0) {
+    return;
+  }
+  let tx = (xv - params.xDomain.x) / dx;
+  let ty = (yv - params.yDomain.x) / dy;
+  if (tx < 0.0 || tx >= 1.0 || ty < 0.0 || ty >= 1.0) {
+    return;
+  }
+  let nx = params.bins.x;
+  let ny = params.bins.y;
+  let ix = min(nx - 1u, u32(tx * f32(nx)));
+  // Flip iy: row 0 represents the *top* of the frame (highest data-y).
+  let iy = ny - 1u - min(ny - 1u, u32(ty * f32(ny)));
+  let idx = iy * nx + ix;
+  let quant = i32(round(w * params.weightScale));
+  atomicAdd(&bins[idx], quant);
+}
+`;
+const REDUCE_WGSL = `${PARAMS_WGSL}
+@group(0) @binding(0) var<storage, read_write> bins: array<atomic<i32>>;
+@group(0) @binding(1) var<storage, read_write> maxCell: array<atomic<i32>, 1>;
+@group(0) @binding(2) var<uniform> params: Params;
+
+@compute @workgroup_size(256)
+fn main(@builtin(local_invocation_id) lid: vec3u) {
+  let threads = 256u;
+  let total = params.cellCount;
+  var localMax: i32 = 0;
+  var i = lid.x;
+  loop {
+    if (i >= total) {
+      break;
+    }
+    let v = atomicLoad(&bins[i]);
+    if (v > localMax) {
+      localMax = v;
+    }
+    i = i + threads;
+  }
+  atomicMax(&maxCell[0], localMax);
+}
+`;
+const COLORMAP_WGSL = `${PARAMS_WGSL}
+@group(0) @binding(0) var<storage, read_write> bins: array<atomic<i32>>;
+@group(0) @binding(1) var<storage, read_write> maxCell: array<atomic<i32>, 1>;
+@group(0) @binding(2) var<uniform> params: Params;
+@group(0) @binding(3) var lut: texture_2d<f32>;
+@group(0) @binding(4) var outputTex: texture_storage_2d<rgba8unorm, write>;
+
+@compute @workgroup_size(8, 8)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let nx = params.bins.x;
+  let ny = params.bins.y;
+  if (gid.x >= nx || gid.y >= ny) {
+    return;
+  }
+  let idx = gid.y * nx + gid.x;
+  let raw = atomicLoad(&bins[idx]);
+  let maxRaw = atomicLoad(&maxCell[0]);
+  var t: f32 = 0.0;
+  if (maxRaw > 0) {
+    let fraw = f32(raw);
+    let fmax = f32(maxRaw);
+    if (params.normalize == 1u) {
+      // log: log(1+v) / log(1+max)
+      t = clamp(log(1.0 + fraw) / log(1.0 + fmax), 0.0, 1.0);
+    } else if (params.normalize == 2u) {
+      // sqrt
+      t = clamp(sqrt(fraw / fmax), 0.0, 1.0);
+    } else {
+      // max (default)
+      t = clamp(fraw / fmax, 0.0, 1.0);
+    }
+  }
+  let lutWidth = 256;
+  let u = i32(round(t * f32(lutWidth - 1)));
+  let color = textureLoad(lut, vec2i(u, 0), 0);
+  textureStore(outputTex, vec2i(i32(gid.x), i32(gid.y)), color);
+}
+`;
+//#endregion
+//#region src/heatmap.ts
+function heatmapLayer(data, spec) {
+	return new HeatmapProducerImpl(data, spec);
+}
+var HeatmapProducerImpl = class {
+	resolved;
+	cpu;
+	gpu;
+	unsubscribeViewport = null;
+	constructor(data, spec) {
+		this.resolved = resolveSpec(spec);
+		this.cpu = new HeatmapCpuRenderer(this.resolved, data);
+		this.gpu = new HeatmapGpuRenderer(this.resolved, data);
+		if (this.resolved.viewport) this.unsubscribeViewport = this.resolved.viewport.onChange(() => {
+			this.cpu.markDirty();
+			this.gpu.markDirty();
+		});
+	}
+	setData(data) {
+		this.cpu.setData(data);
+		this.gpu.setData(data);
+	}
+	getMax() {
+		this.syncFromViewport();
+		return this.cpu.getMax();
+	}
+	buildCPU() {
+		this.syncFromViewport();
+		return this.cpu.build();
+	}
+	buildGPU(opts) {
+		this.syncFromViewport();
+		const root = resolveRoot(opts.renderer.device);
+		return this.gpu.build(root, opts.renderer);
+	}
+	destroy() {
+		if (this.unsubscribeViewport) {
+			this.unsubscribeViewport();
+			this.unsubscribeViewport = null;
+		}
+		this.gpu.destroy();
+	}
+	/** Pull current visible domain + frame off the viewport, if one is attached. */
+	syncFromViewport() {
+		const vp = this.resolved.viewport;
+		if (!vp) return;
+		const xd = vp.visibleXDomain;
+		const yd = vp.visibleYDomain;
+		this.resolved.x0 = xd[0];
+		this.resolved.x1 = xd[1];
+		this.resolved.y0 = yd[0];
+		this.resolved.y1 = yd[1];
+		this.resolved.frame = vp.frame;
+	}
+};
+//#endregion
+//#region src/navigator.ts
+const DEFAULT_INDICATOR_FILL = rgba(1, 1, 1, .08);
+const DEFAULT_INDICATOR_STROKE = rgba(1, 1, 1, .85);
+/**
+* Build a Navigator for a data viewport: a secondary view of the same data
+* with a rect that tracks the source's visible domain. Drag inside the
+* overview pans/reframes the source.
+*/
+function createDataNavigator(opts) {
+	const source = opts.source;
+	const overview = opts.overview;
+	const axes = opts.axes ?? "xy";
+	const renderFn = opts.render;
+	const cache = opts.cache;
+	const interactionState = { active: false };
+	const target = createLayer({
+		space: "ui",
+		...cache ? { cache: "always" } : {}
+	});
+	const indicator = createLayer({ space: "ui" });
+	const style = resolveIndicatorStyle(opts.indicator);
+	const refreshContent = () => {
+		target.clear();
+		renderFn(target);
+		if (cache) cache.renderer.cacheLayer(target);
+	};
+	const refreshIndicator = () => {
+		indicator.clear();
+		const rect = computeDataIndicatorRect(source, overview, axes);
+		if (!rect) return;
+		indicator.pushRect({
+			x: rect.x,
+			y: rect.y,
+			width: rect.width,
+			height: rect.height,
+			fill: style.fill,
+			stroke: style.stroke,
+			strokeWidth: style.strokeWidth,
+			cornerRadius: style.cornerRadius
+		});
+	};
+	const refresh = () => {
+		refreshContent();
+		refreshIndicator();
+	};
+	refresh();
+	const unsubSource = source.onChange(refreshIndicator);
+	const unsubOverview = overview.onChange(refresh);
+	const node = opts.interaction ? bindDataInteraction(opts.interaction, source, overview, axes, interactionState) : null;
+	let disposed = false;
+	return {
+		layers: [target, indicator],
+		get interacting() {
+			return interactionState.active;
+		},
+		refresh,
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			unsubSource();
+			unsubOverview();
+			node?.destroy();
+			target.destroy();
+			indicator.destroy();
+		}
+	};
+}
+function bindDataInteraction(opts, source, overview, axes, interactionState) {
+	const dragEnabled = opts.drag ?? true;
+	const clickMode = opts.click ?? "center";
+	const useX = axes === "xy" || axes === "x";
+	const useY = axes === "xy" || axes === "y";
+	const resizeEnabled = opts.resizeEdges ?? axes !== "xy";
+	const edgeHitPx = opts.edgeHitPx ?? 6;
+	let mode = "pan";
+	let startDataX = 0;
+	let startDataY = 0;
+	let startSrcX0 = 0;
+	let startSrcX1 = 0;
+	let startSrcY0 = 0;
+	let startSrcY1 = 0;
+	let dragHasX = false;
+	let dragHasY = false;
+	let dragging = false;
+	const detectEdge = (evt) => {
+		if (!resizeEnabled) return null;
+		const r = computeDataIndicatorRect(source, overview, axes);
+		if (!r) return null;
+		if (axes === "x") {
+			if (Math.abs(evt.x - r.x) <= edgeHitPx) return "resize-x0";
+			if (Math.abs(evt.x - (r.x + r.width)) <= edgeHitPx) return "resize-x1";
+			return null;
+		}
+		if (axes === "y") {
+			if (Math.abs(evt.y - r.y) <= edgeHitPx) return "resize-y0";
+			if (Math.abs(evt.y - (r.y + r.height)) <= edgeHitPx) return "resize-y1";
+			return null;
+		}
+		return null;
+	};
+	return opts.manager.add({
+		zIndex: opts.zIndex ?? 50,
+		space: "ui",
+		bounds: opts.bounds ?? (() => overview.absoluteFrame),
+		cursor: dragEnabled ? "grab" : "pointer",
+		dragCursor: "grabbing",
+		onPress: (evt) => {
+			const edge = detectEdge(evt);
+			if (edge) {
+				mode = edge;
+				return;
+			}
+			const indRect = computeDataIndicatorRect(source, overview, axes);
+			if (indRect) {
+				if (evt.x >= indRect.x && evt.x <= indRect.x + indRect.width && evt.y >= indRect.y && evt.y <= indRect.y + indRect.height) {
+					mode = "pan";
+					return;
+				}
+			}
+			mode = "pan";
+			if (clickMode !== "center") return;
+			const data = overview.screenToData(evt.x, evt.y);
+			if (!data) return;
+			const update = {};
+			if (useX) {
+				const span = visibleNumericSpan(source, "x");
+				if (span !== null) {
+					const c = toNumber(data.x);
+					update.x = [c - span / 2, c + span / 2];
+				}
+			}
+			if (useY) {
+				const span = visibleNumericSpan(source, "y");
+				if (span !== null) {
+					const c = toNumber(data.y);
+					update.y = [c - span / 2, c + span / 2];
+				}
+			}
+			source.setVisibleDomain(update);
+		},
+		onDragStart: dragEnabled ? (evt) => {
+			const data = overview.screenToData(evt.x, evt.y);
+			if (!data) return;
+			startDataX = toNumber(data.x);
+			startDataY = toNumber(data.y);
+			dragHasX = false;
+			dragHasY = false;
+			if (useX) {
+				const dom = source.visibleXDomain;
+				if (Array.isArray(dom) && dom.length === 2) {
+					startSrcX0 = toNumber(dom[0]);
+					startSrcX1 = toNumber(dom[1]);
+					dragHasX = Number.isFinite(startSrcX0) && Number.isFinite(startSrcX1);
+				}
+			}
+			if (useY) {
+				const dom = source.visibleYDomain;
+				if (Array.isArray(dom) && dom.length === 2) {
+					startSrcY0 = toNumber(dom[0]);
+					startSrcY1 = toNumber(dom[1]);
+					dragHasY = Number.isFinite(startSrcY0) && Number.isFinite(startSrcY1);
+				}
+			}
+			dragging = dragHasX || dragHasY;
+			interactionState.active = dragging;
+		} : void 0,
+		onDragMove: dragEnabled ? (evt) => {
+			if (!dragging) return;
+			const data = overview.screenToData(evt.x, evt.y);
+			if (!data) return;
+			if (mode === "resize-x0" && dragHasX) {
+				source.setVisibleDomain({ x: [toNumber(data.x), startSrcX1] });
+				return;
+			}
+			if (mode === "resize-x1" && dragHasX) {
+				source.setVisibleDomain({ x: [startSrcX0, toNumber(data.x)] });
+				return;
+			}
+			if (mode === "resize-y0" && dragHasY) {
+				source.setVisibleDomain({ y: [toNumber(data.y), startSrcY1] });
+				return;
+			}
+			if (mode === "resize-y1" && dragHasY) {
+				source.setVisibleDomain({ y: [startSrcY0, toNumber(data.y)] });
+				return;
+			}
+			const update = {};
+			if (dragHasX) {
+				const dx = toNumber(data.x) - startDataX;
+				update.x = [startSrcX0 + dx, startSrcX1 + dx];
+			}
+			if (dragHasY) {
+				const dy = toNumber(data.y) - startDataY;
+				update.y = [startSrcY0 + dy, startSrcY1 + dy];
+			}
+			source.setVisibleDomain(update);
+		} : void 0,
+		onDragEnd: dragEnabled ? () => {
+			dragging = false;
+			interactionState.active = false;
+			mode = "pan";
+		} : void 0
+	});
+}
+function resolveIndicatorStyle(opts) {
+	return {
+		fill: opts?.fill ?? DEFAULT_INDICATOR_FILL,
+		stroke: opts?.stroke ?? DEFAULT_INDICATOR_STROKE,
+		strokeWidth: opts?.strokeWidth ?? 1,
+		cornerRadius: opts?.cornerRadius ?? 0
+	};
+}
+function toNumber(v) {
+	if (typeof v === "number") return v;
+	if (v instanceof Date) return v.getTime();
+	return Number(v);
+}
+function visibleNumericSpan(vp, axis) {
+	const dom = axis === "x" ? vp.visibleXDomain : vp.visibleYDomain;
+	if (!Array.isArray(dom) || dom.length !== 2) return null;
+	const a = toNumber(dom[0]);
+	const b = toNumber(dom[1]);
+	if (!Number.isFinite(a) || !Number.isFinite(b)) return null;
+	return b - a;
+}
+function computeDataIndicatorRect(source, overview, axes) {
+	const useX = axes === "xy" || axes === "x";
+	const useY = axes === "xy" || axes === "y";
+	const f = overview.absoluteFrame;
+	let x = f.x;
+	let width = f.width;
+	let y = f.y;
+	let height = f.height;
+	const srcX = source.visibleXDomain;
+	const srcY = source.visibleYDomain;
+	const yAnchor = Array.isArray(srcY) && srcY.length > 0 ? srcY[0] : null;
+	const xAnchor = Array.isArray(srcX) && srcX.length > 0 ? srcX[0] : null;
+	if (useX) {
+		if (!Array.isArray(srcX) || srcX.length !== 2 || yAnchor === null) return null;
+		const left = overview.dataToScreen(srcX[0], yAnchor);
+		const right = overview.dataToScreen(srcX[1], yAnchor);
+		x = Math.min(left.x, right.x);
+		width = Math.abs(right.x - left.x);
+	}
+	if (useY) {
+		if (!Array.isArray(srcY) || srcY.length !== 2 || xAnchor === null) return null;
+		const top = overview.dataToScreen(xAnchor, srcY[0]);
+		const bottom = overview.dataToScreen(xAnchor, srcY[1]);
+		y = Math.min(top.y, bottom.y);
+		height = Math.abs(bottom.y - top.y);
+	}
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+//#endregion
+export { DASHED_PATTERN, DOTTED_PATTERN, accent, areaMark, areaSwatch, bandMark, bandScale, barMark, barSwatch, bin, binBreaks, binBy, binWithBreaks, bindDataViewport, blues, bottomAxis, boxStats, brbg, cardinalCurve, categoricalBarMark, categoricalPalette, category10, cividis, colorBar, colorScale, confidenceBand, continuousPalette, coolwarm, createDataNavigator, createDataViewport, createRangePresets, currency, dark2, defineCurve, fixed, greens, greys, groupBy, groupedBandScale, groupedBarMark, heatmapLayer, histogramMeasureValue, inferno, jitter, kde, leftAxis, legend, lineMark, lineSwatch, linearFit, linearPreset, linearScale, linkViewports, loessFit, logPreset, logScale, magma, oranges, paired, pastel, percent, piyg, plasma, pointMark, pointSwatch, polyFit, prgn, puor, purples, quantile, rdbu, reds, resamplePoints, rightAxis, rollingWindow, ruleMark, set1, set2, set3, siNumber, spectral, sqrtScale, stack, stackedAreaMark, stackedBarMark, tableau10, timePreset, timeScale, timeTickFormat, timeTicks, topAxis, truncateToWidth, valueLabelMark, viridis };