aliencharts 0.1.0

package/dist/index.js

@@ -0,0 +1,4887 @@
+// src/react/ChartGrid.jsx
+import React5, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
+import { ArrowLineRightIcon, PushPinSimpleIcon } from "@phosphor-icons/react";
+
+// src/core/lodSeries.js
+var DEFAULT_MAX_LEVELS = 18;
+var toTypedArray = (value, Type) => {
+  if (value instanceof Type) return value;
+  if (ArrayBuffer.isView(value)) return new Type(value);
+  if (Array.isArray(value)) return new Type(value);
+  return new Type(0);
+};
+var lowerBound = (array, value) => {
+  let lo = 0;
+  let hi = array.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (array[mid] < value) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+};
+var upperBound = (array, value) => {
+  let lo = 0;
+  let hi = array.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (array[mid] <= value) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+};
+var pushUniqueSorted = (indices, index) => {
+  if (index < 0) return;
+  if (indices.includes(index)) return;
+  indices.push(index);
+};
+var buildLod = (rawX, rawY, bucketSize, startIndex = 0, endIndex = rawX.length) => {
+  if (bucketSize <= 1 || rawX.length <= bucketSize) {
+    return { x: rawX, y: rawY, bucketSize: 1 };
+  }
+  const alignedStart = Math.max(0, Math.floor(startIndex / bucketSize) * bucketSize);
+  const alignedEnd = Math.min(rawX.length, endIndex);
+  const estimated = Math.ceil((alignedEnd - alignedStart) / bucketSize) * 4;
+  const x = new Float64Array(estimated);
+  const y = new Float32Array(estimated);
+  let out = 0;
+  for (let start = alignedStart; start < alignedEnd; start += bucketSize) {
+    const end = Math.min(alignedEnd, start + bucketSize);
+    let minIndex = start;
+    let maxIndex = start;
+    for (let i = start + 1; i < end; i += 1) {
+      if (rawY[i] < rawY[minIndex]) minIndex = i;
+      if (rawY[i] > rawY[maxIndex]) maxIndex = i;
+    }
+    const indices = [];
+    pushUniqueSorted(indices, start);
+    pushUniqueSorted(indices, minIndex);
+    pushUniqueSorted(indices, maxIndex);
+    pushUniqueSorted(indices, end - 1);
+    indices.sort((a, b) => a - b);
+    for (let i = 0; i < indices.length; i += 1) {
+      const sourceIndex = indices[i];
+      x[out] = rawX[sourceIndex];
+      y[out] = rawY[sourceIndex];
+      out += 1;
+    }
+  }
+  return {
+    x: x.subarray(0, out),
+    y: y.subarray(0, out),
+    bucketSize
+  };
+};
+var concatTyped = (Type, left, right) => {
+  if (!left?.length) return right;
+  if (!right?.length) return left;
+  const out = new Type(left.length + right.length);
+  out.set(left, 0);
+  out.set(right, left.length);
+  return out;
+};
+var LineSeries = class {
+  constructor({ id, name, color, x, y, maxLevels = DEFAULT_MAX_LEVELS }) {
+    this.id = id;
+    this.name = name || id;
+    this.color = color || "#38bdf8";
+    this.maxLevels = maxLevels;
+    const initialX = toTypedArray(x, Float64Array);
+    const initialY = toTypedArray(y, Float32Array);
+    this._length = Math.min(initialX.length, initialY.length);
+    const capacity = Math.max(1, this._length);
+    this.rawX = new Float64Array(capacity);
+    this.rawY = new Float32Array(capacity);
+    this.rawX.set(initialX.subarray(0, this._length));
+    this.rawY.set(initialY.subarray(0, this._length));
+    this.levels = [];
+    this.rebuildLevels();
+  }
+  get length() {
+    return this._length;
+  }
+  append(xValues, yValues) {
+    const nextX = toTypedArray(xValues, Float64Array);
+    const nextY = toTypedArray(yValues, Float32Array);
+    const appendLength = Math.min(nextX.length, nextY.length);
+    if (appendLength === 0) return;
+    const currentLength = this.length;
+    this.ensureRawCapacity(currentLength + appendLength);
+    this.rawX.set(nextX.subarray(0, appendLength), currentLength);
+    this.rawY.set(nextY.subarray(0, appendLength), currentLength);
+    this._length = currentLength + appendLength;
+    this.markLevelsDirty(currentLength);
+  }
+  rebuildLevels() {
+    const rawX = this.rawX.subarray(0, this.length);
+    const rawY = this.rawY.subarray(0, this.length);
+    this.levels = [{ x: rawX, y: rawY, bucketSize: 1 }];
+    let bucketSize = 4;
+    while (this.levels.length < this.maxLevels && bucketSize < Math.max(8, rawX.length)) {
+      this.levels.push(buildLod(rawX, rawY, bucketSize));
+      bucketSize *= 4;
+    }
+  }
+  ensureRawCapacity(requiredLength) {
+    if (requiredLength <= this.rawX.length && requiredLength <= this.rawY.length) {
+      return;
+    }
+    const nextCapacity = Math.max(requiredLength, Math.ceil(this.rawX.length * 1.5));
+    const rawX = new Float64Array(nextCapacity);
+    const rawY = new Float32Array(nextCapacity);
+    rawX.set(this.rawX.subarray(0, this.length));
+    rawY.set(this.rawY.subarray(0, this.length));
+    this.rawX = rawX;
+    this.rawY = rawY;
+  }
+  markLevelsDirty(previousLength) {
+    const rawX = this.rawX.subarray(0, this.length);
+    const rawY = this.rawY.subarray(0, this.length);
+    this.levels[0] = { x: rawX, y: rawY, bucketSize: 1 };
+    let bucketSize = this.levels.length > 0 ? this.levels[this.levels.length - 1].bucketSize * 4 : 4;
+    while (this.levels.length < this.maxLevels && bucketSize < Math.max(8, rawX.length)) {
+      this.levels.push(buildLod(rawX, rawY, bucketSize));
+      bucketSize *= 4;
+    }
+    for (let i = 1; i < this.levels.length; i += 1) {
+      const level = this.levels[i];
+      const dirtyRawStart = Math.floor(previousLength / level.bucketSize) * level.bucketSize;
+      level.dirtyFrom = Math.min(level.dirtyFrom ?? dirtyRawStart, dirtyRawStart);
+    }
+  }
+  ensureLevel(index) {
+    const level = this.levels[index];
+    if (!level || index === 0 || level.dirtyFrom == null) return level;
+    const rawX = this.rawX.subarray(0, this.length);
+    const rawY = this.rawY.subarray(0, this.length);
+    const dirtyRawStart = Math.floor(level.dirtyFrom / level.bucketSize) * level.bucketSize;
+    const cutoffX = rawX[dirtyRawStart] ?? rawX[0] ?? 0;
+    const keepCount = lowerBound(level.x, cutoffX);
+    const tail = buildLod(rawX, rawY, level.bucketSize, dirtyRawStart, rawX.length);
+    this.levels[index] = {
+      x: concatTyped(Float64Array, level.x.subarray(0, keepCount), tail.x),
+      y: concatTyped(Float32Array, level.y.subarray(0, keepCount), tail.y),
+      bucketSize: level.bucketSize
+    };
+    return this.levels[index];
+  }
+  selectLevel(xMin, xMax, pixelWidth, targetPointsPerPixel = 2.5) {
+    const rawX = this.levels[0].x;
+    if (rawX.length === 0) return this.levels[0];
+    const from = lowerBound(rawX, xMin);
+    const to = upperBound(rawX, xMax);
+    const visibleRawPoints = Math.max(0, to - from);
+    const targetPoints = Math.max(32, pixelWidth * targetPointsPerPixel);
+    const desiredBucket = Math.max(1, visibleRawPoints / targetPoints);
+    let selectedIndex = 0;
+    for (let i = 1; i < this.levels.length; i += 1) {
+      if (this.levels[i].bucketSize <= desiredBucket) {
+        selectedIndex = i;
+      } else {
+        break;
+      }
+    }
+    return this.ensureLevel(selectedIndex);
+  }
+  getVisiblePoints(xMin, xMax, pixelWidth) {
+    const level = this.selectLevel(xMin, xMax, pixelWidth);
+    const start = Math.max(0, lowerBound(level.x, xMin) - 1);
+    const end = Math.min(level.x.length, upperBound(level.x, xMax) + 1);
+    return {
+      x: level.x.subarray(start, end),
+      y: level.y.subarray(start, end),
+      bucketSize: level.bucketSize,
+      pointCount: Math.max(0, end - start)
+    };
+  }
+};
+var createSeries = (options) => new LineSeries(options);
+
+// src/core/mockData.js
+var palette = [
+  "#38bdf8",
+  "#22c55e",
+  "#f59e0b",
+  "#ef4444",
+  "#a855f7",
+  "#14b8a6"
+];
+var createRandom = (seed) => {
+  let value = seed >>> 0;
+  return () => {
+    value = value * 1664525 + 1013904223 >>> 0;
+    return value / 4294967296;
+  };
+};
+var makeSeries = ({ chartIndex, seriesIndex, pointCount }) => {
+  const x = new Float64Array(pointCount);
+  const y = new Float32Array(pointCount);
+  const random = createRandom((chartIndex + 1) * 1009 + seriesIndex * 9176);
+  const baseline = 15 + random() * 45 + seriesIndex * 4;
+  const waveA = 8e-4 + random() * 4e-3;
+  const waveB = 6e-3 + random() * 0.03;
+  const waveC = 5e-5 + random() * 6e-4;
+  const amplitudeA = 0.015 + random() * 0.09;
+  const amplitudeB = 5e-3 + random() * 0.04;
+  const trend = (random() - 0.5) * 4e-3;
+  const noise = 4e-3 + random() * 0.025;
+  const spikeInterval = 180 + Math.floor(random() * 900);
+  const spikeMagnitude = 0.12 + random() * 0.7;
+  let value = baseline;
+  for (let i = 0; i < pointCount; i += 1) {
+    x[i] = i;
+    const spike = (i + chartIndex * 13 + seriesIndex * 31) % spikeInterval === 0 ? spikeMagnitude * (random() > 0.45 ? 1 : -1) : 0;
+    value += Math.sin(i * waveA + chartIndex) * amplitudeA + Math.cos(i * waveB + seriesIndex) * amplitudeB + Math.sin(i * waveC) * amplitudeA * 0.35 + trend + (random() - 0.5) * noise + spike;
+    y[i] = value;
+  }
+  return createSeries({
+    id: `chart-${chartIndex}-series-${seriesIndex}`,
+    name: `Run ${seriesIndex + 1}`,
+    color: palette[(chartIndex + seriesIndex) % palette.length],
+    x,
+    y
+  });
+};
+var createMockCharts = ({
+  chartCount = 50,
+  seriesPerChart = 2,
+  pointCount = 5e5
+} = {}) => {
+  return Array.from({ length: chartCount }, (_, chartIndex) => ({
+    id: `metric-${chartIndex + 1}`,
+    title: `metric_${String(chartIndex + 1).padStart(2, "0")}`,
+    series: Array.from(
+      { length: seriesPerChart },
+      (_2, seriesIndex) => makeSeries({ chartIndex, seriesIndex, pointCount })
+    )
+  }));
+};
+
+// src/react/ChartToolbar.jsx
+import React from "react";
+import {
+  ArrowCounterClockwiseIcon,
+  ArrowsInIcon,
+  ArrowsOutIcon,
+  BroomIcon,
+  WaveSineIcon,
+  MagnifyingGlassPlusIcon,
+  MapPinIcon,
+  MinusIcon
+} from "@phosphor-icons/react";
+function ToolbarAction({
+  title,
+  hotkey,
+  children,
+  onClick,
+  active = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      className: `relative inline-flex size-6 items-center justify-center rounded-sm text-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 ${className} ${active ? "bg-primary/15 text-primary ring-1 ring-primary/40" : ""}`,
+      onPointerDown: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick?.();
+      }
+    },
+    children,
+    hotkey ? /* @__PURE__ */ React.createElement("span", { className: "pointer-events-none absolute left-full top-1/2 -translate-y-1/2 text-[10px] font-semibold leading-none text-foreground/50" }, hotkey) : null
+  );
+}
+function ChartToolbar({
+  isFullscreen = false,
+  onFullscreenToggle,
+  onReset,
+  onRectangleZoomToggle,
+  rectangleZoomActive = false,
+  onMovingAverageToggle,
+  movingAverageActive = false,
+  activeDrawingTool = null,
+  onDrawingToolToggle,
+  hasDrawings = false,
+  onClearDrawingsRequest
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: "absolute left-2 top-12 z-30 flex flex-col gap-0.5 rounded-sm bg-background/80 p-0 pr-3 text-foreground shadow-sm backdrop-blur" }, /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: isFullscreen ? "Exit fullscreen" : "Maximize chart",
+      hotkey: "F",
+      onClick: onFullscreenToggle
+    },
+    isFullscreen ? /* @__PURE__ */ React.createElement(ArrowsInIcon, { size: 16, weight: "bold" }) : /* @__PURE__ */ React.createElement(ArrowsOutIcon, { size: 16, weight: "bold" })
+  ), /* @__PURE__ */ React.createElement(ToolbarAction, { title: "Reset chart", hotkey: "R", onClick: onReset }, /* @__PURE__ */ React.createElement(ArrowCounterClockwiseIcon, { size: 16, weight: "bold" })), /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Rectangle zoom",
+      hotkey: "Z",
+      onClick: onRectangleZoomToggle,
+      active: rectangleZoomActive
+    },
+    /* @__PURE__ */ React.createElement(MagnifyingGlassPlusIcon, { size: 16, weight: "bold" })
+  ), hasDrawings ? /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Clear drawings",
+      className: "text-orange-500 dark:text-orange-300 dark:hover:text-orange-300",
+      onClick: onClearDrawingsRequest
+    },
+    /* @__PURE__ */ React.createElement(BroomIcon, { size: 16, weight: "bold" })
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "my-1 h-px w-full" }), /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Draw trendline",
+      hotkey: "T",
+      onClick: () => onDrawingToolToggle?.("trendline"),
+      active: activeDrawingTool === "trendline"
+    },
+    /* @__PURE__ */ React.createElement(MinusIcon, { className: "-rotate-45", size: 16, weight: "bold" })
+  ), /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Draw horizontal line",
+      hotkey: "H",
+      onClick: () => onDrawingToolToggle?.("hline"),
+      active: activeDrawingTool === "hline"
+    },
+    /* @__PURE__ */ React.createElement(MinusIcon, { size: 16, weight: "bold" })
+  ), /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Draw vertical line",
+      hotkey: "V",
+      onClick: () => onDrawingToolToggle?.("vline"),
+      active: activeDrawingTool === "vline"
+    },
+    /* @__PURE__ */ React.createElement(MinusIcon, { className: "rotate-90", size: 16, weight: "bold" })
+  ), /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Place pin",
+      hotkey: "P",
+      onClick: () => onDrawingToolToggle?.("pin"),
+      active: activeDrawingTool === "pin"
+    },
+    /* @__PURE__ */ React.createElement(MapPinIcon, { size: 16, weight: "bold" })
+  ), /* @__PURE__ */ React.createElement(
+    ToolbarAction,
+    {
+      title: "Toggle moving average",
+      hotkey: "M",
+      onClick: onMovingAverageToggle,
+      active: movingAverageActive
+    },
+    /* @__PURE__ */ React.createElement(WaveSineIcon, { size: 16, weight: "bold" })
+  ));
+}
+
+// src/react/DrawingOptionsToolbar.jsx
+import React2, { useRef } from "react";
+
+// src/react/drawingUtils.js
+var DEFAULT_DRAWING_COLOR = "#60a5fa";
+var DRAWING_HIT_DISTANCE = 8;
+var DRAWING_HANDLE_RADIUS = 4;
+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 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") {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (Math.abs(dx) > 1e-6) {
+      if (style.extendLeft) {
+        const leftX = layout.plot.x;
+        lineStart = {
+          x: leftX,
+          y: start.y + dy / dx * (leftX - start.x)
+        };
+      }
+      if (style.extendRight) {
+        const rightX = layout.plot.x + layout.plot.width;
+        lineEnd = {
+          x: rightX,
+          y: start.y + dy / dx * (rightX - start.x)
+        };
+      }
+    }
+  }
+  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/react/DrawingOptionsToolbar.jsx
+var isHexColor = (color) => /^#[0-9a-f]{6}$/i.test(String(color || ""));
+var stopEvent = (event) => {
+  event.stopPropagation();
+};
+var stopAndPreventEvent = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+function DrawingOptionsToolbar({
+  drawing,
+  style,
+  onToggleExtend,
+  onColorChange,
+  onTextChange
+}) {
+  const colorInputRef = useRef(null);
+  if (!drawing) return null;
+  const drawingStyle = getDrawingStyle(drawing);
+  const color = isHexColor(drawingStyle.color) ? drawingStyle.color : DEFAULT_DRAWING_COLOR;
+  const canExtend = drawing.type === "trendline" || drawing.type === "hline";
+  const canEditText = drawing.type === "pin";
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: "pointer-events-auto absolute z-40 flex items-center justify-end gap-1 rounded-sm bg-background/85 p-1 text-xs text-foreground shadow-sm backdrop-blur",
+      style,
+      onPointerDown: stopEvent,
+      onClick: (event) => event.stopPropagation()
+    },
+    canExtend ? /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        type: "button",
+        title: "Extend line",
+        "aria-label": "Extend line",
+        className: `h-6 rounded-sm px-2 text-[11px] font-semibold leading-none hover:bg-accent hover:text-accent-foreground ${drawingStyle.extendRight ? "bg-primary/15 text-primary ring-1 ring-primary/40" : "text-foreground/80"}`,
+        onPointerDown: stopAndPreventEvent,
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onToggleExtend?.();
+        }
+      },
+      "Ext"
+    ) : null,
+    canEditText ? /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "text",
+        value: drawingStyle.text,
+        placeholder: "Text",
+        title: "Pin text",
+        className: "h-6 w-24 rounded-sm border border-border/50 bg-background/70 px-1.5 text-xs",
+        onPointerDown: stopEvent,
+        onClick: stopEvent,
+        onChange: (event) => onTextChange?.(event.target.value)
+      }
+    ) : null,
+    /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        type: "button",
+        title: "Line color",
+        "aria-label": "Line color",
+        className: "size-6 rounded-sm border border-border/70 shadow-sm",
+        style: { backgroundColor: color },
+        onPointerDown: stopAndPreventEvent,
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (typeof colorInputRef.current?.showPicker === "function") {
+            colorInputRef.current.showPicker();
+            return;
+          }
+          colorInputRef.current?.click();
+        }
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        ref: colorInputRef,
+        type: "color",
+        value: color,
+        tabIndex: -1,
+        className: "fixed left-[-1000px] top-[-1000px] size-px opacity-0",
+        style: { pointerEvents: "none" },
+        onPointerDown: (event) => event.stopPropagation(),
+        onChange: (event) => onColorChange?.(event.target.value)
+      }
+    )
+  );
+}
+
+// src/react/DrawingOverlay.jsx
+import React3 from "react";
+var getClipId = (chartId) => `drawing-clip-${String(chartId).replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+function PinDrawing({ drawing, geometry, selected }) {
+  const text = geometry.style.text.trim();
+  return /* @__PURE__ */ React3.createElement("g", { opacity: drawing.id === "__draft__" ? 0.72 : 1 }, /* @__PURE__ */ React3.createElement("g", { transform: `translate(${geometry.start.x} ${geometry.start.y})` }, /* @__PURE__ */ React3.createElement(
+    "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, #ffffff)",
+      strokeWidth: "1.5"
+    }
+  ), /* @__PURE__ */ React3.createElement("circle", { cx: "0", cy: "-2", r: "3", fill: "var(--background, #ffffff)", opacity: "0.9" })), text ? /* @__PURE__ */ React3.createElement(
+    "text",
+    {
+      x: geometry.start.x + 14,
+      y: geometry.start.y,
+      fill: geometry.style.color,
+      stroke: "var(--background, #ffffff)",
+      strokeWidth: "3",
+      paintOrder: "stroke",
+      fontSize: "12",
+      fontWeight: "600",
+      dominantBaseline: "middle"
+    },
+    text
+  ) : null, selected ? /* @__PURE__ */ React3.createElement(
+    "circle",
+    {
+      cx: geometry.start.x,
+      cy: geometry.start.y,
+      r: DRAWING_HANDLE_RADIUS,
+      fill: geometry.style.color,
+      stroke: "var(--background, #ffffff)",
+      strokeWidth: "1.5"
+    }
+  ) : null);
+}
+function DrawingOverlay({
+  layouts,
+  drawings,
+  draftDrawing,
+  selectedDrawingId,
+  projectPoint,
+  height = "100%"
+}) {
+  const allDrawings = draftDrawing ? [...Array.isArray(drawings) ? drawings : [], draftDrawing] : Array.isArray(drawings) ? drawings : [];
+  if (!allDrawings.length) return null;
+  return /* @__PURE__ */ React3.createElement(
+    "svg",
+    {
+      className: "pointer-events-none absolute left-0 top-0 z-20 block overflow-visible",
+      style: { width: "100%", height }
+    },
+    /* @__PURE__ */ React3.createElement("defs", null, layouts.map((layout) => /* @__PURE__ */ React3.createElement("clipPath", { key: getClipId(layout.chart.id), id: getClipId(layout.chart.id) }, /* @__PURE__ */ React3.createElement(
+      "rect",
+      {
+        x: layout.plot.x,
+        y: layout.plot.y,
+        width: layout.plot.width,
+        height: layout.plot.height
+      }
+    )))),
+    layouts.flatMap(
+      (layout) => getDrawingsForChart(allDrawings, layout.chart.id).map((drawing) => {
+        const geometry = getDrawingGeometry({
+          drawing,
+          layout,
+          projectPoint
+        });
+        if (!geometry) return null;
+        const selected = drawing.id === selectedDrawingId || drawing.id === "__draft__";
+        const dashArray = geometry.style.dashPattern.length ? geometry.style.dashPattern.join(" ") : void 0;
+        if (drawing.type === "pin") {
+          return /* @__PURE__ */ React3.createElement("g", { key: drawing.id, clipPath: `url(#${getClipId(layout.chart.id)})` }, /* @__PURE__ */ React3.createElement(
+            PinDrawing,
+            {
+              drawing,
+              geometry,
+              selected
+            }
+          ));
+        }
+        return /* @__PURE__ */ React3.createElement("g", { key: drawing.id, clipPath: `url(#${getClipId(layout.chart.id)})` }, /* @__PURE__ */ React3.createElement(
+          "line",
+          {
+            x1: geometry.lineStart.x,
+            y1: geometry.lineStart.y,
+            x2: geometry.lineEnd.x,
+            y2: geometry.lineEnd.y,
+            stroke: geometry.style.color,
+            strokeWidth: geometry.style.lineWidth,
+            strokeDasharray: dashArray,
+            opacity: drawing.id === "__draft__" ? 0.72 : 1
+          }
+        ), selected ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+          "circle",
+          {
+            cx: geometry.start.x,
+            cy: geometry.start.y,
+            r: DRAWING_HANDLE_RADIUS,
+            fill: geometry.style.color,
+            stroke: "var(--background, #ffffff)",
+            strokeWidth: "1.5"
+          }
+        ), drawing.type === "trendline" ? /* @__PURE__ */ React3.createElement(
+          "circle",
+          {
+            cx: geometry.end.x,
+            cy: geometry.end.y,
+            r: DRAWING_HANDLE_RADIUS,
+            fill: geometry.style.color,
+            stroke: "var(--background, #ffffff)",
+            strokeWidth: "1.5"
+          }
+        ) : null) : null);
+      }).filter(Boolean)
+    )
+  );
+}
+
+// src/react/MovingAverageOptionsToolbar.jsx
+import React4 from "react";
+import { EyeIcon } from "@phosphor-icons/react";
+var stopEvent2 = (event) => {
+  event.stopPropagation();
+};
+var stopAndPreventEvent2 = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+function MovingAverageOptionsToolbar({
+  movingAverage,
+  style,
+  onChange
+}) {
+  if (!movingAverage?.enabled) return null;
+  const period = Number.isFinite(Number(movingAverage.period)) ? Math.max(1, Math.round(Number(movingAverage.period))) : 21;
+  const type = movingAverage.type === "sma" ? "sma" : "ema";
+  const hideBase = Boolean(movingAverage.hideBase);
+  return /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: "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,
+      onPointerDown: stopEvent2,
+      onClick: (event) => event.stopPropagation()
+    },
+    /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        type: "button",
+        title: hideBase ? "Show base series" : "Hide base series",
+        "aria-label": hideBase ? "Show base series" : "Hide base series",
+        className: `inline-flex size-6 items-center justify-center rounded-sm text-foreground/80 hover:bg-accent hover:text-accent-foreground ${hideBase ? "bg-primary/15 text-primary ring-1 ring-primary/40" : ""}`,
+        onPointerDown: stopAndPreventEvent2,
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onChange?.({
+            ...movingAverage,
+            hideBase: !hideBase
+          });
+        }
+      },
+      /* @__PURE__ */ React4.createElement(EyeIcon, { size: 14, weight: "bold" })
+    ),
+    /* @__PURE__ */ React4.createElement(
+      "button",
+      {
+        type: "button",
+        title: "Toggle moving average type",
+        "aria-label": "Toggle moving average type",
+        className: "h-6 rounded-sm px-2 text-[11px] font-semibold uppercase leading-none text-foreground/80 hover:bg-accent hover:text-accent-foreground",
+        onPointerDown: stopAndPreventEvent2,
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onChange?.({
+            ...movingAverage,
+            type: type === "sma" ? "ema" : "sma"
+          });
+        }
+      },
+      type
+    ),
+    /* @__PURE__ */ React4.createElement(
+      "input",
+      {
+        type: "number",
+        min: 1,
+        step: 1,
+        value: period,
+        title: "Moving average period",
+        className: "h-6 w-14 rounded-sm border border-border/50 bg-background/70 px-1 text-xs tabular-nums",
+        onPointerDown: stopEvent2,
+        onClick: stopEvent2,
+        onChange: (event) => {
+          const nextPeriod = Math.max(1, Math.round(Number(event.target.value)));
+          if (!Number.isFinite(nextPeriod)) return;
+          onChange?.({
+            ...movingAverage,
+            period: nextPeriod
+          });
+        }
+      }
+    )
+  );
+}
+
+// src/react/useAppendAnimations.js
+import { useCallback, useEffect, useLayoutEffect, useRef as useRef2 } from "react";
+var APPEND_ANIMATION_SETTINGS = {
+  enabled: true,
+  durationMs: 300,
+  maxBucketSize: 64,
+  // Zoom threshold
+  maxRevealPoints: 100
+  // Larger appends skips in-between points
+};
+var easeOutQuad = (value) => 1 - (1 - value) * (1 - value);
+function useAppendAnimations({
+  charts,
+  dataRevision,
+  requestRender,
+  settings = APPEND_ANIMATION_SETTINGS
+}) {
+  const latestPointRef = useRef2(/* @__PURE__ */ new Map());
+  const animationsRef = useRef2(/* @__PURE__ */ new Map());
+  const animationRafRef = useRef2(null);
+  const stopAnimationLoop = useCallback(() => {
+    if (animationRafRef.current != null) {
+      cancelAnimationFrame(animationRafRef.current);
+      animationRafRef.current = null;
+    }
+  }, []);
+  const startAnimationLoop = useCallback(() => {
+    if (!settings.enabled || animationRafRef.current != null) return;
+    const tick = () => {
+      const now = performance.now();
+      let hasActiveAnimation = false;
+      animationsRef.current.forEach((animation, seriesId) => {
+        if (now - animation.startedAt >= animation.duration) {
+          animationsRef.current.delete(seriesId);
+        } else {
+          hasActiveAnimation = true;
+        }
+      });
+      requestRender();
+      animationRafRef.current = hasActiveAnimation ? requestAnimationFrame(tick) : null;
+    };
+    animationRafRef.current = requestAnimationFrame(tick);
+  }, [requestRender, settings.enabled]);
+  useEffect(() => {
+    if (!settings.enabled) {
+      animationsRef.current.clear();
+      stopAnimationLoop();
+    }
+  }, [settings.enabled, stopAnimationLoop]);
+  useLayoutEffect(() => {
+    if (!settings.enabled) return;
+    const now = performance.now();
+    charts.forEach((chart) => {
+      chart.series.forEach((series) => {
+        if (series.length === 0) return;
+        const next = {
+          x: series.rawX[series.length - 1],
+          y: series.rawY[series.length - 1],
+          length: series.length
+        };
+        const previous = latestPointRef.current.get(series.id);
+        if (previous && Number.isFinite(previous.x) && Number.isFinite(previous.y) && next.x > previous.x) {
+          animationsRef.current.set(series.id, {
+            fromX: previous.x,
+            fromY: previous.y,
+            toX: next.x,
+            toY: next.y,
+            appendedCount: next.length - previous.length,
+            startedAt: now,
+            duration: settings.durationMs
+          });
+          startAnimationLoop();
+        }
+        latestPointRef.current.set(series.id, next);
+      });
+    });
+  }, [
+    charts,
+    dataRevision,
+    settings.durationMs,
+    settings.enabled,
+    startAnimationLoop
+  ]);
+  useEffect(() => stopAnimationLoop, [stopAnimationLoop]);
+  const getAppendAnimatedPoint = useCallback(
+    ({ seriesId, visiblePoints, now }) => {
+      if (!settings.enabled || visiblePoints.bucketSize > settings.maxBucketSize) {
+        return null;
+      }
+      const animation = animationsRef.current.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 === 0) return null;
+      const progress = Math.min(
+        1,
+        Math.max(0, (now - animation.startedAt) / animation.duration)
+      );
+      const eased = easeOutQuad(progress);
+      if (animation.appendedCount <= settings.maxRevealPoints) {
+        const appendedVisibleCount = visiblePoints.pointCount - stableCount;
+        const revealPosition = eased * appendedVisibleCount;
+        const revealedPoints = Math.min(
+          appendedVisibleCount,
+          Math.floor(revealPosition)
+        );
+        const nextIndex = Math.min(
+          visiblePoints.pointCount - 1,
+          stableCount + revealedPoints
+        );
+        const previousIndex = Math.max(stableCount - 1, nextIndex - 1);
+        const partial = revealPosition - revealedPoints;
+        const hasPartial = revealedPoints < appendedVisibleCount;
+        const x = hasPartial ? visiblePoints.x[previousIndex] + (visiblePoints.x[nextIndex] - visiblePoints.x[previousIndex]) * partial : visiblePoints.x[nextIndex];
+        const y = hasPartial ? visiblePoints.y[previousIndex] + (visiblePoints.y[nextIndex] - visiblePoints.y[previousIndex]) * partial : visiblePoints.y[nextIndex];
+        return {
+          index: nextIndex,
+          pointCount: Math.min(visiblePoints.pointCount, nextIndex + 1),
+          x,
+          y
+        };
+      }
+      return {
+        index: stableCount,
+        pointCount: stableCount + 1,
+        x: animation.fromX + (animation.toX - animation.fromX) * eased,
+        y: animation.fromY + (animation.toY - animation.fromY) * eased
+      };
+    },
+    [settings.enabled, settings.maxBucketSize, settings.maxRevealPoints]
+  );
+  return { getAppendAnimatedPoint };
+}
+
+// src/react/useDrawingInteractions.js
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState } from "react";
+function useDrawingInteractions({
+  drawings,
+  onDrawingsChange,
+  activeDrawingTool,
+  onActiveDrawingToolChange,
+  selectedDrawingId,
+  onSelectedDrawingIdChange,
+  createDrawingId,
+  focusedChartId = null,
+  requireFocusedChart = false,
+  onModeChange
+}) {
+  const drawingSessionRef = useRef3({ chartId: null, startPoint: null });
+  const drawingEditRef = useRef3(null);
+  const [draftDrawing, setDraftDrawing] = useState(null);
+  const clearDraft = useCallback2(() => {
+    setDraftDrawing(null);
+    drawingSessionRef.current = { chartId: null, startPoint: null };
+  }, []);
+  const cancelDrawing = useCallback2(() => {
+    onActiveDrawingToolChange?.(null);
+    onSelectedDrawingIdChange?.(null);
+    setDraftDrawing(null);
+    drawingSessionRef.current = { chartId: null, startPoint: null };
+    drawingEditRef.current = null;
+  }, [onActiveDrawingToolChange, onSelectedDrawingIdChange]);
+  const toggleDrawingTool = useCallback2(
+    (tool) => {
+      if (!DRAWING_TOOLS.has(tool)) return;
+      if (requireFocusedChart && !focusedChartId) return;
+      onModeChange?.();
+      clearDraft();
+      onActiveDrawingToolChange?.(activeDrawingTool === tool ? null : tool);
+    },
+    [
+      activeDrawingTool,
+      clearDraft,
+      focusedChartId,
+      onActiveDrawingToolChange,
+      onModeChange,
+      requireFocusedChart
+    ]
+  );
+  const commitDrawing = useCallback2(
+    ({ chartId, type, start, end }) => {
+      const drawing = createDrawing({
+        chartId,
+        type,
+        start,
+        end,
+        createDrawingId
+      });
+      onDrawingsChange?.([...Array.isArray(drawings) ? drawings : [], drawing]);
+      onSelectedDrawingIdChange?.(drawing.id);
+      onActiveDrawingToolChange?.(null);
+      clearDraft();
+    },
+    [
+      clearDraft,
+      createDrawingId,
+      drawings,
+      onActiveDrawingToolChange,
+      onDrawingsChange,
+      onSelectedDrawingIdChange
+    ]
+  );
+  const startDraftDrawing = useCallback2(
+    ({ chartId, type, start, end = start }) => {
+      drawingSessionRef.current = { chartId, startPoint: start };
+      setDraftDrawing(createDraftDrawing({ chartId, type, start, end }));
+    },
+    []
+  );
+  const updateDraftDrawing = useCallback2(({ chartId, type, start, end }) => {
+    setDraftDrawing(createDraftDrawing({ chartId, type, start, end }));
+  }, []);
+  const startEditDrawing = useCallback2(({ drawingId, endpoint }) => {
+    drawingEditRef.current = {
+      id: drawingId,
+      endpoint: endpoint || "move"
+    };
+  }, []);
+  const finishEditDrawing = useCallback2(() => {
+    drawingEditRef.current = null;
+  }, []);
+  const deleteSelectedDrawing = useCallback2(() => {
+    if (!selectedDrawingId) return false;
+    onDrawingsChange?.(removeDrawingById(drawings, selectedDrawingId));
+    onSelectedDrawingIdChange?.(null);
+    return true;
+  }, [
+    drawings,
+    onDrawingsChange,
+    onSelectedDrawingIdChange,
+    selectedDrawingId
+  ]);
+  useEffect2(() => {
+    if (activeDrawingTool) return;
+    clearDraft();
+  }, [activeDrawingTool, clearDraft]);
+  return {
+    draftDrawing,
+    drawingSessionRef,
+    drawingEditRef,
+    clearDraft,
+    cancelDrawing,
+    toggleDrawingTool,
+    commitDrawing,
+    startDraftDrawing,
+    updateDraftDrawing,
+    startEditDrawing,
+    finishEditDrawing,
+    deleteSelectedDrawing
+  };
+}
+
+// src/react/ChartGrid.jsx
+var CHART_HEIGHT = 360;
+var RIGHT_AXIS_WIDTH = 58;
+var PLOT_PADDING = {
+  left: 38,
+  right: RIGHT_AXIS_WIDTH,
+  top: 34,
+  bottom: 28
+};
+var FOLLOW_VISIBLE_RIGHT_EDGE_RATIO = 0.15;
+var Y_SCALE_MIN = 0.05;
+var Y_SCALE_MAX = 40;
+var Y_AXIS_TICK_COUNT = 5;
+var X_AXIS_TICK_COUNT = 5;
+var X_SCALE_MIN_SPAN = 10;
+var X_SCALE_MAX_SPAN = 1e9;
+var JUMP_LATEST_RIGHT_PADDING_RATIO = 0.1;
+var INITIAL_GPU_VERTEX_CAPACITY = 4096;
+var AA_VERTEX_FLOAT_STRIDE = 6;
+var AA_LINE_WIDTH_PX = 1.5;
+var AA_EDGE_WIDTH_PX = 1;
+var DASH_LENGTH_PX = 7;
+var DASH_GAP_PX = 5;
+var TOOLTIP_WIDTH = 220;
+var TOOLTIP_OFFSET = 12;
+var DEFAULT_CHART_BACKGROUND = "#f5f9ff";
+var EMPTY_ARRAY = [];
+var EMPTY_OBJECT = {};
+var withAlpha = (color, alpha) => {
+  const value = String(color || DEFAULT_CHART_BACKGROUND).trim();
+  if (/^#[0-9a-f]{6}$/i.test(value)) {
+    const r = Number.parseInt(value.slice(1, 3), 16);
+    const g = Number.parseInt(value.slice(3, 5), 16);
+    const b = Number.parseInt(value.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  if (/^#[0-9a-f]{3}$/i.test(value)) {
+    const r = Number.parseInt(value[1] + value[1], 16);
+    const g = Number.parseInt(value[2] + value[2], 16);
+    const b = Number.parseInt(value[3] + value[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return value;
+};
+var hexToRgb = (color) => {
+  const value = String(color || "#38bdf8").replace("#", "");
+  const normalized = value.length === 3 ? value.split("").map((char) => char + char).join("") : value.padEnd(6, "0").slice(0, 6);
+  const number = Number.parseInt(normalized, 16);
+  return [
+    (number >> 16 & 255) / 255,
+    (number >> 8 & 255) / 255,
+    (number & 255) / 255
+  ];
+};
+var getReadableTextColor = (backgroundColor) => {
+  const [r, g, b] = hexToRgb(backgroundColor);
+  const toLinear = (value) => value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return luminance > 0.45 ? "#111827" : "#ffffff";
+};
+var getSeriesLabelTextColor = (series) => {
+  if (series.__labelTextColorFor !== series.color) {
+    series.__labelTextColorFor = series.color;
+    series.__labelTextColor = getReadableTextColor(series.color);
+  }
+  return series.__labelTextColor;
+};
+var getSelectedDrawingLayout = (layouts, drawings, selectedDrawingId) => {
+  if (!selectedDrawingId || !Array.isArray(drawings)) return null;
+  const drawing = drawings.find((candidate) => candidate?.id === selectedDrawingId);
+  if (!drawing) return null;
+  const layout = layouts.find(
+    (candidate) => candidate.visible && candidate.chart.id === drawing.chartId
+  );
+  return layout ? { drawing, layout } : null;
+};
+var getDrawingOptionsToolbarStyle = (layout) => ({
+  left: Math.max(
+    layout.rect.x + 42,
+    layout.rect.x + layout.rect.width - PLOT_PADDING.right - 8
+  ),
+  top: layout.rect.y + PLOT_PADDING.top + 6,
+  transform: "translateX(-100%)"
+});
+var getMovingAverageOptionsToolbarStyle = (layout) => ({
+  left: Math.max(
+    layout.rect.x + 120,
+    layout.rect.x + layout.rect.width - PLOT_PADDING.right - 8
+  ),
+  top: layout.rect.y + 8,
+  transform: "translateX(-100%)"
+});
+var getChartContextMenuPoint = ({
+  point,
+  chart,
+  layout,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef
+}) => {
+  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 {
+      x: point.x,
+      y: point.y,
+      inPlot: false,
+      data: null
+    };
+  }
+  return {
+    x: point.x,
+    y: point.y,
+    inPlot: true,
+    data: screenPointToDataPoint({
+      point,
+      chart,
+      plot: layout.plot,
+      initialVisiblePoints,
+      viewStateRef,
+      yScaleRef,
+      yCenterOffsetRef
+    })
+  };
+};
+var createProgram = (gl) => {
+  const vertexSource = `#version 300 es
+    in vec2 a_xy;
+    uniform vec2 u_resolution;
+    uniform vec4 u_rect;
+    uniform vec2 u_xRange;
+    uniform vec2 u_yRange;
+
+    void main() {
+      float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
+      float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
+      float nx = (a_xy.x - u_xRange.x) / xDenom;
+      float ny = (a_xy.y - u_yRange.x) / yDenom;
+      float px = u_rect.x + nx * u_rect.z;
+      float py = u_rect.y + (1.0 - ny) * u_rect.w;
+      vec2 zeroToOne = vec2(px, py) / u_resolution;
+      vec2 clip = zeroToOne * 2.0 - 1.0;
+      gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    }
+  `;
+  const fragmentSource = `#version 300 es
+    precision highp float;
+    uniform vec3 u_color;
+    out vec4 outColor;
+
+    void main() {
+      outColor = vec4(u_color, 1.0);
+    }
+  `;
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
+  }
+  return program;
+};
+var createAntialiasProgram = (gl) => {
+  const vertexSource = `#version 300 es
+    in vec2 a_start;
+    in vec2 a_end;
+    in float a_side;
+    in float a_along;
+    uniform vec2 u_resolution;
+    uniform vec4 u_rect;
+    uniform vec2 u_xRange;
+    uniform vec2 u_yRange;
+    uniform float u_lineHalfWidth;
+    uniform float u_edgeWidth;
+    out float v_side;
+
+    vec2 toPixel(vec2 value) {
+      float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
+      float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
+      float nx = (value.x - u_xRange.x) / xDenom;
+      float ny = (value.y - u_yRange.x) / yDenom;
+      return vec2(
+        u_rect.x + nx * u_rect.z,
+        u_rect.y + (1.0 - ny) * u_rect.w
+      );
+    }
+
+    void main() {
+      vec2 startPx = toPixel(a_start);
+      vec2 endPx = toPixel(a_end);
+      vec2 delta = endPx - startPx;
+      float segmentLength = max(0.000001, length(delta));
+      vec2 direction = delta / segmentLength;
+      vec2 normal = vec2(-direction.y, direction.x);
+      float expand = u_lineHalfWidth + u_edgeWidth;
+      float cap = min(expand, segmentLength * 0.5);
+      vec2 px = mix(startPx, endPx, a_along)
+        + direction * ((a_along * 2.0 - 1.0) * cap)
+        + normal * a_side * expand;
+      vec2 zeroToOne = px / u_resolution;
+      vec2 clip = zeroToOne * 2.0 - 1.0;
+      v_side = a_side;
+      gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    }
+  `;
+  const fragmentSource = `#version 300 es
+    precision highp float;
+    uniform vec3 u_color;
+    uniform float u_lineHalfWidth;
+    uniform float u_edgeWidth;
+    in float v_side;
+    out vec4 outColor;
+
+    void main() {
+      float expand = u_lineHalfWidth + u_edgeWidth;
+      float distanceFromCenter = abs(v_side) * expand;
+      float alpha = 1.0 - smoothstep(u_lineHalfWidth, expand, distanceFromCenter);
+      outColor = vec4(u_color, alpha);
+    }
+  `;
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
+  }
+  return program;
+};
+var createSeriesBufferCache = () => /* @__PURE__ */ new Map();
+var getNextVertexCapacity = (currentCapacity, requiredCapacity) => {
+  let nextCapacity = Math.max(
+    INITIAL_GPU_VERTEX_CAPACITY,
+    currentCapacity || 0
+  );
+  while (nextCapacity < requiredCapacity) {
+    nextCapacity *= 2;
+  }
+  return nextCapacity;
+};
+var getSeriesBuffer = (gl, cache, seriesId, pointCount) => {
+  const requiredVertexFloats = pointCount * 2;
+  let entry = cache.get(seriesId);
+  if (!entry) {
+    entry = {
+      buffer: gl.createBuffer(),
+      gpuCapacity: 0,
+      vertices: new Float32Array(
+        getNextVertexCapacity(0, requiredVertexFloats)
+      )
+    };
+    cache.set(seriesId, entry);
+  }
+  if (entry.vertices.length < requiredVertexFloats) {
+    entry.vertices = new Float32Array(
+      getNextVertexCapacity(entry.vertices.length, requiredVertexFloats)
+    );
+  }
+  if (entry.gpuCapacity < entry.vertices.length) {
+    entry.gpuCapacity = entry.vertices.length;
+    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
+      gl.DYNAMIC_DRAW
+    );
+  }
+  return entry;
+};
+var getAntialiasSeriesBuffer = (gl, cache, seriesId, pointCount) => {
+  const segmentCount = Math.max(0, pointCount - 1);
+  const requiredVertexFloats = segmentCount * 6 * AA_VERTEX_FLOAT_STRIDE;
+  let entry = cache.get(seriesId);
+  if (!entry) {
+    entry = {
+      buffer: gl.createBuffer(),
+      gpuCapacity: 0,
+      vertices: new Float32Array(
+        getNextVertexCapacity(0, requiredVertexFloats)
+      )
+    };
+    cache.set(seriesId, entry);
+  }
+  if (entry.vertices.length < requiredVertexFloats) {
+    entry.vertices = new Float32Array(
+      getNextVertexCapacity(entry.vertices.length, requiredVertexFloats)
+    );
+  }
+  if (entry.gpuCapacity < entry.vertices.length) {
+    entry.gpuCapacity = entry.vertices.length;
+    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
+      gl.DYNAMIC_DRAW
+    );
+  }
+  return entry;
+};
+var deleteSeriesBuffers = (gl, cache) => {
+  cache.forEach((entry) => {
+    if (entry.buffer) gl.deleteBuffer(entry.buffer);
+  });
+  cache.clear();
+};
+var fillSeriesPoints = ({ vertices, visiblePoints, pointCount, animatedPoint }) => {
+  for (let i = 0; i < pointCount; i += 1) {
+    if (animatedPoint && i === animatedPoint.index) {
+      vertices[i * 2] = animatedPoint.x;
+      vertices[i * 2 + 1] = animatedPoint.y;
+      continue;
+    }
+    vertices[i * 2] = visiblePoints.x[i];
+    vertices[i * 2 + 1] = visiblePoints.y[i];
+  }
+};
+var projectDataToPixel = ({ x, y, state, yRange, plot }) => ({
+  x: plot.x + (x - state.xMin) / (state.xMax - state.xMin) * plot.width,
+  y: plot.y + (yRange.maxY - y) / (yRange.maxY - yRange.minY) * plot.height
+});
+var toViewportLayout = (layout, scrollLeft, scrollTop) => ({
+  ...layout,
+  rect: {
+    ...layout.rect,
+    x: layout.rect.x - scrollLeft,
+    y: layout.rect.y - scrollTop
+  },
+  plot: {
+    ...layout.plot,
+    x: layout.plot.x - scrollLeft,
+    y: layout.plot.y - scrollTop
+  }
+});
+var writeLineVertex = (vertices, offset, x, y) => {
+  vertices[offset] = x;
+  vertices[offset + 1] = y;
+};
+var fillDashedSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  state,
+  yRange,
+  plot
+}) => {
+  let offset = 0;
+  let distance = 0;
+  const dashTotal = DASH_LENGTH_PX + DASH_GAP_PX;
+  for (let i = 0; i < pointCount - 1; i += 1) {
+    const start = {
+      x: visiblePoints.x[i],
+      y: visiblePoints.y[i]
+    };
+    const end = {
+      x: visiblePoints.x[i + 1],
+      y: visiblePoints.y[i + 1]
+    };
+    const startPx = projectDataToPixel({ ...start, state, yRange, plot });
+    const endPx = projectDataToPixel({ ...end, state, yRange, plot });
+    const pixelLength = Math.hypot(endPx.x - startPx.x, endPx.y - startPx.y);
+    if (!Number.isFinite(pixelLength) || pixelLength <= 0) continue;
+    let consumed = 0;
+    while (consumed < pixelLength) {
+      const phase = distance % dashTotal;
+      const boundary = phase < DASH_LENGTH_PX ? DASH_LENGTH_PX - phase : dashTotal - phase;
+      const step = Math.min(boundary, pixelLength - consumed);
+      if (phase < DASH_LENGTH_PX) {
+        if (offset + 4 > vertices.length) {
+          return offset / 2;
+        }
+        const t0 = consumed / pixelLength;
+        const t1 = (consumed + step) / pixelLength;
+        writeLineVertex(
+          vertices,
+          offset,
+          start.x + (end.x - start.x) * t0,
+          start.y + (end.y - start.y) * t0
+        );
+        offset += 2;
+        writeLineVertex(
+          vertices,
+          offset,
+          start.x + (end.x - start.x) * t1,
+          start.y + (end.y - start.y) * t1
+        );
+        offset += 2;
+      }
+      consumed += step;
+      distance += step;
+    }
+  }
+  return offset / 2;
+};
+var getSeriesPoint = (visiblePoints, animatedPoint, index) => {
+  if (animatedPoint && index === animatedPoint.index) {
+    return { x: animatedPoint.x, y: animatedPoint.y };
+  }
+  return { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+};
+var getSinglePointSegment = ({ series, state, yRange, plot }) => {
+  if (series.length !== 1) return null;
+  const x = series.rawX[0];
+  const y = series.rawY[0];
+  if (x < state.xMin || x > state.xMax || y < yRange.minY || y > yRange.maxY) {
+    return null;
+  }
+  const halfWidth = (state.xMax - state.xMin) / Math.max(1, plot.width) * 3;
+  return {
+    x: new Float64Array([x - halfWidth, x + halfWidth]),
+    y: new Float32Array([y, y]),
+    bucketSize: 1,
+    pointCount: 2,
+    endpoint: { x, y }
+  };
+};
+var writeAntialiasVertex = (vertices, offset, start, end, side, along) => {
+  vertices[offset] = start.x;
+  vertices[offset + 1] = start.y;
+  vertices[offset + 2] = end.x;
+  vertices[offset + 3] = end.y;
+  vertices[offset + 4] = side;
+  vertices[offset + 5] = along;
+};
+var fillAntialiasSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  animatedPoint
+}) => {
+  let offset = 0;
+  for (let i = 0; i < pointCount - 1; i += 1) {
+    const start = getSeriesPoint(visiblePoints, animatedPoint, i);
+    const end = getSeriesPoint(visiblePoints, animatedPoint, i + 1);
+    writeAntialiasVertex(vertices, offset, start, end, -1, 0);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, 1, 0);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, -1, 1);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, -1, 1);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, 1, 0);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+    writeAntialiasVertex(vertices, offset, start, end, 1, 1);
+    offset += AA_VERTEX_FLOAT_STRIDE;
+  }
+  return offset / AA_VERTEX_FLOAT_STRIDE;
+};
+var lowerBound2 = (array, value) => {
+  let lo = 0;
+  let hi = array.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (array[mid] < value) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+};
+var getNearestPointIndex = (xValues, xValue) => {
+  if (!xValues.length) return -1;
+  const nextIndex = lowerBound2(xValues, xValue);
+  if (nextIndex <= 0) return 0;
+  if (nextIndex >= xValues.length) return xValues.length - 1;
+  const previousIndex = nextIndex - 1;
+  return Math.abs(xValues[nextIndex] - xValue) < Math.abs(xValue - xValues[previousIndex]) ? nextIndex : previousIndex;
+};
+var getChartXBounds = (chart) => {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  chart.series.forEach((series) => {
+    if (series.length === 0) return;
+    minX = Math.min(minX, series.rawX[0]);
+    maxX = Math.max(maxX, series.rawX[series.length - 1]);
+  });
+  return { minX, maxX };
+};
+var getOrderedSeries = (chart, seriesOrderByChart) => {
+  const series = Array.isArray(chart?.series) ? chart.series : [];
+  const order = seriesOrderByChart?.[chart?.id];
+  if (!Array.isArray(order) || order.length !== series.length) {
+    return series;
+  }
+  const used = /* @__PURE__ */ new Set();
+  const ordered = [];
+  order.forEach((seriesIndex) => {
+    if (!Number.isInteger(seriesIndex)) return;
+    if (seriesIndex < 0 || seriesIndex >= series.length) return;
+    if (used.has(seriesIndex)) return;
+    used.add(seriesIndex);
+    ordered.push(series[seriesIndex]);
+  });
+  if (ordered.length !== series.length) return series;
+  return ordered;
+};
+var normalizeMovingAverage = (movingAverage) => {
+  if (!movingAverage?.enabled) return null;
+  return {
+    enabled: true,
+    period: Number.isFinite(Number(movingAverage.period)) ? Math.max(1, Math.round(Number(movingAverage.period))) : 21,
+    type: movingAverage.type === "sma" ? "sma" : "ema"
+  };
+};
+var getMovingAverageCacheKey = (series, movingAverage) => `${series.id}::ma:${movingAverage.type}:${movingAverage.period}`;
+var calculateMovingAverageChunk = ({
+  sourceY,
+  startIndex,
+  period,
+  type,
+  previousAverage
+}) => {
+  const out = new Float32Array(Math.max(0, sourceY.length - startIndex));
+  if (out.length === 0) return out;
+  if (type === "sma") {
+    let sum = 0;
+    const firstWindowStart = Math.max(0, startIndex - period + 1);
+    for (let i = firstWindowStart; i < startIndex; i += 1) {
+      sum += sourceY[i];
+    }
+    for (let sourceIndex = startIndex; sourceIndex < sourceY.length; sourceIndex += 1) {
+      sum += sourceY[sourceIndex];
+      const removeIndex = sourceIndex - period;
+      if (removeIndex >= firstWindowStart) {
+        sum -= sourceY[removeIndex];
+      }
+      const safePeriod = Math.min(period, sourceIndex + 1);
+      out[sourceIndex - startIndex] = sum / safePeriod;
+    }
+    return out;
+  }
+  const multiplier = 2 / (period + 1);
+  let prev = Number.isFinite(previousAverage) ? previousAverage : sourceY[startIndex];
+  for (let sourceIndex = startIndex; sourceIndex < sourceY.length; sourceIndex += 1) {
+    prev = sourceY[sourceIndex] * multiplier + prev * (1 - multiplier);
+    out[sourceIndex - startIndex] = prev;
+  }
+  return out;
+};
+var getMovingAverageSeriesForChart = ({
+  chart,
+  movingAverage,
+  cache
+}) => {
+  const normalized = normalizeMovingAverage(movingAverage);
+  if (!normalized || !cache) return [];
+  return chart.series.map((series) => {
+    if (series.length === 0) return null;
+    const cacheKey = getMovingAverageCacheKey(series, normalized);
+    const cached = cache.get(cacheKey);
+    if (cached && cached.sourceSeries === series && cached.sourceLength <= series.length) {
+      const appendStart = cached.sourceLength;
+      if (appendStart < series.length) {
+        const appendedY = calculateMovingAverageChunk({
+          sourceY: series.rawY.subarray(0, series.length),
+          startIndex: appendStart,
+          period: normalized.period,
+          type: normalized.type,
+          previousAverage: appendStart > 0 ? cached.series.rawY[appendStart - 1] : void 0
+        });
+        cached.series.append(
+          series.rawX.subarray(appendStart, series.length),
+          appendedY
+        );
+        cached.sourceLength = series.length;
+      }
+      cached.series.color = series.color;
+      cached.series.name = `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`;
+      return cached.series;
+    }
+    const y = calculateMovingAverageChunk({
+      sourceY: series.rawY.subarray(0, series.length),
+      startIndex: 0,
+      period: normalized.period,
+      type: normalized.type
+    });
+    const maSeries = createSeries({
+      id: cacheKey,
+      name: `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`,
+      color: series.color,
+      x: series.rawX.subarray(0, series.length),
+      y
+    });
+    cache.set(cacheKey, {
+      sourceSeries: series,
+      sourceLength: series.length,
+      series: maSeries
+    });
+    return maSeries;
+  }).filter(Boolean);
+};
+var getInitialView = (chart, initialVisiblePoints = null) => {
+  const { minX, maxX } = getChartXBounds(chart);
+  if (!Number.isFinite(minX) || !Number.isFinite(maxX)) {
+    return { xMin: 0, xMax: 1 };
+  }
+  if (minX === maxX) {
+    const span2 = Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0 ? Math.max(10, initialVisiblePoints) : 10;
+    const rightPadding2 = span2 * JUMP_LATEST_RIGHT_PADDING_RATIO;
+    const nextMax = maxX + rightPadding2;
+    return { xMin: nextMax - span2, xMax: nextMax };
+  }
+  let span = maxX - minX;
+  if (Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0) {
+    span = Math.min(span, initialVisiblePoints);
+    const rightPadding2 = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+    const nextMax = maxX + rightPadding2;
+    return { xMin: nextMax - span, xMax: nextMax };
+  }
+  const rightPadding = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+  return { xMin: minX, xMax: maxX + rightPadding };
+};
+var getYRange = (chart, xMin, xMax, width) => {
+  let minY = Infinity;
+  let maxY = -Infinity;
+  let renderedPoints = 0;
+  let bucketSize = 1;
+  chart.series.forEach((series) => {
+    const visible = series.getVisiblePoints(xMin, xMax, width);
+    renderedPoints += visible.pointCount;
+    bucketSize = Math.max(bucketSize, visible.bucketSize);
+    for (let i = 0; i < visible.y.length; i += 1) {
+      const value = visible.y[i];
+      if (value < minY) minY = value;
+      if (value > maxY) maxY = value;
+    }
+  });
+  if (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
+    return { minY: 0, maxY: 1, renderedPoints, bucketSize };
+  }
+  if (minY === maxY) {
+    minY -= 1;
+    maxY += 1;
+  }
+  const pad = (maxY - minY) * 0.08;
+  return { minY: minY - pad, maxY: maxY + pad, renderedPoints, bucketSize };
+};
+var applyYScale = (yRange, scale = 1, centerOffset = 0) => {
+  const clampedScale = Math.min(Y_SCALE_MAX, Math.max(Y_SCALE_MIN, scale));
+  const center = (yRange.minY + yRange.maxY) / 2 + centerOffset;
+  const halfRange = (yRange.maxY - yRange.minY) * clampedScale / 2;
+  return {
+    ...yRange,
+    minY: center - halfRange,
+    maxY: center + halfRange
+  };
+};
+var getLatestYBounds = (chart) => {
+  let minY = Infinity;
+  let maxY = -Infinity;
+  chart.series.forEach((series) => {
+    if (series.length === 0) return;
+    const value = series.rawY[series.length - 1];
+    if (value < minY) minY = value;
+    if (value > maxY) maxY = value;
+  });
+  return { minY, maxY };
+};
+var getPlotWidth = (node) => node ? Math.max(1, node.offsetWidth - PLOT_PADDING.left - PLOT_PADDING.right) : 1;
+var trimFormattedNumber = (value) => value.replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+var formatNumber = (value) => {
+  if (!Number.isFinite(value)) return "";
+  const abs = Math.abs(value);
+  if (abs !== 0 && abs < 1e-4) return value.toExponential(2);
+  if (abs < 1) return trimFormattedNumber(value.toPrecision(5));
+  if (abs >= 1e5) return value.toFixed(0);
+  if (abs >= 1e3) return trimFormattedNumber(value.toFixed(1));
+  if (abs >= 10) return trimFormattedNumber(value.toFixed(2));
+  return trimFormattedNumber(value.toFixed(4));
+};
+var formatCompactNumber = (value) => {
+  if (!Number.isFinite(value)) return "";
+  const abs = Math.abs(value);
+  if (abs >= 1e9) return `${(value / 1e9).toFixed(abs >= 1e10 ? 0 : 1)}B`;
+  if (abs >= 1e6) return `${(value / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
+  if (abs >= 1e3) return `${(value / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}k`;
+  return formatNumber(value);
+};
+var normalizeRect = (start, end) => {
+  if (!start || !end) return null;
+  const left = Math.min(start.x, end.x);
+  const top = Math.min(start.y, end.y);
+  return {
+    left,
+    top,
+    width: Math.abs(end.x - start.x),
+    height: Math.abs(end.y - start.y)
+  };
+};
+var clampPointToPlot = (point, plot) => ({
+  x: Math.min(plot.x + plot.width, Math.max(plot.x, point.x)),
+  y: Math.min(plot.y + plot.height, Math.max(plot.y, point.y))
+});
+var applyRectangleZoom = ({
+  chart,
+  plot,
+  start,
+  end,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  yManualScaleRef
+}) => {
+  const clampedStart = clampPointToPlot(start, plot);
+  const clampedEnd = clampPointToPlot(end, plot);
+  const rect = normalizeRect(clampedStart, clampedEnd);
+  if (!rect || rect.width < 6 || rect.height < 6) return false;
+  const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+  const currentYRange = applyYScale(
+    getYRange(chart, state.xMin, state.xMax, plot.width),
+    yScaleRef.current.get(chart.id) ?? 1,
+    yCenterOffsetRef.current.get(chart.id) ?? 0
+  );
+  const leftRatio = (rect.left - plot.x) / plot.width;
+  const rightRatio = (rect.left + rect.width - plot.x) / plot.width;
+  const topRatio = (rect.top - plot.y) / plot.height;
+  const bottomRatio = (rect.top + rect.height - plot.y) / plot.height;
+  const nextMin = state.xMin + leftRatio * (state.xMax - state.xMin);
+  const nextMax = state.xMin + rightRatio * (state.xMax - state.xMin);
+  if (nextMax - nextMin < X_SCALE_MIN_SPAN) return false;
+  const selectedMaxY = currentYRange.maxY - topRatio * (currentYRange.maxY - currentYRange.minY);
+  const selectedMinY = currentYRange.maxY - bottomRatio * (currentYRange.maxY - currentYRange.minY);
+  const selectedSpan = selectedMaxY - selectedMinY;
+  if (!Number.isFinite(selectedSpan) || selectedSpan <= 0) return false;
+  viewStateRef.current.set(chart.id, { xMin: nextMin, xMax: nextMax });
+  const baseYRange = getYRange(chart, nextMin, nextMax, plot.width);
+  const baseSpan = baseYRange.maxY - baseYRange.minY;
+  if (Number.isFinite(baseSpan) && baseSpan > 0) {
+    const selectedCenter = (selectedMinY + selectedMaxY) / 2;
+    const baseCenter = (baseYRange.minY + baseYRange.maxY) / 2;
+    const nextScale = Math.min(
+      Y_SCALE_MAX,
+      Math.max(Y_SCALE_MIN, selectedSpan / baseSpan)
+    );
+    yScaleRef.current.set(chart.id, nextScale);
+    yCenterOffsetRef.current.set(chart.id, selectedCenter - baseCenter);
+    yManualScaleRef.current.add(chart.id);
+  }
+  return true;
+};
+var getChartState = (chart, initialVisiblePoints, viewStateRef) => viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+var getScaledYRangeForLayout = ({
+  chart,
+  state,
+  plot,
+  yScaleRef,
+  yCenterOffsetRef
+}) => applyYScale(
+  getYRange(chart, state.xMin, state.xMax, plot.width),
+  yScaleRef.current.get(chart.id) ?? 1,
+  yCenterOffsetRef.current.get(chart.id) ?? 0
+);
+var screenPointToDataPoint = ({
+  point,
+  chart,
+  plot,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef
+}) => {
+  const state = getChartState(chart, initialVisiblePoints, viewStateRef);
+  const yRange = getScaledYRangeForLayout({
+    chart,
+    state,
+    plot,
+    yScaleRef,
+    yCenterOffsetRef
+  });
+  const xRatio = (point.x - plot.x) / plot.width;
+  const yRatio = (point.y - plot.y) / plot.height;
+  return {
+    x: state.xMin + xRatio * (state.xMax - state.xMin),
+    y: yRange.maxY - yRatio * (yRange.maxY - yRange.minY)
+  };
+};
+var dataPointToScreenPoint = ({ point, state, yRange, plot }) => {
+  const xRatio = (point.x - state.xMin) / (state.xMax - state.xMin);
+  const yRatio = (yRange.maxY - point.y) / (yRange.maxY - yRange.minY);
+  return {
+    x: plot.x + xRatio * plot.width,
+    y: plot.y + yRatio * plot.height
+  };
+};
+var projectDataPointToScreenPoint = ({
+  point,
+  layout,
+  initialVisiblePoints,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef
+}) => {
+  const state = getChartState(layout.chart, initialVisiblePoints, viewStateRef);
+  const yRange = getScaledYRangeForLayout({
+    chart: layout.chart,
+    state,
+    plot: layout.plot,
+    yScaleRef,
+    yCenterOffsetRef
+  });
+  return dataPointToScreenPoint({
+    point,
+    state,
+    yRange,
+    plot: layout.plot
+  });
+};
+var createAxisOverlay = ({
+  chart,
+  plot,
+  state,
+  yRange,
+  seriesEndpoints,
+  seriesOrderByChart = {}
+}) => {
+  const { maxX } = getChartXBounds(chart);
+  const ticks = Array.from({ length: Y_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = Y_AXIS_TICK_COUNT === 1 ? 0 : index / (Y_AXIS_TICK_COUNT - 1);
+    const value = yRange.maxY - ratio * (yRange.maxY - yRange.minY);
+    return {
+      id: `${chart.id}-tick-${index}`,
+      value,
+      top: ratio * plot.height
+    };
+  });
+  const xTicks = Array.from({ length: X_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = X_AXIS_TICK_COUNT === 1 ? 0 : index / (X_AXIS_TICK_COUNT - 1);
+    return {
+      id: `${chart.id}-x-tick-${index}`,
+      value: state.xMin + ratio * (state.xMax - state.xMin),
+      left: 18 + ratio * Math.max(1, plot.width - 36)
+    };
+  });
+  const latestValues = getOrderedSeries(chart, seriesOrderByChart).map((series) => {
+    if (series.length === 0) return null;
+    const value = series.rawY[series.length - 1];
+    const x = series.rawX[series.length - 1];
+    const endpoint = seriesEndpoints.get(series.id) || { x, y: value };
+    const ratio = (yRange.maxY - endpoint.y) / (yRange.maxY - yRange.minY);
+    const xRatio = (endpoint.x - state.xMin) / (state.xMax - state.xMin);
+    return {
+      id: series.id,
+      color: series.color,
+      textColor: getSeriesLabelTextColor(series),
+      value: endpoint.y,
+      rawValue: value,
+      x,
+      left: xRatio * plot.width,
+      top: ratio * plot.height
+    };
+  }).filter(
+    (value) => value && Number.isFinite(value.top) && value.top >= -10 && value.top <= plot.height + 10
+  );
+  return {
+    ticks,
+    xTicks,
+    latestValues,
+    plotWidth: plot.width,
+    showJumpLatest: Number.isFinite(maxX) && (maxX < state.xMin || maxX > state.xMax)
+  };
+};
+function ChartCell({
+  chart,
+  setRef,
+  axisOverlay,
+  focused,
+  onFocus,
+  onFullscreenToggle,
+  onReset,
+  onJumpLatest,
+  onRectangleZoomToggle,
+  rectangleZoomActive = false,
+  movingAverage = null,
+  onMovingAverageToggle,
+  activeDrawingTool = null,
+  onDrawingToolToggle,
+  hasDrawings = false,
+  onClearDrawingsRequest,
+  height = CHART_HEIGHT,
+  isFullscreen = false,
+  backgroundColor = DEFAULT_CHART_BACKGROUND
+}) {
+  const headerBackground = withAlpha(backgroundColor, 0.82);
+  const controlBackground = withAlpha(backgroundColor, 0.78);
+  const mutedControlBackground = withAlpha(backgroundColor, 0.7);
+  const jumpLatestStyle = typeof height === "number" ? {
+    right: RIGHT_AXIS_WIDTH + 6,
+    top: height - PLOT_PADDING.bottom - 34
+  } : {
+    right: RIGHT_AXIS_WIDTH + 6,
+    bottom: PLOT_PADDING.bottom + 6
+  };
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      ref: setRef,
+      className: "relative select-none overflow-hidden rounded-sm",
+      style: { height, backgroundColor },
+      onPointerDown: () => onFocus(chart.id)
+    },
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center justify-between px-2 backdrop-blur",
+        style: { backgroundColor: headerBackground }
+      },
+      /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          className: `flex min-w-0 items-center gap-1 rounded-sm px-1 text-sm font-semibold text-foreground ${focused ? "ring-1 ring-primary/70" : ""}`
+        },
+        chart.pinned ? /* @__PURE__ */ React5.createElement(
+          PushPinSimpleIcon,
+          {
+            size: 14,
+            weight: "fill",
+            className: "shrink-0 text-foreground/80"
+          }
+        ) : null,
+        /* @__PURE__ */ React5.createElement("span", { className: "truncate" }, chart.title)
+      )
+    ),
+    axisOverlay?.showJumpLatest ? /* @__PURE__ */ React5.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Jump to latest",
+        className: "absolute z-30 inline-flex size-7 items-center justify-center rounded-sm text-foreground hover:bg-accent hover:text-accent-foreground",
+        style: {
+          ...jumpLatestStyle,
+          backgroundColor: mutedControlBackground
+        },
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onJumpLatest(chart.id);
+        }
+      },
+      /* @__PURE__ */ React5.createElement(ArrowLineRightIcon, { size: 16, weight: "bold" })
+    ) : null,
+    focused ? /* @__PURE__ */ React5.createElement(
+      ChartToolbar,
+      {
+        isFullscreen,
+        onFullscreenToggle,
+        onReset: () => onReset?.(chart.id),
+        onRectangleZoomToggle: () => onRectangleZoomToggle?.(chart.id),
+        rectangleZoomActive,
+        onMovingAverageToggle: () => onMovingAverageToggle?.(chart.id),
+        movingAverageActive: Boolean(movingAverage?.enabled),
+        activeDrawingTool,
+        onDrawingToolToggle,
+        hasDrawings,
+        onClearDrawingsRequest: () => onClearDrawingsRequest?.(chart.id)
+      }
+    ) : null,
+    /* @__PURE__ */ React5.createElement("div", { className: "pointer-events-none absolute inset-y-8 left-9 border-l border-border/40" }),
+    axisOverlay?.latestValues.map(
+      (latest) => latest.left >= 0 && latest.left <= axisOverlay.plotWidth ? /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          key: `${latest.id}-connector`,
+          className: "pointer-events-none absolute z-10 opacity-70",
+          style: {
+            left: PLOT_PADDING.left + latest.left,
+            top: PLOT_PADDING.top + latest.top,
+            height: 1,
+            width: Math.max(0, axisOverlay.plotWidth - latest.left),
+            backgroundImage: `repeating-linear-gradient(to right, ${latest.color} 0 4px, transparent 4px 8px)`
+          }
+        }
+      ) : null
+    ),
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: "absolute right-0 z-20 cursor-ns-resize",
+        style: {
+          top: PLOT_PADDING.top,
+          bottom: PLOT_PADDING.bottom,
+          width: RIGHT_AXIS_WIDTH,
+          backgroundColor: controlBackground,
+          cursor: "ns-resize"
+        }
+      },
+      axisOverlay?.ticks.map((tick) => /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          key: tick.id,
+          className: "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 dark:text-foreground/80",
+          style: { top: tick.top }
+        },
+        formatNumber(tick.value)
+      )),
+      axisOverlay?.latestValues.map((latest) => /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          key: latest.id,
+          className: "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,
+            backgroundColor: latest.color,
+            color: latest.textColor
+          }
+        },
+        formatNumber(latest.value)
+      ))
+    ),
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: "absolute bottom-0 z-20 cursor-ew-resize",
+        style: {
+          left: PLOT_PADDING.left,
+          right: RIGHT_AXIS_WIDTH,
+          height: PLOT_PADDING.bottom,
+          backgroundColor: mutedControlBackground,
+          cursor: "ew-resize"
+        }
+      },
+      axisOverlay?.xTicks.map((tick) => /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          key: tick.id,
+          className: "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 dark:text-foreground/80",
+          style: { left: tick.left }
+        },
+        formatCompactNumber(tick.value)
+      ))
+    )
+  );
+}
+function CrosshairOverlay({
+  crosshair,
+  height = "100%",
+  xAxisLabel = "STEP"
+}) {
+  if (!crosshair) return null;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "pointer-events-none absolute z-20 border-l border-foreground/40",
+      style: {
+        left: crosshair.x,
+        top: 0,
+        height
+      }
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "pointer-events-none absolute z-20 border-t border-foreground/40",
+      style: { left: 0, top: crosshair.y, width: "100%" }
+    }
+  ), crosshair.points.map((point) => /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      key: point.id,
+      className: "pointer-events-none absolute z-30 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background shadow-sm",
+      style: {
+        left: point.x,
+        top: point.y,
+        backgroundColor: point.color
+      }
+    }
+  )), /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border bg-popover px-2 py-1.5 text-xs text-popover-foreground shadow-sm",
+      style: {
+        left: crosshair.tooltipX,
+        top: crosshair.tooltipY
+      }
+    },
+    /* @__PURE__ */ React5.createElement("div", { className: "mb-1 font-medium" }, xAxisLabel, ": ", formatNumber(crosshair.xValue)),
+    crosshair.points.map((point) => /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        key: `${point.id}-tooltip`,
+        className: "grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5"
+      },
+      /* @__PURE__ */ React5.createElement(
+        "span",
+        {
+          className: "mt-1 size-2 rounded-full",
+          style: { backgroundColor: point.color }
+        }
+      ),
+      /* @__PURE__ */ React5.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React5.createElement("div", { className: "truncate text-muted-foreground" }, point.name), /* @__PURE__ */ React5.createElement("div", { className: "tabular-nums" }, formatNumber(point.yValue)))
+    ))
+  ));
+}
+function RectangleZoomOverlay({ rect }) {
+  if (!rect) return null;
+  const normalized = normalizeRect(rect.start, rect.end);
+  if (!normalized) return null;
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "pointer-events-none absolute z-40 rounded-sm border border-primary/70 bg-primary/10",
+      style: {
+        left: normalized.left,
+        top: normalized.top,
+        width: normalized.width,
+        height: normalized.height
+      }
+    }
+  );
+}
+function TopMarkersOverlay({
+  layouts,
+  markers,
+  viewStateRef,
+  initialVisiblePoints,
+  onMarkerClick,
+  height = "100%"
+}) {
+  const safeMarkers = Array.isArray(markers) ? markers : [];
+  if (!safeMarkers.length || !layouts.length) return null;
+  const markerItems = layouts.flatMap((layout) => {
+    const state = viewStateRef.current.get(layout.chart.id) || getInitialView(layout.chart, initialVisiblePoints);
+    const span = state.xMax - state.xMin;
+    if (!Number.isFinite(span) || span <= 0) return [];
+    return safeMarkers.map((marker) => {
+      const xValue = Number(marker?.x ?? marker?.step);
+      if (!Number.isFinite(xValue)) return null;
+      const ratio = (xValue - state.xMin) / span;
+      if (ratio < 0 || ratio > 1) return null;
+      return {
+        marker,
+        key: `${layout.chart.id}-${marker.id ?? xValue}-${xValue}`,
+        left: layout.plot.x + ratio * layout.plot.width,
+        top: layout.plot.y + 4
+      };
+    }).filter(Boolean);
+  });
+  if (!markerItems.length) return null;
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "pointer-events-none absolute left-0 top-0 z-30",
+      style: { width: "100%", height }
+    },
+    markerItems.map((item) => /* @__PURE__ */ React5.createElement(
+      "button",
+      {
+        key: item.key,
+        type: "button",
+        className: "pointer-events-auto absolute -translate-x-1/2 rounded-full",
+        style: { left: item.left, top: item.top },
+        title: item.marker.title || "",
+        "aria-label": item.marker.ariaLabel || item.marker.title || "Chart marker",
+        onPointerDown: (event) => {
+          event.stopPropagation();
+        },
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onMarkerClick?.(item.marker);
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        "span",
+        {
+          className: "block size-2.5 rounded-full border border-background shadow-sm",
+          style: { backgroundColor: item.marker.color || "#f97316" }
+        }
+      )
+    ))
+  );
+}
+var drawChartLayouts = ({
+  canvas,
+  width,
+  height,
+  gl,
+  program,
+  antialiasProgram,
+  antialiasLines = false,
+  layouts,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  seriesBufferCache,
+  antialiasSeriesBufferCache,
+  initialVisiblePoints,
+  getAppendAnimatedPoint,
+  movingAverageByChart = EMPTY_OBJECT,
+  movingAverageCache,
+  seriesOrderByChart = EMPTY_OBJECT
+}) => {
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  const pixelWidth = Math.max(1, Math.floor(width * dpr));
+  const pixelHeight = Math.max(1, Math.floor(height * dpr));
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+  }
+  gl.viewport(0, 0, pixelWidth, pixelHeight);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  const activeAntialiasLines = antialiasLines && antialiasProgram;
+  const activeProgram = activeAntialiasLines ? antialiasProgram : program;
+  gl.useProgram(activeProgram);
+  const uResolution = gl.getUniformLocation(activeProgram, "u_resolution");
+  const uRect = gl.getUniformLocation(activeProgram, "u_rect");
+  const uXRange = gl.getUniformLocation(activeProgram, "u_xRange");
+  const uYRange = gl.getUniformLocation(activeProgram, "u_yRange");
+  const uColor = gl.getUniformLocation(activeProgram, "u_color");
+  let aXy = -1;
+  let aStart = -1;
+  let aEnd = -1;
+  let aSide = -1;
+  let aAlong = -1;
+  let uLineHalfWidth = null;
+  let uEdgeWidth = null;
+  if (activeAntialiasLines) {
+    aStart = gl.getAttribLocation(activeProgram, "a_start");
+    aEnd = gl.getAttribLocation(activeProgram, "a_end");
+    aSide = gl.getAttribLocation(activeProgram, "a_side");
+    aAlong = gl.getAttribLocation(activeProgram, "a_along");
+    uLineHalfWidth = gl.getUniformLocation(activeProgram, "u_lineHalfWidth");
+    uEdgeWidth = gl.getUniformLocation(activeProgram, "u_edgeWidth");
+    gl.enableVertexAttribArray(aStart);
+    gl.enableVertexAttribArray(aEnd);
+    gl.enableVertexAttribArray(aSide);
+    gl.enableVertexAttribArray(aAlong);
+    gl.uniform1f(uLineHalfWidth, AA_LINE_WIDTH_PX * dpr / 2);
+    gl.uniform1f(uEdgeWidth, AA_EDGE_WIDTH_PX * dpr);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  } else {
+    aXy = gl.getAttribLocation(activeProgram, "a_xy");
+    gl.enableVertexAttribArray(aXy);
+    gl.disable(gl.BLEND);
+  }
+  gl.uniform2f(uResolution, pixelWidth, pixelHeight);
+  const now = performance.now();
+  const nextAxisOverlays = {};
+  layouts.forEach(({ chart, plot, visible }) => {
+    if (!visible) return;
+    if (activeAntialiasLines) {
+      gl.useProgram(activeProgram);
+      gl.uniform2f(uResolution, pixelWidth, pixelHeight);
+    }
+    const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+    const scaledPlot = {
+      x: plot.x * dpr,
+      y: plot.y * dpr,
+      width: plot.width * dpr,
+      height: plot.height * dpr
+    };
+    const yRange = applyYScale(
+      getYRange(chart, state.xMin, state.xMax, plot.width),
+      yScaleRef.current.get(chart.id) ?? 1,
+      yCenterOffsetRef.current.get(chart.id) ?? 0
+    );
+    const seriesEndpoints = /* @__PURE__ */ new Map();
+    const chartMovingAverage = movingAverageByChart?.[chart.id];
+    const hideBaseSeries = Boolean(chartMovingAverage?.enabled) && Boolean(chartMovingAverage?.hideBase);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(
+      Math.floor(scaledPlot.x),
+      Math.floor(pixelHeight - scaledPlot.y - scaledPlot.height),
+      Math.ceil(scaledPlot.width),
+      Math.ceil(scaledPlot.height)
+    );
+    gl.uniform4f(
+      uRect,
+      scaledPlot.x,
+      scaledPlot.y,
+      scaledPlot.width,
+      scaledPlot.height
+    );
+    gl.uniform2f(uXRange, state.xMin, state.xMax);
+    gl.uniform2f(uYRange, yRange.minY, yRange.maxY);
+    if (!hideBaseSeries) getOrderedSeries(chart, seriesOrderByChart).forEach((series) => {
+      let visiblePoints = series.getVisiblePoints(
+        state.xMin,
+        state.xMax,
+        plot.width
+      );
+      let singlePointEndpoint = null;
+      if (visiblePoints.pointCount < 2) {
+        const singlePointSegment = getSinglePointSegment({
+          series,
+          state,
+          yRange,
+          plot
+        });
+        if (!singlePointSegment) return;
+        visiblePoints = singlePointSegment;
+        singlePointEndpoint = singlePointSegment.endpoint;
+      }
+      const animatedPoint = singlePointEndpoint ? null : getAppendAnimatedPoint({
+        seriesId: series.id,
+        visiblePoints,
+        now
+      });
+      const pointCount = animatedPoint?.pointCount ?? visiblePoints.pointCount;
+      if (animatedPoint) {
+        seriesEndpoints.set(series.id, {
+          x: animatedPoint.x,
+          y: animatedPoint.y
+        });
+      } else if (singlePointEndpoint) {
+        seriesEndpoints.set(series.id, singlePointEndpoint);
+      }
+      const [r, g, b] = hexToRgb(series.color);
+      gl.uniform3f(uColor, r, g, b);
+      if (activeAntialiasLines) {
+        const bufferEntry2 = getAntialiasSeriesBuffer(
+          gl,
+          antialiasSeriesBufferCache,
+          series.id,
+          pointCount
+        );
+        const drawVertexCount = fillAntialiasSeriesSegments({
+          vertices: bufferEntry2.vertices,
+          visiblePoints,
+          pointCount,
+          animatedPoint
+        });
+        const stride = AA_VERTEX_FLOAT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry2.buffer);
+        gl.vertexAttribPointer(aStart, 2, gl.FLOAT, false, stride, 0);
+        gl.vertexAttribPointer(
+          aEnd,
+          2,
+          gl.FLOAT,
+          false,
+          stride,
+          2 * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.vertexAttribPointer(
+          aSide,
+          1,
+          gl.FLOAT,
+          false,
+          stride,
+          4 * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.vertexAttribPointer(
+          aAlong,
+          1,
+          gl.FLOAT,
+          false,
+          stride,
+          5 * Float32Array.BYTES_PER_ELEMENT
+        );
+        gl.bufferSubData(
+          gl.ARRAY_BUFFER,
+          0,
+          bufferEntry2.vertices,
+          0,
+          drawVertexCount * AA_VERTEX_FLOAT_STRIDE
+        );
+        gl.drawArrays(gl.TRIANGLES, 0, drawVertexCount);
+        return;
+      }
+      const bufferEntry = getSeriesBuffer(
+        gl,
+        seriesBufferCache,
+        series.id,
+        pointCount
+      );
+      fillSeriesPoints({
+        vertices: bufferEntry.vertices,
+        visiblePoints,
+        pointCount,
+        animatedPoint
+      });
+      gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
+      gl.vertexAttribPointer(aXy, 2, gl.FLOAT, false, 0, 0);
+      gl.bufferSubData(
+        gl.ARRAY_BUFFER,
+        0,
+        bufferEntry.vertices,
+        0,
+        pointCount * 2
+      );
+      gl.drawArrays(gl.LINE_STRIP, 0, pointCount);
+    });
+    const movingAverageSeries = getMovingAverageSeriesForChart({
+      chart,
+      movingAverage: chartMovingAverage,
+      cache: movingAverageCache
+    });
+    const orderedMovingAverageSeries = getOrderedSeries(
+      { ...chart, series: movingAverageSeries },
+      seriesOrderByChart
+    );
+    let maAXy = aXy;
+    let maUColor = uColor;
+    if (movingAverageSeries.length > 0 && activeAntialiasLines) {
+      gl.useProgram(program);
+      const maUResolution = gl.getUniformLocation(program, "u_resolution");
+      const maURect = gl.getUniformLocation(program, "u_rect");
+      const maUXRange = gl.getUniformLocation(program, "u_xRange");
+      const maUYRange = gl.getUniformLocation(program, "u_yRange");
+      maUColor = gl.getUniformLocation(program, "u_color");
+      maAXy = gl.getAttribLocation(program, "a_xy");
+      gl.enableVertexAttribArray(maAXy);
+      gl.uniform2f(maUResolution, pixelWidth, pixelHeight);
+      gl.uniform4f(
+        maURect,
+        scaledPlot.x,
+        scaledPlot.y,
+        scaledPlot.width,
+        scaledPlot.height
+      );
+      gl.uniform2f(maUXRange, state.xMin, state.xMax);
+      gl.uniform2f(maUYRange, yRange.minY, yRange.maxY);
+    }
+    orderedMovingAverageSeries.forEach((series) => {
+      const visiblePoints = series.getVisiblePoints(
+        state.xMin,
+        state.xMax,
+        plot.width
+      );
+      if (visiblePoints.pointCount < 2) return;
+      const pointCount = visiblePoints.pointCount;
+      const [r, g, b] = hexToRgb(series.color);
+      gl.uniform3f(maUColor, r, g, b);
+      const bufferEntry = getSeriesBuffer(
+        gl,
+        seriesBufferCache,
+        series.id,
+        pointCount * 8
+      );
+      const drawVertexCount = fillDashedSeriesSegments({
+        vertices: bufferEntry.vertices,
+        visiblePoints,
+        pointCount,
+        state,
+        yRange,
+        plot
+      });
+      if (drawVertexCount < 2) return;
+      gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
+      gl.vertexAttribPointer(maAXy, 2, gl.FLOAT, false, 0, 0);
+      gl.bufferSubData(
+        gl.ARRAY_BUFFER,
+        0,
+        bufferEntry.vertices,
+        0,
+        drawVertexCount * 2
+      );
+      gl.drawArrays(gl.LINES, 0, drawVertexCount);
+    });
+    nextAxisOverlays[chart.id] = createAxisOverlay({
+      chart,
+      plot,
+      state,
+      yRange,
+      seriesEndpoints,
+      seriesOrderByChart
+    });
+    gl.disable(gl.SCISSOR_TEST);
+  });
+  if (activeAntialiasLines) {
+    gl.disable(gl.BLEND);
+  }
+  return nextAxisOverlays;
+};
+function LeanChartFullscreenOverlay({
+  chart,
+  dataRevision,
+  renderRevision,
+  initialVisiblePoints,
+  backgroundColor,
+  antialiasLines = false,
+  getAppendAnimatedPoint,
+  viewStateRef,
+  yScaleRef,
+  yCenterOffsetRef,
+  yManualScaleRef,
+  movingAverageByChart = {},
+  movingAverageCache,
+  onMovingAverageToggle,
+  onMovingAverageChange,
+  seriesOrderByChart = {},
+  onClose,
+  onReset,
+  onJumpLatest,
+  xAxisLabel = "STEP",
+  drawings = EMPTY_ARRAY,
+  onDrawingsChange,
+  activeDrawingTool = null,
+  onActiveDrawingToolChange,
+  selectedDrawingId = null,
+  onSelectedDrawingIdChange,
+  createDrawingId,
+  onClearDrawingsRequest,
+  onChartContextMenu,
+  topMarkers = EMPTY_ARRAY,
+  onTopMarkerClick
+}) {
+  const containerRef = useRef4(null);
+  const chartRef = useRef4(null);
+  const canvasRef = useRef4(null);
+  const glRef = useRef4(null);
+  const programRef = useRef4(null);
+  const antialiasProgramRef = useRef4(null);
+  const seriesBufferCacheRef = useRef4(createSeriesBufferCache());
+  const antialiasSeriesBufferCacheRef = useRef4(createSeriesBufferCache());
+  const movingAverageCacheRef = useRef4(/* @__PURE__ */ new Map());
+  const dragRef = useRef4(null);
+  const rectangleZoomDragRef = useRef4(null);
+  const closeTimeoutRef = useRef4(null);
+  const [revision, setRevision] = useState2(0);
+  const [axisOverlay, setAxisOverlay] = useState2(null);
+  const [crosshair, setCrosshair] = useState2(null);
+  const [visible, setVisible] = useState2(false);
+  const [rectangleZoomActive, setRectangleZoomActive] = useState2(false);
+  const [rectangleZoomRect, setRectangleZoomRect] = useState2(null);
+  const requestRender = useCallback3(() => {
+    setRevision((value) => value + 1);
+  }, []);
+  const closeWithTransition = useCallback3(() => {
+    setVisible(false);
+    closeTimeoutRef.current = window.setTimeout(onClose, 120);
+  }, [onClose]);
+  const {
+    draftDrawing,
+    drawingSessionRef,
+    drawingEditRef,
+    clearDraft,
+    cancelDrawing,
+    toggleDrawingTool,
+    commitDrawing,
+    startDraftDrawing,
+    updateDraftDrawing,
+    startEditDrawing,
+    finishEditDrawing,
+    deleteSelectedDrawing
+  } = useDrawingInteractions({
+    drawings,
+    onDrawingsChange,
+    activeDrawingTool,
+    onActiveDrawingToolChange,
+    selectedDrawingId,
+    onSelectedDrawingIdChange,
+    createDrawingId,
+    onModeChange: () => {
+      setRectangleZoomActive(false);
+      setRectangleZoomRect(null);
+      rectangleZoomDragRef.current = null;
+    }
+  });
+  const toggleRectangleZoom = useCallback3(() => {
+    setRectangleZoomActive((value) => !value);
+    setRectangleZoomRect(null);
+    rectangleZoomDragRef.current = null;
+    clearDraft();
+    onActiveDrawingToolChange?.(null);
+  }, [clearDraft, onActiveDrawingToolChange]);
+  const toggleSelectedDrawingExtend = useCallback3(() => {
+    if (!selectedDrawingId || !onDrawingsChange) return;
+    onDrawingsChange(
+      updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        ...drawing,
+        style: {
+          ...drawing.style,
+          extendRight: drawing.style?.extendRight === false
+        }
+      }))
+    );
+  }, [drawings, onDrawingsChange, selectedDrawingId]);
+  const updateSelectedDrawingColor = useCallback3(
+    (color) => {
+      if (!selectedDrawingId || !onDrawingsChange) return;
+      onDrawingsChange(
+        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+          ...drawing,
+          style: {
+            ...drawing.style,
+            color
+          }
+        }))
+      );
+    },
+    [drawings, onDrawingsChange, selectedDrawingId]
+  );
+  const updateSelectedDrawingText = useCallback3(
+    (text) => {
+      if (!selectedDrawingId || !onDrawingsChange) return;
+      onDrawingsChange(
+        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+          ...drawing,
+          style: {
+            ...drawing.style,
+            text
+          }
+        }))
+      );
+    },
+    [drawings, onDrawingsChange, selectedDrawingId]
+  );
+  useEffect3(() => {
+    const frame = requestAnimationFrame(() => setVisible(true));
+    return () => {
+      cancelAnimationFrame(frame);
+      if (closeTimeoutRef.current != null) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    };
+  }, []);
+  const getLayout = useCallback3(() => {
+    const node = chartRef.current;
+    if (!node) return null;
+    const rect = {
+      x: node.offsetLeft,
+      y: node.offsetTop,
+      width: node.offsetWidth,
+      height: node.offsetHeight
+    };
+    const plot = {
+      x: rect.x + PLOT_PADDING.left,
+      y: rect.y + PLOT_PADDING.top,
+      width: Math.max(1, rect.width - PLOT_PADDING.left - PLOT_PADDING.right),
+      height: Math.max(1, rect.height - PLOT_PADDING.top - PLOT_PADDING.bottom)
+    };
+    return { chart, rect, plot, visible: true };
+  }, [chart]);
+  const getLocalPoint = useCallback3((event) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }, []);
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const gl = canvas.getContext("webgl2", {
+      antialias: true,
+      alpha: true,
+      depth: false,
+      stencil: false,
+      preserveDrawingBuffer: false
+    });
+    if (!gl) return;
+    glRef.current = gl;
+    programRef.current = createProgram(gl);
+    antialiasProgramRef.current = createAntialiasProgram(gl);
+    requestRender();
+    return () => {
+      deleteSeriesBuffers(gl, seriesBufferCacheRef.current);
+      deleteSeriesBuffers(gl, antialiasSeriesBufferCacheRef.current);
+      glRef.current = null;
+      programRef.current = null;
+      antialiasProgramRef.current = null;
+    };
+  }, [requestRender]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(requestRender);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [requestRender]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    const gl = glRef.current;
+    const program = programRef.current;
+    const antialiasProgram = antialiasProgramRef.current;
+    const layout = getLayout();
+    if (!container || !canvas || !gl || !program || !layout) return;
+    const nextAxisOverlays = drawChartLayouts({
+      canvas,
+      width: container.clientWidth,
+      height: container.clientHeight,
+      gl,
+      program,
+      antialiasProgram,
+      antialiasLines,
+      layouts: [layout],
+      viewStateRef,
+      yScaleRef,
+      yCenterOffsetRef,
+      seriesBufferCache: seriesBufferCacheRef.current,
+      antialiasSeriesBufferCache: antialiasSeriesBufferCacheRef.current,
+      initialVisiblePoints,
+      getAppendAnimatedPoint,
+      movingAverageByChart,
+      movingAverageCache,
+      seriesOrderByChart
+    });
+    setAxisOverlay(nextAxisOverlays[chart.id] || null);
+  }, [
+    chart,
+    antialiasLines,
+    dataRevision,
+    getAppendAnimatedPoint,
+    getLayout,
+    initialVisiblePoints,
+    movingAverageByChart,
+    movingAverageCache,
+    seriesOrderByChart,
+    renderRevision,
+    revision,
+    viewStateRef,
+    yCenterOffsetRef,
+    yScaleRef
+  ]);
+  const updateCrosshair = useCallback3(
+    (event) => {
+      const point = getLocalPoint(event);
+      const layout = getLayout();
+      if (!point || !layout) return;
+      if (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) {
+        setCrosshair(null);
+        return;
+      }
+      const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+      const xRatio = (point.x - layout.plot.x) / layout.plot.width;
+      const xValue = state.xMin + xRatio * (state.xMax - state.xMin);
+      const yRange = getYRange(
+        chart,
+        state.xMin,
+        state.xMax,
+        layout.plot.width
+      );
+      const scaledYRange = applyYScale(
+        yRange,
+        yScaleRef.current.get(chart.id) ?? 1,
+        yCenterOffsetRef.current.get(chart.id) ?? 0
+      );
+      const yRatio = (point.y - layout.plot.y) / layout.plot.height;
+      const yValue = scaledYRange.maxY - yRatio * (scaledYRange.maxY - scaledYRange.minY);
+      const nearestPoints = getOrderedSeries(chart, seriesOrderByChart).map((series) => {
+        const visiblePoints = series.getVisiblePoints(
+          state.xMin,
+          state.xMax,
+          layout.plot.width
+        );
+        const index = getNearestPointIndex(visiblePoints.x, xValue);
+        if (index < 0) return null;
+        const pointX = visiblePoints.x[index];
+        const pointY = visiblePoints.y[index];
+        const pointXRatio = (pointX - state.xMin) / (state.xMax - state.xMin);
+        const pointYRatio = (scaledYRange.maxY - pointY) / (scaledYRange.maxY - scaledYRange.minY);
+        return {
+          id: series.id,
+          name: series.name,
+          color: series.color,
+          xValue: pointX,
+          yValue: pointY,
+          x: layout.plot.x + pointXRatio * layout.plot.width,
+          y: layout.plot.y + pointYRatio * layout.plot.height
+        };
+      }).filter(Boolean).filter(
+        (nearestPoint) => nearestPoint.x >= layout.plot.x - 1 && nearestPoint.x <= layout.plot.x + layout.plot.width + 1 && nearestPoint.y >= layout.plot.y - 1 && nearestPoint.y <= layout.plot.y + layout.plot.height + 1
+      );
+      const primaryPoint = nearestPoints[0];
+      const tooltipLeft = primaryPoint && primaryPoint.x + TOOLTIP_WIDTH + TOOLTIP_OFFSET > layout.rect.x + layout.rect.width ? primaryPoint.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET : (primaryPoint?.x ?? point.x) + TOOLTIP_OFFSET;
+      const tooltipTop = Math.max(
+        layout.rect.y + PLOT_PADDING.top,
+        Math.min(
+          (primaryPoint?.y ?? point.y) + TOOLTIP_OFFSET,
+          layout.rect.y + layout.rect.height - 96
+        )
+      );
+      setCrosshair({
+        chartId: chart.id,
+        title: chart.title,
+        x: point.x,
+        y: point.y,
+        xValue: primaryPoint?.xValue ?? xValue,
+        yValue: primaryPoint?.yValue ?? yValue,
+        points: nearestPoints,
+        tooltipX: Math.max(layout.rect.x + 6, tooltipLeft),
+        tooltipY: tooltipTop
+      });
+    },
+    [
+      chart,
+      getLayout,
+      getLocalPoint,
+      initialVisiblePoints,
+      seriesOrderByChart,
+      viewStateRef,
+      yCenterOffsetRef,
+      yScaleRef
+    ]
+  );
+  const handlePointerDown = useCallback3(
+    (event) => {
+      const point = getLocalPoint(event);
+      const layout = getLayout();
+      if (!point || !layout) return;
+      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 (activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+        if (!inPlot || event.button !== 0) return;
+        event.preventDefault();
+        const dataPoint = screenPointToDataPoint({
+          point,
+          chart,
+          plot: layout.plot,
+          initialVisiblePoints,
+          viewStateRef,
+          yScaleRef,
+          yCenterOffsetRef
+        });
+        if (activeDrawingTool === "hline" || activeDrawingTool === "vline" || activeDrawingTool === "pin") {
+          commitDrawing({
+            chartId: chart.id,
+            type: activeDrawingTool,
+            start: dataPoint,
+            end: dataPoint
+          });
+          return;
+        }
+        if (!drawingSessionRef.current.startPoint) {
+          startDraftDrawing({
+            chartId: chart.id,
+            type: "trendline",
+            start: dataPoint,
+            end: dataPoint
+          });
+          return;
+        }
+        commitDrawing({
+          chartId: chart.id,
+          type: "trendline",
+          start: drawingSessionRef.current.startPoint,
+          end: dataPoint
+        });
+        return;
+      }
+      if (inPlot && Array.isArray(drawings) && drawings.length > 0) {
+        const chartDrawings = getDrawingsForChart(drawings, chart.id);
+        for (let i = chartDrawings.length - 1; i >= 0; i -= 1) {
+          const hit = hitTestDrawing({
+            point,
+            drawing: chartDrawings[i],
+            layout,
+            projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
+              point: dataPoint,
+              layout: targetLayout,
+              initialVisiblePoints,
+              viewStateRef,
+              yScaleRef,
+              yCenterOffsetRef
+            })
+          });
+          if (hit) {
+            event.preventDefault();
+            onSelectedDrawingIdChange?.(hit.drawing.id);
+            if (hit.endpoint || hit.drawing.type === "hline" || hit.drawing.type === "vline" || hit.drawing.type === "pin") {
+              startEditDrawing({
+                drawingId: hit.drawing.id,
+                endpoint: hit.endpoint || "move"
+              });
+              event.currentTarget.setPointerCapture?.(event.pointerId);
+            }
+            return;
+          }
+        }
+        onSelectedDrawingIdChange?.(null);
+      }
+      if (rectangleZoomActive) {
+        if (!inPlot || event.button !== 0) return;
+        event.preventDefault();
+        const start = clampPointToPlot(point, layout.plot);
+        rectangleZoomDragRef.current = { start, end: start };
+        setRectangleZoomRect({ start, end: start });
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      const inYAxis = point.x >= layout.plot.x + layout.plot.width && point.x <= layout.rect.x + layout.rect.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
+      if (inYAxis) {
+        event.preventDefault();
+        dragRef.current = {
+          type: "y-scale",
+          startY: point.y,
+          startScale: yScaleRef.current.get(chart.id) ?? 1
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      const inXAxis = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y + layout.plot.height && point.y <= layout.rect.y + layout.rect.height;
+      if (inXAxis) {
+        event.preventDefault();
+        const state2 = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+        dragRef.current = {
+          type: "x-scale",
+          startX: point.x,
+          startMin: state2.xMin,
+          startMax: state2.xMax
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      if (!inPlot) return;
+      const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+      const yRange = getYRange(
+        chart,
+        state.xMin,
+        state.xMax,
+        layout.plot.width
+      );
+      const scaledYRange = applyYScale(
+        yRange,
+        yScaleRef.current.get(chart.id) ?? 1,
+        yCenterOffsetRef.current.get(chart.id) ?? 0
+      );
+      dragRef.current = {
+        type: "x-pan",
+        startX: point.x,
+        startY: point.y,
+        startMin: state.xMin,
+        startMax: state.xMax,
+        startYOffset: yCenterOffsetRef.current.get(chart.id) ?? 0,
+        canPanY: yManualScaleRef.current.has(chart.id),
+        yValueSpan: scaledYRange.maxY - scaledYRange.minY,
+        width: layout.plot.width,
+        height: layout.plot.height
+      };
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    },
+    [
+      chart,
+      getLayout,
+      getLocalPoint,
+      initialVisiblePoints,
+      activeDrawingTool,
+      chart,
+      commitDrawing,
+      drawings,
+      onSelectedDrawingIdChange,
+      rectangleZoomActive,
+      viewStateRef,
+      yCenterOffsetRef,
+      yManualScaleRef,
+      yScaleRef
+    ]
+  );
+  const handlePointerMove = useCallback3(
+    (event) => {
+      updateCrosshair(event);
+      const drawingPoint = getLocalPoint(event);
+      const drawingLayout = getLayout();
+      if (drawingPoint && drawingLayout) {
+        if (drawingEditRef.current) {
+          const dataPoint = screenPointToDataPoint({
+            point: clampPointToPlot(drawingPoint, drawingLayout.plot),
+            chart,
+            plot: drawingLayout.plot,
+            initialVisiblePoints,
+            viewStateRef,
+            yScaleRef,
+            yCenterOffsetRef
+          });
+          const edit = drawingEditRef.current;
+          const nextDrawings = updateDrawingById(drawings, edit.id, (drawing) => {
+            if (drawing.type === "hline") {
+              const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
+              return {
+                ...drawing,
+                start: { ...drawing.start, x: dataPoint.x, y: dataPoint.y },
+                end: {
+                  ...drawing.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 (edit.endpoint === "start" || edit.endpoint === "end") {
+              return { ...drawing, [edit.endpoint]: dataPoint };
+            }
+            return drawing;
+          });
+          onDrawingsChange?.(nextDrawings);
+          return;
+        }
+        if (activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+          if (drawingPoint.x < drawingLayout.plot.x || drawingPoint.x > drawingLayout.plot.x + drawingLayout.plot.width || drawingPoint.y < drawingLayout.plot.y || drawingPoint.y > drawingLayout.plot.y + drawingLayout.plot.height) {
+            return;
+          }
+          const dataPoint = screenPointToDataPoint({
+            point: drawingPoint,
+            chart,
+            plot: drawingLayout.plot,
+            initialVisiblePoints,
+            viewStateRef,
+            yScaleRef,
+            yCenterOffsetRef
+          });
+          const startPoint = activeDrawingTool === "trendline" ? drawingSessionRef.current.startPoint : dataPoint;
+          if (startPoint || activeDrawingTool !== "trendline") {
+            updateDraftDrawing({
+              chartId: chart.id,
+              type: activeDrawingTool,
+              start: startPoint || dataPoint,
+              end: dataPoint
+            });
+          }
+          return;
+        }
+      }
+      if (rectangleZoomDragRef.current) {
+        const point2 = getLocalPoint(event);
+        const layout = getLayout();
+        if (!point2 || !layout) return;
+        const end = clampPointToPlot(point2, layout.plot);
+        rectangleZoomDragRef.current = {
+          ...rectangleZoomDragRef.current,
+          end
+        };
+        setRectangleZoomRect({
+          start: rectangleZoomDragRef.current.start,
+          end
+        });
+        return;
+      }
+      const drag = dragRef.current;
+      if (!drag) return;
+      const point = getLocalPoint(event);
+      if (!point) return;
+      if (drag.type === "y-scale") {
+        yScaleRef.current.set(
+          chart.id,
+          Math.min(
+            Y_SCALE_MAX,
+            Math.max(
+              Y_SCALE_MIN,
+              drag.startScale * Math.exp((point.y - drag.startY) * 0.01)
+            )
+          )
+        );
+        yManualScaleRef.current.add(chart.id);
+        requestRender();
+        return;
+      }
+      if (drag.type === "x-scale") {
+        const startSpan = drag.startMax - drag.startMin;
+        const nextSpan = Math.min(
+          X_SCALE_MAX_SPAN,
+          Math.max(
+            X_SCALE_MIN_SPAN,
+            startSpan * Math.exp((drag.startX - point.x) * 0.01)
+          )
+        );
+        viewStateRef.current.set(chart.id, {
+          xMin: drag.startMax - nextSpan,
+          xMax: drag.startMax
+        });
+        requestRender();
+        return;
+      }
+      const range = drag.startMax - drag.startMin;
+      const delta = (point.x - drag.startX) / drag.width * range;
+      viewStateRef.current.set(chart.id, {
+        xMin: drag.startMin - delta,
+        xMax: drag.startMax - delta
+      });
+      if (drag.canPanY) {
+        const yDelta = (point.y - drag.startY) / drag.height * drag.yValueSpan;
+        yCenterOffsetRef.current.set(chart.id, drag.startYOffset + yDelta);
+      }
+      requestRender();
+    },
+    [
+      chart.id,
+      chart,
+      activeDrawingTool,
+      drawings,
+      getLayout,
+      getLocalPoint,
+      initialVisiblePoints,
+      onDrawingsChange,
+      requestRender,
+      updateCrosshair,
+      viewStateRef,
+      yCenterOffsetRef,
+      yManualScaleRef,
+      yScaleRef
+    ]
+  );
+  const handlePointerUp = useCallback3(
+    (event) => {
+      if (drawingEditRef.current) {
+        finishEditDrawing();
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        return;
+      }
+      if (rectangleZoomDragRef.current) {
+        const layout = getLayout();
+        const { start, end } = rectangleZoomDragRef.current;
+        rectangleZoomDragRef.current = null;
+        setRectangleZoomRect(null);
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        if (layout) {
+          const applied = applyRectangleZoom({
+            chart,
+            plot: layout.plot,
+            start,
+            end,
+            initialVisiblePoints,
+            viewStateRef,
+            yScaleRef,
+            yCenterOffsetRef,
+            yManualScaleRef
+          });
+          if (applied) {
+            setRectangleZoomActive(false);
+            requestRender();
+          }
+        }
+        return;
+      }
+      dragRef.current = null;
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+    },
+    [
+      chart,
+      getLayout,
+      initialVisiblePoints,
+      requestRender,
+      viewStateRef,
+      yCenterOffsetRef,
+      yManualScaleRef,
+      yScaleRef
+    ]
+  );
+  const handleWheel = useCallback3(
+    (event) => {
+      const point = getLocalPoint(event);
+      const layout = getLayout();
+      if (!point || !layout) return;
+      if (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) {
+        return;
+      }
+      event.preventDefault();
+      if (event.shiftKey) {
+        const currentScale = yScaleRef.current.get(chart.id) ?? 1;
+        yScaleRef.current.set(
+          chart.id,
+          Math.min(
+            Y_SCALE_MAX,
+            Math.max(
+              Y_SCALE_MIN,
+              currentScale * Math.exp(event.deltaY * 0.01)
+            )
+          )
+        );
+        yManualScaleRef.current.add(chart.id);
+        requestRender();
+        return;
+      }
+      const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+      const ratio = (point.x - layout.plot.x) / layout.plot.width;
+      const anchor = state.xMin + ratio * (state.xMax - state.xMin);
+      const zoom = Math.exp(event.deltaY * 15e-4);
+      const nextMin = anchor - (anchor - state.xMin) * zoom;
+      const nextMax = anchor + (state.xMax - anchor) * zoom;
+      if (nextMax - nextMin < X_SCALE_MIN_SPAN) return;
+      viewStateRef.current.set(chart.id, {
+        xMin: nextMin,
+        xMax: nextMax
+      });
+      requestRender();
+    },
+    [
+      chart,
+      getLayout,
+      getLocalPoint,
+      initialVisiblePoints,
+      requestRender,
+      viewStateRef,
+      yScaleRef,
+      yManualScaleRef
+    ]
+  );
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return void 0;
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => container.removeEventListener("wheel", handleWheel);
+  }, [handleWheel]);
+  const handleContextMenu = useCallback3(
+    (event) => {
+      const point = getLocalPoint(event);
+      const layout = getLayout();
+      if (!point || !layout) return;
+      event.preventDefault();
+      onChartContextMenu?.({
+        chart,
+        event,
+        point: getChartContextMenuPoint({
+          point,
+          chart,
+          layout,
+          initialVisiblePoints,
+          viewStateRef,
+          yScaleRef,
+          yCenterOffsetRef
+        })
+      });
+    },
+    [
+      chart,
+      getLayout,
+      getLocalPoint,
+      initialVisiblePoints,
+      onChartContextMenu,
+      viewStateRef,
+      yCenterOffsetRef,
+      yScaleRef
+    ]
+  );
+  useEffect3(() => {
+    const handleKeyDown = (event) => {
+      const target = event.target;
+      const editable = target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+      if (editable) return;
+      if (event.key.toLowerCase() === "r") {
+        event.preventDefault();
+        onReset?.(chart.id);
+        setRectangleZoomActive(false);
+        setRectangleZoomRect(null);
+        requestRender();
+        return;
+      }
+      if (event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        toggleRectangleZoom();
+        return;
+      }
+      if (event.key.toLowerCase() === "m") {
+        event.preventDefault();
+        onMovingAverageToggle?.(chart.id);
+        requestRender();
+        return;
+      }
+      if (["t", "h", "v", "p"].includes(event.key.toLowerCase())) {
+        event.preventDefault();
+        const toolByKey = { t: "trendline", h: "hline", v: "vline", p: "pin" };
+        toggleDrawingTool(toolByKey[event.key.toLowerCase()]);
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        if (!selectedDrawingId) return;
+        event.preventDefault();
+        deleteSelectedDrawing();
+        return;
+      }
+      if (event.key === "Escape" || event.key.toLowerCase() === "f") {
+        event.preventDefault();
+        if (activeDrawingTool || draftDrawing || drawingEditRef.current) {
+          cancelDrawing();
+          return;
+        }
+        if (rectangleZoomActive) {
+          setRectangleZoomActive(false);
+          setRectangleZoomRect(null);
+          rectangleZoomDragRef.current = null;
+          return;
+        }
+        closeWithTransition();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    chart.id,
+    closeWithTransition,
+    activeDrawingTool,
+    cancelDrawing,
+    deleteSelectedDrawing,
+    draftDrawing,
+    onReset,
+    onMovingAverageToggle,
+    rectangleZoomActive,
+    requestRender,
+    toggleRectangleZoom,
+    toggleDrawingTool,
+    selectedDrawingId
+  ]);
+  const fullscreenLayout = getLayout();
+  const selectedDrawingLayout = getSelectedDrawingLayout(
+    fullscreenLayout ? [fullscreenLayout] : [],
+    drawings,
+    selectedDrawingId
+  );
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: `fixed inset-0 z-50 bg-background/95 backdrop-blur transition-opacity duration-150 ${visible ? "opacity-100" : "opacity-0"}`
+    },
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: `relative h-full overflow-hidden transition-transform duration-150 ${visible ? "scale-100" : "scale-[0.985]"}`,
+        style: {
+          cursor: rectangleZoomActive || activeDrawingTool ? "crosshair" : void 0
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: () => setCrosshair(null),
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        onContextMenu: handleContextMenu
+      },
+      /* @__PURE__ */ React5.createElement(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "pointer-events-none absolute left-0 top-0 z-10 block",
+          style: { width: "100%", height: "100%" }
+        }
+      ),
+      /* @__PURE__ */ React5.createElement(
+        ChartCell,
+        {
+          chart,
+          axisOverlay,
+          focused: true,
+          height: "100%",
+          isFullscreen: true,
+          backgroundColor,
+          onFocus: () => {
+          },
+          onFullscreenToggle: closeWithTransition,
+          onReset,
+          onJumpLatest,
+          onRectangleZoomToggle: toggleRectangleZoom,
+          rectangleZoomActive,
+          movingAverage: movingAverageByChart?.[chart.id],
+          onMovingAverageToggle,
+          activeDrawingTool,
+          onDrawingToolToggle: toggleDrawingTool,
+          hasDrawings: getDrawingsForChart(drawings, chart.id).length > 0,
+          onClearDrawingsRequest,
+          setRef: (node) => {
+            chartRef.current = node;
+          }
+        }
+      ),
+      /* @__PURE__ */ React5.createElement(
+        DrawingOverlay,
+        {
+          layouts: fullscreenLayout ? [fullscreenLayout] : [],
+          drawings,
+          draftDrawing,
+          selectedDrawingId,
+          projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
+            point: dataPoint,
+            layout: targetLayout,
+            initialVisiblePoints,
+            viewStateRef,
+            yScaleRef,
+            yCenterOffsetRef
+          }),
+          height: "100%"
+        }
+      ),
+      /* @__PURE__ */ React5.createElement(
+        TopMarkersOverlay,
+        {
+          layouts: fullscreenLayout ? [fullscreenLayout] : [],
+          markers: topMarkers,
+          viewStateRef,
+          initialVisiblePoints,
+          onMarkerClick: (marker) => {
+            closeWithTransition();
+            requestAnimationFrame(() => {
+              onTopMarkerClick?.(marker);
+            });
+          },
+          height: "100%"
+        }
+      ),
+      selectedDrawingLayout ? /* @__PURE__ */ React5.createElement(
+        DrawingOptionsToolbar,
+        {
+          drawing: selectedDrawingLayout.drawing,
+          style: getDrawingOptionsToolbarStyle(selectedDrawingLayout.layout),
+          onToggleExtend: toggleSelectedDrawingExtend,
+          onColorChange: updateSelectedDrawingColor,
+          onTextChange: updateSelectedDrawingText
+        }
+      ) : null,
+      fullscreenLayout && movingAverageByChart?.[chart.id]?.enabled ? /* @__PURE__ */ React5.createElement(
+        MovingAverageOptionsToolbar,
+        {
+          movingAverage: movingAverageByChart[chart.id],
+          style: getMovingAverageOptionsToolbarStyle(fullscreenLayout),
+          onChange: (nextMovingAverage) => onMovingAverageChange?.(chart.id, nextMovingAverage)
+        }
+      ) : null,
+      /* @__PURE__ */ React5.createElement(
+        CrosshairOverlay,
+        {
+          crosshair,
+          height: "100%",
+          xAxisLabel
+        }
+      ),
+      /* @__PURE__ */ React5.createElement(RectangleZoomOverlay, { rect: rectangleZoomRect })
+    )
+  );
+}
+function ChartGrid({
+  charts,
+  columns = 2,
+  className = "",
+  dataRevision = 0,
+  initialVisiblePoints = null,
+  backgroundColor = DEFAULT_CHART_BACKGROUND,
+  antialiasLines = false,
+  followLatest = false,
+  followVisibleLatest = true,
+  jumpToLatestRevision = 0,
+  drawings = EMPTY_ARRAY,
+  onDrawingsChange,
+  activeDrawingTool = null,
+  onActiveDrawingToolChange,
+  selectedDrawingId = null,
+  onSelectedDrawingIdChange,
+  createDrawingId,
+  onClearDrawingsRequest,
+  onChartContextMenu,
+  movingAverageByChart = EMPTY_OBJECT,
+  onMovingAverageToggle,
+  onMovingAverageChange,
+  seriesOrderByChart = EMPTY_OBJECT,
+  topMarkers = EMPTY_ARRAY,
+  onTopMarkerClick,
+  xAxisLabel = "STEP"
+}) {
+  const containerRef = useRef4(null);
+  const gridRef = useRef4(null);
+  const canvasRef = useRef4(null);
+  const glRef = useRef4(null);
+  const programRef = useRef4(null);
+  const antialiasProgramRef = useRef4(null);
+  const seriesBufferCacheRef = useRef4(createSeriesBufferCache());
+  const antialiasSeriesBufferCacheRef = useRef4(createSeriesBufferCache());
+  const movingAverageCacheRef = useRef4(/* @__PURE__ */ new Map());
+  const chartRefs = useRef4(/* @__PURE__ */ new Map());
+  const viewStateRef = useRef4(/* @__PURE__ */ new Map());
+  const yScaleRef = useRef4(/* @__PURE__ */ new Map());
+  const yCenterOffsetRef = useRef4(/* @__PURE__ */ new Map());
+  const yManualScaleRef = useRef4(/* @__PURE__ */ new Set());
+  const latestXRef = useRef4(/* @__PURE__ */ new Map());
+  const latestJumpRevisionRef = useRef4(jumpToLatestRevision);
+  const dragRef = useRef4(null);
+  const rectangleZoomDragRef = useRef4(null);
+  const scrollRafRef = useRef4(null);
+  const [revision, setRevision] = useState2(0);
+  const [crosshair, setCrosshair] = useState2(null);
+  const [axisOverlays, setAxisOverlays] = useState2({});
+  const [focusedChartId, setFocusedChartId] = useState2(null);
+  const [fullscreenChartId, setFullscreenChartId] = useState2(null);
+  const [rectangleZoomChartId, setRectangleZoomChartId] = useState2(null);
+  const [rectangleZoomRect, setRectangleZoomRect] = useState2(null);
+  const requestRender = useCallback3(() => {
+    setRevision((value) => value + 1);
+  }, []);
+  const {
+    draftDrawing,
+    drawingSessionRef,
+    drawingEditRef,
+    clearDraft,
+    cancelDrawing,
+    toggleDrawingTool,
+    commitDrawing,
+    startDraftDrawing,
+    updateDraftDrawing,
+    startEditDrawing,
+    finishEditDrawing,
+    deleteSelectedDrawing
+  } = useDrawingInteractions({
+    drawings,
+    onDrawingsChange,
+    activeDrawingTool,
+    onActiveDrawingToolChange,
+    selectedDrawingId,
+    onSelectedDrawingIdChange,
+    createDrawingId,
+    focusedChartId,
+    requireFocusedChart: true,
+    onModeChange: () => {
+      setRectangleZoomChartId(null);
+      setRectangleZoomRect(null);
+      rectangleZoomDragRef.current = null;
+    }
+  });
+  const closeFullscreen = useCallback3(() => {
+    setFullscreenChartId(null);
+    setCrosshair(null);
+    requestRender();
+  }, [requestRender]);
+  const openFullscreen = useCallback3(
+    (chartId) => {
+      setFocusedChartId(chartId);
+      setFullscreenChartId(chartId);
+      setCrosshair(null);
+      setRectangleZoomChartId(null);
+      setRectangleZoomRect(null);
+      rectangleZoomDragRef.current = null;
+      clearDraft();
+      requestRender();
+    },
+    [clearDraft, requestRender]
+  );
+  const toggleRectangleZoom = useCallback3((chartId) => {
+    setFocusedChartId(chartId);
+    setRectangleZoomRect(null);
+    rectangleZoomDragRef.current = null;
+    clearDraft();
+    onActiveDrawingToolChange?.(null);
+    setRectangleZoomChartId((current) => current === chartId ? null : chartId);
+  }, [clearDraft, onActiveDrawingToolChange]);
+  const toggleMovingAverage = useCallback3(
+    (chartId) => {
+      onMovingAverageToggle?.(chartId);
+      setFocusedChartId(chartId);
+      setRectangleZoomChartId(null);
+      clearDraft();
+      onActiveDrawingToolChange?.(null);
+      requestRender();
+    },
+    [
+      clearDraft,
+      onActiveDrawingToolChange,
+      onMovingAverageToggle,
+      requestRender
+    ]
+  );
+  const toggleSelectedDrawingExtend = useCallback3(() => {
+    if (!selectedDrawingId || !onDrawingsChange) return;
+    onDrawingsChange(
+      updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        ...drawing,
+        style: {
+          ...drawing.style,
+          extendRight: drawing.style?.extendRight === false
+        }
+      }))
+    );
+  }, [drawings, onDrawingsChange, selectedDrawingId]);
+  const updateSelectedDrawingColor = useCallback3(
+    (color) => {
+      if (!selectedDrawingId || !onDrawingsChange) return;
+      onDrawingsChange(
+        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+          ...drawing,
+          style: {
+            ...drawing.style,
+            color
+          }
+        }))
+      );
+    },
+    [drawings, onDrawingsChange, selectedDrawingId]
+  );
+  const updateSelectedDrawingText = useCallback3(
+    (text) => {
+      if (!selectedDrawingId || !onDrawingsChange) return;
+      onDrawingsChange(
+        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+          ...drawing,
+          style: {
+            ...drawing.style,
+            text
+          }
+        }))
+      );
+    },
+    [drawings, onDrawingsChange, selectedDrawingId]
+  );
+  const { getAppendAnimatedPoint } = useAppendAnimations({
+    charts,
+    dataRevision,
+    requestRender
+  });
+  useEffect3(() => {
+    if (!focusedChartId) return;
+    if (charts.some((chart) => chart.id === focusedChartId)) return;
+    setFocusedChartId(null);
+  }, [charts, focusedChartId]);
+  useEffect3(() => {
+    if (!fullscreenChartId) return;
+    if (charts.some((chart) => chart.id === fullscreenChartId)) return;
+    setFullscreenChartId(null);
+  }, [charts, fullscreenChartId]);
+  useEffect3(() => {
+    const gl = glRef.current;
+    if (!gl) return;
+    const activeSeriesIds = new Set(
+      charts.flatMap((chart) => chart.series.map((series) => series.id))
+    );
+    charts.forEach((chart) => {
+      const movingAverage = normalizeMovingAverage(movingAverageByChart?.[chart.id]);
+      if (!movingAverage) return;
+      chart.series.forEach((series) => {
+        activeSeriesIds.add(getMovingAverageCacheKey(series, movingAverage));
+      });
+    });
+    seriesBufferCacheRef.current.forEach((entry, seriesId) => {
+      if (activeSeriesIds.has(seriesId)) return;
+      if (entry.buffer) gl.deleteBuffer(entry.buffer);
+      seriesBufferCacheRef.current.delete(seriesId);
+    });
+    antialiasSeriesBufferCacheRef.current.forEach((entry, seriesId) => {
+      if (activeSeriesIds.has(seriesId)) return;
+      if (entry.buffer) gl.deleteBuffer(entry.buffer);
+      antialiasSeriesBufferCacheRef.current.delete(seriesId);
+    });
+    movingAverageCacheRef.current.forEach((entry, seriesId) => {
+      if (activeSeriesIds.has(seriesId)) return;
+      movingAverageCacheRef.current.delete(seriesId);
+    });
+  }, [charts, movingAverageByChart]);
+  useEffect3(() => {
+    charts.forEach((chart) => {
+      if (!viewStateRef.current.has(chart.id)) {
+        viewStateRef.current.set(
+          chart.id,
+          getInitialView(chart, initialVisiblePoints)
+        );
+      }
+      if (!yScaleRef.current.has(chart.id)) {
+        yScaleRef.current.set(chart.id, 1);
+      }
+      if (!yCenterOffsetRef.current.has(chart.id)) {
+        yCenterOffsetRef.current.set(chart.id, 0);
+      }
+      if (!latestXRef.current.has(chart.id)) {
+        latestXRef.current.set(chart.id, getChartXBounds(chart).maxX);
+      }
+    });
+  }, [charts, initialVisiblePoints]);
+  useEffect3(() => {
+    charts.forEach((chart) => {
+      const previousMax = latestXRef.current.get(chart.id);
+      const { maxX } = getChartXBounds(chart);
+      if (!Number.isFinite(maxX)) return;
+      if (!Number.isFinite(previousMax)) {
+        latestXRef.current.set(chart.id, maxX);
+        return;
+      }
+      if (maxX !== previousMax) {
+        const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+        const span = state.xMax - state.xMin;
+        const rightEdgeFollowMin = state.xMax - span * FOLLOW_VISIBLE_RIGHT_EDGE_RATIO;
+        const previousMaxVisible = previousMax >= state.xMin && previousMax <= state.xMax;
+        const previousMaxNearRightEdge = previousMax >= rightEdgeFollowMin;
+        if (followLatest || followVisibleLatest && previousMaxVisible && previousMaxNearRightEdge) {
+          const delta = maxX - previousMax;
+          const nextState = {
+            xMin: state.xMin + delta,
+            xMax: state.xMax + delta
+          };
+          viewStateRef.current.set(chart.id, nextState);
+          const latestYBounds = getLatestYBounds(chart);
+          if (Number.isFinite(latestYBounds.minY) && Number.isFinite(latestYBounds.maxY)) {
+            const baseYRange = getYRange(
+              chart,
+              nextState.xMin,
+              nextState.xMax,
+              getPlotWidth(chartRefs.current.get(chart.id))
+            );
+            const scale = yScaleRef.current.get(chart.id) ?? 1;
+            const currentOffset = yCenterOffsetRef.current.get(chart.id) ?? 0;
+            const scaledYRange = applyYScale(baseYRange, scale, currentOffset);
+            const pad = (scaledYRange.maxY - scaledYRange.minY) * 0.08;
+            let nextOffset = currentOffset;
+            if (latestYBounds.maxY > scaledYRange.maxY - pad) {
+              nextOffset += latestYBounds.maxY - (scaledYRange.maxY - pad);
+            } else if (latestYBounds.minY < scaledYRange.minY + pad) {
+              nextOffset += latestYBounds.minY - (scaledYRange.minY + pad);
+            }
+            if (nextOffset !== currentOffset) {
+              yCenterOffsetRef.current.set(chart.id, nextOffset);
+            }
+          }
+        }
+      }
+      latestXRef.current.set(chart.id, maxX);
+    });
+  }, [
+    charts,
+    dataRevision,
+    followLatest,
+    followVisibleLatest,
+    initialVisiblePoints
+  ]);
+  useEffect3(() => {
+    if (latestJumpRevisionRef.current === jumpToLatestRevision) return;
+    latestJumpRevisionRef.current = jumpToLatestRevision;
+    charts.forEach((chart) => {
+      const { maxX } = getChartXBounds(chart);
+      if (!Number.isFinite(maxX)) return;
+      const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+      const span = Math.max(10, state.xMax - state.xMin);
+      const rightPadding = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+      const nextMax = maxX + rightPadding;
+      viewStateRef.current.set(chart.id, {
+        xMin: nextMax - span,
+        xMax: nextMax
+      });
+    });
+    requestRender();
+  }, [charts, initialVisiblePoints, jumpToLatestRevision, requestRender]);
+  const getChartLayout = useCallback3(() => {
+    const container = containerRef.current;
+    const grid = gridRef.current;
+    if (!container) return [];
+    return charts.map((chart) => {
+      const node = chartRefs.current.get(chart.id);
+      if (!node) return null;
+      const rect = {
+        x: node.offsetLeft,
+        y: node.offsetTop,
+        width: node.offsetWidth,
+        height: node.offsetHeight
+      };
+      let parent = node.offsetParent;
+      while (parent && parent !== container && parent !== grid) {
+        rect.x += parent.offsetLeft;
+        rect.y += parent.offsetTop;
+        parent = parent.offsetParent;
+      }
+      const plot = {
+        x: rect.x + PLOT_PADDING.left,
+        y: rect.y + PLOT_PADDING.top,
+        width: Math.max(
+          1,
+          rect.width - PLOT_PADDING.left - PLOT_PADDING.right
+        ),
+        height: Math.max(
+          1,
+          rect.height - PLOT_PADDING.top - PLOT_PADDING.bottom
+        )
+      };
+      const visibleTop = container.scrollTop;
+      const visibleBottom = visibleTop + container.clientHeight;
+      const visible = rect.y + rect.height >= visibleTop && rect.y <= visibleBottom;
+      return { chart, rect, plot, visible };
+    }).filter(Boolean);
+  }, [charts]);
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const gl = canvas.getContext("webgl2", {
+      antialias: true,
+      alpha: true,
+      depth: false,
+      stencil: false,
+      preserveDrawingBuffer: false
+    });
+    if (!gl) return;
+    glRef.current = gl;
+    programRef.current = createProgram(gl);
+    antialiasProgramRef.current = createAntialiasProgram(gl);
+    requestRender();
+    return () => {
+      deleteSeriesBuffers(gl, seriesBufferCacheRef.current);
+      deleteSeriesBuffers(gl, antialiasSeriesBufferCacheRef.current);
+      glRef.current = null;
+      programRef.current = null;
+      antialiasProgramRef.current = null;
+    };
+  }, [requestRender]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(requestRender);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [requestRender]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return void 0;
+    const handleScroll = () => {
+      setCrosshair(null);
+      if (scrollRafRef.current != null) return;
+      scrollRafRef.current = requestAnimationFrame(() => {
+        scrollRafRef.current = null;
+        requestRender();
+      });
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (scrollRafRef.current != null) {
+        cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = null;
+      }
+    };
+  }, [requestRender]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    const gl = glRef.current;
+    const program = programRef.current;
+    const antialiasProgram = antialiasProgramRef.current;
+    const seriesBufferCache = seriesBufferCacheRef.current;
+    const antialiasSeriesBufferCache = antialiasSeriesBufferCacheRef.current;
+    if (!container || !canvas || !gl || !program) return;
+    if (fullscreenChartId) {
+      canvas.style.transform = "";
+      gl.viewport(0, 0, canvas.width || 1, canvas.height || 1);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      setAxisOverlays({});
+      return;
+    }
+    const scrollLeft = container.scrollLeft;
+    const scrollTop = container.scrollTop;
+    canvas.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
+    const nextAxisOverlays = drawChartLayouts({
+      canvas,
+      width: container.clientWidth,
+      height: container.clientHeight,
+      gl,
+      program,
+      antialiasProgram,
+      antialiasLines,
+      layouts: getChartLayout().map(
+        (layout) => toViewportLayout(layout, scrollLeft, scrollTop)
+      ),
+      viewStateRef,
+      yScaleRef,
+      yCenterOffsetRef,
+      seriesBufferCache,
+      antialiasSeriesBufferCache,
+      initialVisiblePoints,
+      getAppendAnimatedPoint,
+      movingAverageByChart,
+      movingAverageCache: movingAverageCacheRef.current,
+      seriesOrderByChart
+    });
+    setAxisOverlays(nextAxisOverlays);
+  }, [
+    charts,
+    antialiasLines,
+    dataRevision,
+    fullscreenChartId,
+    getAppendAnimatedPoint,
+    getChartLayout,
+    initialVisiblePoints,
+    movingAverageByChart,
+    seriesOrderByChart,
+    revision
+  ]);
+  const findLayoutAt = useCallback3(
+    (clientX, clientY) => getChartLayout().find(
+      ({ plot, visible }) => visible && clientX >= plot.x && clientX <= plot.x + plot.width && clientY >= plot.y && clientY <= plot.y + plot.height
+    ),
+    [getChartLayout]
+  );
+  const findYAxisLayoutAt = useCallback3(
+    (clientX, clientY) => getChartLayout().find(
+      ({ rect, plot, visible }) => visible && clientX >= plot.x + plot.width && clientX <= rect.x + rect.width && clientY >= plot.y && clientY <= plot.y + plot.height
+    ),
+    [getChartLayout]
+  );
+  const findXAxisLayoutAt = useCallback3(
+    (clientX, clientY) => getChartLayout().find(
+      ({ rect, plot, visible }) => visible && clientX >= plot.x && clientX <= plot.x + plot.width && clientY >= plot.y + plot.height && clientY <= rect.y + rect.height
+    ),
+    [getChartLayout]
+  );
+  const getLocalPoint = useCallback3((event) => {
+    const container = containerRef.current;
+    const rect = container?.getBoundingClientRect();
+    if (!rect) return null;
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top + container.scrollTop
+    };
+  }, []);
+  const updateCrosshair = useCallback3(
+    (event) => {
+      const point = getLocalPoint(event);
+      if (!point) return;
+      const layout = findLayoutAt(point.x, point.y);
+      if (!layout) {
+        setCrosshair(null);
+        return;
+      }
+      const state = viewStateRef.current.get(layout.chart.id) || getInitialView(layout.chart, initialVisiblePoints);
+      const xRatio = (point.x - layout.plot.x) / layout.plot.width;
+      const xValue = state.xMin + xRatio * (state.xMax - state.xMin);
+      const yRange = getYRange(
+        layout.chart,
+        state.xMin,
+        state.xMax,
+        layout.plot.width
+      );
+      const scaledYRange = applyYScale(
+        yRange,
+        yScaleRef.current.get(layout.chart.id) ?? 1,
+        yCenterOffsetRef.current.get(layout.chart.id) ?? 0
+      );
+      const yRatio = (point.y - layout.plot.y) / layout.plot.height;
+      const yValue = scaledYRange.maxY - yRatio * (scaledYRange.maxY - scaledYRange.minY);
+      const nearestPoints = getOrderedSeries(layout.chart, seriesOrderByChart).map((series) => {
+        const visiblePoints = series.getVisiblePoints(
+          state.xMin,
+          state.xMax,
+          layout.plot.width
+        );
+        const index = getNearestPointIndex(visiblePoints.x, xValue);
+        if (index < 0) return null;
+        const pointX = visiblePoints.x[index];
+        const pointY = visiblePoints.y[index];
+        const pointXRatio = (pointX - state.xMin) / (state.xMax - state.xMin);
+        const pointYRatio = (scaledYRange.maxY - pointY) / (scaledYRange.maxY - scaledYRange.minY);
+        return {
+          id: series.id,
+          name: series.name,
+          color: series.color,
+          xValue: pointX,
+          yValue: pointY,
+          x: layout.plot.x + pointXRatio * layout.plot.width,
+          y: layout.plot.y + pointYRatio * layout.plot.height
+        };
+      }).filter(Boolean).filter(
+        (nearestPoint) => nearestPoint.x >= layout.plot.x - 1 && nearestPoint.x <= layout.plot.x + layout.plot.width + 1 && nearestPoint.y >= layout.plot.y - 1 && nearestPoint.y <= layout.plot.y + layout.plot.height + 1
+      );
+      const primaryPoint = nearestPoints[0];
+      const tooltipLeft = primaryPoint && primaryPoint.x + TOOLTIP_WIDTH + TOOLTIP_OFFSET > layout.rect.x + layout.rect.width ? primaryPoint.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET : (primaryPoint?.x ?? point.x) + TOOLTIP_OFFSET;
+      const tooltipTop = Math.max(
+        layout.rect.y + PLOT_PADDING.top,
+        Math.min(
+          (primaryPoint?.y ?? point.y) + TOOLTIP_OFFSET,
+          layout.rect.y + layout.rect.height - 96
+        )
+      );
+      setCrosshair({
+        chartId: layout.chart.id,
+        title: layout.chart.title,
+        x: point.x,
+        y: point.y,
+        xValue: primaryPoint?.xValue ?? xValue,
+        yValue: primaryPoint?.yValue ?? yValue,
+        points: nearestPoints,
+        tooltipX: Math.max(layout.rect.x + 6, tooltipLeft),
+        tooltipY: tooltipTop,
+        bucketSize: scaledYRange.bucketSize,
+        renderedPoints: scaledYRange.renderedPoints
+      });
+    },
+    [findLayoutAt, getLocalPoint, initialVisiblePoints, seriesOrderByChart]
+  );
+  const jumpChartToLatest = useCallback3(
+    (chartId) => {
+      const chart = charts.find((candidate) => candidate.id === chartId);
+      if (!chart) return;
+      const { maxX } = getChartXBounds(chart);
+      if (!Number.isFinite(maxX)) return;
+      const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
+      const span = Math.max(X_SCALE_MIN_SPAN, state.xMax - state.xMin);
+      const rightPadding = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
+      const nextMax = maxX + rightPadding;
+      viewStateRef.current.set(chart.id, {
+        xMin: nextMax - span,
+        xMax: nextMax
+      });
+      yCenterOffsetRef.current.set(chart.id, 0);
+      requestRender();
+    },
+    [charts, initialVisiblePoints, requestRender]
+  );
+  const resetChartView = useCallback3(
+    (chartId) => {
+      const chart = charts.find((candidate) => candidate.id === chartId);
+      if (!chart) return;
+      viewStateRef.current.set(chart.id, getInitialView(chart, initialVisiblePoints));
+      yScaleRef.current.set(chart.id, 1);
+      yCenterOffsetRef.current.set(chart.id, 0);
+      yManualScaleRef.current.delete(chart.id);
+      if (rectangleZoomChartId === chart.id) {
+        setRectangleZoomChartId(null);
+        setRectangleZoomRect(null);
+        rectangleZoomDragRef.current = null;
+      }
+      requestRender();
+    },
+    [charts, initialVisiblePoints, rectangleZoomChartId, requestRender]
+  );
+  const handleContextMenu = useCallback3(
+    (event) => {
+      if (fullscreenChartId) return;
+      const point = getLocalPoint(event);
+      if (!point) return;
+      const layout = findLayoutAt(point.x, point.y);
+      if (!layout) return;
+      event.preventDefault();
+      setFocusedChartId(layout.chart.id);
+      onChartContextMenu?.({
+        chart: layout.chart,
+        event,
+        point: getChartContextMenuPoint({
+          point,
+          chart: layout.chart,
+          layout,
+          initialVisiblePoints,
+          viewStateRef,
+          yScaleRef,
+          yCenterOffsetRef
+        })
+      });
+    },
+    [
+      findLayoutAt,
+      fullscreenChartId,
+      getLocalPoint,
+      initialVisiblePoints,
+      onChartContextMenu
+    ]
+  );
+  const handlePointerDown = useCallback3(
+    (event) => {
+      if (fullscreenChartId) return;
+      const point = getLocalPoint(event);
+      if (!point) return;
+      const drawingLayout = findLayoutAt(point.x, point.y);
+      if (drawingLayout && activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        setFocusedChartId(drawingLayout.chart.id);
+        const dataPoint = screenPointToDataPoint({
+          point,
+          chart: drawingLayout.chart,
+          plot: drawingLayout.plot,
+          initialVisiblePoints,
+          viewStateRef,
+          yScaleRef,
+          yCenterOffsetRef
+        });
+        if (activeDrawingTool === "hline" || activeDrawingTool === "vline" || activeDrawingTool === "pin") {
+          commitDrawing({
+            chartId: drawingLayout.chart.id,
+            type: activeDrawingTool,
+            start: dataPoint,
+            end: dataPoint
+          });
+          return;
+        }
+        const session = drawingSessionRef.current;
+        if (!session.startPoint || session.chartId !== drawingLayout.chart.id) {
+          startDraftDrawing({
+            chartId: drawingLayout.chart.id,
+            type: "trendline",
+            start: dataPoint,
+            end: dataPoint
+          });
+          return;
+        }
+        commitDrawing({
+          chartId: drawingLayout.chart.id,
+          type: "trendline",
+          start: session.startPoint,
+          end: dataPoint
+        });
+        return;
+      }
+      if (drawingLayout && Array.isArray(drawings) && drawings.length > 0) {
+        const chartDrawings = getDrawingsForChart(
+          drawings,
+          drawingLayout.chart.id
+        );
+        for (let i = chartDrawings.length - 1; i >= 0; i -= 1) {
+          const hit = hitTestDrawing({
+            point,
+            drawing: chartDrawings[i],
+            layout: drawingLayout,
+            projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
+              point: dataPoint,
+              layout: targetLayout,
+              initialVisiblePoints,
+              viewStateRef,
+              yScaleRef,
+              yCenterOffsetRef
+            })
+          });
+          if (hit) {
+            event.preventDefault();
+            setFocusedChartId(drawingLayout.chart.id);
+            onSelectedDrawingIdChange?.(hit.drawing.id);
+            if (hit.endpoint || hit.drawing.type === "hline" || hit.drawing.type === "vline" || hit.drawing.type === "pin") {
+              startEditDrawing({
+                drawingId: hit.drawing.id,
+                endpoint: hit.endpoint || "move"
+              });
+              event.currentTarget.setPointerCapture?.(event.pointerId);
+            }
+            return;
+          }
+        }
+        onSelectedDrawingIdChange?.(null);
+      }
+      if (rectangleZoomChartId) {
+        const layout2 = findLayoutAt(point.x, point.y);
+        if (!layout2 || layout2.chart.id !== rectangleZoomChartId || event.button !== 0) {
+          return;
+        }
+        event.preventDefault();
+        const start = clampPointToPlot(point, layout2.plot);
+        rectangleZoomDragRef.current = {
+          chartId: layout2.chart.id,
+          start,
+          end: start
+        };
+        setRectangleZoomRect({ start, end: start });
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      const yAxisLayout = findYAxisLayoutAt(point.x, point.y);
+      if (yAxisLayout) {
+        event.preventDefault();
+        dragRef.current = {
+          type: "y-scale",
+          chartId: yAxisLayout.chart.id,
+          startY: point.y,
+          startScale: yScaleRef.current.get(yAxisLayout.chart.id) ?? 1
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      const xAxisLayout = findXAxisLayoutAt(point.x, point.y);
+      if (xAxisLayout) {
+        event.preventDefault();
+        const state2 = viewStateRef.current.get(xAxisLayout.chart.id) || getInitialView(xAxisLayout.chart, initialVisiblePoints);
+        dragRef.current = {
+          type: "x-scale",
+          chartId: xAxisLayout.chart.id,
+          startX: point.x,
+          startMin: state2.xMin,
+          startMax: state2.xMax
+        };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        return;
+      }
+      const layout = findLayoutAt(point.x, point.y);
+      if (!layout) return;
+      const state = viewStateRef.current.get(layout.chart.id) || getInitialView(layout.chart, initialVisiblePoints);
+      const yRange = getYRange(
+        layout.chart,
+        state.xMin,
+        state.xMax,
+        layout.plot.width
+      );
+      const scaledYRange = applyYScale(
+        yRange,
+        yScaleRef.current.get(layout.chart.id) ?? 1,
+        yCenterOffsetRef.current.get(layout.chart.id) ?? 0
+      );
+      dragRef.current = {
+        type: "x-pan",
+        chartId: layout.chart.id,
+        startX: point.x,
+        startY: point.y,
+        startMin: state.xMin,
+        startMax: state.xMax,
+        startYOffset: yCenterOffsetRef.current.get(layout.chart.id) ?? 0,
+        canPanY: yManualScaleRef.current.has(layout.chart.id),
+        yValueSpan: scaledYRange.maxY - scaledYRange.minY,
+        width: layout.plot.width,
+        height: layout.plot.height
+      };
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    },
+    [
+      findLayoutAt,
+      findXAxisLayoutAt,
+      findYAxisLayoutAt,
+      getLocalPoint,
+      initialVisiblePoints,
+      fullscreenChartId,
+      rectangleZoomChartId,
+      activeDrawingTool,
+      commitDrawing,
+      drawings,
+      onSelectedDrawingIdChange
+    ]
+  );
+  const handlePointerMove = useCallback3(
+    (event) => {
+      if (fullscreenChartId) return;
+      updateCrosshair(event);
+      const drawingPoint = getLocalPoint(event);
+      if (drawingPoint) {
+        if (drawingEditRef.current) {
+          const editLayout = getChartLayout().find(
+            (layout) => getDrawingsForChart(drawings, layout.chart.id).some(
+              (drawing) => drawing.id === drawingEditRef.current.id
+            )
+          );
+          if (editLayout) {
+            const dataPoint = screenPointToDataPoint({
+              point: clampPointToPlot(drawingPoint, editLayout.plot),
+              chart: editLayout.chart,
+              plot: editLayout.plot,
+              initialVisiblePoints,
+              viewStateRef,
+              yScaleRef,
+              yCenterOffsetRef
+            });
+            const edit = drawingEditRef.current;
+            const nextDrawings = updateDrawingById(drawings, edit.id, (drawing) => {
+              if (drawing.type === "hline") {
+                const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
+                return {
+                  ...drawing,
+                  start: { ...drawing.start, x: dataPoint.x, y: dataPoint.y },
+                  end: {
+                    ...drawing.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 (edit.endpoint === "start" || edit.endpoint === "end") {
+                return { ...drawing, [edit.endpoint]: dataPoint };
+              }
+              return drawing;
+            });
+            onDrawingsChange?.(nextDrawings);
+          }
+          return;
+        }
+        if (activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+          const drawingLayout = findLayoutAt(drawingPoint.x, drawingPoint.y);
+          if (!drawingLayout) return;
+          const dataPoint = screenPointToDataPoint({
+            point: drawingPoint,
+            chart: drawingLayout.chart,
+            plot: drawingLayout.plot,
+            initialVisiblePoints,
+            viewStateRef,
+            yScaleRef,
+            yCenterOffsetRef
+          });
+          const session = drawingSessionRef.current;
+          const startPoint = activeDrawingTool === "trendline" && session.chartId === drawingLayout.chart.id ? session.startPoint : dataPoint;
+          if (startPoint || activeDrawingTool !== "trendline") {
+            updateDraftDrawing({
+              chartId: drawingLayout.chart.id,
+              type: activeDrawingTool,
+              start: startPoint || dataPoint,
+              end: dataPoint
+            });
+          }
+          return;
+        }
+      }
+      if (rectangleZoomDragRef.current) {
+        const point2 = getLocalPoint(event);
+        if (!point2) return;
+        const layout = getChartLayout().find(
+          (candidate) => candidate.chart.id === rectangleZoomDragRef.current.chartId
+        );
+        if (!layout) return;
+        const end = clampPointToPlot(point2, layout.plot);
+        rectangleZoomDragRef.current = {
+          ...rectangleZoomDragRef.current,
+          end
+        };
+        setRectangleZoomRect({
+          start: rectangleZoomDragRef.current.start,
+          end
+        });
+        return;
+      }
+      const drag = dragRef.current;
+      if (!drag) return;
+      const point = getLocalPoint(event);
+      if (!point) return;
+      if (drag.type === "y-scale") {
+        const nextScale = Math.min(
+          Y_SCALE_MAX,
+          Math.max(
+            Y_SCALE_MIN,
+            drag.startScale * Math.exp((point.y - drag.startY) * 0.01)
+          )
+        );
+        yScaleRef.current.set(drag.chartId, nextScale);
+        yManualScaleRef.current.add(drag.chartId);
+        requestRender();
+        return;
+      }
+      if (drag.type === "x-scale") {
+        const startSpan = drag.startMax - drag.startMin;
+        const nextSpan = Math.min(
+          X_SCALE_MAX_SPAN,
+          Math.max(
+            X_SCALE_MIN_SPAN,
+            startSpan * Math.exp((drag.startX - point.x) * 0.01)
+          )
+        );
+        viewStateRef.current.set(drag.chartId, {
+          xMin: drag.startMax - nextSpan,
+          xMax: drag.startMax
+        });
+        requestRender();
+        return;
+      }
+      const range = drag.startMax - drag.startMin;
+      const delta = (point.x - drag.startX) / drag.width * range;
+      viewStateRef.current.set(drag.chartId, {
+        xMin: drag.startMin - delta,
+        xMax: drag.startMax - delta
+      });
+      if (drag.canPanY) {
+        const yDelta = (point.y - drag.startY) / drag.height * drag.yValueSpan;
+        yCenterOffsetRef.current.set(drag.chartId, drag.startYOffset + yDelta);
+      }
+      requestRender();
+    },
+    [
+      fullscreenChartId,
+      activeDrawingTool,
+      drawings,
+      findLayoutAt,
+      getChartLayout,
+      getLocalPoint,
+      initialVisiblePoints,
+      onDrawingsChange,
+      requestRender,
+      updateCrosshair
+    ]
+  );
+  const handlePointerUp = useCallback3(
+    (event) => {
+      if (drawingEditRef.current) {
+        finishEditDrawing();
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        return;
+      }
+      if (rectangleZoomDragRef.current) {
+        const { chartId, start, end } = rectangleZoomDragRef.current;
+        const layout = getChartLayout().find(
+          (candidate) => candidate.chart.id === chartId
+        );
+        rectangleZoomDragRef.current = null;
+        setRectangleZoomRect(null);
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        if (layout) {
+          const applied = applyRectangleZoom({
+            chart: layout.chart,
+            plot: layout.plot,
+            start,
+            end,
+            initialVisiblePoints,
+            viewStateRef,
+            yScaleRef,
+            yCenterOffsetRef,
+            yManualScaleRef
+          });
+          if (applied) {
+            setRectangleZoomChartId(null);
+            requestRender();
+          }
+        }
+        return;
+      }
+      dragRef.current = null;
+      event.currentTarget.releasePointerCapture?.(event.pointerId);
+    },
+    [
+      getChartLayout,
+      initialVisiblePoints,
+      requestRender,
+      viewStateRef,
+      yCenterOffsetRef,
+      yManualScaleRef,
+      yScaleRef
+    ]
+  );
+  const handleWheel = useCallback3(
+    (event) => {
+      if (fullscreenChartId) return;
+      if (event.altKey) {
+        event.preventDefault();
+        const container = containerRef.current;
+        if (!container) return;
+        const deltaScale = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? 16 : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? container.clientHeight : 1;
+        container.scrollBy({
+          left: event.deltaX * deltaScale,
+          top: event.deltaY * deltaScale,
+          behavior: "auto"
+        });
+        return;
+      }
+      const point = getLocalPoint(event);
+      if (!point) return;
+      const layout = findLayoutAt(point.x, point.y);
+      if (!layout) return;
+      event.preventDefault();
+      if (event.shiftKey) {
+        const currentScale = yScaleRef.current.get(layout.chart.id) ?? 1;
+        yScaleRef.current.set(
+          layout.chart.id,
+          Math.min(
+            Y_SCALE_MAX,
+            Math.max(
+              Y_SCALE_MIN,
+              currentScale * Math.exp(event.deltaY * 0.01)
+            )
+          )
+        );
+        yManualScaleRef.current.add(layout.chart.id);
+        requestRender();
+        return;
+      }
+      const state = viewStateRef.current.get(layout.chart.id) || getInitialView(layout.chart, initialVisiblePoints);
+      const ratio = (point.x - layout.plot.x) / layout.plot.width;
+      const anchor = state.xMin + ratio * (state.xMax - state.xMin);
+      const zoom = Math.exp(event.deltaY * 15e-4);
+      const nextMin = anchor - (anchor - state.xMin) * zoom;
+      const nextMax = anchor + (state.xMax - anchor) * zoom;
+      if (nextMax - nextMin < 10) return;
+      viewStateRef.current.set(layout.chart.id, {
+        xMin: nextMin,
+        xMax: nextMax
+      });
+      requestRender();
+    },
+    [
+      findLayoutAt,
+      fullscreenChartId,
+      getLocalPoint,
+      initialVisiblePoints,
+      requestRender,
+      yScaleRef
+    ]
+  );
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!container) return void 0;
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+  const focusChartByKeyboard = useCallback3(
+    (direction) => {
+      if (fullscreenChartId || charts.length === 0) return false;
+      if (!focusedChartId) {
+        setFocusedChartId(charts[0].id);
+        chartRefs.current.get(charts[0].id)?.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        });
+        return true;
+      }
+      const currentIndex = Math.max(
+        0,
+        charts.findIndex((chart) => chart.id === focusedChartId)
+      );
+      const safeColumns = Math.max(1, Math.min(charts.length, Number(columns) || 1));
+      const rowStart = Math.floor(currentIndex / safeColumns) * safeColumns;
+      const rowEnd = Math.min(charts.length - 1, rowStart + safeColumns - 1);
+      let nextIndex = currentIndex;
+      if (direction === "left") {
+        nextIndex = Math.max(rowStart, currentIndex - 1);
+      } else if (direction === "right") {
+        nextIndex = Math.min(rowEnd, currentIndex + 1);
+      } else if (direction === "up") {
+        nextIndex = Math.max(0, currentIndex - safeColumns);
+      } else if (direction === "down") {
+        nextIndex = Math.min(charts.length - 1, currentIndex + safeColumns);
+      }
+      const nextChart = charts[nextIndex];
+      if (!nextChart || nextChart.id === focusedChartId) return false;
+      setFocusedChartId(nextChart.id);
+      setCrosshair(null);
+      setRectangleZoomChartId(null);
+      setRectangleZoomRect(null);
+      rectangleZoomDragRef.current = null;
+      clearDraft();
+      onActiveDrawingToolChange?.(null);
+      chartRefs.current.get(nextChart.id)?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest"
+      });
+      return true;
+    },
+    [
+      charts,
+      clearDraft,
+      columns,
+      focusedChartId,
+      fullscreenChartId,
+      onActiveDrawingToolChange
+    ]
+  );
+  useEffect3(() => {
+    const handleKeyDown = (event) => {
+      const target = event.target;
+      const editable = target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+      if (editable) {
+        return;
+      }
+      const arrowDirectionByKey = {
+        ArrowLeft: "left",
+        ArrowRight: "right",
+        ArrowUp: "up",
+        ArrowDown: "down"
+      };
+      const arrowDirection = arrowDirectionByKey[event.key];
+      if (arrowDirection) {
+        if (focusChartByKeyboard(arrowDirection)) {
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key.toLowerCase() === "r") {
+        event.preventDefault();
+        resetChartView(focusedChartId);
+        return;
+      }
+      if (event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        toggleRectangleZoom(focusedChartId);
+        return;
+      }
+      if (event.key.toLowerCase() === "m") {
+        event.preventDefault();
+        toggleMovingAverage(focusedChartId);
+        return;
+      }
+      if (["t", "h", "v", "p"].includes(event.key.toLowerCase())) {
+        event.preventDefault();
+        const toolByKey = { t: "trendline", h: "hline", v: "vline", p: "pin" };
+        toggleDrawingTool(toolByKey[event.key.toLowerCase()]);
+        return;
+      }
+      if (event.key === "Delete" || event.key === "Backspace") {
+        if (!selectedDrawingId) return;
+        event.preventDefault();
+        deleteSelectedDrawing();
+        return;
+      }
+      if (event.key === "Escape" && (activeDrawingTool || draftDrawing || drawingEditRef.current)) {
+        event.preventDefault();
+        cancelDrawing();
+        return;
+      }
+      if (event.key === "Escape" && rectangleZoomChartId) {
+        event.preventDefault();
+        setRectangleZoomChartId(null);
+        setRectangleZoomRect(null);
+        rectangleZoomDragRef.current = null;
+        return;
+      }
+      if (event.key.toLowerCase() === "f") {
+        if (fullscreenChartId) return;
+        event.preventDefault();
+        openFullscreen(focusedChartId);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    focusedChartId,
+    fullscreenChartId,
+    activeDrawingTool,
+    cancelDrawing,
+    deleteSelectedDrawing,
+    draftDrawing,
+    focusChartByKeyboard,
+    openFullscreen,
+    rectangleZoomChartId,
+    resetChartView,
+    selectedDrawingId,
+    toggleMovingAverage,
+    toggleDrawingTool,
+    toggleRectangleZoom
+  ]);
+  const fullscreenChart = fullscreenChartId ? charts.find((chart) => chart.id === fullscreenChartId) : null;
+  const chartLayouts = fullscreenChart ? [] : getChartLayout();
+  const selectedDrawingLayout = getSelectedDrawingLayout(
+    chartLayouts,
+    drawings,
+    selectedDrawingId
+  );
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative h-full overflow-y-auto ${className}`,
+      style: {
+        cursor: rectangleZoomChartId || activeDrawingTool ? "crosshair" : void 0
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerLeave: () => setCrosshair(null),
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onContextMenu: handleContextMenu
+    },
+    /* @__PURE__ */ React5.createElement(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: "pointer-events-none absolute left-0 top-0 z-10 block",
+        style: {
+          width: "100%"
+        }
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        ref: gridRef,
+        className: "relative z-0 grid gap-1 pt-1",
+        style: {
+          gridTemplateColumns: `repeat(${columns}, minmax(18rem, 1fr))`
+        }
+      },
+      charts.map((chart) => /* @__PURE__ */ React5.createElement(
+        ChartCell,
+        {
+          key: chart.id,
+          chart,
+          axisOverlay: axisOverlays[chart.id],
+          focused: focusedChartId === chart.id,
+          backgroundColor,
+          onFocus: setFocusedChartId,
+          onFullscreenToggle: () => openFullscreen(chart.id),
+          onReset: resetChartView,
+          onJumpLatest: jumpChartToLatest,
+          onRectangleZoomToggle: toggleRectangleZoom,
+          rectangleZoomActive: rectangleZoomChartId === chart.id,
+          movingAverage: movingAverageByChart?.[chart.id],
+          onMovingAverageToggle: toggleMovingAverage,
+          activeDrawingTool: focusedChartId === chart.id ? activeDrawingTool : null,
+          onDrawingToolToggle: toggleDrawingTool,
+          hasDrawings: getDrawingsForChart(drawings, chart.id).length > 0,
+          onClearDrawingsRequest,
+          setRef: (node) => {
+            if (node) chartRefs.current.set(chart.id, node);
+            else chartRefs.current.delete(chart.id);
+          }
+        }
+      ))
+    ),
+    /* @__PURE__ */ React5.createElement(
+      CrosshairOverlay,
+      {
+        crosshair: fullscreenChart ? null : crosshair,
+        height: containerRef.current?.scrollHeight ?? "100%",
+        xAxisLabel
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(
+      DrawingOverlay,
+      {
+        layouts: chartLayouts,
+        drawings,
+        draftDrawing: fullscreenChart ? null : draftDrawing,
+        selectedDrawingId,
+        projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
+          point: dataPoint,
+          layout: targetLayout,
+          initialVisiblePoints,
+          viewStateRef,
+          yScaleRef,
+          yCenterOffsetRef
+        }),
+        height: containerRef.current?.scrollHeight ?? "100%"
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(
+      TopMarkersOverlay,
+      {
+        layouts: fullscreenChart ? [] : chartLayouts,
+        markers: topMarkers,
+        viewStateRef,
+        initialVisiblePoints,
+        onMarkerClick: onTopMarkerClick,
+        height: containerRef.current?.scrollHeight ?? "100%"
+      }
+    ),
+    selectedDrawingLayout ? /* @__PURE__ */ React5.createElement(
+      DrawingOptionsToolbar,
+      {
+        drawing: selectedDrawingLayout.drawing,
+        style: getDrawingOptionsToolbarStyle(selectedDrawingLayout.layout),
+        onToggleExtend: toggleSelectedDrawingExtend,
+        onColorChange: updateSelectedDrawingColor,
+        onTextChange: updateSelectedDrawingText
+      }
+    ) : null,
+    !fullscreenChart && focusedChartId && movingAverageByChart?.[focusedChartId]?.enabled ? (() => {
+      const layout = chartLayouts.find(
+        (candidate) => candidate.chart.id === focusedChartId
+      );
+      if (!layout) return null;
+      return /* @__PURE__ */ React5.createElement(
+        MovingAverageOptionsToolbar,
+        {
+          movingAverage: movingAverageByChart[focusedChartId],
+          style: getMovingAverageOptionsToolbarStyle(layout),
+          onChange: (nextMovingAverage) => onMovingAverageChange?.(focusedChartId, nextMovingAverage)
+        }
+      );
+    })() : null,
+    /* @__PURE__ */ React5.createElement(RectangleZoomOverlay, { rect: fullscreenChart ? null : rectangleZoomRect }),
+    fullscreenChart ? /* @__PURE__ */ React5.createElement(
+      LeanChartFullscreenOverlay,
+      {
+        chart: fullscreenChart,
+        dataRevision,
+        renderRevision: revision,
+        initialVisiblePoints,
+        backgroundColor,
+        antialiasLines,
+        getAppendAnimatedPoint,
+        viewStateRef,
+        yScaleRef,
+        yCenterOffsetRef,
+        yManualScaleRef,
+        movingAverageByChart,
+        movingAverageCache: movingAverageCacheRef.current,
+        onMovingAverageToggle: toggleMovingAverage,
+        onMovingAverageChange,
+        seriesOrderByChart,
+        onClose: closeFullscreen,
+        onReset: resetChartView,
+        onJumpLatest: jumpChartToLatest,
+        xAxisLabel,
+        drawings,
+        onDrawingsChange,
+        activeDrawingTool,
+        onActiveDrawingToolChange,
+        selectedDrawingId,
+        onSelectedDrawingIdChange,
+        createDrawingId,
+        onClearDrawingsRequest,
+        onChartContextMenu,
+        topMarkers,
+        onTopMarkerClick
+      }
+    ) : null
+  );
+}
+export {
+  ChartGrid,
+  createMockCharts,
+  createSeries
+};
+//# sourceMappingURL=index.js.map