hyperprop-charting-library 0.1.142 → 0.1.144

package/dist/index.js

@@ -335,26 +335,45 @@ var getSeriesFingerprint = (data) => {
 var withCachedSeries = (key, data, compute) => {
   const fingerprint = getSeriesFingerprint(data);
   const existing = builtInSeriesCache.get(key);
-  if (existing && existing.fingerprint === fingerprint) {
-    return existing.values;
+  const shape = getSeriesShape(data);
+  if (existing) {
+    const unchanged = existing.fingerprint === fingerprint;
+    const liveTickWithinThrottle = !unchanged && indicatorLiveThrottleMs > 0 && existing.shape === shape && Date.now() - existing.computedAt < indicatorLiveThrottleMs;
+    if (unchanged || liveTickWithinThrottle) {
+      return existing.values;
+    }
   }
   const values = compute();
-  builtInSeriesCache.set(key, { fingerprint, values });
+  builtInSeriesCache.set(key, { fingerprint, values, shape, computedAt: Date.now() });
   return values;
 };
 var builtInComputationCache = /* @__PURE__ */ new Map();
+var indicatorLiveThrottleMs = 80;
+var setIndicatorLiveThrottleMs = (ms) => {
+  indicatorLiveThrottleMs = Math.max(0, ms);
+};
+var getSeriesShape = (data) => {
+  const length = data.length;
+  const last = length > 0 ? data[length - 1] : void 0;
+  return last ? `${length}|${last.time.getTime()}` : "empty";
+};
 var COMPUTATION_CACHE_MAX_ENTRIES = 128;
 var withCachedComputation = (key, data, compute) => {
   const fingerprint = getSeriesFingerprint(data);
   const existing = builtInComputationCache.get(key);
-  if (existing && existing.fingerprint === fingerprint) {
-    builtInComputationCache.delete(key);
-    builtInComputationCache.set(key, existing);
-    return existing.value;
+  const shape = getSeriesShape(data);
+  if (existing) {
+    const unchanged = existing.fingerprint === fingerprint;
+    const liveTickWithinThrottle = !unchanged && indicatorLiveThrottleMs > 0 && existing.shape === shape && Date.now() - existing.computedAt < indicatorLiveThrottleMs;
+    if (unchanged || liveTickWithinThrottle) {
+      builtInComputationCache.delete(key);
+      builtInComputationCache.set(key, existing);
+      return existing.value;
+    }
   }
   const value = compute();
   builtInComputationCache.delete(key);
-  builtInComputationCache.set(key, { fingerprint, value });
+  builtInComputationCache.set(key, { fingerprint, value, shape, computedAt: Date.now() });
   while (builtInComputationCache.size > COMPUTATION_CACHE_MAX_ENTRIES) {
     const oldest = builtInComputationCache.keys().next().value;
     if (oldest === void 0) break;
@@ -2724,6 +2743,237 @@ var CHART_THEMES = {
 var CHART_THEME_NAMES = Object.keys(CHART_THEMES);
 var resolveTheme = (theme) => typeof theme === "string" ? CHART_THEMES[theme] ?? CHART_THEMES.midnight : theme;
 
+// src/time.ts
+var DAY_MS = 864e5;
+var HOUR_MS = 36e5;
+var OFFSET_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+var LABEL_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+var getOffsetFormatter = (timeZone) => {
+  let formatter = OFFSET_FORMATTER_CACHE.get(timeZone);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    OFFSET_FORMATTER_CACHE.set(timeZone, formatter);
+  }
+  return formatter;
+};
+var getLabelFormatter = (timeZone, options, key) => {
+  const cacheKey = `${timeZone ?? "local"}|${key}`;
+  let formatter = LABEL_FORMATTER_CACHE.get(cacheKey);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(void 0, timeZone ? { ...options, timeZone } : options);
+    LABEL_FORMATTER_CACHE.set(cacheKey, formatter);
+  }
+  return formatter;
+};
+var isValidTimeZone = (timeZone) => {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone });
+    return true;
+  } catch {
+    return false;
+  }
+};
+var floorDiv = (value, divisor) => Math.floor(value / divisor);
+var positiveMod = (value, divisor) => (value % divisor + divisor) % divisor;
+var computeOffsetMs = (timeZone, ms) => {
+  const parts = getOffsetFormatter(timeZone).formatToParts(new Date(ms));
+  let year = 0;
+  let month = 1;
+  let day = 1;
+  let hour = 0;
+  let minute = 0;
+  let second = 0;
+  for (const part of parts) {
+    const value = Number(part.value);
+    if (part.type === "year") year = value;
+    else if (part.type === "month") month = value;
+    else if (part.type === "day") day = value;
+    else if (part.type === "hour") hour = value === 24 ? 0 : value;
+    else if (part.type === "minute") minute = value;
+    else if (part.type === "second") second = value;
+  }
+  const asUtc = Date.UTC(year, month - 1, day, hour, minute, second);
+  return asUtc - Math.floor(ms / 1e3) * 1e3;
+};
+var createZoneClock = (timeZone) => {
+  const normalized = !timeZone || timeZone === "local" ? null : timeZone.toLowerCase() === "utc" ? "UTC" : isValidTimeZone(timeZone) ? timeZone : null;
+  if (normalized === null) {
+    const scratch = /* @__PURE__ */ new Date();
+    const partsOf2 = (ms) => {
+      scratch.setTime(ms);
+      return {
+        year: scratch.getFullYear(),
+        month: scratch.getMonth() + 1,
+        day: scratch.getDate(),
+        hour: scratch.getHours(),
+        minute: scratch.getMinutes()
+      };
+    };
+    return {
+      timeZone: null,
+      offsetMs: (ms) => {
+        scratch.setTime(ms);
+        return -scratch.getTimezoneOffset() * 6e4;
+      },
+      dayKey: (ms) => {
+        scratch.setTime(ms);
+        return floorDiv(Date.UTC(scratch.getFullYear(), scratch.getMonth(), scratch.getDate()), DAY_MS);
+      },
+      minutesOfDay: (ms) => {
+        scratch.setTime(ms);
+        return scratch.getHours() * 60 + scratch.getMinutes();
+      },
+      weekday: (ms) => {
+        scratch.setTime(ms);
+        return scratch.getDay();
+      },
+      parts: partsOf2,
+      formatTime: (ms, hour12) => formatClockTime(partsOf2(ms), hour12),
+      formatDayMonth: (ms) => getLabelFormatter(null, { month: "short", day: "numeric" }, "md").format(ms),
+      formatMonth: (ms) => getLabelFormatter(null, { month: "short" }, "m").format(ms),
+      formatYear: (ms) => String(partsOf2(ms).year)
+    };
+  }
+  const zone = normalized;
+  const offsetCache = /* @__PURE__ */ new Map();
+  const offsetMs = (ms) => {
+    const bucket = floorDiv(ms, HOUR_MS);
+    const cached = offsetCache.get(bucket);
+    if (cached !== void 0) return cached;
+    const offset = computeOffsetMs(zone, ms);
+    if (offsetCache.size > 2e4) offsetCache.clear();
+    offsetCache.set(bucket, offset);
+    return offset;
+  };
+  const localMs = (ms) => ms + offsetMs(ms);
+  const partsOf = (ms) => {
+    const local = new Date(localMs(ms));
+    return {
+      year: local.getUTCFullYear(),
+      month: local.getUTCMonth() + 1,
+      day: local.getUTCDate(),
+      hour: local.getUTCHours(),
+      minute: local.getUTCMinutes()
+    };
+  };
+  return {
+    timeZone: zone,
+    offsetMs,
+    dayKey: (ms) => floorDiv(localMs(ms), DAY_MS),
+    minutesOfDay: (ms) => floorDiv(positiveMod(localMs(ms), DAY_MS), 6e4),
+    // 1970-01-01 was a Thursday (index 4).
+    weekday: (ms) => positiveMod(floorDiv(localMs(ms), DAY_MS) + 4, 7),
+    parts: partsOf,
+    formatTime: (ms, hour12) => formatClockTime(partsOf(ms), hour12),
+    formatDayMonth: (ms) => getLabelFormatter(zone, { month: "short", day: "numeric" }, "md").format(ms),
+    formatMonth: (ms) => getLabelFormatter(zone, { month: "short" }, "m").format(ms),
+    formatYear: (ms) => String(partsOf(ms).year)
+  };
+};
+var pad2 = (value) => value < 10 ? `0${value}` : String(value);
+var formatClockTime = (parts, hour12) => {
+  if (!hour12) return `${pad2(parts.hour)}:${pad2(parts.minute)}`;
+  const suffix = parts.hour < 12 ? "AM" : "PM";
+  const hour = parts.hour % 12 === 0 ? 12 : parts.hour % 12;
+  return `${hour}:${pad2(parts.minute)} ${suffix}`;
+};
+var parseHhMm = (value) => {
+  const match = /^(\d{1,2}):?(\d{2})$/.exec(value.trim());
+  if (!match) return null;
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (!Number.isFinite(hour) || !Number.isFinite(minute)) return null;
+  if (hour < 0 || hour > 24 || minute < 0 || minute > 59) return null;
+  return hour * 60 + minute;
+};
+var SESSION_PRESETS = {
+  "cme-futures": {
+    timezone: "America/New_York",
+    // Opening days: the session opens Sunday–Thursday evening and runs into
+    // the following morning, so Friday evening (weekend) is correctly closed.
+    days: [0, 1, 2, 3, 4],
+    segments: [{ start: "18:00", end: "17:00" }]
+  },
+  "cme-rth": {
+    timezone: "America/New_York",
+    days: [1, 2, 3, 4, 5],
+    segments: [{ start: "09:30", end: "16:00" }]
+  },
+  "us-equities": {
+    timezone: "America/New_York",
+    days: [1, 2, 3, 4, 5],
+    segments: [{ start: "09:30", end: "16:00" }]
+  },
+  "us-equities-extended": {
+    timezone: "America/New_York",
+    days: [1, 2, 3, 4, 5],
+    segments: [{ start: "04:00", end: "20:00" }]
+  },
+  "24x7": {
+    days: [0, 1, 2, 3, 4, 5, 6],
+    segments: [{ start: "00:00", end: "24:00" }]
+  }
+};
+var resolveSessionSpec = (spec) => {
+  if (!spec) return null;
+  if (typeof spec === "string") return SESSION_PRESETS[spec] ?? null;
+  return spec;
+};
+var compileSession = (spec) => {
+  const resolved = resolveSessionSpec(spec);
+  if (!resolved) return null;
+  const rawSegments = resolved.segments?.length ? resolved.segments : [{ start: "00:00", end: "24:00" }];
+  const segments = [];
+  for (const segment of rawSegments) {
+    const startMinutes = parseHhMm(segment.start);
+    const endMinutesRaw = parseHhMm(segment.end);
+    if (startMinutes === null || endMinutesRaw === null) continue;
+    const endMinutes = endMinutesRaw === 0 ? 1440 : endMinutesRaw;
+    segments.push({ startMinutes, endMinutes, wraps: endMinutes <= startMinutes });
+  }
+  if (segments.length === 0) return null;
+  return {
+    clock: createZoneClock(resolved.timezone ?? null),
+    days: new Set(resolved.days ?? [1, 2, 3, 4, 5]),
+    segments,
+    overnight: segments.some((segment) => segment.wraps)
+  };
+};
+var sessionInfoAt = (session, ms) => {
+  const { clock } = session;
+  const dayKey = clock.dayKey(ms);
+  const minutes = clock.minutesOfDay(ms);
+  const weekday = clock.weekday(ms);
+  let sessionDay = dayKey;
+  let inSession = false;
+  for (const segment of session.segments) {
+    if (segment.wraps) {
+      if (minutes >= segment.startMinutes) {
+        if (session.days.has(weekday)) {
+          inSession = true;
+          sessionDay = dayKey + 1;
+        }
+      } else if (minutes < segment.endMinutes) {
+        const openedWeekday = positiveMod(weekday - 1, 7);
+        if (session.days.has(openedWeekday)) inSession = true;
+        sessionDay = dayKey;
+      }
+    } else if (minutes >= segment.startMinutes && minutes < segment.endMinutes && session.days.has(weekday)) {
+      inSession = true;
+    }
+  }
+  return { inSession, sessionDay };
+};
+
 // src/options.ts
 var DEFAULT_GRID_OPTIONS = {
   color: "#2b2f38",
@@ -2924,10 +3174,36 @@ var DEFAULT_OPTIONS = {
   accessibility: { label: "Price chart", description: "", focusable: true },
   downsampling: { enabled: true, thresholdPx: 1.5 },
   touch: { hitToleranceScale: 2.2, longPressTooltip: true, longPressMs: 400 },
+  dataLine: {
+    visible: false,
+    symbol: "",
+    interval: "",
+    exchange: "",
+    showOhlc: true,
+    showChange: true,
+    showVolume: false,
+    details: [],
+    statusColor: "",
+    fontSize: 0,
+    symbolColor: "",
+    textColor: ""
+  },
   datafeedOptions: { prefetchThresholdBars: 150, cooldownMs: 1200, chunkBars: 1500 },
+  animation: { viewportTransitions: true, durationMs: 260 },
+  indicatorUpdate: { liveThrottleMs: 80 },
+  timezone: "local",
+  timeFormat: "24h",
+  session: {
+    spec: null,
+    separators: true,
+    highlightOutOfSession: false,
+    outOfSessionColor: "rgba(120,132,158,0.07)"
+  },
+  history: { enabled: true, limit: 100 },
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
   grid: DEFAULT_GRID_OPTIONS,
   watermark: DEFAULT_WATERMARK_OPTIONS,
+  alerts: [],
   priceLines: [],
   orderLines: [],
   tickerLine: {
@@ -2983,6 +3259,26 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.touch,
     ...options.touch ?? {}
   },
+  dataLine: {
+    ...baseOptions.dataLine,
+    ...options.dataLine ?? {}
+  },
+  animation: {
+    ...baseOptions.animation,
+    ...options.animation ?? {}
+  },
+  indicatorUpdate: {
+    ...baseOptions.indicatorUpdate,
+    ...options.indicatorUpdate ?? {}
+  },
+  session: {
+    ...baseOptions.session,
+    ...options.session ?? {}
+  },
+  history: {
+    ...baseOptions.history,
+    ...options.history ?? {}
+  },
   datafeedOptions: {
     ...baseOptions.datafeedOptions,
     ...options.datafeedOptions ?? {}
@@ -3146,6 +3442,45 @@ function createChart(element, options = {}) {
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let tradeMarkers = [];
+  let timezoneSetting = mergedOptions.timezone ?? "local";
+  let zoneClock = createZoneClock(timezoneSetting);
+  let timeFormat = mergedOptions.timeFormat === "12h" ? "12h" : "24h";
+  const DEFAULT_SESSION_OPTIONS = {
+    spec: null,
+    separators: true,
+    highlightOutOfSession: false,
+    outOfSessionColor: "rgba(120,132,158,0.07)"
+  };
+  let sessionOptions = {
+    ...DEFAULT_SESSION_OPTIONS,
+    ...mergedOptions.session ?? {}
+  };
+  let compiledSession = compileSession(sessionOptions.spec);
+  const isHour12 = () => timeFormat === "12h";
+  const formatClock = (time) => zoneClock.formatTime(time.getTime(), isHour12());
+  let barMarks = [];
+  let timescaleMarks = [];
+  let markRegions = [];
+  let hoveredMarkKey = null;
+  let markClickHandler = null;
+  let markHoverHandler = null;
+  let alerts = [];
+  let generatedAlertId = 1;
+  let alertTriggerHandler = null;
+  let alertActionHandler = null;
+  let alertRegions = [];
+  let alertDragState = null;
+  let hoveredAlertId = null;
+  let replay = null;
+  let replayStateHandler = null;
+  const historyEnabled = mergedOptions.history?.enabled !== false;
+  const historyLimit = Math.max(1, Math.floor(Number(mergedOptions.history?.limit ?? 100)) || 100);
+  let historyPast = [];
+  let historyFuture = [];
+  let historyBaseline = "";
+  let historySuspended = 0;
+  let undoRedoStateHandler = null;
+  let lastUndoRedoSignature = "";
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
   let drawings = dedupeDrawingIds(
     (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing))
@@ -3194,9 +3529,168 @@ function createChart(element, options = {}) {
   let selectedDrawingId = null;
   const drawingToolDefaults = /* @__PURE__ */ new Map();
   const getDrawingToolDefaults = (tool) => drawingToolDefaults.get(tool) ?? {};
+  const historyDoc = () => JSON.stringify(drawings.map((drawing) => serializeDrawing(drawing)));
+  const describeHistoryChange = (beforeDoc, afterDoc) => {
+    let before = [];
+    let after = [];
+    try {
+      before = JSON.parse(beforeDoc);
+      after = JSON.parse(afterDoc);
+    } catch {
+      return "Edit drawings";
+    }
+    const label = (type) => type ? type.replace(/-/g, " ") : "drawing";
+    if (after.length > before.length) {
+      const beforeIds = new Set(before.map((drawing) => drawing.id));
+      const added = after.find((drawing) => !beforeIds.has(drawing.id));
+      return `Add ${label(added?.type)}`;
+    }
+    if (after.length < before.length) {
+      if (after.length === 0 && before.length > 1) return "Clear drawings";
+      const afterIds = new Set(after.map((drawing) => drawing.id));
+      const removed = before.find((drawing) => !afterIds.has(drawing.id));
+      return `Delete ${label(removed?.type)}`;
+    }
+    const changed = after.find((drawing, index) => JSON.stringify(drawing) !== JSON.stringify(before[index]));
+    return `Edit ${label(changed?.type)}`;
+  };
+  const getUndoRedoState = () => ({
+    canUndo: historyPast.length > 0,
+    canRedo: historyFuture.length > 0,
+    undoLabel: historyPast.length > 0 ? historyPast[historyPast.length - 1].label : null,
+    redoLabel: historyFuture.length > 0 ? historyFuture[historyFuture.length - 1].label : null
+  });
+  const emitUndoRedoState = () => {
+    const state = getUndoRedoState();
+    const signature = `${state.canUndo}|${state.canRedo}|${state.undoLabel}|${state.redoLabel}`;
+    if (signature === lastUndoRedoSignature) return;
+    lastUndoRedoSignature = signature;
+    undoRedoStateHandler?.(state);
+  };
+  const commitHistory = () => {
+    if (!historyEnabled || historySuspended > 0) return;
+    if (drawingDragState !== null) return;
+    const next = historyDoc();
+    if (next === historyBaseline) return;
+    historyPast.push({ label: describeHistoryChange(historyBaseline, next), doc: historyBaseline });
+    if (historyPast.length > historyLimit) historyPast.shift();
+    historyFuture = [];
+    historyBaseline = next;
+    emitUndoRedoState();
+  };
+  const resetHistoryBaseline = () => {
+    historyBaseline = historyDoc();
+  };
+  const applyHistoryDoc = (doc) => {
+    let parsed;
+    try {
+      parsed = JSON.parse(doc);
+    } catch {
+      return;
+    }
+    historySuspended += 1;
+    try {
+      drawings = dedupeDrawingIds(parsed.map((drawing) => normalizeDrawingState(drawing)));
+      if (selectedDrawingId !== null && !drawings.some((drawing) => drawing.id === selectedDrawingId)) {
+        selectedDrawingId = null;
+      }
+      draftDrawing = null;
+      drawingDragState = null;
+      historyBaseline = doc;
+      emitDrawingsChange();
+      scheduleDraw({ updateAutoScale: true });
+    } finally {
+      historySuspended -= 1;
+    }
+  };
+  const undo = () => {
+    if (!historyEnabled || historyPast.length === 0) return false;
+    const entry = historyPast.pop();
+    historyFuture.push({ label: entry.label, doc: historyBaseline });
+    applyHistoryDoc(entry.doc);
+    emitUndoRedoState();
+    return true;
+  };
+  const redo = () => {
+    if (!historyEnabled || historyFuture.length === 0) return false;
+    const entry = historyFuture.pop();
+    historyPast.push({ label: entry.label, doc: historyBaseline });
+    applyHistoryDoc(entry.doc);
+    emitUndoRedoState();
+    return true;
+  };
+  const clearHistory = () => {
+    historyPast = [];
+    historyFuture = [];
+    resetHistoryBaseline();
+    emitUndoRedoState();
+  };
   const emitDrawingsChange = () => {
+    commitHistory();
     drawingsChangeHandler?.(drawings.map((drawing) => serializeDrawing(drawing)));
   };
+  const normalizeAlert = (alert) => ({
+    id: alert.id ?? `alert-${generatedAlertId++}`,
+    price: Number(alert.price),
+    condition: alert.condition ?? "crossing",
+    label: alert.label ?? "",
+    color: alert.color ?? "#f7a600",
+    active: alert.active !== false,
+    triggered: alert.triggered === true,
+    once: alert.once !== false,
+    draggable: alert.draggable !== false,
+    lastPrice: null
+  });
+  const serializeAlert = (alert) => ({
+    id: alert.id,
+    price: alert.price,
+    condition: alert.condition,
+    label: alert.label,
+    color: alert.color,
+    active: alert.active,
+    triggered: alert.triggered,
+    once: alert.once,
+    draggable: alert.draggable
+  });
+  const evaluateAlerts = (price, timeMs, index) => {
+    if (alerts.length === 0 || !Number.isFinite(price)) return;
+    for (const alert of alerts) {
+      if (!alert.active || alert.triggered || !Number.isFinite(alert.price)) {
+        alert.lastPrice = price;
+        continue;
+      }
+      const previous = alert.lastPrice;
+      let hit = false;
+      switch (alert.condition) {
+        case "greater":
+          hit = price > alert.price;
+          break;
+        case "less":
+          hit = price < alert.price;
+          break;
+        case "crossing-up":
+          hit = previous !== null && previous < alert.price && price >= alert.price;
+          break;
+        case "crossing-down":
+          hit = previous !== null && previous > alert.price && price <= alert.price;
+          break;
+        default:
+          hit = previous !== null && (previous < alert.price && price >= alert.price || previous > alert.price && price <= alert.price);
+          break;
+      }
+      alert.lastPrice = price;
+      if (!hit) continue;
+      alert.triggered = true;
+      if (alert.once) alert.active = false;
+      alertTriggerHandler?.({ alert: serializeAlert(alert), price, timeMs, index });
+      scheduleDraw({ overlayOnly: false });
+    }
+  };
+  const evaluateAlertsFromLatestBar = () => {
+    if (alerts.length === 0 || data.length === 0) return;
+    const last = data[data.length - 1];
+    evaluateAlerts(last.c, last.time.getTime(), data.length - 1);
+  };
   const orderWidgetWidthById = /* @__PURE__ */ new Map();
   const orderPriceTagWidthById = /* @__PURE__ */ new Map();
   let xCenter = 0;
@@ -3242,6 +3736,7 @@ function createChart(element, options = {}) {
   let crosshairPoint = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
+  setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
   let noOverlappingLineLabels = DEFAULT_LABELS_OPTIONS.noOverlapping;
   let rightAxisLabelSlots = [];
   let plotLabelSlots = [];
@@ -3368,6 +3863,9 @@ function createChart(element, options = {}) {
   let overlayLayout = null;
   const margin = { top: 16, right: 72, bottom: 26, left: 12 };
   let cachedRightMargin = margin.right;
+  let rightMarginShrinkPendingSince = null;
+  const RIGHT_MARGIN_SHRINK_DELAY_MS = 600;
+  const RIGHT_MARGIN_SHRINK_EPSILON_PX = 2;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
   const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
@@ -3483,21 +3981,69 @@ function createChart(element, options = {}) {
       Math.min(highCenter, count + maxPanBars)
     );
   };
-  const fitXViewport = () => {
-    const count = data.length;
-    if (count === 0) {
-      xCenter = 0;
-      xSpan = 60;
-      return;
+  let viewportTweenRaf = null;
+  const cancelViewportTween = () => {
+    if (viewportTweenRaf !== null) {
+      cancelAnimationFrame(viewportTweenRaf);
+      viewportTweenRaf = null;
+    }
+  };
+  const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const animateViewportTo = (targetCenter, targetSpan, onComplete) => {
+    const animation = mergedOptions.animation ?? DEFAULT_OPTIONS.animation;
+    const duration = Math.max(0, animation?.durationMs ?? 260);
+    const startCenter = xCenter;
+    const startSpan = xSpan;
+    const centerDelta = targetCenter - startCenter;
+    const spanRatio = startSpan > 0 ? targetSpan / startSpan : 1;
+    const negligible = Math.abs(centerDelta) < 0.5 && Math.abs(spanRatio - 1) < 0.01;
+    if (animation?.viewportTransitions === false || duration === 0 || negligible || prefersReducedMotion() || typeof requestAnimationFrame !== "function") {
+      xCenter = targetCenter;
+      xSpan = targetSpan;
+      clampXViewport();
+      onComplete?.();
+      emitViewportChange();
+      scheduleDraw();
+      return false;
     }
+    cancelViewportTween();
+    const startedAt = performance.now();
+    const step = (now) => {
+      const t = clamp((now - startedAt) / duration, 0, 1);
+      const eased = 1 - Math.pow(1 - t, 3);
+      xCenter = startCenter + centerDelta * eased;
+      xSpan = startSpan * Math.pow(spanRatio, eased);
+      clampXViewport();
+      scheduleDraw();
+      if (t < 1) {
+        viewportTweenRaf = requestAnimationFrame(step);
+        return;
+      }
+      viewportTweenRaf = null;
+      xCenter = targetCenter;
+      xSpan = targetSpan;
+      clampXViewport();
+      onComplete?.();
+      emitViewportChange();
+      scheduleDraw();
+    };
+    viewportTweenRaf = requestAnimationFrame(step);
+    return true;
+  };
+  const getFitXTarget = () => {
+    const count = data.length;
+    if (count === 0) return { center: 0, span: 60 };
     const maxSpan = Math.min(maxVisibleBars, Math.max(minVisibleBars, count + maxPanBars * 2));
-    const requestedVisibleBars = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
-    xSpan = requestedVisibleBars;
-    if (mergedOptions.initialViewport === "center") {
-      xCenter = count / 2;
-    } else {
-      xCenter = count - xSpan / 2 + rightEdgePaddingBars;
-    }
+    const span = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
+    return {
+      center: mergedOptions.initialViewport === "center" ? count / 2 : count - span / 2 + rightEdgePaddingBars,
+      span
+    };
+  };
+  const fitXViewport = () => {
+    const target = getFitXTarget();
+    xSpan = target.span;
+    xCenter = target.center;
     clampXViewport();
   };
   const getYBounds = () => {
@@ -3647,6 +4193,7 @@ function createChart(element, options = {}) {
   };
   const resetRightMarginCache = () => {
     cachedRightMargin = margin.right;
+    rightMarginShrinkPendingSince = null;
   };
   const parseData = (nextData) => {
     const dedupedByTime = /* @__PURE__ */ new Map();
@@ -4009,40 +4556,13 @@ function createChart(element, options = {}) {
     datafeedUnsubscribe = typeof unsubscribe === "function" ? unsubscribe : null;
   };
   const formatHoverTimeLabel = (time, mode) => {
-    if (mode === "time") {
-      return time.toLocaleTimeString(void 0, {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false
-      });
-    }
-    if (mode === "datetime") {
-      return time.toLocaleString(void 0, {
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false
-      });
-    }
-    if (mode === "date") {
-      return time.toLocaleDateString(void 0, {
-        month: "short",
-        day: "numeric"
-      });
-    }
+    const ms = time.getTime();
+    if (mode === "time") return formatClock(time);
+    if (mode === "datetime") return `${zoneClock.formatDayMonth(ms)}, ${formatClock(time)}`;
+    if (mode === "date") return zoneClock.formatDayMonth(ms);
     const stepMs = getTimeStepMs();
-    if (stepMs < 24 * 60 * 60 * 1e3) {
-      return time.toLocaleTimeString(void 0, {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false
-      });
-    }
-    return time.toLocaleDateString(void 0, {
-      month: "short",
-      day: "numeric"
-    });
+    if (stepMs < 24 * 60 * 60 * 1e3) return formatClock(time);
+    return zoneClock.formatDayMonth(ms);
   };
   const drawText = (text, x, y, align = "left", baseline = "alphabetic", color = mergedOptions.axis?.textColor ?? mergedOptions.axisColor) => {
     ctx.fillStyle = color;
@@ -4139,6 +4659,86 @@ function createChart(element, options = {}) {
       labelTextColorOn(mergedLine.labelBackgroundColor, mergedLine.labelTextColor)
     );
   };
+  const drawBellGlyph = (x, y, size, color) => {
+    const w = size;
+    const h = size;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w * 0.42, y + h * 0.28);
+    ctx.quadraticCurveTo(x - w * 0.3, y + h * 0.2, x - w * 0.3, y - h * 0.05);
+    ctx.quadraticCurveTo(x - w * 0.3, y - h * 0.46, x, y - h * 0.46);
+    ctx.quadraticCurveTo(x + w * 0.3, y - h * 0.46, x + w * 0.3, y - h * 0.05);
+    ctx.quadraticCurveTo(x + w * 0.3, y + h * 0.2, x + w * 0.42, y + h * 0.28);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(x, y + h * 0.42, Math.max(1, w * 0.1), 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  };
+  const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
+    const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
+    if (lineY === null) return;
+    const dim = alert.triggered || !alert.active;
+    const color = alert.color || "#f7a600";
+    const axis = resolvedAxis;
+    ctx.save();
+    ctx.globalAlpha = dim ? 0.5 : 1;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    applyDashPattern("dashed", dashPatterns.dotted, dashPatterns.dashed);
+    ctx.beginPath();
+    ctx.moveTo(crisp(chartLeft), crisp(lineY));
+    ctx.lineTo(crisp(chartRight), crisp(lineY));
+    ctx.stroke();
+    ctx.restore();
+    const fontSize = Math.max(8, axis.fontSize);
+    ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
+    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
+    const paddingX = 6;
+    const bellWidth = fontSize + 2;
+    const labelHeight = 20;
+    const hovered = hoveredAlertId === alert.id;
+    const removeWidth = hovered ? labelHeight : 0;
+    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
+    const labelX = getRightAxisLabelX(chartRight);
+    const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
+    ctx.save();
+    ctx.globalAlpha = dim ? 0.6 : 1;
+    ctx.fillStyle = color;
+    fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
+    const inkColor = labelTextColorOn(color, "#101114");
+    drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
+    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    if (hovered) {
+      const removeX = labelX + labelWidth - removeWidth;
+      ctx.strokeStyle = inkColor;
+      ctx.lineWidth = 1.4;
+      const inset = 6;
+      ctx.beginPath();
+      ctx.moveTo(removeX + inset, labelY + inset);
+      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
+      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
+      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
+      ctx.stroke();
+      alertRegions.push({
+        id: alert.id,
+        x: removeX,
+        y: labelY,
+        width: removeWidth,
+        height: labelHeight,
+        part: "remove"
+      });
+    }
+    ctx.restore();
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
+  };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
     const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
@@ -4423,6 +5023,37 @@ function createChart(element, options = {}) {
     ctx.closePath();
     ctx.stroke();
   };
+  const drawMarkBadge = (x, y, radius, color, shape, label, textColor) => {
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    if (shape === "square") {
+      ctx.rect(x - radius, y - radius, radius * 2, radius * 2);
+    } else if (shape === "diamond") {
+      ctx.moveTo(x, y - radius);
+      ctx.lineTo(x + radius, y);
+      ctx.lineTo(x, y + radius);
+      ctx.lineTo(x - radius, y);
+      ctx.closePath();
+    } else if (shape === "flag") {
+      ctx.rect(x - radius * 0.16, y - radius, radius * 0.32, radius * 2);
+      ctx.moveTo(x + radius * 0.16, y - radius);
+      ctx.lineTo(x + radius * 1.35, y - radius * 0.45);
+      ctx.lineTo(x + radius * 0.16, y + radius * 0.1);
+      ctx.closePath();
+    } else {
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+    }
+    ctx.fill();
+    if (label && shape !== "flag") {
+      ctx.fillStyle = textColor;
+      ctx.font = `600 ${Math.max(8, Math.round(radius * 1.2))}px ${mergedOptions.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(label.slice(0, 2), x, y + 0.5);
+    }
+    ctx.restore();
+  };
   const setCrosshairPoint = (point) => {
     const current = crosshairPoint;
     if (point === null && current === null) {
@@ -4470,6 +5101,8 @@ function createChart(element, options = {}) {
     const shouldUpdateAutoScale = options2.updateAutoScale ?? true;
     orderActionRegions = [];
     orderDragRegions = [];
+    alertRegions = [];
+    markRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -4552,7 +5185,23 @@ function createChart(element, options = {}) {
       }
       const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
       const nextRightMargin = Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
-      cachedRightMargin = Math.max(cachedRightMargin, nextRightMargin);
+      if (nextRightMargin >= cachedRightMargin) {
+        cachedRightMargin = nextRightMargin;
+        rightMarginShrinkPendingSince = null;
+      } else if (cachedRightMargin - nextRightMargin > RIGHT_MARGIN_SHRINK_EPSILON_PX) {
+        const now = performance.now();
+        if (rightMarginShrinkPendingSince === null) {
+          rightMarginShrinkPendingSince = now;
+        }
+        if (now - rightMarginShrinkPendingSince >= RIGHT_MARGIN_SHRINK_DELAY_MS) {
+          cachedRightMargin = nextRightMargin;
+          rightMarginShrinkPendingSince = null;
+        } else {
+          scheduleDraw({ updateAutoScale: false });
+        }
+      } else {
+        rightMarginShrinkPendingSince = null;
+      }
       return Math.min(maxRightMargin, cachedRightMargin);
     };
     const rightMargin = estimateRightMargin();
@@ -5725,12 +6374,14 @@ function createChart(element, options = {}) {
         if (!prevTime) {
           weight = 7;
         } else {
-          if (prevTime.getFullYear() !== time.getFullYear()) weight = 9;
-          else if (prevTime.getMonth() !== time.getMonth()) weight = 8;
-          else if (prevTime.getDate() !== time.getDate()) weight = 7;
+          const prev = zoneClock.parts(prevTime.getTime());
+          const current = zoneClock.parts(time.getTime());
+          if (prev.year !== current.year) weight = 9;
+          else if (prev.month !== current.month) weight = 8;
+          else if (prev.day !== current.day) weight = 7;
           else {
-            const prevMinutes = prevTime.getHours() * 60 + prevTime.getMinutes();
-            const curMinutes = time.getHours() * 60 + time.getMinutes();
+            const prevMinutes = prev.hour * 60 + prev.minute;
+            const curMinutes = current.hour * 60 + current.minute;
             const crossed = (span) => Math.floor(prevMinutes / span) !== Math.floor(curMinutes / span);
             if (crossed(360)) weight = 6;
             else if (crossed(60)) weight = 5;
@@ -5776,31 +6427,64 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.restore();
     }
-    if (grid.sessionSeparators && data.length > 1) {
+    const sessionSeparatorsOn = grid.sessionSeparators || compiledSession !== null && sessionOptions.separators !== false;
+    const intradaySeries = (() => {
+      if (data.length < 2) return false;
+      const probe = Math.min(Math.max(1, startIndex), data.length - 1);
+      const delta = Math.abs(data[probe].time.getTime() - data[probe - 1].time.getTime());
+      return delta > 0 && delta < 0.9 * 864e5;
+    })();
+    if (compiledSession && sessionOptions.highlightOutOfSession && intradaySeries && data.length > 0) {
+      const session = compiledSession;
+      ctx.save();
+      ctx.fillStyle = sessionOptions.outOfSessionColor;
+      let runStart = null;
+      const flushRun = (endExclusive) => {
+        if (runStart === null) return;
+        const left = chartLeft + (runStart - xStart) / xSpan * chartWidth;
+        const right = chartLeft + (endExclusive - xStart) / xSpan * chartWidth;
+        const clampedLeft = Math.max(chartLeft, left);
+        const clampedRight = Math.min(chartRight, right);
+        if (clampedRight > clampedLeft) {
+          ctx.fillRect(clampedLeft, chartTop, clampedRight - clampedLeft, fullChartBottom - chartTop);
+        }
+        runStart = null;
+      };
+      for (let index = Math.max(0, startIndex); index <= endIndex; index += 1) {
+        const point = data[index];
+        if (!point) continue;
+        const inSession = sessionInfoAt(session, point.time.getTime()).inSession;
+        if (!inSession) {
+          if (runStart === null) runStart = index;
+        } else {
+          flushRun(index);
+        }
+      }
+      flushRun(endIndex + 1);
+      ctx.restore();
+    }
+    if (sessionSeparatorsOn && data.length > 1 && intradaySeries) {
       const first = Math.max(1, startIndex);
-      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
-      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
-        const SESSION_ANCHOR_MS = 22 * 36e5;
-        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
-        ctx.save();
-        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
-        ctx.strokeStyle = grid.sessionSeparatorColor;
-        ctx.lineWidth = 1;
-        for (let index = first; index <= endIndex; index += 1) {
-          const point = data[index];
-          const prev = data[index - 1];
-          if (!point || !prev) continue;
-          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
-            continue;
-          }
-          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
-          ctx.beginPath();
-          ctx.moveTo(crisp(x), crisp(chartTop));
-          ctx.lineTo(crisp(x), crisp(fullChartBottom));
-          ctx.stroke();
+      const session = compiledSession;
+      const dayOf = (ms) => session ? sessionInfoAt(session, ms).sessionDay : zoneClock.dayKey(ms);
+      ctx.save();
+      ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+      ctx.strokeStyle = grid.sessionSeparatorColor;
+      ctx.lineWidth = 1;
+      for (let index = first; index <= endIndex; index += 1) {
+        const point = data[index];
+        const prev = data[index - 1];
+        if (!point || !prev) continue;
+        if (dayOf(point.time.getTime()) === dayOf(prev.time.getTime())) {
+          continue;
         }
-        ctx.restore();
+        const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+        ctx.beginPath();
+        ctx.moveTo(crisp(x), crisp(chartTop));
+        ctx.lineTo(crisp(x), crisp(fullChartBottom));
+        ctx.stroke();
       }
+      ctx.restore();
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
@@ -6381,6 +7065,35 @@ function createChart(element, options = {}) {
       ctx.textAlign = prevAlign;
       ctx.textBaseline = prevBaseline;
     }
+    if (barMarks.length > 0 && data.length > 0) {
+      const prevFont = ctx.font;
+      const prevAlign = ctx.textAlign;
+      const prevBaseline = ctx.textBaseline;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      for (const mark of barMarks) {
+        const ms = typeof mark.time === "number" ? mark.time : Date.parse(String(mark.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = findNearestIndexForTimeMs(ms);
+        if (index === null) continue;
+        const bar = data[index];
+        if (!bar) continue;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        if (x < chartLeft - 20 || x > chartRight + 20) continue;
+        const radius = Math.max(4, Number(mark.size) || 7);
+        const above = mark.position === "above";
+        const y = Number.isFinite(mark.price) ? yFromPrice(Number(mark.price)) : above ? yFromPrice(bar.h) - radius - 8 : yFromPrice(bar.l) + radius + 8;
+        if (y < chartTop - radius || y > chartBottom + radius) continue;
+        const key = mark.id ?? `bar:${index}:${mark.label ?? ""}`;
+        const hovered = hoveredMarkKey === `bar|${key}`;
+        const color = mark.color ?? "#f7a600";
+        drawMarkBadge(x, y, hovered ? radius + 1.5 : radius, color, mark.shape ?? "circle", mark.label ?? "", mark.textColor ?? "#101114");
+        markRegions.push({ kind: "bar", mark, id: key, x, y, radius: radius + 3 });
+      }
+      ctx.font = prevFont;
+      ctx.textAlign = prevAlign;
+      ctx.textBaseline = prevBaseline;
+    }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
     if (positionAxisGutter > 0) {
@@ -6891,9 +7604,79 @@ function createChart(element, options = {}) {
     for (const priceLine of priceLines) {
       drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    for (const alert of alerts) {
+      drawAlertLine(alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
+    }
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    let dataLineBottom = chartTop;
+    const dataLine = mergedOptions.dataLine;
+    if (dataLine?.visible && data.length > 0) {
+      const hoverIndex = crosshairPoint && getHitRegion(crosshairPoint.x, crosshairPoint.y) === "plot" ? indexFromCanvasX(crosshairPoint.x) : null;
+      const barIndex = hoverIndex !== null && hoverIndex >= 0 && hoverIndex < data.length ? hoverIndex : data.length - 1;
+      const bar = data[barIndex];
+      if (bar) {
+        const prevFont = ctx.font;
+        const fontSize = Math.max(9, dataLine.fontSize || axis.fontSize);
+        ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "top";
+        ctx.textAlign = "left";
+        const symbolColor = dataLine.symbolColor || axis.textColor;
+        const textColor = dataLine.textColor || labels.indicatorTextColor;
+        const changeAbs = bar.c - bar.o;
+        const changeColor = changeAbs >= 0 ? mergedOptions.upColor : mergedOptions.downColor;
+        const rowY = chartTop + 6;
+        let cursorX = chartLeft + 10;
+        if (dataLine.statusColor) {
+          const dotRadius = Math.max(2.5, fontSize / 4);
+          ctx.fillStyle = dataLine.statusColor;
+          ctx.beginPath();
+          ctx.arc(cursorX + dotRadius, rowY + fontSize / 2, dotRadius, 0, Math.PI * 2);
+          ctx.fill();
+          cursorX += dotRadius * 2 + 6;
+        }
+        const headline = [dataLine.symbol, dataLine.interval, dataLine.exchange].filter((part) => part && part.length > 0).join(" \xB7 ");
+        if (headline) {
+          ctx.fillStyle = symbolColor;
+          ctx.fillText(headline, cursorX, rowY);
+          cursorX += measureTextWidth(headline) + 10;
+        }
+        if (dataLine.showOhlc !== false) {
+          const ohlc = `O${formatPrice(bar.o)} H${formatPrice(bar.h)} L${formatPrice(bar.l)} C${formatPrice(bar.c)}`;
+          ctx.fillStyle = changeColor;
+          ctx.fillText(ohlc, cursorX, rowY);
+          cursorX += measureTextWidth(ohlc) + 8;
+        }
+        if (dataLine.showChange !== false) {
+          const pct = bar.o !== 0 ? changeAbs / bar.o * 100 : 0;
+          const changeText = `${changeAbs >= 0 ? "+" : ""}${formatPrice(changeAbs)} (${changeAbs >= 0 ? "+" : ""}${pct.toFixed(2)}%)`;
+          ctx.fillStyle = changeColor;
+          ctx.fillText(changeText, cursorX, rowY);
+          cursorX += measureTextWidth(changeText) + 10;
+        }
+        if (dataLine.showVolume && bar.v !== void 0) {
+          const volumeText = `Vol ${bar.v >= 1e6 ? `${(bar.v / 1e6).toFixed(2)}M` : bar.v >= 1e3 ? `${(bar.v / 1e3).toFixed(1)}K` : String(Math.round(bar.v))}`;
+          ctx.fillStyle = textColor;
+          ctx.fillText(volumeText, cursorX, rowY);
+          cursorX += measureTextWidth(volumeText) + 10;
+        }
+        for (const detail of dataLine.details ?? []) {
+          const text = detail.label ? `${detail.label} ${detail.value}` : detail.value;
+          const width2 = measureTextWidth(text);
+          if (cursorX + width2 > chartRight - 4) break;
+          if (detail.background) {
+            ctx.fillStyle = detail.background;
+            fillRoundedRect(cursorX - 4, rowY - 2, width2 + 8, fontSize + 4, 3);
+          }
+          ctx.fillStyle = detail.color || textColor;
+          ctx.fillText(text, cursorX, rowY);
+          cursorX += width2 + 12;
+        }
+        dataLineBottom = rowY + fontSize + 4;
+        ctx.font = prevFont;
+      }
+    }
     if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
       const isLegendInputValue = (value) => {
         if (typeof value === "number" || typeof value === "boolean") {
@@ -6922,7 +7705,7 @@ function createChart(element, options = {}) {
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";
         const legendX = isRight ? chartRight - offsetX : chartLeft + offsetX;
-        const legendY = isBottom ? chartBottom - offsetY : chartTop + offsetY;
+        const legendY = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
         drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
         ctx.font = prevFont;
       }
@@ -6933,11 +7716,36 @@ function createChart(element, options = {}) {
       for (const tick of timeTicks) {
         const tickTime = getTimeForIndex(tick.index);
         if (!tickTime) continue;
-        const timeLabel = tick.weight >= 9 ? String(tickTime.getFullYear()) : tick.weight === 8 ? tickTime.toLocaleDateString(void 0, { month: "short" }) : tick.weight === 7 ? tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" }) : tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false });
+        const tickMs = tickTime.getTime();
+        const timeLabel = tick.weight >= 9 ? zoneClock.formatYear(tickMs) : tick.weight === 8 ? zoneClock.formatMonth(tickMs) : tick.weight === 7 ? zoneClock.formatDayMonth(tickMs) : formatClock(tickTime);
         drawText(timeLabel, tick.x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
       }
       ctx.font = prevFont;
     }
+    if (timescaleMarks.length > 0 && data.length > 0) {
+      const radius = 6;
+      const markY = fullChartBottom - radius - 2;
+      for (const mark of timescaleMarks) {
+        const ms = typeof mark.time === "number" ? mark.time : Date.parse(String(mark.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = findNearestIndexForTimeMs(ms);
+        if (index === null) continue;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        if (x < chartLeft - 10 || x > chartRight + 10) continue;
+        const key = mark.id ?? `ts:${index}:${mark.label ?? ""}`;
+        const hovered = hoveredMarkKey === `timescale|${key}`;
+        drawMarkBadge(
+          x,
+          markY,
+          hovered ? radius + 1.5 : radius,
+          mark.color ?? "#5b8def",
+          mark.shape ?? "circle",
+          mark.label ?? "",
+          mark.textColor ?? "#0b1220"
+        );
+        markRegions.push({ kind: "timescale", mark, id: key, x, y: markY, radius: radius + 3 });
+      }
+    }
     if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
       const stepMs = getTimeStepMs();
       const nowMs = Date.now() + (Number(mergedOptions.clockOffsetMs) || 0);
@@ -7463,27 +8271,24 @@ function createChart(element, options = {}) {
     scheduleDraw();
   };
   const fitContent = () => {
-    fitXViewport();
-    updateFollowLatest(true);
-    emitViewportChange();
-    scheduleDraw();
+    const target = getFitXTarget();
+    animateViewportTo(target.center, target.span, () => updateFollowLatest(true));
   };
   const resetViewport = () => {
     cancelKineticPan();
-    fitXViewport();
+    const target = getFitXTarget();
     resetYViewport();
-    updateFollowLatest(true);
-    emitViewportChange();
-    scheduleDraw();
+    animateViewportTo(target.center, target.span, () => updateFollowLatest(true));
   };
   const isFollowingLatest = () => followLatest;
   const setFollowingLatest = (follow) => {
     if (follow && data.length > 0) {
       cancelKineticPan();
-      xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
-      clampXViewport();
-      updateFollowLatest(true);
-      scheduleDraw();
+      animateViewportTo(
+        data.length - xSpan / 2 + rightEdgePaddingBars,
+        xSpan,
+        () => updateFollowLatest(true)
+      );
     } else {
       updateFollowLatest(follow);
     }
@@ -7566,6 +8371,22 @@ function createChart(element, options = {}) {
       (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
     );
   };
+  const getAlertRegionAt = (x, y) => {
+    const hits = alertRegions.filter(
+      (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+    );
+    if (hits.length === 0) return null;
+    return hits.find((region) => region.part === "remove") ?? hits[0];
+  };
+  const getMarkAt = (x, y) => {
+    const tolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
+    for (let index = markRegions.length - 1; index >= 0; index -= 1) {
+      const region = markRegions[index];
+      const reach = region.radius * tolerance;
+      if (Math.abs(x - region.x) <= reach && Math.abs(y - region.y) <= reach) return region;
+    }
+    return null;
+  };
   const getCrosshairPriceActionRegion = (x, y) => {
     if (!crosshairPriceActionRegion) {
       return null;
@@ -8725,7 +9546,10 @@ function createChart(element, options = {}) {
     pointerDownInfo = null;
     orderDragState = null;
     actionDragState = null;
-    drawingDragState = null;
+    if (drawingDragState) {
+      drawingDragState = null;
+      commitHistory();
+    }
     canvas.style.cursor = "default";
     setCrosshairPoint(null);
   };
@@ -8766,6 +9590,7 @@ function createChart(element, options = {}) {
       canvas.focus({ preventScroll: true });
     }
     cancelKineticPan();
+    cancelViewportTween();
     panVelocitySamples.length = 0;
     magnetModifierActive = event.metaKey || event.ctrlKey;
     shiftKeyActive = event.shiftKey;
@@ -8819,6 +9644,20 @@ function createChart(element, options = {}) {
         });
         return;
       }
+      const markHit = getMarkAt(point.x, point.y);
+      if (markHit && markClickHandler) {
+        const rect = canvas.getBoundingClientRect();
+        setCrosshairPoint(null);
+        markClickHandler({
+          kind: markHit.kind,
+          mark: markHit.mark,
+          x: markHit.x,
+          y: markHit.y,
+          clientX: rect.left + markHit.x,
+          clientY: rect.top + markHit.y
+        });
+        return;
+      }
       const orderRegion = getOrderActionRegion(point.x, point.y);
       if (orderRegion) {
         if (orderRegion.draggable) {
@@ -8857,6 +9696,28 @@ function createChart(element, options = {}) {
         setCrosshairPoint(null);
         return;
       }
+      const alertHit = getAlertRegionAt(point.x, point.y);
+      if (alertHit) {
+        const target = alerts.find((alert) => alert.id === alertHit.id);
+        if (target) {
+          setCrosshairPoint(null);
+          if (alertHit.part === "remove") {
+            const removed = serializeAlert(target);
+            removeAlert(target.id);
+            alertActionHandler?.({ alert: removed, action: "remove" });
+            return;
+          }
+          if (target.draggable) {
+            activePointerId = event.pointerId;
+            alertDragState = { id: target.id, startPrice: target.price, lastPrice: target.price, moved: false };
+            capturePointer(event.pointerId);
+            canvas.style.cursor = "ns-resize";
+            return;
+          }
+          alertActionHandler?.({ alert: serializeAlert(target), action: "click", price: target.price });
+          return;
+        }
+      }
       const paneButtonHit = getPaneButtonHit(point.x, point.y);
       if (paneButtonHit) {
         setCrosshairPoint(null);
@@ -9099,6 +9960,24 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
+    if (alertDragState) {
+      if (activePointerId !== null && event.pointerId !== activePointerId) {
+        return;
+      }
+      const nextPrice = roundToPricePrecision(priceFromCanvasY(point.y));
+      if (nextPrice !== alertDragState.lastPrice) {
+        alertDragState.lastPrice = nextPrice;
+        alertDragState.moved = true;
+        const target = alerts.find((alert) => alert.id === alertDragState?.id);
+        if (target) {
+          target.price = nextPrice;
+          target.lastPrice = data[data.length - 1]?.c ?? null;
+          alertActionHandler?.({ alert: serializeAlert(target), action: "move", price: nextPrice, dragging: true });
+        }
+        scheduleDraw();
+      }
+      return;
+    }
     if (orderDragState) {
       if (activePointerId !== null && event.pointerId !== activePointerId) {
         return;
@@ -9165,12 +10044,49 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const markHover = getMarkAt(point.x, point.y);
+        const nextMarkKey = markHover ? `${markHover.kind}|${markHover.id}` : null;
+        if (nextMarkKey !== hoveredMarkKey) {
+          hoveredMarkKey = nextMarkKey;
+          if (markHover) {
+            const rect = canvas.getBoundingClientRect();
+            markHoverHandler?.({
+              kind: markHover.kind,
+              mark: markHover.mark,
+              x: markHover.x,
+              y: markHover.y,
+              clientX: rect.left + markHover.x,
+              clientY: rect.top + markHover.y
+            });
+          } else {
+            markHoverHandler?.(null);
+          }
+          scheduleDraw();
+        }
+        if (markHover) {
+          canvas.title = markHover.mark.text ?? markHover.mark.label ?? "";
+          canvas.style.cursor = "pointer";
+          setCrosshairPoint(null);
+          return;
+        }
         const orderDragRegion = getOrderDragRegion(point.x, point.y);
         if (orderDragRegion) {
           canvas.style.cursor = "ns-resize";
           setCrosshairPoint(null);
           return;
         }
+        const alertHover = getAlertRegionAt(point.x, point.y);
+        const nextAlertId = alertHover?.id ?? null;
+        if (nextAlertId !== hoveredAlertId) {
+          hoveredAlertId = nextAlertId;
+          scheduleDraw();
+        }
+        if (alertHover) {
+          canvas.title = alertHover.part === "remove" ? "Remove alert" : "Drag to move alert";
+          canvas.style.cursor = alertHover.part === "remove" ? "pointer" : "ns-resize";
+          setCrosshairPoint(null);
+          return;
+        }
         const hoveredPane = getPaneAt(point.x, point.y);
         const nextHoveredPaneId = hoveredPane?.id ?? null;
         if (nextHoveredPaneId !== hoveredPaneId) {
@@ -9328,6 +10244,21 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return;
     }
+    if (alertDragState) {
+      const target = alerts.find((alert) => alert.id === alertDragState?.id);
+      if (target && alertDragState.moved) {
+        alertActionHandler?.({
+          alert: serializeAlert(target),
+          action: "move",
+          price: alertDragState.lastPrice,
+          dragging: false
+        });
+      } else if (target) {
+        alertActionHandler?.({ alert: serializeAlert(target), action: "click", price: target.price });
+      }
+      alertDragState = null;
+      canvas.style.cursor = "default";
+    }
     if (orderDragState) {
       const moved = orderDragState.lastPrice !== orderDragState.startPrice;
       const finalLine = orderLines.find((line) => line.id === orderDragState?.orderId);
@@ -9374,9 +10305,14 @@ function createChart(element, options = {}) {
       });
       paneDividerDrag = null;
     }
-    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null)) {
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null)) {
       hoveredPaneId = null;
       hoveredPaneButton = null;
+      hoveredAlertId = null;
+      if (hoveredMarkKey !== null) {
+        hoveredMarkKey = null;
+        markHoverHandler?.(null);
+      }
       if (canvas.title) {
         canvas.title = "";
       }
@@ -9430,6 +10366,7 @@ function createChart(element, options = {}) {
       return;
     }
     cancelKineticPan();
+    cancelViewportTween();
     const point = getCanvasPoint(event);
     const region = getHitRegion(point.x, point.y);
     if (region === "outside") {
@@ -9551,9 +10488,6 @@ function createChart(element, options = {}) {
     if (keyboard.enabled === false) {
       return;
     }
-    if (event.altKey || event.ctrlKey || event.metaKey) {
-      return;
-    }
     const panStep = Math.max(1, keyboard.panBars ?? 1) * (event.shiftKey ? 10 : 1);
     const emit = (action, drawing) => {
       keyboardShortcutHandler?.({
@@ -9563,6 +10497,21 @@ function createChart(element, options = {}) {
         ...drawing ? { drawing } : {}
       });
     };
+    if ((event.ctrlKey || event.metaKey) && !event.altKey) {
+      const key = event.key.toLowerCase();
+      if (keyboard.undoRedo !== false && (key === "z" || key === "y")) {
+        const wantsRedo = key === "y" || event.shiftKey;
+        const applied = wantsRedo ? redo() : undo();
+        if (applied) {
+          event.preventDefault();
+          emit(wantsRedo ? "redo" : "undo");
+        }
+        return;
+      }
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
     switch (event.key) {
       case "Delete":
       case "Backspace": {
@@ -9707,6 +10656,21 @@ function createChart(element, options = {}) {
     resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
+    setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
+    if (nextOptions.timezone !== void 0) {
+      timezoneSetting = nextOptions.timezone || "local";
+      zoneClock = createZoneClock(timezoneSetting);
+    }
+    if (nextOptions.timeFormat !== void 0) {
+      timeFormat = nextOptions.timeFormat === "12h" ? "12h" : "24h";
+    }
+    if (nextOptions.session !== void 0) {
+      sessionOptions = { ...sessionOptions, ...nextOptions.session ?? {} };
+      compiledSession = compileSession(sessionOptions.spec);
+    }
+    if (nextOptions.alerts !== void 0) {
+      setAlerts(nextOptions.alerts ?? []);
+    }
     applyAccessibilityAttributes();
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     if (!isTickerSmoothingEnabled) {
@@ -9767,7 +10731,7 @@ function createChart(element, options = {}) {
     resetRightMarginCache();
     scheduleDraw();
   };
-  const setData = (nextData) => {
+  const setDataInternal = (nextData) => {
     const hadData = data.length > 0;
     const previousCount = data.length;
     const previousCenterRounded = hadData ? Math.round(xCenter) : 0;
@@ -9809,9 +10773,10 @@ function createChart(element, options = {}) {
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
     }
+    evaluateAlertsFromLatestBar();
     scheduleDraw();
   };
-  const upsertBar = (point) => {
+  const upsertBarInternal = (point) => {
     const time = new Date(point.t);
     const timeMs = time.getTime();
     const open = Number(point.o);
@@ -9832,7 +10797,7 @@ function createChart(element, options = {}) {
     };
     const last = data[data.length - 1];
     if (!last) {
-      setData([point]);
+      setDataInternal([point]);
       return;
     }
     const lastMs = last.time.getTime();
@@ -9854,8 +10819,163 @@ function createChart(element, options = {}) {
       reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
+    evaluateAlerts(parsed.c, timeMs, data.length - 1);
     scheduleDraw();
   };
+  const toRawPoint = (point) => ({
+    t: point.time.toISOString(),
+    o: point.o,
+    h: point.h,
+    l: point.l,
+    c: point.c,
+    ...point.v === void 0 ? {} : { v: point.v }
+  });
+  const getReplayState = () => {
+    if (!replay) {
+      return {
+        active: false,
+        playing: false,
+        speed: 1,
+        index: Math.max(0, data.length - 1),
+        total: data.length,
+        atEnd: true,
+        timeMs: data.length > 0 ? data[data.length - 1].time.getTime() : null
+      };
+    }
+    const total = replay.fullRaw.length;
+    const revealed = replay.fullRaw[replay.cursor];
+    const revealedMs = revealed ? Date.parse(String(revealed.t)) : Number.NaN;
+    return {
+      active: true,
+      playing: replay.playing,
+      speed: replay.speed,
+      index: replay.cursor,
+      total,
+      atEnd: replay.cursor >= total - 1,
+      timeMs: Number.isFinite(revealedMs) ? revealedMs : null
+    };
+  };
+  const emitReplayState = () => {
+    replayStateHandler?.(getReplayState());
+  };
+  const applyReplaySlice = () => {
+    if (!replay) return;
+    setDataInternal(replay.fullRaw.slice(0, replay.cursor + 1));
+  };
+  const clearReplayTimer = () => {
+    if (replay?.timerId) {
+      clearTimeout(replay.timerId);
+      replay.timerId = null;
+    }
+  };
+  const scheduleReplayTick = () => {
+    if (!replay || !replay.playing) return;
+    clearReplayTimer();
+    const intervalMs = Math.max(16, 1e3 / Math.max(0.05, replay.speed));
+    replay.timerId = setTimeout(() => {
+      if (!replay || !replay.playing) return;
+      if (replay.cursor >= replay.fullRaw.length - 1) {
+        replay.playing = false;
+        clearReplayTimer();
+        emitReplayState();
+        return;
+      }
+      replay.cursor += 1;
+      applyReplaySlice();
+      emitReplayState();
+      scheduleReplayTick();
+    }, intervalMs);
+  };
+  const startReplay = (startOptions = {}) => {
+    const source = replay ? replay.fullRaw : data.map((point) => toRawPoint(point));
+    if (source.length === 0) return;
+    clearReplayTimer();
+    let cursor;
+    if (Number.isFinite(startOptions.fromTimeMs)) {
+      const target = Number(startOptions.fromTimeMs);
+      const resolved = findNearestIndexForTimeMs(target);
+      cursor = resolved ?? Math.floor(source.length * 0.7);
+    } else if (Number.isFinite(startOptions.fromIndex)) {
+      cursor = Math.floor(Number(startOptions.fromIndex));
+    } else {
+      cursor = Math.floor(source.length * 0.7);
+    }
+    cursor = clamp(cursor, 0, source.length - 1);
+    const speed = Math.max(0.05, Number(startOptions.speed) || replay?.speed || 1);
+    replay = { fullRaw: source, cursor, playing: false, speed, timerId: null };
+    applyReplaySlice();
+    setFollowingLatest(true);
+    if (startOptions.play) {
+      replay.playing = true;
+      scheduleReplayTick();
+    }
+    emitReplayState();
+  };
+  const stopReplay = () => {
+    if (!replay) return;
+    clearReplayTimer();
+    const full = replay.fullRaw;
+    replay = null;
+    setDataInternal(full);
+    setFollowingLatest(true);
+    emitReplayState();
+  };
+  const replayStep = (bars = 1) => {
+    if (!replay) return;
+    const step = Math.trunc(bars) || 1;
+    const next = clamp(replay.cursor + step, 0, replay.fullRaw.length - 1);
+    if (next === replay.cursor) return;
+    replay.cursor = next;
+    applyReplaySlice();
+    emitReplayState();
+  };
+  const replayPlay = (speed) => {
+    if (!replay) return;
+    if (Number.isFinite(speed)) replay.speed = Math.max(0.05, Number(speed));
+    if (replay.cursor >= replay.fullRaw.length - 1) return;
+    replay.playing = true;
+    scheduleReplayTick();
+    emitReplayState();
+  };
+  const replayPause = () => {
+    if (!replay || !replay.playing) return;
+    replay.playing = false;
+    clearReplayTimer();
+    emitReplayState();
+  };
+  const setReplaySpeed = (speed) => {
+    if (!replay || !Number.isFinite(speed)) return;
+    replay.speed = clamp(Number(speed), 0.05, 100);
+    if (replay.playing) scheduleReplayTick();
+    emitReplayState();
+  };
+  const onReplayStateChange = (handler) => {
+    replayStateHandler = handler;
+  };
+  const setData = (nextData) => {
+    if (replay) {
+      replay.fullRaw = nextData.slice();
+      replay.cursor = clamp(replay.cursor, 0, Math.max(0, replay.fullRaw.length - 1));
+      applyReplaySlice();
+      emitReplayState();
+      return;
+    }
+    setDataInternal(nextData);
+  };
+  const upsertBar = (point) => {
+    if (replay) {
+      const timeMs = Date.parse(String(point.t));
+      if (!Number.isFinite(timeMs)) return;
+      const buffer = replay.fullRaw;
+      const lastRaw = buffer[buffer.length - 1];
+      const lastMs = lastRaw ? Date.parse(String(lastRaw.t)) : Number.NaN;
+      if (Number.isFinite(lastMs) && timeMs === lastMs) buffer[buffer.length - 1] = point;
+      else if (!Number.isFinite(lastMs) || timeMs > lastMs) buffer.push(point);
+      emitReplayState();
+      return;
+    }
+    upsertBarInternal(point);
+  };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
       ...line,
@@ -10044,6 +11164,96 @@ function createChart(element, options = {}) {
     tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
     scheduleDraw();
   };
+  const setBarMarks = (marks) => {
+    barMarks = Array.isArray(marks) ? marks.slice() : [];
+    scheduleDraw();
+  };
+  const getBarMarks = () => barMarks.slice();
+  const setTimescaleMarks = (marks) => {
+    timescaleMarks = Array.isArray(marks) ? marks.slice() : [];
+    scheduleDraw();
+  };
+  const getTimescaleMarks = () => timescaleMarks.slice();
+  const onMarkClick = (handler) => {
+    markClickHandler = handler;
+  };
+  const onMarkHover = (handler) => {
+    markHoverHandler = handler;
+  };
+  const setAlerts = (nextAlerts) => {
+    alerts = (Array.isArray(nextAlerts) ? nextAlerts : []).map((alert) => normalizeAlert(alert));
+    const last = data[data.length - 1];
+    if (last) {
+      for (const alert of alerts) alert.lastPrice = last.c;
+    }
+    resetRightMarginCache();
+    scheduleDraw();
+  };
+  const addAlert = (alert) => {
+    const next = normalizeAlert(alert);
+    const last = data[data.length - 1];
+    if (last) next.lastPrice = last.c;
+    alerts.push(next);
+    resetRightMarginCache();
+    scheduleDraw();
+    return next.id;
+  };
+  const updateAlert = (id, patch) => {
+    const target = alerts.find((alert) => alert.id === id);
+    if (!target) return;
+    if (Number.isFinite(patch.price)) target.price = Number(patch.price);
+    if (patch.condition) target.condition = patch.condition;
+    if (patch.label !== void 0) target.label = patch.label;
+    if (patch.color !== void 0) target.color = patch.color;
+    if (patch.active !== void 0) target.active = patch.active;
+    if (patch.once !== void 0) target.once = patch.once;
+    if (patch.draggable !== void 0) target.draggable = patch.draggable;
+    if (patch.triggered !== void 0) {
+      target.triggered = patch.triggered;
+      if (!patch.triggered) target.lastPrice = data[data.length - 1]?.c ?? null;
+    }
+    resetRightMarginCache();
+    scheduleDraw();
+  };
+  const removeAlert = (id) => {
+    alerts = alerts.filter((alert) => alert.id !== id);
+    if (hoveredAlertId === id) hoveredAlertId = null;
+    resetRightMarginCache();
+    scheduleDraw();
+  };
+  const getAlerts = () => alerts.map((alert) => serializeAlert(alert));
+  const onAlertTrigger = (handler) => {
+    alertTriggerHandler = handler;
+  };
+  const onAlertAction = (handler) => {
+    alertActionHandler = handler;
+  };
+  const setTimezone = (timezone) => {
+    timezoneSetting = timezone || "local";
+    zoneClock = createZoneClock(timezoneSetting);
+    scheduleDraw();
+  };
+  const getTimezone = () => timezoneSetting;
+  const setTimeFormat = (format) => {
+    timeFormat = format === "12h" ? "12h" : "24h";
+    resetRightMarginCache();
+    scheduleDraw();
+  };
+  const getTimeFormat = () => timeFormat;
+  const setSession = (session) => {
+    if (session === null) {
+      sessionOptions = { ...sessionOptions, spec: null };
+    } else if (typeof session === "string") {
+      sessionOptions = { ...sessionOptions, spec: session };
+    } else if ("segments" in session || "timezone" in session || "days" in session) {
+      sessionOptions = { ...sessionOptions, spec: session };
+    } else {
+      sessionOptions = { ...sessionOptions, ...session };
+    }
+    compiledSession = compileSession(sessionOptions.spec);
+    scheduleDraw();
+  };
+  const getSession = () => ({ ...sessionOptions });
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -10063,7 +11273,13 @@ function createChart(element, options = {}) {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
     reanchorDrawingsToData();
-    emitDrawingsChange();
+    historySuspended += 1;
+    try {
+      emitDrawingsChange();
+    } finally {
+      historySuspended -= 1;
+    }
+    resetHistoryBaseline();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
@@ -10148,7 +11364,10 @@ function createChart(element, options = {}) {
       indicators: getIndicators(),
       magnetMode: getMagnetMode(),
       priceScale: getPriceScale(),
-      drawingDefaults
+      drawingDefaults,
+      alerts: getAlerts(),
+      timezone: getTimezone(),
+      timeFormat: getTimeFormat()
     };
   };
   const loadState = (state) => {
@@ -10177,15 +11396,28 @@ function createChart(element, options = {}) {
         }
       }
     }
+    if (Array.isArray(state.alerts)) {
+      setAlerts(state.alerts);
+    }
+    if (typeof state.timezone === "string") {
+      setTimezone(state.timezone);
+    }
+    if (state.timeFormat === "12h" || state.timeFormat === "24h") {
+      setTimeFormat(state.timeFormat);
+    }
     if (state.viewport && typeof state.viewport === "object") {
       setViewport(state.viewport);
     }
+    clearHistory();
   };
   const takeScreenshot = (options2 = {}) => {
     return canvas.toDataURL(options2.type ?? "image/png", options2.quality);
   };
   const destroy = () => {
+    cancelViewportTween();
     cancelLongPressTimer();
+    clearReplayTimer();
+    replay = null;
     datafeedUnsubscribe?.();
     datafeedUnsubscribe = null;
     datafeed = null;
@@ -10219,6 +11451,10 @@ function createChart(element, options = {}) {
     }
     element.innerHTML = "";
   };
+  if (Array.isArray(options.alerts) && options.alerts.length > 0) {
+    setAlerts(options.alerts);
+  }
+  resetHistoryBaseline();
   draw();
   armCountdownHeartbeat();
   return {
@@ -10302,6 +11538,42 @@ function createChart(element, options = {}) {
     saveState,
     loadState,
     takeScreenshot,
+    setTimezone,
+    getTimezone,
+    setTimeFormat,
+    getTimeFormat,
+    setSession,
+    getSession,
+    undo,
+    redo,
+    canUndo: () => historyPast.length > 0,
+    canRedo: () => historyFuture.length > 0,
+    getUndoRedoState,
+    onUndoRedoStateChange: (handler) => {
+      undoRedoStateHandler = handler;
+    },
+    clearHistory,
+    startReplay,
+    stopReplay,
+    replayStep,
+    replayPlay,
+    replayPause,
+    setReplaySpeed,
+    getReplayState,
+    onReplayStateChange,
+    setAlerts,
+    addAlert,
+    updateAlert,
+    removeAlert,
+    getAlerts,
+    onAlertTrigger,
+    onAlertAction,
+    setBarMarks,
+    getBarMarks,
+    setTimescaleMarks,
+    getTimescaleMarks,
+    onMarkClick,
+    onMarkHover,
     resize,
     destroy
   };
@@ -10312,8 +11584,10 @@ export {
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
   SCRIPT_SOURCE_INPUT_VALUES,
+  SESSION_PRESETS,
   compileScriptIndicator,
   createChart,
   extractScriptInputs,
+  isValidTimeZone,
   validateScriptSource
 };