hyperprop-charting-library 0.1.0

package/dist/hyperprop-charting-library.cjs

@@ -0,0 +1,1475 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  createChart: () => createChart
+});
+module.exports = __toCommonJS(index_exports);
+var DEFAULT_GRID_OPTIONS = {
+  color: "#e2e8f0",
+  opacity: 0.9,
+  horizontalLines: true,
+  verticalLines: true,
+  horizontalTickCount: 5
+};
+var DEFAULT_AXIS_OPTIONS = {
+  lineColor: "#94a3b8",
+  textColor: "#94a3b8",
+  fontSize: 12,
+  lineWidth: 1
+};
+var DEFAULT_CROSSHAIR_OPTIONS = {
+  visible: true,
+  color: "#94a3b8",
+  width: 1,
+  style: "dotted",
+  showHorizontal: true,
+  showVertical: true
+};
+var DEFAULT_WATERMARK_OPTIONS = {
+  visible: false,
+  text: "",
+  color: "#94a3b8",
+  opacity: 0.2,
+  fontSize: 92,
+  fontWeight: 700,
+  thickness: 0
+};
+var DEFAULT_PRICE_LINE_OPTIONS = {
+  visible: true,
+  style: "solid",
+  thickness: 1,
+  color: "#f59e0b",
+  labelBackgroundColor: "#f59e0b",
+  labelTextColor: "#0f172a",
+  labelBorderRadius: 3,
+  showLabel: true
+};
+var DEFAULT_ORDER_LINE_OPTIONS = {
+  visible: true,
+  behavior: "static",
+  style: "solid",
+  thickness: 1,
+  color: "#f59e0b",
+  labelBackgroundColor: "#f59e0b",
+  labelTextColor: "#0f172a",
+  labelBorderRadius: 3,
+  showCloseButton: true,
+  widgetPosition: "left",
+  draggable: false,
+  actionButtonAction: "execute",
+  actionButtonTextColor: "#dbeafe",
+  actionButtonBackgroundColor: "#2563eb",
+  actionButtonBorderRadius: 2,
+  actionButtonMinWidth: 34,
+  actionButtonPaddingX: 0,
+  actionButtonFullHeight: true,
+  actionButtonFontWeight: 500,
+  actionButtonBorderColor: "#2563eb",
+  actionButtonBorderStyle: "solid",
+  actionButtons: [],
+  connectorToPrice: Number.NaN,
+  connectorColor: "#2563eb",
+  connectorStyle: "dotted",
+  connectorThickness: 1,
+  connectorAnchorPaddingRight: 10,
+  fillToPrice: Number.NaN,
+  fillColor: "rgba(37,99,235,0.18)"
+};
+var DEFAULT_OPTIONS = {
+  width: 720,
+  height: 360,
+  backgroundColor: "#ffffff",
+  axisColor: "#94a3b8",
+  axis: DEFAULT_AXIS_OPTIONS,
+  upColor: "#16a34a",
+  downColor: "#dc2626",
+  gridColor: "#e2e8f0",
+  fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+  candleBodyWidthRatio: 0.7,
+  candleMinWidth: 0.5,
+  candleWickWidth: 1,
+  autoScaleSmoothing: 0.16,
+  autoScaleIgnoreLatestCandle: true,
+  doubleClickEnabled: true,
+  doubleClickAction: "reset",
+  crosshair: DEFAULT_CROSSHAIR_OPTIONS,
+  grid: DEFAULT_GRID_OPTIONS,
+  watermark: DEFAULT_WATERMARK_OPTIONS,
+  priceLines: [],
+  orderLines: [],
+  tickerLine: {
+    visible: true,
+    style: "dashed",
+    thickness: 1,
+    color: "#22c55e",
+    labelBackgroundColor: "#22c55e",
+    labelTextColor: "#0b1220",
+    labelBorderRadius: 6
+  }
+};
+function createChart(element, options = {}) {
+  const mergedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+    axis: {
+      ...DEFAULT_AXIS_OPTIONS,
+      ...options.axis ?? {},
+      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
+    },
+    crosshair: {
+      ...DEFAULT_CROSSHAIR_OPTIONS,
+      ...options.crosshair ?? {}
+    },
+    grid: {
+      ...DEFAULT_GRID_OPTIONS,
+      ...options.grid
+    },
+    watermark: {
+      ...DEFAULT_WATERMARK_OPTIONS,
+      ...options.watermark
+    },
+    tickerLine: {
+      ...DEFAULT_OPTIONS.tickerLine,
+      ...options.tickerLine
+    }
+  };
+  let width = mergedOptions.width;
+  let height = mergedOptions.height;
+  let data = [];
+  let priceLines = (options.priceLines ?? []).map((line, index) => ({
+    ...line,
+    id: line.id ?? `line-${index + 1}`
+  }));
+  let orderLines = (options.orderLines ?? []).map((line, index) => ({
+    ...line,
+    id: line.id ?? `order-${index + 1}`
+  }));
+  let orderActionHandler = null;
+  let chartClickHandler = null;
+  let orderActionRegions = [];
+  let orderDragRegions = [];
+  let generatedPriceLineId = 1;
+  let generatedOrderLineId = 1;
+  const orderWidgetWidthById = /* @__PURE__ */ new Map();
+  const orderPriceTagWidthById = /* @__PURE__ */ new Map();
+  let xCenter = 0;
+  let xSpan = 60;
+  let yMinOverride = null;
+  let yMaxOverride = null;
+  let autoYMin = null;
+  let autoYMax = null;
+  let drawState = null;
+  let orderDragState = null;
+  let actionDragState = null;
+  let pointerDownInfo = null;
+  let crosshairPoint = null;
+  let doubleClickEnabled = mergedOptions.doubleClickEnabled;
+  let doubleClickAction = mergedOptions.doubleClickAction;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Could not create canvas context.");
+  }
+  canvas.style.display = "block";
+  canvas.style.touchAction = "none";
+  element.innerHTML = "";
+  element.appendChild(canvas);
+  const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  const maxPanBars = 1e6;
+  const rightEdgePaddingBars = 2;
+  const getPixelRatio = () => {
+    if (typeof window === "undefined") {
+      return 1;
+    }
+    return Math.max(1, window.devicePixelRatio || 1);
+  };
+  const crisp = (value) => Math.round(value) + 0.5;
+  const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+  };
+  const clampXViewport = () => {
+    const count = data.length;
+    if (count === 0) {
+      xCenter = 0;
+      xSpan = 60;
+      return;
+    }
+    const minSpan = 5;
+    const maxSpan = Math.max(minSpan, count + maxPanBars * 2);
+    xSpan = clamp(xSpan, minSpan, maxSpan);
+    xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
+  };
+  const fitXViewport = () => {
+    const count = data.length;
+    if (count === 0) {
+      xCenter = 0;
+      xSpan = 60;
+      return;
+    }
+    xSpan = Math.min(60, count);
+    xCenter = count - xSpan / 2;
+    clampXViewport();
+  };
+  const getYBounds = () => {
+    const allDataMin = Math.min(...data.map((point) => point.l));
+    const allDataMax = Math.max(...data.map((point) => point.h));
+    const baseRange = allDataMax - allDataMin || 1;
+    const minRange = Math.max(baseRange * 3e-3, 1e-4);
+    const hardMin = allDataMin - baseRange * 3;
+    const hardMax = allDataMax + baseRange * 3;
+    return {
+      allDataMin,
+      allDataMax,
+      baseRange,
+      minRange,
+      hardMin,
+      hardMax,
+      hardSpan: Math.max(minRange, hardMax - hardMin)
+    };
+  };
+  const clampYRange = (minValue, maxValue) => {
+    const bounds = getYBounds();
+    const requestedRange = maxValue - minValue || 1;
+    const range = clamp(requestedRange, bounds.minRange, bounds.hardSpan);
+    const center = (minValue + maxValue) / 2;
+    let nextMin = center - range / 2;
+    let nextMax = center + range / 2;
+    if (nextMin < bounds.hardMin) {
+      const shift = bounds.hardMin - nextMin;
+      nextMin += shift;
+      nextMax += shift;
+    }
+    if (nextMax > bounds.hardMax) {
+      const shift = nextMax - bounds.hardMax;
+      nextMin -= shift;
+      nextMax -= shift;
+    }
+    return { min: nextMin, max: nextMax };
+  };
+  const formatPrice = (price) => {
+    if (price >= 1e3) {
+      return price.toFixed(0);
+    }
+    if (price >= 100) {
+      return price.toFixed(1);
+    }
+    return price.toFixed(2);
+  };
+  const parseData = (nextData) => {
+    return nextData.map((point) => ({
+      time: new Date(point.t),
+      o: point.o,
+      h: point.h,
+      l: point.l,
+      c: point.c,
+      ...point.v === void 0 ? {} : { v: point.v }
+    })).filter((point) => Number.isFinite(point.time.getTime())).sort((a, b) => a.time.getTime() - b.time.getTime());
+  };
+  const getTimeStepMs = () => {
+    if (data.length < 2) {
+      return 24 * 60 * 60 * 1e3;
+    }
+    const deltas = [];
+    for (let index = 1; index < Math.min(data.length, 40); index += 1) {
+      const previous = data[index - 1];
+      const current = data[index];
+      if (!previous || !current) {
+        continue;
+      }
+      const delta = current.time.getTime() - previous.time.getTime();
+      if (delta > 0) {
+        deltas.push(delta);
+      }
+    }
+    if (deltas.length === 0) {
+      return 24 * 60 * 60 * 1e3;
+    }
+    deltas.sort((a, b) => a - b);
+    return deltas[Math.floor(deltas.length / 2)] || 24 * 60 * 60 * 1e3;
+  };
+  const getTimeForIndex = (index) => {
+    if (data.length === 0) {
+      return null;
+    }
+    const direct = data[index];
+    if (direct) {
+      return direct.time;
+    }
+    const stepMs = getTimeStepMs();
+    const first = data[0];
+    const last = data[data.length - 1];
+    if (!first || !last) {
+      return null;
+    }
+    if (index < 0) {
+      return new Date(first.time.getTime() + index * stepMs);
+    }
+    const extra = index - (data.length - 1);
+    return new Date(last.time.getTime() + extra * stepMs);
+  };
+  const drawText = (text, x, y, align = "left", baseline = "alphabetic", color = mergedOptions.axis?.textColor ?? mergedOptions.axisColor) => {
+    ctx.fillStyle = color;
+    ctx.textAlign = align;
+    ctx.textBaseline = baseline;
+    ctx.fillText(text, x, y);
+  };
+  const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
+    const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
+    if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
+      return;
+    }
+    const lineY = clamp(yFromPrice(mergedLine.price), chartTop + 1, chartBottom - 1);
+    const color = mergedLine.color;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = Math.max(1, mergedLine.thickness);
+    if (mergedLine.style === "dotted") {
+      ctx.setLineDash([2, 4]);
+    } else if (mergedLine.style === "dashed") {
+      ctx.setLineDash([8, 6]);
+    } else {
+      ctx.setLineDash([]);
+    }
+    ctx.beginPath();
+    ctx.moveTo(crisp(chartLeft), crisp(lineY));
+    ctx.lineTo(crisp(chartRight), crisp(lineY));
+    ctx.stroke();
+    ctx.restore();
+    if (!mergedLine.showLabel) {
+      return;
+    }
+    const labelText = mergedLine.label ?? formatPrice(mergedLine.price);
+    const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+    const labelPaddingX = 8;
+    const labelHeight = 20;
+    const labelWidth = Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelX = chartRight + 4;
+    const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
+    ctx.fillStyle = mergedLine.labelBackgroundColor;
+    fillRoundedRect(
+      Math.round(labelX),
+      Math.round(labelY),
+      labelWidth,
+      labelHeight,
+      Math.max(0, mergedLine.labelBorderRadius)
+    );
+    drawText(
+      labelText,
+      labelX + labelPaddingX,
+      labelY + labelHeight / 2,
+      "left",
+      "middle",
+      mergedLine.labelTextColor
+    );
+  };
+  const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
+    const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
+    const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
+    if (!mergedLine.visible || !Number.isFinite(renderPrice)) {
+      return;
+    }
+    const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
+    const color = mergedLine.color ?? (mergedLine.side === "buy" ? mergedOptions.upColor : mergedLine.side === "sell" ? mergedOptions.downColor : "#f59e0b");
+    if (Number.isFinite(mergedLine.fillToPrice)) {
+      const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
+      const topY = Math.min(lineY, fillY);
+      const heightY = Math.max(1, Math.abs(lineY - fillY));
+      ctx.save();
+      ctx.fillStyle = mergedLine.fillColor ?? "rgba(37,99,235,0.18)";
+      ctx.fillRect(Math.round(chartLeft), Math.round(topY), Math.max(1, Math.round(chartRight - chartLeft)), Math.round(heightY));
+      ctx.restore();
+    }
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = Math.max(1, mergedLine.thickness);
+    if (mergedLine.style === "dotted") {
+      ctx.setLineDash([2, 4]);
+    } else if (mergedLine.style === "dashed") {
+      ctx.setLineDash([8, 6]);
+    } else {
+      ctx.setLineDash([]);
+    }
+    ctx.beginPath();
+    ctx.moveTo(crisp(chartLeft), crisp(lineY));
+    ctx.lineTo(crisp(chartRight), crisp(lineY));
+    ctx.stroke();
+    ctx.restore();
+    if (Number.isFinite(mergedLine.connectorToPrice)) {
+      const connectorY = clamp(yFromPrice(mergedLine.connectorToPrice), chartTop + 1, chartBottom - 1);
+      const connectorX = chartRight - Math.max(6, mergedLine.connectorAnchorPaddingRight);
+      ctx.save();
+      ctx.strokeStyle = mergedLine.connectorColor ?? color;
+      ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
+      if (mergedLine.connectorStyle === "dotted") {
+        ctx.setLineDash([2, 5]);
+      } else if (mergedLine.connectorStyle === "dashed") {
+        ctx.setLineDash([6, 5]);
+      } else {
+        ctx.setLineDash([]);
+      }
+      ctx.beginPath();
+      ctx.moveTo(crisp(connectorX), crisp(lineY));
+      ctx.lineTo(crisp(connectorX), crisp(connectorY));
+      ctx.stroke();
+      ctx.restore();
+    }
+    const qtyText = mergedLine.qty === void 0 ? "" : String(mergedLine.qty);
+    const typeTextMap = {
+      market: "Market",
+      limit: "Limit",
+      stop: "Stop",
+      takeProfit: "TP"
+    };
+    const sideText = mergedLine.side === "buy" ? "Buy" : "Sell";
+    const baseText = `${sideText} ${typeTextMap[mergedLine.type]}`;
+    const pnlText = mergedLine.pnl === void 0 ? "" : `${mergedLine.pnl >= 0 ? "+" : ""}${mergedLine.pnl.toFixed(2)} USD`;
+    const centerText = mergedLine.label ?? (pnlText ? `${baseText} ${pnlText}` : baseText);
+    const closeAction = mergedLine.type === "market" ? "close" : "cancel";
+    const showCloseButton = mergedLine.showCloseButton;
+    const actionButtonText = mergedLine.actionButtonText;
+    const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+    const legacyButton = actionButtonText ? [
+      {
+        text: actionButtonText,
+        action: mergedLine.actionButtonAction ?? "execute",
+        textColor: mergedLine.actionButtonTextColor,
+        backgroundColor: mergedLine.actionButtonBackgroundColor,
+        borderColor: mergedLine.actionButtonBorderColor,
+        borderStyle: mergedLine.actionButtonBorderStyle,
+        borderRadius: mergedLine.actionButtonBorderRadius,
+        minWidth: mergedLine.actionButtonMinWidth,
+        paddingX: mergedLine.actionButtonPaddingX,
+        fullHeight: mergedLine.actionButtonFullHeight,
+        fontWeight: mergedLine.actionButtonFontWeight,
+        draggable: false
+      }
+    ] : [];
+    const actionButtons = [...mergedLine.actionButtons ?? [], ...legacyButton];
+    const actionButtonMetrics = actionButtons.map((button) => {
+      const paddingX = Math.max(2, button.paddingX ?? mergedLine.actionButtonPaddingX);
+      const minWidth = Math.max(16, button.minWidth ?? mergedLine.actionButtonMinWidth);
+      const width2 = Math.max(minWidth, Math.ceil(ctx.measureText(button.text).width) + paddingX * 2);
+      return { button, width: width2 };
+    });
+    const actionButtonInnerGap = actionButtonMetrics.length > 1 ? 4 : 0;
+    const actionButtonsTotalWidth = actionButtonMetrics.reduce((sum, metric) => sum + metric.width, 0) + Math.max(0, actionButtonMetrics.length - 1) * actionButtonInnerGap;
+    const actionButtonsGap = actionButtonMetrics.length > 0 ? 6 : 0;
+    const segmentPaddingX = 8;
+    const labelHeight = 22;
+    const qtyWidth = qtyText ? Math.ceil(ctx.measureText(qtyText).width) + segmentPaddingX * 2 : 0;
+    const centerMeasuredWidth = Math.ceil(ctx.measureText(centerText).width) + segmentPaddingX * 2;
+    const centerWidth = mergedLine.id === void 0 ? centerMeasuredWidth : Math.max(centerMeasuredWidth, orderWidgetWidthById.get(mergedLine.id) ?? 0);
+    if (mergedLine.id) {
+      orderWidgetWidthById.set(mergedLine.id, centerWidth);
+    }
+    const closeWidth = showCloseButton ? 24 : 0;
+    const mainWidgetWidth = qtyWidth + centerWidth + closeWidth;
+    const totalWidth = mainWidgetWidth + actionButtonsGap + actionButtonsTotalWidth;
+    const rightMarginInsideChart = 10;
+    const maxWidgetX = chartRight - totalWidth - rightMarginInsideChart;
+    const leftWidgetXBase = chartLeft + 8;
+    let leftWidgetX = leftWidgetXBase;
+    if (mergedLine.widgetPosition === "center") {
+      leftWidgetX = chartLeft + (chartRight - chartLeft - totalWidth) / 2;
+    } else if (mergedLine.widgetPosition === "right") {
+      leftWidgetX = maxWidgetX;
+    }
+    leftWidgetX = clamp(leftWidgetX, leftWidgetXBase, maxWidgetX);
+    const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
+    const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
+    const widgetBackground = mergedOptions.backgroundColor;
+    const widgetBorder = color;
+    const textColor = mergedLine.labelTextColor;
+    const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
+    ctx.fillStyle = widgetBackground;
+    fillRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);
+    ctx.strokeStyle = widgetBorder;
+    ctx.lineWidth = 1;
+    strokeRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);
+    let cursorX = mainWidgetX;
+    const separatorColor = "rgba(148,163,184,0.45)";
+    if (actionButtonMetrics.length > 0) {
+      let actionCursorX = leftWidgetX;
+      actionButtonMetrics.forEach((metric, i) => {
+        const { button, width: width2 } = metric;
+        const fullHeight = button.fullHeight ?? mergedLine.actionButtonFullHeight;
+        const actionPadding = fullHeight ? 0 : 2;
+        const actionX = actionCursorX + actionPadding;
+        const actionY = labelY + actionPadding;
+        const actionH = labelHeight - actionPadding * 2;
+        const actionW = Math.max(8, width2 - actionPadding * 2);
+        const actionRadius = Math.max(1, button.borderRadius ?? mergedLine.actionButtonBorderRadius);
+        const actionBg = button.backgroundColor ?? mergedLine.actionButtonBackgroundColor;
+        const actionTextColor = button.textColor ?? mergedLine.actionButtonTextColor;
+        const actionBorderColor = button.borderColor ?? mergedLine.actionButtonBorderColor;
+        const actionBorderStyle = button.borderStyle ?? mergedLine.actionButtonBorderStyle;
+        ctx.fillStyle = actionBg;
+        fillRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
+        ctx.save();
+        ctx.strokeStyle = actionBorderColor;
+        ctx.lineWidth = 1;
+        if (actionBorderStyle === "dotted") {
+          ctx.setLineDash([2, 3]);
+        } else if (actionBorderStyle === "dashed") {
+          ctx.setLineDash([6, 4]);
+        } else {
+          ctx.setLineDash([]);
+        }
+        strokeRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
+        ctx.restore();
+        const baseFont = ctx.font;
+        ctx.font = `${button.fontWeight ?? mergedLine.actionButtonFontWeight} ${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+        drawText(button.text, actionX + actionW / 2, actionY + actionH / 2, "center", "middle", actionTextColor);
+        ctx.font = baseFont;
+        if (mergedLine.id) {
+          orderActionRegions.push({
+            orderId: mergedLine.id,
+            action: button.action,
+            ...button.draggable === void 0 ? {} : { draggable: button.draggable },
+            x: actionX,
+            y: actionY,
+            width: actionW,
+            height: actionH,
+            line: mergedLine
+          });
+        }
+        actionCursorX += width2 + (i < actionButtonMetrics.length - 1 ? actionButtonInnerGap : 0);
+      });
+    }
+    if (qtyWidth > 0) {
+      drawText(qtyText, cursorX + segmentPaddingX, labelY + labelHeight / 2, "left", "middle", textColor);
+      cursorX += qtyWidth;
+      ctx.strokeStyle = separatorColor;
+      ctx.beginPath();
+      ctx.moveTo(crisp(cursorX), labelY + 4);
+      ctx.lineTo(crisp(cursorX), labelY + labelHeight - 4);
+      ctx.stroke();
+    }
+    drawText(centerText, cursorX + segmentPaddingX, labelY + labelHeight / 2, "left", "middle", textColor);
+    cursorX += centerWidth;
+    if (showCloseButton) {
+      ctx.strokeStyle = separatorColor;
+      ctx.beginPath();
+      ctx.moveTo(crisp(cursorX), labelY + 4);
+      ctx.lineTo(crisp(cursorX), labelY + labelHeight - 4);
+      ctx.stroke();
+      drawText("x", cursorX + closeWidth / 2, labelY + labelHeight / 2, "center", "middle", textColor);
+      if (mergedLine.id) {
+        orderActionRegions.push({
+          orderId: mergedLine.id,
+          action: closeAction,
+          x: cursorX,
+          y: labelY,
+          width: closeWidth,
+          height: labelHeight,
+          line: mergedLine
+        });
+      }
+    }
+    if (mergedLine.draggable && mergedLine.id) {
+      orderDragRegions.push({
+        orderId: mergedLine.id,
+        x: chartLeft,
+        y: lineY - 8,
+        width: chartRight - chartLeft,
+        height: 16,
+        line: mergedLine,
+        price: renderPrice
+      });
+    }
+    const priceText = formatPrice(renderPrice);
+    const pricePaddingX = 8;
+    const measuredPriceWidth = Math.ceil(ctx.measureText(priceText).width) + pricePaddingX * 2;
+    const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
+    if (mergedLine.id) {
+      orderPriceTagWidthById.set(mergedLine.id, priceWidth);
+    }
+    const priceX = chartRight + 4;
+    ctx.fillStyle = mergedLine.labelBackgroundColor ?? color;
+    fillRoundedRect(Math.round(priceX), Math.round(labelY), priceWidth, labelHeight, borderRadius);
+    ctx.strokeStyle = widgetBorder;
+    ctx.lineWidth = 1;
+    strokeRoundedRect(Math.round(priceX), Math.round(labelY), priceWidth, labelHeight, borderRadius);
+    drawText(priceText, priceX + pricePaddingX, labelY + labelHeight / 2, "left", "middle", textColor);
+  };
+  const fillRoundedRect = (x, y, widthValue, heightValue, radiusValue) => {
+    const maxRadius = Math.min(widthValue, heightValue) / 2;
+    const radius = clamp(radiusValue, 0, maxRadius);
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + widthValue - radius, y);
+    ctx.quadraticCurveTo(x + widthValue, y, x + widthValue, y + radius);
+    ctx.lineTo(x + widthValue, y + heightValue - radius);
+    ctx.quadraticCurveTo(x + widthValue, y + heightValue, x + widthValue - radius, y + heightValue);
+    ctx.lineTo(x + radius, y + heightValue);
+    ctx.quadraticCurveTo(x, y + heightValue, x, y + heightValue - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    ctx.fill();
+  };
+  const strokeRoundedRect = (x, y, widthValue, heightValue, radiusValue) => {
+    const maxRadius = Math.min(widthValue, heightValue) / 2;
+    const radius = clamp(radiusValue, 0, maxRadius);
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + widthValue - radius, y);
+    ctx.quadraticCurveTo(x + widthValue, y, x + widthValue, y + radius);
+    ctx.lineTo(x + widthValue, y + heightValue - radius);
+    ctx.quadraticCurveTo(x + widthValue, y + heightValue, x + widthValue - radius, y + heightValue);
+    ctx.lineTo(x + radius, y + heightValue);
+    ctx.quadraticCurveTo(x, y + heightValue, x, y + heightValue - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    ctx.stroke();
+  };
+  const setCrosshairPoint = (point) => {
+    const current = crosshairPoint;
+    if (point === null && current === null) {
+      return;
+    }
+    if (point !== null && current !== null) {
+      const sameX = Math.round(point.x) === Math.round(current.x);
+      const sameY = Math.round(point.y) === Math.round(current.y);
+      if (sameX && sameY) {
+        return;
+      }
+    }
+    crosshairPoint = point;
+    draw();
+  };
+  const draw = () => {
+    orderActionRegions = [];
+    orderDragRegions = [];
+    const pixelRatio = getPixelRatio();
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.width = Math.floor(width * pixelRatio);
+    canvas.height = Math.floor(height * pixelRatio);
+    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+    const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+    ctx.fillStyle = mergedOptions.backgroundColor;
+    ctx.fillRect(0, 0, width, height);
+    const chartLeft = margin.left;
+    const chartTop = margin.top;
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    const chartBottom = chartTop + chartHeight;
+    const chartRight = chartLeft + chartWidth;
+    const watermark = { ...DEFAULT_WATERMARK_OPTIONS, ...mergedOptions.watermark ?? {} };
+    if (data.length === 0) {
+      drawState = {
+        chartLeft,
+        chartTop,
+        chartRight,
+        chartBottom,
+        chartWidth,
+        chartHeight,
+        xStart: 0,
+        xSpan: 0,
+        yMin: 0,
+        yMax: 0
+      };
+      drawText("Load OHLC data to render chart", chartLeft + 10, chartTop + 20, "left", "middle", "#64748b");
+      return;
+    }
+    clampXViewport();
+    const xStart = xCenter - xSpan / 2;
+    const xEnd = xStart + xSpan;
+    const startIndex = Math.max(0, Math.floor(xStart));
+    const endIndex = Math.min(data.length - 1, Math.ceil(xEnd) - 1);
+    const visibleData = data.slice(startIndex, endIndex + 1);
+    let priceSource = visibleData.length > 0 ? visibleData : data;
+    if (mergedOptions.autoScaleIgnoreLatestCandle && priceSource.length > 1) {
+      priceSource = priceSource.slice(0, -1);
+      if (priceSource.length === 0) {
+        priceSource = visibleData.length > 0 ? visibleData : data;
+      }
+    }
+    const minPrice = Math.min(...priceSource.map((point) => point.l));
+    const maxPrice = Math.max(...priceSource.map((point) => point.h));
+    const priceRange = maxPrice - minPrice || 1;
+    const autoMin = minPrice - priceRange * 0.08;
+    const autoMax = maxPrice + priceRange * 0.08;
+    const smoothing = clamp(mergedOptions.autoScaleSmoothing, 0, 1);
+    if (yMinOverride === null || yMaxOverride === null) {
+      if (autoYMin === null || autoYMax === null) {
+        autoYMin = autoMin;
+        autoYMax = autoMax;
+      } else {
+        if (autoMin < autoYMin) {
+          autoYMin = autoMin;
+        } else {
+          autoYMin += (autoMin - autoYMin) * smoothing;
+        }
+        if (autoMax > autoYMax) {
+          autoYMax = autoMax;
+        } else {
+          autoYMax += (autoMax - autoYMax) * smoothing;
+        }
+      }
+    }
+    const yMin = yMinOverride ?? autoYMin ?? autoMin;
+    const yMax = yMaxOverride ?? autoYMax ?? autoMax;
+    const yRange = yMax - yMin || 1;
+    drawState = {
+      chartLeft,
+      chartTop,
+      chartRight,
+      chartBottom,
+      chartWidth,
+      chartHeight,
+      xStart,
+      xSpan,
+      yMin,
+      yMax
+    };
+    const yFromPrice = (price) => {
+      return chartBottom - (price - yMin) / yRange * chartHeight;
+    };
+    if (watermark.visible && watermark.text.trim().length > 0) {
+      ctx.save();
+      ctx.globalAlpha = clamp(watermark.opacity, 0, 1);
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillStyle = watermark.color;
+      ctx.font = `${watermark.fontWeight} ${Math.max(8, watermark.fontSize)}px ${mergedOptions.fontFamily}`;
+      const centerX = chartLeft + chartWidth / 2;
+      const centerY = chartTop + chartHeight / 2;
+      if (watermark.thickness > 0) {
+        ctx.strokeStyle = watermark.color;
+        ctx.lineWidth = Math.max(0.5, watermark.thickness);
+        ctx.strokeText(watermark.text, centerX, centerY);
+      }
+      ctx.fillText(watermark.text, centerX, centerY);
+      ctx.restore();
+    }
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(chartLeft + 1, chartTop + 1, Math.max(0, chartWidth - 2), Math.max(0, chartHeight - 2));
+    ctx.clip();
+    const candleSpacing = chartWidth / xSpan;
+    const candleBodyWidthRatio = clamp(mergedOptions.candleBodyWidthRatio, 0.1, 0.98);
+    const candleMinWidth = Math.max(0.5, mergedOptions.candleMinWidth);
+    const candleWickWidth = Math.max(1, mergedOptions.candleWickWidth);
+    const bodyWidth = Math.min(
+      Math.max(1, candleSpacing - 1),
+      Math.max(candleMinWidth, Math.floor(candleSpacing * candleBodyWidthRatio))
+    );
+    const grid = { ...DEFAULT_GRID_OPTIONS, ...mergedOptions.grid ?? {} };
+    const gridOpacity = clamp(grid.opacity, 0, 1);
+    const yTicks = Math.max(1, Math.floor(grid.horizontalTickCount));
+    const gridColor = grid.color ?? mergedOptions.gridColor;
+    if (grid.horizontalLines) {
+      ctx.save();
+      ctx.globalAlpha = gridOpacity;
+      for (let tick = 0; tick <= yTicks; tick += 1) {
+        const ratio = tick / yTicks;
+        const price = yMin + yRange * ratio;
+        const y = yFromPrice(price);
+        ctx.strokeStyle = gridColor;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(y));
+        ctx.lineTo(crisp(chartRight), crisp(y));
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+    const minLabelSpacingPx = Math.max(72, candleSpacing * 6);
+    const approxLabelCount = Math.max(2, Math.floor(chartWidth / minLabelSpacingPx));
+    const rawStep = xSpan / approxLabelCount;
+    const xStep = Math.max(1, Math.ceil(rawStep));
+    const visibleTickStart = Math.floor(xStart);
+    const visibleTickEnd = Math.ceil(xEnd) - 1;
+    const tickStartIndex = Math.ceil(visibleTickStart / xStep) * xStep;
+    if (grid.verticalLines) {
+      ctx.save();
+      ctx.globalAlpha = gridOpacity;
+      for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        ctx.strokeStyle = gridColor;
+        ctx.beginPath();
+        ctx.moveTo(crisp(x), crisp(chartTop));
+        ctx.lineTo(crisp(x), crisp(chartBottom));
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+    for (let index = startIndex; index <= endIndex; index += 1) {
+      const point = data[index];
+      if (!point) {
+        continue;
+      }
+      const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      const openY = yFromPrice(point.o);
+      const closeY = yFromPrice(point.c);
+      const highY = yFromPrice(point.h);
+      const lowY = yFromPrice(point.l);
+      const isUp = point.c >= point.o;
+      const candleColor = isUp ? mergedOptions.upColor : mergedOptions.downColor;
+      ctx.strokeStyle = candleColor;
+      ctx.lineWidth = candleWickWidth;
+      ctx.beginPath();
+      ctx.moveTo(crisp(centerX), crisp(highY));
+      ctx.lineTo(crisp(centerX), crisp(lowY));
+      ctx.stroke();
+      const bodyTop = Math.min(openY, closeY);
+      const bodyHeight = Math.max(1, Math.abs(closeY - openY));
+      ctx.fillStyle = candleColor;
+      ctx.fillRect(Math.round(centerX - bodyWidth / 2), Math.round(bodyTop), bodyWidth, Math.max(1, Math.round(bodyHeight)));
+    }
+    const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
+    if (crosshair.visible && crosshairPoint) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
+      ctx.save();
+      ctx.strokeStyle = crosshair.color;
+      ctx.lineWidth = Math.max(1, crosshair.width);
+      if (crosshair.style === "dotted") {
+        ctx.setLineDash([2, 4]);
+      } else if (crosshair.style === "dashed") {
+        ctx.setLineDash([8, 6]);
+      } else {
+        ctx.setLineDash([]);
+      }
+      if (crosshair.showVertical) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(cx), crisp(chartTop));
+        ctx.lineTo(crisp(cx), crisp(chartBottom));
+        ctx.stroke();
+      }
+      if (crosshair.showHorizontal) {
+        ctx.beginPath();
+        ctx.moveTo(crisp(chartLeft), crisp(cy));
+        ctx.lineTo(crisp(chartRight), crisp(cy));
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+    ctx.restore();
+    ctx.strokeStyle = axis.lineColor;
+    ctx.lineWidth = Math.max(1, axis.lineWidth);
+    ctx.beginPath();
+    ctx.moveTo(crisp(chartLeft), crisp(chartBottom));
+    ctx.lineTo(crisp(chartRight), crisp(chartBottom));
+    ctx.moveTo(crisp(chartRight), crisp(chartTop));
+    ctx.lineTo(crisp(chartRight), crisp(chartBottom));
+    ctx.stroke();
+    for (let tick = 0; tick <= yTicks; tick += 1) {
+      const ratio = tick / yTicks;
+      const price = yMin + yRange * ratio;
+      const y = yFromPrice(price);
+      drawText(formatPrice(price), chartRight + 6, y, "left", "middle", axis.textColor);
+    }
+    const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const lastPoint = data[data.length - 1];
+    if ((ticker.visible ?? true) && lastPoint) {
+      const tickerPrice = lastPoint.c;
+      const tickerY = yFromPrice(tickerPrice);
+      const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
+      const tickerColor = ticker.color ?? (lastPoint.c >= lastPoint.o ? mergedOptions.upColor : mergedOptions.downColor);
+      const tickerThickness = Math.max(1, ticker.thickness ?? 1);
+      const tickerStyle = ticker.style ?? "solid";
+      ctx.save();
+      ctx.strokeStyle = tickerColor;
+      ctx.lineWidth = tickerThickness;
+      if (tickerStyle === "dotted") {
+        ctx.setLineDash([2, 4]);
+      } else if (tickerStyle === "dashed") {
+        ctx.setLineDash([8, 6]);
+      } else {
+        ctx.setLineDash([]);
+      }
+      ctx.beginPath();
+      ctx.moveTo(crisp(chartLeft), crisp(lineY));
+      ctx.lineTo(crisp(chartRight), crisp(lineY));
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.restore();
+      const tickerLabel = formatPrice(tickerPrice);
+      ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+      const labelPaddingX = 8;
+      const labelHeight = 20;
+      const labelWidth = Math.ceil(ctx.measureText(tickerLabel).width) + labelPaddingX * 2;
+      const labelX = chartRight + 4;
+      const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
+      const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
+      ctx.fillStyle = ticker.labelBackgroundColor ?? tickerColor;
+      fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, labelRadius);
+      drawText(
+        tickerLabel,
+        labelX + labelPaddingX,
+        labelY + labelHeight / 2,
+        "left",
+        "middle",
+        ticker.labelTextColor ?? "#0b1220"
+      );
+    }
+    for (const priceLine of priceLines) {
+      drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
+    }
+    for (const orderLine of orderLines) {
+      drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
+    }
+    for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
+      const tickTime = getTimeForIndex(index);
+      if (!tickTime) {
+        continue;
+      }
+      const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      const timeLabel = tickTime.toLocaleDateString(void 0, {
+        month: "short",
+        day: "numeric"
+      });
+      drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
+    }
+  };
+  const zoomX = (factor, anchorX) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const minSpan = 5;
+    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
+    const anchorRatio = clamp((anchorX - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const anchorIndex = drawState.xStart + anchorRatio * xSpan;
+    const nextStart = anchorIndex - anchorRatio * nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    draw();
+  };
+  const zoomXToLatest = (factor) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const minSpan = 5;
+    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
+    const rightEdgeIndex = data.length + rightEdgePaddingBars;
+    const nextStart = rightEdgeIndex - nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    draw();
+  };
+  const zoomY = (factor, anchorY) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const currentMin = yMinOverride ?? drawState.yMin;
+    const currentMax = yMaxOverride ?? drawState.yMax;
+    const currentRange = currentMax - currentMin || 1;
+    const bounds = getYBounds();
+    const minRange = bounds.minRange;
+    const maxRange = bounds.hardSpan;
+    const nextRange = clamp(currentRange * factor, minRange, maxRange);
+    const anchorRatio = clamp((anchorY - drawState.chartTop) / drawState.chartHeight, 0, 1);
+    const anchorPrice = currentMax - anchorRatio * currentRange;
+    const nextMax = anchorPrice + anchorRatio * nextRange;
+    const nextMin = nextMax - nextRange;
+    const clamped = clampYRange(nextMin, nextMax);
+    yMinOverride = clamped.min;
+    yMaxOverride = clamped.max;
+    draw();
+  };
+  const pan = (deltaX, deltaY, allowX, allowY) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    if (allowX) {
+      const indexShift = deltaX / drawState.chartWidth * xSpan;
+      xCenter -= indexShift;
+      clampXViewport();
+    }
+    if (allowY) {
+      const currentMin = yMinOverride ?? drawState.yMin;
+      const currentMax = yMaxOverride ?? drawState.yMax;
+      const range = currentMax - currentMin || 1;
+      const priceShift = deltaY / drawState.chartHeight * range;
+      const clamped = clampYRange(currentMin + priceShift, currentMax + priceShift);
+      yMinOverride = clamped.min;
+      yMaxOverride = clamped.max;
+    }
+    draw();
+  };
+  const getCanvasPoint = (event) => {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  };
+  const getOrderActionRegion = (x, y) => {
+    return orderActionRegions.find(
+      (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+    );
+  };
+  const getOrderDragRegion = (x, y) => {
+    return orderDragRegions.find(
+      (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+    );
+  };
+  const priceFromCanvasY = (y) => {
+    if (!drawState) {
+      return 0;
+    }
+    const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
+    return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
+  };
+  const getHitRegion = (x, y) => {
+    if (!drawState) {
+      return "outside";
+    }
+    const inPlot = x >= drawState.chartLeft && x <= drawState.chartRight && y >= drawState.chartTop && y <= drawState.chartBottom;
+    if (inPlot) {
+      return "plot";
+    }
+    const inXAxis = x >= drawState.chartLeft && x <= drawState.chartRight && y > drawState.chartBottom && y <= height;
+    if (inXAxis) {
+      return "x-axis";
+    }
+    const inYAxis = x >= drawState.chartRight && x <= width && y >= drawState.chartTop && y <= drawState.chartBottom;
+    if (inYAxis) {
+      return "y-axis";
+    }
+    return "outside";
+  };
+  let isDragging = false;
+  let dragMode = null;
+  let lastPointerX = 0;
+  let lastPointerY = 0;
+  let activePointerId = null;
+  const onPointerDown = (event) => {
+    const point = getCanvasPoint(event);
+    const orderRegion = getOrderActionRegion(point.x, point.y);
+    if (orderRegion) {
+      if (orderRegion.draggable) {
+        activePointerId = event.pointerId;
+        const startPrice = Number(orderRegion.line.price.toFixed(2));
+        actionDragState = {
+          orderId: orderRegion.orderId,
+          action: orderRegion.action,
+          startPrice,
+          lastPrice: startPrice,
+          moved: false
+        };
+        canvas.setPointerCapture(event.pointerId);
+        canvas.style.cursor = "ns-resize";
+        setCrosshairPoint(null);
+        return;
+      }
+      setCrosshairPoint(null);
+      orderActionHandler?.({
+        orderId: orderRegion.orderId,
+        action: orderRegion.action,
+        line: orderRegion.line
+      });
+      return;
+    }
+    const orderDragRegion = getOrderDragRegion(point.x, point.y);
+    if (orderDragRegion) {
+      activePointerId = event.pointerId;
+      orderDragState = {
+        orderId: orderDragRegion.orderId,
+        startPrice: orderDragRegion.price,
+        lastPrice: orderDragRegion.price
+      };
+      canvas.setPointerCapture(event.pointerId);
+      canvas.style.cursor = "ns-resize";
+      setCrosshairPoint(null);
+      return;
+    }
+    const region = getHitRegion(point.x, point.y);
+    if (region === "outside") {
+      return;
+    }
+    isDragging = true;
+    dragMode = region;
+    activePointerId = event.pointerId;
+    pointerDownInfo = { pointerId: event.pointerId, x: point.x, y: point.y, region, moved: false };
+    lastPointerX = point.x;
+    lastPointerY = point.y;
+    canvas.setPointerCapture(event.pointerId);
+    setCrosshairPoint(null);
+  };
+  const onPointerMove = (event) => {
+    const point = getCanvasPoint(event);
+    if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
+      const dx = point.x - pointerDownInfo.x;
+      const dy = point.y - pointerDownInfo.y;
+      if (dx * dx + dy * dy > 16) {
+        pointerDownInfo.moved = true;
+      }
+    }
+    if (orderDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      if (nextPrice !== orderDragState.lastPrice) {
+        orderDragState.lastPrice = nextPrice;
+        orderLines = orderLines.map((line) => {
+          if (line.id !== orderDragState?.orderId) {
+            return line;
+          }
+          if (line.behavior === "follow") {
+            return { ...line, price: nextPrice, followPrice: nextPrice };
+          }
+          return { ...line, price: nextPrice };
+        });
+        const currentLine = orderLines.find((line) => line.id === orderDragState?.orderId);
+        orderActionHandler?.({
+          orderId: orderDragState.orderId,
+          action: "move",
+          price: nextPrice,
+          dragging: true,
+          ...currentLine ? { line: currentLine } : {}
+        });
+        draw();
+      }
+      canvas.style.cursor = "ns-resize";
+      setCrosshairPoint(null);
+      return;
+    }
+    if (actionDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextPrice = Number(priceFromCanvasY(point.y).toFixed(2));
+      if (nextPrice !== actionDragState.lastPrice) {
+        actionDragState.lastPrice = nextPrice;
+        actionDragState.moved = true;
+        const currentLine = orderLines.find((line) => line.id === actionDragState?.orderId);
+        orderActionHandler?.({
+          orderId: actionDragState.orderId,
+          action: actionDragState.action,
+          price: nextPrice,
+          dragging: true,
+          ...currentLine ? { line: currentLine } : {}
+        });
+      }
+      canvas.style.cursor = "ns-resize";
+      setCrosshairPoint(null);
+      return;
+    }
+    if (!isDragging || !dragMode) {
+      const orderRegion = getOrderActionRegion(point.x, point.y);
+      if (orderRegion) {
+        canvas.style.cursor = orderRegion.draggable ? "ns-resize" : "pointer";
+        setCrosshairPoint(null);
+        return;
+      }
+      const orderDragRegion = getOrderDragRegion(point.x, point.y);
+      if (orderDragRegion) {
+        canvas.style.cursor = "ns-resize";
+        setCrosshairPoint(null);
+        return;
+      }
+      const hoverRegion = getHitRegion(point.x, point.y);
+      if (hoverRegion === "plot") {
+        canvas.style.cursor = "grab";
+        setCrosshairPoint(point);
+      } else if (hoverRegion === "x-axis") {
+        canvas.style.cursor = "ew-resize";
+        setCrosshairPoint(null);
+      } else if (hoverRegion === "y-axis") {
+        canvas.style.cursor = "ns-resize";
+        setCrosshairPoint(null);
+      } else {
+        canvas.style.cursor = "default";
+        setCrosshairPoint(null);
+      }
+      return;
+    }
+    const deltaX = point.x - lastPointerX;
+    const deltaY = point.y - lastPointerY;
+    if (dragMode === "plot") {
+      canvas.style.cursor = "grabbing";
+      pan(deltaX, deltaY, true, true);
+      setCrosshairPoint(null);
+    } else if (dragMode === "x-axis") {
+      canvas.style.cursor = "ew-resize";
+      zoomXToLatest(Math.exp(-deltaX * 0.01));
+      setCrosshairPoint(null);
+    } else if (dragMode === "y-axis") {
+      canvas.style.cursor = "ns-resize";
+      const anchorY = drawState ? drawState.chartTop + drawState.chartHeight / 2 : point.y;
+      zoomY(Math.exp(deltaY * 0.01), anchorY);
+      setCrosshairPoint(null);
+    }
+    lastPointerX = point.x;
+    lastPointerY = point.y;
+  };
+  const endPointerDrag = (event) => {
+    if (event && activePointerId !== null && event.pointerId !== activePointerId) {
+      return;
+    }
+    if (orderDragState) {
+      const moved = orderDragState.lastPrice !== orderDragState.startPrice;
+      const finalLine = orderLines.find((line) => line.id === orderDragState?.orderId);
+      if (moved && finalLine && orderDragState.orderId) {
+        orderActionHandler?.({
+          orderId: orderDragState.orderId,
+          action: "move",
+          price: orderDragState.lastPrice,
+          dragging: false,
+          line: finalLine
+        });
+      }
+      orderDragState = null;
+    }
+    if (actionDragState) {
+      const currentLine = orderLines.find((line) => line.id === actionDragState?.orderId);
+      if (actionDragState.moved) {
+        orderActionHandler?.({
+          orderId: actionDragState.orderId,
+          action: actionDragState.action,
+          price: actionDragState.lastPrice,
+          dragging: false,
+          ...currentLine ? { line: currentLine } : {}
+        });
+      } else {
+        orderActionHandler?.({
+          orderId: actionDragState.orderId,
+          action: actionDragState.action,
+          dragging: false,
+          ...currentLine ? { line: currentLine } : {}
+        });
+      }
+      actionDragState = null;
+    }
+    isDragging = false;
+    dragMode = null;
+    activePointerId = null;
+    canvas.style.cursor = "default";
+    setCrosshairPoint(null);
+    if (event && pointerDownInfo && event.pointerId === pointerDownInfo.pointerId) {
+      if (!pointerDownInfo.moved) {
+        const clickPrice = pointerDownInfo.region === "plot" ? Number(priceFromCanvasY(pointerDownInfo.y).toFixed(2)) : void 0;
+        chartClickHandler?.({
+          x: pointerDownInfo.x,
+          y: pointerDownInfo.y,
+          ...clickPrice === void 0 ? {} : { price: clickPrice },
+          region: pointerDownInfo.region
+        });
+      }
+      pointerDownInfo = null;
+    } else if (!event) {
+      pointerDownInfo = null;
+    }
+  };
+  const onWheel = (event) => {
+    if (!drawState) {
+      return;
+    }
+    const point = getCanvasPoint(event);
+    const region = getHitRegion(point.x, point.y);
+    if (region === "outside") {
+      return;
+    }
+    event.preventDefault();
+    const factor = Math.exp(event.deltaY * 16e-4);
+    if (region === "y-axis") {
+      zoomY(factor, point.y);
+      return;
+    }
+    if (region === "x-axis") {
+      zoomXToLatest(factor);
+      return;
+    }
+    zoomX(factor, point.x);
+  };
+  const onDoubleClick = (event) => {
+    if (!doubleClickEnabled) {
+      return;
+    }
+    const point = getCanvasPoint(event);
+    const region = getHitRegion(point.x, point.y);
+    if (region === "outside") {
+      return;
+    }
+    if (doubleClickAction === "placeLimitOrder") {
+      if (region !== "plot") {
+        return;
+      }
+      orderActionHandler?.({
+        action: "createLimit",
+        price: Number(priceFromCanvasY(point.y).toFixed(2))
+      });
+      return;
+    }
+    if (region === "y-axis") {
+      yMinOverride = null;
+      yMaxOverride = null;
+      autoYMin = null;
+      autoYMax = null;
+      draw();
+      return;
+    }
+    fitXViewport();
+    yMinOverride = null;
+    yMaxOverride = null;
+    autoYMin = null;
+    autoYMax = null;
+    draw();
+  };
+  canvas.addEventListener("pointerdown", onPointerDown);
+  canvas.addEventListener("pointermove", onPointerMove);
+  canvas.addEventListener("pointerup", endPointerDrag);
+  canvas.addEventListener("pointercancel", endPointerDrag);
+  canvas.addEventListener("pointerleave", endPointerDrag);
+  canvas.addEventListener("wheel", onWheel, { passive: false });
+  canvas.addEventListener("dblclick", onDoubleClick);
+  const resize = (nextWidth, nextHeight) => {
+    if (nextWidth && nextWidth > 0) {
+      width = nextWidth;
+    }
+    if (nextHeight && nextHeight > 0) {
+      height = nextHeight;
+    }
+    draw();
+  };
+  const setData = (nextData) => {
+    const hadData = data.length > 0;
+    data = parseData(nextData);
+    if (data.length === 0) {
+      xCenter = 0;
+      xSpan = 60;
+      yMinOverride = null;
+      yMaxOverride = null;
+      autoYMin = null;
+      autoYMax = null;
+      draw();
+      return;
+    }
+    if (!hadData) {
+      fitXViewport();
+      yMinOverride = null;
+      yMaxOverride = null;
+      autoYMin = null;
+      autoYMax = null;
+    } else {
+      clampXViewport();
+    }
+    draw();
+  };
+  const setPriceLines = (lines) => {
+    priceLines = lines.map((line, index) => ({
+      ...line,
+      id: line.id ?? `line-${index + 1}`
+    }));
+    draw();
+  };
+  const addPriceLine = (line) => {
+    const id = line.id ?? `line-${generatedPriceLineId++}`;
+    priceLines.push({ ...line, id });
+    draw();
+    return id;
+  };
+  const removePriceLine = (id) => {
+    priceLines = priceLines.filter((line) => line.id !== id);
+    draw();
+  };
+  const setOrderLines = (lines) => {
+    orderLines = lines.map((line, index) => ({
+      ...line,
+      id: line.id ?? `order-${index + 1}`
+    }));
+    const activeIds = new Set(orderLines.map((line) => line.id));
+    for (const id of Array.from(orderWidgetWidthById.keys())) {
+      if (!activeIds.has(id)) {
+        orderWidgetWidthById.delete(id);
+      }
+    }
+    for (const id of Array.from(orderPriceTagWidthById.keys())) {
+      if (!activeIds.has(id)) {
+        orderPriceTagWidthById.delete(id);
+      }
+    }
+    draw();
+  };
+  const addOrderLine = (line) => {
+    const id = line.id ?? `order-${generatedOrderLineId++}`;
+    orderLines.push({ ...line, id });
+    draw();
+    return id;
+  };
+  const updateOrderLine = (id, patch) => {
+    orderLines = orderLines.map((line) => line.id === id ? { ...line, ...patch, id } : line);
+    draw();
+  };
+  const removeOrderLine = (id) => {
+    orderLines = orderLines.filter((line) => line.id !== id);
+    orderWidgetWidthById.delete(id);
+    orderPriceTagWidthById.delete(id);
+    draw();
+  };
+  const onOrderAction = (handler) => {
+    orderActionHandler = handler;
+  };
+  const onChartClick = (handler) => {
+    chartClickHandler = handler;
+  };
+  const setDoubleClickEnabled = (enabled) => {
+    doubleClickEnabled = enabled;
+  };
+  const setDoubleClickAction = (action) => {
+    doubleClickAction = action;
+  };
+  const destroy = () => {
+    canvas.removeEventListener("pointerdown", onPointerDown);
+    canvas.removeEventListener("pointermove", onPointerMove);
+    canvas.removeEventListener("pointerup", endPointerDrag);
+    canvas.removeEventListener("pointercancel", endPointerDrag);
+    canvas.removeEventListener("pointerleave", endPointerDrag);
+    canvas.removeEventListener("wheel", onWheel);
+    canvas.removeEventListener("dblclick", onDoubleClick);
+    element.innerHTML = "";
+  };
+  draw();
+  return {
+    setData,
+    setPriceLines,
+    addPriceLine,
+    removePriceLine,
+    setOrderLines,
+    addOrderLine,
+    updateOrderLine,
+    removeOrderLine,
+    onOrderAction,
+    onChartClick,
+    setDoubleClickEnabled,
+    setDoubleClickAction,
+    resize,
+    destroy
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createChart
+});