resolvcharts 0.2.0 → 0.3.0

package/dist/series-PmAjztEh.cjs

@@ -0,0 +1,1191 @@
+//#region src/gpu/color.ts
+/** Parse a CSS color (#rgb, #rrggbb, rgb(), rgba()) into linear-ish 0-1 rgba. */
+function parseColor(c) {
+	if (c.startsWith("#")) {
+		const h = c.slice(1);
+		if (h.length === 3) return [
+			parseInt(h[0], 16) / 15,
+			parseInt(h[1], 16) / 15,
+			parseInt(h[2], 16) / 15,
+			1
+		];
+		if (h.length === 6) return [
+			parseInt(h.slice(0, 2), 16) / 255,
+			parseInt(h.slice(2, 4), 16) / 255,
+			parseInt(h.slice(4, 6), 16) / 255,
+			1
+		];
+	}
+	const m = /rgba?\(([^)]+)\)/.exec(c);
+	if (m) {
+		const parts = m[1].split(",").map((v) => Number.parseFloat(v));
+		return [
+			(parts[0] ?? 0) / 255,
+			(parts[1] ?? 0) / 255,
+			(parts[2] ?? 0) / 255,
+			parts[3] ?? 1
+		];
+	}
+	return [
+		0,
+		0,
+		0,
+		1
+	];
+}
+//#endregion
+//#region src/gpu/device.ts
+/** Shared GPUDevice across charts — adapters/devices are expensive to acquire. */
+const cache = /* @__PURE__ */ new Map();
+function getGpuDevice(opts = {}) {
+	const key = JSON.stringify(opts);
+	let p = cache.get(key);
+	if (!p) {
+		p = (async () => {
+			try {
+				const gpu = (typeof navigator === "undefined" ? null : navigator)?.gpu;
+				if (!gpu) return null;
+				const req = {};
+				if (opts.powerPreference && opts.powerPreference !== "default") req.powerPreference = opts.powerPreference;
+				if (opts.compat) req.featureLevel = "compatibility";
+				const adapter = await gpu.requestAdapter(req);
+				if (!adapter) return null;
+				if (!opts.allowFallback && adapter.isFallbackAdapter) return null;
+				const requiredFeatures = [];
+				if (opts.timing && adapter.features.has("timestamp-query")) requiredFeatures.push("timestamp-query");
+				const device = await adapter.requestDevice({ requiredFeatures });
+				device.lost.then(() => cache.delete(key));
+				return device;
+			} catch {
+				return null;
+			}
+		})();
+		p.catch(() => cache.delete(key));
+		cache.set(key, p);
+	}
+	return p;
+}
+//#endregion
+//#region src/gpu/series.ts
+/**
+* WebGPU series renderer. Data is uploaded once per series as affine-encoded
+* f32 [x, y] pairs (+ an encoded prevY channel for animation) and lives on the
+* GPU: the domain→pixel transform runs in the vertex shader, so pan/zoom,
+* resize and view animation are uniform writes, not buffer re-uploads.
+* Streaming `append()` writes only the new tail into a per-series ring buffer.
+*
+* When a series has more than ~2 points per pixel column a compute pass does
+* M4 decimation (first/min/max/last per column) into a GPU-side output buffer
+* — the CPU never rescans the data. Pipelines use instanced vertex attributes
+* everywhere (no vertex-stage storage buffers), so they also run in WebGPU
+* compatibility mode.
+*/
+const HEADER = `
+struct U {
+  res: vec4f,   // canvas w,h (device px), dpr, pad
+  color: vec4f,
+  p: vec4f,     // line: width | area: baseCssY, plotY, plotH | points: radius
+  map: vec4f,   // cssX = ex*map.x + map.y ; cssY = map.w - ey*map.z
+  anim: vec4f,  // t, flow, invN, pad
+  ring: vec4f,  // start, cap (0 = linear), n, pad
+  dec: vec4f,   // cols, gapFillYEnc, pad, pad
+};
+@group(0) @binding(0) var<uniform> u: U;
+
+fn encToCss(e: vec2f) -> vec2f {
+  return vec2f(e.x * u.map.x + u.map.y, u.map.w - e.y * u.map.z);
+}
+fn toClip(css: vec2f) -> vec4f {
+  let d = css * u.res.z;
+  return vec4f(d.x / u.res.x * 2.0 - 1.0, 1.0 - d.y / u.res.y * 2.0, 0.0, 1.0);
+}
+fn animT(i: f32) -> f32 {
+  return clamp(
+    u.anim.x * (1.0 + u.anim.y) - u.anim.y + i * u.anim.z, 0.0, 1.0,
+  );
+}
+`;
+const LINE_WGSL = `
+${HEADER}
+const OFF = array<vec2f, 6>(
+  vec2f(0.0, -1.0), vec2f(0.0, 1.0), vec2f(1.0, -1.0),
+  vec2f(0.0, 1.0), vec2f(1.0, 1.0), vec2f(1.0, -1.0),
+);
+struct VOut {
+  @builtin(position) pos: vec4f,
+  @location(0) edge: f32,
+};
+fn segQuad(v: vec2f, A: vec2f, B: vec2f) -> VOut {
+  var dir = B - A;
+  let len = length(dir);
+  if (len < 1e-6) {
+    dir = vec2f(1.0, 0.0);
+  } else {
+    dir = dir / len;
+  }
+  let nrm = vec2f(-dir.y, dir.x);
+  let halfW = u.p.x * 0.5;
+  let aa = 0.9;
+  var o: VOut;
+  o.pos = toClip(mix(A, B, v.x) + nrm * v.y * (halfW + aa));
+  o.edge = v.y * (halfW + aa);
+  return o;
+}
+@vertex fn vs(
+  @builtin(vertex_index) vi: u32,
+  @builtin(instance_index) inst: u32,
+  @location(0) a: vec2f,
+  @location(1) b: vec2f,
+  @location(2) pa: f32,
+  @location(3) pb: f32,
+) -> VOut {
+  let ya = mix(pa, a.y, animT(f32(inst)));
+  let yb = mix(pb, b.y, animT(f32(inst + 1u)));
+  return segQuad(
+    OFF[vi], encToCss(vec2f(a.x, ya)), encToCss(vec2f(b.x, yb)),
+  );
+}
+@fragment fn fs(o: VOut) -> @location(0) vec4f {
+  let halfW = u.p.x * 0.5;
+  let a = 1.0 - smoothstep(halfW - 0.5, halfW + 0.9, abs(o.edge));
+  return vec4f(u.color.rgb, u.color.a * a);
+}
+`;
+const LINE_FLAT_WGSL = `
+${HEADER}
+const OFF = array<vec2f, 6>(
+  vec2f(0.0, -1.0), vec2f(0.0, 1.0), vec2f(1.0, -1.0),
+  vec2f(0.0, 1.0), vec2f(1.0, 1.0), vec2f(1.0, -1.0),
+);
+struct VOut {
+  @builtin(position) pos: vec4f,
+  @location(0) edge: f32,
+};
+@vertex fn vs(
+  @builtin(vertex_index) vi: u32,
+  @location(0) a: vec2f,
+  @location(1) b: vec2f,
+) -> VOut {
+  var o: VOut;
+  if (a.x < -1e20 || b.x < -1e20) {
+    o.pos = vec4f(0.0, 0.0, 2.0, 1.0); // outside clip z-range → discarded
+    o.edge = 0.0;
+    return o;
+  }
+  let A = encToCss(a);
+  let B = encToCss(b);
+  var dir = B - A;
+  let len = length(dir);
+  if (len < 1e-6) {
+    dir = vec2f(1.0, 0.0);
+  } else {
+    dir = dir / len;
+  }
+  let nrm = vec2f(-dir.y, dir.x);
+  let halfW = u.p.x * 0.5;
+  let aa = 0.9;
+  let v = OFF[vi];
+  o.pos = toClip(mix(A, B, v.x) + nrm * v.y * (halfW + aa));
+  o.edge = v.y * (halfW + aa);
+  return o;
+}
+@fragment fn fs(o: VOut) -> @location(0) vec4f {
+  let halfW = u.p.x * 0.5;
+  let a = 1.0 - smoothstep(halfW - 0.5, halfW + 0.9, abs(o.edge));
+  return vec4f(u.color.rgb, u.color.a * a);
+}
+`;
+const AREA_WGSL = `
+${HEADER}
+struct VOut {
+  @builtin(position) pos: vec4f,
+  @location(0) grad: f32,
+};
+// input is doubled point data (each point twice): even verts land on the
+// path, odd verts drop to the baseline
+@vertex fn vs(
+  @builtin(vertex_index) vi: u32,
+  @location(0) top: vec2f,
+  @location(1) prev: f32,
+) -> VOut {
+  let isTop = (vi & 1u) == 0u;
+  let y = mix(prev, top.y, animT(f32(vi >> 1u)));
+  let css = encToCss(vec2f(top.x, y));
+  var o: VOut;
+  o.pos = toClip(vec2f(css.x, select(u.p.x, css.y, isTop)));
+  o.grad = clamp((css.y - u.p.y) / max(u.p.z, 1.0), 0.0, 1.0);
+  return o;
+}
+@fragment fn fs(o: VOut) -> @location(0) vec4f {
+  let a = mix(0.16, 0.0, o.grad) * u.color.a;
+  return vec4f(u.color.rgb, a);
+}
+`;
+const AREA_FLAT_WGSL = `
+${HEADER}
+struct VOut {
+  @builtin(position) pos: vec4f,
+  @location(0) grad: f32,
+};
+@vertex fn vs(
+  @builtin(vertex_index) vi: u32,
+  @location(0) top: vec2f,
+) -> VOut {
+  let isTop = (vi & 1u) == 0u;
+  let css = encToCss(top);
+  var o: VOut;
+  o.pos = toClip(vec2f(css.x, select(u.p.x, css.y, isTop)));
+  o.grad = clamp((css.y - u.p.y) / max(u.p.z, 1.0), 0.0, 1.0);
+  return o;
+}
+@fragment fn fs(o: VOut) -> @location(0) vec4f {
+  let a = mix(0.16, 0.0, o.grad) * u.color.a;
+  return vec4f(u.color.rgb, a);
+}
+`;
+const POINTS_WGSL = `
+${HEADER}
+const QUAD = array<vec2f, 6>(
+  vec2f(-1.0, -1.0), vec2f(1.0, -1.0), vec2f(-1.0, 1.0),
+  vec2f(-1.0, 1.0), vec2f(1.0, 1.0), vec2f(1.0, 1.0),
+);
+struct VOut {
+  @builtin(position) pos: vec4f,
+  @location(0) local: vec2f,
+};
+@vertex fn vs(
+  @builtin(vertex_index) vi: u32,
+  @builtin(instance_index) inst: u32,
+  @location(0) c: vec2f,
+  @location(1) prev: f32,
+) -> VOut {
+  let r = u.p.x;
+  let q = QUAD[vi];
+  let y = mix(prev, c.y, animT(f32(inst)));
+  let css = encToCss(vec2f(c.x, y));
+  var o: VOut;
+  o.pos = toClip(css + q * r);
+  o.local = q * r;
+  return o;
+}
+@fragment fn fs(o: VOut) -> @location(0) vec4f {
+  let r = u.p.x;
+  let a = 1.0 - smoothstep(r - 1.2, r, length(o.local));
+  return vec4f(u.color.rgb, u.color.a * a);
+}
+`;
+const DECIMATE_WGSL = `
+${HEADER}
+@group(1) @binding(0) var<storage, read> xy: array<vec2f>;
+@group(1) @binding(1) var<storage, read> prev: array<f32>;
+@group(1) @binding(2) var<storage, read_write> dst: array<vec2f>;
+
+fn physIdx(i: u32) -> u32 {
+  let cap = u32(u.ring.y);
+  if (cap == 0u) {
+    return i;
+  }
+  return (u32(u.ring.x) + i) % cap;
+}
+fn xEnc(i: u32) -> f32 {
+  return xy[physIdx(i)].x;
+}
+fn yLerp(i: u32) -> f32 {
+  let p = physIdx(i);
+  return mix(prev[p], xy[p].y, animT(f32(i)));
+}
+fn lowerBound(e: f32) -> u32 {
+  var lo = 0u;
+  var hi = u32(u.ring.z);
+  while (lo < hi) {
+    let mid = (lo + hi) >> 1u;
+    if (xEnc(mid) < e) {
+      lo = mid + 1u;
+    } else {
+      hi = mid;
+    }
+  }
+  return lo;
+}
+
+@compute @workgroup_size(64)
+fn dec(@builtin(global_invocation_id) gid: vec3u) {
+  let c = gid.x;
+  let cols = u32(u.dec.x);
+  if (c >= cols) {
+    return;
+  }
+  let lineBase = c * 4u;
+  let areaBase = cols * 4u + c * 8u;
+  // encoded-x range mapping to css column [c, c+1)
+  let lo = lowerBound((f32(c) - u.map.y) / u.map.x);
+  let hi = lowerBound((f32(c) + 1.0 - u.map.y) / u.map.x);
+  if (lo >= hi) {
+    let sent = vec2f(-1e30, -1e30);
+    for (var k = 0u; k < 4u; k++) {
+      dst[lineBase + k] = sent;
+    }
+    let gp = vec2f((f32(c) + 0.5 - u.map.y) / u.map.x, u.dec.y);
+    for (var k = 0u; k < 8u; k++) {
+      dst[areaBase + k] = gp;
+    }
+    return;
+  }
+  var iMin = lo;
+  var iMax = lo;
+  var mn = yLerp(lo);
+  var mx = mn;
+  for (var i = lo + 1u; i < hi; i++) {
+    let y = yLerp(i);
+    if (y < mn) {
+      mn = y;
+      iMin = i;
+    }
+    if (y > mx) {
+      mx = y;
+      iMax = i;
+    }
+  }
+  let xs = array<u32, 4>(lo, iMin, iMax, hi - 1u);
+  for (var k = 0u; k < 4u; k++) {
+    let i = xs[k];
+    let pt = vec2f(xEnc(i), yLerp(i));
+    dst[lineBase + k] = pt;
+    dst[areaBase + 2u * k] = pt;
+    dst[areaBase + 2u * k + 1u] = pt;
+  }
+}
+`;
+const BUF_VERTEX_DST = 40;
+const BUF_UNIFORM_DST = 72;
+const BUF_RESOLVE_SRC = 516;
+const BUF_MAPREAD_DST = 9;
+const BUF_SERIES = 172;
+const BUF_DEC = 160;
+const MAP_READ = 1;
+const STAGE_ALL = 7;
+const UBYTES = 256;
+const UBUF_SIZE = 262144;
+const DEC_ELEMS_PER_COL = 12;
+var GpuSeries = class GpuSeries {
+	get unavailable() {
+		return this.dead || this.recovering;
+	}
+	constructor(device, canvas, opts) {
+		this.dpr = 1;
+		this.slots = [];
+		this.slotCount = 0;
+		this.appliedRev = -1;
+		this.draws = [];
+		this.cmps = [];
+		this.uOff = 0;
+		this.stamp = 0;
+		this.plotR = {
+			x: 0,
+			y: 0,
+			w: 1,
+			h: 1
+		};
+		this.cols = 1;
+		this.t = 1;
+		this.flow = 0;
+		this.tailScratch = /* @__PURE__ */ new Float32Array(4);
+		this.gpuMs = null;
+		this.querySet = null;
+		this.queryBuf = null;
+		this.readBuf = null;
+		this.reading = false;
+		this.timing = false;
+		this.destroyed = false;
+		this.dead = false;
+		this.recovering = false;
+		this.opts = opts;
+		this.timing = !!opts.timing;
+		this.canvas = canvas;
+		canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none";
+		const ctx = canvas.getContext("webgpu");
+		if (!ctx) throw new Error("resolvcharts: webgpu context unavailable");
+		this.ctx = ctx;
+		this.device = device;
+		this.format = navigator.gpu.getPreferredCanvasFormat();
+		this.setup(device);
+	}
+	static async create(opts = {}) {
+		const device = await getGpuDevice(opts);
+		if (!device) return null;
+		const canvas = document.createElement("canvas");
+		try {
+			return new GpuSeries(device, canvas, opts);
+		} catch {
+			return null;
+		}
+	}
+	/** (re)create all device-bound resources — called on init and after loss */
+	setup(device) {
+		this.device = device;
+		this.layout = device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: STAGE_ALL,
+			buffer: {
+				type: "uniform",
+				hasDynamicOffset: true
+			}
+		}] });
+		this.decLayout = device.createBindGroupLayout({ entries: [
+			{
+				binding: 0,
+				visibility: 4,
+				buffer: { type: "read-only-storage" }
+			},
+			{
+				binding: 1,
+				visibility: 4,
+				buffer: { type: "read-only-storage" }
+			},
+			{
+				binding: 2,
+				visibility: 4,
+				buffer: { type: "storage" }
+			}
+		] });
+		this.ubuf = device.createBuffer({
+			size: UBUF_SIZE,
+			usage: BUF_UNIFORM_DST
+		});
+		this.ubiGroup = device.createBindGroup({
+			layout: this.layout,
+			entries: [{
+				binding: 0,
+				resource: {
+					buffer: this.ubuf,
+					size: 112
+				}
+			}]
+		});
+		const pl = device.createPipelineLayout({ bindGroupLayouts: [this.layout] });
+		const decPl = device.createPipelineLayout({ bindGroupLayouts: [this.layout, this.decLayout] });
+		const mk = (code, topology, buffers) => device.createRenderPipeline({
+			layout: pl,
+			vertex: {
+				module: device.createShaderModule({ code }),
+				entryPoint: "vs",
+				buffers
+			},
+			fragment: {
+				module: device.createShaderModule({ code }),
+				entryPoint: "fs",
+				targets: [{
+					format: this.format,
+					blend: BLEND
+				}]
+			},
+			primitive: { topology }
+		});
+		const iXY = {
+			arrayStride: 8,
+			stepMode: "instance",
+			attributes: [{
+				shaderLocation: 0,
+				offset: 0,
+				format: "float32x2"
+			}]
+		};
+		const iXY1 = {
+			arrayStride: 8,
+			stepMode: "instance",
+			attributes: [{
+				shaderLocation: 1,
+				offset: 0,
+				format: "float32x2"
+			}]
+		};
+		const iPrev = {
+			arrayStride: 4,
+			stepMode: "instance",
+			attributes: [{
+				shaderLocation: 2,
+				offset: 0,
+				format: "float32"
+			}]
+		};
+		const iPrev1 = {
+			arrayStride: 4,
+			stepMode: "instance",
+			attributes: [{
+				shaderLocation: 3,
+				offset: 0,
+				format: "float32"
+			}]
+		};
+		const iPrevPt = {
+			arrayStride: 4,
+			stepMode: "instance",
+			attributes: [{
+				shaderLocation: 1,
+				offset: 0,
+				format: "float32"
+			}]
+		};
+		const vXY = {
+			arrayStride: 8,
+			stepMode: "vertex",
+			attributes: [{
+				shaderLocation: 0,
+				offset: 0,
+				format: "float32x2"
+			}]
+		};
+		const vPrev = {
+			arrayStride: 4,
+			stepMode: "vertex",
+			attributes: [{
+				shaderLocation: 1,
+				offset: 0,
+				format: "float32"
+			}]
+		};
+		this.pipes = {
+			line: mk(LINE_WGSL, "triangle-list", [
+				iXY,
+				iXY1,
+				iPrev,
+				iPrev1
+			]),
+			lineFlat: mk(LINE_FLAT_WGSL, "triangle-list", [iXY, iXY1]),
+			area: mk(AREA_WGSL, "triangle-strip", [vXY, vPrev]),
+			areaFlat: mk(AREA_FLAT_WGSL, "triangle-strip", [vXY]),
+			points: mk(POINTS_WGSL, "triangle-list", [iXY, iPrevPt]),
+			dec: device.createComputePipeline({
+				layout: decPl,
+				compute: {
+					module: device.createShaderModule({ code: DECIMATE_WGSL }),
+					entryPoint: "dec"
+				}
+			})
+		};
+		if (this.timing && device.features.has("timestamp-query")) {
+			this.querySet = device.createQuerySet({
+				type: "timestamp",
+				count: 2
+			});
+			this.queryBuf = device.createBuffer({
+				size: 16,
+				usage: BUF_RESOLVE_SRC
+			});
+			this.readBuf = device.createBuffer({
+				size: 16,
+				usage: BUF_MAPREAD_DST
+			});
+		}
+		device.lost.then((info) => this.onLost(info));
+	}
+	onLost(info) {
+		if (this.destroyed) return;
+		if (info.reason === "destroyed") {
+			this.dead = true;
+			return;
+		}
+		this.recovering = true;
+		getGpuDevice(this.opts).then((nd) => {
+			if (!nd || this.destroyed) {
+				this.fail();
+				return;
+			}
+			try {
+				this.teardownResources();
+				this.setup(nd);
+				try {
+					this.configure();
+				} catch {
+					const nc = document.createElement("canvas");
+					nc.width = this.canvas.width;
+					nc.height = this.canvas.height;
+					this.canvas.replaceWith(nc);
+					this.canvas = nc;
+					const ctx = nc.getContext("webgpu");
+					if (!ctx) throw new Error("webgpu context lost");
+					this.ctx = ctx;
+					this.configure();
+				}
+				this.appliedRev = -1;
+				this.recovering = false;
+			} catch {
+				this.fail();
+			}
+		});
+	}
+	fail() {
+		this.dead = true;
+		this.recovering = false;
+		this.destroy();
+	}
+	teardownResources() {
+		for (const s of this.slots) {
+			s.xy.destroy();
+			s.prev.destroy();
+			s.scratch?.destroy();
+			s.dec?.destroy();
+		}
+		this.slots = [];
+		this.slotCount = 0;
+		this.ubuf.destroy();
+		this.queryBuf?.destroy();
+		this.readBuf?.destroy();
+		this.querySet?.destroy();
+		this.querySet = null;
+		this.queryBuf = null;
+		this.readBuf = null;
+	}
+	configure() {
+		this.ctx.configure({
+			device: this.device,
+			format: this.format,
+			alphaMode: "premultiplied"
+		});
+	}
+	setSize(cssW, cssH, dpr) {
+		this.dpr = dpr;
+		this.canvas.width = Math.max(1, Math.round(cssW * dpr));
+		this.canvas.height = Math.max(1, Math.round(cssH * dpr));
+		if (!this.unavailable) this.configure();
+	}
+	upload(i, xs, s) {
+		const n = Math.min(xs.length, s.y.length);
+		const xr = n > 0 ? xs[0] : 0;
+		const xu = 1 / ((n > 0 ? xs[n - 1] - xr : 0) || Math.max(1, Math.abs(xr), 1));
+		let mn = Infinity;
+		let mx = -Infinity;
+		for (let j = 0; j < n; j++) {
+			const v = s.y[j];
+			if (v < mn) mn = v;
+			if (v > mx) mx = v;
+		}
+		const yr = mn === Infinity ? 0 : mn;
+		const yu = 1 / (mx - mn || Math.max(1, Math.abs(yr)));
+		let slot = this.slots[i];
+		const cap = Math.max(1024, Math.ceil(n * 1.25));
+		if (!slot || slot.cap < n) {
+			slot?.xy.destroy();
+			slot?.prev.destroy();
+			slot?.dec?.destroy();
+			slot = {
+				n,
+				cap,
+				start: 0,
+				enc: {
+					xr,
+					xu,
+					yr,
+					yu
+				},
+				encXY: new Float32Array(cap * 2),
+				encPrev: new Float32Array(cap),
+				xy: this.device.createBuffer({
+					size: cap * 8,
+					usage: BUF_SERIES
+				}),
+				prev: this.device.createBuffer({
+					size: cap * 4,
+					usage: BUF_SERIES
+				}),
+				scratch: null,
+				scratchN: 0,
+				dec: null,
+				decCols: 0,
+				bg: null,
+				decStamp: -1
+			};
+			this.slots[i] = slot;
+		} else {
+			slot.n = n;
+			slot.start = 0;
+			slot.enc = {
+				xr,
+				xu,
+				yr,
+				yu
+			};
+			slot.bg = null;
+			slot.decStamp = -1;
+		}
+		const { encXY, encPrev } = slot;
+		const prev = s.prevY;
+		for (let j = 0; j < n; j++) {
+			encXY[2 * j] = (xs[j] - xr) * xu;
+			encXY[2 * j + 1] = (s.y[j] - yr) * yu;
+			encPrev[j] = prev ? (prev[j] - yr) * yu : 0;
+		}
+		this.device.queue.writeBuffer(slot.xy, 0, encXY, 0, n * 2);
+		this.device.queue.writeBuffer(slot.prev, 0, encPrev, 0, n);
+	}
+	/**
+	* Full-upload hook: call once per frame with a revision that changes
+	* whenever the data is replaced/rebuilt. Unchanged revisions are free.
+	*/
+	syncData(d, rev) {
+		if (this.unavailable || rev === this.appliedRev && this.slotCount === d.series.length) return;
+		for (let i = 0; i < d.series.length; i++) {
+			const s = d.series[i];
+			if (s) this.upload(i, d.sortedX, s);
+		}
+		this.slotCount = d.series.length;
+		this.appliedRev = rev;
+	}
+	/**
+	* Ring-buffer streaming append: writes only the appended tail per series.
+	* `ys[i]` is the new y for series i, `prevYs[i]` the y it animates from
+	* (the previous tail value), `dropped` how many leading points were evicted.
+	*/
+	appended(x, ys, prevYs, dropped) {
+		if (this.unavailable) return false;
+		const q = this.device.queue;
+		for (let i = 0; i < this.slotCount; i++) {
+			const s = this.slots[i];
+			if (!s) return false;
+			const n2 = s.n - dropped + 1;
+			if (n2 > s.cap) this.grow(s, n2);
+			s.start = (s.start + dropped) % s.cap;
+			s.n = n2;
+			const pNew = (s.start + s.n - 1) % s.cap;
+			const { xr, xu, yr, yu } = s.enc;
+			const ex = (x - xr) * xu;
+			const ey = ((ys[i] ?? 0) - yr) * yu;
+			const ep = ((prevYs[i] ?? 0) - yr) * yu;
+			const t = this.tailScratch;
+			t[0] = ex;
+			t[1] = ey;
+			q.writeBuffer(s.xy, pNew * 8, t, 0, 2);
+			s.encXY[2 * pNew] = ex;
+			s.encXY[2 * pNew + 1] = ey;
+			t[0] = ep;
+			q.writeBuffer(s.prev, pNew * 4, t, 0, 1);
+			s.encPrev[pNew] = ep;
+			if (s.n > 1) {
+				const pOld = (pNew + s.cap - 1) % s.cap;
+				q.writeBuffer(s.prev, pOld * 4, t, 0, 1);
+				s.encPrev[pOld] = ep;
+			}
+		}
+		return true;
+	}
+	/** grow ring capacity, unwrapping logical order into the new buffer */
+	grow(s, need) {
+		const cap = Math.max(s.cap * 2, need + 1024);
+		const a = s.cap - s.start;
+		const enc = this.device.createCommandEncoder();
+		const xy = this.device.createBuffer({
+			size: cap * 8,
+			usage: BUF_SERIES
+		});
+		const prev = this.device.createBuffer({
+			size: cap * 4,
+			usage: BUF_SERIES
+		});
+		enc.copyBufferToBuffer(s.xy, s.start * 8, xy, 0, a * 8);
+		if (s.start > 0) enc.copyBufferToBuffer(s.xy, 0, xy, a * 8, s.start * 8);
+		enc.copyBufferToBuffer(s.prev, s.start * 4, prev, 0, a * 4);
+		if (s.start > 0) enc.copyBufferToBuffer(s.prev, 0, prev, a * 4, s.start * 4);
+		this.device.queue.submit([enc.finish()]);
+		s.xy.destroy();
+		s.prev.destroy();
+		s.xy = xy;
+		s.prev = prev;
+		const encXY = new Float32Array(cap * 2);
+		const encPrev = new Float32Array(cap);
+		encXY.set(s.encXY.subarray(s.start * 2, s.cap * 2), 0);
+		encXY.set(s.encXY.subarray(0, s.start * 2), a * 2);
+		encPrev.set(s.encPrev.subarray(s.start, s.cap), 0);
+		encPrev.set(s.encPrev.subarray(0, s.start), a);
+		s.encXY = encXY;
+		s.encPrev = encPrev;
+		s.cap = cap;
+		s.start = 0;
+		s.bg = null;
+	}
+	begin(plot, t = 1, flow = 0) {
+		this.plotR = plot;
+		this.t = t;
+		this.flow = flow;
+		this.cols = Math.max(1, Math.ceil(plot.x + plot.w));
+		this.stamp++;
+		this.draws.length = 0;
+		this.cmps.length = 0;
+		this.uOff = 0;
+	}
+	/** encoded→css affine for this slot and view domain */
+	mapFor(s, view) {
+		const { xr, xu, yr, yu } = s.enc;
+		const p = this.plotR;
+		const ex0 = (view.x[0] - xr) * xu;
+		const ex1 = (view.x[1] - xr) * xu;
+		const ax = p.w / (ex1 - ex0 || 1e-30);
+		const bx = p.x - ex0 * ax;
+		const ey0 = (view.y[0] - yr) * yu;
+		const ey1 = (view.y[1] - yr) * yu;
+		const ay = p.h / (ey1 - ey0 || 1e-30);
+		return [
+			ax,
+			bx,
+			ay,
+			p.y + ey1 * ay
+		];
+	}
+	writeU(color, alpha, p, map, s, dec) {
+		const off = this.uOff;
+		this.uOff += UBYTES;
+		const u = /* @__PURE__ */ new Float32Array(28);
+		u.set([
+			this.canvas.width,
+			this.canvas.height,
+			this.dpr,
+			0
+		]);
+		const [r, g, b, a] = parseColor(color);
+		u.set([
+			r,
+			g,
+			b,
+			a * alpha
+		], 4);
+		u.set(p, 8);
+		u.set(map, 12);
+		const inv = s.n > 1 ? this.flow / (s.n - 1) : 0;
+		u.set([
+			this.t,
+			this.flow,
+			inv,
+			0
+		], 16);
+		u.set([
+			s.start,
+			s.cap,
+			s.n,
+			0
+		], 20);
+		u.set([
+			dec[0],
+			dec[1],
+			0,
+			0
+		], 24);
+		this.device.queue.writeBuffer(this.ubuf, off, u);
+		return off;
+	}
+	decimateWanted(s) {
+		return s.n > this.cols * 2;
+	}
+	ensureDec(s) {
+		if (s.dec && s.decCols >= this.cols) return;
+		s.dec?.destroy();
+		const cols = Math.max(this.cols, Math.ceil(this.canvas.width / this.dpr));
+		s.dec = this.device.createBuffer({
+			size: cols * DEC_ELEMS_PER_COL * 8,
+			usage: BUF_DEC
+		});
+		s.decCols = cols;
+		s.bg = null;
+	}
+	dispatchDec(s, map, gapFillY) {
+		if (s.decStamp === this.stamp) return;
+		s.decStamp = this.stamp;
+		this.ensureDec(s);
+		if (!s.bg) s.bg = this.device.createBindGroup({
+			layout: this.decLayout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: s.xy }
+				},
+				{
+					binding: 1,
+					resource: { buffer: s.prev }
+				},
+				{
+					binding: 2,
+					resource: { buffer: s.dec }
+				}
+			]
+		});
+		const u = this.writeU("#ffffff", 1, [
+			0,
+			0,
+			0,
+			0
+		], map, s, [this.cols, gapFillY]);
+		this.cmps.push({
+			slot: s,
+			u
+		});
+	}
+	line(slot, color, width, view) {
+		const s = this.slots[slot];
+		if (!s || s.n < 2) return;
+		const map = this.mapFor(s, view);
+		if (this.decimateWanted(s)) {
+			this.dispatchDec(s, map, 0);
+			const u = this.writeU(color, 1, [
+				width,
+				0,
+				0,
+				0
+			], map, s, [0, 0]);
+			this.draws.push({
+				pipe: this.pipes.lineFlat,
+				vbufs: [{
+					buf: s.dec,
+					off: 0
+				}, {
+					buf: s.dec,
+					off: 8
+				}],
+				u,
+				verts: 6,
+				insts: 4 * this.cols - 1
+			});
+			return;
+		}
+		const u = this.writeU(color, 1, [
+			width,
+			0,
+			0,
+			0
+		], map, s, [0, 0]);
+		const mk = (o0, o1, insts) => ({
+			pipe: this.pipes.line,
+			vbufs: [
+				{
+					buf: s.xy,
+					off: o0 * 8
+				},
+				{
+					buf: s.xy,
+					off: o1 * 8
+				},
+				{
+					buf: s.prev,
+					off: o0 * 4
+				},
+				{
+					buf: s.prev,
+					off: o1 * 4
+				}
+			],
+			u,
+			verts: 6,
+			insts
+		});
+		if (s.start + s.n <= s.cap) {
+			this.draws.push(mk(s.start, s.start + 1, s.n - 1));
+			return;
+		}
+		const capA = s.cap - s.start;
+		if (capA > 1) this.draws.push(mk(s.start, s.start + 1, capA - 1));
+		this.draws.push(mk(s.cap - 1, 0, 1));
+		const rem = s.n - 1 - capA;
+		if (rem > 0) this.draws.push(mk(0, 1, rem));
+	}
+	area(slot, color, baseVal, view) {
+		const s = this.slots[slot];
+		if (!s || s.n < 2) return;
+		const map = this.mapFor(s, view);
+		const baseEnc = (baseVal - s.enc.yr) * s.enc.yu;
+		const baseCss = map[3] - baseEnc * map[2];
+		const p = this.plotR;
+		if (this.decimateWanted(s)) {
+			this.dispatchDec(s, map, baseEnc);
+			const u = this.writeU(color, 1, [
+				baseCss,
+				p.y,
+				p.h,
+				0
+			], map, s, [0, 0]);
+			this.draws.push({
+				pipe: this.pipes.areaFlat,
+				vbufs: [{
+					buf: s.dec,
+					off: this.cols * 4 * 8
+				}],
+				u,
+				verts: 8 * this.cols,
+				insts: 1
+			});
+			return;
+		}
+		const m = s.n;
+		const xyD = new Float32Array(m * 4);
+		const pvD = new Float32Array(m * 2);
+		for (let i = 0; i < m; i++) {
+			const ph = (s.start + i) % s.cap;
+			xyD[4 * i] = s.encXY[2 * ph];
+			xyD[4 * i + 1] = s.encXY[2 * ph + 1];
+			xyD[4 * i + 2] = xyD[4 * i];
+			xyD[4 * i + 3] = xyD[4 * i + 1];
+			pvD[2 * i] = s.encPrev[ph];
+			pvD[2 * i + 1] = pvD[2 * i];
+		}
+		if (!s.scratch || s.scratchN < m) {
+			s.scratch?.destroy();
+			s.scratch = this.device.createBuffer({
+				size: Math.max(4096, m * 24),
+				usage: BUF_VERTEX_DST
+			});
+			s.scratchN = m;
+		}
+		const prevOff = m * 16;
+		this.device.queue.writeBuffer(s.scratch, 0, xyD);
+		this.device.queue.writeBuffer(s.scratch, prevOff, pvD);
+		const u = this.writeU(color, 1, [
+			baseCss,
+			p.y,
+			p.h,
+			0
+		], map, s, [0, 0]);
+		this.draws.push({
+			pipe: this.pipes.area,
+			vbufs: [{
+				buf: s.scratch,
+				off: 0
+			}, {
+				buf: s.scratch,
+				off: prevOff
+			}],
+			u,
+			verts: m * 2,
+			insts: 1
+		});
+	}
+	points(slot, color, radius, alpha, view) {
+		const s = this.slots[slot];
+		if (!s || s.n < 1) return;
+		const map = this.mapFor(s, view);
+		const u = this.writeU(color, alpha, [
+			radius,
+			0,
+			0,
+			0
+		], map, s, [0, 0]);
+		const mk = (o0, insts) => ({
+			pipe: this.pipes.points,
+			vbufs: [{
+				buf: s.xy,
+				off: o0 * 8
+			}, {
+				buf: s.prev,
+				off: o0 * 4
+			}],
+			u,
+			verts: 6,
+			insts
+		});
+		if (s.start + s.n <= s.cap) {
+			this.draws.push(mk(s.start, s.n));
+			return;
+		}
+		const capA = s.cap - s.start;
+		this.draws.push(mk(s.start, capA));
+		if (s.n - capA > 0) this.draws.push(mk(0, s.n - capA));
+	}
+	end() {
+		if (this.unavailable || !this.draws.length && !this.cmps.length) return;
+		try {
+			const encoder = this.device.createCommandEncoder();
+			if (this.cmps.length) {
+				const cp = encoder.beginComputePass();
+				cp.setPipeline(this.pipes.dec);
+				for (const c of this.cmps) {
+					cp.setBindGroup(0, this.ubiGroup, [c.u]);
+					cp.setBindGroup(1, c.slot.bg);
+					cp.dispatchWorkgroups(Math.ceil(this.cols / 64));
+				}
+				cp.end();
+			}
+			if (this.draws.length) {
+				const view = this.ctx.getCurrentTexture().createView();
+				const d = this.dpr;
+				const plot = this.plotR;
+				const pass = encoder.beginRenderPass({
+					colorAttachments: [{
+						view,
+						loadOp: "clear",
+						storeOp: "store",
+						clearValue: {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}
+					}],
+					...this.querySet ? { timestampWrites: {
+						querySet: this.querySet,
+						beginningOfPassWriteIndex: 0,
+						endOfPassWriteIndex: 1
+					} } : {}
+				});
+				pass.setScissorRect(Math.max(0, Math.floor(plot.x * d)), Math.max(0, Math.floor(plot.y * d)), Math.max(1, Math.floor(plot.w * d)), Math.max(1, Math.floor(plot.h * d)));
+				for (const op of this.draws) {
+					pass.setPipeline(op.pipe);
+					pass.setBindGroup(0, this.ubiGroup, [op.u]);
+					for (let i = 0; i < op.vbufs.length; i++) {
+						const v = op.vbufs[i];
+						if (v) pass.setVertexBuffer(i, v.buf, v.off);
+					}
+					pass.draw(op.verts, op.insts);
+				}
+				pass.end();
+			}
+			const qs = this.querySet;
+			const qb = this.queryBuf;
+			const rb = this.readBuf;
+			if (qs && qb && rb && !this.reading) {
+				encoder.resolveQuerySet(qs, 0, 2, qb, 0);
+				encoder.copyBufferToBuffer(qb, 0, rb, 0, 16);
+				this.reading = true;
+				this.device.queue.submit([encoder.finish()]);
+				rb.mapAsync(MAP_READ).then(() => {
+					const v = new BigUint64Array(rb.getMappedRange());
+					const t0 = v[0];
+					const t1 = v[1];
+					if (t0 !== void 0 && t1 !== void 0) this.gpuMs = Number(t1 - t0) / 1e6;
+					rb.unmap();
+					this.reading = false;
+				}, () => {
+					this.reading = false;
+				});
+			} else this.device.queue.submit([encoder.finish()]);
+		} catch {}
+	}
+	destroy() {
+		this.destroyed = true;
+		for (const s of this.slots) {
+			s.xy.destroy();
+			s.prev.destroy();
+			s.scratch?.destroy();
+			s.dec?.destroy();
+		}
+		this.slots = [];
+		this.ubuf?.destroy();
+		this.queryBuf?.destroy();
+		this.readBuf?.destroy();
+		this.querySet?.destroy();
+		try {
+			this.ctx.unconfigure();
+		} catch {}
+		this.canvas.remove();
+	}
+};
+const BLEND = {
+	color: {
+		srcFactor: "src-alpha",
+		dstFactor: "one-minus-src-alpha",
+		operation: "add"
+	},
+	alpha: {
+		srcFactor: "one",
+		dstFactor: "one-minus-src-alpha",
+		operation: "add"
+	}
+};
+//#endregion
+exports.GpuSeries = GpuSeries;
+
+//# sourceMappingURL=series-PmAjztEh.cjs.map