aliencharts 0.3.0 → 0.3.2

package/dist/aliencharts.global.js

@@ -0,0 +1,3327 @@
+var AlienCharts = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/vanilla/index.js
+  var index_exports = {};
+  __export(index_exports, {
+    BarSeries: () => BarSeries,
+    LineSeries: () => LineSeries,
+    createBarSeries: () => createBarSeries,
+    createChartGrid: () => createChartGrid,
+    createLineSeries: () => createLineSeries,
+    createMockCharts: () => createMockCharts,
+    createSeries: () => createSeries
+  });
+
+  // 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/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 })
+      )
+    }));
+  };
+  return __toCommonJS(index_exports);
+})();
+//# sourceMappingURL=aliencharts.global.js.map