chartai 0.1.0 → 1.0.0

package/dist/chart-library.js

@@ -14,46 +14,139 @@ var exports_worker_inline = {};
 __export(exports_worker_inline, {
   WORKER_CODE: () => WORKER_CODE
 });
-var WORKER_CODE = 'var m=256,X="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,};",w="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 C="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,};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.);}@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);}";var y=`${X}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>;${w}@compute @workgroup_size(${m})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);}`,L=`${X}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);}`;var D=`${X}@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(${m})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);}}}}`;var H=`${X}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;${w}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(${m})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);}`,U=`${X}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);}`;var t,R,v=new Map,S=!1,p={},a={},N=0,P=0,_=!1,O=null,W=new ArrayBuffer(112),j=new Float32Array(W),F=new Uint32Array(W),A,q=(e,i)=>{if(!e.seriesStorageBuffer||e.series.length===0)return;let n=new Float32Array(e.series.length*8),l=new Uint32Array(n.buffer);for(let u=0;u<e.series.length;u++){let o=e.series[u],x=u*8;n[x+0]=o.colorR,n[x+1]=o.colorG,n[x+2]=o.colorB,n[x+3]=1,l[x+4]=o.visibleStart,l[x+5]=o.visibleCount,n[x+6]=i?.[u]??e.pointSize,n[x+7]=0}t.queue.writeBuffer(e.seriesStorageBuffer,0,n)},E=(e,i,n,l)=>{let u=j,o=F,x=e.maxX-e.minX,f=e.maxY-e.minY,Y=e.bgColor??(S?[0.11,0.11,0.12]:[0.98,0.98,0.98]);u.set([e.width,e.height,e.minX+e.panX*x,e.minX+e.panX*x+x/e.zoomX,e.minY+e.panY*f,e.minY+e.panY*f+f/e.zoomY],0),o[6]=i.pointCount,u.set([S?1:0,...Y,l??e.pointSize,e.minY,e.maxY,e.minX,e.maxX],7),o[16]=i.visibleStart,o[17]=i.visibleCount,o[18]=0,o[19]=e.maxSamplesPerPixel,o[20]=e.series.length,t.queue.writeBuffer(e.uniformBuffer,0,W)},T=(e,i,n,l,u)=>{let o=t.createShaderModule({code:i}),x=t.createShaderModule({code:n});a[`${e}Compute`]=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[p[`${e}Compute`]]}),compute:{module:o,entryPoint:"main"}}),a[`${e}Render`]=t.createRenderPipeline({layout:t.createPipelineLayout({bindGroupLayouts:[p[`${e}Render`]]}),vertex:{module:x,entryPoint:"vs"},fragment:{module:x,entryPoint:"fs",targets:[{format:"rgba8unorm",blend:u}]},primitive:{topology:l}})};async function J(){if(t)return!0;if(!navigator.gpu)return postMessage({type:"error",message:"WebGPU not supported"}),!1;let e=await navigator.gpu.requestAdapter();if(!e)return postMessage({type:"error",message:"No GPU adapter found"}),!1;return t=await e.requestDevice({requiredLimits:{maxBufferSize:e.limits.maxBufferSize,maxStorageBufferBindingSize:e.limits.maxStorageBufferBindingSize}}),R=navigator.gpu.getPreferredCanvasFormat(),t.lost.then((i)=>{postMessage({type:"error",message:`GPU device lost: ${i.reason} - ${i.message}`})}),K(),postMessage({type:"gpu-ready"}),!0}function K(){p.lineCompute=t.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"}}]}),p.lineRender=t.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"}}]}),p.scatterCompute=t.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"}}]}),p.fxaaRender=t.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:{}}]}),p.boxCompute=t.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"}}]}),p.boxRender=p.lineRender,T("line",y,L,"line-list",{color:{srcFactor:"src-alpha",dstFactor:"one-minus-src-alpha"},alpha:{srcFactor:"one",dstFactor:"one-minus-src-alpha"}}),T("box",H,U,"triangle-list",{color:{srcFactor:"src-alpha",dstFactor:"one-minus-src-alpha"},alpha:{srcFactor:"one",dstFactor:"one-minus-src-alpha"}});let e=t.createShaderModule({code:D});a.scatterCompute=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[p.scatterCompute]}),compute:{module:e,entryPoint:"main"}});let i=t.createShaderModule({code:C});a.fxaaRender=t.createRenderPipeline({layout:t.createPipelineLayout({bindGroupLayouts:[p.fxaaRender]}),vertex:{module:i,entryPoint:"vs"},fragment:{module:i,entryPoint:"fs",targets:[{format:R}]},primitive:{topology:"triangle-strip"}}),A=t.createSampler({magFilter:"linear",minFilter:"linear"})}function Q(e,i,n,l=3,u=0,o=null){let x=t?i.getContext("webgpu"):null;if(!x){postMessage({type:"error",message:`Failed to initialize WebGPU context: ${e}`});return}try{x.configure({device:t,format:R,alphaMode:"premultiplied"})}catch(M){postMessage({type:"error",message:`Failed to configure WebGPU context: ${e}`,err:M.toString()});return}let f=t.limits.maxTextureDimension2D,Y=Math.min(Math.floor(Number(i.width)||800),f),d=Math.min(Math.floor(Number(i.height)||400),f),g=t.createBuffer({size:112,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),I={id:e,canvas:i,ctx:x,type:n,visible:!0,pointSize:l,maxSamplesPerPixel:u,series:[],uniformBuffer:g,seriesStorageBuffer:null,outputTexture:null,outputTextureView:null,fxaaBindGroup:null,width:Y,height:d,panX:0,panY:0,zoomX:1,zoomY:1,minX:0,maxX:1,minY:0,maxY:1,bgColor:o,dirty:!0};try{$(I)}catch(M){postMessage({type:"error",message:`Cannot create chart ${e}: resource creation failed - ${M}`});return}v.set(e,I),postMessage({type:"chart-registered",id:e})}function $(e){if(e.outputTexture)e.outputTexture.destroy();let i=Math.max(1,e.width),n=Math.max(1,e.height),l=e.type==="scatter"?GPUTextureUsage.STORAGE_BINDING|GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.RENDER_ATTACHMENT:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.RENDER_ATTACHMENT;e.outputTexture=t.createTexture({size:[i,n],format:"rgba8unorm",usage:l}),e.outputTextureView=e.outputTexture.createView(),e.fxaaBindGroup=t.createBindGroup({layout:p.fxaaRender,entries:[{binding:0,resource:{buffer:e.uniformBuffer}},{binding:1,resource:e.outputTextureView},{binding:2,resource:A}]})}function V(e,i,n){if(!e.seriesStorageBuffer)return;if(e.type==="scatter"){if(i.seriesIndexBuffer)i.seriesIndexBuffer.destroy();i.seriesIndexBuffer=t.createBuffer({size:16,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});let l=new Uint32Array([n,0,0,0]);t.queue.writeBuffer(i.seriesIndexBuffer,0,l),i.computeBindGroup=t.createBindGroup({layout:p.scatterCompute,entries:[{binding:0,resource:{buffer:e.uniformBuffer}},{binding:1,resource:{buffer:i.dataX}},{binding:2,resource:{buffer:i.dataY}},{binding:3,resource:e.outputTextureView},{binding:4,resource:{buffer:e.seriesStorageBuffer}},{binding:5,resource:{buffer:i.seriesIndexBuffer}}]})}else{let l=e.type==="line"?p.lineCompute:p.boxCompute,u=e.type==="line"?p.lineRender:p.boxRender;if(i.lineBuffer)i.lineBuffer.destroy();if(i.lineBuffer=t.createBuffer({size:e.width*16,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.VERTEX}),e.type==="box"){if(i.seriesIndexBuffer)i.seriesIndexBuffer.destroy();i.seriesIndexBuffer=t.createBuffer({size:16,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});let x=new Uint32Array([n,0,0,0]);t.queue.writeBuffer(i.seriesIndexBuffer,0,x)}let o=[{binding:0,resource:{buffer:e.uniformBuffer}},{binding:1,resource:{buffer:i.dataX}},{binding:2,resource:{buffer:i.dataY}},{binding:3,resource:{buffer:i.lineBuffer}},{binding:4,resource:{buffer:e.seriesStorageBuffer}}];if(e.type==="box"&&i.seriesIndexBuffer)o.push({binding:5,resource:{buffer:i.seriesIndexBuffer}});i.computeBindGroup=t.createBindGroup({layout:l,entries:o}),i.renderBindGroup=t.createBindGroup({layout:u,entries:[{binding:0,resource:{buffer:e.uniformBuffer}},{binding:1,resource:{buffer:i.lineBuffer}},{binding:2,resource:{buffer:e.seriesStorageBuffer}}]})}}function Z(e,i,n){if(i===e.width&&n===e.height)return;if(i<=0||n<=0)return;e.width=i,e.height=n,e.canvas.width=i,e.canvas.height=n;try{$(e);for(let l=0;l<e.series.length;l++)V(e,e.series[l],l)}catch(l){postMessage({type:"error",message:`resize failed for chart ${e.id}: ${l}`})}}function G(e,i,n){let l=v.get(e);if(!l||!t){if(!l)postMessage({type:"error",message:`update-series failed: chart ${e} not found`});return}try{l.minX=n.minX,l.maxX=n.maxX,l.minY=n.minY,l.maxY=n.maxY;for(let u of l.series){if(u.dataX.destroy(),u.dataY.destroy(),u.lineBuffer)u.lineBuffer.destroy();if(u.seriesIndexBuffer)u.seriesIndexBuffer.destroy()}if(l.series=[],l.seriesStorageBuffer)l.seriesStorageBuffer.destroy();if(i.length>0)l.seriesStorageBuffer=t.createBuffer({size:Math.max(32,i.length*32),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST});for(let u of i){let o=t.createBuffer({size:Math.max(16,u.dataX.byteLength),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),x=t.createBuffer({size:Math.max(16,u.dataY.byteLength),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST});t.queue.writeBuffer(o,0,u.dataX),t.queue.writeBuffer(x,0,u.dataY);let f={label:u.label,colorR:u.colorR,colorG:u.colorG,colorB:u.colorB,dataX:o,dataY:x,lineBuffer:null,seriesIndexBuffer:null,pointCount:u.dataX.length,visibleStart:0,visibleCount:u.dataX.length,computeBindGroup:null,renderBindGroup:null};l.series.push(f)}for(let u=0;u<l.series.length;u++)V(l,l.series[u],u);postMessage({type:"bounds-update",id:e,...n})}catch(u){postMessage({type:"error",message:`update-series failed for chart ${e}: ${u}`})}}function z(e){if(!e.ctx)return;if(e.width===0||e.height===0)return;if(e.series.length===0)return;let i;try{i=e.ctx.getCurrentTexture().createView()}catch{return}k(e,i)}function k(e,i){let n=t.createCommandEncoder(),l;if(e.type==="scatter"){let f=e.width*e.height*4;l=e.series.map((Y)=>{let d=Math.max(1,Y.visibleCount),g=Math.PI*e.pointSize*e.pointSize;if(d*g>f)return Math.max(1,Math.sqrt(f/(d*Math.PI)));return e.pointSize})}if(q(e,l),e.series.length>0)E(e,e.series[0],0);n.beginRenderPass({colorAttachments:[{view:e.outputTextureView,loadOp:"clear",storeOp:"store",clearValue:{r:0,g:0,b:0,a:0}}]}).end();for(let x=0;x<e.series.length;x++){let f=e.series[x];if(f.pointCount===0)continue;if(e.type==="scatter"){let d=Math.ceil(f.visibleCount/m),g=Math.min(d,65535),I=Math.ceil(d/65535),M=new Uint32Array([g*m]);t.queue.writeBuffer(e.uniformBuffer,72,M);let r=n.beginComputePass();r.setPipeline(a.scatterCompute),r.setBindGroup(0,f.computeBindGroup),r.dispatchWorkgroups(g,I),r.end()}else{E(e,f,x);let Y=e.type==="line"?a.lineCompute:a.boxCompute,d=n.beginComputePass();d.setPipeline(Y),d.setBindGroup(0,f.computeBindGroup),d.dispatchWorkgroups(Math.ceil(e.width/m)),d.end()}}if(e.type!=="scatter"){let x=e.type==="line"?a.lineRender:a.boxRender,f=e.type==="line"?Math.max(0,e.width*4-2):e.width*6,Y=n.beginRenderPass({colorAttachments:[{view:e.outputTextureView,loadOp:"load",storeOp:"store"}]});Y.setPipeline(x);for(let d=0;d<e.series.length;d++){let g=e.series[d];if(g.pointCount===0)continue;Y.setBindGroup(0,g.renderBindGroup),Y.draw(f,1,0,d)}Y.end()}let o=n.beginRenderPass({colorAttachments:[{view:i,loadOp:"clear",storeOp:"store",clearValue:{r:0,g:0,b:0,a:0}}]});if(o.setPipeline(a.fxaaRender),e.fxaaBindGroup)o.setBindGroup(0,e.fxaaBindGroup);o.draw(4),o.end(),t.queue.submit([n.finish()])}function s(){if(!_)_=!0,requestAnimationFrame(ee)}function b(e){if(e.dirty=!0,e.visible)s()}function B(){let e=!1;for(let i of v.values())if(i.dirty=!0,i.visible)e=!0;if(e)s()}function c(){let e=0;for(let i of v.values())if(i.visible&&i.width>0)e++;return e}function h(){if(O!==null)return;O=setInterval(()=>{postMessage({type:"stats",fps:N,renderMs:P,totalCharts:v.size,activeCharts:c()}),N=0},1000)}function ee(){_=!1;let e=performance.now();for(let i of v.values())if(i.visible&&i.dirty&&i.width>0)z(i),i.dirty=!1;P=performance.now()-e,N++}self.onmessage=async(e)=>{let{type:i,...n}=e.data;switch(i){case"init":if(S=n.isDark||!1,await J())h();break;case"theme":S=n.isDark,B();break;case"register-chart":Q(n.id,n.canvas,n.chartType||"scatter",n.pointSize??3,n.maxSamplesPerPixel??100,n.bgColor??null);{let l=v.get(n.id);if(l)b(l)}break;case"unregister-chart":{let l=v.get(n.id);if(l){try{l.ctx.unconfigure()}catch{}if(l.uniformBuffer.destroy(),l.seriesStorageBuffer)l.seriesStorageBuffer.destroy();if(l.outputTexture)l.outputTexture.destroy();for(let u of l.series){if(u.dataX.destroy(),u.dataY.destroy(),u.lineBuffer)u.lineBuffer.destroy();if(u.seriesIndexBuffer)u.seriesIndexBuffer.destroy()}v.delete(n.id)}postMessage({type:"chart-unregistered",id:n.id});break}case"set-point-size":{let l=v.get(n.id);if(l)l.pointSize=Math.max(1,Math.min(8,n.pointSize)),b(l);break}case"set-max-samples":{let l=v.get(n.id);if(l)l.maxSamplesPerPixel=Math.max(0,n.maxSamplesPerPixel|0),b(l);break}case"set-style":{let l=v.get(n.id);if(l){if(n.bgColor!==void 0)l.bgColor=n.bgColor;b(l)}break}case"update-series":{G(n.id,n.series,n.bounds);let l=v.get(n.id);if(l)b(l);break}case"set-visibility":{let l=v.get(n.id);if(l){if(l.visible=n.visible,n.visible&&l.dirty)s()}break}case"view-transform":{let l=v.get(n.id);if(l)l.panX=n.panX,l.panY=n.panY,l.zoomX=Math.max(0.1,Math.min(1e6,n.zoomX)),l.zoomY=Math.max(0.1,Math.min(1e6,n.zoomY)),b(l);break}case"resize":{let l=v.get(n.id);if(l&&n.width>0&&n.height>0)Z(l,n.width,n.height),b(l);break}case"batch-view-transform":{let l=Math.max(0.1,Math.min(1e6,n.zoomX)),u=Math.max(0.1,Math.min(1e6,n.zoomY));for(let o of n.transforms){let x=v.get(o.id);if(x)x.panX=n.panX,x.panY=n.panY,x.zoomX=l,x.zoomY=u,x.dirty=!0}s();break}case"sync-view":for(let l of v.values())l.panX=n.panX,l.panY=n.panY,l.zoomX=n.zoomX,l.zoomY=n.zoomY;B();break}};\n';
+var WORKER_CODE = 'var k="fn luma(c:vec4f)->f32{return dot(c.rgb,vec3f(.299,.587,.114));}fn laaa(uv:vec2f,t:texture_2d<f32>,s:sampler)->vec4f{let r=1./vec2f(textureDimensions(t));let m=textureSample(t,s,uv);let n=textureSample(t,s,uv+vec2f(0.,-r.y));let e=textureSample(t,s,uv+vec2f(r.x,0.));let w=textureSample(t,s,uv+vec2f(-r.x,0.));let sv=textureSample(t,s,uv+vec2f(0.,r.y));let lm=luma(m);let ln=luma(n);let le=luma(e);let lw=luma(w);let ls=luma(sv);let lo=min(lm,min(min(ln,ls),min(le,lw)));let hi=max(lm,max(max(ln,ls),max(le,lw)));let rng=hi-lo;if(rng<max(.0833,hi*.166)){return m;}return mix(m,(m+n+e+w+sv)*.2,min(rng*3.,1.));}struct BV{@builtin(position)p:vec4f,@location(0)uv:vec2f}@group(0)@binding(0)var inputTex:texture_2d<f32>;@group(0)@binding(1)var samp:sampler;@vertex fn vs(@builtin(vertex_index)i:u32)->BV{var p=array<vec2f,4>(vec2f(-1,-1),vec2f(1,-1),vec2f(-1,1),vec2f(1,1));var u=array<vec2f,4>(vec2f(0,1),vec2f(1,1),vec2f(0,0),vec2f(1,0));return BV(vec4f(p[i],0,1),u[i]);}@fragment fn fs(v:BV)->@location(0)vec4f{return laaa(v.uv,inputTex,samp);}";var T={INIT:0,THEME:1,REGISTER_RENDERER:2,REGISTER_CHART:3,UNREGISTER_CHART:4,UPDATE_SERIES:5,RESIZE:6,VIEW_TRANSFORM:7,BATCH_VIEW_TRANSFORM:8,SET_VISIBILITY:9,SET_STYLE:10,SET_UNIFORMS:11,GPU_READY:12,ERROR:13,STATS:14},Q={NO_GPU:"e1:no-gpu",NO_ADAPTER:"e2:no-adapter",DEVICE_LOST:"e3:device-lost",NOT_READY:"e4:not-ready",COMPILE:"e5:compile",CTX_GET:"e6:ctx-get",CTX_CFG:"e7:ctx-cfg",TEX:"e8:tex",BIND_S:"e9:bind-s",BIND_C:"e10:bind-c",UPDATE:"e11:update",NO_RENDERER:"e12:no-renderer",RESIZE:"e13:resize"};var j,U,J=new Map,R=new Map,w=!1,I,B,l,P=0,M=0,C=!1,p=null,L=new ArrayBuffer(64),b=new Float32Array(L),n=new Uint32Array(L);function D(_){let O=GPUBufferUsage.COPY_DST;for(let N of _)switch(N.toUpperCase()){case"STORAGE":O|=GPUBufferUsage.STORAGE;break;case"VERTEX":O|=GPUBufferUsage.VERTEX;break;case"UNIFORM":O|=GPUBufferUsage.UNIFORM;break;case"COPY_SRC":O|=GPUBufferUsage.COPY_SRC;break;case"COPY_DST":O|=GPUBufferUsage.COPY_DST;break;case"INDEX":O|=GPUBufferUsage.INDEX;break;case"INDIRECT":O|=GPUBufferUsage.INDIRECT;break}return O}function i(_,O,N){let m=N==="compute"?GPUShaderStage.COMPUTE:GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT;if(_==="uniforms"||_==="custom-uniforms"||_==="series-index")return{visibility:m,buffer:{type:"uniform"}};if(_==="render-target"){if(O)return{visibility:GPUShaderStage.COMPUTE,storageTexture:{access:"write-only",format:"rgba8unorm"}};return{visibility:m,texture:{sampleType:"float"}}}if(O)return{visibility:m,buffer:{type:"storage"}};return{visibility:m,buffer:{type:"read-only-storage"}}}function z(_,O,N,m,W){switch(_){case"uniforms":return{buffer:N.uniformBuffer};case"custom-uniforms":return{buffer:N.customUniformBuffer};case"series-info":return{buffer:N.seriesStorageBuffer};case"render-target":return N.outputTextureView;case"x-data":return{buffer:m.dataX};case"y-data":return{buffer:m.dataY};case"series-index":return{buffer:m.seriesIndexBuffer}}if(_.endsWith("-data")){let Y=_.slice(0,-5);return{buffer:m.extraBuffers.get(Y)}}if(W.config.bufferDefs.find((Y)=>Y.name===_)?.perSeries)return{buffer:m.seriesBuffers.get(_)};return{buffer:N.chartBuffers.get(_)}}function d(_){let O=new Map,N=new Map;for(let m=0;m<_.passes.length;m++){let W=_.passes[m],X=W.bindings.map((v)=>({binding:v.binding,...i(v.source,v.write,W.type)})),Y=j.createBindGroupLayout({entries:X});N.set(`pass-${m}`,Y);let H=j.createPipelineLayout({bindGroupLayouts:[Y]}),G=j.createShaderModule({code:_.shaders[W.shader]});if(W.type==="compute")O.set(`pass-${m}`,j.createComputePipeline({layout:H,compute:{module:G,entryPoint:"main"}}));else O.set(`pass-${m}`,j.createRenderPipeline({layout:H,vertex:{module:G,entryPoint:"vs"},fragment:{module:G,entryPoint:"fs",targets:[{format:"rgba8unorm",blend:W.blend}]},primitive:{topology:W.topology??"triangle-list"}}))}return{config:_,pipelines:O,passLayouts:N}}function h(_){if(!_.seriesStorageBuffer||_.series.length===0)return;let O=new Float32Array(_.series.length*8),N=new Uint32Array(O.buffer);for(let m=0;m<_.series.length;m++){let W=_.series[m],X=m*8;O[X+0]=W.colorR,O[X+1]=W.colorG,O[X+2]=W.colorB,O[X+3]=1,N[X+4]=W.visibleStart,N[X+5]=W.visibleCount}j.queue.writeBuffer(_.seriesStorageBuffer,0,O)}function E(_,O){let N=b,m=n,W=_.maxX-_.minX,X=_.maxY-_.minY,Y=_.bgColor??(w?[0.11,0.11,0.12]:[0.98,0.98,0.98]);N[0]=_.width,N[1]=_.height,N[2]=_.minX+_.panX*W,N[3]=_.minX+_.panX*W+W/_.zoomX,N[4]=_.minY+_.panY*X,N[5]=_.minY+_.panY*X+X/_.zoomY,m[6]=O.pointCount,m[7]=_.series.length,m[8]=w?1:0,N[9]=Y[0],N[10]=Y[1],N[11]=Y[2],N[12]=_.minX,N[13]=_.maxX,N[14]=_.minY,N[15]=_.maxY,j.queue.writeBuffer(_.uniformBuffer,0,L)}function y(_,O){if(!_.customUniformBuffer||O.uniformDefs.length===0)return;let N=O.uniformDefs.length,m=Math.ceil(N*4/16)*16,W=new ArrayBuffer(m),X=new Float32Array(W),Y=new Uint32Array(W);for(let H=0;H<N;H++){let G=O.uniformDefs[H],v=_.customUniformValues[G.name]??G.default;if(G.type==="u32")Y[H]=v>>>0;else X[H]=v}j.queue.writeBuffer(_.customUniformBuffer,0,W)}function g(_,O,N){for(let[,m]of _.chartBuffers)m.destroy();_.chartBuffers.clear();for(let m of O.config.bufferDefs)if(!m.perSeries){let W=Math.max(16,N[m.name]??16);_.chartBuffers.set(m.name,j.createBuffer({size:W,usage:D(m.usages)}))}if(O.config.uniformDefs.length>0){if(_.customUniformBuffer)_.customUniformBuffer.destroy();let m=Math.max(16,Math.ceil(O.config.uniformDefs.length*4/16)*16);_.customUniformBuffer=j.createBuffer({size:m,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),y(_,O.config)}}function u(_,O,N,m){for(let[,W]of _.seriesBuffers)W.destroy();_.seriesBuffers.clear();for(let W of N.config.bufferDefs)if(W.perSeries){let X=Math.max(16,m[W.name]??16);_.seriesBuffers.set(W.name,j.createBuffer({size:X,usage:D(W.usages)}))}if(_.seriesIndexBuffer)_.seriesIndexBuffer.destroy();_.seriesIndexBuffer=j.createBuffer({size:16,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),j.queue.writeBuffer(_.seriesIndexBuffer,0,new Uint32Array([O,0,0,0]))}function f(_,O){if(!_.seriesStorageBuffer)return;for(let N=0;N<_.series.length;N++){let m=_.series[N];m.passBindGroups=[];for(let W=0;W<O.config.passes.length;W++){let X=O.config.passes[W];if(!X.perSeries){m.passBindGroups.push(null);continue}let Y=O.passLayouts.get(`pass-${W}`);try{let H=X.bindings.map((G)=>({binding:G.binding,resource:z(G.source,G.write,_,m,O)}));m.passBindGroups.push(j.createBindGroup({layout:Y,entries:H}))}catch(H){postMessage({type:T.ERROR,code:Q.BIND_S}),m.passBindGroups.push(null)}}}_.chartPassBindGroups=[];for(let N=0;N<O.config.passes.length;N++){let m=O.config.passes[N];if(m.perSeries){_.chartPassBindGroups.push(null);continue}let W=O.passLayouts.get(`pass-${N}`);try{let X=m.bindings.map((Y)=>({binding:Y.binding,resource:z(Y.source,Y.write,_,null,O)}));_.chartPassBindGroups.push(j.createBindGroup({layout:W,entries:X}))}catch(X){postMessage({type:T.ERROR,code:Q.BIND_C}),_.chartPassBindGroups.push(null)}}}function S(_){if(_.outputTexture)_.outputTexture.destroy();let O=Math.max(1,_.width),N=Math.max(1,_.height),m=R.get(_.rendererName),W=GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.RENDER_ATTACHMENT;if(m){for(let X of m.config.passes)if(X.type==="compute"){for(let Y of X.bindings)if(Y.source==="render-target"&&Y.write){W|=GPUTextureUsage.STORAGE_BINDING;break}}}_.outputTexture=j.createTexture({size:[O,N],format:"rgba8unorm",usage:W}),_.outputTextureView=_.outputTexture.createView(),_.blitBindGroup=j.createBindGroup({layout:B,entries:[{binding:0,resource:_.outputTextureView},{binding:1,resource:l}]})}function c(_){let O=R.get(_.rendererName);if(!O)return;if(!_.ctx||_.width===0||_.height===0||_.series.length===0)return;let N;try{N=_.ctx.getCurrentTexture().createView()}catch{return}let m=j.createCommandEncoder();if(h(_),_.series.length>0)E(_,_.series[0]);m.beginRenderPass({colorAttachments:[{view:_.outputTextureView,loadOp:"clear",storeOp:"store",clearValue:{r:0,g:0,b:0,a:0}}]}).end();for(let Y=0;Y<O.config.passes.length;Y++){let H=O.config.passes[Y],G=O.pipelines.get(`pass-${Y}`);if(!G)continue;if(H.type==="compute")if(H.perSeries)for(let v=0;v<_.series.length;v++){let V=_.series[v];if(V.pointCount===0)continue;E(_,V);let q=_.perSeriesPassMeta[v]?.[Y]?.dispatch??{x:1},$=V.passBindGroups[Y];if(!$)continue;let Z=m.beginComputePass();Z.setPipeline(G),Z.setBindGroup(0,$),Z.dispatchWorkgroups(q.x,q.y??1,q.z??1),Z.end()}else{let v=_.chartPassBindGroups[Y];if(!v)continue;let K=_.perSeriesPassMeta[0]?.[Y]?.dispatch??{x:1},q=m.beginComputePass();q.setPipeline(G),q.setBindGroup(0,v),q.dispatchWorkgroups(K.x,K.y??1,K.z??1),q.end()}else if(H.type==="render"){let V=_.perSeriesPassMeta[0]?.[Y]?.draw??0,K=m.beginRenderPass({colorAttachments:[{view:_.outputTextureView,loadOp:H.loadOp??"load",storeOp:"store"}]});if(K.setPipeline(G),H.perSeries)for(let q=0;q<_.series.length;q++){let $=_.series[q];if($.pointCount===0)continue;let Z=$.passBindGroups[Y];if(!Z)continue;K.setBindGroup(0,Z),K.draw(V,1,0,q)}else{let q=_.chartPassBindGroups[Y];if(q)K.setBindGroup(0,q),K.draw(V,1,0,0)}K.end()}}let X=m.beginRenderPass({colorAttachments:[{view:N,loadOp:"clear",storeOp:"store",clearValue:{r:0,g:0,b:0,a:0}}]});if(X.setPipeline(I),_.blitBindGroup)X.setBindGroup(0,_.blitBindGroup);X.draw(4),X.end(),j.queue.submit([m.finish()])}function F(){if(!C)C=!0,requestAnimationFrame(t)}function A(_){if(_.dirty=!0,_.visible)F()}function s(){let _=!1;for(let O of J.values())if(O.dirty=!0,O.visible)_=!0;if(_)F()}function t(){C=!1;let _=performance.now();for(let O of J.values())if(O.visible&&O.dirty&&O.width>0)c(O),O.dirty=!1;M=performance.now()-_,P++}function e(){let _=0;for(let O of J.values())if(O.visible&&O.width>0)_++;return _}async function a(){if(j)return!0;if(!navigator.gpu)return postMessage({type:T.ERROR,code:Q.NO_GPU}),!1;let _=await navigator.gpu.requestAdapter();if(!_)return postMessage({type:T.ERROR,code:Q.NO_ADAPTER}),!1;j=await _.requestDevice({requiredLimits:{maxBufferSize:_.limits.maxBufferSize,maxStorageBufferBindingSize:_.limits.maxStorageBufferBindingSize}}),U=navigator.gpu.getPreferredCanvasFormat(),j.lost.then((N)=>{postMessage({type:T.ERROR,code:Q.DEVICE_LOST})}),B=j.createBindGroupLayout({entries:[{binding:0,visibility:GPUShaderStage.FRAGMENT,texture:{sampleType:"float"}},{binding:1,visibility:GPUShaderStage.FRAGMENT,sampler:{}}]});let O=j.createShaderModule({code:k});return I=j.createRenderPipeline({layout:j.createPipelineLayout({bindGroupLayouts:[B]}),vertex:{module:O,entryPoint:"vs"},fragment:{module:O,entryPoint:"fs",targets:[{format:U}]},primitive:{topology:"triangle-strip"}}),l=j.createSampler({magFilter:"linear",minFilter:"linear"}),p=setInterval(()=>{postMessage({type:T.STATS,fps:P,renderMs:M,totalCharts:J.size,activeCharts:e()}),P=0},1000),postMessage({type:T.GPU_READY}),!0}function o(_){_.dataX.destroy(),_.dataY.destroy();for(let[,O]of _.extraBuffers)O.destroy();for(let[,O]of _.seriesBuffers)O.destroy();if(_.seriesIndexBuffer)_.seriesIndexBuffer.destroy()}function r(_,O,N,m,W){let X=J.get(_);if(!X||!j)return;let Y=R.get(X.rendererName);if(!Y){postMessage({type:T.ERROR,code:Q.NO_RENDERER});return}try{X.minX=N.minX,X.maxX=N.maxX,X.minY=N.minY,X.maxY=N.maxY,X.perSeriesPassMeta=W;for(let H of X.series)o(H);if(X.series=[],X.seriesStorageBuffer)X.seriesStorageBuffer.destroy();if(O.length>0)X.seriesStorageBuffer=j.createBuffer({size:Math.max(32,O.length*32),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST});g(X,Y,m);for(let H=0;H<O.length;H++){let G=O[H],v=j.createBuffer({size:Math.max(16,G.dataX.byteLength),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),V=j.createBuffer({size:Math.max(16,G.dataY.byteLength),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST});j.queue.writeBuffer(v,0,G.dataX),j.queue.writeBuffer(V,0,G.dataY);let K=new Map;for(let[$,Z]of Object.entries(G.extra??{})){let x=j.createBuffer({size:Math.max(16,Z.byteLength),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST});j.queue.writeBuffer(x,0,Z),K.set($,x)}let q={label:G.label,colorR:G.colorR,colorG:G.colorG,colorB:G.colorB,dataX:v,dataY:V,extraBuffers:K,seriesBuffers:new Map,seriesIndexBuffer:null,pointCount:G.dataX.length,visibleStart:0,visibleCount:G.dataX.length,passBindGroups:[]};X.series.push(q),u(q,H,Y,m)}f(X,Y)}catch(H){postMessage({type:T.ERROR,code:Q.UPDATE})}}self.onmessage=async(_)=>{let{type:O,...N}=_.data;switch(O){case T.INIT:w=N.isDark||!1,await a();break;case T.THEME:w=N.isDark,s();break;case T.REGISTER_RENDERER:{if(!j){postMessage({type:T.ERROR,code:Q.NOT_READY});break}let m={name:N.name,shaders:N.shaders,passes:N.passes,bufferDefs:N.bufferDefs??[],uniformDefs:N.uniformDefs??[]};try{R.set(N.name,d(m))}catch(W){postMessage({type:T.ERROR,code:Q.COMPILE})}break}case T.REGISTER_CHART:{if(!j)break;let m=N.canvas.getContext("webgpu");if(!m){postMessage({type:T.ERROR,code:Q.CTX_GET});break}try{m.configure({device:j,format:U,alphaMode:"premultiplied"})}catch(G){postMessage({type:T.ERROR,code:Q.CTX_CFG});break}let W=j.limits.maxTextureDimension2D,X=Math.min(Math.max(1,Math.floor(Number(N.canvas.width)||800)),W),Y=Math.min(Math.max(1,Math.floor(Number(N.canvas.height)||400)),W),H={id:N.id,canvas:N.canvas,ctx:m,rendererName:N.rendererName,visible:!0,series:[],uniformBuffer:j.createBuffer({size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),seriesStorageBuffer:null,outputTexture:null,outputTextureView:null,blitBindGroup:null,chartBuffers:new Map,customUniformBuffer:null,customUniformValues:N.customUniformValues??{},chartPassBindGroups:[],perSeriesPassMeta:N.perSeriesPassMeta??[],width:X,height:Y,panX:0,panY:0,zoomX:1,zoomY:1,minX:0,maxX:1,maxY:1,minY:0,bgColor:N.bgColor??null,dirty:!0};try{S(H)}catch(G){postMessage({type:T.ERROR,code:Q.TEX});break}J.set(N.id,H);break}case T.UNREGISTER_CHART:{let m=J.get(N.id);if(m){try{m.ctx.unconfigure()}catch{}if(m.uniformBuffer.destroy(),m.seriesStorageBuffer)m.seriesStorageBuffer.destroy();if(m.outputTexture)m.outputTexture.destroy();if(m.customUniformBuffer)m.customUniformBuffer.destroy();for(let[,W]of m.chartBuffers)W.destroy();for(let W of m.series)o(W);J.delete(N.id)}break}case T.UPDATE_SERIES:{r(N.id,N.series,N.bounds,N.bufferSizes??{},N.perSeriesPassMeta??[]);let m=J.get(N.id);if(m)A(m);break}case T.RESIZE:{let m=J.get(N.id);if(!m||N.width<=0||N.height<=0)break;let W=j.limits.maxTextureDimension2D,X=Math.min(N.width,W),Y=Math.min(N.height,W);if(X===m.width&&Y===m.height)break;if(m.width=X,m.height=Y,m.canvas.width=X,m.canvas.height=Y,N.perSeriesPassMeta?.length>0)m.perSeriesPassMeta=N.perSeriesPassMeta;let H=R.get(m.rendererName);try{if(S(m),H&&N.bufferSizes){g(m,H,N.bufferSizes);for(let G=0;G<m.series.length;G++)u(m.series[G],G,H,N.bufferSizes);f(m,H)}}catch(G){postMessage({type:T.ERROR,code:Q.RESIZE})}A(m);break}case T.VIEW_TRANSFORM:{let m=J.get(N.id);if(m)m.panX=N.panX,m.panY=N.panY,m.zoomX=Math.max(0.1,Math.min(1e6,N.zoomX)),m.zoomY=Math.max(0.1,Math.min(1e6,N.zoomY)),A(m);break}case T.BATCH_VIEW_TRANSFORM:{let m=Math.max(0.1,Math.min(1e6,N.zoomX)),W=Math.max(0.1,Math.min(1e6,N.zoomY));for(let X of N.transforms){let Y=J.get(X.id);if(Y)Y.panX=N.panX,Y.panY=N.panY,Y.zoomX=m,Y.zoomY=W,Y.dirty=!0}F();break}case T.SET_VISIBILITY:{let m=J.get(N.id);if(m){if(m.visible=N.visible,N.visible&&m.dirty)F()}break}case T.SET_STYLE:{let m=J.get(N.id);if(m){if(N.bgColor!==void 0)m.bgColor=N.bgColor;A(m)}break}case T.SET_UNIFORMS:{let m=J.get(N.id);if(!m)break;Object.assign(m.customUniformValues,N.values);let W=R.get(m.rendererName);if(W)y(m,W.config);A(m);break}}};\n';
+
+// src/msg.ts
+var M = {
+  INIT: 0,
+  THEME: 1,
+  REGISTER_RENDERER: 2,
+  REGISTER_CHART: 3,
+  UNREGISTER_CHART: 4,
+  UPDATE_SERIES: 5,
+  RESIZE: 6,
+  VIEW_TRANSFORM: 7,
+  BATCH_VIEW_TRANSFORM: 8,
+  SET_VISIBILITY: 9,
+  SET_STYLE: 10,
+  SET_UNIFORMS: 11,
+  GPU_READY: 12,
+  ERROR: 13,
+  STATS: 14
+};
 
 // src/chart-library.ts
-var globalPlugins = [];
-function registerPlugin(plugin) {
-  if (!globalPlugins.some((p) => p.name === plugin.name)) {
-    globalPlugins.push(plugin);
+class Chart {
+  id;
+  _mgr;
+  constructor(id, mgr) {
+    this.id = id;
+    this._mgr = mgr;
+  }
+  get _c() {
+    return this._mgr["charts"].get(this.id);
+  }
+  setData(series) {
+    this._mgr.updateSeries(this.id, series);
+  }
+  configure(patch) {
+    const c = this._c;
+    if (!c)
+      return;
+    Object.assign(c.config, patch);
+    const uniformNames = new Set((c.renderer.uniforms ?? []).map((u) => u.name));
+    const workerValues = {};
+    for (const key of Object.keys(patch)) {
+      const val = patch[key];
+      if (typeof val === "number" && uniformNames.has(key)) {
+        workerValues[key] = val;
+      }
+    }
+    if (Object.keys(workerValues).length > 0) {
+      Object.assign(c.customUniforms, workerValues);
+      this._mgr["worker"]?.postMessage({
+        type: M.SET_UNIFORMS,
+        id: this.id,
+        values: workerValues
+      });
+    }
+    if ("bgColor" in patch && patch.bgColor !== undefined) {
+      const [r, g, b] = patch.bgColor;
+      const wrap = c.el.querySelector("div");
+      if (wrap)
+        wrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+      this._mgr["worker"]?.postMessage({
+        type: M.SET_STYLE,
+        id: this.id,
+        bgColor: patch.bgColor
+      });
+    }
+    this._mgr.requestRender(this.id);
+    this._mgr.drawChart(c);
+  }
+  addPlugin(plugin) {
+    const c = this._c;
+    if (!c || c.plugins.some((p) => p.name === plugin.name))
+      return;
+    const wrap = c.el.querySelector("div");
+    plugin.install?.(c, wrap);
+    c.plugins.push(plugin);
+    this._mgr.drawChart(c);
+  }
+  removePlugin(name) {
+    const c = this._c;
+    if (!c)
+      return;
+    const idx = c.plugins.findIndex((p) => p.name === name);
+    if (idx >= 0) {
+      c.plugins[idx].uninstall?.(c);
+      c.plugins.splice(idx, 1);
+      this._mgr.drawChart(c);
+    }
+  }
+  hasPlugin(name) {
+    return this._c?.plugins.some((p) => p.name === name) ?? false;
+  }
+  resetView() {
+    this._mgr.resetView(this.id);
+  }
+  destroy() {
+    this._mgr.destroy(this.id);
   }
 }
-function unregisterPlugin(name) {
-  const idx = globalPlugins.findIndex((p) => p.name === name);
-  if (idx >= 0)
-    globalPlugins.splice(idx, 1);
+var _colorEl = null;
+function parseColor(c) {
+  if (typeof c !== "string")
+    return c;
+  if (!_colorEl) {
+    _colorEl = document.createElement("i");
+    _colorEl.style.cssText = "display:none";
+    document.body.appendChild(_colorEl);
+  }
+  _colorEl.style.color = c;
+  const m = getComputedStyle(_colorEl).color.match(/\d+/g);
+  return { r: +m[0] / 255, g: +m[1] / 255, b: +m[2] / 255 };
 }
-function getPlugins() {
-  return globalPlugins;
+function resizeCanvas(canvas, cssW, cssH) {
+  const dpr = devicePixelRatio || 1;
+  canvas.width = Math.round(cssW * dpr);
+  canvas.height = Math.round(cssH * dpr);
+  if (canvas instanceof HTMLCanvasElement) {
+    canvas.style.width = `${cssW}px`;
+    canvas.style.height = `${cssH}px`;
+  }
 }
 
-class ChartManager {
+class _ChartManager {
   static instance = null;
-  static MARGIN = { left: 55, right: 10, top: 8, bottom: 45 };
-  static HOVER_MAX_DISTANCE_PX = 50;
-  static MIN_ZOOM = 0.1;
-  static MAX_ZOOM = 1e7;
-  static DEFAULT_LABEL_SIZE = 12;
-  static DEFAULT_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
-  static resizeCanvas(canvas, cssWidth, cssHeight) {
-    const dpr = devicePixelRatio || 1;
-    canvas.width = Math.round(cssWidth * dpr);
-    canvas.height = Math.round(cssHeight * dpr);
-    if (canvas instanceof HTMLCanvasElement) {
-      canvas.style.width = `${cssWidth}px`;
-      canvas.style.height = `${cssHeight}px`;
-    }
-  }
   worker = null;
   charts = new Map;
+  renderers = new Map;
+  uiPlugins = [];
+  pendingRenderers = [];
   chartIdCounter = 0;
-  _syncViews = false;
   _isDark = false;
+  _syncViews = false;
   statsCallbacks = [];
   currentStats = {
     fps: 0,
@@ -66,55 +159,56 @@ class ChartManager {
   constructor() {
     this._isDark = document.documentElement.classList.contains("dark");
     this.visibilityObserver = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        const id = entry.target.dataset.chartId;
-        if (id) {
-          const chart = this.charts.get(id);
-          if (chart) {
-            chart.visible = entry.isIntersecting;
-            this.worker?.postMessage({
-              type: "set-visibility",
-              id,
-              visible: entry.isIntersecting
-            });
-            if (entry.isIntersecting) {
-              this.drawChart(chart);
-            }
-          }
-        }
+      for (const e of entries) {
+        const id = e.target.dataset.chartId;
+        if (!id)
+          continue;
+        const chart = this.charts.get(id);
+        if (!chart)
+          continue;
+        chart.visible = e.isIntersecting;
+        this.worker?.postMessage({
+          type: M.SET_VISIBILITY,
+          id,
+          visible: e.isIntersecting
+        });
+        if (e.isIntersecting)
+          this.drawChart(chart);
       }
     }, { threshold: 0.01 });
     this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const id = entry.target.dataset.chartId;
+      for (const e of entries) {
+        const id = e.target.dataset.chartId;
         if (!id)
           continue;
         const chart = this.charts.get(id);
         if (!chart)
           continue;
-        const { width, height } = entry.contentRect;
+        const { width, height } = e.contentRect;
         if (width <= 0 || height <= 0)
           continue;
         chart.width = width;
         chart.height = height;
         const dpr = devicePixelRatio || 1;
+        resizeCanvas(chart.backCanvas, width, height);
+        resizeCanvas(chart.frontCanvas, width, height);
+        const { bufferSizes, perSeriesPassMeta } = this.computeRendererMeta(chart.renderer, chart);
         this.worker?.postMessage({
-          type: "resize",
+          type: M.RESIZE,
           id,
           width: Math.round(width * dpr),
-          height: Math.round(height * dpr)
+          height: Math.round(height * dpr),
+          bufferSizes,
+          perSeriesPassMeta
         });
-        ChartManager.resizeCanvas(chart.backCanvas, width, height);
-        ChartManager.resizeCanvas(chart.axisCanvas, width, height);
         this.drawChart(chart);
       }
     });
   }
   static getInstance() {
-    if (!ChartManager.instance) {
-      ChartManager.instance = new ChartManager;
-    }
-    return ChartManager.instance;
+    if (!_ChartManager.instance)
+      _ChartManager.instance = new _ChartManager;
+    return _ChartManager.instance;
   }
   get isDark() {
     return this._isDark;
@@ -122,6 +216,20 @@ class ChartManager {
   get syncViews() {
     return this._syncViews;
   }
+  use(plugin) {
+    if ("passes" in plugin) {
+      const r = plugin;
+      this.renderers.set(r.name, r);
+      if (this.worker)
+        this.sendRendererRegistration(r);
+      else
+        this.pendingRenderers.push(r);
+    } else {
+      const p = plugin;
+      if (!this.uiPlugins.some((x) => x.name === p.name))
+        this.uiPlugins.push(p);
+    }
+  }
   async init() {
     if (this.worker)
       return true;
@@ -130,12 +238,12 @@ class ChartManager {
         const blob = new Blob([WORKER_CODE2], {
           type: "application/javascript"
         });
-        const workerUrl = URL.createObjectURL(blob);
-        this.worker = new Worker(workerUrl, { type: "module" });
+        this.worker = new Worker(URL.createObjectURL(blob), {
+          type: "module"
+        });
         this.setupWorkerHandlers(resolve);
       }).catch(() => {
-        const workerUrl = new URL("./gpu-worker.js", import.meta.url);
-        this.worker = new Worker(workerUrl, { type: "module" });
+        this.worker = new Worker(new URL("./gpu-worker.js", import.meta.url), { type: "module" });
         this.setupWorkerHandlers(resolve);
       });
     });
@@ -146,14 +254,17 @@ class ChartManager {
     this.worker.onmessage = (e) => {
       const { type, ...data } = e.data;
       switch (type) {
-        case "gpu-ready":
+        case M.GPU_READY:
+          for (const r of this.pendingRenderers)
+            this.sendRendererRegistration(r);
+          this.pendingRenderers = [];
           resolve(true);
           break;
-        case "error":
-          console.error("ChartManager GPU Error:", data.message);
+        case M.ERROR:
+          console.error("chartai:", data.code);
           resolve(false);
           break;
-        case "stats":
+        case M.STATS:
           this.currentStats = {
             fps: data.fps,
             renderMs: data.renderMs,
@@ -163,227 +274,220 @@ class ChartManager {
           for (const cb of this.statsCallbacks)
             cb(this.currentStats);
           break;
-        case "bounds-update": {
-          const chart = this.charts.get(data.id);
-          if (chart) {
-            chart.bounds = {
-              minX: data.minX,
-              maxX: data.maxX,
-              minY: data.minY,
-              maxY: data.maxY
-            };
-            this.drawChart(chart);
-          }
-          break;
-        }
-        default:
-          break;
       }
     };
     this.worker.onerror = (e) => {
-      console.error("ChartManager Worker Error:", e);
+      console.error("chartai:", e);
       resolve(false);
     };
-    this.worker.postMessage({ type: "init", isDark: this._isDark });
+    this.worker.postMessage({ type: M.INIT, isDark: this._isDark });
   }
-  create(config) {
-    if (!this.worker) {
-      throw new Error("ChartManager not initialized. Call init() first.");
+  sendRendererRegistration(renderer) {
+    const bufferDefs = (renderer.buffers ?? []).map((buf) => ({
+      name: buf.name,
+      usages: buf.usages,
+      perSeries: renderer.passes.some((p) => p.perSeries !== false && p.bindings.some((b) => b.source === buf.name))
+    }));
+    this.worker?.postMessage({
+      type: M.REGISTER_RENDERER,
+      name: renderer.name,
+      shaders: renderer.shaders,
+      passes: renderer.passes.map((p) => ({
+        type: p.type,
+        shader: p.shader,
+        bindings: p.bindings,
+        perSeries: p.perSeries !== false,
+        topology: p.topology,
+        loadOp: p.loadOp,
+        blend: p.blend
+      })),
+      bufferDefs,
+      uniformDefs: renderer.uniforms ?? []
+    });
+  }
+  computeRendererMeta(renderer, chart) {
+    const bufferSizes = {};
+    const perSeriesPassMeta = [];
+    const series = chart.series.length > 0 ? chart.series : [
+      {
+        rawX: [],
+        rawY: [],
+        extra: {},
+        label: "",
+        color: { r: 0, g: 0, b: 0 }
+      }
+    ];
+    const dpr = devicePixelRatio || 1;
+    const physW = Math.round(chart.width * dpr);
+    const physH = Math.round(chart.height * dpr);
+    for (const s of series) {
+      const ctx = {
+        width: physW,
+        height: physH,
+        samples: s.rawX.length,
+        seriesCount: series.length,
+        bounds: chart.bounds,
+        view: chart.view
+      };
+      for (const buf of renderer.buffers ?? []) {
+        const size = buf.bytes(ctx);
+        bufferSizes[buf.name] = Math.max(bufferSizes[buf.name] ?? 0, size);
+      }
+      perSeriesPassMeta.push(renderer.passes.map((p) => ({
+        dispatch: p.dispatch?.(ctx),
+        draw: p.draw?.(ctx)
+      })));
     }
+    return { bufferSizes, perSeriesPassMeta };
+  }
+  create(config) {
+    if (!this.worker)
+      throw new Error("Call init() before create().");
+    const renderer = this.renderers.get(config.type);
+    if (!renderer)
+      throw new Error(`No renderer "${config.type}". Call manager.use() with a matching RendererPlugin first.`);
     const id = `chart-${++this.chartIdCounter}`;
     const el = document.createElement("div");
     el.dataset.chartId = id;
-    el.style.cssText = "width: 100%; height: 100%; position: relative;";
-    const canvasWrap = document.createElement("div");
-    canvasWrap.dataset.chartId = id;
-    canvasWrap.style.cssText = "width: 100%; height: 100%; position: relative;";
-    const backCanvas = document.createElement("canvas");
-    backCanvas.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;";
-    const gpuCanvas = document.createElement("canvas");
-    gpuCanvas.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; z-index: 1;";
-    const axisCanvas = document.createElement("canvas");
-    axisCanvas.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2;";
-    canvasWrap.appendChild(backCanvas);
-    canvasWrap.appendChild(gpuCanvas);
-    canvasWrap.appendChild(axisCanvas);
-    el.appendChild(canvasWrap);
+    el.style.cssText = "width:100%;height:100%;position:relative;";
+    const wrap = document.createElement("div");
+    wrap.dataset.chartId = id;
+    wrap.style.cssText = "width:100%;height:100%;position:relative;";
+    const mkCanvas = (z, events) => {
+      const c = document.createElement("canvas");
+      c.style.cssText = `position:absolute;inset:0;width:100%;height:100%;pointer-events:${events};z-index:${z};`;
+      return c;
+    };
+    const backCanvas = mkCanvas(0, "none");
+    const gpuCanvas = mkCanvas(1, "auto");
+    const frontCanvas = mkCanvas(2, "none");
+    wrap.append(backCanvas, gpuCanvas, frontCanvas);
+    el.appendChild(wrap);
     config.container.appendChild(el);
     let offscreen;
     try {
       offscreen = gpuCanvas.transferControlToOffscreen();
     } catch (e) {
-      console.error(`ChartManager: Failed to create offscreen canvas for ${id}:`, e);
-      throw new Error(`Failed to create chart ${id}: ${e}`);
+      throw new Error(`Failed to acquire OffscreenCanvas: ${e}`);
     }
-    const rect = canvasWrap.getBoundingClientRect();
+    const rect = wrap.getBoundingClientRect();
     const cssW = rect.width || 400;
     const cssH = rect.height || 200;
-    ChartManager.resizeCanvas(offscreen, cssW, cssH);
-    ChartManager.resizeCanvas(backCanvas, cssW, cssH);
-    ChartManager.resizeCanvas(axisCanvas, cssW, cssH);
+    resizeCanvas(offscreen, cssW, cssH);
+    resizeCanvas(backCanvas, cssW, cssH);
+    resizeCanvas(frontCanvas, cssW, cssH);
     if (config.bgColor) {
       const [r, g, b] = config.bgColor;
-      canvasWrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+      wrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+    }
+    const customUniforms = {};
+    for (const u of renderer.uniforms ?? []) {
+      const v = config[u.name];
+      customUniforms[u.name] = typeof v === "number" ? v : u.default;
     }
     const chart = {
       id,
       config,
       el,
       backCanvas,
-      axisCanvas,
+      frontCanvas,
       width: cssW,
       height: cssH,
       series: [],
       bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
       view: { panX: 0, panY: 0, zoomX: 1, zoomY: 1 },
-      zoomMode: config.zoomMode || "both",
       visible: true,
       dragging: false,
-      bgColor: config.bgColor,
-      textColor: config.textColor,
-      gridColor: config.gridColor,
-      fontFamily: config.fontFamily,
-      momentum: null,
-      findNearestPoint(screenX, screenY, width, height) {
-        if (this.series.length === 0)
-          return null;
-        const normX = screenX / width;
-        const normY = screenY / height;
-        const rangeX = this.bounds.maxX - this.bounds.minX;
-        const rangeY = this.bounds.maxY - this.bounds.minY;
-        const viewWidth = rangeX / this.view.zoomX;
-        const viewHeight = rangeY / this.view.zoomY;
-        const viewMinX = this.bounds.minX + this.view.panX * rangeX;
-        const viewMinY = this.bounds.minY + this.view.panY * rangeY;
-        const dataX = viewMinX + normX * viewWidth;
-        const dataY = viewMinY + (1 - normY) * viewHeight;
-        let bestSeriesIdx = -1;
-        let bestIdx = -1;
-        let bestDistX = Infinity;
-        let bestDistY = Infinity;
-        for (let s = 0;s < this.series.length; s++) {
-          const series2 = this.series[s];
-          const n = series2.rawX.length;
-          if (n === 0)
-            continue;
-          let lo = 0, hi = n - 1;
-          while (lo < hi) {
-            const mid = lo + hi >> 1;
-            if (series2.rawX[mid] < dataX)
-              lo = mid + 1;
-            else
-              hi = mid;
-          }
-          let idx = lo;
-          if (lo > 0) {
-            const distLo = Math.abs(series2.rawX[lo] - dataX);
-            const distPrev = Math.abs(series2.rawX[lo - 1] - dataX);
-            if (distPrev < distLo)
-              idx = lo - 1;
-          }
-          const distX = Math.abs(series2.rawX[idx] - dataX);
-          const distY = Math.abs(series2.rawY[idx] - dataY);
-          if (distX < bestDistX || distX === bestDistX && distY < bestDistY) {
-            bestDistX = distX;
-            bestDistY = distY;
-            bestSeriesIdx = s;
-            bestIdx = idx;
-          }
-        }
-        if (bestSeriesIdx === -1)
-          return null;
-        const series = this.series[bestSeriesIdx];
-        const pointNormX = (series.rawX[bestIdx] - viewMinX) / viewWidth;
-        const pointScreenX = pointNormX * width;
-        const pixelDistX = Math.abs(pointScreenX - screenX);
-        if (pixelDistX > ChartManager.HOVER_MAX_DISTANCE_PX)
-          return null;
-        return {
-          x: series.rawX[bestIdx],
-          y: series.rawY[bestIdx],
-          index: bestIdx,
-          screenX,
-          screenY,
-          seriesIndex: bestSeriesIdx,
-          seriesLabel: series.label
-        };
-      }
+      plugins: [...this.uiPlugins],
+      renderer,
+      customUniforms
     };
     this.charts.set(id, chart);
-    const workerType = config.type === "bar" ? "box" : config.type;
+    const dpr = devicePixelRatio || 1;
+    const { bufferSizes, perSeriesPassMeta } = this.computeRendererMeta(renderer, chart);
     this.worker.postMessage({
-      type: "register-chart",
+      type: M.REGISTER_CHART,
       id,
       canvas: offscreen,
-      chartType: workerType,
-      pointSize: config.pointSize ?? 3,
-      maxSamplesPerPixel: config.maxSamplesPerPixel ?? 1e4,
-      bgColor: config.bgColor ?? null
+      rendererName: config.type,
+      bgColor: config.bgColor ?? null,
+      bufferSizes,
+      perSeriesPassMeta,
+      customUniformValues: customUniforms,
+      width: Math.round(cssW * dpr),
+      height: Math.round(cssH * dpr)
     }, [offscreen]);
     this.visibilityObserver.observe(el);
-    this.resizeObserver.observe(canvasWrap);
-    for (const plugin of globalPlugins) {
-      plugin.install?.(chart, canvasWrap);
-    }
+    this.resizeObserver.observe(wrap);
+    for (const plugin of chart.plugins)
+      plugin.install?.(chart, wrap);
+    renderer.install?.(chart, wrap);
     this.updateSeries(id, config.series);
-    return id;
+    return new Chart(id, this);
   }
   destroy(id) {
     const chart = this.charts.get(id);
     if (!chart)
       return;
-    for (const plugin of globalPlugins) {
-      plugin.uninstall?.(chart);
-    }
-    if (chart.momentum)
-      cancelAnimationFrame(chart.momentum);
+    chart.renderer.uninstall?.(chart);
+    for (const p of chart.plugins)
+      p.uninstall?.(chart);
     this.visibilityObserver.unobserve(chart.el);
-    const wrap = chart.el.querySelector(".gpu-chart-canvas-wrap");
+    const wrap = chart.el.querySelector("div");
     if (wrap)
       this.resizeObserver.unobserve(wrap);
     chart.el.remove();
-    this.worker?.postMessage({ type: "unregister-chart", id });
+    this.worker?.postMessage({ type: M.UNREGISTER_CHART, id });
     this.charts.delete(id);
   }
   updateSeries(id, series) {
     const chart = this.charts.get(id);
-    if (!chart || !this.worker)
-      return;
-    if (series.length === 0)
+    if (!chart || !this.worker || series.length === 0)
       return;
     chart.series = series.map((s) => {
       const n = s.x.length;
+      const color = parseColor(s.color);
       if (n === 0)
-        return { label: s.label, color: s.color, rawX: [], rawY: [] };
-      const indices = Array.from({ length: n }, (_, i) => i);
-      indices.sort((a, b) => s.x[a] - s.x[b]);
+        return { label: s.label, color, rawX: [], rawY: [], extra: {} };
+      const idx = Array.from({ length: n }, (_, i) => i).sort((a, b) => s.x[a] - s.x[b]);
+      const extra = {};
+      for (const key in s) {
+        if (key !== "label" && key !== "color" && key !== "x" && key !== "y" && Array.isArray(s[key])) {
+          extra[key] = idx.map((i) => s[key][i]);
+        }
+      }
       return {
         label: s.label,
-        color: s.color,
-        rawX: indices.map((i) => s.x[i]),
-        rawY: indices.map((i) => s.y[i])
+        color,
+        rawX: idx.map((i) => s.x[i]),
+        rawY: idx.map((i) => s.y[i]),
+        extra
       };
     });
-    let minX = Infinity, maxX = -Infinity;
-    let minY = Infinity, maxY = -Infinity;
-    for (const s of chart.series) {
-      for (let i = 0;i < s.rawX.length; i++) {
-        if (s.rawX[i] < minX)
-          minX = s.rawX[i];
-        if (s.rawX[i] > maxX)
-          maxX = s.rawX[i];
-        if (s.rawY[i] < minY)
-          minY = s.rawY[i];
-        if (s.rawY[i] > maxY)
-          maxY = s.rawY[i];
+    const customBounds = chart.renderer.computeBounds?.(chart.series);
+    let { minX, maxX, minY, maxY } = customBounds ?? (() => {
+      let minX2 = Infinity, maxX2 = -Infinity, minY2 = Infinity, maxY2 = -Infinity;
+      for (const s of chart.series) {
+        for (let i = 0;i < s.rawX.length; i++) {
+          if (s.rawX[i] < minX2)
+            minX2 = s.rawX[i];
+          if (s.rawX[i] > maxX2)
+            maxX2 = s.rawX[i];
+          if (s.rawY[i] < minY2)
+            minY2 = s.rawY[i];
+          if (s.rawY[i] > maxY2)
+            maxY2 = s.rawY[i];
+        }
       }
-    }
-    const px = (maxX - minX) * 0.05 || 1;
-    const py = (maxY - minY) * 0.1 || 1;
-    minX -= px;
-    maxX += px;
-    minY -= py;
-    maxY += py;
+      const px = (maxX2 - minX2) * 0.05 || 1;
+      const py = (maxY2 - minY2) * 0.1 || 1;
+      return {
+        minX: minX2 - px,
+        maxX: maxX2 + px,
+        minY: minY2 - py,
+        maxY: maxY2 + py
+      };
+    })();
     const db = chart.config.defaultBounds;
     if (db) {
       if (db.minX !== undefined)
@@ -396,89 +500,45 @@ class ChartManager {
         maxY = db.maxY;
     }
     chart.bounds = { minX, maxX, minY, maxY };
-    const seriesData = chart.series.map((s) => ({
-      label: s.label,
-      colorR: s.color.r,
-      colorG: s.color.g,
-      colorB: s.color.b,
-      dataX: new Float32Array(s.rawX),
-      dataY: new Float32Array(s.rawY)
-    }));
+    const { bufferSizes, perSeriesPassMeta } = this.computeRendererMeta(chart.renderer, chart);
+    const seriesData = chart.series.map((s) => {
+      const extra = {};
+      for (const key in s.extra)
+        extra[key] = new Float32Array(s.extra[key]);
+      return {
+        label: s.label,
+        colorR: s.color.r,
+        colorG: s.color.g,
+        colorB: s.color.b,
+        dataX: new Float32Array(s.rawX),
+        dataY: new Float32Array(s.rawY),
+        extra
+      };
+    });
+    const transferables = seriesData.flatMap((s) => [
+      s.dataX.buffer,
+      s.dataY.buffer,
+      ...Object.values(s.extra).map((a) => a.buffer)
+    ]);
     this.worker.postMessage({
-      type: "update-series",
+      type: M.UPDATE_SERIES,
       id,
       series: seriesData,
-      bounds: chart.bounds
-    }, seriesData.flatMap((s) => [s.dataX.buffer, s.dataY.buffer]));
+      bounds: chart.bounds,
+      bufferSizes,
+      perSeriesPassMeta
+    }, transferables);
     this.sendViewTransform(chart);
     this.drawChart(chart);
   }
-  setPointSize(id, size) {
-    const chart = this.charts.get(id);
-    if (!chart)
-      return;
-    this.worker?.postMessage({
-      type: "set-point-size",
-      id,
-      pointSize: Math.max(1, Math.min(8, Math.round(size)))
-    });
-  }
-  setMaxSamplesPerPixel(id, maxSamples) {
-    const chart = this.charts.get(id);
-    if (!chart)
-      return;
-    this.worker?.postMessage({
-      type: "set-max-samples",
-      id,
-      maxSamplesPerPixel: Math.max(0, maxSamples | 0)
-    });
-  }
-  setStyle(id, style) {
-    const chart = this.charts.get(id);
-    if (!chart)
-      return;
-    if (style.bgColor !== undefined)
-      chart.bgColor = style.bgColor;
-    if (style.textColor !== undefined)
-      chart.textColor = style.textColor;
-    if (style.gridColor !== undefined)
-      chart.gridColor = style.gridColor;
-    if (style.fontFamily !== undefined)
-      chart.fontFamily = style.fontFamily;
-    if (style.bgColor !== undefined) {
-      const wrap = chart.el.querySelector(".gpu-chart-canvas-wrap");
-      if (wrap) {
-        const [r, g, b] = style.bgColor;
-        wrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
-      }
-      this.worker?.postMessage({
-        type: "set-style",
-        id,
-        bgColor: style.bgColor
-      });
-    }
-    this.drawChart(chart);
-  }
-  setZoomMode(id, mode) {
-    const chart = this.charts.get(id);
-    if (chart)
-      chart.zoomMode = mode;
-  }
-  getChartCount() {
-    return this.charts.size;
-  }
-  getZoomMode(id) {
-    return this.charts.get(id)?.zoomMode || "both";
-  }
   setSyncViews(sync) {
     this._syncViews = sync;
   }
   setTheme(dark) {
     this._isDark = dark;
-    this.worker?.postMessage({ type: "theme", isDark: dark });
-    for (const chart of this.charts.values()) {
+    this.worker?.postMessage({ type: M.THEME, isDark: dark });
+    for (const chart of this.charts.values())
       this.drawChart(chart);
-    }
   }
   onStats(callback) {
     this.statsCallbacks.push(callback);
@@ -495,22 +555,17 @@ class ChartManager {
     const chart = this.charts.get(id);
     if (!chart)
       return;
-    if (chart.momentum) {
-      cancelAnimationFrame(chart.momentum);
-      chart.momentum = null;
-    }
-    const startPanX = chart.view.panX;
-    const startPanY = chart.view.panY;
-    const startZoomX = chart.view.zoomX;
-    const startZoomY = chart.view.zoomY;
-    const startTime = performance.now();
+    for (const p of chart.plugins)
+      p.resetView?.(chart);
+    const { panX: spx, panY: spy, zoomX: szx, zoomY: szy } = chart.view;
+    const t0 = performance.now();
     const animate = () => {
-      const t = Math.min(1, (performance.now() - startTime) / 300);
-      const ease = 1 - Math.pow(1 - t, 3);
-      chart.view.panX = startPanX * (1 - ease);
-      chart.view.panY = startPanY * (1 - ease);
-      chart.view.zoomX = startZoomX + (1 - startZoomX) * ease;
-      chart.view.zoomY = startZoomY + (1 - startZoomY) * ease;
+      const t = Math.min(1, (performance.now() - t0) / 300);
+      const e = 1 - Math.pow(1 - t, 3);
+      chart.view.panX = spx * (1 - e);
+      chart.view.panY = spy * (1 - e);
+      chart.view.zoomX = szx + (1 - szx) * e;
+      chart.view.zoomY = szy + (1 - szy) * e;
       this.sendViewTransform(chart);
       this.drawChart(chart);
       if (this._syncViews)
@@ -520,9 +575,14 @@ class ChartManager {
     };
     requestAnimationFrame(animate);
   }
+  requestRender(id) {
+    const chart = this.charts.get(id);
+    if (chart)
+      this.sendViewTransform(chart);
+  }
   sendViewTransform(chart) {
     this.worker?.postMessage({
-      type: "view-transform",
+      type: M.VIEW_TRANSFORM,
       id: chart.id,
       panX: chart.view.panX,
       panY: chart.view.panY,
@@ -541,7 +601,7 @@ class ChartManager {
     }
     if (transforms.length > 0) {
       this.worker?.postMessage({
-        type: "batch-view-transform",
+        type: M.BATCH_VIEW_TRANSFORM,
         panX: source.view.panX,
         panY: source.view.panY,
         zoomX: source.view.zoomX,
@@ -559,26 +619,23 @@ class ChartManager {
       backCtx.clearRect(0, 0, chart.backCanvas.width, chart.backCanvas.height);
       backCtx.save();
       backCtx.scale(dpr, dpr);
-      for (const plugin of globalPlugins) {
-        plugin.beforeDraw?.(backCtx, chart);
-      }
+      for (const p of chart.plugins)
+        p.beforeDraw?.(backCtx, chart);
       backCtx.restore();
     }
-    const ctx = chart.axisCanvas.getContext("2d");
+    const ctx = chart.frontCanvas.getContext("2d");
     if (ctx) {
-      ctx.clearRect(0, 0, chart.axisCanvas.width, chart.axisCanvas.height);
+      ctx.clearRect(0, 0, chart.frontCanvas.width, chart.frontCanvas.height);
       ctx.save();
       ctx.scale(dpr, dpr);
-      for (const plugin of globalPlugins) {
-        plugin.afterDraw?.(ctx, chart);
-      }
+      for (const p of chart.plugins)
+        p.afterDraw?.(ctx, chart);
       ctx.restore();
     }
   }
 }
+var ChartManager = _ChartManager.getInstance();
 export {
-  unregisterPlugin,
-  registerPlugin,
-  getPlugins,
-  ChartManager
+  ChartManager,
+  Chart
 };