hyperprop-charting-library 0.1.144 → 0.1.146

package/dist/hyperprop-charting-library.cjs

@@ -2071,6 +2071,493 @@ var BUILTIN_DONCHIAN_INDICATOR = {
     return rangeOfSeries([upper, lower], startIndex, endIndex, skipIndex);
   }
 };
+var computeVolumeProfile = (data, fromIndex, toIndex, rowCount, valueAreaPercent) => {
+  const from = Math.max(0, fromIndex);
+  const to = Math.min(data.length - 1, toIndex);
+  if (to < from) return null;
+  let low = Number.POSITIVE_INFINITY;
+  let high = Number.NEGATIVE_INFINITY;
+  for (let i = from; i <= to; i += 1) {
+    const bar = data[i];
+    if (!bar) continue;
+    if (bar.l < low) low = bar.l;
+    if (bar.h > high) high = bar.h;
+  }
+  if (!Number.isFinite(low) || !Number.isFinite(high)) return null;
+  if (high - low < Number.EPSILON) {
+    const pad = Math.max(Math.abs(high) * 1e-6, 1e-6);
+    low -= pad;
+    high += pad;
+  }
+  const rows = Math.max(4, Math.min(500, Math.floor(rowCount) || 24));
+  const rowSize = (high - low) / rows;
+  const buckets = Array.from({ length: rows }, (_, index) => ({
+    low: low + index * rowSize,
+    high: low + (index + 1) * rowSize,
+    up: 0,
+    down: 0,
+    total: 0
+  }));
+  let totalVolume = 0;
+  for (let i = from; i <= to; i += 1) {
+    const bar = data[i];
+    if (!bar) continue;
+    const volume = Math.max(0, bar.v ?? 0);
+    if (volume <= 0) continue;
+    const firstRow = Math.max(0, Math.min(rows - 1, Math.floor((bar.l - low) / rowSize)));
+    const lastRow = Math.max(0, Math.min(rows - 1, Math.floor((bar.h - low) / rowSize)));
+    const share = volume / (lastRow - firstRow + 1);
+    const up = bar.c >= bar.o;
+    for (let row = firstRow; row <= lastRow; row += 1) {
+      const bucket = buckets[row];
+      if (up) bucket.up += share;
+      else bucket.down += share;
+      bucket.total += share;
+    }
+    totalVolume += volume;
+  }
+  if (totalVolume <= 0) return null;
+  let pocIndex = 0;
+  let maxRowVolume = 0;
+  for (let row = 0; row < rows; row += 1) {
+    const total = buckets[row].total;
+    if (total > maxRowVolume) {
+      maxRowVolume = total;
+      pocIndex = row;
+    }
+  }
+  const target = totalVolume * Math.min(0.99, Math.max(0.1, valueAreaPercent / 100));
+  let valueAreaFrom = pocIndex;
+  let valueAreaTo = pocIndex;
+  let accumulated = buckets[pocIndex].total;
+  while (accumulated < target && (valueAreaFrom > 0 || valueAreaTo < rows - 1)) {
+    const above = valueAreaTo < rows - 1 ? buckets[valueAreaTo + 1].total : -1;
+    const below = valueAreaFrom > 0 ? buckets[valueAreaFrom - 1].total : -1;
+    if (above < 0 && below < 0) break;
+    if (above >= below) {
+      valueAreaTo += 1;
+      accumulated += above;
+    } else {
+      valueAreaFrom -= 1;
+      accumulated += below;
+    }
+  }
+  return { rows: buckets, rowSize, low, high, maxRowVolume, totalVolume, pocIndex, valueAreaFrom, valueAreaTo };
+};
+var sessionSegments = (renderContext, fromIndex, toIndex) => {
+  const session = renderContext.session;
+  if (!session) return [{ from: fromIndex, to: toIndex }];
+  const segments = [];
+  let start = fromIndex;
+  let day = session.dayAt(fromIndex);
+  for (let index = fromIndex + 1; index <= toIndex; index += 1) {
+    const current = session.dayAt(index);
+    if (current !== day) {
+      segments.push({ from: start, to: index - 1 });
+      start = index;
+      day = current;
+    }
+  }
+  segments.push({ from: start, to: toIndex });
+  return segments;
+};
+var withAlpha = (color, alpha) => {
+  const clamped = Math.max(0, Math.min(1, alpha));
+  if (color.startsWith("#") && (color.length === 7 || color.length === 4)) {
+    const hex = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${clamped})`;
+  }
+  if (color.startsWith("rgba(")) return color;
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${clamped})`);
+  return color;
+};
+var BUILTIN_VOLUME_PROFILE_INDICATOR = {
+  id: "volume-profile",
+  name: "Volume Profile",
+  pane: "overlay",
+  defaultInputs: {
+    // "visible" profiles everything on screen and follows pan/zoom; "session"
+    // draws one profile per trading day inside that day's bars.
+    scope: "visible",
+    rows: 40,
+    widthPercent: 28,
+    placement: "right",
+    valueAreaPercent: 70,
+    upColor: "#26a69a",
+    downColor: "#ef5350",
+    valueAreaOpacity: 0.55,
+    outsideOpacity: 0.22,
+    showPoc: true,
+    pocColor: "#f7a600",
+    showValueArea: true,
+    valueAreaColor: "#7e8aa3",
+    showLabels: true
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const { yFromPrice, chartLeft, chartRight, chartTop, chartBottom, data } = renderContext;
+    if (!yFromPrice || data.length === 0) return;
+    const from = Math.max(0, renderContext.startIndex);
+    const to = Math.min(data.length - 1, renderContext.endIndex);
+    if (to < from) return;
+    const rows = Math.max(4, Math.min(500, Math.floor(Number(inputs.rows)) || 40));
+    const valueAreaPercent = Math.max(10, Math.min(99, Number(inputs.valueAreaPercent) || 70));
+    const perSession = inputs.scope === "session" && renderContext.session !== void 0;
+    const segments = perSession ? sessionSegments(renderContext, from, to) : [{ from, to }];
+    const widthRatio = Math.max(0.02, Math.min(0.9, (Number(inputs.widthPercent) || 28) / 100));
+    const placeLeft = inputs.placement === "left";
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(chartLeft, chartTop, chartRight - chartLeft, chartBottom - chartTop);
+    ctx.clip();
+    for (const segment of segments) {
+      const profile = withCachedComputation(
+        `volume-profile|${perSession ? "s" : "v"}|${segment.from}|${segment.to}|${rows}|${valueAreaPercent}`,
+        data,
+        () => computeVolumeProfile(data, segment.from, segment.to, rows, valueAreaPercent)
+      );
+      if (!profile || profile.maxRowVolume <= 0) continue;
+      const segmentLeft = renderContext.xFromIndex(segment.from) - renderContext.candleSpacing / 2;
+      const segmentRight = renderContext.xFromIndex(segment.to) + renderContext.candleSpacing / 2;
+      const available = perSession ? Math.max(0, Math.min(segmentRight, chartRight) - Math.max(segmentLeft, chartLeft)) : chartRight - chartLeft;
+      const maxWidth = available * (perSession ? Math.min(1, widthRatio * 2.2) : widthRatio);
+      if (maxWidth < (perSession ? 10 : 2)) continue;
+      const anchorX = perSession ? Math.max(segmentLeft, chartLeft) : placeLeft ? chartLeft : chartRight;
+      const direction = perSession ? 1 : placeLeft ? 1 : -1;
+      for (let row = 0; row < profile.rows.length; row += 1) {
+        const bucket = profile.rows[row];
+        if (bucket.total <= 0) continue;
+        const yTop = yFromPrice(bucket.high);
+        const yBottom = yFromPrice(bucket.low);
+        const height = Math.max(1, Math.abs(yBottom - yTop) - 1);
+        const top = Math.min(yTop, yBottom);
+        if (top > chartBottom || top + height < chartTop) continue;
+        const inValueArea = row >= profile.valueAreaFrom && row <= profile.valueAreaTo;
+        const alpha = inValueArea ? Math.max(0, Math.min(1, Number(inputs.valueAreaOpacity) || 0.55)) : Math.max(0, Math.min(1, Number(inputs.outsideOpacity) || 0.22));
+        const rowWidth = bucket.total / profile.maxRowVolume * maxWidth;
+        const upWidth = bucket.total > 0 ? rowWidth * (bucket.up / bucket.total) : 0;
+        ctx.fillStyle = withAlpha(inputs.upColor ?? "#26a69a", alpha);
+        ctx.fillRect(direction > 0 ? anchorX : anchorX - upWidth, top, upWidth, height);
+        ctx.fillStyle = withAlpha(inputs.downColor ?? "#ef5350", alpha);
+        const downWidth = rowWidth - upWidth;
+        ctx.fillRect(
+          direction > 0 ? anchorX + upWidth : anchorX - rowWidth,
+          top,
+          downWidth,
+          height
+        );
+      }
+      const lineFrom = direction > 0 ? anchorX : anchorX - maxWidth;
+      const lineTo = direction > 0 ? anchorX + maxWidth : anchorX;
+      const drawLevel = (price, color, label, dashed) => {
+        const y = yFromPrice(price);
+        if (y < chartTop || y > chartBottom) return;
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.setLineDash(dashed ? [4, 3] : []);
+        ctx.beginPath();
+        ctx.moveTo(lineFrom, Math.round(y) + 0.5);
+        ctx.lineTo(lineTo, Math.round(y) + 0.5);
+        ctx.stroke();
+        ctx.restore();
+        if (inputs.showLabels && !perSession) {
+          ctx.save();
+          ctx.fillStyle = color;
+          ctx.font = "10px system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+          ctx.textAlign = direction > 0 ? "left" : "right";
+          ctx.textBaseline = "bottom";
+          ctx.fillText(label, direction > 0 ? lineFrom + 3 : lineTo - 3, y - 1);
+          ctx.restore();
+        }
+      };
+      const poc = profile.rows[profile.pocIndex];
+      if (inputs.showValueArea) {
+        const areaHigh = profile.rows[profile.valueAreaTo];
+        const areaLow = profile.rows[profile.valueAreaFrom];
+        const areaColor = inputs.valueAreaColor ?? "#7e8aa3";
+        drawLevel(areaHigh.high, areaColor, "VAH", true);
+        drawLevel(areaLow.low, areaColor, "VAL", true);
+      }
+      if (inputs.showPoc) {
+        drawLevel((poc.low + poc.high) / 2, inputs.pocColor ?? "#f7a600", "POC", false);
+      }
+    }
+    ctx.restore();
+  }
+};
+var parseMinutes = (value, fallback) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  const match = /^(\d{1,2}):?(\d{2})$/.exec(String(value ?? "").trim());
+  if (!match) return fallback;
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (!Number.isFinite(hour) || !Number.isFinite(minute)) return fallback;
+  return hour * 60 + minute;
+};
+var computeSessionLevels = (data, session, rthStart, rthEnd, orMinutes) => {
+  const lastIndex = data.length - 1;
+  if (lastIndex < 0) return [];
+  const currentDay = session.dayAt(lastIndex);
+  if (!Number.isFinite(currentDay)) return [];
+  let currentFrom = lastIndex;
+  while (currentFrom > 0 && session.dayAt(currentFrom - 1) === currentDay) currentFrom -= 1;
+  const priorTo = currentFrom - 1;
+  const result = [];
+  if (priorTo >= 0) {
+    const priorDay = session.dayAt(priorTo);
+    let priorFrom = priorTo;
+    while (priorFrom > 0 && session.dayAt(priorFrom - 1) === priorDay) priorFrom -= 1;
+    let high = Number.NEGATIVE_INFINITY;
+    let low = Number.POSITIVE_INFINITY;
+    for (let i = priorFrom; i <= priorTo; i += 1) {
+      const bar = data[i];
+      if (!bar) continue;
+      if (bar.h > high) high = bar.h;
+      if (bar.l < low) low = bar.l;
+    }
+    const close = data[priorTo]?.c;
+    if (Number.isFinite(high)) result.push({ price: high, label: "PDH", color: "prior", fromIndex: currentFrom });
+    if (Number.isFinite(low)) result.push({ price: low, label: "PDL", color: "prior", fromIndex: currentFrom });
+    if (close !== void 0) result.push({ price: close, label: "PDC", color: "prior", fromIndex: currentFrom });
+  }
+  let onHigh = Number.NEGATIVE_INFINITY;
+  let onLow = Number.POSITIVE_INFINITY;
+  let orHigh = Number.NEGATIVE_INFINITY;
+  let orLow = Number.POSITIVE_INFINITY;
+  let ibHigh = Number.NEGATIVE_INFINITY;
+  let ibLow = Number.POSITIVE_INFINITY;
+  let orFromIndex = lastIndex;
+  let ibFromIndex = lastIndex;
+  for (let i = currentFrom; i <= lastIndex; i += 1) {
+    const bar = data[i];
+    if (!bar) continue;
+    const minutes = session.minutesOfDayAt(i);
+    if (!Number.isFinite(minutes)) continue;
+    if (minutes < rthStart || minutes >= rthEnd) {
+      if (bar.h > onHigh) onHigh = bar.h;
+      if (bar.l < onLow) onLow = bar.l;
+      continue;
+    }
+    if (minutes < rthStart + orMinutes) {
+      if (bar.h > orHigh) orHigh = bar.h;
+      if (bar.l < orLow) orLow = bar.l;
+      orFromIndex = Math.min(orFromIndex, i);
+    }
+    if (minutes < rthStart + 60) {
+      if (bar.h > ibHigh) ibHigh = bar.h;
+      if (bar.l < ibLow) ibLow = bar.l;
+      ibFromIndex = Math.min(ibFromIndex, i);
+    }
+  }
+  if (Number.isFinite(onHigh)) result.push({ price: onHigh, label: "ONH", color: "overnight", fromIndex: currentFrom });
+  if (Number.isFinite(onLow)) result.push({ price: onLow, label: "ONL", color: "overnight", fromIndex: currentFrom });
+  if (Number.isFinite(orHigh)) result.push({ price: orHigh, label: "ORH", color: "openingRange", fromIndex: orFromIndex });
+  if (Number.isFinite(orLow)) result.push({ price: orLow, label: "ORL", color: "openingRange", fromIndex: orFromIndex });
+  if (Number.isFinite(ibHigh)) result.push({ price: ibHigh, label: "IBH", color: "initialBalance", fromIndex: ibFromIndex });
+  if (Number.isFinite(ibLow)) result.push({ price: ibLow, label: "IBL", color: "initialBalance", fromIndex: ibFromIndex });
+  return result;
+};
+var BUILTIN_SESSION_LEVELS_INDICATOR = {
+  id: "session-levels",
+  name: "Session levels",
+  pane: "overlay",
+  defaultInputs: {
+    showPriorDay: true,
+    showOvernight: true,
+    showOpeningRange: true,
+    showInitialBalance: false,
+    // Cash-session bounds in the session's own zone; everything before the
+    // open on the same trading day counts as overnight.
+    rthStart: "09:30",
+    rthEnd: "16:00",
+    openingRangeMinutes: 30,
+    priorDayColor: "#8b93a7",
+    overnightColor: "#7c5cff",
+    openingRangeColor: "#26a69a",
+    initialBalanceColor: "#f7a600",
+    lineWidth: 1,
+    showLabels: true
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const { yFromPrice, chartLeft, chartRight, chartTop, chartBottom, data, session } = renderContext;
+    if (!yFromPrice || !session || data.length === 0) return;
+    const rthStart = parseMinutes(inputs.rthStart, 570);
+    const rthEnd = parseMinutes(inputs.rthEnd, 960);
+    const orMinutes = Math.max(1, Math.floor(Number(inputs.openingRangeMinutes) || 30));
+    const levels = withCachedComputation(
+      `session-levels|${rthStart}|${rthEnd}|${orMinutes}|${data.length}`,
+      data,
+      () => computeSessionLevels(data, session, rthStart, rthEnd, orMinutes)
+    );
+    const groupEnabled = {
+      prior: inputs.showPriorDay !== false,
+      overnight: inputs.showOvernight !== false,
+      openingRange: inputs.showOpeningRange !== false,
+      initialBalance: inputs.showInitialBalance === true
+    };
+    const groupColor = {
+      prior: inputs.priorDayColor ?? "#8b93a7",
+      overnight: inputs.overnightColor ?? "#7c5cff",
+      openingRange: inputs.openingRangeColor ?? "#26a69a",
+      initialBalance: inputs.initialBalanceColor ?? "#f7a600"
+    };
+    ctx.save();
+    ctx.lineWidth = Math.max(1, Number(inputs.lineWidth) || 1);
+    ctx.font = "10px system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+    ctx.textAlign = "right";
+    ctx.textBaseline = "bottom";
+    for (const level of levels) {
+      if (!groupEnabled[level.color]) continue;
+      const y = yFromPrice(level.price);
+      if (!Number.isFinite(y) || y < chartTop || y > chartBottom) continue;
+      const startX = Math.max(chartLeft, renderContext.xFromIndex(level.fromIndex));
+      const color = groupColor[level.color] ?? "#8b93a7";
+      ctx.strokeStyle = color;
+      ctx.setLineDash(level.color === "prior" ? [] : [5, 4]);
+      ctx.beginPath();
+      ctx.moveTo(startX, Math.round(y) + 0.5);
+      ctx.lineTo(chartRight, Math.round(y) + 0.5);
+      ctx.stroke();
+      if (inputs.showLabels !== false) {
+        ctx.fillStyle = color;
+        ctx.fillText(level.label, chartRight - 4, y - 2);
+      }
+    }
+    ctx.restore();
+  }
+};
+var BUILTIN_ANCHORED_VWAP_INDICATOR = {
+  id: "anchored-vwap",
+  name: "Anchored VWAP",
+  pane: "overlay",
+  defaultInputs: {
+    anchorTime: "",
+    color: "#22d3ee",
+    width: 2,
+    showBands: false,
+    bandMultiplier: 1,
+    bandColor: "#94a3b8",
+    bandFillOpacity: 0.06,
+    showAnchorMarker: true
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const { data, yFromPrice } = renderContext;
+    if (!yFromPrice || data.length === 0) return;
+    const anchorIndex = resolveAnchorIndex(renderContext, inputs.anchorTime);
+    if (anchorIndex === null) return;
+    const series = withCachedComputation(
+      `anchored-vwap|${anchorIndex}|${inputs.showBands ? "b" : "n"}`,
+      data,
+      () => computeAnchoredVwap(data, anchorIndex)
+    );
+    if (inputs.showBands) {
+      const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+      const upper = series.vwap.map((value, idx) => {
+        const sigma = series.sigma[idx];
+        return value == null || sigma == null ? null : value + multiplier * sigma;
+      });
+      const lower = series.vwap.map((value, idx) => {
+        const sigma = series.sigma[idx];
+        return value == null || sigma == null ? null : value - multiplier * sigma;
+      });
+      const bandColor = inputs.bandColor ?? "#94a3b8";
+      fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.bandFillOpacity) || 0.06);
+      drawOverlaySeries(ctx, renderContext, upper, bandColor, 1);
+      drawOverlaySeries(ctx, renderContext, lower, bandColor, 1);
+    }
+    drawOverlaySeries(ctx, renderContext, series.vwap, inputs.color ?? "#22d3ee", Number(inputs.width) || 2);
+    if (inputs.showAnchorMarker !== false) {
+      const anchorBar = data[anchorIndex];
+      const anchorValue = series.vwap[anchorIndex];
+      if (anchorBar && anchorValue != null) {
+        const x = renderContext.xFromIndex(anchorIndex);
+        const y = yFromPrice(anchorValue);
+        if (x >= renderContext.chartLeft - 8 && x <= renderContext.chartRight + 8) {
+          ctx.save();
+          ctx.fillStyle = inputs.color ?? "#22d3ee";
+          ctx.beginPath();
+          ctx.arc(x, y, 3.5, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+        }
+      }
+    }
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const anchorIndex = resolveAnchorIndexFromData(data, inputs.anchorTime);
+    if (anchorIndex === null) return null;
+    const series = withCachedComputation(
+      `anchored-vwap|${anchorIndex}|${inputs.showBands ? "b" : "n"}`,
+      data,
+      () => computeAnchoredVwap(data, anchorIndex)
+    );
+    if (!inputs.showBands) return rangeOfSeries([series.vwap], startIndex, endIndex, skipIndex);
+    const multiplier = Math.max(0.1, Number(inputs.bandMultiplier) || 1);
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (let idx = startIndex; idx <= endIndex; idx += 1) {
+      if (idx === skipIndex) continue;
+      const value = series.vwap[idx];
+      const sigma = series.sigma[idx];
+      if (value == null || sigma == null) continue;
+      const lo = value - multiplier * sigma;
+      const hi = value + multiplier * sigma;
+      if (lo < min) min = lo;
+      if (hi > max) max = hi;
+    }
+    return min <= max ? { min, max } : null;
+  }
+};
+var resolveAnchorIndexFromData = (data, anchorTime) => {
+  if (data.length === 0) return null;
+  const raw = typeof anchorTime === "number" ? anchorTime : Date.parse(String(anchorTime ?? ""));
+  if (!Number.isFinite(raw)) return null;
+  let lo = 0;
+  let hi = data.length - 1;
+  if (raw <= data[0].time.getTime()) return 0;
+  if (raw >= data[hi].time.getTime()) return hi;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    if (data[mid].time.getTime() <= raw) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+};
+var resolveAnchorIndex = (renderContext, anchorTime) => {
+  const explicit = resolveAnchorIndexFromData(renderContext.data, anchorTime);
+  if (explicit !== null) return explicit;
+  const session = renderContext.session;
+  const lastIndex = renderContext.data.length - 1;
+  if (!session || lastIndex < 0) return lastIndex >= 0 ? 0 : null;
+  const day = session.dayAt(lastIndex);
+  let index = lastIndex;
+  while (index > 0 && session.dayAt(index - 1) === day) index -= 1;
+  return index;
+};
+var computeAnchoredVwap = (data, anchorIndex) => {
+  const vwap = new Array(data.length).fill(null);
+  const sigma = new Array(data.length).fill(null);
+  let cumPv = 0;
+  let cumPv2 = 0;
+  let cumV = 0;
+  for (let i = Math.max(0, anchorIndex); i < data.length; i += 1) {
+    const bar = data[i];
+    if (!bar) continue;
+    const typical = (bar.h + bar.l + bar.c) / 3;
+    const volume = Math.max(0, bar.v ?? 0) || 1;
+    cumPv += typical * volume;
+    cumPv2 += typical * typical * volume;
+    cumV += volume;
+    if (cumV <= 0) continue;
+    const value = cumPv / cumV;
+    vwap[i] = value;
+    sigma[i] = Math.sqrt(Math.max(0, cumPv2 / cumV - value * value));
+  }
+  return { vwap, sigma };
+};
 var BUILTIN_INDICATORS = [
   BUILTIN_VOLUME_INDICATOR,
   BUILTIN_SMA_INDICATOR,
@@ -2098,7 +2585,10 @@ var BUILTIN_INDICATORS = [
   BUILTIN_SUPERTREND_INDICATOR,
   BUILTIN_ICHIMOKU_INDICATOR,
   BUILTIN_KELTNER_INDICATOR,
-  BUILTIN_DONCHIAN_INDICATOR
+  BUILTIN_DONCHIAN_INDICATOR,
+  BUILTIN_VOLUME_PROFILE_INDICATOR,
+  BUILTIN_SESSION_LEVELS_INDICATOR,
+  BUILTIN_ANCHORED_VWAP_INDICATOR
 ];
 
 // src/scripts.ts
@@ -3494,6 +3984,44 @@ function createChart(element, options = {}) {
   let compiledSession = compileSession(sessionOptions.spec);
   const isHour12 = () => timeFormat === "12h";
   const formatClock = (time) => zoneClock.formatTime(time.getTime(), isHour12());
+  let sessionInfoCache = [];
+  let sessionInfoCacheKey = "";
+  const sessionInfoForIndex = (index) => {
+    if (!compiledSession) return null;
+    const point = data[index];
+    if (!point) return null;
+    const key = `${data.length}|${data[0]?.time.getTime() ?? 0}|${data[data.length - 1]?.time.getTime() ?? 0}|${sessionOptions.spec === null ? "none" : JSON.stringify(sessionOptions.spec)}`;
+    if (key !== sessionInfoCacheKey) {
+      sessionInfoCacheKey = key;
+      sessionInfoCache = new Array(data.length);
+    }
+    const cached = sessionInfoCache[index];
+    if (cached) return cached;
+    const ms = point.time.getTime();
+    const info = sessionInfoAt(compiledSession, ms);
+    const resolved = {
+      day: info.sessionDay,
+      inSession: info.inSession,
+      minutes: compiledSession.clock.minutesOfDay(ms)
+    };
+    sessionInfoCache[index] = resolved;
+    return resolved;
+  };
+  const buildIndicatorSessionContext = () => {
+    if (!compiledSession) return void 0;
+    const dayAt = (index) => sessionInfoForIndex(index)?.day ?? Number.NaN;
+    return {
+      dayAt,
+      inSessionAt: (index) => sessionInfoForIndex(index)?.inSession ?? false,
+      isSessionStart: (index) => {
+        if (index <= 0) return index === 0;
+        const current = dayAt(index);
+        const previous = dayAt(index - 1);
+        return Number.isFinite(current) && Number.isFinite(previous) && current !== previous;
+      },
+      minutesOfDayAt: (index) => sessionInfoForIndex(index)?.minutes ?? Number.NaN
+    };
+  };
   let barMarks = [];
   let timescaleMarks = [];
   let markRegions = [];
@@ -6900,6 +7428,7 @@ function createChart(element, options = {}) {
     ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
     if (activeOverlayIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      const indicatorSession = buildIndicatorSessionContext();
       activeOverlayIndicators.forEach(({ indicator, plugin }) => {
         plugin.draw(
           ctx,
@@ -6921,7 +7450,8 @@ function createChart(element, options = {}) {
             getVolumeByIndex,
             candleSpacing,
             upColor: mergedOptions.upColor,
-            downColor: mergedOptions.downColor
+            downColor: mergedOptions.downColor,
+            ...indicatorSession ? { session: indicatorSession } : {}
           },
           indicator.inputs
         );
@@ -7721,8 +8251,17 @@ function createChart(element, options = {}) {
         return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
       };
       const LEGEND_EXCLUDED_INPUT_KEYS = /* @__PURE__ */ new Set(["width", "bandMultiplier", "bandFillOpacity", "fillOpacity"]);
+      const formatLegendValue = (value) => {
+        if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
+          const ms = Date.parse(value);
+          if (Number.isFinite(ms)) {
+            return getTimeStepMs() < 864e5 ? `${zoneClock.formatDayMonth(ms)} ${zoneClock.formatTime(ms, isHour12())}` : zoneClock.formatDayMonth(ms);
+          }
+        }
+        return String(value);
+      };
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
-        const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
+        const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => formatLegendValue(value));
         if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
           return `${plugin.name} ${inputValues.join(" ")}`;
         }
@@ -10548,6 +11087,22 @@ function createChart(element, options = {}) {
     if (event.altKey || event.ctrlKey || event.metaKey) {
       return;
     }
+    if (replay && keyboard.replay !== false) {
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        const direction = event.key === "ArrowRight" ? 1 : -1;
+        replayStep(direction * (event.shiftKey ? 10 : 1));
+        emit(direction > 0 ? "replay-step-forward" : "replay-step-back");
+        event.preventDefault();
+        return;
+      }
+      if (event.key === " " || event.key === "Spacebar") {
+        if (replay.playing) replayPause();
+        else replayPlay();
+        emit("replay-toggle-play");
+        event.preventDefault();
+        return;
+      }
+    }
     switch (event.key) {
       case "Delete":
       case "Backspace": {
@@ -10959,7 +11514,11 @@ function createChart(element, options = {}) {
   const replayStep = (bars = 1) => {
     if (!replay) return;
     const step = Math.trunc(bars) || 1;
-    const next = clamp(replay.cursor + step, 0, replay.fullRaw.length - 1);
+    replaySeek(replay.cursor + step);
+  };
+  const replaySeek = (index) => {
+    if (!replay || !Number.isFinite(index)) return;
+    const next = clamp(Math.round(index), 0, replay.fullRaw.length - 1);
     if (next === replay.cursor) return;
     replay.cursor = next;
     applyReplaySlice();
@@ -11592,6 +12151,7 @@ function createChart(element, options = {}) {
     startReplay,
     stopReplay,
     replayStep,
+    replaySeek,
     replayPlay,
     replayPause,
     setReplaySpeed,

package/dist/hyperprop-charting-library.d.ts

@@ -264,6 +264,22 @@ interface IndicatorRenderContext {
         opacity: number;
         horizontalLines: boolean;
     };
+    /**
+     * The chart's trading-session view, so indicators can be session-aware
+     * without re-deriving one. Present only when a session spec is configured
+     * (`setSession`); session-based indicators should fall back to calendar
+     * days — or render nothing — when it is absent.
+     */
+    session?: {
+        /** Trading day a bar belongs to; equal for bars in the same session. */
+        dayAt: (index: number) => number;
+        /** False for bars outside trading hours (overnight, maintenance break). */
+        inSessionAt: (index: number) => boolean;
+        /** True when the bar opens a new trading day. */
+        isSessionStart: (index: number) => boolean;
+        /** Minutes past midnight in the session's own zone. */
+        minutesOfDayAt: (index: number) => number;
+    };
 }
 /** Emitted when a pane-legend control (hover buttons) is clicked. */
 interface IndicatorPaneActionEvent {
@@ -561,7 +577,7 @@ interface ChartContextMenuEvent {
     };
 }
 /** Built-in keyboard actions, reported after the chart applies them. */
-type ChartKeyboardAction = "delete-drawing" | "cancel" | "undo" | "redo" | "pan-left" | "pan-right" | "pan-up" | "pan-down" | "zoom-in" | "zoom-out" | "reset-viewport" | "scroll-to-realtime";
+type ChartKeyboardAction = "delete-drawing" | "cancel" | "undo" | "redo" | "pan-left" | "pan-right" | "pan-up" | "pan-down" | "zoom-in" | "zoom-out" | "reset-viewport" | "scroll-to-realtime" | "replay-step-forward" | "replay-step-back" | "replay-toggle-play";
 interface ChartKeyboardShortcutEvent {
     action: ChartKeyboardAction;
     /** The originating `KeyboardEvent.key`. */
@@ -583,6 +599,12 @@ interface KeyboardOptions {
     deleteSelectedDrawing?: boolean;
     /** Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z (or Ctrl+Y). Default true. */
     undoRedo?: boolean;
+    /**
+     * While replay is running, arrows step the tape (Shift steps 10) and Space
+     * toggles playback, instead of panning. Only applies during replay.
+     * Default true.
+     */
+    replay?: boolean;
 }
 /**
  * Deep zoom-out rendering. Once bars are narrower than `thresholdPx`, several
@@ -1035,6 +1057,11 @@ interface ChartInstance {
     stopReplay: () => void;
     /** Reveal `bars` more bars (negative rewinds). Default 1. */
     replayStep: (bars?: number) => void;
+    /**
+     * Jump straight to a bar index, for a scrubber or a "replay from here"
+     * action. Clamped to the series; playback continues from where it lands.
+     */
+    replaySeek: (index: number) => void;
     replayPlay: (speed?: number) => void;
     replayPause: () => void;
     /** Bars revealed per second. */