aliencharts 0.1.3 → 0.2.0

package/dist/react.js

@@ -0,0 +1,2533 @@
+// src/react/ChartGridAdapter.jsx
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef
+} from "react";
+
+// src/icons.js
+var icons = {
+  arrowLineRight: '<line x1="32" y1="128" x2="176" y2="128"/><polyline points="104 56 176 128 104 200"/><line x1="216" y1="40" x2="216" y2="216"/>',
+  pushPinSimple: '<path d="M224,176a8,8,0,0,1-8,8H136v56a8,8,0,0,1-16,0V184H40a8,8,0,0,1,0-16h9.29L70.46,48H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16h-6.46l21.17,120H216A8,8,0,0,1,224,176Z"/>',
+  arrowCounterClockwise: '<polyline points="24 56 24 104 72 104"/><path d="M67.59,192A88,88,0,1,0,65.77,65.77L24,104"/>',
+  arrowsIn: '<polyline points="192 104 152 104 152 64"/><line x1="208" y1="48" x2="152" y2="104"/><polyline points="64 152 104 152 104 192"/><line x1="48" y1="208" x2="104" y2="152"/><polyline points="152 192 152 152 192 152"/><line x1="208" y1="208" x2="152" y2="152"/><polyline points="104 64 104 104 64 104"/><line x1="48" y1="48" x2="104" y2="104"/>',
+  arrowsOut: '<polyline points="160 48 208 48 208 96"/><line x1="152" y1="104" x2="208" y2="48"/><polyline points="96 208 48 208 48 160"/><line x1="104" y1="152" x2="48" y2="208"/><polyline points="208 160 208 208 160 208"/><line x1="152" y1="152" x2="208" y2="208"/><polyline points="48 96 48 48 96 48"/><line x1="104" y1="104" x2="48" y2="48"/>',
+  broom: '<path d="M112,224a95.2,95.2,0,0,1-29-48"/><path d="M192,152c0,31.67,13.31,59,40,72H61A103.65,103.65,0,0,1,32,152c0-28.21,11.23-50.89,29.47-69.64a8,8,0,0,1,8.67-1.81L95.52,90.83a16,16,0,0,0,20.82-9l21-53.11c4.15-10,15.47-15.32,25.63-11.53a20,20,0,0,1,11.51,26.4L153.13,96.69a16,16,0,0,0,8.93,20.76L187,127.29a8,8,0,0,1,5,7.43Z"/><line x1="40.54" y1="112.21" x2="194.26" y2="173.7"/>',
+  waveSine: '<path d="M24,128c104-221.7,104,221.7,208,0"/>',
+  magnifyingGlassPlus: '<line x1="80" y1="112" x2="144" y2="112"/><circle cx="112" cy="112" r="80"/><line x1="168.57" y1="168.57" x2="224" y2="224"/><line x1="112" y1="80" x2="112" y2="144"/>',
+  mapPin: '<circle cx="128" cy="104" r="32"/><path d="M208,104c0,72-80,128-80,128S48,176,48,104a80,80,0,0,1,160,0Z"/>',
+  minus: '<line x1="40" y1="128" x2="216" y2="128"/>',
+  eye: '<path d="M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z"/><circle cx="128" cy="128" r="32"/>'
+};
+var filledIcons = /* @__PURE__ */ new Set(["pushPinSimple"]);
+var iconSvg = (name, { size = 16, className = "" } = {}) => {
+  const body = icons[name];
+  if (!body) throw new Error(`Unknown AlienCharts icon: ${name}`);
+  const paint = filledIcons.has(name) ? 'fill="currentColor"' : 'fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"';
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="${size}" height="${size}" class="${className}" aria-hidden="true" ${paint}>${body}</svg>`;
+};
+
+// src/core/drawingUtils.js
+var DEFAULT_DRAWING_COLOR = "#60a5fa";
+var DRAWING_HIT_DISTANCE = 8;
+var DRAWING_HANDLE_HIT_DISTANCE = 10;
+var PIN_HIT_DISTANCE = 14;
+var DRAWING_TOOLS = /* @__PURE__ */ new Set(["trendline", "hline", "vline", "pin"]);
+var getDrawingStyle = (drawing) => ({
+  color: drawing?.style?.color || DEFAULT_DRAWING_COLOR,
+  lineWidth: Number.isFinite(drawing?.style?.lineWidth) ? drawing.style.lineWidth : 2,
+  dashPattern: Array.isArray(drawing?.style?.dashPattern) ? drawing.style.dashPattern : [],
+  extendLeft: Boolean(drawing?.style?.extendLeft),
+  extendRight: drawing?.style?.extendRight !== false,
+  text: typeof drawing?.style?.text === "string" ? drawing.style.text : ""
+});
+var getDrawingsForChart = (drawings, chartId) => Array.isArray(drawings) ? drawings.filter((drawing) => drawing?.chartId === chartId) : [];
+var getDefaultDrawingStyle = (type) => ({
+  color: DEFAULT_DRAWING_COLOR,
+  lineWidth: 2,
+  dashPattern: [],
+  extendLeft: false,
+  extendRight: type !== "vline",
+  text: ""
+});
+var createDrawing = ({
+  chartId,
+  type,
+  start,
+  end,
+  createDrawingId
+}) => {
+  const id = createDrawingId?.({ chartId, type }) || `${chartId}-drawing-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  return {
+    id,
+    chartId,
+    type,
+    start,
+    end,
+    createdAt: Date.now(),
+    style: getDefaultDrawingStyle(type)
+  };
+};
+var createDraftDrawing = ({ chartId, type, start, end }) => ({
+  id: "__draft__",
+  chartId,
+  type,
+  start,
+  end,
+  createdAt: Date.now(),
+  style: getDefaultDrawingStyle(type)
+});
+var extendRayToPlotBoundary = (origin, through, plot) => {
+  const dx = through.x - origin.x;
+  const dy = through.y - origin.y;
+  if (Math.abs(dx) <= 1e-6 && Math.abs(dy) <= 1e-6) return through;
+  const candidates = [];
+  if (dx > 1e-6) candidates.push((plot.x + plot.width - origin.x) / dx);
+  else if (dx < -1e-6) candidates.push((plot.x - origin.x) / dx);
+  if (dy > 1e-6) candidates.push((plot.y + plot.height - origin.y) / dy);
+  else if (dy < -1e-6) candidates.push((plot.y - origin.y) / dy);
+  const boundaryScale = Math.min(
+    ...candidates.filter((scale2) => Number.isFinite(scale2) && scale2 >= 0)
+  );
+  const scale = Number.isFinite(boundaryScale) ? Math.max(1, boundaryScale) : 1;
+  return {
+    x: origin.x + dx * scale,
+    y: origin.y + dy * scale
+  };
+};
+var getDrawingGeometry = ({ drawing, layout, projectPoint }) => {
+  if (!drawing?.start || !drawing?.end) return null;
+  const start = projectPoint(drawing.start, layout);
+  const end = projectPoint(drawing.end, layout);
+  const style = getDrawingStyle(drawing);
+  let lineStart = start;
+  let lineEnd = end;
+  if (drawing.type === "pin") {
+    return { start, end: start, lineStart: start, lineEnd: start, style };
+  }
+  if (drawing.type === "hline") {
+    const lineEndX = Math.abs(end.x - start.x) > 1e-6 ? end.x : layout.plot.x + layout.plot.width;
+    lineStart = {
+      x: style.extendRight ? layout.plot.x : start.x,
+      y: start.y
+    };
+    lineEnd = {
+      x: style.extendRight ? layout.plot.x + layout.plot.width : lineEndX,
+      y: start.y
+    };
+  } else if (drawing.type === "vline") {
+    lineStart = {
+      x: start.x,
+      y: layout.plot.y
+    };
+    lineEnd = {
+      x: start.x,
+      y: layout.plot.y + layout.plot.height
+    };
+  } else if (drawing.type === "trendline") {
+    if (style.extendLeft) lineStart = extendRayToPlotBoundary(end, start, layout.plot);
+    if (style.extendRight) lineEnd = extendRayToPlotBoundary(start, end, layout.plot);
+  }
+  return { start, end, lineStart, lineEnd, style };
+};
+var distanceToSegment = (point, start, end) => {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  if (dx === 0 && dy === 0) {
+    return Math.hypot(point.x - start.x, point.y - start.y);
+  }
+  const t = Math.max(
+    0,
+    Math.min(
+      1,
+      ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy)
+    )
+  );
+  return Math.hypot(point.x - (start.x + t * dx), point.y - (start.y + t * dy));
+};
+var hitTestDrawing = ({ point, drawing, layout, projectPoint }) => {
+  const geometry = getDrawingGeometry({
+    drawing,
+    layout,
+    projectPoint
+  });
+  if (!geometry) return null;
+  if (drawing.type !== "pin" && Math.hypot(point.x - geometry.start.x, point.y - geometry.start.y) <= DRAWING_HANDLE_HIT_DISTANCE) {
+    return { drawing, endpoint: "start" };
+  }
+  if (drawing.type === "pin" && Math.hypot(point.x - geometry.start.x, point.y - geometry.start.y) <= PIN_HIT_DISTANCE) {
+    return { drawing, endpoint: "move" };
+  }
+  if (drawing.type === "trendline" && Math.hypot(point.x - geometry.end.x, point.y - geometry.end.y) <= DRAWING_HANDLE_HIT_DISTANCE) {
+    return { drawing, endpoint: "end" };
+  }
+  const distance = distanceToSegment(point, geometry.lineStart, geometry.lineEnd);
+  return distance <= DRAWING_HIT_DISTANCE ? { drawing, endpoint: null } : null;
+};
+var updateDrawingById = (drawings, drawingId, updater) => (Array.isArray(drawings) ? drawings : []).map(
+  (drawing) => drawing?.id === drawingId ? updater(drawing) : drawing
+);
+var removeDrawingById = (drawings, drawingId) => (Array.isArray(drawings) ? drawings : []).filter(
+  (drawing) => drawing?.id !== drawingId
+);
+
+// src/core/lodSeries.js
+var DEFAULT_MAX_LEVELS = 18;
+var toTypedArray = (value, Type) => {
+  if (value instanceof Type) return value;
+  if (ArrayBuffer.isView(value)) return new Type(value);
+  if (Array.isArray(value)) return new Type(value);
+  return new Type(0);
+};
+var lowerBound = (array, value) => {
+  let lo = 0;
+  let hi = array.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (array[mid] < value) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+};
+var upperBound = (array, value) => {
+  let lo = 0;
+  let hi = array.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (array[mid] <= value) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+};
+var pushUniqueSorted = (indices, index) => {
+  if (index < 0) return;
+  if (indices.includes(index)) return;
+  indices.push(index);
+};
+var buildLod = (rawX, rawY, bucketSize, startIndex = 0, endIndex = rawX.length) => {
+  if (bucketSize <= 1 || rawX.length <= bucketSize) {
+    return { x: rawX, y: rawY, bucketSize: 1 };
+  }
+  const alignedStart = Math.max(0, Math.floor(startIndex / bucketSize) * bucketSize);
+  const alignedEnd = Math.min(rawX.length, endIndex);
+  const estimated = Math.ceil((alignedEnd - alignedStart) / bucketSize) * 4;
+  const x = new Float64Array(estimated);
+  const y = new Float32Array(estimated);
+  let out = 0;
+  for (let start = alignedStart; start < alignedEnd; start += bucketSize) {
+    const end = Math.min(alignedEnd, start + bucketSize);
+    let minIndex = start;
+    let maxIndex = start;
+    for (let i = start + 1; i < end; i += 1) {
+      if (rawY[i] < rawY[minIndex]) minIndex = i;
+      if (rawY[i] > rawY[maxIndex]) maxIndex = i;
+    }
+    const indices = [];
+    pushUniqueSorted(indices, start);
+    pushUniqueSorted(indices, minIndex);
+    pushUniqueSorted(indices, maxIndex);
+    pushUniqueSorted(indices, end - 1);
+    indices.sort((a, b) => a - b);
+    for (let i = 0; i < indices.length; i += 1) {
+      const sourceIndex = indices[i];
+      x[out] = rawX[sourceIndex];
+      y[out] = rawY[sourceIndex];
+      out += 1;
+    }
+  }
+  return {
+    x: x.subarray(0, out),
+    y: y.subarray(0, out),
+    bucketSize
+  };
+};
+var concatTyped = (Type, left, right) => {
+  if (!left?.length) return right;
+  if (!right?.length) return left;
+  const out = new Type(left.length + right.length);
+  out.set(left, 0);
+  out.set(right, left.length);
+  return out;
+};
+var LineSeries = class {
+  constructor({ id, name, color, x, y, maxLevels = DEFAULT_MAX_LEVELS }) {
+    this.id = id;
+    this.name = name || id;
+    this.color = color || "#38bdf8";
+    this.maxLevels = maxLevels;
+    const initialX = toTypedArray(x, Float64Array);
+    const initialY = toTypedArray(y, Float32Array);
+    this._length = Math.min(initialX.length, initialY.length);
+    const capacity = Math.max(1, this._length);
+    this.rawX = new Float64Array(capacity);
+    this.rawY = new Float32Array(capacity);
+    this.rawX.set(initialX.subarray(0, this._length));
+    this.rawY.set(initialY.subarray(0, this._length));
+    this.levels = [];
+    this.rebuildLevels();
+  }
+  get length() {
+    return this._length;
+  }
+  append(xValues, yValues) {
+    const nextX = toTypedArray(xValues, Float64Array);
+    const nextY = toTypedArray(yValues, Float32Array);
+    const appendLength = Math.min(nextX.length, nextY.length);
+    if (appendLength === 0) return;
+    const currentLength = this.length;
+    this.ensureRawCapacity(currentLength + appendLength);
+    this.rawX.set(nextX.subarray(0, appendLength), currentLength);
+    this.rawY.set(nextY.subarray(0, appendLength), currentLength);
+    this._length = currentLength + appendLength;
+    this.markLevelsDirty(currentLength);
+  }
+  rebuildLevels() {
+    const rawX = this.rawX.subarray(0, this.length);
+    const rawY = this.rawY.subarray(0, this.length);
+    this.levels = [{ x: rawX, y: rawY, bucketSize: 1 }];
+    let bucketSize = 4;
+    while (this.levels.length < this.maxLevels && bucketSize < Math.max(8, rawX.length)) {
+      this.levels.push(buildLod(rawX, rawY, bucketSize));
+      bucketSize *= 4;
+    }
+  }
+  ensureRawCapacity(requiredLength) {
+    if (requiredLength <= this.rawX.length && requiredLength <= this.rawY.length) {
+      return;
+    }
+    const nextCapacity = Math.max(requiredLength, Math.ceil(this.rawX.length * 1.5));
+    const rawX = new Float64Array(nextCapacity);
+    const rawY = new Float32Array(nextCapacity);
+    rawX.set(this.rawX.subarray(0, this.length));
+    rawY.set(this.rawY.subarray(0, this.length));
+    this.rawX = rawX;
+    this.rawY = rawY;
+  }
+  markLevelsDirty(previousLength) {
+    const rawX = this.rawX.subarray(0, this.length);
+    const rawY = this.rawY.subarray(0, this.length);
+    this.levels[0] = { x: rawX, y: rawY, bucketSize: 1 };
+    let bucketSize = this.levels.length > 0 ? this.levels[this.levels.length - 1].bucketSize * 4 : 4;
+    while (this.levels.length < this.maxLevels && bucketSize < Math.max(8, rawX.length)) {
+      this.levels.push(buildLod(rawX, rawY, bucketSize));
+      bucketSize *= 4;
+    }
+    for (let i = 1; i < this.levels.length; i += 1) {
+      const level = this.levels[i];
+      const dirtyRawStart = Math.floor(previousLength / level.bucketSize) * level.bucketSize;
+      level.dirtyFrom = Math.min(level.dirtyFrom ?? dirtyRawStart, dirtyRawStart);
+    }
+  }
+  ensureLevel(index) {
+    const level = this.levels[index];
+    if (!level || index === 0 || level.dirtyFrom == null) return level;
+    const rawX = this.rawX.subarray(0, this.length);
+    const rawY = this.rawY.subarray(0, this.length);
+    const dirtyRawStart = Math.floor(level.dirtyFrom / level.bucketSize) * level.bucketSize;
+    const cutoffX = rawX[dirtyRawStart] ?? rawX[0] ?? 0;
+    const keepCount = lowerBound(level.x, cutoffX);
+    const tail = buildLod(rawX, rawY, level.bucketSize, dirtyRawStart, rawX.length);
+    this.levels[index] = {
+      x: concatTyped(Float64Array, level.x.subarray(0, keepCount), tail.x),
+      y: concatTyped(Float32Array, level.y.subarray(0, keepCount), tail.y),
+      bucketSize: level.bucketSize
+    };
+    return this.levels[index];
+  }
+  selectLevel(xMin, xMax, pixelWidth, targetPointsPerPixel = 2.5) {
+    const rawX = this.levels[0].x;
+    if (rawX.length === 0) return this.levels[0];
+    const from = lowerBound(rawX, xMin);
+    const to = upperBound(rawX, xMax);
+    const visibleRawPoints = Math.max(0, to - from);
+    const targetPoints = Math.max(32, pixelWidth * targetPointsPerPixel);
+    const desiredBucket = Math.max(1, visibleRawPoints / targetPoints);
+    let selectedIndex = 0;
+    for (let i = 1; i < this.levels.length; i += 1) {
+      if (this.levels[i].bucketSize <= desiredBucket) {
+        selectedIndex = i;
+      } else {
+        break;
+      }
+    }
+    return this.ensureLevel(selectedIndex);
+  }
+  getVisiblePoints(xMin, xMax, pixelWidth) {
+    const level = this.selectLevel(xMin, xMax, pixelWidth);
+    const start = Math.max(0, lowerBound(level.x, xMin) - 1);
+    const end = Math.min(level.x.length, upperBound(level.x, xMax) + 1);
+    return {
+      x: level.x.subarray(start, end),
+      y: level.y.subarray(start, end),
+      bucketSize: level.bucketSize,
+      pointCount: Math.max(0, end - start)
+    };
+  }
+};
+var createSeries = (options) => new LineSeries(options);
+
+// src/core/chartRenderer.js
+var CHART_HEIGHT = 360;
+var RIGHT_AXIS_WIDTH = 58;
+var PLOT_PADDING = {
+  left: 38,
+  right: RIGHT_AXIS_WIDTH,
+  top: 34,
+  bottom: 28
+};
+var Y_SCALE_MIN = 0.05;
+var Y_SCALE_MAX = 40;
+var Y_AXIS_TICK_COUNT = 5;
+var X_AXIS_TICK_COUNT = 5;
+var X_SCALE_MIN_SPAN = 10;
+var X_SCALE_MAX_SPAN = 1e9;
+var JUMP_LATEST_RIGHT_PADDING_RATIO = 0.1;
+var INITIAL_GPU_VERTEX_CAPACITY = 4096;
+var AA_VERTEX_FLOAT_STRIDE = 6;
+var AA_LINE_WIDTH_PX = 1.5;
+var AA_EDGE_WIDTH_PX = 1;
+var DASH_LENGTH_PX = 7;
+var DASH_GAP_PX = 5;
+var DEFAULT_CHART_BACKGROUND = "#f5f9ff";
+var EMPTY_OBJECT = {};
+var hexToRgb = (color) => {
+  const value = String(color || "#38bdf8").replace("#", "");
+  const normalized = value.length === 3 ? value.split("").map((char) => char + char).join("") : value.padEnd(6, "0").slice(0, 6);
+  const number = Number.parseInt(normalized, 16);
+  return [
+    (number >> 16 & 255) / 255,
+    (number >> 8 & 255) / 255,
+    (number & 255) / 255
+  ];
+};
+var getReadableTextColor = (backgroundColor) => {
+  const [r, g, b] = hexToRgb(backgroundColor);
+  const toLinear = (value) => value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return luminance > 0.45 ? "#111827" : "#ffffff";
+};
+var getSeriesLabelTextColor = (series) => {
+  if (series.__labelTextColorFor !== series.color) {
+    series.__labelTextColorFor = series.color;
+    series.__labelTextColor = getReadableTextColor(series.color);
+  }
+  return series.__labelTextColor;
+};
+var createProgram = (gl) => {
+  const vertexSource = `#version 300 es
+    in vec2 a_xy;
+    uniform vec2 u_resolution;
+    uniform vec4 u_rect;
+    uniform vec2 u_xRange;
+    uniform vec2 u_yRange;
+
+    void main() {
+      float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
+      float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
+      float nx = (a_xy.x - u_xRange.x) / xDenom;
+      float ny = (a_xy.y - u_yRange.x) / yDenom;
+      float px = u_rect.x + nx * u_rect.z;
+      float py = u_rect.y + (1.0 - ny) * u_rect.w;
+      vec2 zeroToOne = vec2(px, py) / u_resolution;
+      vec2 clip = zeroToOne * 2.0 - 1.0;
+      gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    }
+  `;
+  const fragmentSource = `#version 300 es
+    precision highp float;
+    uniform vec3 u_color;
+    out vec4 outColor;
+
+    void main() {
+      outColor = vec4(u_color, 1.0);
+    }
+  `;
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
+  }
+  return program;
+};
+var createAntialiasProgram = (gl) => {
+  const vertexSource = `#version 300 es
+    in vec2 a_start;
+    in vec2 a_end;
+    in float a_side;
+    in float a_along;
+    uniform vec2 u_resolution;
+    uniform vec4 u_rect;
+    uniform vec2 u_xRange;
+    uniform vec2 u_yRange;
+    uniform float u_lineHalfWidth;
+    uniform float u_edgeWidth;
+    out float v_side;
+
+    vec2 toPixel(vec2 value) {
+      float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
+      float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
+      float nx = (value.x - u_xRange.x) / xDenom;
+      float ny = (value.y - u_yRange.x) / yDenom;
+      return vec2(
+        u_rect.x + nx * u_rect.z,
+        u_rect.y + (1.0 - ny) * u_rect.w
+      );
+    }
+
+    void main() {
+      vec2 startPx = toPixel(a_start);
+      vec2 endPx = toPixel(a_end);
+      vec2 delta = endPx - startPx;
+      float segmentLength = max(0.000001, length(delta));
+      vec2 direction = delta / segmentLength;
+      vec2 normal = vec2(-direction.y, direction.x);
+      float expand = u_lineHalfWidth + u_edgeWidth;
+      float cap = min(expand, segmentLength * 0.5);
+      vec2 px = mix(startPx, endPx, a_along)
+        + direction * ((a_along * 2.0 - 1.0) * cap)
+        + normal * a_side * expand;
+      vec2 zeroToOne = px / u_resolution;
+      vec2 clip = zeroToOne * 2.0 - 1.0;
+      v_side = a_side;
+      gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    }
+  `;
+  const fragmentSource = `#version 300 es
+    precision highp float;
+    uniform vec3 u_color;
+    uniform float u_lineHalfWidth;
+    uniform float u_edgeWidth;
+    in float v_side;
+    out vec4 outColor;
+
+    void main() {
+      float expand = u_lineHalfWidth + u_edgeWidth;
+      float distanceFromCenter = abs(v_side) * expand;
+      float alpha = 1.0 - smoothstep(u_lineHalfWidth, expand, distanceFromCenter);
+      outColor = vec4(u_color, alpha);
+    }
+  `;
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
+  }
+  return program;
+};
+var createSeriesBufferCache = () => /* @__PURE__ */ new Map();
+var getNextVertexCapacity = (currentCapacity, requiredCapacity) => {
+  let nextCapacity = Math.max(
+    INITIAL_GPU_VERTEX_CAPACITY,
+    currentCapacity || 0
+  );
+  while (nextCapacity < requiredCapacity) {
+    nextCapacity *= 2;
+  }
+  return nextCapacity;
+};
+var getSeriesBuffer = (gl, cache, seriesId, pointCount) => {
+  const requiredVertexFloats = pointCount * 2;
+  let entry = cache.get(seriesId);
+  if (!entry) {
+    entry = {
+      buffer: gl.createBuffer(),
+      gpuCapacity: 0,
+      vertices: new Float32Array(
+        getNextVertexCapacity(0, requiredVertexFloats)
+      )
+    };
+    cache.set(seriesId, entry);
+  }
+  if (entry.vertices.length < requiredVertexFloats) {
+    entry.vertices = new Float32Array(
+      getNextVertexCapacity(entry.vertices.length, requiredVertexFloats)
+    );
+  }
+  if (entry.gpuCapacity < entry.vertices.length) {
+    entry.gpuCapacity = entry.vertices.length;
+    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
+      gl.DYNAMIC_DRAW
+    );
+  }
+  return entry;
+};
+var getAntialiasSeriesBuffer = (gl, cache, seriesId, pointCount) => {
+  const segmentCount = Math.max(0, pointCount - 1);
+  const requiredVertexFloats = segmentCount * 6 * AA_VERTEX_FLOAT_STRIDE;
+  let entry = cache.get(seriesId);
+  if (!entry) {
+    entry = {
+      buffer: gl.createBuffer(),
+      gpuCapacity: 0,
+      vertices: new Float32Array(
+        getNextVertexCapacity(0, requiredVertexFloats)
+      )
+    };
+    cache.set(seriesId, entry);
+  }
+  if (entry.vertices.length < requiredVertexFloats) {
+    entry.vertices = new Float32Array(
+      getNextVertexCapacity(entry.vertices.length, requiredVertexFloats)
+    );
+  }
+  if (entry.gpuCapacity < entry.vertices.length) {
+    entry.gpuCapacity = entry.vertices.length;
+    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
+      gl.DYNAMIC_DRAW
+    );
+  }
+  return entry;
+};
+var deleteSeriesBuffers = (gl, cache) => {
+  cache.forEach((entry) => {
+    if (entry.buffer) gl.deleteBuffer(entry.buffer);
+  });
+  cache.clear();
+};
+var fillSeriesPoints = ({ vertices, visiblePoints, pointCount, animatedPoint }) => {
+  for (let i = 0; i < pointCount; i += 1) {
+    if (animatedPoint && i === animatedPoint.index) {
+      vertices[i * 2] = animatedPoint.x;
+      vertices[i * 2 + 1] = animatedPoint.y;
+      continue;
+    }
+    vertices[i * 2] = visiblePoints.x[i];
+    vertices[i * 2 + 1] = visiblePoints.y[i];
+  }
+};
+var projectDataToPixel = ({ x, y, state, yRange, plot }) => ({
+  x: plot.x + (x - state.xMin) / (state.xMax - state.xMin) * plot.width,
+  y: plot.y + (yRange.maxY - y) / (yRange.maxY - yRange.minY) * plot.height
+});
+var writeLineVertex = (vertices, offset, x, y) => {
+  vertices[offset] = x;
+  vertices[offset + 1] = y;
+};
+var fillDashedSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  state,
+  yRange,
+  plot
+}) => {
+  let offset = 0;
+  let distance = 0;
+  const dashTotal = DASH_LENGTH_PX + DASH_GAP_PX;
+  for (let i = 0; i < pointCount - 1; i += 1) {
+    const start = {
+      x: visiblePoints.x[i],
+      y: visiblePoints.y[i]
+    };
+    const end = {
+      x: visiblePoints.x[i + 1],
+      y: visiblePoints.y[i + 1]
+    };
+    const startPx = projectDataToPixel({ ...start, state, yRange, plot });
+    const endPx = projectDataToPixel({ ...end, state, yRange, plot });
+    const pixelLength = Math.hypot(endPx.x - startPx.x, endPx.y - startPx.y);
+    if (!Number.isFinite(pixelLength) || pixelLength <= 0) continue;
+    let consumed = 0;
+    while (consumed < pixelLength) {
+      const phase = distance % dashTotal;
+      const boundary = phase < DASH_LENGTH_PX ? DASH_LENGTH_PX - phase : dashTotal - phase;
+      const step = Math.min(boundary, pixelLength - consumed);
+      if (phase < DASH_LENGTH_PX) {
+        if (offset + 4 > vertices.length) {
+          return offset / 2;
+        }
+        const t0 = consumed / pixelLength;
+        const t1 = (consumed + step) / pixelLength;
+        writeLineVertex(
+          vertices,
+          offset,
+          start.x + (end.x - start.x) * t0,
+          start.y + (end.y - start.y) * t0
+        );
+        offset += 2;
+        writeLineVertex(
+          vertices,
+          offset,
+          start.x + (end.x - start.x) * t1,
+          start.y + (end.y - start.y) * t1
+        );
+        offset += 2;
+      }
+      consumed += step;
+      distance += step;
+    }
+  }
+  return offset / 2;
+};
+var getSeriesPoint = (visiblePoints, animatedPoint, index) => {
+  if (animatedPoint && index === animatedPoint.index) {
+    return { x: animatedPoint.x, y: animatedPoint.y };
+  }
+  return { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+};
+var getSinglePointSegment = ({ series, state, yRange, plot }) => {
+  if (series.length !== 1) return null;
+  const x = series.rawX[0];
+  const y = series.rawY[0];
+  if (x < state.xMin || x > state.xMax || y < yRange.minY || y > yRange.maxY) {
+    return null;
+  }
+  const halfWidth = (state.xMax - state.xMin) / Math.max(1, plot.width) * 3;
+  return {
+    x: new Float64Array([x - halfWidth, x + halfWidth]),
+    y: new Float32Array([y, y]),
+    bucketSize: 1,
+    pointCount: 2,
+    endpoint: { x, y }
+  };
+};
+var writeAntialiasVertex = (vertices, offset, start, end, side, along) => {
+  vertices[offset] = start.x;
+  vertices[offset + 1] = start.y;
+  vertices[offset + 2] = end.x;
+  vertices[offset + 3] = end.y;
+  vertices[offset + 4] = side;
+  vertices[offset + 5] = along;
+};
+var fillAntialiasSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  animatedPoint
+}) => {
+  let offset = 0;
+  for (let i = 0; i < pointCount - 1; i += 1) {
+    const start = getSeriesPoint(visiblePoints, animatedPoint, i);
+    const end = getSeriesPoint(visiblePoints, animatedPoint, i + 1);
+    writeAntialiasVertex(vertices, offset, start, end, -1, 0);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, 1, 0);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, -1, 1);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, -1, 1);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, 1, 0);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, 1, 1);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+  }
+  return offset / AA_VERTEX_FLOAT_STRIDE;
+};
+var lowerBound2 = (array, value) => {
+  let lo = 0;
+  let hi = array.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (array[mid] < value) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+};
+var getNearestPointIndex = (xValues, xValue) => {
+  if (!xValues.length) return -1;
+  const nextIndex = lowerBound2(xValues, xValue);
+  if (nextIndex <= 0) return 0;
+  if (nextIndex >= xValues.length) return xValues.length - 1;
+  const previousIndex = nextIndex - 1;
+  return Math.abs(xValues[nextIndex] - xValue) < Math.abs(xValue - xValues[previousIndex]) ? nextIndex : previousIndex;
+};
+var getChartXBounds = (chart) => {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  chart.series.forEach((series) => {
+    if (series.length === 0) return;
+    minX = Math.min(minX, series.rawX[0]);
+    maxX = Math.max(maxX, series.rawX[series.length - 1]);
+  });
+  return { minX, maxX };
+};
+var getOrderedSeries = (chart, seriesOrderByChart) => {
+  const series = Array.isArray(chart?.series) ? chart.series : [];
+  const order = seriesOrderByChart?.[chart?.id];
+  if (!Array.isArray(order) || order.length !== series.length) {
+    return series;
+  }
+  const used = /* @__PURE__ */ new Set();
+  const ordered = [];
+  order.forEach((seriesIndex) => {
+    if (!Number.isInteger(seriesIndex)) return;
+    if (seriesIndex < 0 || seriesIndex >= series.length) return;
+    if (used.has(seriesIndex)) return;
+    used.add(seriesIndex);
+    ordered.push(series[seriesIndex]);
+  });
+  if (ordered.length !== series.length) return series;
+  return ordered;
+};
+var normalizeMovingAverage = (movingAverage) => {
+  if (!movingAverage?.enabled) return null;
+  return {
+    enabled: true,
+    period: Number.isFinite(Number(movingAverage.period)) ? Math.max(1, Math.round(Number(movingAverage.period))) : 21,
+    type: movingAverage.type === "sma" ? "sma" : "ema"
+  };
+};
+var getMovingAverageCacheKey = (series, movingAverage) => `${series.id}::ma:${movingAverage.type}:${movingAverage.period}`;
+var calculateMovingAverageChunk = ({
+  sourceY,
+  startIndex,
+  period,
+  type,
+  previousAverage
+}) => {
+  const out = new Float32Array(Math.max(0, sourceY.length - startIndex));
+  if (out.length === 0) return out;
+  if (type === "sma") {
+    let sum = 0;
+    const firstWindowStart = Math.max(0, startIndex - period + 1);
+    for (let i = firstWindowStart; i < startIndex; i += 1) {
+      sum += sourceY[i];
+    }
+    for (let sourceIndex = startIndex; sourceIndex < sourceY.length; sourceIndex += 1) {
+      sum += sourceY[sourceIndex];
+      const removeIndex = sourceIndex - period;
+      if (removeIndex >= firstWindowStart) {
+        sum -= sourceY[removeIndex];
+      }
+      const safePeriod = Math.min(period, sourceIndex + 1);
+      out[sourceIndex - startIndex] = sum / safePeriod;
+    }
+    return out;
+  }
+  const multiplier = 2 / (period + 1);
+  let prev = Number.isFinite(previousAverage) ? previousAverage : sourceY[startIndex];
+  for (let sourceIndex = startIndex; sourceIndex < sourceY.length; sourceIndex += 1) {
+    prev = sourceY[sourceIndex] * multiplier + prev * (1 - multiplier);
+    out[sourceIndex - startIndex] = prev;
+  }
+  return out;
+};
+var getMovingAverageSeriesForChart = ({
+  chart,
+  movingAverage,
+  cache
+}) => {
+  const normalized = normalizeMovingAverage(movingAverage);
+  if (!normalized || !cache) return [];
+  return chart.series.map((series) => {
+    if (series.length === 0) return null;
+    const cacheKey = getMovingAverageCacheKey(series, normalized);
+    const cached = cache.get(cacheKey);
+    if (cached && cached.sourceSeries === series && cached.sourceLength <= series.length) {
+      const appendStart = cached.sourceLength;
+      if (appendStart < series.length) {
+        const appendedY = calculateMovingAverageChunk({
+          sourceY: series.rawY.subarray(0, series.length),
+          startIndex: appendStart,
+          period: normalized.period,
+          type: normalized.type,
+          previousAverage: appendStart > 0 ? cached.series.rawY[appendStart - 1] : void 0
+        });
+        cached.series.append(
+          series.rawX.subarray(appendStart, series.length),
+          appendedY
+        );
+        cached.sourceLength = series.length;
+      }
+      cached.series.color = series.color;
+      cached.series.name = `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`;
+      return cached.series;
+    }
+    const y = calculateMovingAverageChunk({
+      sourceY: series.rawY.subarray(0, series.length),
+      startIndex: 0,
+      period: normalized.period,
+      type: normalized.type
+    });
+    const maSeries = createSeries({
+      id: cacheKey,
+      name: `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`,
+      color: series.color,
+      x: series.rawX.subarray(0, series.length),
+      y
+    });
+    cache.set(cacheKey, {
+      sourceSeries: series,
+      sourceLength: series.length,
+      series: maSeries
+    });
+    return maSeries;
+  }).filter(Boolean);
+};
+var getInitialView = (chart, initialVisiblePoints = null) => {
+  const { minX, maxX } = getChartXBounds(chart);
+  if (!Number.isFinite(minX) || !Number.isFinite(maxX)) {
+    return { xMin: 0, xMax: 1 };
+  }
+  if (minX === maxX) {
+    const span2 = Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0 ? Math.max(10, initialVisiblePoints) : 10;
+    const rightPadding2 = span2 * JUMP_LATEST_RIGHT_PADDING_RATIO;
+    const nextMax = maxX + rightPadding2;
+    return { xMin: nextMax - span2, xMax: nextMax };
+  }
+  let span = maxX - minX;
+  if (Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0) {
+    span = Math.min(span, initialVisiblePoints);
+    const rightPadding2 = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+    const nextMax = maxX + rightPadding2;
+    return { xMin: nextMax - span, xMax: nextMax };
+  }
+  const rightPadding = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+  return { xMin: minX, xMax: maxX + rightPadding };
+};
+var getYRange = (chart, xMin, xMax, width) => {
+  let minY = Infinity;
+  let maxY = -Infinity;
+  let renderedPoints = 0;
+  let bucketSize = 1;
+  chart.series.forEach((series) => {
+    const visible = series.getVisiblePoints(xMin, xMax, width);
+    renderedPoints += visible.pointCount;
+    bucketSize = Math.max(bucketSize, visible.bucketSize);
+    for (let i = 0; i < visible.y.length; i += 1) {
+      const value = visible.y[i];
+      if (value < minY) minY = value;
+      if (value > maxY) maxY = value;
+    }
+  });
+  if (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
+    return { minY: 0, maxY: 1, renderedPoints, bucketSize };
+  }
+  const fixedMinY = Number(chart.yRange?.min);
+  const fixedMaxY = Number(chart.yRange?.max);
+  if (Number.isFinite(fixedMinY) && Number.isFinite(fixedMaxY) && fixedMinY < fixedMaxY) {
+    return { minY: fixedMinY, maxY: fixedMaxY, renderedPoints, bucketSize };
+  }
+  if (minY === maxY) {
+    minY -= 1;
+    maxY += 1;
+  }
+  const pad = (maxY - minY) * 0.08;
+  return { minY: minY - pad, maxY: maxY + pad, renderedPoints, bucketSize };
+};
+var applyYScale = (yRange, scale = 1, centerOffset = 0) => {
+  const clampedScale = Math.min(Y_SCALE_MAX, Math.max(Y_SCALE_MIN, scale));
+  const center = (yRange.minY + yRange.maxY) / 2 + centerOffset;
+  const halfRange = (yRange.maxY - yRange.minY) * clampedScale / 2;
+  return {
+    ...yRange,
+    minY: center - halfRange,
+    maxY: center + halfRange
+  };
+};
+var trimFormattedNumber = (value) => value.replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+var formatNumber = (value) => {
+  if (!Number.isFinite(value)) return "";
+  const abs = Math.abs(value);
+  if (abs !== 0 && abs < 1e-4) return value.toExponential(2);
+  if (abs < 1) return trimFormattedNumber(value.toPrecision(5));
+  if (abs >= 1e5) return value.toFixed(0);
+  if (abs >= 1e3) return trimFormattedNumber(value.toFixed(1));
+  if (abs >= 10) return trimFormattedNumber(value.toFixed(2));
+  return trimFormattedNumber(value.toFixed(4));
+};
+var formatCompactNumber = (value) => {
+  if (!Number.isFinite(value)) return "";
+  const abs = Math.abs(value);
+  if (abs >= 1e9) return `${(value / 1e9).toFixed(abs >= 1e10 ? 0 : 1)}B`;
+  if (abs >= 1e6) return `${(value / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
+  if (abs >= 1e3) return `${(value / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}k`;
+  return formatNumber(value);
+};
+var normalizeRect = (start, end) => {
+  if (!start || !end) return null;
+  const left = Math.min(start.x, end.x);
+  const top = Math.min(start.y, end.y);
+  return {
+    left,
+    top,
+    width: Math.abs(end.x - start.x),
+    height: Math.abs(end.y - start.y)
+  };
+};
+var clampPointToPlot = (point, plot) => ({
+  x: Math.min(plot.x + plot.width, Math.max(plot.x, point.x)),
+  y: Math.min(plot.y + plot.height, Math.max(plot.y, point.y))
+});
+var applyRectangleZoom = ({
+  chart,
+  plot,
+  start,
+  end,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  yManualScaleRef
+}) => {
+  const clampedStart = clampPointToPlot(start, plot);
+  const clampedEnd = clampPointToPlot(end, plot);
+  const rect = normalizeRect(clampedStart, clampedEnd);
+  if (!rect || rect.width < 6 || rect.height < 6) return false;
+  const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+  const currentYRange = applyYScale(
+    getYRange(chart, state.xMin, state.xMax, plot.width),
+    yScaleRef.current.get(chart.id) ?? 1,
+    yCenterOffsetRef.current.get(chart.id) ?? 0
+  );
+  const leftRatio = (rect.left - plot.x) / plot.width;
+  const rightRatio = (rect.left + rect.width - plot.x) / plot.width;
+  const topRatio = (rect.top - plot.y) / plot.height;
+  const bottomRatio = (rect.top + rect.height - plot.y) / plot.height;
+  const nextMin = state.xMin + leftRatio * (state.xMax - state.xMin);
+  const nextMax = state.xMin + rightRatio * (state.xMax - state.xMin);
+  if (nextMax - nextMin < X_SCALE_MIN_SPAN) return false;
+  const selectedMaxY = currentYRange.maxY - topRatio * (currentYRange.maxY - currentYRange.minY);
+  const selectedMinY = currentYRange.maxY - bottomRatio * (currentYRange.maxY - currentYRange.minY);
+  const selectedSpan = selectedMaxY - selectedMinY;
+  if (!Number.isFinite(selectedSpan) || selectedSpan <= 0) return false;
+  viewStateRef.current.set(chart.id, { xMin: nextMin, xMax: nextMax });
+  const baseYRange = getYRange(chart, nextMin, nextMax, plot.width);
+  const baseSpan = baseYRange.maxY - baseYRange.minY;
+  if (Number.isFinite(baseSpan) && baseSpan > 0) {
+    const selectedCenter = (selectedMinY + selectedMaxY) / 2;
+    const baseCenter = (baseYRange.minY + baseYRange.maxY) / 2;
+    const nextScale = Math.min(
+      Y_SCALE_MAX,
+      Math.max(Y_SCALE_MIN, selectedSpan / baseSpan)
+    );
+    yScaleRef.current.set(chart.id, nextScale);
+    yCenterOffsetRef.current.set(chart.id, selectedCenter - baseCenter);
+    yManualScaleRef.current.add(chart.id);
+  }
+  return true;
+};
+var getChartState = (chart, initialVisiblePoints, viewStateRef) => viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+var getScaledYRangeForLayout = ({
+  chart,
+  state,
+  plot,
+  yScaleRef,
+  yCenterOffsetRef
+}) => applyYScale(
+  getYRange(chart, state.xMin, state.xMax, plot.width),
+  yScaleRef.current.get(chart.id) ?? 1,
+  yCenterOffsetRef.current.get(chart.id) ?? 0
+);
+var screenPointToDataPoint = ({
+  point,
+  chart,
+  plot,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef
+}) => {
+  const state = getChartState(chart, initialVisiblePoints, viewStateRef);
+  const yRange = getScaledYRangeForLayout({
+    chart,
+    state,
+    plot,
+    yScaleRef,
+    yCenterOffsetRef
+  });
+  const xRatio = (point.x - plot.x) / plot.width;
+  const yRatio = (point.y - plot.y) / plot.height;
+  return {
+    x: state.xMin + xRatio * (state.xMax - state.xMin),
+    y: yRange.maxY - yRatio * (yRange.maxY - yRange.minY)
+  };
+};
+var dataPointToScreenPoint = ({ point, state, yRange, plot }) => {
+  const xRatio = (point.x - state.xMin) / (state.xMax - state.xMin);
+  const yRatio = (yRange.maxY - point.y) / (yRange.maxY - yRange.minY);
+  return {
+    x: plot.x + xRatio * plot.width,
+    y: plot.y + yRatio * plot.height
+  };
+};
+var createAxisOverlay = ({
+  chart,
+  plot,
+  state,
+  yRange,
+  seriesEndpoints,
+  seriesOrderByChart = {}
+}) => {
+  const { maxX } = getChartXBounds(chart);
+  const ticks = Array.from({ length: Y_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = Y_AXIS_TICK_COUNT === 1 ? 0 : index / (Y_AXIS_TICK_COUNT - 1);
+    const value = yRange.maxY - ratio * (yRange.maxY - yRange.minY);
+    return {
+      id: `${chart.id}-tick-${index}`,
+      value,
+      top: ratio * plot.height
+    };
+  });
+  const xTicks = Array.from({ length: X_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = X_AXIS_TICK_COUNT === 1 ? 0 : index / (X_AXIS_TICK_COUNT - 1);
+    return {
+      id: `${chart.id}-x-tick-${index}`,
+      value: state.xMin + ratio * (state.xMax - state.xMin),
+      left: 18 + ratio * Math.max(1, plot.width - 36)
+    };
+  });
+  const latestValues = getOrderedSeries(chart, seriesOrderByChart).map((series) => {
+    if (series.length === 0) return null;
+    const value = series.rawY[series.length - 1];
+    const x = series.rawX[series.length - 1];
+    const endpoint = seriesEndpoints.get(series.id) || { x, y: value };
+    const ratio = (yRange.maxY - endpoint.y) / (yRange.maxY - yRange.minY);
+    const xRatio = (endpoint.x - state.xMin) / (state.xMax - state.xMin);
+    return {
+      id: series.id,
+      color: series.color,
+      textColor: getSeriesLabelTextColor(series),
+      value: endpoint.y,
+      rawValue: value,
+      x,
+      left: xRatio * plot.width,
+      top: ratio * plot.height
+    };
+  }).filter(
+    (value) => value && Number.isFinite(value.top) && value.top >= -10 && value.top <= plot.height + 10
+  );
+  return {
+    ticks,
+    xTicks,
+    latestValues,
+    plotWidth: plot.width,
+    showJumpLatest: Number.isFinite(maxX) && (maxX < state.xMin || maxX > state.xMax)
+  };
+};
+var drawChartLayouts = ({
+  canvas,
+  width,
+  height,
+  gl,
+  program,
+  antialiasProgram,
+  antialiasLines = false,
+  layouts,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  seriesBufferCache,
+  antialiasSeriesBufferCache,
+  initialVisiblePoints,
+  getAppendAnimatedPoint,
+  movingAverageByChart = EMPTY_OBJECT,
+  movingAverageCache,
+  seriesOrderByChart = EMPTY_OBJECT
+}) => {
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  const pixelWidth = Math.max(1, Math.floor(width * dpr));
+  const pixelHeight = Math.max(1, Math.floor(height * dpr));
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+  }
+  gl.viewport(0, 0, pixelWidth, pixelHeight);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  const activeAntialiasLines = antialiasLines && antialiasProgram;
+  const activeProgram = activeAntialiasLines ? antialiasProgram : program;
+  gl.useProgram(activeProgram);
+  const uResolution = gl.getUniformLocation(activeProgram, "u_resolution");
+  const uRect = gl.getUniformLocation(activeProgram, "u_rect");
+  const uXRange = gl.getUniformLocation(activeProgram, "u_xRange");
+  const uYRange = gl.getUniformLocation(activeProgram, "u_yRange");
+  const uColor = gl.getUniformLocation(activeProgram, "u_color");
+  let aXy = -1;
+  let aStart = -1;
+  let aEnd = -1;
+  let aSide = -1;
+  let aAlong = -1;
+  let uLineHalfWidth = null;
+  let uEdgeWidth = null;
+  if (activeAntialiasLines) {
+    aStart = gl.getAttribLocation(activeProgram, "a_start");
+    aEnd = gl.getAttribLocation(activeProgram, "a_end");
+    aSide = gl.getAttribLocation(activeProgram, "a_side");
+    aAlong = gl.getAttribLocation(activeProgram, "a_along");
+    uLineHalfWidth = gl.getUniformLocation(activeProgram, "u_lineHalfWidth");
+    uEdgeWidth = gl.getUniformLocation(activeProgram, "u_edgeWidth");
+    gl.enableVertexAttribArray(aStart);
+    gl.enableVertexAttribArray(aEnd);
+    gl.enableVertexAttribArray(aSide);
+    gl.enableVertexAttribArray(aAlong);
+    gl.uniform1f(uLineHalfWidth, AA_LINE_WIDTH_PX * dpr / 2);
+    gl.uniform1f(uEdgeWidth, AA_EDGE_WIDTH_PX * dpr);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  } else {
+    aXy = gl.getAttribLocation(activeProgram, "a_xy");
+    gl.enableVertexAttribArray(aXy);
+    gl.disable(gl.BLEND);
+  }
+  gl.uniform2f(uResolution, pixelWidth, pixelHeight);
+  const now = performance.now();
+  const nextAxisOverlays = {};
+  layouts.forEach(({ chart, plot, visible }) => {
+    if (!visible) return;
+    if (activeAntialiasLines) {
+      gl.useProgram(activeProgram);
+      gl.uniform2f(uResolution, pixelWidth, pixelHeight);
+    }
+    const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+    const scaledPlot = {
+      x: plot.x * dpr,
+      y: plot.y * dpr,
+      width: plot.width * dpr,
+      height: plot.height * dpr
+    };
+    const yRange = applyYScale(
+      getYRange(chart, state.xMin, state.xMax, plot.width),
+      yScaleRef.current.get(chart.id) ?? 1,
+      yCenterOffsetRef.current.get(chart.id) ?? 0
+    );
+    const seriesEndpoints = /* @__PURE__ */ new Map();
+    const chartMovingAverage = movingAverageByChart?.[chart.id];
+    const hideBaseSeries = Boolean(chartMovingAverage?.enabled) && Boolean(chartMovingAverage?.hideBase);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(
+      Math.floor(scaledPlot.x),
+      Math.floor(pixelHeight - scaledPlot.y - scaledPlot.height),
+      Math.ceil(scaledPlot.width),
+      Math.ceil(scaledPlot.height)
+    );
+    gl.uniform4f(
+      uRect,
+      scaledPlot.x,
+      scaledPlot.y,
+      scaledPlot.width,
+      scaledPlot.height
+    );
+    gl.uniform2f(uXRange, state.xMin, state.xMax);
+    gl.uniform2f(uYRange, yRange.minY, yRange.maxY);
+    if (!hideBaseSeries) getOrderedSeries(chart, seriesOrderByChart).forEach((series) => {
+      let visiblePoints = series.getVisiblePoints(
+        state.xMin,
+        state.xMax,
+        plot.width
+      );
+      let singlePointEndpoint = null;
+      if (visiblePoints.pointCount < 2) {
+        const singlePointSegment = getSinglePointSegment({
+          series,
+          state,
+          yRange,
+          plot
+        });
+        if (!singlePointSegment) return;
+        visiblePoints = singlePointSegment;
+        singlePointEndpoint = singlePointSegment.endpoint;
+      }
+      const animatedPoint = singlePointEndpoint ? null : getAppendAnimatedPoint({
+        seriesId: series.id,
+        visiblePoints,
+        now
+      });
+      const pointCount = animatedPoint?.pointCount ?? visiblePoints.pointCount;
+      if (animatedPoint) {
+        seriesEndpoints.set(series.id, {
+          x: animatedPoint.x,
+          y: animatedPoint.y
+        });
+      } else if (singlePointEndpoint) {
+        seriesEndpoints.set(series.id, singlePointEndpoint);
+      }
+      const [r, g, b] = hexToRgb(series.color);
+      gl.uniform3f(uColor, r, g, b);
+      if (activeAntialiasLines) {
+        const bufferEntry2 = getAntialiasSeriesBuffer(
+          gl,
+          antialiasSeriesBufferCache,
+          series.id,
+          pointCount
+        );
+        const drawVertexCount = fillAntialiasSeriesSegments({
+          vertices: bufferEntry2.vertices,
+          visiblePoints,
+          pointCount,
+          animatedPoint
+        });
+        const stride = AA_VERTEX_FLOAT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry2.buffer);
+        gl.vertexAttribPointer(aStart, 2, gl.FLOAT, false, stride, 0);
+        gl.vertexAttribPointer(
+          aEnd,
+          2,
+          gl.FLOAT,
+          false,
+          stride,
+          2 * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.vertexAttribPointer(
+          aSide,
+          1,
+          gl.FLOAT,
+          false,
+          stride,
+          4 * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.vertexAttribPointer(
+          aAlong,
+          1,
+          gl.FLOAT,
+          false,
+          stride,
+          5 * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.bufferSubData(
+          gl.ARRAY_BUFFER,
+          0,
+          bufferEntry2.vertices,
+          0,
+          drawVertexCount * AA_VERTEX_FLOAT_STRIDE
+        );
+        gl.drawArrays(gl.TRIANGLES, 0, drawVertexCount);
+        return;
+      }
+      const bufferEntry = getSeriesBuffer(
+        gl,
+        seriesBufferCache,
+        series.id,
+        pointCount
+      );
+      fillSeriesPoints({
+        vertices: bufferEntry.vertices,
+        visiblePoints,
+        pointCount,
+        animatedPoint
+      });
+      gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
+      gl.vertexAttribPointer(aXy, 2, gl.FLOAT, false, 0, 0);
+      gl.bufferSubData(
+        gl.ARRAY_BUFFER,
+        0,
+        bufferEntry.vertices,
+        0,
+        pointCount * 2
+      );
+      gl.drawArrays(gl.LINE_STRIP, 0, pointCount);
+    });
+    const movingAverageSeries = getMovingAverageSeriesForChart({
+      chart,
+      movingAverage: chartMovingAverage,
+      cache: movingAverageCache
+    });
+    const orderedMovingAverageSeries = getOrderedSeries(
+      { ...chart, series: movingAverageSeries },
+      seriesOrderByChart
+    );
+    let maAXy = aXy;
+    let maUColor = uColor;
+    if (movingAverageSeries.length > 0 && activeAntialiasLines) {
+      gl.useProgram(program);
+      const maUResolution = gl.getUniformLocation(program, "u_resolution");
+      const maURect = gl.getUniformLocation(program, "u_rect");
+      const maUXRange = gl.getUniformLocation(program, "u_xRange");
+      const maUYRange = gl.getUniformLocation(program, "u_yRange");
+      maUColor = gl.getUniformLocation(program, "u_color");
+      maAXy = gl.getAttribLocation(program, "a_xy");
+      gl.enableVertexAttribArray(maAXy);
+      gl.uniform2f(maUResolution, pixelWidth, pixelHeight);
+      gl.uniform4f(
+        maURect,
+        scaledPlot.x,
+        scaledPlot.y,
+        scaledPlot.width,
+        scaledPlot.height
+      );
+      gl.uniform2f(maUXRange, state.xMin, state.xMax);
+      gl.uniform2f(maUYRange, yRange.minY, yRange.maxY);
+    }
+    orderedMovingAverageSeries.forEach((series) => {
+      const visiblePoints = series.getVisiblePoints(
+        state.xMin,
+        state.xMax,
+        plot.width
+      );
+      if (visiblePoints.pointCount < 2) return;
+      const pointCount = visiblePoints.pointCount;
+      const [r, g, b] = hexToRgb(series.color);
+      gl.uniform3f(maUColor, r, g, b);
+      const bufferEntry = getSeriesBuffer(
+        gl,
+        seriesBufferCache,
+        series.id,
+        pointCount * 8
+      );
+      const drawVertexCount = fillDashedSeriesSegments({
+        vertices: bufferEntry.vertices,
+        visiblePoints,
+        pointCount,
+        state,
+        yRange,
+        plot
+      });
+      if (drawVertexCount < 2) return;
+      gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
+      gl.vertexAttribPointer(maAXy, 2, gl.FLOAT, false, 0, 0);
+      gl.bufferSubData(
+        gl.ARRAY_BUFFER,
+        0,
+        bufferEntry.vertices,
+        0,
+        drawVertexCount * 2
+      );
+      gl.drawArrays(gl.LINES, 0, drawVertexCount);
+    });
+    nextAxisOverlays[chart.id] = createAxisOverlay({
+      chart,
+      plot,
+      state,
+      yRange,
+      seriesEndpoints,
+      seriesOrderByChart
+    });
+    gl.disable(gl.SCISSOR_TEST);
+  });
+  if (activeAntialiasLines) {
+    gl.disable(gl.BLEND);
+  }
+  return nextAxisOverlays;
+};
+
+// src/vanilla/createChartGrid.js
+var BASE_ROOT_CLASSES = ["aliencharts-root", "relative", "h-full", "overflow-y-auto"];
+var EMPTY_OBJECT2 = Object.freeze({});
+var DEFAULT_OPTIONS = Object.freeze({
+  charts: [],
+  columns: 2,
+  initialVisiblePoints: null,
+  backgroundColor: DEFAULT_CHART_BACKGROUND,
+  antialiasLines: false,
+  gridLines: false,
+  showToolbar: true,
+  showLatestValueLine: true,
+  showTooltips: true,
+  followLatest: false,
+  followVisibleLatest: true,
+  xAxisLabel: "STEP",
+  disableDrawings: false,
+  seriesOrderByChart: EMPTY_OBJECT2,
+  topMarkers: [],
+  formatXTick: formatCompactNumber,
+  formatXValue: formatNumber,
+  formatYValue: formatNumber
+});
+var APPEND_ANIMATION = Object.freeze({
+  durationMs: 300,
+  maxBucketSize: 64,
+  maxRevealPoints: 100
+});
+var escapeHtml = (value) => String(value ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+var withAlpha = (color, alpha) => {
+  const value = String(color || DEFAULT_CHART_BACKGROUND).trim();
+  const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(value);
+  if (!match) return value;
+  return `rgba(${Number.parseInt(match[1], 16)}, ${Number.parseInt(match[2], 16)}, ${Number.parseInt(match[3], 16)}, ${alpha})`;
+};
+var getTextColor = (color) => {
+  const value = String(color || "#38bdf8").replace("#", "");
+  const normalized = value.length === 3 ? value.split("").map((part) => part + part).join("") : value.padEnd(6, "0").slice(0, 6);
+  const number = Number.parseInt(normalized, 16);
+  const rgb = [16, 8, 0].map((shift) => (number >> shift & 255) / 255);
+  const linear = rgb.map((part) => part <= 0.03928 ? part / 12.92 : ((part + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2] > 0.45 ? "#111827" : "#ffffff";
+};
+var hasOwn = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var toolbarButton = ({ action, title, icon, hotkey = "", active = false, className = "" }) => `
+  <button type="button" data-action="${action}" title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}"
+    class="relative inline-flex size-6 items-center justify-center rounded-sm text-foreground hover:bg-accent hover:text-accent-foreground ${active ? "bg-primary/15 text-primary ring-1 ring-primary/40" : ""} ${className}">
+    ${icon}
+    ${hotkey ? `<span class="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 text-[10px] font-semibold leading-none text-foreground/50">${hotkey}</span>` : ""}
+  </button>`;
+var chartCellHtml = (chart, index, backgroundColor) => `
+  <div data-chart-index="${index}" class="relative select-none overflow-hidden rounded-sm" style="height:${CHART_HEIGHT}px;background-color:${escapeHtml(backgroundColor)}">
+    <div class="pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center px-2 backdrop-blur" data-header>
+      <div class="flex min-w-0 items-center gap-1 rounded-sm px-1 text-sm font-semibold text-foreground" data-title-wrap>
+        ${chart.pinned ? iconSvg("pushPinSimple", { size: 14, className: "shrink-0 text-foreground/80" }) : ""}
+        <span class="truncate">${escapeHtml(chart.title)}</span>
+      </div>
+    </div>
+    <div data-grid-lines class="pointer-events-none absolute text-border/40"></div>
+    <div data-latest-lines></div>
+    <div data-y-axis class="absolute right-0 z-20" style="top:${PLOT_PADDING.top}px;bottom:${PLOT_PADDING.bottom}px;width:${RIGHT_AXIS_WIDTH}px;cursor:ns-resize"></div>
+    <div data-x-axis class="absolute bottom-0 z-20" style="left:${PLOT_PADDING.left}px;right:${RIGHT_AXIS_WIDTH}px;height:${PLOT_PADDING.bottom}px;cursor:ew-resize"></div>
+    <div data-toolbar></div>
+  </div>`;
+var makeSurface = (canvas, gl) => ({
+  canvas,
+  gl,
+  program: createProgram(gl),
+  antialiasProgram: createAntialiasProgram(gl),
+  seriesBuffers: createSeriesBufferCache(),
+  antialiasBuffers: createSeriesBufferCache(),
+  movingAverageCache: /* @__PURE__ */ new Map()
+});
+var destroySurface = (surface) => {
+  if (!surface) return;
+  deleteSeriesBuffers(surface.gl, surface.seriesBuffers);
+  deleteSeriesBuffers(surface.gl, surface.antialiasBuffers);
+  surface.gl.deleteProgram(surface.program);
+  surface.gl.deleteProgram(surface.antialiasProgram);
+  surface.gl.getExtension("WEBGL_lose_context")?.loseContext();
+};
+var AppendAnimator = class {
+  constructor(requestRender) {
+    this.requestRender = requestRender;
+    this.latest = /* @__PURE__ */ new Map();
+    this.animations = /* @__PURE__ */ new Map();
+    this.frame = null;
+  }
+  scan(charts) {
+    const now = performance.now();
+    charts.forEach((chart) => chart.series.forEach((series) => {
+      if (!series.length) return;
+      const next = {
+        x: series.rawX[series.length - 1],
+        y: series.rawY[series.length - 1],
+        length: series.length
+      };
+      const previous = this.latest.get(series.id);
+      if (previous && next.x > previous.x) {
+        this.animations.set(series.id, {
+          fromX: previous.x,
+          fromY: previous.y,
+          toX: next.x,
+          toY: next.y,
+          appendedCount: next.length - previous.length,
+          startedAt: now,
+          duration: APPEND_ANIMATION.durationMs
+        });
+      }
+      this.latest.set(series.id, next);
+    }));
+    if (this.animations.size) this.start();
+  }
+  start() {
+    if (this.frame != null) return;
+    const tick = () => {
+      const now = performance.now();
+      this.animations.forEach((animation, id) => {
+        if (now - animation.startedAt >= animation.duration) this.animations.delete(id);
+      });
+      this.requestRender();
+      this.frame = this.animations.size ? requestAnimationFrame(tick) : null;
+    };
+    this.frame = requestAnimationFrame(tick);
+  }
+  getPoint({ seriesId, visiblePoints, now }) {
+    if (visiblePoints.bucketSize > APPEND_ANIMATION.maxBucketSize) return null;
+    const animation = this.animations.get(seriesId);
+    if (!animation || visiblePoints.x[0] > animation.fromX || visiblePoints.x[visiblePoints.pointCount - 1] < animation.toX) return null;
+    let stableCount = 0;
+    while (stableCount < visiblePoints.pointCount && visiblePoints.x[stableCount] <= animation.fromX) stableCount += 1;
+    if (!stableCount) return null;
+    const rawProgress = clamp((now - animation.startedAt) / animation.duration, 0, 1);
+    const progress = 1 - (1 - rawProgress) ** 2;
+    if (animation.appendedCount > APPEND_ANIMATION.maxRevealPoints) {
+      return {
+        index: stableCount,
+        pointCount: stableCount + 1,
+        x: animation.fromX + (animation.toX - animation.fromX) * progress,
+        y: animation.fromY + (animation.toY - animation.fromY) * progress
+      };
+    }
+    const appendedCount = visiblePoints.pointCount - stableCount;
+    const position = progress * appendedCount;
+    const revealed = Math.min(appendedCount, Math.floor(position));
+    const nextIndex = Math.min(visiblePoints.pointCount - 1, stableCount + revealed);
+    const previousIndex = Math.max(stableCount - 1, nextIndex - 1);
+    const partial = position - revealed;
+    const partialPoint = revealed < appendedCount;
+    return {
+      index: nextIndex,
+      pointCount: Math.min(visiblePoints.pointCount, nextIndex + 1),
+      x: partialPoint ? visiblePoints.x[previousIndex] + (visiblePoints.x[nextIndex] - visiblePoints.x[previousIndex]) * partial : visiblePoints.x[nextIndex],
+      y: partialPoint ? visiblePoints.y[previousIndex] + (visiblePoints.y[nextIndex] - visiblePoints.y[previousIndex]) * partial : visiblePoints.y[nextIndex]
+    };
+  }
+  destroy() {
+    if (this.frame != null) cancelAnimationFrame(this.frame);
+    this.frame = null;
+    this.animations.clear();
+  }
+};
+var ChartGridController = class {
+  constructor(container, options) {
+    if (!(container instanceof HTMLElement)) throw new TypeError("createChartGrid requires an HTMLElement target");
+    this.container = container;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    if (!Array.isArray(this.options.charts)) throw new TypeError("charts must be an array");
+    this.destroyed = false;
+    this.frame = null;
+    this.structureDirty = true;
+    this.focusedChartId = null;
+    this.fullscreenChartId = null;
+    this.rectangleZoomChartId = null;
+    this.rectangleZoomRect = null;
+    this.crosshair = null;
+    this.drag = null;
+    this.draftDrawing = null;
+    this.drawingSession = null;
+    this.drawings = Array.isArray(options.drawings) ? [...options.drawings] : [];
+    this.activeDrawingTool = options.activeDrawingTool ?? null;
+    this.selectedDrawingId = options.selectedDrawingId ?? null;
+    this.movingAverageByChart = { ...options.movingAverageByChart || {} };
+    this.viewStates = /* @__PURE__ */ new Map();
+    this.yScales = /* @__PURE__ */ new Map();
+    this.yOffsets = /* @__PURE__ */ new Map();
+    this.latestX = /* @__PURE__ */ new Map();
+    this.axisOverlays = {};
+    this.layouts = [];
+    this.fullscreenLayouts = [];
+    this.addedClasses = BASE_ROOT_CLASSES.filter((name) => !container.classList.contains(name));
+    BASE_ROOT_CLASSES.forEach((name) => container.classList.add(name));
+    this.canvas = document.createElement("canvas");
+    this.canvas.className = "pointer-events-none absolute left-0 top-0 z-10 block";
+    this.grid = document.createElement("div");
+    this.grid.className = "relative z-0 grid gap-1 pt-1";
+    this.overlays = document.createElement("div");
+    this.overlays.className = "pointer-events-none absolute left-0 top-0 z-20";
+    this.overlays.style.width = "100%";
+    container.append(this.canvas, this.grid, this.overlays);
+    const gl = this.canvas.getContext("webgl2", { antialias: true, alpha: true, depth: false, stencil: false });
+    if (!gl) {
+      this.cleanupDom();
+      throw new Error("AlienCharts requires WebGL2 support");
+    }
+    this.surface = makeSurface(this.canvas, gl);
+    this.fullscreenSurface = null;
+    this.animator = new AppendAnimator(() => this.requestRender());
+    this.animator.scan(this.options.charts);
+    this.bound = {
+      click: (event) => this.handleClick(event),
+      input: (event) => this.handleInput(event),
+      change: (event) => this.handleInput(event),
+      pointerdown: (event) => this.handlePointerDown(event),
+      pointermove: (event) => this.handlePointerMove(event),
+      pointerup: (event) => this.handlePointerUp(event),
+      pointerleave: () => this.clearCrosshair(),
+      contextmenu: (event) => this.handleContextMenu(event),
+      wheel: (event) => this.handleWheel(event),
+      scroll: () => this.requestRender(),
+      keydown: (event) => this.handleKeyDown(event)
+    };
+    Object.entries(this.bound).forEach(([name, handler]) => {
+      const target = name === "keydown" ? window : container;
+      target.addEventListener(name, handler, name === "wheel" ? { passive: false } : void 0);
+    });
+    this.resizeObserver = new ResizeObserver(() => this.requestRender());
+    this.resizeObserver.observe(container);
+    this.initializeChartState();
+    this.requestRender();
+  }
+  assertAlive() {
+    if (this.destroyed) throw new Error("AlienCharts controller has been destroyed");
+  }
+  initializeChartState() {
+    const ids = new Set(this.options.charts.map((chart) => chart.id));
+    [this.viewStates, this.yScales, this.yOffsets, this.latestX].forEach((map) => {
+      [...map.keys()].forEach((id) => {
+        if (!ids.has(id)) map.delete(id);
+      });
+    });
+    this.options.charts.forEach((chart) => {
+      if (!this.viewStates.has(chart.id)) this.viewStates.set(chart.id, getInitialView(chart, this.options.initialVisiblePoints));
+      if (!this.yScales.has(chart.id)) this.yScales.set(chart.id, 1);
+      if (!this.yOffsets.has(chart.id)) this.yOffsets.set(chart.id, 0);
+      if (!this.latestX.has(chart.id)) this.latestX.set(chart.id, getChartXBounds(chart).maxX);
+    });
+    if (this.focusedChartId && !ids.has(this.focusedChartId)) this.focusedChartId = null;
+    if (this.fullscreenChartId && !ids.has(this.fullscreenChartId)) this.closeFullscreen();
+  }
+  requestRender() {
+    if (this.destroyed || this.frame != null) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = null;
+      this.render();
+    });
+  }
+  setOptions(next) {
+    this.assertAlive();
+    if (!next || typeof next !== "object") return;
+    const previousCharts = this.options.charts;
+    const previousActiveDrawingTool = this.activeDrawingTool;
+    this.options = { ...this.options, ...next };
+    if (!Array.isArray(this.options.charts)) throw new TypeError("charts must be an array");
+    if (hasOwn(next, "drawings")) this.drawings = Array.isArray(next.drawings) ? [...next.drawings] : [];
+    if (hasOwn(next, "activeDrawingTool")) {
+      this.activeDrawingTool = next.activeDrawingTool ?? null;
+      if (this.activeDrawingTool !== previousActiveDrawingTool) {
+        this.draftDrawing = null;
+        this.drawingSession = null;
+      }
+    }
+    if (hasOwn(next, "selectedDrawingId")) this.selectedDrawingId = next.selectedDrawingId ?? null;
+    if (hasOwn(next, "movingAverageByChart")) this.movingAverageByChart = { ...next.movingAverageByChart || {} };
+    if (previousCharts !== this.options.charts || hasOwn(next, "columns") || hasOwn(next, "backgroundColor") || hasOwn(next, "gridLines")) this.structureDirty = true;
+    this.initializeChartState();
+    this.requestRender();
+  }
+  setCharts(charts) {
+    this.setOptions({ charts });
+  }
+  invalidate() {
+    this.assertAlive();
+    this.followAppendedData();
+    this.animator.scan(this.options.charts);
+    this.requestRender();
+  }
+  followAppendedData() {
+    this.options.charts.forEach((chart) => {
+      const previous = this.latestX.get(chart.id);
+      const next = getChartXBounds(chart).maxX;
+      if (Number.isFinite(previous) && Number.isFinite(next) && next !== previous) {
+        const state = this.viewStates.get(chart.id) || getInitialView(chart, this.options.initialVisiblePoints);
+        const span = state.xMax - state.xMin;
+        const nearEdge = previous >= state.xMax - span * 0.15 && previous >= state.xMin && previous <= state.xMax;
+        if (this.options.followLatest || this.options.followVisibleLatest && nearEdge) {
+          const delta = next - previous;
+          this.viewStates.set(chart.id, { xMin: state.xMin + delta, xMax: state.xMax + delta });
+        }
+      }
+      this.latestX.set(chart.id, next);
+    });
+  }
+  jumpToLatest(chartId) {
+    this.assertAlive();
+    this.options.charts.forEach((chart) => {
+      if (chartId != null && chart.id !== chartId) return;
+      const maxX = getChartXBounds(chart).maxX;
+      if (!Number.isFinite(maxX)) return;
+      const state = this.viewStates.get(chart.id) || getInitialView(chart, this.options.initialVisiblePoints);
+      const span = Math.max(10, state.xMax - state.xMin);
+      const nextMax = maxX + span * 0.1;
+      this.viewStates.set(chart.id, { xMin: nextMax - span, xMax: nextMax });
+    });
+    this.requestRender();
+  }
+  scrollToTop(options = {}) {
+    this.assertAlive();
+    this.container.scrollTo({ ...options, top: 0 });
+  }
+  renderStructure() {
+    this.grid.style.gridTemplateColumns = `repeat(${Math.max(1, Number(this.options.columns) || 1)}, minmax(18rem, 1fr))`;
+    this.grid.innerHTML = this.options.charts.map((chart, index) => chartCellHtml(chart, index, this.options.backgroundColor)).join("");
+    this.chartNodes = [...this.grid.querySelectorAll("[data-chart-index]")];
+    this.chartNodes.forEach((node) => {
+      node.querySelector("[data-header]").style.backgroundColor = withAlpha(this.options.backgroundColor, 0.82);
+    });
+    this.structureDirty = false;
+  }
+  getLayouts(fullscreen = false) {
+    const nodes = fullscreen ? this.fullscreenNode ? [this.fullscreenNode] : [] : this.chartNodes || [];
+    const charts = fullscreen ? this.options.charts.filter((chart) => chart.id === this.fullscreenChartId) : this.options.charts;
+    const host = fullscreen ? this.fullscreenOverlay : this.container;
+    const hostRect = host.getBoundingClientRect();
+    return nodes.map((node, index) => {
+      const rect = node.getBoundingClientRect();
+      const x = rect.left - hostRect.left + host.scrollLeft;
+      const y = rect.top - hostRect.top + host.scrollTop;
+      const chart = charts[index];
+      const layout = {
+        chart,
+        rect: { x, y, width: rect.width, height: rect.height },
+        plot: {
+          x: x + PLOT_PADDING.left,
+          y: y + PLOT_PADDING.top,
+          width: Math.max(1, rect.width - PLOT_PADDING.left - PLOT_PADDING.right),
+          height: Math.max(1, rect.height - PLOT_PADDING.top - PLOT_PADDING.bottom)
+        },
+        visible: fullscreen || rect.bottom >= hostRect.top && rect.top <= hostRect.bottom,
+        node,
+        fullscreen
+      };
+      return layout;
+    });
+  }
+  render() {
+    const focusState = this.captureControlFocus();
+    if (this.structureDirty) this.renderStructure();
+    this.layouts = this.getLayouts(false);
+    this.axisOverlays = this.drawSurface(this.surface, this.layouts, this.container.scrollWidth, this.container.scrollHeight);
+    this.updateCells(this.layouts, this.axisOverlays, false);
+    if (this.fullscreenChartId) {
+      this.fullscreenLayouts = this.getLayouts(true);
+      const axes = this.drawSurface(this.fullscreenSurface, this.fullscreenLayouts, this.fullscreenOverlay.clientWidth, this.fullscreenOverlay.clientHeight);
+      this.updateCells(this.fullscreenLayouts, axes, true);
+    }
+    this.renderOverlays();
+    this.restoreControlFocus(focusState);
+  }
+  captureControlFocus() {
+    const active = document.activeElement;
+    if (!(active instanceof HTMLInputElement)) return null;
+    const selector = active.matches("[data-moving-period]") ? "[data-moving-period]" : active.matches("[data-pin-text]") ? "[data-pin-text]" : active.matches("[data-drawing-color]") ? "[data-drawing-color]" : null;
+    if (!selector) return null;
+    const fullscreen = Boolean(active.closest("[data-aliencharts-fullscreen]"));
+    let selectionStart = null;
+    let selectionEnd = null;
+    if (active.type === "text") {
+      selectionStart = active.selectionStart;
+      selectionEnd = active.selectionEnd;
+    }
+    return { selector, fullscreen, selectionStart, selectionEnd };
+  }
+  restoreControlFocus(state) {
+    if (!state) return;
+    const host = state.fullscreen ? this.fullscreenOverlay : this.container;
+    const input = host?.querySelector(state.selector);
+    if (!(input instanceof HTMLInputElement)) return;
+    input.focus({ preventScroll: true });
+    if (input.type === "text" && state.selectionStart != null) {
+      input.setSelectionRange(state.selectionStart, state.selectionEnd);
+    }
+  }
+  drawSurface(surface, layouts, width, height) {
+    if (!surface) return {};
+    return drawChartLayouts({
+      canvas: surface.canvas,
+      width: Math.max(1, width),
+      height: Math.max(1, height),
+      gl: surface.gl,
+      program: surface.program,
+      antialiasProgram: surface.antialiasProgram,
+      antialiasLines: this.options.antialiasLines,
+      layouts,
+      viewStateRef: { current: this.viewStates },
+      yScaleRef: { current: this.yScales },
+      yCenterOffsetRef: { current: this.yOffsets },
+      seriesBufferCache: surface.seriesBuffers,
+      antialiasSeriesBufferCache: surface.antialiasBuffers,
+      initialVisiblePoints: this.options.initialVisiblePoints,
+      getAppendAnimatedPoint: (payload) => this.animator.getPoint(payload),
+      movingAverageByChart: this.movingAverageByChart,
+      movingAverageCache: surface.movingAverageCache,
+      seriesOrderByChart: this.options.seriesOrderByChart
+    });
+  }
+  updateCells(layouts, axes, fullscreen) {
+    layouts.forEach(({ chart, node }) => {
+      const axis = axes[chart.id];
+      node.querySelector("[data-title-wrap]").classList.toggle("ring-1", this.focusedChartId === chart.id);
+      node.querySelector("[data-title-wrap]").classList.toggle("ring-primary/70", this.focusedChartId === chart.id);
+      const grid = node.querySelector("[data-grid-lines]");
+      const gridOptions = this.options.gridLines === true ? {} : this.options.gridLines || {};
+      grid.style.display = this.options.gridLines ? "block" : "none";
+      Object.assign(grid.style, {
+        left: `${PLOT_PADDING.left}px`,
+        right: `${PLOT_PADDING.right}px`,
+        top: `${PLOT_PADDING.top}px`,
+        bottom: `${PLOT_PADDING.bottom}px`,
+        backgroundImage: "linear-gradient(to right, transparent calc(100% - 1px), currentColor calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), currentColor calc(100% - 1px))",
+        backgroundSize: `${Math.max(8, Number(gridOptions.xSpacing) || 80)}px 100%, 100% ${Math.max(8, Number(gridOptions.ySpacing) || 48)}px`
+      });
+      const yAxis = node.querySelector("[data-y-axis]");
+      yAxis.style.backgroundColor = withAlpha(this.options.backgroundColor, 0.78);
+      yAxis.innerHTML = (axis?.ticks || []).map((tick) => `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="top:${tick.top}px">${escapeHtml(this.options.formatYValue(tick.value))}</div>`).join("") + (axis?.latestValues || []).map((latest) => `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-sm px-1.5 py-0.5 text-center text-[10px] font-bold tabular-nums shadow-sm" style="top:${latest.top}px;background:${latest.color};color:${getTextColor(latest.color)}">${escapeHtml(this.options.formatYValue(latest.value))}</div>`).join("");
+      const xAxis = node.querySelector("[data-x-axis]");
+      xAxis.style.backgroundColor = withAlpha(this.options.backgroundColor, 0.7);
+      xAxis.innerHTML = (axis?.xTicks || []).map((tick) => `<div class="pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="left:${tick.left}px">${escapeHtml(this.options.formatXTick(tick.value))}</div>`).join("");
+      const latestLayer = node.querySelector("[data-latest-lines]");
+      latestLayer.innerHTML = this.options.showLatestValueLine ? (axis?.latestValues || []).filter((item) => item.left >= 0 && item.left <= axis.plotWidth).map((item) => `<div class="pointer-events-none absolute z-10 opacity-70" style="left:${PLOT_PADDING.left + item.left}px;top:${PLOT_PADDING.top + item.top}px;height:1px;width:${Math.max(0, axis.plotWidth - item.left)}px;background-image:repeating-linear-gradient(to right,${item.color} 0 4px,transparent 4px 8px)"></div>`).join("") : "";
+      this.updateToolbar(node, chart, axis, fullscreen);
+    });
+  }
+  updateToolbar(node, chart, axis, fullscreen) {
+    const target = node.querySelector("[data-toolbar]");
+    const focused = fullscreen || this.focusedChartId === chart.id;
+    let html = "";
+    if (axis?.showJumpLatest) html += `<button type="button" data-action="jump-latest" aria-label="Jump to latest" class="absolute z-30 inline-flex size-7 items-center justify-center rounded-sm text-foreground hover:bg-accent" style="right:${RIGHT_AXIS_WIDTH + 6}px;bottom:${PLOT_PADDING.bottom + 6}px;background:${withAlpha(this.options.backgroundColor, 0.7)}">${iconSvg("arrowLineRight")}</button>`;
+    if (focused && this.options.showToolbar) {
+      const moving = Boolean(this.movingAverageByChart[chart.id]?.enabled);
+      const hasDrawings = getDrawingsForChart(this.drawings, chart.id).length > 0;
+      html += `<div class="absolute left-2 top-12 z-30 flex flex-col gap-0.5 rounded-sm bg-background/80 pr-3 text-foreground shadow-sm backdrop-blur">`;
+      html += toolbarButton({ action: "fullscreen", title: fullscreen ? "Exit fullscreen" : "Maximize chart", hotkey: "F", icon: iconSvg(fullscreen ? "arrowsIn" : "arrowsOut") });
+      html += toolbarButton({ action: "reset", title: "Reset chart", hotkey: "R", icon: iconSvg("arrowCounterClockwise") });
+      html += toolbarButton({ action: "rectangle-zoom", title: "Rectangle zoom", hotkey: "Z", active: this.rectangleZoomChartId === chart.id, icon: iconSvg("magnifyingGlassPlus") });
+      if (!this.options.disableDrawings && hasDrawings) html += toolbarButton({ action: "clear-drawings", title: "Clear drawings", className: "text-orange-500", icon: iconSvg("broom") });
+      if (!this.options.disableDrawings) {
+        html += '<div class="my-1 h-px w-full"></div>';
+        html += toolbarButton({ action: "tool-trendline", title: "Draw trendline", hotkey: "T", active: this.activeDrawingTool === "trendline", icon: iconSvg("minus", { className: "-rotate-45" }) });
+        html += toolbarButton({ action: "tool-hline", title: "Draw horizontal line", hotkey: "H", active: this.activeDrawingTool === "hline", icon: iconSvg("minus") });
+        html += toolbarButton({ action: "tool-vline", title: "Draw vertical line", hotkey: "V", active: this.activeDrawingTool === "vline", icon: iconSvg("minus", { className: "rotate-90" }) });
+        html += toolbarButton({ action: "tool-pin", title: "Place pin", hotkey: "P", active: this.activeDrawingTool === "pin", icon: iconSvg("mapPin") });
+        html += toolbarButton({ action: "moving-average", title: "Toggle moving average", hotkey: "M", active: moving, icon: iconSvg("waveSine") });
+      }
+      html += "</div>";
+      if (!this.options.disableDrawings && moving) html += this.movingAverageOptionsHtml(chart);
+    }
+    target.innerHTML = html;
+  }
+  movingAverageOptionsHtml(chart) {
+    const moving = this.movingAverageByChart[chart.id] || { enabled: true, period: 21, type: "ema", hideBase: false };
+    return `<div data-moving-options class="absolute right-16 top-2 z-40 flex items-center gap-1 rounded-sm bg-background/85 p-1 text-xs text-foreground shadow-sm">
+      <button type="button" data-action="toggle-base" title="${moving.hideBase ? "Show" : "Hide"} base series" aria-label="${moving.hideBase ? "Show" : "Hide"} base series" class="inline-flex size-6 items-center justify-center rounded-sm ${moving.hideBase ? "bg-primary/15 text-primary ring-1 ring-primary/40" : ""}">${iconSvg("eye", { size: 14 })}</button>
+      <button type="button" data-action="moving-type" title="Toggle moving average type" class="h-6 rounded-sm px-2 text-[11px] font-semibold uppercase">${moving.type === "sma" ? "sma" : "ema"}</button>
+      <input data-moving-period type="number" min="1" step="1" value="${Math.max(1, Number(moving.period) || 21)}" title="Moving average period" class="h-6 w-14 rounded-sm border border-border/50 px-1 text-xs" />
+    </div>`;
+  }
+  renderOverlays() {
+    const surface = this.fullscreenChartId ? this.fullscreenOverlay : this.container;
+    const overlay = this.fullscreenChartId ? this.fullscreenOverlays : this.overlays;
+    const layouts = this.fullscreenChartId ? this.fullscreenLayouts : this.layouts;
+    if (!overlay) return;
+    overlay.style.height = `${surface.scrollHeight}px`;
+    let html = this.drawingOverlayHtml(layouts);
+    html += this.topMarkersHtml(layouts);
+    html += this.crosshairHtml();
+    html += this.rectangleOverlayHtml();
+    html += this.drawingOptionsHtml(layouts);
+    overlay.innerHTML = html;
+  }
+  drawingOverlayHtml(layouts) {
+    const drawings = this.draftDrawing ? [...this.drawings, this.draftDrawing] : this.drawings;
+    if (!drawings.length) return "";
+    const body = layouts.flatMap((layout) => getDrawingsForChart(drawings, layout.chart.id).map((drawing) => {
+      const geometry = getDrawingGeometry({ drawing, layout, projectPoint: (point) => this.projectPoint(point, layout) });
+      if (!geometry) return "";
+      const selected = drawing.id === this.selectedDrawingId || drawing.id === "__draft__";
+      if (drawing.type === "pin") {
+        const text = escapeHtml(geometry.style.text?.trim() || "");
+        return `<g opacity="${drawing.id === "__draft__" ? 0.72 : 1}"><g transform="translate(${geometry.start.x} ${geometry.start.y})"><path d="M0 -11 C-6 -11 -10 -6 -10 -1 C-10 6 -2 12 0 15 C2 12 10 6 10 -1 C10 -6 6 -11 0 -11 Z" fill="${geometry.style.color}" stroke="var(--background,#fff)" stroke-width="1.5"/><circle cy="-2" r="3" fill="var(--background,#fff)"/></g>${text ? `<text x="${geometry.start.x + 14}" y="${geometry.start.y}" fill="${geometry.style.color}" stroke="var(--background,#fff)" stroke-width="3" paint-order="stroke" font-size="12" font-weight="600">${text}</text>` : ""}${selected ? `<circle cx="${geometry.start.x}" cy="${geometry.start.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>` : ""}</g>`;
+      }
+      return `<g><line data-drawing-line x1="${geometry.lineStart.x}" y1="${geometry.lineStart.y}" x2="${geometry.lineEnd.x}" y2="${geometry.lineEnd.y}" stroke="${geometry.style.color}" stroke-width="${geometry.style.lineWidth}" stroke-dasharray="${geometry.style.dashPattern.join(" ")}" opacity="${drawing.id === "__draft__" ? 0.72 : 1}"/>${selected ? `<circle data-drawing-anchor="start" cx="${geometry.start.x}" cy="${geometry.start.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>${drawing.type === "trendline" ? `<circle data-drawing-anchor="end" cx="${geometry.end.x}" cy="${geometry.end.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>` : ""}` : ""}</g>`;
+    })).join("");
+    return `<svg class="pointer-events-none absolute left-0 top-0 z-20 block overflow-visible" style="width:100%;height:100%">${body}</svg>`;
+  }
+  topMarkersHtml(layouts) {
+    if (!this.options.topMarkers?.length) return "";
+    return layouts.flatMap((layout) => this.options.topMarkers.map((marker, markerIndex) => {
+      const value = Number(marker.x ?? marker.step);
+      const state = this.viewStates.get(layout.chart.id);
+      const ratio = (value - state.xMin) / (state.xMax - state.xMin);
+      if (!Number.isFinite(value) || ratio < 0 || ratio > 1) return "";
+      return `<button type="button" data-marker-index="${markerIndex}" class="pointer-events-auto absolute z-30 -translate-x-1/2 rounded-full" style="left:${layout.plot.x + ratio * layout.plot.width}px;top:${layout.plot.y + 4}px" title="${escapeHtml(marker.title || "")}" aria-label="${escapeHtml(marker.ariaLabel || marker.title || "Chart marker")}"><span class="block size-2.5 rounded-full border border-background shadow-sm" style="background:${marker.color || "#f97316"}"></span></button>`;
+    })).join("");
+  }
+  crosshairHtml() {
+    const crosshair = this.options.showTooltips ? this.crosshair : null;
+    if (!crosshair) return "";
+    return `<div class="pointer-events-none absolute z-20 border-l border-foreground/40" style="left:${crosshair.x}px;top:0;height:100%"></div><div class="pointer-events-none absolute z-20 border-t border-foreground/40" style="top:${crosshair.y}px;left:0;width:100%"></div>
+      ${crosshair.points.map((point) => `<div class="pointer-events-none absolute z-30 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background" style="left:${point.x}px;top:${point.y}px;background:${point.color}"></div>`).join("")}
+      <div data-crosshair-tooltip class="pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border/70 bg-popover/80 px-2 py-1.5 text-xs text-popover-foreground shadow-sm backdrop-blur-sm" style="left:${crosshair.tooltipX}px;top:${crosshair.tooltipY}px"><div class="mb-1 font-medium">${escapeHtml(this.options.xAxisLabel)}: ${escapeHtml(this.options.formatXValue(crosshair.xValue))}</div>${crosshair.points.map((point) => `<div class="grid grid-cols-[auto_1fr] gap-x-2"><span class="mt-1 size-2 rounded-full" style="background:${point.color}"></span><div class="min-w-0"><div class="truncate text-muted-foreground">${escapeHtml(point.name)}</div><div class="tabular-nums">${escapeHtml(this.options.formatYValue(point.yValue))}</div></div></div>`).join("")}</div>`;
+  }
+  rectangleOverlayHtml() {
+    const rect = this.rectangleZoomRect && normalizeRect(this.rectangleZoomRect.start, this.rectangleZoomRect.end);
+    return rect ? `<div class="pointer-events-none absolute z-40 rounded-sm border border-primary/70 bg-primary/10" style="left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px"></div>` : "";
+  }
+  drawingOptionsHtml(layouts) {
+    const drawing = this.drawings.find((item) => item.id === this.selectedDrawingId);
+    if (!drawing) return "";
+    const layout = layouts.find((item) => item.chart.id === drawing.chartId);
+    if (!layout) return "";
+    const style = drawing.style || {};
+    const canExtend = drawing.type === "trendline" || drawing.type === "hline";
+    const canText = drawing.type === "pin";
+    const left = Math.max(
+      layout.rect.x + 42,
+      layout.rect.x + layout.rect.width - PLOT_PADDING.right - 8
+    );
+    return `<div data-drawing-options class="pointer-events-auto absolute z-40 flex items-center gap-1 rounded-sm bg-background/85 p-1 text-xs text-foreground shadow-sm backdrop-blur" style="left:${left}px;top:${layout.plot.y + 6}px;transform:translateX(-100%)">
+      ${canExtend ? `<button type="button" data-action="extend-drawing" class="h-6 rounded-sm px-2 text-[11px] font-semibold ${style.extendRight ? "bg-primary/15 text-primary ring-1 ring-primary/40" : ""}">Ext</button>` : ""}
+      ${canText ? `<input data-pin-text type="text" value="${escapeHtml(style.text || "")}" placeholder="Text" class="h-6 w-24 rounded-sm border border-border/50 px-1.5 text-xs"/>` : ""}
+      <input data-drawing-color type="color" value="${/^#[0-9a-f]{6}$/i.test(style.color || "") ? style.color : "#60a5fa"}" title="Line color" class="size-6 rounded-sm border border-border/70"/>
+    </div>`;
+  }
+  projectPoint(point, layout) {
+    const state = this.viewStates.get(layout.chart.id);
+    const range = applyYScale(getYRange(layout.chart, state.xMin, state.xMax, layout.plot.width), this.yScales.get(layout.chart.id), this.yOffsets.get(layout.chart.id));
+    return dataPointToScreenPoint({ point, state, yRange: range, plot: layout.plot });
+  }
+  pointForEvent(event, host) {
+    const rect = host.getBoundingClientRect();
+    return { x: event.clientX - rect.left + host.scrollLeft, y: event.clientY - rect.top + host.scrollTop };
+  }
+  eventContext(event) {
+    const cell = event.target.closest?.("[data-chart-index]");
+    if (!cell) return null;
+    const fullscreen = Boolean(cell.closest("[data-aliencharts-fullscreen]"));
+    const layouts = fullscreen ? this.fullscreenLayouts : this.layouts;
+    const index = Number(cell.dataset.chartIndex);
+    const layout = fullscreen ? layouts[0] : layouts[index];
+    const host = fullscreen ? this.fullscreenOverlay : this.container;
+    return layout ? { layout, host, point: this.pointForEvent(event, host), fullscreen } : null;
+  }
+  handleClick(event) {
+    const marker = event.target.closest?.("[data-marker-index]");
+    if (marker) {
+      event.stopPropagation();
+      this.options.onTopMarkerClick?.(this.options.topMarkers[Number(marker.dataset.markerIndex)]);
+      return;
+    }
+    const button = event.target.closest?.("[data-action]");
+    if (!button) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const context = this.eventContext(event);
+    const chartId = context?.layout.chart.id || this.focusedChartId || this.fullscreenChartId;
+    switch (button.dataset.action) {
+      case "fullscreen":
+        this.fullscreenChartId ? this.closeFullscreen() : this.openFullscreen(chartId);
+        break;
+      case "reset":
+        this.resetChart(chartId);
+        break;
+      case "jump-latest":
+        this.jumpToLatest(chartId);
+        break;
+      case "rectangle-zoom":
+        this.rectangleZoomChartId = this.rectangleZoomChartId === chartId ? null : chartId;
+        this.activeDrawingTool = null;
+        this.emit("onActiveDrawingToolChange", null);
+        this.requestRender();
+        break;
+      case "clear-drawings":
+        this.options.onClearDrawingsRequest ? this.emit("onClearDrawingsRequest", chartId) : this.setDrawings(this.drawings.filter((item) => item.chartId !== chartId));
+        break;
+      case "moving-average":
+        this.toggleMovingAverage(chartId);
+        break;
+      case "tool-trendline":
+        this.toggleDrawingTool("trendline");
+        break;
+      case "tool-hline":
+        this.toggleDrawingTool("hline");
+        break;
+      case "tool-vline":
+        this.toggleDrawingTool("vline");
+        break;
+      case "tool-pin":
+        this.toggleDrawingTool("pin");
+        break;
+      case "toggle-base":
+        this.updateMovingAverage(chartId, { hideBase: !this.movingAverageByChart[chartId]?.hideBase });
+        break;
+      case "moving-type":
+        this.updateMovingAverage(chartId, { type: this.movingAverageByChart[chartId]?.type === "sma" ? "ema" : "sma" });
+        break;
+      case "extend-drawing":
+        this.updateSelectedDrawing((drawing) => ({ ...drawing, style: { ...drawing.style, extendRight: drawing.style?.extendRight === false } }));
+        break;
+      default:
+        break;
+    }
+  }
+  handleInput(event) {
+    if (event.target.matches("[data-moving-period]")) {
+      const context = this.eventContext(event);
+      this.updateMovingAverage(context?.layout.chart.id, { period: Math.max(1, Math.round(Number(event.target.value) || 1)) });
+    } else if (event.target.matches("[data-pin-text]")) {
+      this.updateSelectedDrawing((drawing) => ({ ...drawing, style: { ...drawing.style, text: event.target.value } }));
+    } else if (event.target.matches("[data-drawing-color]")) {
+      this.updateSelectedDrawing((drawing) => ({ ...drawing, style: { ...drawing.style, color: event.target.value } }));
+    }
+  }
+  handlePointerDown(event) {
+    if (event.target.closest?.("button,input")) return;
+    if (event.button !== 0) return;
+    const context = this.eventContext(event);
+    if (!context) return;
+    const { layout, point } = context;
+    this.activePointerContext = context;
+    this.focusedChartId = layout.chart.id;
+    const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
+    if (inPlot && this.activeDrawingTool && !this.options.disableDrawings) {
+      const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+      if (["hline", "vline", "pin"].includes(this.activeDrawingTool)) {
+        this.commitDrawing(layout.chart.id, this.activeDrawingTool, dataPoint, dataPoint);
+      } else if (this.drawingSession?.chartId === layout.chart.id) {
+        this.commitDrawing(layout.chart.id, "trendline", this.drawingSession.start, dataPoint);
+      } else {
+        this.drawingSession = { chartId: layout.chart.id, type: "trendline", start: dataPoint };
+        this.draftDrawing = createDraftDrawing({ chartId: layout.chart.id, type: "trendline", start: dataPoint, end: dataPoint });
+      }
+    } else if (inPlot && this.rectangleZoomChartId === layout.chart.id) {
+      this.drag = { type: "rectangle", layout, start: point };
+      this.rectangleZoomRect = { start: point, end: point };
+    } else if (inPlot) {
+      const hit = this.hitDrawing(point, layout);
+      if (hit) {
+        this.selectedDrawingId = hit.drawing.id;
+        this.emit("onSelectedDrawingIdChange", hit.drawing.id);
+        if (hit.endpoint != null || ["hline", "vline", "pin"].includes(hit.drawing.type)) {
+          this.drag = { type: "drawing-edit", layout, drawingId: hit.drawing.id, endpoint: hit.endpoint };
+        }
+      } else {
+        this.selectedDrawingId = null;
+        this.emit("onSelectedDrawingIdChange", null);
+        this.drag = { type: "pan", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) }, yOffset: this.yOffsets.get(layout.chart.id) || 0 };
+      }
+    } else if (point.x >= layout.plot.x + layout.plot.width) {
+      this.drag = { type: "y-scale", layout, start: point, scale: this.yScales.get(layout.chart.id) || 1 };
+    } else if (point.y >= layout.plot.y + layout.plot.height) {
+      this.drag = { type: "x-scale", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) } };
+    }
+    context.host.setPointerCapture?.(event.pointerId);
+    this.pointerCaptureTarget = context.host;
+    this.requestRender();
+  }
+  handlePointerMove(event) {
+    if (event.target.closest?.("button,input") && !this.drag && !this.drawingSession) return;
+    const context = this.eventContext(event) || (this.activePointerContext && (this.drag || this.drawingSession) ? { ...this.activePointerContext, point: this.pointForEvent(event, this.activePointerContext.host) } : null);
+    if (!context) return this.clearCrosshair();
+    const { layout, point } = context;
+    if (this.drawingSession) {
+      if (layout.chart.id !== this.drawingSession.chartId) return;
+      const end = screenPointToDataPoint({ point, chart: layout.chart, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+      this.draftDrawing = createDraftDrawing({ ...this.drawingSession, end });
+      this.requestRender();
+      return;
+    }
+    if (this.drag) {
+      const { chart, plot } = this.drag.layout;
+      if (this.drag.type === "drawing-edit") {
+        const dataPoint = screenPointToDataPoint({ point, chart, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+        const next = updateDrawingById(this.drawings, this.drag.drawingId, (drawing) => {
+          if (drawing.type === "hline") {
+            const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
+            return { ...drawing, start: { x: dataPoint.x, y: dataPoint.y }, end: { x: dataPoint.x + deltaX, y: dataPoint.y } };
+          }
+          if (drawing.type === "vline") return { ...drawing, start: { ...drawing.start, x: dataPoint.x }, end: { ...drawing.end, x: dataPoint.x } };
+          if (drawing.type === "pin") return { ...drawing, start: dataPoint, end: dataPoint };
+          if (this.drag.endpoint === "start" || this.drag.endpoint === "end") return { ...drawing, [this.drag.endpoint]: dataPoint };
+          return drawing;
+        });
+        this.drawings = next;
+        this.emit("onDrawingsChange", [...next]);
+        this.requestRender();
+        return;
+      }
+      if (this.drag.type === "rectangle") this.rectangleZoomRect = { start: this.drag.start, end: point };
+      if (this.drag.type === "pan") {
+        const span = this.drag.state.xMax - this.drag.state.xMin;
+        const deltaX = (point.x - this.drag.start.x) / plot.width * span;
+        const baseRange = getYRange(chart, this.drag.state.xMin, this.drag.state.xMax, plot.width);
+        const rangeSpan = (baseRange.maxY - baseRange.minY) * (this.yScales.get(chart.id) || 1);
+        const deltaY = (point.y - this.drag.start.y) / plot.height * rangeSpan;
+        this.viewStates.set(chart.id, { xMin: this.drag.state.xMin - deltaX, xMax: this.drag.state.xMax - deltaX });
+        this.yOffsets.set(chart.id, this.drag.yOffset + deltaY);
+      }
+      if (this.drag.type === "y-scale") this.yScales.set(chart.id, clamp(this.drag.scale * Math.exp((point.y - this.drag.start.y) * 0.01), Y_SCALE_MIN, Y_SCALE_MAX));
+      if (this.drag.type === "x-scale") {
+        const center = (this.drag.state.xMin + this.drag.state.xMax) / 2;
+        const span = clamp((this.drag.state.xMax - this.drag.state.xMin) * Math.exp((point.x - this.drag.start.x) * 0.01), X_SCALE_MIN_SPAN, X_SCALE_MAX_SPAN);
+        this.viewStates.set(chart.id, { xMin: center - span / 2, xMax: center + span / 2 });
+      }
+      if (this.drag.type === "pan") this.updateCrosshair(point, layout);
+      else this.requestRender();
+      return;
+    }
+    this.updateCrosshair(point, layout, context.fullscreen);
+  }
+  handlePointerUp(event) {
+    if (event.target.closest?.("button,input") && !this.drag && !this.drawingSession) return;
+    const context = this.eventContext(event) || (this.activePointerContext ? { ...this.activePointerContext, point: this.pointForEvent(event, this.activePointerContext.host) } : null);
+    if (this.drag?.type === "rectangle" && this.rectangleZoomRect) {
+      const normalized = normalizeRect(this.rectangleZoomRect.start, this.rectangleZoomRect.end);
+      if (normalized?.width >= 4 && normalized?.height >= 4) {
+        const layout = this.drag.layout;
+        applyRectangleZoom({
+          chart: layout.chart,
+          plot: layout.plot,
+          start: this.rectangleZoomRect.start,
+          end: this.rectangleZoomRect.end,
+          initialVisiblePoints: this.options.initialVisiblePoints,
+          viewStateRef: { current: this.viewStates },
+          yScaleRef: { current: this.yScales },
+          yCenterOffsetRef: { current: this.yOffsets },
+          yManualScaleRef: { current: /* @__PURE__ */ new Set() }
+        });
+      }
+      this.rectangleZoomChartId = null;
+      this.rectangleZoomRect = null;
+    }
+    this.drag = null;
+    this.pointerCaptureTarget?.releasePointerCapture?.(event.pointerId);
+    this.pointerCaptureTarget = null;
+    this.activePointerContext = null;
+    this.requestRender();
+  }
+  handleWheel(event) {
+    const context = this.eventContext(event);
+    if (!context) return;
+    const { layout, point } = context;
+    const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
+    if (!inPlot) return;
+    event.preventDefault();
+    const state = this.viewStates.get(layout.chart.id);
+    const ratio = clamp((point.x - layout.plot.x) / layout.plot.width, 0, 1);
+    const anchor = state.xMin + ratio * (state.xMax - state.xMin);
+    const zoom = Math.exp(event.deltaY * 1e-3);
+    const span = clamp((state.xMax - state.xMin) * zoom, X_SCALE_MIN_SPAN, X_SCALE_MAX_SPAN);
+    this.viewStates.set(layout.chart.id, { xMin: anchor - ratio * span, xMax: anchor + (1 - ratio) * span });
+    this.requestRender();
+  }
+  handleContextMenu(event) {
+    const context = this.eventContext(event);
+    if (!context || !this.options.onChartContextMenu) return;
+    event.preventDefault();
+    const { layout, point } = context;
+    const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
+    const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
+    this.options.onChartContextMenu({ chart: layout.chart, event, point: data });
+  }
+  updateCrosshair(point, layout) {
+    const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
+    if (!inPlot || !this.options.showTooltips) return this.clearCrosshair();
+    const state = this.viewStates.get(layout.chart.id);
+    const xValue = state.xMin + (point.x - layout.plot.x) / layout.plot.width * (state.xMax - state.xMin);
+    const range = applyYScale(getYRange(layout.chart, state.xMin, state.xMax, layout.plot.width), this.yScales.get(layout.chart.id), this.yOffsets.get(layout.chart.id));
+    const points = layout.chart.series.map((series) => {
+      const visible = series.getVisiblePoints(state.xMin, state.xMax, layout.plot.width);
+      if (!visible.pointCount) return null;
+      const index = getNearestPointIndex(visible.x, xValue);
+      const data = { x: visible.x[index], y: visible.y[index] };
+      const screen = dataPointToScreenPoint({ point: data, state, yRange: range, plot: layout.plot });
+      return { id: series.id, name: series.name, color: series.color, x: screen.x, y: screen.y, xValue: data.x, yValue: data.y };
+    }).filter(Boolean);
+    if (!points.length) return this.clearCrosshair();
+    const nearest = points.reduce((best, item) => Math.abs(item.x - point.x) < Math.abs(best.x - point.x) ? item : best);
+    this.crosshair = {
+      x: point.x,
+      y: point.y,
+      xValue: nearest.xValue,
+      points,
+      tooltipX: point.x + 232 > layout.rect.x + layout.rect.width ? point.x - 232 : point.x + 12,
+      tooltipY: clamp(point.y + 12, layout.rect.y + PLOT_PADDING.top, layout.rect.y + layout.rect.height - 96)
+    };
+    this.requestRender();
+  }
+  clearCrosshair() {
+    if (!this.crosshair) return;
+    this.crosshair = null;
+    this.requestRender();
+  }
+  hitDrawing(point, layout) {
+    for (const drawing of getDrawingsForChart(this.drawings, layout.chart.id)) {
+      const hit = hitTestDrawing({ point, drawing, layout, projectPoint: (data) => this.projectPoint(data, layout) });
+      if (hit) return hit;
+    }
+    return null;
+  }
+  commitDrawing(chartId, type, start, end) {
+    const drawing = createDrawing({ chartId, type, start, end, createDrawingId: this.options.createDrawingId });
+    this.setDrawings([...this.drawings, drawing]);
+    this.selectedDrawingId = drawing.id;
+    this.activeDrawingTool = null;
+    this.draftDrawing = null;
+    this.drawingSession = null;
+    this.emit("onSelectedDrawingIdChange", drawing.id);
+    this.emit("onActiveDrawingToolChange", null);
+  }
+  setDrawings(drawings) {
+    this.drawings = drawings;
+    this.emit("onDrawingsChange", [...drawings]);
+    this.requestRender();
+  }
+  updateSelectedDrawing(updater) {
+    if (!this.selectedDrawingId) return;
+    this.setDrawings(updateDrawingById(this.drawings, this.selectedDrawingId, updater));
+  }
+  toggleDrawingTool(tool) {
+    if (!DRAWING_TOOLS.has(tool) || this.options.disableDrawings) return;
+    this.activeDrawingTool = this.activeDrawingTool === tool ? null : tool;
+    this.rectangleZoomChartId = null;
+    this.draftDrawing = null;
+    this.drawingSession = null;
+    this.emit("onActiveDrawingToolChange", this.activeDrawingTool);
+    this.requestRender();
+  }
+  toggleMovingAverage(chartId) {
+    if (!chartId || this.options.disableDrawings) return;
+    const current = this.movingAverageByChart[chartId] || { period: 21, type: "ema", hideBase: false };
+    this.movingAverageByChart = { ...this.movingAverageByChart, [chartId]: { ...current, enabled: !current.enabled } };
+    this.emit("onMovingAverageToggle", chartId);
+    this.requestRender();
+  }
+  updateMovingAverage(chartId, changes) {
+    if (!chartId) return;
+    const next = { enabled: true, period: 21, type: "ema", hideBase: false, ...this.movingAverageByChart[chartId] || {}, ...changes };
+    this.movingAverageByChart = { ...this.movingAverageByChart, [chartId]: next };
+    this.emit("onMovingAverageChange", chartId, { ...next });
+    this.requestRender();
+  }
+  resetChart(chartId) {
+    const chart = this.options.charts.find((item) => item.id === chartId);
+    if (!chart) return;
+    this.viewStates.set(chartId, getInitialView(chart, this.options.initialVisiblePoints));
+    this.yScales.set(chartId, 1);
+    this.yOffsets.set(chartId, 0);
+    this.requestRender();
+  }
+  openFullscreen(chartId) {
+    const chart = this.options.charts.find((item) => item.id === chartId);
+    if (!chart || this.fullscreenChartId) return;
+    this.fullscreenChartId = chartId;
+    const overlay = document.createElement("div");
+    overlay.dataset.alienchartsFullscreen = "";
+    overlay.className = "aliencharts-root fixed inset-0 z-[60] bg-background p-2";
+    overlay.innerHTML = `<canvas class="pointer-events-none absolute left-0 top-0 z-10 block"></canvas><div data-fullscreen-cell>${chartCellHtml(chart, 0, this.options.backgroundColor)}</div><div data-fullscreen-overlays class="pointer-events-none absolute left-0 top-0 z-20" style="width:100%;height:100%"></div>`;
+    document.body.append(overlay);
+    this.fullscreenOverlay = overlay;
+    this.fullscreenNode = overlay.querySelector("[data-chart-index]");
+    this.fullscreenNode.style.height = "calc(100vh - 16px)";
+    this.fullscreenOverlays = overlay.querySelector("[data-fullscreen-overlays]");
+    const canvas = overlay.querySelector("canvas");
+    const gl = canvas.getContext("webgl2", { antialias: true, alpha: true, depth: false, stencil: false });
+    if (!gl) {
+      overlay.remove();
+      this.fullscreenChartId = null;
+      return;
+    }
+    this.fullscreenSurface = makeSurface(canvas, gl);
+    this.fullscreenListeners = Object.entries(this.bound).filter(([name]) => name !== "keydown" && name !== "scroll");
+    this.fullscreenListeners.forEach(([name, handler]) => overlay.addEventListener(name, handler, name === "wheel" ? { passive: false } : void 0));
+    this.resizeObserver.observe(overlay);
+    this.requestRender();
+  }
+  closeFullscreen() {
+    if (!this.fullscreenChartId) return;
+    if (this.fullscreenOverlay) this.resizeObserver?.unobserve(this.fullscreenOverlay);
+    this.fullscreenListeners?.forEach(([name, handler]) => this.fullscreenOverlay?.removeEventListener(name, handler));
+    this.fullscreenListeners = null;
+    destroySurface(this.fullscreenSurface);
+    this.fullscreenOverlay?.remove();
+    this.fullscreenSurface = null;
+    this.fullscreenOverlay = null;
+    this.fullscreenNode = null;
+    this.fullscreenOverlays = null;
+    this.fullscreenLayouts = [];
+    this.fullscreenChartId = null;
+    this.requestRender();
+  }
+  handleKeyDown(event) {
+    const editable = event.target instanceof HTMLElement && (event.target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName));
+    if (editable) return;
+    const chartId = this.fullscreenChartId || this.focusedChartId;
+    const key = event.key.toLowerCase();
+    if (["arrowleft", "arrowright", "arrowup", "arrowdown"].includes(key) && !this.fullscreenChartId) {
+      this.moveFocus(key.replace("arrow", ""));
+      event.preventDefault();
+      return;
+    }
+    if (key === "r") {
+      this.resetChart(chartId);
+      event.preventDefault();
+    } else if (key === "z") {
+      this.rectangleZoomChartId = this.rectangleZoomChartId === chartId ? null : chartId;
+      event.preventDefault();
+      this.requestRender();
+    } else if (key === "m") {
+      this.toggleMovingAverage(chartId);
+      event.preventDefault();
+    } else if (["t", "h", "v", "p"].includes(key)) {
+      this.toggleDrawingTool({ t: "trendline", h: "hline", v: "vline", p: "pin" }[key]);
+      event.preventDefault();
+    } else if ((key === "delete" || key === "backspace") && this.selectedDrawingId) {
+      this.setDrawings(removeDrawingById(this.drawings, this.selectedDrawingId));
+      this.selectedDrawingId = null;
+      this.emit("onSelectedDrawingIdChange", null);
+      event.preventDefault();
+    } else if (key === "escape" && (this.activeDrawingTool || this.draftDrawing || this.rectangleZoomChartId)) {
+      this.activeDrawingTool = null;
+      this.draftDrawing = null;
+      this.drawingSession = null;
+      this.rectangleZoomChartId = null;
+      this.rectangleZoomRect = null;
+      this.emit("onActiveDrawingToolChange", null);
+      this.requestRender();
+      event.preventDefault();
+    } else if (key === "f" || key === "escape" && this.fullscreenChartId) {
+      this.fullscreenChartId ? this.closeFullscreen() : this.openFullscreen(chartId);
+      event.preventDefault();
+    }
+  }
+  moveFocus(direction) {
+    const charts = this.options.charts;
+    if (!charts.length) return;
+    let index = Math.max(0, charts.findIndex((chart) => chart.id === this.focusedChartId));
+    const columns = Math.max(1, Number(this.options.columns) || 1);
+    if (direction === "left") index = Math.max(Math.floor(index / columns) * columns, index - 1);
+    if (direction === "right") index = Math.min(charts.length - 1, index + 1);
+    if (direction === "up") index = Math.max(0, index - columns);
+    if (direction === "down") index = Math.min(charts.length - 1, index + columns);
+    this.focusedChartId = charts[index].id;
+    this.chartNodes[index]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    this.requestRender();
+  }
+  emit(name, ...args) {
+    this.options[name]?.(...args);
+  }
+  cleanupDom() {
+    this.canvas?.remove();
+    this.grid?.remove();
+    this.overlays?.remove();
+    this.addedClasses?.forEach((name) => this.container.classList.remove(name));
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.closeFullscreen();
+    this.destroyed = true;
+    if (this.frame != null) cancelAnimationFrame(this.frame);
+    this.animator.destroy();
+    this.resizeObserver.disconnect();
+    Object.entries(this.bound).forEach(([name, handler]) => {
+      const target = name === "keydown" ? window : this.container;
+      target.removeEventListener(name, handler);
+    });
+    destroySurface(this.surface);
+    this.cleanupDom();
+  }
+};
+var createChartGrid = (container, options = {}) => new ChartGridController(container, options);
+
+// src/react/ChartGridAdapter.jsx
+import { jsx } from "react/jsx-runtime";
+var ChartGrid = forwardRef(function ChartGrid2({
+  className = "",
+  dataRevision = 0,
+  ...options
+}, ref) {
+  const hostRef = useRef(null);
+  const controllerRef = useRef(null);
+  const previousOptionsRef = useRef(null);
+  const previousRevisionRef = useRef(dataRevision);
+  useLayoutEffect(() => {
+    const controller = createChartGrid(hostRef.current, options);
+    controllerRef.current = controller;
+    previousOptionsRef.current = options;
+    return () => {
+      controller.destroy();
+      controllerRef.current = null;
+      previousOptionsRef.current = null;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const controller = controllerRef.current;
+    const previous = previousOptionsRef.current;
+    if (!controller || !previous) return;
+    const changed = {};
+    let hasChanges = false;
+    const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(options)]);
+    keys.forEach((key) => {
+      if (Object.is(previous[key], options[key])) return;
+      changed[key] = options[key];
+      hasChanges = true;
+    });
+    if (hasChanges) controller.setOptions(changed);
+    previousOptionsRef.current = options;
+  });
+  useLayoutEffect(() => {
+    if (previousRevisionRef.current !== dataRevision) {
+      previousRevisionRef.current = dataRevision;
+      controllerRef.current?.invalidate();
+    }
+  }, [dataRevision]);
+  useImperativeHandle(ref, () => ({
+    invalidate: () => controllerRef.current?.invalidate(),
+    jumpToLatest: (chartId) => controllerRef.current?.jumpToLatest(chartId),
+    scrollToTop: (scrollOptions) => controllerRef.current?.scrollToTop(scrollOptions)
+  }), []);
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className });
+});
+
+// src/core/mockData.js
+var palette = [
+  "#38bdf8",
+  "#22c55e",
+  "#f59e0b",
+  "#ef4444",
+  "#a855f7",
+  "#14b8a6"
+];
+var createRandom = (seed) => {
+  let value = seed >>> 0;
+  return () => {
+    value = value * 1664525 + 1013904223 >>> 0;
+    return value / 4294967296;
+  };
+};
+var makeSeries = ({ chartIndex, seriesIndex, pointCount }) => {
+  const x = new Float64Array(pointCount);
+  const y = new Float32Array(pointCount);
+  const random = createRandom((chartIndex + 1) * 1009 + seriesIndex * 9176);
+  const baseline = 15 + random() * 45 + seriesIndex * 4;
+  const waveA = 8e-4 + random() * 4e-3;
+  const waveB = 6e-3 + random() * 0.03;
+  const waveC = 5e-5 + random() * 6e-4;
+  const amplitudeA = 0.015 + random() * 0.09;
+  const amplitudeB = 5e-3 + random() * 0.04;
+  const trend = (random() - 0.5) * 4e-3;
+  const noise = 4e-3 + random() * 0.025;
+  const spikeInterval = 180 + Math.floor(random() * 900);
+  const spikeMagnitude = 0.12 + random() * 0.7;
+  let value = baseline;
+  for (let i = 0; i < pointCount; i += 1) {
+    x[i] = i;
+    const spike = (i + chartIndex * 13 + seriesIndex * 31) % spikeInterval === 0 ? spikeMagnitude * (random() > 0.45 ? 1 : -1) : 0;
+    value += Math.sin(i * waveA + chartIndex) * amplitudeA + Math.cos(i * waveB + seriesIndex) * amplitudeB + Math.sin(i * waveC) * amplitudeA * 0.35 + trend + (random() - 0.5) * noise + spike;
+    y[i] = value;
+  }
+  return createSeries({
+    id: `chart-${chartIndex}-series-${seriesIndex}`,
+    name: `Run ${seriesIndex + 1}`,
+    color: palette[(chartIndex + seriesIndex) % palette.length],
+    x,
+    y
+  });
+};
+var createMockCharts = ({
+  chartCount = 50,
+  seriesPerChart = 2,
+  pointCount = 5e5
+} = {}) => {
+  return Array.from({ length: chartCount }, (_, chartIndex) => ({
+    id: `metric-${chartIndex + 1}`,
+    title: `metric_${String(chartIndex + 1).padStart(2, "0")}`,
+    series: Array.from(
+      { length: seriesPerChart },
+      (_2, seriesIndex) => makeSeries({ chartIndex, seriesIndex, pointCount })
+    )
+  }));
+};
+export {
+  ChartGrid,
+  LineSeries,
+  createMockCharts,
+  createSeries
+};
+//# sourceMappingURL=react.js.map