chartai 0.0.1

package/dist/gpu-worker.js

@@ -0,0 +1,853 @@
+// src/shaders/shared.ts
+var COMPUTE_WG = 256;
+var UNIFORM_STRUCT = `struct Uniforms{width: f32,height: f32,viewMinX: f32,viewMaxX: f32,viewMinY: f32,viewMaxY: f32,pointCount: u32,isDark: f32,bgR: f32,bgG: f32,bgB: f32,pointRadius: f32,dataMinY: f32,dataMaxY: f32,dataMinX: f32,dataMaxX: f32,visibleStart: u32,visibleCount: u32,dispatchXCount: u32,maxSamplesPerPixel: u32,seriesCount: u32,_pad2: u32,_pad3: u32,_pad4: u32,};struct SeriesInfo{color: vec4f,visibleRange: vec2u,pointSize: f32,_pad: f32,};struct SeriesIndex{index: u32,_pad0: u32,_pad1: u32,_pad2: u32,};`;
+var BINARY_SEARCH = `fn lowerBound(val: f32,count: u32)-> u32{var lo = 0u;var hi = count;while(lo < hi){let mid =(lo + hi)/ 2u;if(dataX[mid] < val){lo = mid + 1u;}else{hi = mid;}}return lo;}`;
+var FXAA_SHADER = `fn l(c:vec4f)->f32{return dot(c.rgb,vec3f(.299,.587,.114))+c.a*.25;}fn fxaa(u:vec2f,t:texture_2d<f32>,s:sampler)->vec4f{let r=1./vec2f(textureDimensions(t));let rM=textureSampleLevel(t,s,u,0.);let rN=textureSampleLevel(t,s,u+vec2f(0.,-r.y),0.);let rS=textureSampleLevel(t,s,u+vec2f(0.,r.y),0.);let rE=textureSampleLevel(t,s,u+vec2f(r.x,0.),0.);let rW=textureSampleLevel(t,s,u+vec2f(-r.x,0.),0.);let lM=l(rM);let lN=l(rN);let lS=l(rS);let lE=l(rE);let lW=l(rW);let mi=min(lM,min(min(lN,lS),min(lE,lW)));let ma=max(lM,max(max(lN,lS),max(lE,lW)));let ra=ma-mi;if(ra<max(.0833,ma*.166)){return rM;}let lNW=l(textureSampleLevel(t,s,u+vec2f(-r.x,-r.y),0.));let lNE=l(textureSampleLevel(t,s,u+vec2f(r.x,-r.y),0.));let lSW=l(textureSampleLevel(t,s,u+vec2f(-r.x,r.y),0.));let lSE=l(textureSampleLevel(t,s,u+vec2f(r.x,r.y),0.));let sB=min(.35,max(0.,abs((lN+lS+lE+lW)*.25-lM)/ra-.25)*1.33);let iH=abs(lNW+lNE-2.*lN)+abs(lW+lE-2.*lM)*2.+abs(lSW+lSE-2.*lS)>=abs(lNW+lSW-2.*lW)+abs(lN+lS-2.*lM)*2.+abs(lNE+lSE-2.*lE);let l1=select(lW,lN,iH);let l2=select(lE,lS,iH);let pD=abs(l2-lM)>abs(l1-lM);let sL=select(r.x,r.y,iH);let lA=.5*(select(l1,l2,pD)+lM);let gS=max(abs(l1-lM),abs(l2-lM))*.25;var eU=u;if(iH){eU.y+=select(-.5,.5,pD)*sL;}else{eU.x+=select(-.5,.5,pD)*sL;}let eS=select(vec2f(r.x,0.),vec2f(0.,r.y),iH);var uN=eU-eS;var uP=eU+eS;var eN=l(textureSampleLevel(t,s,uN,0.))-lA;var eP=l(textureSampleLevel(t,s,uP,0.))-lA;var dN=abs(eN)>=gS;var dP=abs(eP)>=gS;for(var i=1;i<8;i++){if(!dN){uN-=eS*1.5;eN=l(textureSampleLevel(t,s,uN,0.))-lA;dN=abs(eN)>=gS;}if(!dP){uP+=eS*1.5;eP=l(textureSampleLevel(t,s,uP,0.))-lA;dP=abs(eP)>=gS;}if(dN&&dP){break;}}let dtN=select(u.x-uN.x,u.y-uN.y,iH);let dtP=select(uP.x-u.x,uP.y-u.y,iH);let eB=select(0.,.5-min(dtN,dtP)/(dtN+dtP),(lM-lA<0.)!=(select(eP<0.,eN<0.,dtN<dtP)));var fU=u;let fL=max(eB,sB);if(iH){fU.y+=select(-1.,1.,pD)*fL*sL;}else{fU.x+=select(-1.,1.,pD)*fL*sL;}return textureSampleLevel(t,s,fU,0.);}`;
+var FXAA_RENDER_SHADER = `${UNIFORM_STRUCT}${FXAA_SHADER}@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var inputTex: texture_2d<f32>;@group(0)@binding(2)var samp: sampler;struct VertexOutput{@builtin(position)pos: vec4f,@location(0)uv: vec2f,};@vertex fn vs(@builtin(vertex_index)vi: u32)-> VertexOutput{var positions = array<vec2f,4>(vec2f(-1.0,-1.0),vec2f(1.0,-1.0),vec2f(-1.0,1.0),vec2f(1.0,1.0));var uvs = array<vec2f,4>(vec2f(0.0,1.0),vec2f(1.0,1.0),vec2f(0.0,0.0),vec2f(1.0,0.0));var out: VertexOutput;out.pos = vec4f(positions[vi],0.0,1.0);out.uv = uvs[vi];return out;}@fragment fn fs(in: VertexOutput)-> @location(0)vec4f{return fxaa(in.uv,inputTex,samp);}`;
+
+// src/shaders/line.ts
+var LINE_COMPUTE_SHADER = `${UNIFORM_STRUCT}struct LineData{screenX: f32,minScreenY: f32,maxScreenY: f32,valid: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> dataX: array<f32>;@group(0)@binding(2)var<storage,read> dataY: array<f32>;@group(0)@binding(3)var<storage,read_write> lineData: array<LineData>;@group(0)@binding(4)var<storage,read> allSeries: array<SeriesInfo>;${BINARY_SEARCH}@compute @workgroup_size(${COMPUTE_WG})fn main(@builtin(global_invocation_id)id: vec3u){let outputIdx = id.x;let maxCols = u32(u.width);let count = u.pointCount;if(outputIdx >= maxCols || count == 0u){if(outputIdx < maxCols){lineData[outputIdx] = LineData(-1.0,-1.0,-1.0,0.0);}return;}let viewRangeX = u.viewMaxX - u.viewMinX;let viewRangeY = u.viewMaxY - u.viewMinY;if(viewRangeX < 0.0001 || viewRangeY < 0.0001){lineData[outputIdx] = LineData(-1.0,-1.0,-1.0,0.0);return;}let relPx = f32(outputIdx);let pixelMinX = u.viewMinX +(relPx / u.width)* viewRangeX;let pixelMaxX = u.viewMinX +((relPx + 1.0)/ u.width)* viewRangeX;let startIdx = lowerBound(pixelMinX,count);var endIdx = lowerBound(pixelMaxX,count);endIdx = min(endIdx,count);let centerX =(pixelMinX + pixelMaxX)* 0.5;if(startIdx >= endIdx){var bestIdx = startIdx;if(startIdx > 0u && startIdx < count){let distPrev = abs(dataX[startIdx - 1u] - centerX);let distCurr = abs(dataX[startIdx] - centerX);if(distPrev < distCurr){bestIdx = startIdx - 1u;}}else if(startIdx >= count && count > 0u){bestIdx = count - 1u;}if(bestIdx >= count){lineData[outputIdx] = LineData(-1.0,-1.0,-1.0,0.0);return;}let y = dataY[bestIdx];let normY =(y - u.viewMinY)/ viewRangeY;let screenY = 1.0 - normY;let normX =(dataX[bestIdx] - u.viewMinX)/ viewRangeX;let screenX = normX;lineData[outputIdx] = LineData(screenX,screenY,screenY,1.0);return;}var dataMinY = dataY[startIdx];var dataMaxY = dataY[startIdx];let rangeCount = endIdx - startIdx;let maxSamples = u.maxSamplesPerPixel;if(maxSamples > 1u && rangeCount > maxSamples){let stride = f32(rangeCount - 1u)/ f32(maxSamples - 1u);for(var s = 0u;s < maxSamples;s++){let idx = startIdx + u32(f32(s)* stride);if(idx < endIdx){let y = dataY[idx];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let lastY = dataY[endIdx - 1u];dataMinY = min(dataMinY,lastY);dataMaxY = max(dataMaxY,lastY);}else{for(var i = startIdx + 1u;i < endIdx;i++){let y = dataY[i];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let normX =(centerX - u.viewMinX)/ viewRangeX;let screenX = normX;let normMaxY =(dataMaxY - u.viewMinY)/ viewRangeY;let normMinY =(dataMinY - u.viewMinY)/ viewRangeY;let minScreenY = 1.0 - normMaxY;let maxScreenY = 1.0 - normMinY;lineData[outputIdx] = LineData(screenX,minScreenY,maxScreenY,1.0);}`;
+var LINE_RENDER_SHADER = `${UNIFORM_STRUCT}struct LineData{screenX: f32,minScreenY: f32,maxScreenY: f32,valid: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> lineData: array<LineData>;@group(0)@binding(2)var<storage,read> allSeries: array<SeriesInfo>;struct VertexOutput{@builtin(position)pos: vec4f,@location(0)alpha: f32,@location(1)@interpolate(flat)seriesIdx: u32,};@vertex fn vs(@builtin(vertex_index)vi: u32,@builtin(instance_index)series_idx: u32)-> VertexOutput{var out: VertexOutput;out.seriesIdx = series_idx;let maxCols = u32(u.width);let segIdx = vi / 2u;let endpoint = vi % 2u;if(segIdx < maxCols){let d = lineData[segIdx];let y = select(d.maxScreenY,d.minScreenY,endpoint == 0u);out.pos = vec4f(d.screenX * 2.0 - 1.0,1.0 - y * 2.0,0.0,d.valid);out.alpha = d.valid;}else{let connIdx = segIdx - maxCols;if(connIdx + 1u >= maxCols){out.pos = vec4f(0.0,0.0,0.0,0.0);out.alpha = 0.0;return out;}let d0 = lineData[connIdx];let d1 = lineData[connIdx + 1u];let segValid = min(d0.valid,d1.valid);if(endpoint == 0u){let midY =(d0.minScreenY + d0.maxScreenY)* 0.5;out.pos = vec4f(d0.screenX * 2.0 - 1.0,1.0 - midY * 2.0,0.0,segValid);}else{let midY =(d1.minScreenY + d1.maxScreenY)* 0.5;out.pos = vec4f(d1.screenX * 2.0 - 1.0,1.0 - midY * 2.0,0.0,segValid);}out.alpha = segValid;}return out;}@fragment fn fs(in: VertexOutput)-> @location(0)vec4f{if(in.alpha < 0.1){discard;}let series = allSeries[in.seriesIdx];return vec4f(series.color.rgb,1.0);}`;
+
+// src/shaders/scatter.ts
+var SCATTER_COMPUTE_SHADER = `${UNIFORM_STRUCT}@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> dataX: array<f32>;@group(0)@binding(2)var<storage,read> dataY: array<f32>;@group(0)@binding(3)var outputTex: texture_storage_2d<rgba8unorm,write>;@group(0)@binding(4)var<storage,read> allSeries: array<SeriesInfo>;@group(0)@binding(5)var<uniform> seriesIdx: SeriesIndex;@compute @workgroup_size(${COMPUTE_WG})fn main(@builtin(global_invocation_id)id: vec3u){let series = allSeries[seriesIdx.index];let visStart = series.visibleRange.x;let visCount = series.visibleRange.y;let localIdx = id.y * u.dispatchXCount + id.x;if(localIdx >= visCount){return;}let idx = visStart + localIdx;let count = u.pointCount;if(idx >= count){return;}let x = dataX[idx];let y = dataY[idx];if(y < u.viewMinY || y > u.viewMaxY){return;}let width = u32(u.width);let height = u32(u.height);let rangeX = u.viewMaxX - u.viewMinX;let rangeY = u.viewMaxY - u.viewMinY;if(rangeX < 0.0001 || rangeY < 0.0001){return;}let normX =(x - u.viewMinX)/ rangeX;let normY =(y - u.viewMinY)/ rangeY;let screenX = normX;let screenY = 1.0 - normY;let pixelX = i32(screenX * f32(width));let pixelY = i32(screenY * f32(height));if(idx > visStart){let prevX = dataX[idx - 1u];let prevY = dataY[idx - 1u];let prevNormX =(prevX - u.viewMinX)/ rangeX;let prevNormY =(prevY - u.viewMinY)/ rangeY;let prevPx = i32(prevNormX * f32(width));let prevPy = i32((1.0 - prevNormY)* f32(height));if(pixelX == prevPx && pixelY == prevPy){return;}}let iWidth = i32(width);let iHeight = i32(height);if(pixelX < 0 || pixelX >= iWidth){return;}if(pixelY < 0 || pixelY >= iHeight){return;}let color = series.color;let radius = i32(series.pointSize);for(var dy = -radius;dy <= radius;dy++){for(var dx = -radius;dx <= radius;dx++){if(dx * dx + dy * dy > radius * radius){continue;}let px = pixelX + dx;let py = pixelY + dy;if(px >= 0 && px < iWidth && py >= 0 && py < iHeight){textureStore(outputTex,vec2i(px,py),color);}}}}`;
+
+// src/shaders/box.ts
+var BOX_COMPUTE_SHADER = `${UNIFORM_STRUCT}struct BarData{screenX: f32,minY: f32,maxY: f32,barWidth: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> dataX: array<f32>;@group(0)@binding(2)var<storage,read> dataY: array<f32>;@group(0)@binding(3)var<storage,read_write> barData: array<BarData>;@group(0)@binding(4)var<storage,read> allSeries: array<SeriesInfo>;@group(0)@binding(5)var<uniform> seriesIdx: SeriesIndex;${BINARY_SEARCH}fn barHalfWidth(idx: u32,count: u32)-> f32{if(count <= 1u){return(u.viewMaxX - u.viewMinX)* 0.4;}var spacing: f32;if(idx == 0u){spacing = dataX[1u] - dataX[0u];}else if(idx >= count - 1u){spacing = dataX[count - 1u] - dataX[count - 2u];}else{spacing = min(dataX[idx + 1u] - dataX[idx],dataX[idx] - dataX[idx - 1u]);}let seriesCount = max(1u,u.seriesCount);return(spacing * 0.4)/ f32(seriesCount);}@compute @workgroup_size(${COMPUTE_WG})fn main(@builtin(global_invocation_id)id: vec3u){let outputIdx = id.x;let maxCols = u32(u.width);let count = u.pointCount;if(outputIdx >= maxCols || count == 0u){if(outputIdx < maxCols){barData[outputIdx] = BarData(0.0,0.0,0.0,0.0);}return;}let viewRangeX = u.viewMaxX - u.viewMinX;let viewRangeY = u.viewMaxY - u.viewMinY;if(viewRangeX < 0.0001 || viewRangeY < 0.0001){barData[outputIdx] = BarData(0.0,0.0,0.0,0.0);return;}let relPx = f32(outputIdx);let pixelMinX = u.viewMinX +(relPx / u.width)* viewRangeX;let pixelMaxX = u.viewMinX +((relPx + 1.0)/ u.width)* viewRangeX;let startIdx = lowerBound(pixelMinX,count);var endIdx = lowerBound(pixelMaxX,count);endIdx = min(endIdx,count);let centerX =(pixelMinX + pixelMaxX)* 0.5;let onePixel = 1.0 / u.width;if(startIdx >= endIdx){var hit = false;var bestX: f32 = 0.0;var bestY: f32 = 0.0;var bestHW: f32 = 0.0;var bestDist: f32 = 1e10;if(startIdx < count){let bx = dataX[startIdx];let hw = barHalfWidth(startIdx,count);if(pixelMinX < bx + hw && pixelMaxX > bx - hw){let d = abs(bx - centerX);bestX = bx;bestY = dataY[startIdx];bestHW = hw;bestDist = d;hit = true;}}if(startIdx > 0u){let prev = startIdx - 1u;let bx = dataX[prev];let hw = barHalfWidth(prev,count);if(pixelMinX < bx + hw && pixelMaxX > bx - hw){let d = abs(bx - centerX);if(d < bestDist){bestX = bx;bestY = dataY[prev];bestHW = hw;bestDist = d;}hit = true;}}if(!hit){barData[outputIdx] = BarData(0.0,0.0,0.0,0.0);return;}let seriesCount = max(1u,u.seriesCount);let barOffset =(f32(seriesIdx.index)- f32(seriesCount - 1u)* 0.5)*(bestHW * 2.0);let offsetX = bestX + barOffset;let normX =(offsetX - u.viewMinX)/ viewRangeX;let fullWidth = bestHW * 2.0 / viewRangeX;let gapSize = max(onePixel,fullWidth * 0.05);let bw = max(fullWidth - gapSize,onePixel);barData[outputIdx] = BarData(normX,bestY,bestY,bw);return;}var dataMinY = dataY[startIdx];var dataMaxY = dataY[startIdx];let rangeCount = endIdx - startIdx;let maxSamples = u.maxSamplesPerPixel;if(maxSamples > 0u && rangeCount > maxSamples){let stride = f32(rangeCount - 1u)/ f32(maxSamples - 1u);for(var s = 0u;s < maxSamples;s++){let idx = startIdx + u32(f32(s)* stride);if(idx < endIdx){let y = dataY[idx];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let lastY = dataY[endIdx - 1u];dataMinY = min(dataMinY,lastY);dataMaxY = max(dataMaxY,lastY);}else{for(var i = startIdx + 1u;i < endIdx;i++){let y = dataY[i];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let hw = barHalfWidth(startIdx,count);let fullWidth = hw * 2.0 / viewRangeX;let gapSize = max(onePixel,fullWidth * 0.05);let bw = max(fullWidth - gapSize,onePixel);let seriesCount = max(1u,u.seriesCount);let barOffset =(f32(seriesIdx.index)- f32(seriesCount - 1u)* 0.5)*(hw * 2.0);let dataX_centered = dataX[startIdx] + barOffset;let normX =(dataX_centered - u.viewMinX)/ viewRangeX;barData[outputIdx] = BarData(normX,dataMinY,dataMaxY,bw);}`;
+var BOX_RENDER_SHADER = `${UNIFORM_STRUCT}struct BarData{screenX: f32,minY: f32,maxY: f32,barWidth: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> barData: array<BarData>;@group(0)@binding(2)var<storage,read> allSeries: array<SeriesInfo>;struct VertexOutput{@builtin(position)pos: vec4f,@location(0)normY: f32,@location(1)@interpolate(flat)seriesIdx: u32,};@vertex fn vs(@builtin(vertex_index)vi: u32,@builtin(instance_index)series_idx: u32)-> VertexOutput{var out: VertexOutput;out.seriesIdx = series_idx;let maxCols = u32(u.width);let colIdx = vi / 6u;let vertexType = vi % 6u;if(colIdx >= maxCols){out.pos = vec4f(0.0,0.0,0.0,0.0);out.normY = 0.0;return out;}let bd = barData[colIdx];if(bd.barWidth <= 0.0){out.pos = vec4f(0.0,0.0,0.0,0.0);out.normY = 0.0;return out;}let viewRangeY = u.viewMaxY - u.viewMinY;let safeRangeY = select(viewRangeY,1.0,viewRangeY < 0.0001);let normMinY =(min(bd.minY,0.0)- u.viewMinY)/ safeRangeY;let normMaxY =(max(bd.maxY,0.0)- u.viewMinY)/ safeRangeY;let top = 1.0 - normMaxY;let bottom = 1.0 - normMinY;let halfW = bd.barWidth * 0.5;let left = bd.screenX - halfW;let right = bd.screenX + halfW;var positions = array<vec2f,6>(vec2f(left,bottom),vec2f(right,bottom),vec2f(left,top),vec2f(left,top),vec2f(right,bottom),vec2f(right,top));let screenPos = positions[vertexType];let clipX = screenPos.x * 2.0 - 1.0;let clipY = 1.0 - screenPos.y * 2.0;out.pos = vec4f(clipX,clipY,0.0,1.0);out.normY = normMaxY;return out;}@fragment fn fs(in: VertexOutput)-> @location(0)vec4f{let series = allSeries[in.seriesIdx];return vec4f(series.color.rgb,0.85);}`;
+
+// src/gpu-worker.ts
+var device;
+var canvasFormat;
+var charts = new Map;
+var isDark = false;
+var layouts = {};
+var pipelines = {};
+var frameCount = 0;
+var lastRenderMs = 0;
+var renderScheduled = false;
+var statsInterval = null;
+var uniformStagingBuffer = new ArrayBuffer(112);
+var uniformStagingF32 = new Float32Array(uniformStagingBuffer);
+var uniformStagingU32 = new Uint32Array(uniformStagingBuffer);
+var fxaaSampler;
+var writeAllSeriesData = (chart, perSeriesPointSize) => {
+  if (!chart.seriesStorageBuffer || chart.series.length === 0)
+    return;
+  const data = new Float32Array(chart.series.length * 8);
+  const dataU32 = new Uint32Array(data.buffer);
+  for (let i = 0;i < chart.series.length; i++) {
+    const s = chart.series[i];
+    const offset = i * 8;
+    data[offset + 0] = s.colorR;
+    data[offset + 1] = s.colorG;
+    data[offset + 2] = s.colorB;
+    data[offset + 3] = 1;
+    dataU32[offset + 4] = s.visibleStart;
+    dataU32[offset + 5] = s.visibleCount;
+    data[offset + 6] = perSeriesPointSize?.[i] ?? chart.pointSize;
+    data[offset + 7] = 0;
+  }
+  device.queue.writeBuffer(chart.seriesStorageBuffer, 0, data);
+};
+var writeUniforms = (chart, series, seriesIndex, pointSize) => {
+  const f32 = uniformStagingF32;
+  const u32 = uniformStagingU32;
+  const rx = chart.maxX - chart.minX, ry = chart.maxY - chart.minY;
+  const bg = chart.bgColor ?? (isDark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
+  f32.set([
+    chart.width,
+    chart.height,
+    chart.minX + chart.panX * rx,
+    chart.minX + chart.panX * rx + rx / chart.zoomX,
+    chart.minY + chart.panY * ry,
+    chart.minY + chart.panY * ry + ry / chart.zoomY
+  ], 0);
+  u32[6] = series.pointCount;
+  f32.set([
+    isDark ? 1 : 0,
+    ...bg,
+    pointSize ?? chart.pointSize,
+    chart.minY,
+    chart.maxY,
+    chart.minX,
+    chart.maxX
+  ], 7);
+  u32[16] = series.visibleStart;
+  u32[17] = series.visibleCount;
+  u32[18] = 0;
+  u32[19] = chart.maxSamplesPerPixel;
+  u32[20] = chart.series.length;
+  device.queue.writeBuffer(chart.uniformBuffer, 0, uniformStagingBuffer);
+};
+var createChartPipeline = (name, cShader, rShader, topology, blend) => {
+  const cMod = device.createShaderModule({ code: cShader }), rMod = device.createShaderModule({ code: rShader });
+  pipelines[`${name}Compute`] = device.createComputePipeline({
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [layouts[`${name}Compute`]]
+    }),
+    compute: { module: cMod, entryPoint: "main" }
+  });
+  pipelines[`${name}Render`] = device.createRenderPipeline({
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [layouts[`${name}Render`]]
+    }),
+    vertex: { module: rMod, entryPoint: "vs" },
+    fragment: {
+      module: rMod,
+      entryPoint: "fs",
+      targets: [{ format: "rgba8unorm", blend }]
+    },
+    primitive: { topology }
+  });
+};
+async function init() {
+  if (device)
+    return true;
+  if (!navigator.gpu) {
+    postMessage({ type: "error", message: "WebGPU not supported" });
+    return false;
+  }
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    postMessage({ type: "error", message: "No GPU adapter found" });
+    return false;
+  }
+  device = await adapter.requestDevice({
+    requiredLimits: {
+      maxBufferSize: adapter.limits.maxBufferSize,
+      maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize
+    }
+  });
+  canvasFormat = navigator.gpu.getPreferredCanvasFormat();
+  device.lost.then((info) => {
+    postMessage({
+      type: "error",
+      message: `GPU device lost: ${info.reason} - ${info.message}`
+    });
+  });
+  createPipelines();
+  postMessage({ type: "gpu-ready" });
+  return true;
+}
+function createPipelines() {
+  layouts.lineCompute = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "storage" }
+      },
+      {
+        binding: 4,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      }
+    ]
+  });
+  layouts.lineRender = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.VERTEX,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.FRAGMENT,
+        buffer: { type: "read-only-storage" }
+      }
+    ]
+  });
+  layouts.scatterCompute = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.COMPUTE,
+        storageTexture: { access: "write-only", format: "rgba8unorm" }
+      },
+      {
+        binding: 4,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 5,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" }
+      }
+    ]
+  });
+  layouts.fxaaRender = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.FRAGMENT,
+        texture: { sampleType: "float" }
+      },
+      { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+    ]
+  });
+  layouts.boxCompute = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "storage" }
+      },
+      {
+        binding: 4,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 5,
+        visibility: GPUShaderStage.COMPUTE,
+        buffer: { type: "uniform" }
+      }
+    ]
+  });
+  layouts.boxRender = layouts.lineRender;
+  createChartPipeline("line", LINE_COMPUTE_SHADER, LINE_RENDER_SHADER, "line-list", {
+    color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
+  });
+  createChartPipeline("box", BOX_COMPUTE_SHADER, BOX_RENDER_SHADER, "triangle-list", {
+    color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
+  });
+  const scatterComputeModule = device.createShaderModule({
+    code: SCATTER_COMPUTE_SHADER
+  });
+  pipelines.scatterCompute = device.createComputePipeline({
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [layouts.scatterCompute]
+    }),
+    compute: { module: scatterComputeModule, entryPoint: "main" }
+  });
+  const fxaaRenderModule = device.createShaderModule({
+    code: FXAA_RENDER_SHADER
+  });
+  pipelines.fxaaRender = device.createRenderPipeline({
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [layouts.fxaaRender]
+    }),
+    vertex: { module: fxaaRenderModule, entryPoint: "vs" },
+    fragment: {
+      module: fxaaRenderModule,
+      entryPoint: "fs",
+      targets: [{ format: canvasFormat }]
+    },
+    primitive: { topology: "triangle-strip" }
+  });
+  fxaaSampler = device.createSampler({
+    magFilter: "linear",
+    minFilter: "linear"
+  });
+}
+function createChart(id, canvas, type, pointSize = 3, maxSamplesPerPixel = 0, bgColor = null) {
+  if (!device) {
+    postMessage({
+      type: "error",
+      message: `Cannot create chart ${id}: GPU device not available`
+    });
+    return;
+  }
+  const ctx = canvas.getContext("webgpu");
+  if (!ctx) {
+    postMessage({
+      type: "error",
+      message: `Cannot create chart ${id}: Failed to get WebGPU context`
+    });
+    return;
+  }
+  try {
+    ctx.configure({ device, format: canvasFormat, alphaMode: "premultiplied" });
+  } catch (e) {
+    postMessage({
+      type: "error",
+      message: `Cannot create chart ${id}: configure failed - ${e}`
+    });
+    return;
+  }
+  const width = canvas.width || 800;
+  const height = canvas.height || 400;
+  const uniformBuffer = device.createBuffer({
+    size: 112,
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+  });
+  const chart = {
+    id,
+    canvas,
+    ctx,
+    type,
+    visible: true,
+    pointSize,
+    maxSamplesPerPixel,
+    series: [],
+    uniformBuffer,
+    seriesStorageBuffer: null,
+    outputTexture: null,
+    outputTextureView: null,
+    fxaaBindGroup: null,
+    width,
+    height,
+    panX: 0,
+    panY: 0,
+    zoomX: 1,
+    zoomY: 1,
+    minX: 0,
+    maxX: 1,
+    minY: 0,
+    maxY: 1,
+    bgColor,
+    dirty: true
+  };
+  try {
+    createChartResources(chart);
+  } catch (e) {
+    postMessage({
+      type: "error",
+      message: `Cannot create chart ${id}: resource creation failed - ${e}`
+    });
+    return;
+  }
+  charts.set(id, chart);
+  postMessage({ type: "chart-registered", id });
+}
+function createChartResources(chart) {
+  if (chart.outputTexture)
+    chart.outputTexture.destroy();
+  const w = Math.max(1, chart.width);
+  const h = Math.max(1, chart.height);
+  const usage = chart.type === "scatter" ? GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT : GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT;
+  chart.outputTexture = device.createTexture({
+    size: [w, h],
+    format: "rgba8unorm",
+    usage
+  });
+  chart.outputTextureView = chart.outputTexture.createView();
+  chart.fxaaBindGroup = device.createBindGroup({
+    layout: layouts.fxaaRender,
+    entries: [
+      { binding: 0, resource: { buffer: chart.uniformBuffer } },
+      { binding: 1, resource: chart.outputTextureView },
+      { binding: 2, resource: fxaaSampler }
+    ]
+  });
+}
+function buildSeriesBindGroups(chart, series, seriesIndex) {
+  if (!chart.seriesStorageBuffer)
+    return;
+  if (chart.type === "scatter") {
+    if (series.seriesIndexBuffer)
+      series.seriesIndexBuffer.destroy();
+    series.seriesIndexBuffer = device.createBuffer({
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    const indexData = new Uint32Array([seriesIndex, 0, 0, 0]);
+    device.queue.writeBuffer(series.seriesIndexBuffer, 0, indexData);
+    series.computeBindGroup = device.createBindGroup({
+      layout: layouts.scatterCompute,
+      entries: [
+        { binding: 0, resource: { buffer: chart.uniformBuffer } },
+        { binding: 1, resource: { buffer: series.dataX } },
+        { binding: 2, resource: { buffer: series.dataY } },
+        { binding: 3, resource: chart.outputTextureView },
+        { binding: 4, resource: { buffer: chart.seriesStorageBuffer } },
+        { binding: 5, resource: { buffer: series.seriesIndexBuffer } }
+      ]
+    });
+  } else {
+    const computeLayout = chart.type === "line" ? layouts.lineCompute : layouts.boxCompute;
+    const renderLayout = chart.type === "line" ? layouts.lineRender : layouts.boxRender;
+    if (series.lineBuffer)
+      series.lineBuffer.destroy();
+    series.lineBuffer = device.createBuffer({
+      size: chart.width * 16,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX
+    });
+    if (chart.type === "box") {
+      if (series.seriesIndexBuffer)
+        series.seriesIndexBuffer.destroy();
+      series.seriesIndexBuffer = device.createBuffer({
+        size: 16,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      const indexData = new Uint32Array([seriesIndex, 0, 0, 0]);
+      device.queue.writeBuffer(series.seriesIndexBuffer, 0, indexData);
+    }
+    const computeEntries = [
+      { binding: 0, resource: { buffer: chart.uniformBuffer } },
+      { binding: 1, resource: { buffer: series.dataX } },
+      { binding: 2, resource: { buffer: series.dataY } },
+      { binding: 3, resource: { buffer: series.lineBuffer } },
+      { binding: 4, resource: { buffer: chart.seriesStorageBuffer } }
+    ];
+    if (chart.type === "box" && series.seriesIndexBuffer) {
+      computeEntries.push({
+        binding: 5,
+        resource: { buffer: series.seriesIndexBuffer }
+      });
+    }
+    series.computeBindGroup = device.createBindGroup({
+      layout: computeLayout,
+      entries: computeEntries
+    });
+    series.renderBindGroup = device.createBindGroup({
+      layout: renderLayout,
+      entries: [
+        { binding: 0, resource: { buffer: chart.uniformBuffer } },
+        { binding: 1, resource: { buffer: series.lineBuffer } },
+        { binding: 2, resource: { buffer: chart.seriesStorageBuffer } }
+      ]
+    });
+  }
+}
+function resizeChart(chart, width, height) {
+  if (width === chart.width && height === chart.height)
+    return;
+  if (width <= 0 || height <= 0)
+    return;
+  chart.width = width;
+  chart.height = height;
+  chart.canvas.width = width;
+  chart.canvas.height = height;
+  try {
+    createChartResources(chart);
+    for (let i = 0;i < chart.series.length; i++) {
+      buildSeriesBindGroups(chart, chart.series[i], i);
+    }
+  } catch (e) {
+    postMessage({
+      type: "error",
+      message: `resize failed for chart ${chart.id}: ${e}`
+    });
+  }
+}
+function updateSeries(id, seriesData, bounds) {
+  const chart = charts.get(id);
+  if (!chart || !device) {
+    if (!chart)
+      postMessage({
+        type: "error",
+        message: `update-series failed: chart ${id} not found`
+      });
+    return;
+  }
+  try {
+    chart.minX = bounds.minX;
+    chart.maxX = bounds.maxX;
+    chart.minY = bounds.minY;
+    chart.maxY = bounds.maxY;
+    for (const s of chart.series) {
+      s.dataX.destroy();
+      s.dataY.destroy();
+      if (s.lineBuffer)
+        s.lineBuffer.destroy();
+      if (s.seriesIndexBuffer)
+        s.seriesIndexBuffer.destroy();
+    }
+    chart.series = [];
+    if (chart.seriesStorageBuffer)
+      chart.seriesStorageBuffer.destroy();
+    if (seriesData.length > 0) {
+      chart.seriesStorageBuffer = device.createBuffer({
+        size: Math.max(32, seriesData.length * 32),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
+    }
+    for (const sd of seriesData) {
+      const dataX = device.createBuffer({
+        size: Math.max(16, sd.dataX.byteLength),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
+      const dataY = device.createBuffer({
+        size: Math.max(16, sd.dataY.byteLength),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
+      device.queue.writeBuffer(dataX, 0, sd.dataX);
+      device.queue.writeBuffer(dataY, 0, sd.dataY);
+      const series = {
+        label: sd.label,
+        colorR: sd.colorR,
+        colorG: sd.colorG,
+        colorB: sd.colorB,
+        dataX,
+        dataY,
+        lineBuffer: null,
+        seriesIndexBuffer: null,
+        pointCount: sd.dataX.length,
+        visibleStart: 0,
+        visibleCount: sd.dataX.length,
+        computeBindGroup: null,
+        renderBindGroup: null
+      };
+      chart.series.push(series);
+    }
+    for (let i = 0;i < chart.series.length; i++) {
+      buildSeriesBindGroups(chart, chart.series[i], i);
+    }
+    postMessage({ type: "bounds-update", id, ...bounds });
+  } catch (e) {
+    postMessage({
+      type: "error",
+      message: `update-series failed for chart ${id}: ${e}`
+    });
+  }
+}
+function render(chart) {
+  if (!chart.ctx)
+    return;
+  if (chart.width === 0 || chart.height === 0)
+    return;
+  if (chart.series.length === 0)
+    return;
+  let textureView;
+  try {
+    textureView = chart.ctx.getCurrentTexture().createView();
+  } catch {
+    return;
+  }
+  renderChartWithFXAA(chart, textureView);
+}
+function renderChartWithFXAA(chart, textureView) {
+  const encoder = device.createCommandEncoder();
+  let perSeriesPointSizes;
+  if (chart.type === "scatter") {
+    const canvasArea = chart.width * chart.height;
+    const budget = canvasArea * 4;
+    perSeriesPointSizes = chart.series.map((s) => {
+      const visCount = Math.max(1, s.visibleCount);
+      const pixelsPerPoint = Math.PI * chart.pointSize * chart.pointSize;
+      if (visCount * pixelsPerPoint > budget) {
+        return Math.max(1, Math.sqrt(budget / (visCount * Math.PI)));
+      }
+      return chart.pointSize;
+    });
+  }
+  writeAllSeriesData(chart, perSeriesPointSizes);
+  if (chart.series.length > 0) {
+    writeUniforms(chart, chart.series[0], 0);
+  }
+  const clearPass = encoder.beginRenderPass({
+    colorAttachments: [
+      {
+        view: chart.outputTextureView,
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: { r: 0, g: 0, b: 0, a: 0 }
+      }
+    ]
+  });
+  clearPass.end();
+  for (let seriesIndex = 0;seriesIndex < chart.series.length; seriesIndex++) {
+    const series = chart.series[seriesIndex];
+    if (series.pointCount === 0)
+      continue;
+    if (chart.type === "scatter") {
+      const MAX_WG_DIM = 65535;
+      const totalWG = Math.ceil(series.visibleCount / COMPUTE_WG);
+      const wgX = Math.min(totalWG, MAX_WG_DIM);
+      const wgY = Math.ceil(totalWG / MAX_WG_DIM);
+      const dispatchBuf = new Uint32Array([wgX * COMPUTE_WG]);
+      device.queue.writeBuffer(chart.uniformBuffer, 72, dispatchBuf);
+      const computePass = encoder.beginComputePass();
+      computePass.setPipeline(pipelines.scatterCompute);
+      computePass.setBindGroup(0, series.computeBindGroup);
+      computePass.dispatchWorkgroups(wgX, wgY);
+      computePass.end();
+    } else {
+      writeUniforms(chart, series, seriesIndex);
+      const computePipeline = chart.type === "line" ? pipelines.lineCompute : pipelines.boxCompute;
+      const computePass = encoder.beginComputePass();
+      computePass.setPipeline(computePipeline);
+      computePass.setBindGroup(0, series.computeBindGroup);
+      computePass.dispatchWorkgroups(Math.ceil(chart.width / COMPUTE_WG));
+      computePass.end();
+    }
+  }
+  if (chart.type !== "scatter") {
+    const renderPipeline = chart.type === "line" ? pipelines.lineRender : pipelines.boxRender;
+    const drawCount = chart.type === "line" ? Math.max(0, chart.width * 4 - 2) : chart.width * 6;
+    const renderPass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: chart.outputTextureView,
+          loadOp: "load",
+          storeOp: "store"
+        }
+      ]
+    });
+    renderPass.setPipeline(renderPipeline);
+    for (let seriesIndex = 0;seriesIndex < chart.series.length; seriesIndex++) {
+      const series = chart.series[seriesIndex];
+      if (series.pointCount === 0)
+        continue;
+      renderPass.setBindGroup(0, series.renderBindGroup);
+      renderPass.draw(drawCount, 1, 0, seriesIndex);
+    }
+    renderPass.end();
+  }
+  const fxaaPass = encoder.beginRenderPass({
+    colorAttachments: [
+      {
+        view: textureView,
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: { r: 0, g: 0, b: 0, a: 0 }
+      }
+    ]
+  });
+  fxaaPass.setPipeline(pipelines.fxaaRender);
+  if (chart.fxaaBindGroup) {
+    fxaaPass.setBindGroup(0, chart.fxaaBindGroup);
+  }
+  fxaaPass.draw(4);
+  fxaaPass.end();
+  device.queue.submit([encoder.finish()]);
+}
+function scheduleRender() {
+  if (!renderScheduled) {
+    renderScheduled = true;
+    requestAnimationFrame(renderFrame);
+  }
+}
+function markDirty(chart) {
+  chart.dirty = true;
+  if (chart.visible)
+    scheduleRender();
+}
+function markAllDirty() {
+  let anyVisible = false;
+  for (const chart of charts.values()) {
+    chart.dirty = true;
+    if (chart.visible)
+      anyVisible = true;
+  }
+  if (anyVisible)
+    scheduleRender();
+}
+function countActiveCharts() {
+  let n = 0;
+  for (const chart of charts.values()) {
+    if (chart.visible && chart.width > 0)
+      n++;
+  }
+  return n;
+}
+function startStats() {
+  if (statsInterval !== null)
+    return;
+  statsInterval = setInterval(() => {
+    postMessage({
+      type: "stats",
+      fps: frameCount,
+      renderMs: lastRenderMs,
+      totalCharts: charts.size,
+      activeCharts: countActiveCharts()
+    });
+    frameCount = 0;
+  }, 1000);
+}
+function renderFrame() {
+  renderScheduled = false;
+  const t0 = performance.now();
+  for (const chart of charts.values()) {
+    if (chart.visible && chart.dirty && chart.width > 0) {
+      render(chart);
+      chart.dirty = false;
+    }
+  }
+  lastRenderMs = performance.now() - t0;
+  frameCount++;
+}
+self.onmessage = async (e) => {
+  const { type, ...data } = e.data;
+  switch (type) {
+    case "init":
+      isDark = data.isDark || false;
+      if (await init()) {
+        startStats();
+      }
+      break;
+    case "theme":
+      isDark = data.isDark;
+      markAllDirty();
+      break;
+    case "register-chart":
+      createChart(data.id, data.canvas, data.chartType || "scatter", data.pointSize ?? 3, data.maxSamplesPerPixel ?? 100, data.bgColor ?? null);
+      {
+        const chart = charts.get(data.id);
+        if (chart)
+          markDirty(chart);
+      }
+      break;
+    case "unregister-chart": {
+      const chart = charts.get(data.id);
+      if (chart) {
+        try {
+          chart.ctx.unconfigure();
+        } catch {
+        }
+        chart.uniformBuffer.destroy();
+        if (chart.seriesStorageBuffer)
+          chart.seriesStorageBuffer.destroy();
+        if (chart.outputTexture)
+          chart.outputTexture.destroy();
+        for (const s of chart.series) {
+          s.dataX.destroy();
+          s.dataY.destroy();
+          if (s.lineBuffer)
+            s.lineBuffer.destroy();
+          if (s.seriesIndexBuffer)
+            s.seriesIndexBuffer.destroy();
+        }
+        charts.delete(data.id);
+      }
+      postMessage({ type: "chart-unregistered", id: data.id });
+      break;
+    }
+    case "set-point-size": {
+      const chart = charts.get(data.id);
+      if (chart) {
+        chart.pointSize = Math.max(1, Math.min(8, data.pointSize));
+        markDirty(chart);
+      }
+      break;
+    }
+    case "set-max-samples": {
+      const chart = charts.get(data.id);
+      if (chart) {
+        chart.maxSamplesPerPixel = Math.max(0, data.maxSamplesPerPixel | 0);
+        markDirty(chart);
+      }
+      break;
+    }
+    case "set-style": {
+      const chart = charts.get(data.id);
+      if (chart) {
+        if (data.bgColor !== undefined)
+          chart.bgColor = data.bgColor;
+        markDirty(chart);
+      }
+      break;
+    }
+    case "update-series": {
+      updateSeries(data.id, data.series, data.bounds);
+      const chart = charts.get(data.id);
+      if (chart)
+        markDirty(chart);
+      break;
+    }
+    case "set-visibility": {
+      const chart = charts.get(data.id);
+      if (chart) {
+        chart.visible = data.visible;
+        if (data.visible && chart.dirty)
+          scheduleRender();
+      }
+      break;
+    }
+    case "view-transform": {
+      const chart = charts.get(data.id);
+      if (chart) {
+        chart.panX = data.panX;
+        chart.panY = data.panY;
+        chart.zoomX = Math.max(0.1, Math.min(1e6, data.zoomX));
+        chart.zoomY = Math.max(0.1, Math.min(1e6, data.zoomY));
+        markDirty(chart);
+      }
+      break;
+    }
+    case "resize": {
+      const chart = charts.get(data.id);
+      if (chart && data.width > 0 && data.height > 0) {
+        resizeChart(chart, data.width, data.height);
+        markDirty(chart);
+      }
+      break;
+    }
+    case "batch-view-transform": {
+      const zX = Math.max(0.1, Math.min(1e6, data.zoomX));
+      const zY = Math.max(0.1, Math.min(1e6, data.zoomY));
+      for (const t of data.transforms) {
+        const chart = charts.get(t.id);
+        if (chart) {
+          chart.panX = data.panX;
+          chart.panY = data.panY;
+          chart.zoomX = zX;
+          chart.zoomY = zY;
+          chart.dirty = true;
+        }
+      }
+      scheduleRender();
+      break;
+    }
+    case "sync-view":
+      for (const chart of charts.values()) {
+        chart.panX = data.panX;
+        chart.panY = data.panY;
+        chart.zoomX = data.zoomX;
+        chart.zoomY = data.zoomY;
+      }
+      markAllDirty();
+      break;
+  }
+};