aliencharts 0.1.4 → 0.3.0

package/dist/react.js

@@ -0,0 +1,3361 @@
+// 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/chartModel.js
+var LINE_CAPABILITIES = Object.freeze({
+  appendAnimation: true,
+  drawings: true,
+  latestValue: true,
+  markers: true,
+  movingAverage: true
+});
+var BAR_CAPABILITIES = Object.freeze({
+  appendAnimation: false,
+  drawings: false,
+  latestValue: false,
+  markers: false,
+  movingAverage: false
+});
+var CHART_DEFINITIONS = Object.freeze({
+  line: Object.freeze({
+    capabilities: LINE_CAPABILITIES,
+    defaultOrientation: "vertical",
+    orientationFromSeries: false,
+    orientations: Object.freeze(["vertical"]),
+    rangeIncludesZero: false
+  }),
+  bar: Object.freeze({
+    capabilities: BAR_CAPABILITIES,
+    defaultOrientation: "vertical",
+    orientationFromSeries: true,
+    orientations: Object.freeze(["vertical", "horizontal"]),
+    rangeIncludesZero: true
+  })
+});
+var getChartCategories = (chart) => {
+  if (chart?.categories == null) return [];
+  if (!Array.isArray(chart.categories)) {
+    throw new TypeError(`Chart "${chart.id}" categories must be an array`);
+  }
+  const values = /* @__PURE__ */ new Set();
+  return chart.categories.map((category, index) => {
+    const normalized = typeof category === "string" ? { value: index, label: category } : { value: Number(category?.value), label: category?.label };
+    if (!Number.isFinite(normalized.value) || typeof normalized.label !== "string") {
+      throw new TypeError(
+        `Chart "${chart.id}" category ${index} must be a string or a { value, label } object`
+      );
+    }
+    if (values.has(normalized.value)) {
+      throw new TypeError(
+        `Chart "${chart.id}" has duplicate category value ${normalized.value}`
+      );
+    }
+    values.add(normalized.value);
+    return normalized;
+  });
+};
+var getCategoryLabel = (chart, value) => getChartCategories(chart).find((category) => category.value === value)?.label;
+var getSeriesType = (series) => {
+  if (series?.type == null) return "line";
+  if (Object.prototype.hasOwnProperty.call(CHART_DEFINITIONS, series.type)) {
+    return series.type;
+  }
+  throw new TypeError(`Unknown AlienCharts series type: "${series.type}"`);
+};
+var resolveChartDescriptor = (chart) => {
+  const series = Array.isArray(chart?.series) ? chart.series : [];
+  const categories = getChartCategories(chart);
+  const type = series.length ? getSeriesType(series[0]) : "line";
+  const definition = CHART_DEFINITIONS[type];
+  const orientation = definition.orientationFromSeries ? series[0]?.orientation || definition.defaultOrientation : definition.defaultOrientation;
+  series.forEach((item) => {
+    const itemType = getSeriesType(item);
+    if (itemType !== type) {
+      const mixedTypes = /* @__PURE__ */ new Set([type, itemType]);
+      const typeLabel = mixedTypes.has("line") && mixedTypes.has("bar") ? "line and bar" : `${type} and ${itemType}`;
+      throw new TypeError(
+        `Chart "${chart.id}" cannot mix ${typeLabel} series`
+      );
+    }
+    const itemOrientation = definition.orientationFromSeries ? item.orientation || definition.defaultOrientation : definition.defaultOrientation;
+    if (!definition.orientations.includes(itemOrientation)) {
+      throw new TypeError(
+        `Chart "${chart.id}" has an invalid ${itemType} orientation`
+      );
+    }
+    if (itemOrientation !== orientation) {
+      throw new TypeError(
+        `Chart "${chart.id}" cannot mix ${itemType} orientations`
+      );
+    }
+  });
+  return Object.freeze({
+    capabilities: definition.capabilities,
+    categorical: categories.length > 0,
+    orientation,
+    rangeIncludesZero: definition.rangeIncludesZero,
+    rendererType: type,
+    type
+  });
+};
+var resolveChartDescriptors = (charts) => {
+  const descriptors = /* @__PURE__ */ new Map();
+  charts.forEach((chart) => {
+    descriptors.set(chart.id, resolveChartDescriptor(chart));
+  });
+  return descriptors;
+};
+var getChartDescriptor = (chart, descriptors) => descriptors?.get(chart?.id) || resolveChartDescriptor(chart);
+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]);
+  });
+  return ordered.length === series.length ? ordered : series;
+};
+var CHART_TYPES = Object.freeze(Object.keys(CHART_DEFINITIONS));
+
+// src/core/coordinateTransform.js
+var safeSpan = (min, max) => Math.max(1e-12, max - min);
+var createCoordinateTransform = ({
+  orientation = "vertical",
+  categoryRange,
+  valueRange,
+  plot
+}) => {
+  const horizontal = orientation === "horizontal";
+  const categorySpan = safeSpan(categoryRange.min, categoryRange.max);
+  const valueSpan = safeSpan(valueRange.min, valueRange.max);
+  const categoryPixelLength = horizontal ? plot.height : plot.width;
+  const valuePixelLength = horizontal ? plot.width : plot.height;
+  const categoryRatio = (point) => horizontal ? (point.y - plot.y) / plot.height : (point.x - plot.x) / plot.width;
+  const valueRatio = (point) => horizontal ? (point.x - plot.x) / plot.width : 1 - (point.y - plot.y) / plot.height;
+  const dataToScreen = (point) => {
+    const category = point.category ?? point.x;
+    const value = point.value ?? point.y;
+    const categoryPosition = (category - categoryRange.min) / categorySpan;
+    const valuePosition = (value - valueRange.min) / valueSpan;
+    return horizontal ? {
+      x: plot.x + valuePosition * plot.width,
+      y: plot.y + categoryPosition * plot.height
+    } : {
+      x: plot.x + categoryPosition * plot.width,
+      y: plot.y + (1 - valuePosition) * plot.height
+    };
+  };
+  const screenToData = (point) => ({
+    x: categoryRange.min + categoryRatio(point) * categorySpan,
+    y: valueRange.min + valueRatio(point) * valueSpan
+  });
+  const categoryDragDelta = (start, current) => (horizontal ? current.y - start.y : current.x - start.x) / categoryPixelLength * categorySpan;
+  const valueOffsetDelta = (start, current) => horizontal ? -((current.x - start.x) / valuePixelLength) * valueSpan : (current.y - start.y) / valuePixelLength * valueSpan;
+  const categoryScaleDelta = (start, current) => horizontal ? current.y - start.y : current.x - start.x;
+  const valueScaleDelta = (start, current) => horizontal ? current.x - start.x : current.y - start.y;
+  const dataBoundsForRect = (rect) => {
+    const first = screenToData({ x: rect.left, y: rect.top });
+    const second = screenToData({
+      x: rect.left + rect.width,
+      y: rect.top + rect.height
+    });
+    return {
+      categoryMin: Math.min(first.x, second.x),
+      categoryMax: Math.max(first.x, second.x),
+      valueMin: Math.min(first.y, second.y),
+      valueMax: Math.max(first.y, second.y)
+    };
+  };
+  return Object.freeze({
+    categoryDragDelta,
+    categoryPixelLength,
+    categoryRatio,
+    categoryScaleDelta,
+    dataBoundsForRect,
+    dataToScreen,
+    horizontal,
+    orientation,
+    screenToData,
+    valueOffsetDelta,
+    valuePixelLength,
+    valueRatio,
+    valueScaleDelta
+  });
+};
+
+// src/core/renderers/webglUtils.js
+var INITIAL_GPU_VERTEX_CAPACITY = 4096;
+var createProgram = (gl, vertexSource, fragmentSource) => {
+  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();
+  const vertexShader = compile(gl.VERTEX_SHADER, vertexSource);
+  const fragmentShader = compile(gl.FRAGMENT_SHADER, fragmentSource);
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
+  }
+  return program;
+};
+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 getNextVertexCapacity = (currentCapacity, requiredCapacity) => {
+  let nextCapacity = Math.max(
+    INITIAL_GPU_VERTEX_CAPACITY,
+    currentCapacity || 0
+  );
+  while (nextCapacity < requiredCapacity) nextCapacity *= 2;
+  return nextCapacity;
+};
+var getDynamicBuffer = (gl, cache, key, requiredFloats) => {
+  let entry = cache.get(key);
+  if (!entry) {
+    entry = {
+      buffer: gl.createBuffer(),
+      gpuCapacity: 0,
+      vertices: new Float32Array(
+        getNextVertexCapacity(0, requiredFloats)
+      )
+    };
+    cache.set(key, entry);
+  }
+  if (entry.vertices.length < requiredFloats) {
+    entry.vertices = new Float32Array(
+      getNextVertexCapacity(entry.vertices.length, requiredFloats)
+    );
+  }
+  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 deleteBufferCache = (gl, cache) => {
+  cache.forEach((entry) => {
+    if (entry.buffer) gl.deleteBuffer(entry.buffer);
+  });
+  cache.clear();
+};
+
+// src/core/renderers/barRenderer.js
+var BAR_GROUP_WIDTH_RATIO = 0.8;
+var BAR_SLICE_WIDTH_RATIO = 0.9;
+var BAR_VERTEX_FLOAT_STRIDE = 3;
+var VERTEX_SOURCE = `#version 300 es
+  in vec2 a_unit;
+  in vec3 a_bar;
+  uniform vec2 u_resolution;
+  uniform vec4 u_rect;
+  uniform vec2 u_categoryRange;
+  uniform vec2 u_valueRange;
+  uniform float u_baseline;
+  uniform float u_seriesIndex;
+  uniform float u_seriesCount;
+  uniform int u_orientation;
+
+  void main() {
+    float groupWidth = a_bar.z * ${BAR_GROUP_WIDTH_RATIO.toFixed(1)};
+    float sliceWidth = groupWidth / max(1.0, u_seriesCount);
+    float center = a_bar.x - groupWidth * 0.5
+      + sliceWidth * (u_seriesIndex + 0.5);
+    float halfWidth = sliceWidth * ${(BAR_SLICE_WIDTH_RATIO / 2).toFixed(2)};
+    float category = mix(center - halfWidth, center + halfWidth, a_unit.x);
+    float value = mix(u_baseline, a_bar.y, a_unit.y);
+    float categoryDenom = max(
+      0.000000000001,
+      abs(u_categoryRange.y - u_categoryRange.x)
+    );
+    float valueDenom = max(
+      0.000000000001,
+      abs(u_valueRange.y - u_valueRange.x)
+    );
+    float categoryRatio = (category - u_categoryRange.x) / categoryDenom;
+    float valueRatio = (value - u_valueRange.x) / valueDenom;
+    vec2 px = u_orientation == 0
+      ? vec2(
+          u_rect.x + categoryRatio * u_rect.z,
+          u_rect.y + (1.0 - valueRatio) * u_rect.w
+        )
+      : vec2(
+          u_rect.x + valueRatio * u_rect.z,
+          u_rect.y + categoryRatio * u_rect.w
+        );
+    vec2 clip = (px / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+var FRAGMENT_SOURCE = `#version 300 es
+  precision highp float;
+  uniform vec3 u_color;
+  out vec4 outColor;
+
+  void main() {
+    outColor = vec4(u_color, 1.0);
+  }
+`;
+var getBarCategoryInterval = ({
+  visiblePoints,
+  index,
+  categoryMin,
+  categoryMax
+}) => {
+  const count = visiblePoints.pointCount;
+  const category = visiblePoints.x[index];
+  const fallbackInterval = (categoryMax - categoryMin) / Math.max(10, count || 1);
+  const previousGap = index > 0 ? category - visiblePoints.x[index - 1] : Infinity;
+  const nextGap = index + 1 < count ? visiblePoints.x[index + 1] - category : Infinity;
+  let interval = Math.min(
+    previousGap > 0 ? previousGap : Infinity,
+    nextGap > 0 ? nextGap : Infinity
+  );
+  if (!Number.isFinite(interval)) {
+    interval = Number.isFinite(previousGap) && previousGap > 0 ? previousGap : Number.isFinite(nextGap) && nextGap > 0 ? nextGap : fallbackInterval;
+  }
+  return Math.max(Number.EPSILON, interval || fallbackInterval || 1);
+};
+var getGroupedBarCategory = ({
+  visiblePoints,
+  pointIndex,
+  seriesIndex,
+  seriesCount,
+  categoryMin,
+  categoryMax
+}) => {
+  const category = visiblePoints.x[pointIndex];
+  const interval = getBarCategoryInterval({
+    visiblePoints,
+    index: pointIndex,
+    categoryMin,
+    categoryMax
+  });
+  const groupWidth = interval * BAR_GROUP_WIDTH_RATIO;
+  const sliceWidth = groupWidth / Math.max(1, seriesCount);
+  return category - groupWidth / 2 + sliceWidth * (seriesIndex + 0.5);
+};
+var fillBarInstances = ({
+  vertices,
+  visiblePoints,
+  categoryMin,
+  categoryMax
+}) => {
+  for (let index = 0; index < visiblePoints.pointCount; index += 1) {
+    const offset = index * BAR_VERTEX_FLOAT_STRIDE;
+    vertices[offset] = visiblePoints.x[index];
+    vertices[offset + 1] = visiblePoints.y[index];
+    vertices[offset + 2] = getBarCategoryInterval({
+      visiblePoints,
+      index,
+      categoryMin,
+      categoryMax
+    });
+  }
+  return visiblePoints.pointCount;
+};
+var createBarRenderer = (gl) => {
+  const program = createProgram(gl, VERTEX_SOURCE, FRAGMENT_SOURCE);
+  const quadBuffer = gl.createBuffer();
+  const buffers = /* @__PURE__ */ new Map();
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([
+      0,
+      0,
+      1,
+      0,
+      0,
+      1,
+      0,
+      1,
+      1,
+      0,
+      1,
+      1
+    ]),
+    gl.STATIC_DRAW
+  );
+  const locations = Object.freeze({
+    aBar: gl.getAttribLocation(program, "a_bar"),
+    aUnit: gl.getAttribLocation(program, "a_unit"),
+    uBaseline: gl.getUniformLocation(program, "u_baseline"),
+    uCategoryRange: gl.getUniformLocation(program, "u_categoryRange"),
+    uColor: gl.getUniformLocation(program, "u_color"),
+    uOrientation: gl.getUniformLocation(program, "u_orientation"),
+    uRect: gl.getUniformLocation(program, "u_rect"),
+    uResolution: gl.getUniformLocation(program, "u_resolution"),
+    uSeriesCount: gl.getUniformLocation(program, "u_seriesCount"),
+    uSeriesIndex: gl.getUniformLocation(program, "u_seriesIndex"),
+    uValueRange: gl.getUniformLocation(program, "u_valueRange")
+  });
+  return {
+    draw({
+      categoryPixelLength,
+      chart,
+      descriptor,
+      pixelHeight,
+      pixelWidth,
+      scaledPlot,
+      seriesOrderByChart,
+      state,
+      yRange
+    }) {
+      gl.disable(gl.BLEND);
+      gl.useProgram(program);
+      gl.enableVertexAttribArray(locations.aUnit);
+      gl.enableVertexAttribArray(locations.aBar);
+      gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+      gl.vertexAttribPointer(locations.aUnit, 2, gl.FLOAT, false, 0, 0);
+      gl.vertexAttribDivisor(locations.aUnit, 0);
+      gl.uniform2f(locations.uResolution, pixelWidth, pixelHeight);
+      gl.uniform4f(
+        locations.uRect,
+        scaledPlot.x,
+        scaledPlot.y,
+        scaledPlot.width,
+        scaledPlot.height
+      );
+      gl.uniform2f(
+        locations.uCategoryRange,
+        state.xMin,
+        state.xMax
+      );
+      gl.uniform2f(
+        locations.uValueRange,
+        yRange.minY,
+        yRange.maxY
+      );
+      gl.uniform1f(locations.uBaseline, 0);
+      gl.uniform1i(
+        locations.uOrientation,
+        descriptor.orientation === "horizontal" ? 1 : 0
+      );
+      const orderedSeries = getOrderedSeries(chart, seriesOrderByChart);
+      gl.uniform1f(locations.uSeriesCount, Math.max(1, orderedSeries.length));
+      orderedSeries.forEach((series, seriesIndex) => {
+        const visiblePoints = series.getVisiblePoints(
+          state.xMin,
+          state.xMax,
+          categoryPixelLength
+        );
+        if (!visiblePoints.pointCount) return;
+        const requiredFloats = visiblePoints.pointCount * BAR_VERTEX_FLOAT_STRIDE;
+        const bufferEntry = getDynamicBuffer(
+          gl,
+          buffers,
+          series.id,
+          requiredFloats
+        );
+        const instanceCount = fillBarInstances({
+          vertices: bufferEntry.vertices,
+          visiblePoints,
+          categoryMin: state.xMin,
+          categoryMax: state.xMax
+        });
+        const [r, g, b] = hexToRgb(series.color);
+        gl.uniform3f(locations.uColor, r, g, b);
+        gl.uniform1f(locations.uSeriesIndex, seriesIndex);
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
+        gl.vertexAttribPointer(
+          locations.aBar,
+          BAR_VERTEX_FLOAT_STRIDE,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+        gl.vertexAttribDivisor(locations.aBar, 1);
+        gl.bufferSubData(
+          gl.ARRAY_BUFFER,
+          0,
+          bufferEntry.vertices,
+          0,
+          instanceCount * BAR_VERTEX_FLOAT_STRIDE
+        );
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, instanceCount);
+      });
+      gl.vertexAttribDivisor(locations.aBar, 0);
+      return { seriesEndpoints: /* @__PURE__ */ new Map() };
+    },
+    getTooltipCategory(payload) {
+      return getGroupedBarCategory(payload);
+    },
+    destroy() {
+      deleteBufferCache(gl, buffers);
+      gl.deleteBuffer(quadBuffer);
+      gl.deleteProgram(program);
+    }
+  };
+};
+
+// 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 LodSeries = 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 LineSeries = class extends LodSeries {
+  constructor(options) {
+    super(options);
+    this.type = "line";
+  }
+};
+var BarSeries = class extends LodSeries {
+  constructor({ orientation = "vertical", ...options }) {
+    super(options);
+    if (orientation !== "vertical" && orientation !== "horizontal") {
+      throw new TypeError(
+        'BarSeries orientation must be "vertical" or "horizontal"'
+      );
+    }
+    this.type = "bar";
+    this.orientation = orientation;
+  }
+};
+var createLineSeries = (options) => new LineSeries(options);
+var createSeries = createLineSeries;
+var createBarSeries = (options) => new BarSeries(options);
+
+// src/core/renderers/lineRenderer.js
+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 LINE_VERTEX_SOURCE = `#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 clip = (vec2(px, py) / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+var LINE_FRAGMENT_SOURCE = `#version 300 es
+  precision highp float;
+  uniform vec3 u_color;
+  out vec4 outColor;
+
+  void main() {
+    outColor = vec4(u_color, 1.0);
+  }
+`;
+var AA_VERTEX_SOURCE = `#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 clip = (px / u_resolution) * 2.0 - 1.0;
+    v_side = a_side;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+var AA_FRAGMENT_SOURCE = `#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);
+  }
+`;
+var fillSeriesPoints = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  animatedPoint
+}) => {
+  for (let index = 0; index < pointCount; index += 1) {
+    const source = animatedPoint && index === animatedPoint.index ? animatedPoint : { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+    vertices[index * 2] = source.x;
+    vertices[index * 2 + 1] = source.y;
+  }
+};
+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 getSeriesPoint = (visiblePoints, animatedPoint, index) => animatedPoint && index === animatedPoint.index ? { x: animatedPoint.x, y: animatedPoint.y } : { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+var fillAntialiasSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  animatedPoint
+}) => {
+  let offset = 0;
+  for (let index = 0; index < pointCount - 1; index += 1) {
+    const start = getSeriesPoint(visiblePoints, animatedPoint, index);
+    const end = getSeriesPoint(visiblePoints, animatedPoint, index + 1);
+    [
+      [-1, 0],
+      [1, 0],
+      [-1, 1],
+      [-1, 1],
+      [1, 0],
+      [1, 1]
+    ].forEach(([side, along]) => {
+      writeAntialiasVertex(vertices, offset, start, end, side, along);
+      offset += AA_VERTEX_FLOAT_STRIDE;
+    });
+  }
+  return offset / AA_VERTEX_FLOAT_STRIDE;
+};
+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 fillDashedSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  state,
+  yRange,
+  plot
+}) => {
+  let offset = 0;
+  let distance = 0;
+  const dashTotal = DASH_LENGTH_PX + DASH_GAP_PX;
+  for (let index = 0; index < pointCount - 1; index += 1) {
+    const start = { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+    const end = {
+      x: visiblePoints.x[index + 1],
+      y: visiblePoints.y[index + 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;
+        vertices[offset] = start.x + (end.x - start.x) * t0;
+        vertices[offset + 1] = start.y + (end.y - start.y) * t0;
+        vertices[offset + 2] = start.x + (end.x - start.x) * t1;
+        vertices[offset + 3] = start.y + (end.y - start.y) * t1;
+        offset += 4;
+      }
+      consumed += step;
+      distance += step;
+    }
+  }
+  return offset / 2;
+};
+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 calculateMovingAverageChunk = ({
+  sourceY,
+  startIndex,
+  period,
+  type,
+  previousAverage
+}) => {
+  const out = new Float32Array(Math.max(0, sourceY.length - startIndex));
+  if (!out.length) return out;
+  if (type === "sma") {
+    let sum = 0;
+    const firstWindowStart = Math.max(0, startIndex - period + 1);
+    for (let index = firstWindowStart; index < startIndex; index += 1) {
+      sum += sourceY[index];
+    }
+    for (let index = startIndex; index < sourceY.length; index += 1) {
+      sum += sourceY[index];
+      const removeIndex = index - period;
+      if (removeIndex >= firstWindowStart) sum -= sourceY[removeIndex];
+      out[index - startIndex] = sum / Math.min(period, index + 1);
+    }
+    return out;
+  }
+  const multiplier = 2 / (period + 1);
+  let previous = Number.isFinite(previousAverage) ? previousAverage : sourceY[startIndex];
+  for (let index = startIndex; index < sourceY.length; index += 1) {
+    previous = sourceY[index] * multiplier + previous * (1 - multiplier);
+    out[index - startIndex] = previous;
+  }
+  return out;
+};
+var getMovingAverageSeriesForChart = ({
+  chart,
+  movingAverage,
+  cache
+}) => {
+  const normalized = normalizeMovingAverage(movingAverage);
+  if (!normalized) return [];
+  return chart.series.map((series) => {
+    if (!series.length) return null;
+    const key = `${series.id}::ma:${normalized.type}:${normalized.period}`;
+    const cached = cache.get(key);
+    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 movingY = calculateMovingAverageChunk({
+      sourceY: series.rawY.subarray(0, series.length),
+      startIndex: 0,
+      period: normalized.period,
+      type: normalized.type
+    });
+    const movingSeries = createLineSeries({
+      id: key,
+      name: `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`,
+      color: series.color,
+      x: series.rawX.subarray(0, series.length),
+      y: movingY
+    });
+    cache.set(key, {
+      sourceSeries: series,
+      sourceLength: series.length,
+      series: movingSeries
+    });
+    return movingSeries;
+  }).filter(Boolean);
+};
+var getLineLocations = (gl, program) => Object.freeze({
+  aXy: gl.getAttribLocation(program, "a_xy"),
+  uColor: gl.getUniformLocation(program, "u_color"),
+  uRect: gl.getUniformLocation(program, "u_rect"),
+  uResolution: gl.getUniformLocation(program, "u_resolution"),
+  uXRange: gl.getUniformLocation(program, "u_xRange"),
+  uYRange: gl.getUniformLocation(program, "u_yRange")
+});
+var createLineRenderer = (gl) => {
+  const program = createProgram(
+    gl,
+    LINE_VERTEX_SOURCE,
+    LINE_FRAGMENT_SOURCE
+  );
+  const antialiasProgram = createProgram(
+    gl,
+    AA_VERTEX_SOURCE,
+    AA_FRAGMENT_SOURCE
+  );
+  const locations = getLineLocations(gl, program);
+  const aaLocations = Object.freeze({
+    aAlong: gl.getAttribLocation(antialiasProgram, "a_along"),
+    aEnd: gl.getAttribLocation(antialiasProgram, "a_end"),
+    aSide: gl.getAttribLocation(antialiasProgram, "a_side"),
+    aStart: gl.getAttribLocation(antialiasProgram, "a_start"),
+    uColor: gl.getUniformLocation(antialiasProgram, "u_color"),
+    uEdgeWidth: gl.getUniformLocation(antialiasProgram, "u_edgeWidth"),
+    uLineHalfWidth: gl.getUniformLocation(antialiasProgram, "u_lineHalfWidth"),
+    uRect: gl.getUniformLocation(antialiasProgram, "u_rect"),
+    uResolution: gl.getUniformLocation(antialiasProgram, "u_resolution"),
+    uXRange: gl.getUniformLocation(antialiasProgram, "u_xRange"),
+    uYRange: gl.getUniformLocation(antialiasProgram, "u_yRange")
+  });
+  const buffers = /* @__PURE__ */ new Map();
+  const antialiasBuffers = /* @__PURE__ */ new Map();
+  const movingAverageCache = /* @__PURE__ */ new Map();
+  const setCommonUniforms = (activeLocations, pixelWidth, pixelHeight, scaledPlot, state, yRange) => {
+    gl.uniform2f(activeLocations.uResolution, pixelWidth, pixelHeight);
+    gl.uniform4f(
+      activeLocations.uRect,
+      scaledPlot.x,
+      scaledPlot.y,
+      scaledPlot.width,
+      scaledPlot.height
+    );
+    gl.uniform2f(activeLocations.uXRange, state.xMin, state.xMax);
+    gl.uniform2f(activeLocations.uYRange, yRange.minY, yRange.maxY);
+  };
+  return {
+    draw({
+      antialiasLines,
+      chart,
+      descriptor,
+      dpr,
+      getAppendAnimatedPoint,
+      movingAverage,
+      now,
+      pixelHeight,
+      pixelWidth,
+      plot,
+      scaledPlot,
+      seriesOrderByChart,
+      state,
+      yRange
+    }) {
+      const useAntialias = Boolean(antialiasLines);
+      const activeProgram = useAntialias ? antialiasProgram : program;
+      const activeLocations = useAntialias ? aaLocations : locations;
+      gl.useProgram(activeProgram);
+      setCommonUniforms(
+        activeLocations,
+        pixelWidth,
+        pixelHeight,
+        scaledPlot,
+        state,
+        yRange
+      );
+      if (useAntialias) {
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enableVertexAttribArray(aaLocations.aStart);
+        gl.enableVertexAttribArray(aaLocations.aEnd);
+        gl.enableVertexAttribArray(aaLocations.aSide);
+        gl.enableVertexAttribArray(aaLocations.aAlong);
+        gl.uniform1f(
+          aaLocations.uLineHalfWidth,
+          AA_LINE_WIDTH_PX * dpr / 2
+        );
+        gl.uniform1f(aaLocations.uEdgeWidth, AA_EDGE_WIDTH_PX * dpr);
+      } else {
+        gl.disable(gl.BLEND);
+        gl.enableVertexAttribArray(locations.aXy);
+      }
+      const seriesEndpoints = /* @__PURE__ */ new Map();
+      const hideBaseSeries = descriptor.capabilities.movingAverage && Boolean(movingAverage?.enabled) && Boolean(movingAverage?.hideBase);
+      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(activeLocations.uColor, r, g, b);
+          if (useAntialias) {
+            const requiredFloats = Math.max(0, pointCount - 1) * 6 * AA_VERTEX_FLOAT_STRIDE;
+            const entry2 = getDynamicBuffer(
+              gl,
+              antialiasBuffers,
+              series.id,
+              requiredFloats
+            );
+            const drawVertexCount = fillAntialiasSeriesSegments({
+              vertices: entry2.vertices,
+              visiblePoints,
+              pointCount,
+              animatedPoint
+            });
+            const stride = AA_VERTEX_FLOAT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
+            gl.bindBuffer(gl.ARRAY_BUFFER, entry2.buffer);
+            gl.vertexAttribPointer(
+              aaLocations.aStart,
+              2,
+              gl.FLOAT,
+              false,
+              stride,
+              0
+            );
+            gl.vertexAttribPointer(
+              aaLocations.aEnd,
+              2,
+              gl.FLOAT,
+              false,
+              stride,
+              2 * Float32Array.BYTES_PER_ELEMENT
+            );
+            gl.vertexAttribPointer(
+              aaLocations.aSide,
+              1,
+              gl.FLOAT,
+              false,
+              stride,
+              4 * Float32Array.BYTES_PER_ELEMENT
+            );
+            gl.vertexAttribPointer(
+              aaLocations.aAlong,
+              1,
+              gl.FLOAT,
+              false,
+              stride,
+              5 * Float32Array.BYTES_PER_ELEMENT
+            );
+            gl.bufferSubData(
+              gl.ARRAY_BUFFER,
+              0,
+              entry2.vertices,
+              0,
+              drawVertexCount * AA_VERTEX_FLOAT_STRIDE
+            );
+            gl.drawArrays(gl.TRIANGLES, 0, drawVertexCount);
+            return;
+          }
+          const entry = getDynamicBuffer(
+            gl,
+            buffers,
+            series.id,
+            pointCount * 2
+          );
+          fillSeriesPoints({
+            vertices: entry.vertices,
+            visiblePoints,
+            pointCount,
+            animatedPoint
+          });
+          gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+          gl.vertexAttribPointer(locations.aXy, 2, gl.FLOAT, false, 0, 0);
+          gl.bufferSubData(
+            gl.ARRAY_BUFFER,
+            0,
+            entry.vertices,
+            0,
+            pointCount * 2
+          );
+          gl.drawArrays(gl.LINE_STRIP, 0, pointCount);
+        });
+      }
+      const movingSeries = getMovingAverageSeriesForChart({
+        chart,
+        movingAverage: descriptor.capabilities.movingAverage ? movingAverage : null,
+        cache: movingAverageCache
+      });
+      if (movingSeries.length) {
+        gl.disable(gl.BLEND);
+        gl.useProgram(program);
+        gl.enableVertexAttribArray(locations.aXy);
+        setCommonUniforms(
+          locations,
+          pixelWidth,
+          pixelHeight,
+          scaledPlot,
+          state,
+          yRange
+        );
+        getOrderedSeries(
+          { ...chart, series: movingSeries },
+          seriesOrderByChart
+        ).forEach((series) => {
+          const visiblePoints = series.getVisiblePoints(
+            state.xMin,
+            state.xMax,
+            plot.width
+          );
+          if (visiblePoints.pointCount < 2) return;
+          const entry = getDynamicBuffer(
+            gl,
+            buffers,
+            series.id,
+            visiblePoints.pointCount * 8 * 2
+          );
+          const drawVertexCount = fillDashedSeriesSegments({
+            vertices: entry.vertices,
+            visiblePoints,
+            pointCount: visiblePoints.pointCount,
+            state,
+            yRange,
+            plot
+          });
+          if (drawVertexCount < 2) return;
+          const [r, g, b] = hexToRgb(series.color);
+          gl.uniform3f(locations.uColor, r, g, b);
+          gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+          gl.vertexAttribPointer(locations.aXy, 2, gl.FLOAT, false, 0, 0);
+          gl.bufferSubData(
+            gl.ARRAY_BUFFER,
+            0,
+            entry.vertices,
+            0,
+            drawVertexCount * 2
+          );
+          gl.drawArrays(gl.LINES, 0, drawVertexCount);
+        });
+      }
+      gl.disable(gl.BLEND);
+      return { seriesEndpoints };
+    },
+    destroy() {
+      deleteBufferCache(gl, buffers);
+      deleteBufferCache(gl, antialiasBuffers);
+      movingAverageCache.clear();
+      gl.deleteProgram(program);
+      gl.deleteProgram(antialiasProgram);
+    }
+  };
+};
+
+// src/core/renderers/index.js
+var RENDERER_FACTORIES = Object.freeze({
+  bar: createBarRenderer,
+  line: createLineRenderer
+});
+var createRendererRegistry = (gl) => {
+  const renderers = new Map(
+    Object.entries(RENDERER_FACTORIES).map(([type, createRenderer]) => [
+      type,
+      createRenderer(gl)
+    ])
+  );
+  return {
+    draw(type, payload) {
+      const renderer = renderers.get(type);
+      if (!renderer) {
+        throw new TypeError(`No AlienCharts renderer registered for "${type}"`);
+      }
+      return renderer.draw(payload);
+    },
+    getTooltipCategory(type, payload) {
+      const renderer = renderers.get(type);
+      if (!renderer) {
+        throw new TypeError(`No AlienCharts renderer registered for "${type}"`);
+      }
+      return renderer.getTooltipCategory?.(payload) ?? payload.visiblePoints.x[payload.pointIndex];
+    },
+    destroy() {
+      renderers.forEach((renderer) => renderer.destroy());
+      renderers.clear();
+    }
+  };
+};
+
+// src/core/chartRenderer.js
+var CHART_HEIGHT = 360;
+var RIGHT_AXIS_WIDTH = 58;
+var PLOT_PADDING = Object.freeze({
+  left: 38,
+  right: RIGHT_AXIS_WIDTH,
+  top: 34,
+  bottom: 28
+});
+var HORIZONTAL_PLOT_PADDING = Object.freeze({
+  left: RIGHT_AXIS_WIDTH,
+  right: 20,
+  top: 34,
+  bottom: 28
+});
+var CATEGORICAL_PLOT_PADDING = Object.freeze({
+  ...PLOT_PADDING,
+  bottom: 42
+});
+var CATEGORICAL_HORIZONTAL_PLOT_PADDING = Object.freeze({
+  ...HORIZONTAL_PLOT_PADDING,
+  left: 128
+});
+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 DEFAULT_CHART_BACKGROUND = "#f5f9ff";
+var getChartOrientation = (chart, descriptor) => (descriptor || resolveChartDescriptor(chart)).orientation;
+var getPlotPadding = (chart, descriptor) => {
+  const categorical = getChartCategories(chart).length > 0;
+  if (getChartOrientation(chart, descriptor) === "horizontal") {
+    return categorical ? CATEGORICAL_HORIZONTAL_PLOT_PADDING : HORIZONTAL_PLOT_PADDING;
+  }
+  return categorical ? CATEGORICAL_PLOT_PADDING : PLOT_PADDING;
+};
+var getCategoryPixelLength = (chart, plot, descriptor) => getChartOrientation(chart, descriptor) === "horizontal" ? plot.height : plot.width;
+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 lowerBound2 = (array, value) => {
+  let low = 0;
+  let high = array.length;
+  while (low < high) {
+    const middle = low + high >> 1;
+    if (array[middle] < value) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+};
+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) return;
+    minX = Math.min(minX, series.rawX[0]);
+    maxX = Math.max(maxX, series.rawX[series.length - 1]);
+  });
+  return { minX, maxX };
+};
+var getMinimumCategorySpan = (chart) => {
+  const categories = getChartCategories(chart).map((category) => category.value).sort((left, right) => left - right);
+  if (!categories.length) return X_SCALE_MIN_SPAN;
+  let minimumGap = Infinity;
+  for (let index = 1; index < categories.length; index += 1) {
+    minimumGap = Math.min(minimumGap, categories[index] - categories[index - 1]);
+  }
+  return Number.isFinite(minimumGap) ? minimumGap : 1;
+};
+var getInitialView = (chart, initialVisiblePoints = null) => {
+  const categories = getChartCategories(chart).map((category) => category.value).sort((left, right) => left - right);
+  if (categories.length) {
+    const requestedCount = Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0 ? Math.max(1, Math.floor(initialVisiblePoints)) : categories.length;
+    const visible = categories.slice(-requestedCount);
+    const first = visible[0];
+    const last = visible[visible.length - 1];
+    const firstIndex = categories.indexOf(first);
+    const lastIndex = categories.lastIndexOf(last);
+    const leftGap = firstIndex > 0 ? first - categories[firstIndex - 1] : visible[1] - first || 1;
+    const rightGap = lastIndex + 1 < categories.length ? categories[lastIndex + 1] - last : last - visible[visible.length - 2] || leftGap;
+    return {
+      xMin: first - leftGap / 2,
+      xMax: last + rightGap / 2
+    };
+  }
+  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 nextMax = maxX + span2 * JUMP_LATEST_RIGHT_PADDING_RATIO;
+    return { xMin: nextMax - span2, xMax: nextMax };
+  }
+  let span = maxX - minX;
+  if (Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0) {
+    span = Math.min(span, initialVisiblePoints);
+    const nextMax = maxX + span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+    return { xMin: nextMax - span, xMax: nextMax };
+  }
+  return {
+    xMin: minX,
+    xMax: maxX + span * JUMP_LATEST_RIGHT_PADDING_RATIO
+  };
+};
+var getYRange = (chart, xMin, xMax, width, suppliedDescriptor) => {
+  const descriptor = suppliedDescriptor || resolveChartDescriptor(chart);
+  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 index = 0; index < visible.y.length; index += 1) {
+      minY = Math.min(minY, visible.y[index]);
+      maxY = Math.max(maxY, visible.y[index]);
+    }
+  });
+  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 (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
+    return { minY: 0, maxY: 1, renderedPoints, bucketSize };
+  }
+  if (descriptor.rangeIncludesZero) {
+    if (minY >= 0) {
+      return {
+        minY: 0,
+        maxY: maxY === 0 ? 1 : maxY * 1.08,
+        renderedPoints,
+        bucketSize
+      };
+    }
+    if (maxY <= 0) {
+      return {
+        minY: minY === 0 ? -1 : minY * 1.08,
+        maxY: 0,
+        renderedPoints,
+        bucketSize
+      };
+    }
+  }
+  if (minY === maxY) {
+    minY -= 1;
+    maxY += 1;
+  }
+  const padding = (maxY - minY) * 0.08;
+  return {
+    minY: minY - padding,
+    maxY: maxY + padding,
+    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 absolute = Math.abs(value);
+  if (absolute !== 0 && absolute < 1e-4) return value.toExponential(2);
+  if (absolute < 1) return trimFormattedNumber(value.toPrecision(5));
+  if (absolute >= 1e5) return value.toFixed(0);
+  if (absolute >= 1e3) return trimFormattedNumber(value.toFixed(1));
+  if (absolute >= 10) return trimFormattedNumber(value.toFixed(2));
+  return trimFormattedNumber(value.toFixed(4));
+};
+var formatCompactNumber = (value) => {
+  if (!Number.isFinite(value)) return "";
+  const absolute = Math.abs(value);
+  if (absolute >= 1e9) {
+    return `${(value / 1e9).toFixed(
+      absolute >= 1e10 ? 0 : 1
+    )}B`;
+  }
+  if (absolute >= 1e6) {
+    return `${(value / 1e6).toFixed(
+      absolute >= 1e7 ? 0 : 1
+    )}M`;
+  }
+  if (absolute >= 1e3) {
+    return `${(value / 1e3).toFixed(absolute >= 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 getScaledYRangeForLayout = ({
+  chart,
+  descriptor,
+  state,
+  plot,
+  yScaleRef,
+  yCenterOffsetRef
+}) => applyYScale(
+  getYRange(
+    chart,
+    state.xMin,
+    state.xMax,
+    getCategoryPixelLength(chart, plot, descriptor),
+    descriptor
+  ),
+  yScaleRef.current.get(chart.id) ?? 1,
+  yCenterOffsetRef.current.get(chart.id) ?? 0
+);
+var applyRectangleZoom = ({
+  chart,
+  descriptor: suppliedDescriptor,
+  plot,
+  start,
+  end,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  yManualScaleRef
+}) => {
+  const rect = normalizeRect(
+    clampPointToPlot(start, plot),
+    clampPointToPlot(end, plot)
+  );
+  if (!rect || rect.width < 6 || rect.height < 6) return false;
+  const descriptor = suppliedDescriptor || resolveChartDescriptor(chart);
+  const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+  const currentYRange = getScaledYRangeForLayout({
+    chart,
+    descriptor,
+    state,
+    plot,
+    yScaleRef,
+    yCenterOffsetRef
+  });
+  const transform = createCoordinateTransform({
+    orientation: descriptor.orientation,
+    categoryRange: { min: state.xMin, max: state.xMax },
+    valueRange: {
+      min: currentYRange.minY,
+      max: currentYRange.maxY
+    },
+    plot
+  });
+  const selected = transform.dataBoundsForRect(rect);
+  if (selected.categoryMax - selected.categoryMin < getMinimumCategorySpan(chart)) {
+    return false;
+  }
+  const selectedSpan = selected.valueMax - selected.valueMin;
+  if (!Number.isFinite(selectedSpan) || selectedSpan <= 0) return false;
+  viewStateRef.current.set(chart.id, {
+    xMin: selected.categoryMin,
+    xMax: selected.categoryMax
+  });
+  const baseYRange = getYRange(
+    chart,
+    selected.categoryMin,
+    selected.categoryMax,
+    getCategoryPixelLength(chart, plot, descriptor),
+    descriptor
+  );
+  const baseSpan = baseYRange.maxY - baseYRange.minY;
+  if (Number.isFinite(baseSpan) && baseSpan > 0) {
+    const selectedCenter = (selected.valueMin + selected.valueMax) / 2;
+    const baseCenter = (baseYRange.minY + baseYRange.maxY) / 2;
+    yScaleRef.current.set(
+      chart.id,
+      Math.min(
+        Y_SCALE_MAX,
+        Math.max(Y_SCALE_MIN, selectedSpan / baseSpan)
+      )
+    );
+    yCenterOffsetRef.current.set(chart.id, selectedCenter - baseCenter);
+    yManualScaleRef.current.add(chart.id);
+  }
+  return true;
+};
+var screenPointToDataPoint = ({
+  point,
+  chart,
+  descriptor: suppliedDescriptor,
+  plot,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef
+}) => {
+  const descriptor = suppliedDescriptor || resolveChartDescriptor(chart);
+  const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+  const yRange = getScaledYRangeForLayout({
+    chart,
+    descriptor,
+    state,
+    plot,
+    yScaleRef,
+    yCenterOffsetRef
+  });
+  return createCoordinateTransform({
+    orientation: descriptor.orientation,
+    categoryRange: { min: state.xMin, max: state.xMax },
+    valueRange: { min: yRange.minY, max: yRange.maxY },
+    plot
+  }).screenToData(point);
+};
+var createAxisOverlay = ({
+  chart,
+  descriptor,
+  plot,
+  state,
+  yRange,
+  seriesEndpoints,
+  seriesOrderByChart
+}) => {
+  const horizontal = descriptor.orientation === "horizontal";
+  const transform = createCoordinateTransform({
+    orientation: descriptor.orientation,
+    categoryRange: { min: state.xMin, max: state.xMax },
+    valueRange: { min: yRange.minY, max: yRange.maxY },
+    plot: { x: 0, y: 0, width: plot.width, height: plot.height }
+  });
+  const ticks = Array.from({ length: Y_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = index / (Y_AXIS_TICK_COUNT - 1);
+    const value = yRange.maxY - ratio * (yRange.maxY - yRange.minY);
+    const screen = transform.dataToScreen({
+      x: state.xMin,
+      y: value
+    });
+    return {
+      id: `${chart.id}-tick-${index}`,
+      value,
+      top: horizontal ? void 0 : screen.y,
+      left: horizontal ? screen.x : void 0
+    };
+  });
+  const categories = getChartCategories(chart);
+  const visibleCategories = categories.filter(
+    (category) => category.value >= state.xMin && category.value <= state.xMax
+  ).sort((left, right) => left.value - right.value);
+  const categoryPixelLength = horizontal ? plot.height : plot.width;
+  const maximumCategoryLabels = Math.max(
+    1,
+    Math.floor(categoryPixelLength / (horizontal ? 22 : 72))
+  );
+  const categoryLabelStride = Math.max(
+    1,
+    Math.ceil(visibleCategories.length / maximumCategoryLabels)
+  );
+  const displayedCategories = visibleCategories.filter(
+    (_, index) => index % categoryLabelStride === 0 || index === visibleCategories.length - 1
+  );
+  const xTicks = categories.length ? displayedCategories.map((category, index) => {
+    const screen = transform.dataToScreen({
+      x: category.value,
+      y: yRange.minY
+    });
+    return {
+      id: `${chart.id}-category-${index}-${category.value}`,
+      categorical: true,
+      label: category.label,
+      value: category.value,
+      left: horizontal ? void 0 : screen.x,
+      top: horizontal ? screen.y : void 0
+    };
+  }) : Array.from({ length: X_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = index / (X_AXIS_TICK_COUNT - 1);
+    return {
+      id: `${chart.id}-x-tick-${index}`,
+      value: state.xMin + ratio * (state.xMax - state.xMin),
+      left: horizontal ? void 0 : 18 + ratio * Math.max(1, plot.width - 36),
+      top: horizontal ? 10 + ratio * Math.max(1, plot.height - 20) : void 0
+    };
+  });
+  const latestValues = descriptor.capabilities.latestValue ? getOrderedSeries(chart, seriesOrderByChart).map((series) => {
+    if (!series.length) 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 screen = transform.dataToScreen(endpoint);
+    return {
+      id: series.id,
+      color: series.color,
+      textColor: getSeriesLabelTextColor(series),
+      value: endpoint.y,
+      rawValue: value,
+      x,
+      left: screen.x,
+      top: screen.y
+    };
+  }).filter(
+    (item) => item && Number.isFinite(item.top) && item.top >= -10 && item.top <= plot.height + 10
+  ) : [];
+  const { maxX } = getChartXBounds(chart);
+  return {
+    orientation: descriptor.orientation,
+    ticks,
+    xTicks,
+    latestValues,
+    plotWidth: plot.width,
+    showJumpLatest: Number.isFinite(maxX) && (maxX < state.xMin || maxX > state.xMax)
+  };
+};
+var drawChartLayouts = ({
+  canvas,
+  width,
+  height,
+  gl,
+  rendererRegistry,
+  antialiasLines = false,
+  layouts,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  initialVisiblePoints,
+  getAppendAnimatedPoint,
+  movingAverageByChart,
+  seriesOrderByChart
+}) => {
+  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 now = performance.now();
+  const nextAxisOverlays = {};
+  layouts.forEach((layout) => {
+    if (!layout.visible) return;
+    const { chart, plot } = layout;
+    const descriptor = layout.descriptor || getChartDescriptor(chart);
+    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 categoryPixelLength = getCategoryPixelLength(
+      chart,
+      plot,
+      descriptor
+    );
+    const yRange = applyYScale(
+      getYRange(
+        chart,
+        state.xMin,
+        state.xMax,
+        categoryPixelLength,
+        descriptor
+      ),
+      yScaleRef.current.get(chart.id) ?? 1,
+      yCenterOffsetRef.current.get(chart.id) ?? 0
+    );
+    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)
+    );
+    const result = rendererRegistry.draw(descriptor.rendererType, {
+      antialiasLines,
+      categoryPixelLength,
+      chart,
+      descriptor,
+      dpr,
+      getAppendAnimatedPoint,
+      movingAverage: movingAverageByChart?.[chart.id],
+      now,
+      pixelHeight,
+      pixelWidth,
+      plot,
+      scaledPlot,
+      seriesOrderByChart,
+      state,
+      yRange
+    });
+    nextAxisOverlays[chart.id] = createAxisOverlay({
+      chart,
+      descriptor,
+      plot,
+      state,
+      yRange,
+      seriesEndpoints: result?.seriesEndpoints || /* @__PURE__ */ new Map(),
+      seriesOrderByChart
+    });
+    gl.disable(gl.SCISSOR_TEST);
+  });
+  gl.disable(gl.BLEND);
+  return nextAxisOverlays;
+};
+
+// src/vanilla/createChartGrid.js
+var BASE_ROOT_CLASSES = ["aliencharts-root", "relative", "h-full", "overflow-y-auto"];
+var EMPTY_OBJECT = Object.freeze({});
+var controllerIdSequence = 0;
+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_OBJECT,
+  topMarkers: [],
+  formatXTick: formatCompactNumber,
+  formatXValue: formatNumber,
+  formatYValue: formatNumber
+});
+var APPEND_ANIMATION = Object.freeze({
+  durationMs: 300,
+  maxBucketSize: 64,
+  maxRevealPoints: 100
+});
+var POINTER_SCALE_SENSITIVITY = 0.01;
+var WHEEL_SCALE_SENSITIVITY = 1e-3;
+var scaleValueRange = (scale, delta, sensitivity) => clamp(
+  scale * Math.exp(delta * sensitivity),
+  Y_SCALE_MIN,
+  Y_SCALE_MAX
+);
+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, descriptor, index, backgroundColor) => {
+  const padding = getPlotPadding(chart, descriptor);
+  const horizontal = descriptor.orientation === "horizontal";
+  const valueAxisStyle = horizontal ? `left:${padding.left}px;right:${padding.right}px;bottom:0;height:${padding.bottom}px;cursor:ew-resize` : `right:0;top:${padding.top}px;bottom:${padding.bottom}px;width:${padding.right}px;cursor:ns-resize`;
+  const categoryAxisStyle = horizontal ? `left:0;top:${padding.top}px;bottom:${padding.bottom}px;width:${padding.left}px;cursor:ns-resize` : `left:${padding.left}px;right:${padding.right}px;bottom:0;height:${padding.bottom}px;cursor:ew-resize`;
+  return `
+  <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 z-20" style="${valueAxisStyle}"></div>
+    <div data-x-axis class="absolute z-20" style="${categoryAxisStyle}"></div>
+    <div data-toolbar></div>
+  </div>`;
+};
+var makeSurface = (canvas, gl) => ({
+  canvas,
+  gl,
+  renderers: createRendererRegistry(gl)
+});
+var destroySurface = (surface) => {
+  if (!surface) return;
+  surface.renderers.destroy();
+  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, descriptors) {
+    const now = performance.now();
+    charts.forEach((chart) => {
+      const descriptor = descriptors.get(chart.id);
+      if (!descriptor?.capabilities.appendAnimation) return;
+      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.controllerId = `aliencharts-${controllerIdSequence += 1}`;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    if (!Array.isArray(this.options.charts)) throw new TypeError("charts must be an array");
+    this.chartDescriptors = resolveChartDescriptors(this.options.charts);
+    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.chartDescriptors);
+    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;
+    const nextOptions = { ...this.options, ...next };
+    if (!Array.isArray(nextOptions.charts)) throw new TypeError("charts must be an array");
+    const nextDescriptors = resolveChartDescriptors(nextOptions.charts);
+    const descriptorLayoutChanged = nextOptions.charts.some((chart) => {
+      const previous = this.chartDescriptors.get(chart.id);
+      const current = nextDescriptors.get(chart.id);
+      return previous?.rendererType !== current?.rendererType || previous?.orientation !== current?.orientation || previous?.categorical !== current?.categorical;
+    });
+    this.options = nextOptions;
+    this.chartDescriptors = nextDescriptors;
+    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 || descriptorLayoutChanged || 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.chartDescriptors);
+    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(
+        getMinimumCategorySpan(chart),
+        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,
+      this.chartDescriptors.get(chart.id),
+      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 descriptor = this.chartDescriptors.get(chart.id);
+      const padding = getPlotPadding(chart, descriptor);
+      const layout = {
+        chart,
+        descriptor,
+        rect: { x, y, width: rect.width, height: rect.height },
+        plot: {
+          x: x + padding.left,
+          y: y + padding.top,
+          width: Math.max(1, rect.width - padding.left - padding.right),
+          height: Math.max(1, rect.height - padding.top - 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,
+      rendererRegistry: surface.renderers,
+      antialiasLines: this.options.antialiasLines,
+      layouts,
+      viewStateRef: { current: this.viewStates },
+      yScaleRef: { current: this.yScales },
+      yCenterOffsetRef: { current: this.yOffsets },
+      initialVisiblePoints: this.options.initialVisiblePoints,
+      getAppendAnimatedPoint: (payload) => this.animator.getPoint(payload),
+      movingAverageByChart: this.movingAverageByChart,
+      seriesOrderByChart: this.options.seriesOrderByChart
+    });
+  }
+  updateCells(layouts, axes, fullscreen) {
+    layouts.forEach(({ chart, descriptor, node }) => {
+      const axis = axes[chart.id];
+      const padding = getPlotPadding(chart, descriptor);
+      const horizontal = axis?.orientation === "horizontal";
+      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: `${padding.left}px`,
+        right: `${padding.right}px`,
+        top: `${padding.top}px`,
+        bottom: `${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) => horizontal ? `<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.formatYValue(tick.value))}</div>` : `<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) => {
+        const label = tick.categorical ? tick.label : this.options.formatXTick(tick.value);
+        if (horizontal && tick.categorical) {
+          return `<div data-category-label title="${escapeHtml(label)}" class="pointer-events-none absolute inset-x-2 -translate-y-1/2 truncate text-right text-[11px] font-medium text-foreground/70" style="top:${tick.top}px">${escapeHtml(label)}</div>`;
+        }
+        if (tick.categorical) {
+          return `<div data-category-label title="${escapeHtml(label)}" class="pointer-events-none absolute top-1/2 w-24 -translate-x-1/2 -translate-y-1/2 truncate text-center text-[11px] font-medium text-foreground/70" style="left:${tick.left}px">${escapeHtml(label)}</div>`;
+        }
+        return horizontal ? `<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(label)}</div>` : `<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(label)}</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:${padding.left + item.left}px;top:${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;
+    const descriptor = this.chartDescriptors.get(chart.id);
+    const drawingsAvailable = descriptor.capabilities.drawings;
+    const movingAverageAvailable = descriptor.capabilities.movingAverage;
+    const padding = getPlotPadding(chart, descriptor);
+    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:${padding.right + 6}px;bottom:${padding.bottom + 6}px;background:${withAlpha(this.options.backgroundColor, 0.7)}">${iconSvg("arrowLineRight", { className: axis.orientation === "horizontal" ? "rotate-90" : "" })}</button>`;
+    if (focused && this.options.showToolbar) {
+      const moving = movingAverageAvailable && 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 (drawingsAvailable && !this.options.disableDrawings && hasDrawings) html += toolbarButton({ action: "clear-drawings", title: "Clear drawings", className: "text-orange-500", icon: iconSvg("broom") });
+      if ((drawingsAvailable || movingAverageAvailable) && !this.options.disableDrawings) {
+        html += '<div class="my-1 h-px w-full"></div>';
+        if (drawingsAvailable) {
+          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") });
+        }
+        if (movingAverageAvailable) html += toolbarButton({ action: "moving-average", title: "Toggle moving average", hotkey: "M", active: moving, icon: iconSvg("waveSine") });
+      }
+      html += "</div>";
+      if (movingAverageAvailable && !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 drawableLayouts = layouts.map((layout, index) => ({
+      layout,
+      index,
+      drawings: layout.descriptor.capabilities.drawings ? getDrawingsForChart(drawings, layout.chart.id) : []
+    })).filter((entry) => entry.drawings.length > 0);
+    if (!drawableLayouts.length) return "";
+    const definitions = drawableLayouts.map(({ layout, index }) => {
+      const clipId = `${this.controllerId}-drawing-clip-${layout.fullscreen ? "fullscreen" : "grid"}-${index}`;
+      return `<clipPath id="${clipId}"><rect data-drawing-clip="${escapeHtml(layout.chart.id)}" x="${layout.plot.x}" y="${layout.plot.y}" width="${layout.plot.width}" height="${layout.plot.height}"/></clipPath>`;
+    }).join("");
+    const body = drawableLayouts.map(({ layout, index, drawings: chartDrawings }) => {
+      const clipId = `${this.controllerId}-drawing-clip-${layout.fullscreen ? "fullscreen" : "grid"}-${index}`;
+      const chartBody = chartDrawings.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 `<g data-drawing-chart="${escapeHtml(layout.chart.id)}" clip-path="url(#${clipId})">${chartBody}</g>`;
+    }).join("");
+    return `<svg class="pointer-events-none absolute left-0 top-0 z-20 block overflow-visible" style="width:100%;height:100%"><defs>${definitions}</defs>${body}</svg>`;
+  }
+  topMarkersHtml(layouts) {
+    if (!this.options.topMarkers?.length) return "";
+    return layouts.flatMap((layout) => !layout.descriptor.capabilities.markers ? [] : 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 "";
+    const chart = this.options.charts.find(
+      (item) => item.id === crosshair.chartId
+    );
+    const xAxisLabel = chart?.xAxisLabel ?? this.options.xAxisLabel;
+    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(xAxisLabel)}: ${escapeHtml(crosshair.categoryLabel ?? 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 || !layout.descriptor.capabilities.drawings) 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 = this.getRange(layout, state);
+    return this.getTransform(layout, state, range).dataToScreen(point);
+  }
+  getRange(layout, state = this.viewStates.get(layout.chart.id)) {
+    return applyYScale(
+      getYRange(
+        layout.chart,
+        state.xMin,
+        state.xMax,
+        getCategoryPixelLength(
+          layout.chart,
+          layout.plot,
+          layout.descriptor
+        ),
+        layout.descriptor
+      ),
+      this.yScales.get(layout.chart.id),
+      this.yOffsets.get(layout.chart.id)
+    );
+  }
+  getTransform(layout, state, range) {
+    return createCoordinateTransform({
+      orientation: layout.descriptor.orientation,
+      categoryRange: { min: state.xMin, max: state.xMax },
+      valueRange: { min: range.minY, max: range.maxY },
+      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 && layout.descriptor.capabilities.drawings) {
+      const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, 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 = layout.descriptor.capabilities.drawings ? this.hitDrawing(point, layout) : null;
+      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 (layout.descriptor.orientation === "vertical" && 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 (layout.descriptor.orientation === "horizontal" && point.y >= layout.plot.y + layout.plot.height) {
+      this.drag = { type: "y-scale", layout, start: point, scale: this.yScales.get(layout.chart.id) || 1 };
+    } else if (layout.descriptor.orientation === "vertical" && point.y >= layout.plot.y + layout.plot.height) {
+      this.drag = { type: "x-scale", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) } };
+    } else if (layout.descriptor.orientation === "horizontal" && point.x <= layout.plot.x) {
+      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, descriptor: layout.descriptor, 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, descriptor, plot } = this.drag.layout;
+      if (this.drag.type === "drawing-edit") {
+        const dataPoint = screenPointToDataPoint({ point, chart, descriptor, 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 baseRange = getYRange(
+          chart,
+          this.drag.state.xMin,
+          this.drag.state.xMax,
+          getCategoryPixelLength(chart, plot, descriptor),
+          descriptor
+        );
+        const rangeSpan = (baseRange.maxY - baseRange.minY) * (this.yScales.get(chart.id) || 1);
+        const transform = createCoordinateTransform({
+          orientation: descriptor.orientation,
+          categoryRange: {
+            min: this.drag.state.xMin,
+            max: this.drag.state.xMax
+          },
+          valueRange: { min: 0, max: rangeSpan },
+          plot
+        });
+        const categoryDelta = transform.categoryDragDelta(
+          this.drag.start,
+          point
+        );
+        const valueDelta = transform.valueOffsetDelta(
+          this.drag.start,
+          point
+        );
+        this.viewStates.set(chart.id, { xMin: this.drag.state.xMin - categoryDelta, xMax: this.drag.state.xMax - categoryDelta });
+        this.yOffsets.set(chart.id, this.drag.yOffset + valueDelta);
+      }
+      if (this.drag.type === "y-scale") {
+        const transform = createCoordinateTransform({
+          orientation: descriptor.orientation,
+          categoryRange: { min: 0, max: 1 },
+          valueRange: { min: 0, max: 1 },
+          plot
+        });
+        const delta = transform.valueScaleDelta(this.drag.start, point);
+        this.yScales.set(
+          chart.id,
+          scaleValueRange(
+            this.drag.scale,
+            delta,
+            POINTER_SCALE_SENSITIVITY
+          )
+        );
+      }
+      if (this.drag.type === "x-scale") {
+        const center = (this.drag.state.xMin + this.drag.state.xMax) / 2;
+        const transform = createCoordinateTransform({
+          orientation: descriptor.orientation,
+          categoryRange: { min: 0, max: 1 },
+          valueRange: { min: 0, max: 1 },
+          plot
+        });
+        const delta = transform.categoryScaleDelta(this.drag.start, point);
+        const span = clamp(
+          (this.drag.state.xMax - this.drag.state.xMin) * Math.exp(delta * 0.01),
+          getMinimumCategorySpan(chart),
+          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);
+        this.requestRender();
+      } 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,
+          descriptor: layout.descriptor,
+          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();
+    if (event.shiftKey) {
+      const wheelDelta = event.deltaY || event.deltaX;
+      const currentScale = this.yScales.get(layout.chart.id) || 1;
+      this.yScales.set(
+        layout.chart.id,
+        scaleValueRange(
+          currentScale,
+          wheelDelta,
+          WHEEL_SCALE_SENSITIVITY
+        )
+      );
+      this.requestRender();
+      return;
+    }
+    const state = this.viewStates.get(layout.chart.id);
+    const range = this.getRange(layout, state);
+    const ratio = clamp(
+      this.getTransform(layout, state, range).categoryRatio(point),
+      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,
+      getMinimumCategorySpan(layout.chart),
+      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, descriptor: layout.descriptor, 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 orientation = layout.descriptor.orientation;
+    const range = this.getRange(layout, state);
+    const transform = this.getTransform(layout, state, range);
+    const xValue = transform.screenToData(point).x;
+    const tooltipSeries = getOrderedSeries(
+      layout.chart,
+      this.options.seriesOrderByChart
+    );
+    const points = tooltipSeries.map((series, seriesIndex) => {
+      const visible = series.getVisiblePoints(state.xMin, state.xMax, transform.categoryPixelLength);
+      if (!visible.pointCount) return null;
+      const index = getNearestPointIndex(visible.x, xValue);
+      const category = this.surface.renderers.getTooltipCategory(
+        layout.descriptor.rendererType,
+        {
+          visiblePoints: visible,
+          pointIndex: index,
+          seriesIndex,
+          seriesCount: tooltipSeries.length,
+          categoryMin: state.xMin,
+          categoryMax: state.xMax
+        }
+      );
+      const data = { x: category, y: visible.y[index] };
+      const screen = transform.dataToScreen(data);
+      return { id: series.id, name: series.name, color: series.color, x: screen.x, y: screen.y, xValue: visible.x[index], yValue: data.y };
+    }).filter(Boolean);
+    if (!points.length) return this.clearCrosshair();
+    const nearest = points.reduce((best, item) => {
+      const itemDistance = orientation === "horizontal" ? Math.abs(item.y - point.y) : Math.abs(item.x - point.x);
+      const bestDistance = orientation === "horizontal" ? Math.abs(best.y - point.y) : Math.abs(best.x - point.x);
+      return itemDistance < bestDistance ? item : best;
+    });
+    this.crosshair = {
+      chartId: layout.chart.id,
+      x: point.x,
+      y: point.y,
+      xValue: nearest.xValue,
+      categoryLabel: getCategoryLabel(layout.chart, 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.plot.y, 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 chart = this.options.charts.find((item) => item.id === chartId);
+    if (!chart || !this.chartDescriptors.get(chartId)?.capabilities.movingAverage) 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, this.chartDescriptors.get(chart.id), 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 chart = this.options.charts.find((item) => item.id === chartId);
+    const capabilities = chart && this.chartDescriptors.get(chartId)?.capabilities;
+    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" && capabilities?.movingAverage) {
+      this.toggleMovingAverage(chartId);
+      event.preventDefault();
+    } else if (["t", "h", "v", "p"].includes(key) && capabilities?.drawings) {
+      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 createLineSeries({
+    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 {
+  BarSeries,
+  ChartGrid,
+  LineSeries,
+  createBarSeries,
+  createLineSeries,
+  createMockCharts,
+  createSeries
+};
+//# sourceMappingURL=react.js.map