@supersolutions/super-chart-web 0.0.0 → 0.1.0

package/dist/chunk-PTYNDDEE.js

@@ -0,0 +1,3082 @@
+// packages/bindings/web/src/canvasRenderer.ts
+import { nearestChartIndex, derivePrecision, formatBarDate } from "@supersolutions/super-chart-core";
+
+// packages/bindings/web/src/geometry.ts
+function columnExtents(bars) {
+  return bars.map((bar, i) => {
+    const base = i > 0 ? bars[i - 1].close : bar.open;
+    return { index: i, from: base, to: bar.close, up: bar.close >= base };
+  });
+}
+function stepLinePoints(bars) {
+  const points = [];
+  bars.forEach((bar, i) => {
+    if (i > 0)
+      points.push({ index: i, value: bars[i - 1].close });
+    points.push({ index: i, value: bar.close });
+  });
+  return points;
+}
+function typicalPrice(bar) {
+  return (bar.high + bar.low + bar.close) / 3;
+}
+function hlcAreaPoints(bars) {
+  return bars.map((bar, index) => ({ index, value: typicalPrice(bar) }));
+}
+function baselineSegments(bars, baseline) {
+  if (bars.length === 0)
+    return [];
+  const segments = [];
+  let start = 0;
+  let above = bars[0].close >= baseline;
+  for (let i = 1; i < bars.length; i++) {
+    const nowAbove = bars[i].close >= baseline;
+    if (nowAbove !== above) {
+      segments.push({ from: start, to: i - 1, above });
+      start = i - 1;
+      above = nowAbove;
+    }
+  }
+  segments.push({ from: start, to: bars.length - 1, above });
+  return segments;
+}
+function halfBarWidth(model, slotWidth) {
+  let spacing = slotWidth !== void 0 && Number.isFinite(slotWidth) && slotWidth > 0 ? slotWidth : model.geometry.plotWidth;
+  for (let i = 1; i < model.xPositions.length; i++) {
+    const gap = model.xPositions[i] - model.xPositions[i - 1];
+    if (gap > 0)
+      spacing = Math.min(spacing, gap);
+  }
+  return Math.max(0.25, spacing * 0.34);
+}
+
+// packages/bindings/web/src/seriesRenderer.ts
+import { nearestBarIndex } from "@supersolutions/super-chart-core";
+import { ENGINE_CHART_TYPES } from "@supersolutions/super-chart-core";
+function barsOf(candles) {
+  return candles.map((bar) => ({ open: bar.o, high: bar.h, low: bar.l, close: bar.c, volume: bar.v }));
+}
+function path(ctx, points) {
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    if (i === 0)
+      ctx.moveTo(p.x, p.y);
+    else
+      ctx.lineTo(p.x, p.y);
+  }
+}
+function runs(candles, y, value) {
+  const result = [];
+  let previous = -2, run = [];
+  for (const candle of candles) {
+    if (!Number.isFinite(candle.x) || !Number.isFinite(y(value(candle)))) {
+      previous = -2;
+      continue;
+    }
+    if (candle.index !== previous + 1) {
+      run = [];
+      result.push(run);
+    }
+    run.push(candle);
+    previous = candle.index;
+  }
+  return result;
+}
+function drawBaseline(ctx, model, baseline, up, down, neutral) {
+  const baseY = model.y(baseline);
+  if (!Number.isFinite(baseY))
+    return;
+  const cross = (a, b) => {
+    const ay = model.y(a.c), by = model.y(b.c);
+    const fraction = by === ay ? 0 : Math.max(0, Math.min(1, (baseY - ay) / (by - ay)));
+    return { x: a.x + (b.x - a.x) * fraction, y: baseY };
+  };
+  for (const candles of runs(model.plottedCandles, model.y, (candle) => candle.c)) {
+    const bars = barsOf(candles);
+    for (const segment of baselineSegments(bars, baseline)) {
+      const points = [];
+      for (let i = segment.from; i <= segment.to; i++) {
+        const candle = candles[i];
+        if (i === segment.from && candle.c >= baseline !== segment.above && i + 1 < candles.length)
+          points.push(cross(candle, candles[i + 1]));
+        else
+          points.push({ x: candle.x, y: model.y(candle.c) });
+      }
+      if (segment.to + 1 < candles.length && candles[segment.to + 1].c >= baseline !== segment.above) {
+        points.push(cross(candles[segment.to], candles[segment.to + 1]));
+      }
+      const first = points[0], last = points[points.length - 1];
+      if (first === void 0)
+        continue;
+      const color = segment.above ? up : down;
+      ctx.fillStyle = ctx.strokeStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(first.x, baseY);
+      for (const p of points)
+        ctx.lineTo(p.x, p.y);
+      ctx.lineTo(last.x, baseY);
+      ctx.closePath();
+      ctx.globalAlpha = 0.22;
+      ctx.fill();
+      ctx.globalAlpha = 1;
+      ctx.beginPath();
+      path(ctx, points);
+      ctx.stroke();
+    }
+  }
+  ctx.strokeStyle = neutral;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 4]);
+  ctx.beginPath();
+  ctx.moveTo(model.geometry.left, baseY);
+  ctx.lineTo(model.geometry.right, baseY);
+  ctx.stroke();
+}
+function paintPriceSeries(ctx, frame, options = {}, bodyHalfWidth) {
+  const type = options.chartType ?? "candles";
+  if (type === "candles" || type === "ohlc" || type === "line" || type === "area")
+    return false;
+  const model = frame.model, candles = model.plottedCandles, half = bodyHalfWidth ?? halfBarWidth(model);
+  const up = options.up ?? "#58c9ac", down = options.down ?? "#f28b82", line = options.line ?? "#8bafff";
+  const color = (rising) => rising ? up : down;
+  ctx.save();
+  try {
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = ctx.fillStyle = line;
+    switch (type) {
+      case "hollow-candles":
+      case "outline-candles":
+      case "hollow-down-candles": {
+        for (let group = 0; group < 2; group++) {
+          const rising = group === 0;
+          const hollow = type === "outline-candles" || (type === "hollow-candles" ? rising : !rising);
+          ctx.strokeStyle = ctx.fillStyle = color(rising);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          for (const candle of candles) {
+            if (candle.c >= candle.o !== rising)
+              continue;
+            const { bodyTop, bodyBottom, wickTop, wickBottom } = candle;
+            if (!Number.isFinite(bodyTop) || !Number.isFinite(bodyBottom) || !Number.isFinite(wickTop) || !Number.isFinite(wickBottom))
+              continue;
+            const height = Math.max(1, bodyBottom - bodyTop), top = (bodyTop + bodyBottom - height) / 2;
+            ctx.moveTo(candle.x, candle.wickTop);
+            ctx.lineTo(candle.x, top);
+            ctx.moveTo(candle.x, top + height);
+            ctx.lineTo(candle.x, candle.wickBottom);
+          }
+          ctx.stroke();
+          ctx.beginPath();
+          for (const candle of candles) {
+            if (candle.c >= candle.o !== rising)
+              continue;
+            const { bodyTop, bodyBottom } = candle;
+            if (!Number.isFinite(bodyTop) || !Number.isFinite(bodyBottom))
+              continue;
+            const height = Math.max(1, bodyBottom - bodyTop);
+            ctx.rect(candle.x - half, (bodyTop + bodyBottom - height) / 2, half * 2, height);
+          }
+          if (hollow)
+            ctx.stroke();
+          else
+            ctx.fill();
+        }
+        break;
+      }
+      case "columns": {
+        const extents = columnExtents(frame.snapshot.bars), preceding = frame.previousClose;
+        if (extents.length > 0 && preceding !== void 0 && Number.isFinite(preceding)) {
+          extents[0] = { ...extents[0], from: preceding, up: extents[0].to >= preceding };
+        }
+        for (let group = 0; group < 2; group++) {
+          const rising = group === 0;
+          ctx.fillStyle = color(rising);
+          ctx.beginPath();
+          for (const candle of candles) {
+            const index = frame.snapshot.bars[candle.index]?.timestamp === candle.t ? candle.index : typeof candle.t === "number" ? nearestBarIndex(frame.snapshot.bars, candle.t) : null;
+            if (index === null || frame.snapshot.bars[index].timestamp !== candle.t)
+              continue;
+            const extent = extents[index];
+            if (extent.up !== rising)
+              continue;
+            const a = model.y(extent.from), b = model.y(extent.to);
+            if (!Number.isFinite(a) || !Number.isFinite(b))
+              continue;
+            ctx.rect(candle.x - half, Math.min(a, b), half * 2, Math.max(1, Math.abs(b - a)));
+          }
+          ctx.fill();
+        }
+        break;
+      }
+      case "high-low": {
+        ctx.lineWidth = 2;
+        for (let group = 0; group < 2; group++) {
+          const rising = group === 0;
+          ctx.strokeStyle = color(rising);
+          ctx.beginPath();
+          for (const candle of candles) {
+            if (candle.c >= candle.o !== rising)
+              continue;
+            const x = candle.x, a = model.y(candle.h), b = model.y(candle.l);
+            if (!Number.isFinite(a) || !Number.isFinite(b))
+              continue;
+            ctx.moveTo(x, a);
+            ctx.lineTo(x, b);
+          }
+          ctx.stroke();
+        }
+        break;
+      }
+      case "volume-bars": {
+        let maximum = 0;
+        for (const candle of candles)
+          maximum = Math.max(maximum, candle.v ?? 0);
+        ctx.lineWidth = 2;
+        for (let i = 0; i < candles.length; i++) {
+          const candle = candles[i], open = model.y(candle.o), close = model.y(candle.c);
+          if (!Number.isFinite(open) || !Number.isFinite(close))
+            continue;
+          ctx.strokeStyle = color(candle.c >= candle.o);
+          ctx.globalAlpha = 0.25 + 0.65 * (maximum <= 0 ? 0 : Math.max(0, Math.min(1, (candle.v ?? 0) / maximum)));
+          ctx.beginPath();
+          ctx.moveTo(candle.x, candle.wickTop);
+          ctx.lineTo(candle.x, candle.wickBottom);
+          ctx.moveTo(candle.x - half, open);
+          ctx.lineTo(candle.x, open);
+          ctx.moveTo(candle.x, close);
+          ctx.lineTo(candle.x + half, close);
+          ctx.stroke();
+        }
+        break;
+      }
+      case "step-line":
+      case "hlc-area":
+      case "line-markers": {
+        const hlc = type === "hlc-area";
+        for (const run of runs(candles, model.y, (candle) => hlc ? candle.h / 3 + candle.l / 3 + candle.c / 3 : candle.c)) {
+          const bars = barsOf(run);
+          const values = type === "step-line" ? stepLinePoints(bars) : hlc ? hlcAreaPoints(bars) : bars.map((bar, index) => ({ index, value: bar.close }));
+          if (hlc) {
+            for (const value of values) {
+              if (!Number.isFinite(value.value)) {
+                const bar = bars[value.index];
+                value.value = bar.high / 3 + bar.low / 3 + bar.close / 3;
+              }
+            }
+          }
+          const points = values.map((value) => ({ x: run[value.index].x, y: model.y(value.value) })).filter((p) => Number.isFinite(p.y));
+          if (points.length === 0)
+            continue;
+          if (hlc) {
+            ctx.beginPath();
+            ctx.moveTo(points[0].x, model.geometry.bottom);
+            for (const p of points)
+              ctx.lineTo(p.x, p.y);
+            ctx.lineTo(points[points.length - 1].x, model.geometry.bottom);
+            ctx.closePath();
+            ctx.globalAlpha = 0.18;
+            ctx.fill();
+            ctx.globalAlpha = 1;
+          }
+          ctx.lineWidth = 1.75;
+          ctx.beginPath();
+          path(ctx, points);
+          ctx.stroke();
+          if (type === "line-markers") {
+            ctx.beginPath();
+            for (const p of points) {
+              ctx.moveTo(p.x + 2.5, p.y);
+              ctx.arc(p.x, p.y, 2.5, 0, Math.PI * 2);
+            }
+            ctx.fill();
+          }
+        }
+        break;
+      }
+      case "baseline": {
+        const baseline = options.baseline ?? frame.snapshot.bars[0]?.close;
+        if (baseline !== void 0 && Number.isFinite(baseline))
+          drawBaseline(ctx, model, baseline, up, down, options.text ?? "#aebcca");
+        break;
+      }
+      default:
+        return false;
+    }
+    return true;
+  } finally {
+    ctx.restore();
+  }
+}
+
+// packages/bindings/web/src/canvasRenderer.ts
+var DEFAULTS = {
+  background: "#10151d",
+  grid: "#283444",
+  text: "#aebcca",
+  up: "#58c9ac",
+  down: "#f28b82",
+  line: "#8bafff",
+  font: "12px system-ui"
+};
+var timeFormats = /* @__PURE__ */ new Map();
+function timeFormat(timeZone) {
+  let format = timeFormats.get(timeZone);
+  if (format !== void 0)
+    return format;
+  format = new Intl.DateTimeFormat("en", { timeZone, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", hourCycle: "h23" });
+  if (timeFormats.size === 8)
+    timeFormats.delete(timeFormats.keys().next().value);
+  timeFormats.set(timeZone, format);
+  return format;
+}
+function precision(value) {
+  return value !== void 0 && Number.isFinite(value) ? Math.max(0, Math.min(20, Math.trunc(value))) : 2;
+}
+var dateLabels = /* @__PURE__ */ new Map();
+var calendarDates = /* @__PURE__ */ new Map();
+function boundedSet(cache, key, value) {
+  if (cache.size >= 512)
+    cache.delete(cache.keys().next().value);
+  cache.set(key, value);
+  return value;
+}
+function timeLabel(displayDtf, timestamp, options, type, format = "HH:mm") {
+  if (!Number.isFinite(timestamp) || Math.abs(timestamp) > 864e13)
+    return String(timestamp);
+  const key = JSON.stringify([options.timeZone ?? "UTC", timestamp, options.timespan ?? "", options.symbolTimezone, type, format]);
+  const cached = dateLabels.get(key);
+  return cached ?? boundedSet(dateLabels, key, formatBarDate({ displayDtf, timestamp, timespan: options.timespan ?? "", symbolTimezone: options.symbolTimezone, type, format }));
+}
+function calendarDate(format, timestamp, timezone) {
+  const key = JSON.stringify([timezone, timestamp]), cached = calendarDates.get(key);
+  if (cached !== void 0)
+    return cached;
+  const date = {};
+  for (const part of format.formatToParts(timestamp))
+    if (part.type === "year" || part.type === "month" || part.type === "day")
+      date[part.type] = part.value;
+  return boundedSet(calendarDates, key, date);
+}
+function boundaryFormat(date, previous) {
+  if (previous === null)
+    return "MM-DD";
+  if (date.year !== previous.year)
+    return "YYYY";
+  if (date.month !== previous.month)
+    return "YYYY-MM";
+  return date.day !== previous.day ? "MM-DD" : "HH:mm";
+}
+function ready(m) {
+  const g = m.geometry;
+  return Number.isFinite(g.width) && Number.isFinite(g.height) && g.width > 0 && g.height > 0 && Number.isFinite(g.left) && Number.isFinite(g.top) && Number.isFinite(g.plotWidth) && Number.isFinite(g.plotHeight) && g.plotWidth > 0 && g.plotHeight > 0;
+}
+function clipPlot(ctx, m) {
+  const g = m.geometry;
+  ctx.beginPath();
+  ctx.rect(g.left, g.top, g.plotWidth, g.plotHeight);
+  ctx.clip();
+}
+var closeGeometry = /* @__PURE__ */ new WeakMap();
+function closePoints(m) {
+  let geometry = closeGeometry.get(m);
+  if (geometry !== void 0)
+    return geometry;
+  geometry = { points: [] };
+  for (const candle of m.plottedCandles) {
+    const y = m.y(candle.c);
+    if (Number.isFinite(candle.x) && Number.isFinite(y))
+      geometry.points.push({ x: candle.x, y, index: candle.index });
+  }
+  closeGeometry.set(m, geometry);
+  return geometry;
+}
+function closePath(target, m, area) {
+  let previous = -2, firstX = 0, lastX = 0, open = false;
+  for (const point of closePoints(m).points) {
+    if (point.index !== previous + 1) {
+      if (area && open) {
+        target.lineTo(lastX, m.geometry.bottom);
+        target.lineTo(firstX, m.geometry.bottom);
+        target.closePath();
+      }
+      target.moveTo(point.x, point.y);
+      firstX = point.x;
+      open = true;
+    } else
+      target.lineTo(point.x, point.y);
+    previous = point.index;
+    lastX = point.x;
+  }
+  if (area && open) {
+    target.lineTo(lastX, m.geometry.bottom);
+    target.lineTo(firstX, m.geometry.bottom);
+    target.closePath();
+  }
+}
+function paintClose(ctx, m, area) {
+  if (typeof Path2D !== "undefined") {
+    const geometry = closePoints(m), key = area ? "area" : "stroke";
+    let path2 = geometry[key];
+    if (path2 === void 0) {
+      path2 = new Path2D();
+      closePath(path2, m, area);
+      geometry[key] = path2;
+    }
+    if (area)
+      ctx.fill(path2);
+    else
+      ctx.stroke(path2);
+  } else {
+    ctx.beginPath();
+    closePath(ctx, m, area);
+    if (area)
+      ctx.fill();
+    else
+      ctx.stroke();
+  }
+}
+var envelopes = /* @__PURE__ */ new WeakMap();
+function candleEnvelope(m) {
+  if (m.plottedCandles.length <= m.geometry.plotWidth)
+    return m.plottedCandles;
+  const cached = envelopes.get(m);
+  if (cached !== void 0)
+    return cached;
+  const result = [];
+  let bucket = NaN;
+  for (const candle of m.plottedCandles) {
+    const pixel = Math.floor(candle.x);
+    if (!Number.isFinite(pixel))
+      continue;
+    const previous = result[result.length - 1];
+    if (pixel !== bucket || previous === void 0) {
+      result.push({ ...candle });
+      bucket = pixel;
+      continue;
+    }
+    previous.c = candle.c;
+    previous.h = Math.max(previous.h, candle.h);
+    previous.l = Math.min(previous.l, candle.l);
+    previous.wickTop = Math.min(previous.wickTop, candle.wickTop);
+    previous.wickBottom = Math.max(previous.wickBottom, candle.wickBottom);
+    const open = m.y(previous.o), close = m.y(previous.c);
+    previous.bodyTop = Math.min(open, close);
+    previous.bodyBottom = Math.max(open, close);
+  }
+  envelopes.set(m, result);
+  return result;
+}
+function paintEngineFrame(ctx, frame, options = {}) {
+  const m = frame.model, g = m.geometry;
+  if (!ready(m))
+    return;
+  const digits = precision(options.pricePrecision ?? frame.pricePrecision ?? derivePrecision(frame.snapshot.bars));
+  const formatter = timeFormat(options.timeZone ?? "UTC");
+  ctx.save();
+  try {
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1;
+    ctx.fillStyle = options.background ?? DEFAULTS.background;
+    ctx.fillRect(0, 0, g.width, g.height);
+    ctx.font = options.font ?? DEFAULTS.font;
+    ctx.textBaseline = "middle";
+    ctx.save();
+    try {
+      clipPlot(ctx, m);
+      ctx.strokeStyle = options.grid ?? DEFAULTS.grid;
+      ctx.beginPath();
+      for (const tick of m.yTicks) {
+        const y = m.y(tick);
+        ctx.moveTo(g.left, y);
+        ctx.lineTo(g.right, y);
+      }
+      for (const index of m.xTickIndices) {
+        const x = m.xPositions[index];
+        ctx.moveTo(x, g.top);
+        ctx.lineTo(x, g.bottom);
+      }
+      ctx.stroke();
+      const type = options.chartType ?? "candles";
+      const span = frame.snapshot.viewport.i1 - frame.snapshot.viewport.i0;
+      const half = type !== "line" && type !== "area" || m.plottedSeries.some((series) => series.source.type === "bar") ? halfBarWidth(m, frame.snapshot.dataStart !== void 0 && span > 0 ? g.plotWidth / span : void 0) : 0;
+      if (paintPriceSeries(ctx, frame, options, half)) {
+      } else if (type === "line" || type === "area") {
+        const color = options.line ?? DEFAULTS.line;
+        if (type === "area") {
+          ctx.fillStyle = color;
+          ctx.globalAlpha = 0.14;
+          paintClose(ctx, m, true);
+          ctx.globalAlpha = 1;
+        }
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1.5;
+        paintClose(ctx, m, false);
+      } else {
+        const candles = options.candleDensity === "pixel-envelope" ? candleEnvelope(m) : m.plottedCandles;
+        for (let group = 0; group < 2; group++) {
+          const up = group === 0;
+          const color = up ? options.up ?? DEFAULTS.up : options.down ?? DEFAULTS.down;
+          ctx.fillStyle = ctx.strokeStyle = color;
+          ctx.beginPath();
+          for (const candle of candles) {
+            if (candle.c >= candle.o !== up)
+              continue;
+            ctx.moveTo(candle.x, candle.wickTop);
+            ctx.lineTo(candle.x, candle.wickBottom);
+            if (type === "ohlc") {
+              const openY = m.y(candle.o), closeY = m.y(candle.c);
+              ctx.moveTo(candle.x - half, openY);
+              ctx.lineTo(candle.x, openY);
+              ctx.moveTo(candle.x, closeY);
+              ctx.lineTo(candle.x + half, closeY);
+            }
+          }
+          ctx.stroke();
+          if (type === "candles") {
+            ctx.beginPath();
+            for (const candle of candles) {
+              if (candle.c >= candle.o !== up)
+                continue;
+              const bodyHeight = Math.max(1, candle.bodyBottom - candle.bodyTop);
+              ctx.rect(candle.x - half, candle.bodyTop, 2 * half, bodyHeight);
+            }
+            ctx.fill();
+          }
+        }
+      }
+      ctx.lineWidth = 1.5;
+      for (const series of m.plottedSeries) {
+        const style = frame.figureStyles?.get(series.source.id);
+        ctx.lineWidth = style?.lineWidth ?? 1.5;
+        ctx.setLineDash(style?.dash === void 0 ? [] : [...style.dash]);
+        ctx.strokeStyle = series.source.color ?? options.line ?? DEFAULTS.line;
+        if (series.source.type === "bar") {
+          ctx.fillStyle = ctx.strokeStyle;
+          const base = Math.max(m.min, Math.min(m.max, style?.base ?? 0));
+          const zero = Math.max(g.top, Math.min(g.bottom, m.y(base)));
+          ctx.beginPath();
+          for (const point of series.points)
+            ctx.rect(point.x - half, Math.min(zero, point.y), half * 2, Math.max(1, Math.abs(point.y - zero)));
+          ctx.fill();
+          continue;
+        }
+        if (series.source.type === "scatter") {
+          ctx.fillStyle = ctx.strokeStyle;
+          ctx.beginPath();
+          for (const point of series.points) {
+            ctx.moveTo(point.x + ctx.lineWidth, point.y);
+            ctx.arc(point.x, point.y, ctx.lineWidth, 0, 2 * Math.PI);
+          }
+          ctx.fill();
+          continue;
+        }
+        ctx.beginPath();
+        let previous = -2;
+        for (const point of series.points) {
+          if (point.index !== previous + 1)
+            ctx.moveTo(point.x, point.y);
+          else
+            ctx.lineTo(point.x, point.y);
+          previous = point.index;
+        }
+        ctx.stroke();
+      }
+    } finally {
+      ctx.restore();
+    }
+    ctx.fillStyle = options.text ?? DEFAULTS.text;
+    if (frame.indicatorPane === true && frame.title !== void 0) {
+      ctx.textAlign = "left";
+      ctx.fillText(frame.title, g.left + 4, Math.max(8, g.top - 7), Math.max(1, g.plotWidth - 8));
+    }
+    ctx.textAlign = "right";
+    for (const tick of m.yTicks)
+      ctx.fillText(options.formatPrice?.(tick, digits) ?? tick.toFixed(digits), g.left - 6, m.y(tick), Math.max(1, g.left - 10));
+    if (m.hasRightAxis) {
+      ctx.textAlign = "left";
+      for (const tick of m.rightTicks)
+        ctx.fillText(tick.toFixed(digits), g.right + 6, m.y(tick, "right"), Math.max(1, g.width - g.right - 10));
+    }
+    let labelRight = -Infinity;
+    let previousDate = null;
+    ctx.textAlign = "center";
+    for (const index of options.showTimeAxis === false ? [] : m.xTickIndices) {
+      const key = m.xKeys[index];
+      const date = (options.timespan === "minute" || options.timespan === "second") && typeof key === "number" && Number.isFinite(key) && Math.abs(key) <= 864e13 ? calendarDate(formatter, key, options.timeZone ?? "UTC") : null;
+      const label = typeof key === "number" ? timeLabel(formatter, key, options, "xAxis", date === null ? "HH:mm" : boundaryFormat(date, previousDate)) : String(key);
+      const width = Math.min(ctx.measureText(label).width, Math.max(1, g.width - 8));
+      const x = Math.max(4 + width / 2, Math.min(g.width - 4 - width / 2, m.xPositions[index]));
+      if (x - width / 2 < labelRight + 8)
+        continue;
+      ctx.fillText(label, x, Math.min(g.height - 8, g.bottom + 18), width);
+      labelRight = x + width / 2;
+      previousDate = date;
+    }
+  } finally {
+    ctx.restore();
+  }
+}
+function paintEngineCursor(ctx, frame, x, options = {}) {
+  const m = frame.model, g = m.geometry;
+  if (!ready(m) || !Number.isFinite(x) || x < g.left || x > g.right)
+    return;
+  const index = nearestChartIndex(m, x), hit = frame.inspectBar !== void 0 ? frame.inspectBar(x) : frame.inspect(x);
+  if (index === null || hit === null)
+    return;
+  const bar = hit.displayBar;
+  const typical = typicalPrice(bar);
+  const displayed = options.chartType === "hlc-area" ? Number.isFinite(typical) ? typical : bar.high / 3 + bar.low / 3 + bar.close / 3 : bar.close;
+  const px = m.xPositions[index], py = m.y(displayed);
+  const indicator = frame.indicatorPane === true;
+  if (!Number.isFinite(px) || !indicator && !Number.isFinite(py))
+    return;
+  const digits = precision(options.pricePrecision ?? frame.pricePrecision ?? derivePrecision(frame.snapshot.bars));
+  ctx.save();
+  try {
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+    ctx.strokeStyle = ctx.fillStyle = options.text ?? DEFAULTS.text;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    ctx.save();
+    try {
+      clipPlot(ctx, m);
+      ctx.beginPath();
+      ctx.moveTo(px, g.top);
+      ctx.lineTo(px, g.bottom);
+      if (!indicator) {
+        ctx.moveTo(g.left, py);
+        ctx.lineTo(g.right, py);
+      }
+      ctx.stroke();
+    } finally {
+      ctx.restore();
+    }
+    ctx.setLineDash([]);
+    ctx.font = options.font ?? DEFAULTS.font;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    const label = indicator ? m.plottedSeries.map((series) => {
+      let lo = 0, hi = series.points.length;
+      while (lo < hi) {
+        const mid = lo + hi >>> 1;
+        if (series.points[mid].index < index)
+          lo = mid + 1;
+        else
+          hi = mid;
+      }
+      const point = series.points[lo]?.index === index ? series.points[lo] : void 0;
+      return `${series.source.name ?? series.source.id} ${point === void 0 ? "\u2014" : Number(point.value.toPrecision(6))}`;
+    }).join("  ") : `${hit.mode === "heikin-ashi" ? "HA " : ""}O ${bar.open.toFixed(digits)}  H ${bar.high.toFixed(digits)}  L ${bar.low.toFixed(digits)}  C ${bar.close.toFixed(digits)}`;
+    const width = Math.min(g.plotWidth, ctx.measureText(label).width + 8);
+    ctx.fillStyle = options.background ?? DEFAULTS.background;
+    ctx.fillRect(g.left, g.top, width, 20);
+    ctx.fillStyle = options.text ?? DEFAULTS.text;
+    ctx.fillText(label, g.left + 4, g.top + 3, Math.max(1, width - 8));
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
+    if (!indicator)
+      ctx.fillText(options.formatPrice?.(displayed, digits) ?? displayed.toFixed(digits), g.left - 6, py, Math.max(1, g.left - 10));
+    const time = timeLabel(timeFormat(options.timeZone ?? "UTC"), hit.timestamp, options, "crosshair");
+    const timeWidth = Math.min(g.width - 8, ctx.measureText(time).width);
+    const timeX = Math.max(4 + timeWidth / 2, Math.min(g.width - 4 - timeWidth / 2, px));
+    ctx.textAlign = "center";
+    if (options.showTimeAxis !== false)
+      ctx.fillText(time, timeX, Math.min(g.height - 8, g.bottom + 18), timeWidth);
+  } finally {
+    ctx.restore();
+  }
+}
+
+// packages/bindings/web/src/drawingMedia.ts
+import { DRAWING_IMAGE_LIMITS, dimensions, fail, header, raster, validateDrawingImage } from "@supersolutions/super-chart-core";
+async function createDrawingImage(blob, signal) {
+  if (!["image/png", "image/jpeg", "image/webp"].includes(blob.type) || blob.size <= 0 || blob.size > Math.floor((DRAWING_IMAGE_LIMITS.encodedCharacters - 32) * 3 / 4))
+    fail();
+  signal?.throwIfAborted();
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  signal?.throwIfAborted();
+  header(bytes, blob.type);
+  let binary = "";
+  for (let at = 0; at < bytes.length; at += 8192)
+    binary += String.fromCharCode(...bytes.subarray(at, at + 8192));
+  return validateDrawingImage(`data:${blob.type};base64,${btoa(binary)}`);
+}
+var DrawingImageRenderer = class {
+  /** Optional owner-window decoder is useful when the chart lives in another document. */
+  constructor(decode = async (blob) => await createImageBitmap(blob)) {
+    this.decode = decode;
+  }
+  entries = /* @__PURE__ */ new Map();
+  held = /* @__PURE__ */ new Map();
+  pixels = 0;
+  disposed = false;
+  // Return the same cached decode promise to every caller; an async wrapper would change its identity.
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  prepare(source) {
+    if (this.disposed)
+      return Promise.reject(new Error("Drawing image renderer is disposed"));
+    const previous = this.entries.get(source);
+    if (previous !== void 0)
+      return previous.promise;
+    let input;
+    try {
+      input = raster(source);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+    const pixels = input.width * input.height;
+    if (this.entries.size >= DRAWING_IMAGE_LIMITS.cachedImages || this.pixels + pixels > DRAWING_IMAGE_LIMITS.cachedPixels)
+      return Promise.reject(new RangeError("Drawing image cache is full; release unused images before adding another"));
+    const entry = { promise: Promise.resolve(), bitmap: null, error: null, pixels, invalidations: /* @__PURE__ */ new Set() };
+    this.entries.set(source, entry);
+    this.pixels += pixels;
+    entry.promise = Promise.resolve().then(async () => {
+      if (this.disposed || this.entries.get(source) !== entry)
+        throw new Error("Drawing image decode was cancelled");
+      const bitmap = await this.decode(new Blob([input.bytes], { type: input.mime }));
+      if (this.disposed || this.entries.get(source) !== entry) {
+        bitmap.close();
+        throw new Error("Drawing image decode was cancelled");
+      }
+      try {
+        dimensions(bitmap.width, bitmap.height);
+        if (bitmap.width * bitmap.height !== pixels)
+          throw new RangeError("Decoded image dimensions disagree with the raster header");
+        entry.bitmap = bitmap;
+      } catch (error) {
+        bitmap.close();
+        throw error;
+      }
+    }).catch((error) => {
+      entry.error = error instanceof Error ? error : new Error(String(error));
+      throw entry.error;
+    }).finally(() => {
+      const callbacks = [...entry.invalidations];
+      entry.invalidations.clear();
+      if (!this.disposed && this.entries.get(source) === entry)
+        for (const callback of callbacks) {
+          try {
+            callback();
+          } catch {
+          }
+        }
+    });
+    void entry.promise.catch(() => {
+    });
+    return entry.promise;
+  }
+  getError(source) {
+    return this.entries.get(source)?.error ?? null;
+  }
+  paint(context, source, bounds, clip, onInvalidate) {
+    if (this.disposed || ![bounds.left, bounds.top, bounds.right, bounds.bottom, clip.left, clip.top, clip.right, clip.bottom].every(Number.isFinite) || bounds.right <= bounds.left || bounds.bottom <= bounds.top || clip.right <= clip.left || clip.bottom <= clip.top)
+      return "unavailable";
+    if (!this.entries.has(source))
+      void this.prepare(source).catch(() => {
+      });
+    const entry = this.entries.get(source);
+    if (entry === void 0 || entry.error !== null)
+      return "unavailable";
+    if (entry.bitmap === null) {
+      if (onInvalidate !== void 0)
+        entry.invalidations.add(onInvalidate);
+      return "loading";
+    }
+    context.save();
+    try {
+      context.beginPath();
+      context.rect(clip.left, clip.top, clip.right - clip.left, clip.bottom - clip.top);
+      context.clip();
+      context.globalAlpha = 1;
+      context.globalCompositeOperation = "source-over";
+      context.drawImage(entry.bitmap, bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+    } finally {
+      context.restore();
+    }
+    return "ready";
+  }
+  /** Source data stays in drawing history; a released bitmap can be decoded again on undo. */
+  retain(sources) {
+    for (const [source, entry] of this.entries) {
+      const pending = entry.bitmap === null && entry.error === null;
+      if (!sources.has(source) && !this.held.has(source) && !pending)
+        this.release(source);
+    }
+  }
+  /** Keep validated resources across an asynchronous market/document restore. */
+  hold(sources) {
+    if (this.disposed)
+      throw new Error("Drawing image renderer is disposed");
+    if (sources.size > DRAWING_IMAGE_LIMITS.cachedImages)
+      throw new RangeError("Too many held drawing images");
+    const keys = [...sources];
+    for (const source of keys)
+      validateDrawingImage(source);
+    if ((/* @__PURE__ */ new Set([...this.held.keys(), ...keys])).size > DRAWING_IMAGE_LIMITS.cachedImages)
+      throw new RangeError("Too many held drawing images");
+    for (const source of keys)
+      this.held.set(source, (this.held.get(source) ?? 0) + 1);
+    let released = false;
+    return () => {
+      if (released)
+        return;
+      released = true;
+      for (const source of keys) {
+        const count = this.held.get(source) ?? 0;
+        if (count <= 1)
+          this.held.delete(source);
+        else
+          this.held.set(source, count - 1);
+      }
+    };
+  }
+  has(source) {
+    return this.entries.has(source);
+  }
+  release(source) {
+    if (this.held.has(source))
+      return;
+    const entry = this.entries.get(source);
+    if (entry === void 0)
+      return;
+    this.entries.delete(source);
+    this.pixels -= entry.pixels;
+    entry.invalidations.clear();
+    entry.bitmap?.close();
+  }
+  dispose() {
+    if (this.disposed)
+      return;
+    this.disposed = true;
+    this.held.clear();
+    for (const source of this.entries.keys())
+      this.release(source);
+  }
+};
+
+// packages/bindings/web/src/chart.ts
+import { RealtimeSeries, RealtimeView, normalizeBars, normalizeBar, ENGINE_CHART_TYPES as ENGINE_CHART_TYPES2, buildEngineFrame, validateEngineLayout, validatePriceScale, EngineIndicators, DrawingStore as DrawingStore2, DRAWING_TYPES, projectDrawing, viewportLimitsForWidth, financialGeometry } from "@supersolutions/super-chart-core";
+
+// packages/bindings/web/src/gestures.ts
+import { viewportSpan, clampContinuousViewport as clampViewport, zoomContinuousViewport as zoomViewport } from "@supersolutions/super-chart-core";
+function attachEngineGestures(element, view, geometry, cursor, options = {}) {
+  const doc = element.ownerDocument, win = doc.defaultView;
+  if (win === null)
+    return Object.assign(() => {
+    }, { cancelInput: () => {
+    } });
+  const frameScheduler = options.frameScheduler ?? {
+    request: (callback) => win.requestAnimationFrame(callback),
+    cancel: (id) => win.cancelAnimationFrame(id)
+  };
+  const abort = new win.AbortController(), pointers = /* @__PURE__ */ new Map();
+  const reduced = win.matchMedia?.("(prefers-reduced-motion: reduce)");
+  const oldTouchAction = element.style.touchAction;
+  element.style.touchAction = "none";
+  let disposed = false, inspection = false;
+  let drag = null;
+  let pending = null;
+  let wheel = null;
+  let raf = null, rectFrame = null;
+  let rect = null;
+  let velocity = 0, sample = { x: 0, time: 0 };
+  let coast = null;
+  let hold = null;
+  const editable = (target) => target instanceof win.Element && target.closest('input,textarea,select,button,a,[contenteditable]:not([contenteditable="false"])') !== null;
+  const invalidateRect = () => {
+    rect = null;
+  };
+  const bounds = () => {
+    if (rect === null)
+      rect = element.getBoundingClientRect();
+    if (rectFrame === null)
+      rectFrame = frameScheduler.request(() => {
+        rectFrame = null;
+        rect = null;
+      });
+    return rect;
+  };
+  const eventTime = (event) => {
+    const now = win.performance.now();
+    return Number.isFinite(event.timeStamp) && Math.abs(event.timeStamp - now) < 6e4 ? event.timeStamp : now;
+  };
+  const cancelHold = () => {
+    if (hold !== null)
+      win.clearTimeout(hold.timer);
+    hold = null;
+  };
+  const readFrame = () => {
+    const g = geometry(), snapshot = view.getSnapshot();
+    return g !== null && Number.isFinite(g.left) && Number.isFinite(g.plotWidth) && g.plotWidth > 0 && snapshot.length > 0 ? { length: snapshot.length, left: g.left, width: g.plotWidth, observed: snapshot.viewport } : null;
+  };
+  const valid = (frame) => {
+    const now = readFrame();
+    return now !== null && now.length === frame.length && now.left === frame.left && now.width === frame.width && now.observed === frame.observed;
+  };
+  const commit = () => {
+    const value = pending;
+    pending = null;
+    if (value === null || !valid(value.frame))
+      return;
+    view.setViewport(value.next);
+    const snapshot = view.getSnapshot();
+    if (drag !== null)
+      drag.observed = snapshot.viewport;
+    if (coast !== null)
+      coast.frame.observed = snapshot.viewport;
+    if (wheel !== null)
+      wheel.frame.observed = snapshot.viewport;
+    if (snapshot.viewport.i0 === 0 && snapshot.hasMore)
+      view.requestMore();
+  };
+  const schedule = () => {
+    if (disposed || raf !== null)
+      return;
+    raf = frameScheduler.request((time) => {
+      raf = null;
+      if (disposed)
+        return;
+      if (coast !== null) {
+        if (!valid(coast.frame) || reduced?.matches === true || options.reducedMotion === true)
+          coast = null;
+        else {
+          const elapsed = Math.max(0, time - coast.started), decay = Math.exp(-elapsed / 220);
+          const distance = coast.velocity * 220 * (1 - decay);
+          const delta = -distance / coast.frame.width * Math.max(0, viewportSpan(coast.start) - 1);
+          const proposed = { i0: coast.start.i0 + delta, i1: coast.start.i1 + delta };
+          const next = clampViewport(proposed, coast.frame.length, view.getLimits());
+          pending = { next, frame: coast.frame };
+          const blocked = delta < 0 && next.i0 > proposed.i0 + 1e-9 || delta > 0 && next.i1 < proposed.i1 - 1e-9;
+          if (Math.abs(coast.velocity * decay) < 0.01 || elapsed >= 1400 || blocked)
+            coast = null;
+        }
+      }
+      if (wheel !== null) {
+        if (!valid(wheel.frame))
+          wheel = null;
+        else {
+          const current = view.getSnapshot().viewport, target = wheel.target;
+          const dt = Math.max(0, time - wheel.time);
+          wheel.time = time;
+          const alpha = options.reducedMotion === true || reduced?.matches === true ? 1 : 1 - Math.exp(-dt / 40);
+          const span = viewportSpan(current), targetSpan = viewportSpan(target);
+          const nextSpan = span * Math.exp(Math.log(targetSpan / span) * alpha);
+          const blend = Math.abs(targetSpan - span) > 1e-9 ? (nextSpan - span) / (targetSpan - span) : alpha;
+          const next = { i0: current.i0 + (target.i0 - current.i0) * blend, i1: current.i1 + (target.i1 - current.i1) * blend };
+          const remainingPixels = Math.max(Math.abs(next.i0 - target.i0), Math.abs(next.i1 - target.i1)) * wheel.frame.width / Math.max(1, targetSpan - 1);
+          const settled = alpha === 1 || remainingPixels < 0.15 || time - wheel.lastInput >= 280;
+          pending = { next: settled ? target : next, frame: wheel.frame };
+          if (settled)
+            wheel = null;
+        }
+      }
+      if (coast !== null || wheel !== null)
+        schedule();
+      commit();
+      if (pointers.size === 0 && coast === null && wheel === null)
+        view.endNavigation();
+    });
+  };
+  const cancelScheduled = () => {
+    if (raf !== null)
+      frameScheduler.cancel(raf);
+    raf = null;
+  };
+  const flush = () => {
+    cancelScheduled();
+    wheel = null;
+    coast = null;
+    commit();
+  };
+  const stop = () => {
+    cancelScheduled();
+    pending = null;
+    wheel = null;
+    coast = null;
+    velocity = 0;
+  };
+  const position = () => {
+    const iterator = pointers.values(), a = iterator.next().value, b = iterator.next().value;
+    return b === void 0 ? { x: a.x, distance: 0 } : { x: (a.x + b.x) / 2, distance: Math.hypot(b.x - a.x, b.y - a.y) };
+  };
+  const rebase = () => {
+    const frame = readFrame();
+    if (pointers.size === 0 || frame === null) {
+      drag = null;
+      return;
+    }
+    const p = position();
+    view.beginNavigation();
+    drag = { ...frame, start: { ...frame.observed }, x: p.x, distance: p.distance };
+    sample = { x: p.x, time: win.performance.now() };
+    velocity = 0;
+  };
+  const clear = () => {
+    stop();
+    cancelHold();
+    drag = null;
+    inspection = false;
+    const ids = [...pointers.keys()];
+    pointers.clear();
+    for (const id of ids)
+      if (element.hasPointerCapture(id))
+        element.releasePointerCapture(id);
+    view.endNavigation();
+    cursor(null);
+  };
+  const on = (type, listener, passive = true) => {
+    element.addEventListener(type, listener, { signal: abort.signal, passive });
+  };
+  on("pointerdown", (event) => {
+    const e = event;
+    if (e.button !== 0 || pointers.size >= 2 || editable(e.target) || readFrame() === null)
+      return;
+    flush();
+    stop();
+    cancelHold();
+    if (pointers.size === 0)
+      view.endNavigation();
+    inspection = false;
+    view.beginNavigation();
+    const r = bounds(), point = { x: e.clientX - r.left, y: e.clientY - r.top };
+    pointers.set(e.pointerId, point);
+    element.setPointerCapture(e.pointerId);
+    element.focus({ preventScroll: true });
+    rebase();
+    if (e.pointerType === "touch" && pointers.size === 1) {
+      const id = e.pointerId;
+      hold = {
+        id,
+        point,
+        timer: win.setTimeout(() => {
+          const current = pointers.get(id);
+          if (hold?.id !== id || current === void 0 || pointers.size !== 1 || drag === null || !valid(drag)) {
+            cancelHold();
+            return;
+          }
+          hold = null;
+          inspection = true;
+          pending = null;
+          velocity = 0;
+          view.endNavigation();
+          cursor(current.x);
+        }, 450)
+      };
+    } else
+      cursor(null);
+  });
+  const movePointer = (e, target = e.target) => {
+    const r = bounds(), x = e.clientX - r.left, y = e.clientY - r.top;
+    if (!pointers.has(e.pointerId)) {
+      if (pointers.size === 0 && !inspection && !editable(target))
+        cursor(x);
+      return;
+    }
+    pointers.set(e.pointerId, { x, y });
+    if (hold !== null) {
+      if (Math.hypot(x - hold.point.x, y - hold.point.y) <= 8)
+        return;
+      cancelHold();
+    }
+    if (inspection && pointers.size === 1) {
+      cursor(x);
+      return;
+    }
+    if (drag === null || !valid(drag)) {
+      pending = null;
+      rebase();
+      return;
+    }
+    const p = position(), now = eventTime(e);
+    const factor = pointers.size === 2 && drag.distance > 1 ? Math.max(1, p.distance) / drag.distance : 1;
+    const anchor = Math.max(0, Math.min(1, (drag.x - drag.left) / drag.width));
+    const zoomed = zoomViewport(drag.start, drag.length, factor, anchor, view.getLimits());
+    const delta = (drag.x - p.x) / drag.width * Math.max(0, viewportSpan(zoomed) - 1);
+    pending = { next: { i0: zoomed.i0 + delta, i1: zoomed.i1 + delta }, frame: drag };
+    const elapsed = now - sample.time;
+    if (pointers.size === 1 && elapsed > 0) {
+      const instantaneous = Math.max(-3, Math.min(3, (p.x - sample.x) / elapsed));
+      if (elapsed > 80 || instantaneous * velocity < 0)
+        velocity = 0;
+      velocity += (instantaneous - velocity) * (1 - Math.exp(-elapsed / 30));
+    } else if (pointers.size !== 1)
+      velocity = 0;
+    sample = { x: p.x, time: now };
+    schedule();
+    cursor(p.x);
+  };
+  on("pointermove", (event) => {
+    const e = event, coalesced = e.getCoalescedEvents?.();
+    const latest = coalesced === void 0 || coalesced.length === 0 ? e : coalesced[coalesced.length - 1];
+    movePointer(latest, e.target);
+  });
+  on("pointerup", (event) => {
+    const e = event;
+    if (!pointers.has(e.pointerId))
+      return;
+    const last = pointers.get(e.pointerId), r = bounds();
+    if (last.x !== e.clientX - r.left || last.y !== e.clientY - r.top)
+      movePointer(e);
+    const wasSingle = pointers.size === 1, recent = win.performance.now() - sample.time < 80;
+    const currentDrag = drag !== null && valid(drag);
+    flush();
+    cancelHold();
+    pointers.delete(e.pointerId);
+    if (element.hasPointerCapture(e.pointerId))
+      element.releasePointerCapture(e.pointerId);
+    if (pointers.size > 0) {
+      rebase();
+      return;
+    }
+    const frame = readFrame(), speed = velocity;
+    drag = null;
+    if (!inspection && wasSingle && currentDrag && recent && frame !== null && options.inertia === true && options.reducedMotion !== true && reduced?.matches !== true && Math.abs(speed) > 0.05) {
+      coast = { frame, start: { ...frame.observed }, velocity: speed, started: win.performance.now() };
+      schedule();
+    } else
+      view.endNavigation();
+    if (e.pointerType !== "mouse" && !inspection)
+      cursor(null);
+  });
+  on("pointercancel", clear);
+  on("lostpointercapture", (event) => {
+    if (pointers.has(event.pointerId))
+      clear();
+  });
+  on("pointerleave", () => {
+    if (pointers.size === 0 && !inspection)
+      cursor(null);
+  });
+  on("blur", clear);
+  on("focusin", (event) => {
+    if (editable(event.target))
+      clear();
+  });
+  win.addEventListener("blur", clear, { signal: abort.signal });
+  win.addEventListener("resize", invalidateRect, { signal: abort.signal });
+  doc.addEventListener("scroll", invalidateRect, { signal: abort.signal, capture: true, passive: true });
+  doc.addEventListener("visibilitychange", () => {
+    if (doc.hidden)
+      clear();
+  }, { signal: abort.signal });
+  on("wheel", (event) => {
+    const e = event, frame = readFrame();
+    if (frame === null || editable(e.target) || pointers.size > 0)
+      return;
+    const unitX = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? frame.width : 1;
+    const unitY = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? element.clientHeight : 1;
+    const dx = e.deltaX * unitX, dy = e.deltaY * unitY, now = win.performance.now();
+    const locked = wheel !== null && now - wheel.lastInput < 160 ? wheel.mode : null;
+    const mode = e.ctrlKey ? "zoom" : e.shiftKey ? "pan" : locked ?? (Math.abs(dx) > Math.abs(dy) * 1.2 ? "pan" : "zoom");
+    const raw = mode === "pan" ? e.shiftKey && dx === 0 ? dy : dx : dy;
+    const delta = Math.max(-400, Math.min(400, raw));
+    if (!Number.isFinite(delta) || delta === 0)
+      return;
+    e.preventDefault();
+    if (coast !== null) {
+      flush();
+      view.endNavigation();
+    }
+    coast = null;
+    cancelHold();
+    inspection = false;
+    const direction = Math.sign(delta);
+    if (wheel === null || !valid(wheel.frame) || wheel.direction !== direction || wheel.mode !== mode) {
+      if (wheel !== null && wheel.mode !== mode)
+        view.endNavigation();
+      view.beginNavigation();
+      wheel = { mode, target: { ...frame.observed }, direction, frame, time: now, lastInput: now };
+    }
+    const x = e.clientX - bounds().left;
+    if (mode === "zoom")
+      wheel.target = zoomViewport(wheel.target, frame.length, Math.exp(-delta * 2e-3), (x - frame.left) / frame.width, view.getLimits());
+    else {
+      const bars = delta / frame.width * Math.max(0, viewportSpan(wheel.target) - 1);
+      wheel.target = clampViewport({ i0: wheel.target.i0 + bars, i1: wheel.target.i1 + bars }, frame.length, view.getLimits());
+    }
+    wheel.lastInput = now;
+    schedule();
+    cursor(x);
+  }, false);
+  on("keydown", (event) => {
+    const e = event;
+    if (editable(e.target) || e.ctrlKey || e.metaKey || e.isComposing)
+      return;
+    if (e.altKey) {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        flush();
+        clear();
+        if (e.key === "ArrowLeft")
+          view.undoNavigation();
+        else
+          view.redoNavigation();
+        e.preventDefault();
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      clear();
+      e.preventDefault();
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "PageUp", "PageDown", "+", "=", "-", "Home"].includes(e.key))
+      return;
+    flush();
+    clear();
+    const span = viewportSpan(view.getSnapshot().viewport);
+    switch (e.key) {
+      case "ArrowLeft":
+        view.pan(-10);
+        break;
+      case "ArrowRight":
+        view.pan(10);
+        break;
+      case "PageUp":
+        view.pan(-Math.round(span * 0.8));
+        break;
+      case "PageDown":
+        view.pan(Math.round(span * 0.8));
+        break;
+      case "+":
+      case "=":
+        view.zoom(1.5);
+        break;
+      case "-":
+        view.zoom(1 / 1.5);
+        break;
+      case "Home":
+        view.followLatest();
+        break;
+    }
+    const snapshot = view.getSnapshot();
+    if (e.key !== "Home" && snapshot.viewport.i0 === 0 && snapshot.hasMore)
+      view.requestMore();
+    e.preventDefault();
+  }, false);
+  const cleanup = () => {
+    if (disposed)
+      return;
+    disposed = true;
+    abort.abort();
+    clear();
+    if (rectFrame !== null)
+      frameScheduler.cancel(rectFrame);
+    rectFrame = null;
+    rect = null;
+    element.style.touchAction = oldTouchAction;
+  };
+  return Object.assign(cleanup, { cancelInput: clear });
+}
+
+// packages/bindings/web/src/drawingInteraction.ts
+import { drawingAnchorCount, drawingUsesText } from "@supersolutions/super-chart-core";
+
+// packages/bindings/web/src/freehandDrawing.ts
+import { MAX_FREEHAND_POINTS as MAX_POINTS } from "@supersolutions/super-chart-core";
+import { projectFreehandDrawing } from "@supersolutions/super-chart-core";
+var sequence = 0;
+var validAnchor = (point) => point !== null && Number.isFinite(point.timestamp) && Math.abs(point.timestamp) <= 864e13 && Number.isFinite(point.price);
+function attachFreehandDrawingInput(element, store, getFrame, onPreview, onToolComplete, onInteractionStart) {
+  const doc = element.ownerDocument, win = doc.defaultView;
+  if (win === null)
+    return { setTool: () => {
+    }, dispose: () => {
+    } };
+  const abort = new win.AbortController();
+  let tool = null, disposed = false, frameId = 0, generation = 0;
+  let stroke = null;
+  const consume = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  const editable = (target) => target instanceof win.Element && target.closest('input,textarea,select,button,a,[contenteditable]:not([contenteditable="false"])') !== null;
+  const frame = () => {
+    const current = getFrame(), rect = element.getBoundingClientRect(), g = current?.model.geometry;
+    return current !== null && current.snapshot.length > 0 && rect.width > 0 && rect.height > 0 && g !== void 0 && [g.left, g.right, g.top, g.bottom].every(Number.isFinite) && g.right > g.left && g.bottom > g.top ? current : null;
+  };
+  const release = (id) => {
+    if (element.hasPointerCapture(id))
+      element.releasePointerCapture(id);
+  };
+  const cancel = () => {
+    generation++;
+    if (frameId !== 0)
+      win.cancelAnimationFrame(frameId);
+    frameId = 0;
+    const active = stroke;
+    stroke = null;
+    if (active !== null)
+      release(active.pointerId);
+    onPreview(null);
+  };
+  const preview = () => {
+    const current = frame(), active = stroke;
+    if (active === null || current === null || active.points.length < 2)
+      return null;
+    const anchors = [];
+    for (const point2 of active.points) {
+      const anchor = current.unproject(point2.x, point2.y);
+      if (!validAnchor(anchor))
+        return null;
+      const projected = current.project(anchor.timestamp, anchor.price);
+      if (projected === null || Math.abs(projected.x - point2.x) > 0.5 || Math.abs(projected.y - point2.y) > 0.5)
+        return null;
+      anchors.push(Object.freeze({ ...anchor }));
+    }
+    return Object.freeze({ id: active.id, type: active.type, anchors: Object.freeze(anchors), locked: false, hidden: false, strokeWidth: active.type === "highlighter" ? 16 : 2 });
+  };
+  const publish = () => {
+    frameId = 0;
+    if (!disposed && stroke !== null)
+      onPreview(preview());
+  };
+  const point = (event) => {
+    const current = frame();
+    if (current === null)
+      return null;
+    const rect = element.getBoundingClientRect(), g = current.model.geometry;
+    const x = event.clientX - rect.left, y = event.clientY - rect.top;
+    if (!Number.isFinite(x) || !Number.isFinite(y))
+      return null;
+    return { x: Math.max(g.left, Math.min(g.right, x)), y: Math.max(g.top, Math.min(g.bottom, y)) };
+  };
+  const sample = (event, force = false) => {
+    const active = stroke, next = point(event);
+    if (active === null || next === null)
+      return;
+    const last = active.points[active.points.length - 1], distance = Math.hypot(next.x - last.x, next.y - last.y);
+    if (distance < (force ? 0.01 : active.spacing))
+      return;
+    if (active.points.length >= MAX_POINTS) {
+      active.points = active.points.filter((_, index) => index % 2 === 0 || index === active.points.length - 1);
+      active.spacing *= 2;
+    }
+    active.points.push(next);
+  };
+  const on = (type, callback) => {
+    element.addEventListener(type, callback, { capture: true, passive: false, signal: abort.signal });
+  };
+  on("pointerdown", (event) => {
+    const e = event;
+    if (tool === null || editable(e.target) || e.button !== 0)
+      return;
+    if (stroke !== null) {
+      consume(e);
+      return;
+    }
+    const current = frame(), rect = element.getBoundingClientRect(), g = current?.model.geometry;
+    if (current === null || g === void 0 || e.clientX - rect.left < g.left || e.clientX - rect.left > g.right || e.clientY - rect.top < g.top || e.clientY - rect.top > g.bottom)
+      return;
+    const epoch = generation, selectedTool = tool;
+    consume(e);
+    onInteractionStart?.();
+    if (disposed || epoch !== generation || tool !== selectedTool)
+      return;
+    const first = point(e);
+    if (first === null)
+      return;
+    let id;
+    do {
+      id = `stroke-${Date.now().toString(36)}-${(++sequence).toString(36)}`;
+    } while (store.getSnapshot().drawings.some((item) => item.id === id));
+    stroke = { id, type: selectedTool, pointerId: e.pointerId, points: [first], spacing: 2, original: store.getSnapshot().drawings };
+    try {
+      element.setPointerCapture(e.pointerId);
+    } catch {
+      cancel();
+      return;
+    }
+    element.focus({ preventScroll: true });
+  });
+  on("pointermove", (event) => {
+    const e = event;
+    if (stroke === null)
+      return;
+    consume(e);
+    if (e.pointerId !== stroke.pointerId)
+      return;
+    const samples = typeof e.getCoalescedEvents === "function" ? e.getCoalescedEvents() : [];
+    const step = Math.max(1, Math.ceil(samples.length / 64));
+    for (let i = 0; i < samples.length; i += step)
+      sample(samples[i]);
+    sample(e);
+    if (frameId === 0)
+      frameId = win.requestAnimationFrame(publish);
+  });
+  on("pointerup", (event) => {
+    const e = event;
+    if (stroke === null)
+      return;
+    consume(e);
+    if (e.pointerId !== stroke.pointerId)
+      return;
+    sample(e, true);
+    const drawing = preview(), active = stroke, epoch = generation + 1;
+    cancel();
+    if (disposed || epoch !== generation || drawing === null || active === null || tool !== active.type || store.getSnapshot().drawings !== active.original || active.points.every((point2) => Math.hypot(point2.x - active.points[0].x, point2.y - active.points[0].y) < 2))
+      return;
+    store.add(drawing);
+    store.select(drawing.id);
+    tool = null;
+    onToolComplete?.();
+  });
+  on("pointercancel", (event) => {
+    if (stroke?.pointerId === event.pointerId) {
+      consume(event);
+      cancel();
+    }
+  });
+  on("lostpointercapture", (event) => {
+    if (stroke?.pointerId === event.pointerId)
+      cancel();
+  });
+  on("keydown", (event) => {
+    const key = event;
+    if (key.key === "Escape" && !key.isComposing && !editable(key.target) && (stroke !== null || tool !== null)) {
+      consume(key);
+      cancel();
+      tool = null;
+      onToolComplete?.();
+    }
+  });
+  on("blur", (event) => {
+    const next = event.relatedTarget;
+    if (!(next instanceof win.Node) || !element.contains(next))
+      cancel();
+  });
+  win.addEventListener("blur", cancel, { signal: abort.signal });
+  doc.addEventListener("visibilitychange", () => {
+    if (doc.hidden)
+      cancel();
+  }, { signal: abort.signal });
+  const unsubscribe = store.subscribe?.(() => {
+    if (stroke !== null && store.getSnapshot().drawings !== stroke.original)
+      cancel();
+  });
+  return {
+    setTool: (value) => {
+      if (disposed)
+        return;
+      if (value !== null && value !== "brush" && value !== "highlighter")
+        throw new TypeError("Unknown freehand tool");
+      cancel();
+      tool = value;
+    },
+    dispose: () => {
+      if (disposed)
+        return;
+      disposed = true;
+      abort.abort();
+      unsubscribe?.();
+      cancel();
+      tool = null;
+    }
+  };
+}
+
+// packages/bindings/web/src/drawingInteraction.ts
+var nextId = 0;
+function attachDrawingInteraction(element, store, getFrame, onPreview, onToolComplete, onInteractionStart, imageRenderer) {
+  const doc = element.ownerDocument, win = doc.defaultView;
+  if (win === null)
+    return { setTool: () => {
+    }, dispose: () => {
+    } };
+  const abort = new win.AbortController();
+  let tool = null;
+  let drag = null;
+  let placement = null;
+  let editor = null;
+  let media = null;
+  let disposed = false;
+  const editable = (target) => target instanceof win.Element && target.closest('input,textarea,select,button,a,[contenteditable]:not([contenteditable="false"])') !== null;
+  const consume = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  const point = (event) => {
+    const rect = element.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const frame = () => {
+    const value = getFrame(), g = value?.model.geometry, rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0 && value !== null && value.snapshot.length > 0 && g !== void 0 && [g.left, g.right, g.top, g.bottom].every(Number.isFinite) && g.left < g.right && g.top < g.bottom ? value : null;
+  };
+  const anchor = (value) => value !== null && Number.isFinite(value.timestamp) && Math.abs(value.timestamp) <= 864e13 && Number.isFinite(value.price);
+  const release = (id) => {
+    if (element.hasPointerCapture(id))
+      element.releasePointerCapture(id);
+  };
+  const cancel = () => {
+    const previous = drag;
+    drag = null;
+    placement = null;
+    if (previous !== null)
+      release(previous.pointerId);
+    editor?.close();
+    if (media !== null) {
+      media.abort.abort();
+      media.input.remove();
+      media = null;
+    }
+    onPreview(null);
+  };
+  const finishTool = () => {
+    if (tool === null)
+      return;
+    tool = null;
+    onToolComplete?.();
+  };
+  const freehand = attachFreehandDrawingInput(element, store, getFrame, onPreview, onToolComplete, onInteractionStart);
+  const current = (value) => value.original === null || store.getSnapshot().drawings.find((item) => item.id === value.original?.id) === value.original;
+  const setPlacementAnchor = (preview, index, next) => ({
+    ...preview,
+    anchors: preview.anchors.map((item, i) => i >= index ? next : item)
+  });
+  const editText = (preview, original) => {
+    editor?.close();
+    const currentFrame = frame(), first = preview.anchors[preview.type === "callout" ? 1 : 0];
+    const position = currentFrame?.project(first.timestamp, first.price);
+    if (position === void 0 || position === null) {
+      onPreview(null);
+      finishTool();
+      return;
+    }
+    const input = doc.createElement("textarea");
+    input.setAttribute("aria-label", "Drawing text");
+    input.placeholder = "Text \xB7 Enter to save \xB7 Shift+Enter for a new line";
+    input.maxLength = 512;
+    input.rows = 3;
+    input.value = preview.text ?? "";
+    const width = Math.min(260, element.clientWidth), height = Math.min(100, element.clientHeight);
+    input.style.cssText = `position:absolute;z-index:4;box-sizing:border-box;resize:none;width:${width}px;height:${height}px;left:${Math.max(0, Math.min(position.x, element.clientWidth - width))}px;top:${Math.max(0, Math.min(position.y, element.clientHeight - height))}px;padding:6px;background:#10151d;color:#eee;border:1px solid #8bafff;font:12px system-ui;`;
+    let closed = false;
+    const close = () => {
+      if (closed)
+        return;
+      closed = true;
+      if (editor?.input === input)
+        editor = null;
+      input.remove();
+      onPreview(null);
+    };
+    const commit = () => {
+      if (closed)
+        return;
+      if (original !== null && store.getSnapshot().drawings.find((item) => item.id === original.id) !== original) {
+        close();
+        return;
+      }
+      try {
+        const content = input.value;
+        if (original === null) {
+          store.add({ ...preview, text: content });
+          store.select(preview.id);
+        } else
+          store.update(original.id, { text: content });
+      } catch (error) {
+        input.setCustomValidity(error instanceof Error ? error.message : "Invalid drawing text");
+        input.reportValidity();
+        return;
+      }
+      close();
+      finishTool();
+      element.focus({ preventScroll: true });
+    };
+    editor = { input, original, close };
+    element.append(input);
+    input.addEventListener("input", () => {
+      input.setCustomValidity("");
+      onPreview({ ...preview, text: input.value });
+    });
+    input.addEventListener("keydown", (event) => {
+      event.stopPropagation();
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+        finishTool();
+        element.focus({ preventScroll: true });
+      } else if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+        event.preventDefault();
+        commit();
+      }
+    });
+    input.addEventListener("blur", () => {
+      close();
+      finishTool();
+    });
+    onPreview(preview);
+    input.focus();
+    input.select();
+  };
+  const insertImage = (preview) => {
+    const input = doc.createElement("input"), controller = new win.AbortController();
+    input.type = "file";
+    input.accept = "image/png,image/jpeg,image/webp";
+    input.hidden = true;
+    media = { abort: controller, input };
+    element.append(input);
+    const finish = () => {
+      input.remove();
+      if (media?.abort === controller) {
+        media = null;
+        onPreview(null);
+        finishTool();
+      }
+    };
+    input.addEventListener("cancel", finish, { once: true });
+    input.addEventListener("change", () => {
+      const file = input.files?.[0];
+      if (file === void 0) {
+        finish();
+        return;
+      }
+      const decoder = imageRenderer ?? new DrawingImageRenderer(async (blob) => await win.createImageBitmap(blob));
+      let source;
+      void (async () => {
+        try {
+          const image = await createDrawingImage(file, controller.signal);
+          source = image;
+          await decoder.prepare(image);
+          if (disposed || controller.signal.aborted || media?.abort !== controller)
+            return;
+          store.add({ ...preview, image });
+          store.select(preview.id);
+        } catch (error) {
+          if (!controller.signal.aborted) {
+            console.warn("[super-chart] Image drawing was not saved", error);
+            element.dispatchEvent(new win.CustomEvent("drawingerror", { bubbles: true, detail: error }));
+          }
+        } finally {
+          if (imageRenderer === void 0)
+            decoder.dispose();
+          else if (source !== void 0 && !store.getSnapshot().drawings.some((item) => item.image === source))
+            decoder.release(source);
+          finish();
+        }
+      })();
+    }, { once: true });
+    input.click();
+  };
+  const completeWave = () => {
+    if (placement?.preview.type !== "any-waves")
+      return;
+    const value = placement.preview, committed = value.anchors.slice(0, placement.nextAnchor).filter((point2, i, all) => i === 0 || point2.timestamp !== all[i - 1].timestamp || point2.price !== all[i - 1].price);
+    if (committed.length < 2)
+      return;
+    placement = null;
+    store.add({ ...value, anchors: committed });
+    store.select(value.id);
+    onPreview(null);
+    finishTool();
+  };
+  const updatePreview = (event) => {
+    const value = drag, currentFrame = frame();
+    if (value === null)
+      return false;
+    if (value.preview.locked)
+      return true;
+    if (currentFrame === null) {
+      cancel();
+      return false;
+    }
+    if (!current(value)) {
+      cancel();
+      return false;
+    }
+    const p = point(event), dx = p.x - value.start.x, dy = p.y - value.start.y;
+    if (!Number.isFinite(dx) || !Number.isFinite(dy))
+      return false;
+    if (Math.hypot(dx, dy) > 2)
+      value.moved = true;
+    if (value.original !== null && !value.moved)
+      return true;
+    let anchors;
+    if (value.original === null) {
+      const next = currentFrame.unproject(p.x, p.y);
+      if (!anchor(next))
+        return false;
+      anchors = drawingAnchorCount(value.preview.type) === 1 ? [next] : setPlacementAnchor(value.preview, value.anchorIndex ?? 1, next).anchors;
+    } else if (value.anchorIndex !== null) {
+      const next = currentFrame.unproject(p.x, p.y);
+      if (!anchor(next))
+        return false;
+      anchors = value.original.anchors.map((item, i) => i === value.anchorIndex ? next : item);
+    } else {
+      const moved = [];
+      for (const projected of value.projected) {
+        const x = projected.x + dx, y = projected.y + dy;
+        const next = currentFrame.unproject(x, y);
+        if (!anchor(next))
+          return false;
+        const checked = currentFrame.project(next.timestamp, next.price);
+        if (checked === null || Math.abs(checked.x - x) > 0.5 || Math.abs(checked.y - y) > 0.5)
+          return false;
+        moved.push(next);
+      }
+      anchors = moved;
+    }
+    value.preview = { ...value.preview, anchors };
+    onPreview(value.preview);
+    return true;
+  };
+  const on = (type, listener) => {
+    element.addEventListener(type, listener, { capture: true, passive: false, signal: abort.signal });
+  };
+  on("pointerdown", (event) => {
+    const e = event;
+    if (editor !== null && editable(e.target))
+      return;
+    if (media !== null) {
+      consume(e);
+      return;
+    }
+    if (drag !== null) {
+      consume(e);
+      return;
+    }
+    if (e.button !== 0 || editable(e.target))
+      return;
+    if (tool !== null) {
+      consume(e);
+      onInteractionStart?.();
+    }
+    const currentFrame = frame();
+    if (currentFrame === null)
+      return;
+    const p = point(e), g = currentFrame.model.geometry;
+    const inside = p.x >= g.left && p.x <= g.right && p.y >= g.top && p.y <= g.bottom;
+    if (tool !== null) {
+      if (!inside)
+        return;
+      const first = currentFrame.unproject(p.x, p.y);
+      if (!anchor(first))
+        return;
+      let preview, nextAnchor = null;
+      if (placement !== null) {
+        nextAnchor = placement.nextAnchor;
+        preview = setPlacementAnchor(placement.preview, nextAnchor, first);
+        placement = null;
+      } else {
+        let id;
+        do {
+          id = `drawing-${Date.now().toString(36)}-${(++nextId).toString(36)}`;
+        } while (store.getSnapshot().drawings.some((item) => item.id === id));
+        preview = { id, type: tool, anchors: Array.from({ length: drawingAnchorCount(tool) }, () => first), locked: false, hidden: false };
+      }
+      drag = { pointerId: e.pointerId, start: p, original: null, preview, projected: [], anchorIndex: nextAnchor, moved: false };
+      onPreview(preview);
+    } else {
+      const hit = inside ? store.hitTest(p, currentFrame.project, g, e.pointerType === "touch" ? 10 : 6, currentFrame.drawingContext) : null;
+      if (hit === null) {
+        store.select(null);
+        return;
+      }
+      const original = store.getSnapshot().drawings.find((item) => item.id === hit.id);
+      if (original === void 0)
+        return;
+      store.select(hit.id);
+      if (original.locked)
+        return;
+      consume(e);
+      onInteractionStart?.();
+      const projected = [];
+      for (const item of original.anchors) {
+        const position = currentFrame.project(item.timestamp, item.price);
+        if (position === null || !Number.isFinite(position.x) || !Number.isFinite(position.y))
+          return;
+        projected.push({ ...position });
+      }
+      drag = { pointerId: e.pointerId, start: p, original, preview: original, projected, anchorIndex: hit.anchorIndex, moved: false };
+    }
+    try {
+      element.setPointerCapture(e.pointerId);
+    } catch {
+      cancel();
+      return;
+    }
+    element.focus({ preventScroll: true });
+  });
+  on("pointermove", (event) => {
+    const e = event;
+    if (drag === null) {
+      if (placement === null || editable(e.target))
+        return;
+      const p = point(e), next = frame()?.unproject(p.x, p.y);
+      if (next !== void 0 && anchor(next)) {
+        placement.preview = setPlacementAnchor(placement.preview, placement.nextAnchor, next);
+        onPreview(placement.preview);
+      }
+      consume(e);
+      return;
+    }
+    consume(e);
+    if (e.pointerId === drag.pointerId)
+      updatePreview(e);
+  });
+  on("pointerup", (event) => {
+    if (drag === null)
+      return;
+    const e = event;
+    consume(e);
+    if (e.pointerId !== drag.pointerId)
+      return;
+    if (!updatePreview(e)) {
+      cancel();
+      return;
+    }
+    const value = drag;
+    if (value === null)
+      return;
+    drag = null;
+    release(value.pointerId);
+    if (value.original === null && value.preview.type === "any-waves") {
+      const nextAnchor = value.anchorIndex === null ? value.moved ? 2 : 1 : value.anchorIndex + 1;
+      if (nextAnchor >= 256) {
+        store.add(value.preview);
+        store.select(value.preview.id);
+        onPreview(null);
+        finishTool();
+        return;
+      }
+      const anchors = value.preview.anchors.slice(0, nextAnchor);
+      anchors.push(anchors[anchors.length - 1]);
+      placement = { preview: { ...value.preview, anchors }, nextAnchor };
+      onPreview(placement.preview);
+      return;
+    }
+    const count = drawingAnchorCount(value.preview.type);
+    if (value.original === null && count > 2 && value.anchorIndex !== count - 1) {
+      placement = { preview: value.preview, nextAnchor: value.anchorIndex === null ? value.moved ? 2 : 1 : value.anchorIndex + 1 };
+      onPreview(value.preview);
+      return;
+    }
+    if (value.original === null && drawingUsesText(value.preview.type)) {
+      editText(value.preview, null);
+      return;
+    }
+    if (value.original === null && value.preview.type === "image") {
+      if (value.moved)
+        insertImage(value.preview);
+      else
+        onPreview(null);
+      return;
+    }
+    try {
+      if (value.original === null) {
+        if (!value.moved && drawingAnchorCount(value.preview.type) === 2)
+          return;
+        store.add(value.preview);
+        store.select(value.preview.id);
+        finishTool();
+      } else if (value.moved && !value.original.locked && current(value))
+        store.update(value.original.id, { anchors: value.preview.anchors });
+    } finally {
+      onPreview(null);
+    }
+  });
+  on("dblclick", (event) => {
+    if (placement?.preview.type === "any-waves") {
+      consume(event);
+      completeWave();
+      return;
+    }
+    if (tool !== null || drag !== null || placement !== null || editable(event.target))
+      return;
+    const currentFrame = frame();
+    if (currentFrame === null)
+      return;
+    const p = point(event), hit = store.hitTest(p, currentFrame.project, currentFrame.model.geometry, 6, currentFrame.drawingContext);
+    const original = store.getSnapshot().drawings.find((item) => item.id === hit?.id);
+    if (original === void 0 || !drawingUsesText(original.type) || original.locked)
+      return;
+    consume(event);
+    store.select(original.id);
+    onInteractionStart?.();
+    editText(original, original);
+  });
+  on("pointercancel", (event) => {
+    if (drag !== null && event.pointerId === drag.pointerId) {
+      consume(event);
+      cancel();
+    }
+  });
+  on("lostpointercapture", (event) => {
+    if (drag !== null && event.pointerId === drag.pointerId)
+      cancel();
+  });
+  on("blur", (event) => {
+    if (media !== null)
+      return;
+    const next = event.relatedTarget;
+    if (!(next instanceof win.Node) || !element.contains(next))
+      cancel();
+  });
+  win.addEventListener("blur", () => {
+    if (media === null)
+      cancel();
+  }, { signal: abort.signal });
+  doc.addEventListener("visibilitychange", () => {
+    if (doc.hidden && media === null)
+      cancel();
+  }, { signal: abort.signal });
+  on("keydown", (event) => {
+    const e = event, active = doc.activeElement;
+    if (editable(e.target) || e.isComposing || active === null || !element.contains(active))
+      return;
+    if (e.key === "Enter" && placement?.preview.type === "any-waves") {
+      consume(e);
+      completeWave();
+      return;
+    }
+    if (e.key === "Escape" && (drag !== null || placement !== null || tool !== null)) {
+      consume(e);
+      cancel();
+      finishTool();
+      return;
+    }
+    const snapshot = store.getSnapshot(), modified = e.ctrlKey || e.metaKey;
+    if (modified && !e.altKey) {
+      const key = e.key.toLowerCase(), redo = key === "z" && e.shiftKey || key === "y" && !e.shiftKey;
+      const undo = key === "z" && !e.shiftKey;
+      if (redo && snapshot.canRedo || undo && snapshot.canUndo) {
+        consume(e);
+        cancel();
+        freehand.setTool(null);
+        if (redo)
+          store.redo();
+        else
+          store.undo();
+      }
+    } else if (!e.altKey && !e.shiftKey && (e.key === "Delete" || e.key === "Backspace")) {
+      const selected = snapshot.drawings.find((item) => item.id === snapshot.selectedId);
+      if (selected !== void 0 && !selected.locked) {
+        consume(e);
+        cancel();
+        store.remove(selected.id);
+      }
+    }
+  });
+  const unsubscribe = store.subscribe(() => {
+    if (drag !== null && !current(drag))
+      cancel();
+    if (editor?.original !== null && editor?.original !== void 0 && store.getSnapshot().drawings.find((item) => item.id === editor?.original?.id) !== editor.original)
+      editor.close();
+  });
+  return {
+    setTool: (next) => {
+      if (disposed)
+        return;
+      cancel();
+      freehand.setTool(next === "brush" || next === "highlighter" ? next : null);
+      tool = next === "brush" || next === "highlighter" ? null : next;
+    },
+    dispose: () => {
+      if (disposed)
+        return;
+      disposed = true;
+      abort.abort();
+      unsubscribe();
+      cancel();
+      freehand.dispose();
+      tool = null;
+    }
+  };
+}
+
+// packages/bindings/web/src/drawingRenderer.ts
+function paintDrawings(ctx, geometries, selectedId, options = {}) {
+  const lineWidth = options.lineWidth !== void 0 && Number.isFinite(options.lineWidth) && options.lineWidth > 0 ? options.lineWidth : 1.5;
+  const radius = options.handleRadius !== void 0 && Number.isFinite(options.handleRadius) && options.handleRadius > 0 ? options.handleRadius : 4;
+  const fillOpacity = options.fillOpacity !== void 0 && Number.isFinite(options.fillOpacity) ? Math.max(0, Math.min(1, options.fillOpacity)) : 0.1;
+  ctx.save();
+  try {
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+    const bounds = options.bounds;
+    if (bounds !== void 0) {
+      if (![bounds.left, bounds.right, bounds.top, bounds.bottom].every(Number.isFinite) || bounds.left >= bounds.right || bounds.top >= bounds.bottom)
+        return;
+      ctx.beginPath();
+      ctx.rect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
+      ctx.clip();
+    }
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.setLineDash([]);
+    ctx.font = options.font ?? "11px system-ui";
+    ctx.textBaseline = "bottom";
+    for (const geometry of geometries) {
+      const selected = geometry.id === selectedId;
+      const color = selected ? options.selectedColor ?? "#c3d5ff" : options.color ?? "#8bafff";
+      ctx.strokeStyle = color;
+      for (const primitive of geometry.primitives) {
+        if (primitive.kind === "image") {
+          const status = options.imageRenderer?.paint(ctx, primitive.source, primitive.bounds, primitive.clip, options.onInvalidate);
+          if (options.imageRenderer === void 0 || status === "unavailable") {
+            ctx.save();
+            try {
+              const box = primitive.bounds, clip = primitive.clip;
+              ctx.beginPath();
+              ctx.rect(clip.left, clip.top, clip.right - clip.left, clip.bottom - clip.top);
+              ctx.clip();
+              ctx.strokeRect(box.left, box.top, box.right - box.left, box.bottom - box.top);
+              ctx.fillStyle = color;
+              ctx.font = "12px system-ui";
+              ctx.textAlign = "left";
+              ctx.textBaseline = "top";
+              ctx.fillText("Image unavailable", box.left + 4, box.top + 4, Math.max(1, box.right - box.left - 8));
+            } finally {
+              ctx.restore();
+            }
+          }
+        } else if (primitive.kind === "stroke") {
+          ctx.save();
+          try {
+            const clip = primitive.clip;
+            ctx.beginPath();
+            ctx.rect(clip.left, clip.top, clip.right - clip.left, clip.bottom - clip.top);
+            ctx.clip();
+            ctx.lineWidth = primitive.width;
+            ctx.globalAlpha = primitive.opacity;
+            ctx.beginPath();
+            primitive.points.forEach((point, i) => {
+              if (i === 0)
+                ctx.moveTo(point.x, point.y);
+              else
+                ctx.lineTo(point.x, point.y);
+            });
+            ctx.stroke();
+          } finally {
+            ctx.restore();
+          }
+        }
+      }
+      for (const primitive of geometry.primitives) {
+        if (primitive.kind !== "rect" && primitive.kind !== "polygon")
+          continue;
+        ctx.fillStyle = options.fillColor ?? color;
+        ctx.globalAlpha = fillOpacity;
+        if (primitive.kind === "rect")
+          ctx.fillRect(primitive.from.x, primitive.from.y, primitive.to.x - primitive.from.x, primitive.to.y - primitive.from.y);
+        else {
+          ctx.beginPath();
+          primitive.points.forEach((point, index) => {
+            if (index === 0)
+              ctx.moveTo(point.x, point.y);
+            else
+              ctx.lineTo(point.x, point.y);
+          });
+          ctx.closePath();
+          ctx.fill();
+        }
+      }
+      for (const primitive of geometry.primitives) {
+        if (primitive.kind !== "ellipse")
+          continue;
+        ctx.save();
+        try {
+          const clip = primitive.clip;
+          ctx.beginPath();
+          ctx.rect(clip.left, clip.top, clip.right - clip.left, clip.bottom - clip.top);
+          ctx.clip();
+          ctx.beginPath();
+          ctx.ellipse(primitive.center.x, primitive.center.y, primitive.radiusX, primitive.radiusY, 0, 0, Math.PI * 2);
+          ctx.fillStyle = options.fillColor ?? color;
+          ctx.globalAlpha = fillOpacity;
+          ctx.fill();
+          ctx.globalAlpha = 1;
+          ctx.stroke();
+        } finally {
+          ctx.restore();
+        }
+      }
+      ctx.globalAlpha = 1;
+      ctx.beginPath();
+      for (const primitive of geometry.primitives) {
+        if (primitive.kind !== "line")
+          continue;
+        ctx.moveTo(primitive.from.x, primitive.from.y);
+        ctx.lineTo(primitive.to.x, primitive.to.y);
+      }
+      ctx.stroke();
+      ctx.fillStyle = color;
+      for (const primitive of geometry.primitives) {
+        if (primitive.kind === "label") {
+          ctx.save();
+          try {
+            const box = primitive.bounds, clip = primitive.clip;
+            ctx.beginPath();
+            ctx.rect(clip.left, clip.top, clip.right - clip.left, clip.bottom - clip.top);
+            ctx.clip();
+            if (primitive.boxed !== false) {
+              ctx.fillStyle = options.handleFill ?? "#10151d";
+              ctx.globalAlpha = 0.92;
+              ctx.fillRect(box.left, box.top, box.right - box.left, box.bottom - box.top);
+              ctx.globalAlpha = 1;
+              ctx.strokeRect(box.left, box.top, box.right - box.left, box.bottom - box.top);
+            }
+            ctx.beginPath();
+            ctx.rect(box.left, box.top, box.right - box.left, box.bottom - box.top);
+            ctx.clip();
+            ctx.fillStyle = color;
+            ctx.font = "12px system-ui";
+            ctx.textAlign = "left";
+            ctx.textBaseline = "top";
+            const lines = primitive.price === void 0 ? primitive.lines : [options.formatPrice?.(primitive.price) ?? String(primitive.price)];
+            lines.forEach((text2, index) => ctx.fillText(text2, box.left + 6, box.top + 4 + index * 16, box.right - box.left - 12));
+          } finally {
+            ctx.restore();
+          }
+          continue;
+        }
+        if (primitive.kind !== "text")
+          continue;
+        ctx.textAlign = primitive.align;
+        const text = primitive.price === void 0 ? primitive.text : `${primitive.text}  ${options.formatPrice?.(primitive.price) ?? String(primitive.price)}`;
+        ctx.fillText(text, primitive.position.x, primitive.position.y - 3);
+      }
+      if (!selected || geometry.locked)
+        continue;
+      ctx.fillStyle = options.handleFill ?? "#10151d";
+      ctx.beginPath();
+      for (const handle of geometry.handles) {
+        ctx.moveTo(handle.point.x + radius, handle.point.y);
+        ctx.arc(handle.point.x, handle.point.y, radius, 0, Math.PI * 2);
+      }
+      ctx.fill();
+      ctx.stroke();
+    }
+  } finally {
+    ctx.restore();
+  }
+}
+
+// packages/bindings/web/src/paneInteraction.ts
+import { zoomContinuousViewport } from "@supersolutions/super-chart-core";
+function attachPaneInteraction(element, frame, layout, setLayout, cancelNavigation, view, scheduler) {
+  const win = element.ownerDocument.defaultView;
+  if (win === null)
+    return () => {
+    };
+  const frames = scheduler ?? { request: (callback) => win.requestAnimationFrame(callback), cancel: (id) => win.cancelAnimationFrame(id) };
+  const abort = new win.AbortController(), originalCursor = element.style.cursor;
+  let drag = null, pending = null;
+  let raf = null, rectFrame = null, rect = null;
+  const invalidateRect = () => {
+    rect = null;
+  };
+  const bounds = () => {
+    if (rect === null)
+      rect = element.getBoundingClientRect();
+    if (rectFrame === null)
+      rectFrame = frames.request(() => {
+        rectFrame = null;
+        rect = null;
+      });
+    return rect;
+  };
+  const point = (event) => {
+    const r = bounds();
+    return { x: event.clientX - r.left, y: event.clientY - r.top };
+  };
+  const area = (value, x, y) => {
+    for (let i = 1; i < value.panes.length; i++)
+      if (Math.abs(y - value.panes[i].top) <= 5)
+        return i;
+    const g = value.model.geometry;
+    if (x >= 0 && x < g.left && y >= g.top && y <= g.bottom)
+      return null;
+    const last = value.panes[value.panes.length - 1];
+    if (view !== void 0 && last !== void 0 && x >= g.left && x <= g.right && y >= last.top + last.frame.model.geometry.bottom && y <= last.top + last.height)
+      return "time";
+    return void 0;
+  };
+  const stop = () => {
+    if (raf !== null)
+      frames.cancel(raf);
+    raf = null;
+    pending = null;
+    const previous = drag;
+    drag = null;
+    element.style.cursor = originalCursor;
+    if (previous?.area === "time")
+      view?.endNavigation();
+    if (previous !== null && element.hasPointerCapture(previous.pointer))
+      element.releasePointerCapture(previous.pointer);
+  };
+  const applyPending = () => {
+    const p = pending;
+    pending = null;
+    if (p === null || drag === null)
+      return;
+    const value = frame(), r = bounds(), initial = drag.initial;
+    if (value === null || r.width !== drag.width || r.height !== drag.height || value.panes.map((pane) => pane.id).join("\n") !== initial.panes.map((pane) => pane.id).join("\n")) {
+      stop();
+      return;
+    }
+    if (drag.area === "time") {
+      if (view === void 0 || view.getSnapshot().viewport !== drag.observed || view.getSnapshot().length !== initial.snapshot.length) {
+        stop();
+        return;
+      }
+      const g = initial.model.geometry, anchor = Math.max(0, Math.min(1, (drag.x - g.left) / g.plotWidth));
+      const factor = Math.exp(Math.max(-4, Math.min(4, (p.x - drag.x) / g.plotWidth * 3)));
+      view.setViewport(zoomContinuousViewport(initial.snapshot.viewport, initial.snapshot.length, factor, anchor, view.getLimits()));
+      drag.observed = view.getSnapshot().viewport;
+      return;
+    }
+    if (value.snapshot.viewport !== initial.snapshot.viewport) {
+      stop();
+      return;
+    }
+    if (typeof drag.area === "number") {
+      const before = initial.panes[drag.area - 1], after = initial.panes[drag.area];
+      const minimum = Math.min(48, drag.height / initial.panes.length);
+      const delta = Math.max(minimum - before.height, Math.min(after.height - minimum, p.y - drag.y));
+      const weights = /* @__PURE__ */ Object.create(null);
+      for (const pane of initial.panes)
+        weights[pane.id] = Math.max(1e-9, pane.height + (pane === before ? delta : pane === after ? -delta : 0));
+      setLayout({ paneWeights: weights });
+    } else {
+      const scale = initial.panes[0].scale, g = initial.model.geometry;
+      const factor = Math.exp(Math.max(-4, Math.min(4, (p.y - drag.y) / g.plotHeight * 2)));
+      const a = scale.value(drag.y + (g.top - drag.y) * factor), b = scale.value(drag.y + (g.bottom - drag.y) * factor);
+      if (Number.isFinite(a) && Number.isFinite(b) && a !== b && (layout().priceScale?.mode !== "log" || Math.min(a, b) > 0)) {
+        setLayout({ priceScale: { ...layout().priceScale, range: [Math.min(a, b), Math.max(a, b)] } });
+      }
+    }
+  };
+  const schedule = () => {
+    if (raf === null)
+      raf = frames.request(() => {
+        raf = null;
+        applyPending();
+      });
+  };
+  const consume = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  element.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || !event.isPrimary || drag !== null)
+      return;
+    const value = frame(), p = point(event);
+    if (value === null || value.snapshot.length === 0)
+      return;
+    const hit = area(value, p.x, p.y);
+    if (hit === void 0)
+      return;
+    consume(event);
+    cancelNavigation();
+    if (hit === "time")
+      view?.beginNavigation();
+    const r = bounds();
+    drag = { pointer: event.pointerId, x: p.x, y: p.y, initial: value, width: r.width, height: r.height, area: hit, observed: value.snapshot.viewport };
+    element.setPointerCapture(event.pointerId);
+    element.focus({ preventScroll: true });
+  }, { signal: abort.signal, passive: false });
+  element.addEventListener("pointermove", (event) => {
+    const coalesced = event.getCoalescedEvents?.();
+    const latest = coalesced === void 0 || coalesced.length === 0 ? event : coalesced[coalesced.length - 1];
+    const p = point(latest);
+    if (drag === null) {
+      const value = frame(), hit = value === null ? void 0 : area(value, p.x, p.y);
+      element.style.cursor = hit === void 0 ? originalCursor : hit === "time" ? "ew-resize" : "ns-resize";
+      return;
+    }
+    if (event.pointerId !== drag.pointer)
+      return;
+    consume(event);
+    pending = p;
+    schedule();
+  }, { signal: abort.signal, passive: false });
+  element.addEventListener("pointerup", (event) => {
+    if (event.pointerId !== drag?.pointer)
+      return;
+    consume(event);
+    pending = point(event);
+    applyPending();
+    stop();
+  }, { signal: abort.signal });
+  element.addEventListener("pointercancel", stop, { signal: abort.signal });
+  element.addEventListener("lostpointercapture", (event) => {
+    if (event.pointerId === drag?.pointer)
+      stop();
+  }, { signal: abort.signal });
+  element.addEventListener("dblclick", (event) => {
+    const value = frame(), p = point(event);
+    if (value === null)
+      return;
+    const hit = area(value, p.x, p.y);
+    if (hit === void 0)
+      return;
+    consume(event);
+    stop();
+    cancelNavigation();
+    if (hit === "time")
+      view?.resetViewport();
+    else
+      setLayout(hit === null ? { priceScale: { ...layout().priceScale, range: void 0 } } : { paneWeights: void 0 });
+  }, { signal: abort.signal });
+  element.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && drag !== null) {
+      consume(event);
+      stop();
+    }
+  }, { signal: abort.signal });
+  element.addEventListener("blur", stop, { signal: abort.signal });
+  win.addEventListener("blur", stop, { signal: abort.signal });
+  win.addEventListener("resize", invalidateRect, { signal: abort.signal });
+  element.ownerDocument.addEventListener("scroll", invalidateRect, { signal: abort.signal, capture: true, passive: true });
+  element.ownerDocument.addEventListener("visibilitychange", () => {
+    if (element.ownerDocument.hidden)
+      stop();
+  }, { signal: abort.signal });
+  return () => {
+    abort.abort();
+    stop();
+    if (rectFrame !== null)
+      frames.cancel(rectFrame);
+    rectFrame = null;
+    rect = null;
+  };
+}
+
+// packages/bindings/web/src/chart.ts
+function copyLayout(layout) {
+  return {
+    ...layout,
+    ...layout.priceScale === void 0 ? {} : {
+      priceScale: {
+        ...layout.priceScale,
+        ...layout.priceScale.range === void 0 ? {} : { range: [...layout.priceScale.range] }
+      }
+    },
+    ...layout.paneWeights === void 0 ? {} : { paneWeights: { ...layout.paneWeights } }
+  };
+}
+var EngineChart = class {
+  series = new RealtimeSeries({ referenceIndicators: false });
+  /** Loader boundary. Data reads return copies and are not used by the render hot path. */
+  dataPort = Object.freeze({
+    applyNewData: (bars, more) => {
+      this.setData(bars, more);
+    },
+    applyNormalizedData: (bars, more) => {
+      this.assertLive();
+      this.validateBars(bars, this.layout, bars[0]?.close, true);
+      this.series.applyNewData(bars, more);
+    },
+    truncateData: (length, expectedLength, expectedLastTimestamp) => {
+      this.assertLive();
+      return this.series.truncateData(length, expectedLength, expectedLastTimestamp);
+    },
+    applyMoreData: (bars, more) => {
+      this.prependData(bars, more);
+    },
+    updateData: (bar) => {
+      this.update(bar);
+    },
+    updateDataBatch: (bars, more) => {
+      this.updateBatch(bars, more);
+    },
+    getDataList: () => this.getBars(),
+    getLastTimestamp: () => {
+      this.assertLive();
+      return this.series.getLastTimestamp();
+    },
+    loadMore: (callback) => {
+      this.assertLive();
+      this.series.loadMore(callback);
+    }
+  });
+  view;
+  drawings = new DrawingStore2();
+  indicators = new EngineIndicators();
+  doc;
+  win;
+  root;
+  canvas;
+  cursorCanvas;
+  drawingCanvas;
+  drawingContext;
+  drawingImages;
+  context;
+  cursorContext;
+  resizeObserver;
+  abort;
+  unsubscribers = [];
+  stopGestures;
+  drawingInput;
+  onInspect;
+  inputs = /* @__PURE__ */ new Map();
+  layers = /* @__PURE__ */ new Set();
+  indicatorListeners = /* @__PURE__ */ new Set();
+  indicatorNoticeQueued = false;
+  inputId = 0;
+  draining = false;
+  preview = null;
+  frame = null;
+  frameId = 0;
+  cursorX = null;
+  width = 0;
+  height = 0;
+  ratio = 0;
+  geometryDirty = true;
+  paintDirty = true;
+  drawingDirty = true;
+  cursorDirty = true;
+  disposed = false;
+  invalidateDrawings = () => {
+    if (!this.disposed) {
+      this.drawingDirty = true;
+      this.schedule();
+    }
+  };
+  viewportOptions;
+  resolution;
+  densityWidth = -1;
+  layout;
+  renderOptions;
+  dprQuery = null;
+  counters = { frames: 0, geometryBuilds: 0, plotPaints: 0, drawingPaints: 0, cursorPaints: 0, lastFrameMs: 0, firstDataFrameMs: 0, maxFrameMs: 0 };
+  constructor(host, options = {}) {
+    this.doc = host.ownerDocument;
+    if (this.doc.defaultView === null)
+      throw new Error("Chart host needs an active document");
+    this.win = this.doc.defaultView;
+    this.drawingImages = new DrawingImageRenderer(async (blob) => await this.win.createImageBitmap(blob));
+    this.abort = new this.win.AbortController();
+    this.layout = copyLayout(options.layout ?? {});
+    validateEngineLayout(this.layout);
+    validatePriceScale(this.layout.priceScale ?? {});
+    this.viewportOptions = { minBars: 20, maxBars: 1200, rightPaddingBars: 12, ...options.viewport };
+    viewportLimitsForWidth(0, this.viewportOptions);
+    this.resolution = { ...options.resolution };
+    if (this.resolution.maxPixelRatio !== void 0 && (!Number.isFinite(this.resolution.maxPixelRatio) || this.resolution.maxPixelRatio <= 0))
+      throw new RangeError("Pixel ratio cap must be positive and finite");
+    if (this.resolution.maxCanvasPixels !== void 0 && (!Number.isSafeInteger(this.resolution.maxCanvasPixels) || this.resolution.maxCanvasPixels < 1))
+      throw new RangeError("Canvas pixel budget must be a positive safe integer");
+    this.renderOptions = { ...options.render };
+    this.validateRender(this.renderOptions);
+    for (const spec of options.indicators ?? [{ name: "MA", params: [20] }, { name: "EMA", params: [21] }])
+      this.indicators.add(spec);
+    this.view = new RealtimeView(this.series, { count: options.count, mode: options.mode, continuous: true, limits: this.viewportOptions });
+    this.onInspect = options.onInspect;
+    this.root = this.doc.createElement("div");
+    this.root.style.cssText = "position:relative;width:100%;height:100%;min-height:0;overflow:hidden;touch-action:none;";
+    this.root.tabIndex = 0;
+    this.root.setAttribute("role", "group");
+    this.root.setAttribute("aria-label", "Chart. Drag to pan, pinch or wheel to zoom; Home follows the latest candle.");
+    this.canvas = this.doc.createElement("canvas");
+    this.drawingCanvas = this.doc.createElement("canvas");
+    this.drawingCanvas.width = this.drawingCanvas.height = 1;
+    this.cursorCanvas = this.doc.createElement("canvas");
+    for (const canvas of [this.canvas, this.drawingCanvas, this.cursorCanvas]) {
+      canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+      canvas.setAttribute("aria-hidden", "true");
+      this.root.append(canvas);
+    }
+    const context = this.canvas.getContext("2d"), drawingContext = this.drawingCanvas.getContext("2d"), cursorContext = this.cursorCanvas.getContext("2d");
+    if (context === null || drawingContext === null || cursorContext === null) {
+      this.view.dispose();
+      throw new Error("Canvas 2D is unavailable");
+    }
+    this.context = context;
+    this.drawingContext = drawingContext;
+    this.cursorContext = cursorContext;
+    host.append(this.root);
+    this.unsubscribers.push(this.series.subscribe((change) => {
+      this.indicators.invalidate(change);
+      if (change.kind !== "availability") {
+        if (this.indicators.hasCustom() || this.layers.size > 0)
+          this.geometryDirty = true;
+        if (this.drawings.getSnapshot().drawings.length > 0)
+          this.drawingDirty = true;
+        if (this.geometryDirty || this.drawingDirty)
+          this.schedule();
+      }
+    }));
+    this.unsubscribers.push(this.view.subscribe(() => {
+      const snapshot = this.view.getSnapshot(), previous = this.frame?.snapshot;
+      if (previous === void 0 || snapshot.viewport !== previous.viewport || snapshot.bars !== previous.bars || snapshot.ma20 !== previous.ma20 || snapshot.ema21 !== previous.ema21) {
+        this.geometryDirty = true;
+      }
+      this.cursorDirty = true;
+      this.schedule();
+    }));
+    this.unsubscribers.push(this.drawings.subscribe(() => {
+      this.retainDrawingImages();
+      this.drawingDirty = true;
+      this.schedule();
+    }));
+    const frameScheduler = {
+      request: (callback) => {
+        const id = ++this.inputId;
+        this.inputs.set(id, callback);
+        this.schedule();
+        return id;
+      },
+      cancel: (id) => {
+        this.inputs.delete(id);
+      }
+    };
+    this.unsubscribers.push(attachPaneInteraction(this.root, () => this.frame, () => this.layout, (options2) => this.setLayout(options2), () => this.stopGestures.cancelInput(), this.view, frameScheduler));
+    this.drawingInput = attachDrawingInteraction(this.root, this.drawings, () => this.frame, (preview) => {
+      this.preview = preview;
+      this.drawingDirty = true;
+      this.schedule();
+    }, options.onToolComplete, () => this.stopGestures.cancelInput(), this.drawingImages);
+    this.stopGestures = attachEngineGestures(this.root, this.view, () => this.frame?.model.geometry ?? null, (x) => {
+      if (this.cursorX !== x) {
+        this.cursorX = x;
+        this.cursorDirty = true;
+        this.schedule();
+      }
+    }, {
+      inertia: options.inertia !== false,
+      frameScheduler
+    });
+    this.resizeObserver = new this.win.ResizeObserver(() => this.schedule());
+    this.resizeObserver.observe(this.root);
+    this.doc.addEventListener("visibilitychange", () => {
+      if (this.doc.hidden && this.frameId !== 0) {
+        this.win.cancelAnimationFrame(this.frameId);
+        this.frameId = 0;
+      } else
+        this.schedule();
+    }, { signal: this.abort.signal });
+    this.watchPixelRatio();
+    this.schedule();
+  }
+  /** Millisecond OHLC input is normalized once at the data boundary. */
+  setData(bars, more = false) {
+    this.assertLive();
+    const normalized = normalizeBars(bars, 1).bars;
+    this.validateBars(normalized, this.layout, normalized[0]?.close);
+    this.series.applyNewData(normalized, more);
+  }
+  update(bar) {
+    this.assertLive();
+    const normalized = normalizeBar(bar, 1);
+    if (normalized === null)
+      throw new TypeError("Invalid OHLC candle");
+    this.validateBars([normalized], this.layout, this.updateReference([normalized]));
+    this.series.updateData(normalized);
+  }
+  prependData(bars, more = false) {
+    this.assertLive();
+    const normalized = normalizeBars(bars, 1).bars, first = this.series.getDataList()[0];
+    const base = first === void 0 || normalized[0] !== void 0 && normalized[0].timestamp < first.timestamp ? normalized[0]?.close : first.close;
+    this.validateBars(normalized, this.layout, base);
+    this.series.applyMoreData(normalized, more);
+  }
+  updateBatch(bars, more) {
+    this.assertLive();
+    const normalized = normalizeBars(bars, 1).bars;
+    this.validateBars(normalized, this.layout, this.updateReference(normalized));
+    this.series.updateDataBatch(normalized, more);
+  }
+  registerIndicator(definition) {
+    this.assertLive();
+    this.indicators.register(definition);
+    this.notifyIndicators();
+  }
+  unregisterIndicator(name, expectedCalculate) {
+    this.assertLive();
+    const removed = this.indicators.unregister(name, expectedCalculate);
+    if (removed)
+      this.notifyIndicators();
+    return removed;
+  }
+  addIndicator(spec) {
+    this.assertLive();
+    const id = this.indicators.add(spec);
+    this.geometryDirty = true;
+    this.schedule();
+    this.notifyIndicators();
+    return id;
+  }
+  removeIndicator(id) {
+    this.assertLive();
+    const removed = this.indicators.remove(id);
+    if (removed) {
+      this.geometryDirty = true;
+      this.schedule();
+      this.notifyIndicators();
+    }
+    return removed;
+  }
+  updateIndicator(id, changes) {
+    this.assertLive();
+    const updated = this.indicators.update(id, changes);
+    if (updated) {
+      this.geometryDirty = true;
+      this.schedule();
+      this.notifyIndicators();
+    }
+    return updated;
+  }
+  listIndicators() {
+    return this.indicators.list();
+  }
+  getRegisteredIndicatorNames() {
+    return this.indicators.registeredNames();
+  }
+  validateIndicatorReplacement(specs) {
+    this.indicators.validateReplacement(specs);
+  }
+  replaceIndicators(specs) {
+    this.assertLive();
+    this.indicators.replace(specs);
+    this.geometryDirty = true;
+    this.schedule();
+    this.notifyIndicators();
+  }
+  onIndicatorsChanged(listener) {
+    this.assertLive();
+    this.indicatorListeners.add(listener);
+    return () => {
+      this.indicatorListeners.delete(listener);
+    };
+  }
+  notifyIndicators() {
+    if (this.indicatorNoticeQueued || this.disposed)
+      return;
+    this.indicatorNoticeQueued = true;
+    this.win.queueMicrotask(() => {
+      this.indicatorNoticeQueued = false;
+      if (this.disposed)
+        return;
+      for (const listener of [...this.indicatorListeners]) {
+        if (!this.indicatorListeners.has(listener))
+          continue;
+        try {
+          listener();
+        } catch (error) {
+          this.win.console.warn("Indicator change listener failed", error);
+        }
+      }
+    });
+  }
+  setDrawingTool(tool) {
+    this.assertLive();
+    if (tool !== null && !DRAWING_TYPES.includes(tool))
+      throw new RangeError(`Unknown drawing tool ${JSON.stringify(tool)}`);
+    this.drawingInput.setTool(tool);
+  }
+  /** Own this layer until removal or chart disposal. It receives only revealed replay data. */
+  addLayer(layer) {
+    this.assertLive();
+    if (this.layers.has(layer))
+      throw new Error("Layer is already attached");
+    this.layers.add(layer);
+    this.geometryDirty = true;
+    this.schedule();
+    return () => {
+      if (!this.layers.delete(layer))
+        return;
+      this.paintDirty = true;
+      this.schedule();
+      layer.dispose?.();
+    };
+  }
+  setRenderOptions(options) {
+    this.assertLive();
+    const next = { ...this.renderOptions, ...options };
+    this.validateRender(next);
+    this.renderOptions = next;
+    this.paintDirty = true;
+    this.drawingDirty = true;
+    this.cursorDirty = true;
+    this.schedule();
+  }
+  setLayout(options) {
+    this.assertLive();
+    const next = copyLayout({ ...this.layout, ...options });
+    validateEngineLayout(next);
+    validatePriceScale(next.priceScale ?? {});
+    if ((next.priceScale?.mode ?? "linear") !== (this.layout.priceScale?.mode ?? "linear"))
+      this.validateBars(this.series.getDataList(), next);
+    this.layout = next;
+    this.geometryDirty = true;
+    this.schedule();
+  }
+  getMetrics() {
+    return { ...this.counters };
+  }
+  /** Copy only the requested tail; the feed/render hot path keeps its owned array. */
+  getBars(options = {}) {
+    this.assertLive();
+    if (Object.keys(options).some((key) => key !== "limit"))
+      throw new TypeError("Only the bars limit option is supported");
+    const limit = options.limit;
+    if (limit !== void 0 && (!Number.isSafeInteger(limit) || limit < 0))
+      throw new RangeError("Bars limit must be a nonnegative safe integer");
+    const bars = this.series.getDataList(), start = limit === void 0 ? 0 : Math.max(0, bars.length - limit);
+    const result = [];
+    for (let index = start; index < bars.length; index++)
+      result.push({ ...bars[index] });
+    return result;
+  }
+  getLastBar() {
+    this.assertLive();
+    const bars = this.series.getDataList(), bar = bars[bars.length - 1];
+    return bar === void 0 ? null : { ...bar };
+  }
+  getLayoutOptions() {
+    this.assertLive();
+    return copyLayout(this.layout);
+  }
+  getRenderOptions() {
+    this.assertLive();
+    return { ...this.renderOptions };
+  }
+  /** Validate all supplied state before replacing any live configuration. */
+  restoreConfiguration(configuration, data) {
+    this.assertLive();
+    if (configuration.mode !== "raw" && configuration.mode !== "heikin-ashi")
+      throw new TypeError("Invalid candle mode");
+    const render = { ...configuration.render }, layout = copyLayout(configuration.layout);
+    this.validateRender(render);
+    validateEngineLayout(layout);
+    validatePriceScale(layout.priceScale ?? {});
+    const bars = data === void 0 ? this.series.getDataList() : normalizeBars(data.bars, 1).bars;
+    this.validateBars(bars, layout, bars[0]?.close);
+    const drawings = new DrawingStore2({ historyLimit: 0 });
+    drawings.importJson(configuration.drawingsJson);
+    const normalizedDrawings = drawings.exportJson();
+    this.indicators.replace(configuration.indicators);
+    this.renderOptions = render;
+    this.layout = layout;
+    this.drawings.importJson(normalizedDrawings, { recordHistory: false });
+    try {
+      this.view.setMode(configuration.mode);
+      if (data !== void 0)
+        this.series.applyNewData(bars, data.more);
+    } finally {
+      this.geometryDirty = true;
+      this.drawingDirty = true;
+      this.cursorDirty = true;
+      this.schedule();
+      this.notifyIndicators();
+    }
+  }
+  /** Repaint owned layers after their model changes without rebuilding candle geometry. */
+  requestPaint() {
+    this.assertLive();
+    this.paintDirty = true;
+    this.schedule();
+  }
+  /** Decode local raster resources before an import commits retained drawings. */
+  async prepareDrawingImages(drawings) {
+    this.assertLive();
+    const release = this.holdDrawingImages(drawings);
+    const sources = new Set(drawings.flatMap((drawing) => drawing.image === void 0 ? [] : [drawing.image]));
+    try {
+      const results = await Promise.allSettled([...sources].map(async (source) => await this.drawingImages.prepare(source)));
+      const failed = results.find((result) => result.status === "rejected");
+      if (failed !== void 0)
+        throw failed.reason;
+      this.assertLive();
+    } finally {
+      release();
+    }
+  }
+  /** Hold decoded resources across asynchronous market loading; release in finally. */
+  holdDrawingImages(drawings) {
+    this.assertLive();
+    const release = this.drawingImages.hold(new Set(drawings.flatMap((drawing) => drawing.image === void 0 ? [] : [drawing.image])));
+    return () => {
+      release();
+      this.retainDrawingImages();
+      this.invalidateDrawings();
+    };
+  }
+  retainDrawingImages() {
+    const sources = new Set(this.drawings.getSnapshot().drawings.flatMap((drawing) => drawing.image === void 0 ? [] : [drawing.image]));
+    if (this.preview?.image !== void 0)
+      sources.add(this.preview.image);
+    this.drawingImages.retain(sources);
+  }
+  async snapshot() {
+    this.assertLive();
+    const drawings = this.drawings.getSnapshot().drawings;
+    const release = this.holdDrawingImages(drawings);
+    try {
+      await this.prepareDrawingImages(drawings);
+      if (this.drawings.getSnapshot().drawings !== drawings)
+        throw new Error("Drawings changed while preparing the image; capture again");
+      if (this.frameId !== 0) {
+        this.win.cancelAnimationFrame(this.frameId);
+        this.frameId = 0;
+      }
+      this.renderTick(this.win.performance.now());
+      this.assertLive();
+      if (this.width <= 0 || this.height <= 0)
+        throw new Error("Cannot capture a zero-sized chart");
+      if (this.frame === null || this.drawings.getSnapshot().drawings !== drawings)
+        throw new Error("Chart changed while preparing the image; capture again");
+      const copy = this.doc.createElement("canvas");
+      copy.width = this.canvas.width;
+      copy.height = this.canvas.height;
+      const ctx = copy.getContext("2d");
+      if (ctx === null)
+        throw new Error("Canvas 2D is unavailable");
+      ctx.drawImage(this.canvas, 0, 0);
+      ctx.setTransform(this.canvas.width / this.width, 0, 0, this.canvas.height / this.height, 0, 0);
+      const bounds = this.frame.model.geometry;
+      paintDrawings(ctx, this.drawings.geometry(this.frame.project, bounds, this.frame.drawingContext), null, { bounds, imageRenderer: this.drawingImages });
+      return await new Promise((resolve, reject) => copy.toBlob((blob) => {
+        if (blob === null)
+          reject(new Error("PNG encoding failed"));
+        else
+          resolve(blob);
+      }, "image/png"));
+    } finally {
+      release();
+    }
+  }
+  dispose() {
+    if (this.disposed)
+      return;
+    this.disposed = true;
+    this.abort.abort();
+    this.resizeObserver.disconnect();
+    this.unsubscribers.forEach((fn) => fn());
+    this.drawingInput.dispose();
+    this.drawingImages.dispose();
+    this.stopGestures();
+    this.view.dispose();
+    this.dprQuery?.removeEventListener("change", this.pixelRatioChanged);
+    if (this.frameId !== 0)
+      this.win.cancelAnimationFrame(this.frameId);
+    this.frameId = 0;
+    this.inputs.clear();
+    this.frame = null;
+    this.preview = null;
+    this.series.loadMore(() => {
+    });
+    this.series.applyNewData([]);
+    this.indicators.dispose();
+    this.indicatorListeners.clear();
+    this.root.remove();
+    this.canvas.width = this.canvas.height = this.drawingCanvas.width = this.drawingCanvas.height = this.cursorCanvas.width = this.cursorCanvas.height = 0;
+    const layers = [...this.layers];
+    this.layers.clear();
+    const failures = [];
+    for (const layer of layers) {
+      try {
+        layer.dispose?.();
+      } catch (error) {
+        failures.push(error);
+      }
+    }
+    if (failures.length > 0)
+      throw failures[0];
+  }
+  assertLive() {
+    if (this.disposed)
+      throw new Error("Chart is disposed");
+  }
+  updateReference(bars) {
+    const current = this.series.getDataList();
+    return current.length === 0 ? bars[0]?.close : current.length === 1 ? bars.find((bar) => bar.timestamp === current[0].timestamp)?.close ?? current[0].close : current[0].close;
+  }
+  validateBars(bars, layout = this.layout, base = this.series.getDataList()[0]?.close ?? bars[0]?.close, normalized = false) {
+    if (layout.priceScale?.mode === "percentage" && base === 0)
+      throw new RangeError("Percentage scale needs a nonzero reference price");
+    for (const bar of bars) {
+      const { timestamp, open, high, low, close, volume, turnover } = bar;
+      if (normalized && (volume != null && !Number.isFinite(volume) || turnover != null && !Number.isFinite(turnover)))
+        throw new TypeError("Normalized candle has invalid volume or turnover");
+      if (!Number.isFinite(timestamp) || !Number.isFinite(open) || !Number.isFinite(high) || !Number.isFinite(low) || !Number.isFinite(close) || high < Math.max(open, close) || low > Math.min(open, close))
+        throw new RangeError("Candle has invalid OHLC bounds");
+      if (Math.abs(timestamp) > 864e13)
+        throw new RangeError("Candle timestamp is outside the supported Date range");
+      if (layout.priceScale?.mode === "log" && Math.min(open, high, low, close) <= 0)
+        throw new RangeError("Log scale requires positive prices");
+    }
+  }
+  validateRender(options) {
+    if (options.timeZone !== void 0)
+      new Intl.DateTimeFormat("en", { timeZone: options.timeZone }).format(0);
+    if (options.candleDensity !== void 0 && options.candleDensity !== "raw" && options.candleDensity !== "pixel-envelope")
+      throw new RangeError("Unknown candle density mode");
+    if (options.chartType !== void 0 && !ENGINE_CHART_TYPES2.includes(options.chartType))
+      throw new RangeError("Unknown chart type");
+    if (options.baseline !== void 0 && !Number.isFinite(options.baseline))
+      throw new RangeError("Baseline must be a finite price");
+  }
+  pixelRatioChanged = () => {
+    this.watchPixelRatio();
+    this.schedule();
+  };
+  watchPixelRatio() {
+    this.dprQuery?.removeEventListener("change", this.pixelRatioChanged);
+    this.dprQuery = this.win.matchMedia(`(resolution: ${this.win.devicePixelRatio || 1}dppx)`);
+    this.dprQuery.addEventListener("change", this.pixelRatioChanged);
+  }
+  schedule() {
+    if (this.disposed || this.doc.hidden || this.frameId !== 0 || this.draining)
+      return;
+    this.frameId = this.win.requestAnimationFrame((time) => {
+      this.frameId = 0;
+      this.renderTick(time);
+    });
+  }
+  renderTick(time) {
+    this.draining = true;
+    let rendered = false;
+    try {
+      const pending = [...this.inputs.entries()];
+      for (const [id, callback] of pending) {
+        if (this.inputs.delete(id))
+          callback(time);
+      }
+      this.flush();
+      rendered = true;
+    } finally {
+      this.draining = false;
+      if (rendered && (this.inputs.size > 0 || this.width > 0 && this.height > 0 && (this.geometryDirty || this.paintDirty || this.drawingDirty || this.cursorDirty)))
+        this.schedule();
+    }
+  }
+  /** Keep an unused transparent layer tiny without changing its CSS or hit geometry. */
+  sizeDrawingCanvas(active) {
+    const width = active ? this.canvas.width : 1, height = active ? this.canvas.height : 1;
+    if (this.drawingCanvas.width !== width)
+      this.drawingCanvas.width = width;
+    if (this.drawingCanvas.height !== height)
+      this.drawingCanvas.height = height;
+  }
+  flush() {
+    if (this.disposed)
+      return;
+    const started = this.win.performance.now(), rect = this.root.getBoundingClientRect();
+    const pixelBudget = this.resolution.maxCanvasPixels;
+    const ratio = Math.min(
+      this.win.devicePixelRatio || 1,
+      this.resolution.maxPixelRatio ?? Infinity,
+      pixelBudget === void 0 || rect.width <= 0 || rect.height <= 0 ? Infinity : Math.sqrt(pixelBudget / (rect.width * rect.height))
+    );
+    const plotWidth = rect.width > 0 ? financialGeometry(rect.width, rect.height, this.layout.axisGutter, 12).plotWidth : 0;
+    if (plotWidth > 0 && plotWidth !== this.densityWidth) {
+      this.densityWidth = plotWidth;
+      this.view.setLimits(viewportLimitsForWidth(plotWidth, this.viewportOptions));
+    }
+    const sizeChanged = rect.width !== this.width || rect.height !== this.height;
+    if (sizeChanged || ratio !== this.ratio) {
+      this.width = rect.width;
+      this.height = rect.height;
+      this.ratio = ratio;
+      for (const canvas of [this.canvas, this.cursorCanvas]) {
+        canvas.width = Math.min(pixelBudget ?? Infinity, Math.max(this.width > 0 ? 1 : 0, Math.floor(this.width * ratio)));
+        canvas.height = Math.min(pixelBudget === void 0 || canvas.width === 0 ? Infinity : Math.floor(pixelBudget / canvas.width), Math.max(this.height > 0 ? 1 : 0, Math.floor(this.height * ratio)));
+      }
+      this.geometryDirty = this.geometryDirty || sizeChanged;
+      this.paintDirty = true;
+      this.drawingDirty = true;
+      this.cursorDirty = true;
+    }
+    if (this.width <= 0 || this.height <= 0) {
+      if (this.preview === null && this.drawings.getSnapshot().drawings.length === 0)
+        this.sizeDrawingCanvas(false);
+      return;
+    }
+    if (this.geometryDirty || this.frame === null) {
+      const bars = this.series.getDataList();
+      const indicators = this.indicators.compute(bars).map((result) => ({ ...result, pane: result.pane === "price" ? "price" : `indicator:${result.paneId ?? result.id}` }));
+      const snapshot = this.view.getSnapshot(), from = snapshot.dataStart ?? snapshot.viewport.i0;
+      const previousClose = from > 0 ? this.series.snapshot(from - 1, from, snapshot.mode).bars[0]?.close : void 0;
+      this.frame = buildEngineFrame(snapshot, bars, indicators, this.width, this.height, this.layout, previousClose, this.series.version);
+      for (const layer of this.layers)
+        layer.update(this.frame, bars);
+      if (this.disposed)
+        return;
+      this.geometryDirty = false;
+      this.paintDirty = true;
+      this.drawingDirty = true;
+      this.cursorDirty = true;
+      this.counters.geometryBuilds++;
+    }
+    if (this.paintDirty) {
+      this.context.setTransform(this.canvas.width / this.width, 0, 0, this.canvas.height / this.height, 0, 0);
+      this.context.clearRect(0, 0, this.width, this.height);
+      for (const [i, pane] of this.frame.panes.entries()) {
+        this.context.save();
+        this.context.translate(0, pane.top);
+        paintEngineFrame(this.context, pane.frame, { ...this.renderOptions, formatPrice: i === 0 ? pane.scale.label : (price) => String(Number(price.toPrecision(6))), showTimeAxis: i === this.frame.panes.length - 1 });
+        this.context.restore();
+      }
+      for (const layer of this.layers) {
+        this.context.save();
+        try {
+          layer.paint(this.context);
+        } finally {
+          this.context.restore();
+        }
+        if (this.disposed)
+          return;
+      }
+      this.paintDirty = false;
+      this.counters.plotPaints++;
+    }
+    if (this.drawingDirty) {
+      const drawingState = this.drawings.getSnapshot();
+      this.sizeDrawingCanvas(this.preview !== null || drawingState.drawings.length > 0);
+      this.drawingContext.setTransform(this.canvas.width / this.width, 0, 0, this.canvas.height / this.height, 0, 0);
+      this.drawingContext.clearRect(0, 0, this.width, this.height);
+      const g = this.frame.model.geometry;
+      this.retainDrawingImages();
+      this.frame.drawingContext = { bars: this.series.getDataList(), revision: this.series.version, visibleRange: [this.frame.snapshot.viewport.i0, this.frame.snapshot.viewport.i1] };
+      const geometries = this.drawings.geometry(this.frame.project, g, this.frame.drawingContext).filter((item) => item.id !== this.preview?.id);
+      if (this.preview !== null) {
+        const geometry = projectDrawing(this.preview, this.frame.project, g, this.frame.drawingContext);
+        if (geometry !== null)
+          geometries.push(geometry);
+      }
+      paintDrawings(this.drawingContext, geometries, this.preview?.id ?? drawingState.selectedId, { bounds: g, imageRenderer: this.drawingImages, onInvalidate: this.invalidateDrawings });
+      this.drawingDirty = false;
+      this.counters.drawingPaints++;
+    }
+    if (this.cursorDirty) {
+      this.cursorContext.setTransform(this.canvas.width / this.width, 0, 0, this.canvas.height / this.height, 0, 0);
+      this.cursorContext.clearRect(0, 0, this.width, this.height);
+      if (this.cursorX !== null) {
+        for (const [i, pane] of this.frame.panes.entries()) {
+          this.cursorContext.save();
+          this.cursorContext.translate(0, pane.top);
+          paintEngineCursor(this.cursorContext, pane.frame, this.cursorX, { ...this.renderOptions, formatPrice: pane.scale.label, showTimeAxis: i === this.frame.panes.length - 1 });
+          this.cursorContext.restore();
+        }
+      }
+      this.cursorDirty = false;
+      this.counters.cursorPaints++;
+      this.onInspect?.(this.cursorX === null ? null : this.frame.inspect(this.cursorX));
+    }
+    if (this.disposed || this.frame === null)
+      return;
+    this.counters.frames++;
+    this.counters.lastFrameMs = this.win.performance.now() - started;
+    if (this.counters.firstDataFrameMs === 0 && this.frame.snapshot.bars.length > 0)
+      this.counters.firstDataFrameMs = this.counters.lastFrameMs;
+    this.counters.maxFrameMs = Math.max(this.counters.maxFrameMs, this.counters.lastFrameMs);
+  }
+};
+
+export {
+  paintEngineFrame,
+  paintEngineCursor,
+  createDrawingImage,
+  DrawingImageRenderer,
+  EngineChart
+};