@tradecanvas/chart 1.12.0 → 1.14.0

package/dist/{LayoutSession-2yRujs2S.js → LayoutSession-BTfv1oBV.js}

@@ -1,12 +1,12 @@
-import { DARK_THEME as e, DEFAULT_PANEL_HEIGHT as t, LIGHT_THEME as n, LayerType as r, MIN_PANEL_HEIGHT as i, PRICE_AXIS_WIDTH as a, TIME_AXIS_HEIGHT as o, autoPricePrecision as s, computePriceLimits as c, formatPrice as l, fractionTick as u, indicatorSource as d, isValidTimeZone as f, mergeBar as p, normalizeBarTime as m, parseIndicatorSource as h, priceFormatterFor as g, readChartTypeOptions as _, sessionMinute as v, setLocale as ee, stepDecimals as te, tickBarCount as ne, timeframeToMs as y, volumeColor as b, zonedDateFormatter as re } from "@tradecanvas/commons";
-import { AlertDragHandler as ie, AlertManager as ae, Animator as oe, AreaRenderer as se, AxisDragHandler as ce, BarCountdown as le, BarRenderer as ue, BaselineRenderer as de, CandlestickRenderer as fe, ChartLegend as pe, ChartStateManager as x, CompareRenderer as me, CompareSymbolIndicator as he, CorrelationCoefficientIndicator as ge, CorrelationLogIndicator as _e, CrosshairHandler as ve, CrosshairTooltip as ye, CurrentPriceLine as be, DEFAULT_SESSION_HOURS as xe, DataExporter as S, DepthHeatmapRenderer as Se, DrawingManager as Ce, DrawingRenderer as we, EquivolumeRenderer as Te, EventBus as Ee, GridRenderer as De, HLCAreaRenderer as Oe, HiLoRenderer as C, HollowCandleRenderer as ke, IndicatorEngine as w, InteractionManager as Ae, KagiRenderer as je, KeyboardHandler as Me, LineRenderer as Ne, LineWithMarkersRenderer as Pe, MarketProfileRenderer as Fe, MeasureOverlay as Ie, PanHandler as Le, PaneResizeHandler as Re, PeriodLevelsRenderer as ze, PinnedTooltip as Be, PivotMarkersRenderer as Ve, PointAndFigureRenderer as T, PriceAxis as E, PriceAxisAddButton as He, PriceLines as Ue, RenderEngine as We, RenkoRenderer as Ge, ReplayManager as Ke, Screenshot as D, SelectionBoxOverlay as qe, SessionBreaks as Je, SessionShading as Ye, SignalMarkerManager as Xe, SpreadIndicator as Ze, StepLineRenderer as Qe, StreamManager as $e, SymbolSeriesStore as et, TimeAxis as tt, TradeZoneManager as nt, TradingManager as rt, TradingRenderer as it, UndoRedoManager as at, Viewport as ot, VolumeCandleRenderer as st, VolumeProfileRenderer as ct, VolumeRenderer as lt, Watermark as ut, ZoomHandler as dt, barTimeStepMs as ft, findDominantSwing as pt, gpuContextsLeft as mt, isRegularSession as ht, loadWebGL as gt, mergeSessionHours as _t, rangePresetStart as vt, readAlertOptions as yt, registerBuiltInDrawingTools as bt, registerBuiltInIndicators as O, servesTimeframe as k, sourceParam as A, timestampToBarIndex as j, toHeikinAshi as xt, toKagi as St, toLineBreak as Ct, toPointAndFigure as wt, toRangeBars as Tt, toRenko as M, whenGpuContextFree as Et, withResampling as Dt, xToBarIndex as Ot, xToTime as N, yToPrice as P } from "@tradecanvas/core";
+import { DARK_THEME as e, DEFAULT_PANEL_HEIGHT as t, LIGHT_THEME as n, LayerType as r, MIN_PANEL_HEIGHT as i, PRICE_AXIS_WIDTH as a, TIME_AXIS_HEIGHT as o, autoPricePrecision as s, chartStyleValue as c, computePriceLimits as l, formatPrice as u, fractionTick as d, indicatorSource as f, isValidTimeZone as p, mergeBar as m, normalizeBarTime as h, parseIndicatorSource as g, priceFormatterFor as _, readChartStyleOverrides as v, readChartTypeOptions as y, readIndicatorPlotStyles as ee, readPaneStyle as b, resolveChartTheme as te, sessionMinute as x, setLocale as ne, stepDecimals as re, tickBarCount as ie, timeframeToMs as ae, volumeColor as oe, zonedDateFormatter as se } from "@tradecanvas/commons";
+import { AlertDragHandler as ce, AlertManager as le, Animator as ue, AreaRenderer as de, AxisDragHandler as fe, BarCountdown as pe, BarRenderer as me, BaselineRenderer as he, CandlestickRenderer as ge, ChartLegend as _e, ChartStateManager as S, CompareRenderer as ve, CompareSymbolIndicator as ye, CorrelationCoefficientIndicator as be, CorrelationLogIndicator as xe, CrosshairHandler as Se, CrosshairTooltip as Ce, CurrentPriceLine as we, DEFAULT_SESSION_HOURS as Te, DataExporter as C, DepthHeatmapRenderer as Ee, DrawingManager as De, DrawingRenderer as Oe, EquivolumeRenderer as ke, EventBus as Ae, GridRenderer as je, HLCAreaRenderer as Me, HiLoRenderer as w, HollowCandleRenderer as Ne, IndicatorEngine as Pe, InteractionManager as Fe, KagiRenderer as Ie, KeyboardHandler as Le, LineRenderer as Re, LineWithMarkersRenderer as ze, MarketProfileRenderer as Be, MeasureOverlay as Ve, PanHandler as He, PaneResizeHandler as Ue, PeriodLevelsRenderer as We, PinnedTooltip as Ge, PivotMarkersRenderer as Ke, PointAndFigureRenderer as qe, PriceAxis as Je, PriceAxisAddButton as Ye, PriceLines as Xe, RenderEngine as Ze, RenkoRenderer as Qe, ReplayManager as $e, Screenshot as T, SelectionBoxOverlay as et, SessionBreaks as tt, SessionShading as nt, SignalMarkerManager as rt, SpreadIndicator as it, StepLineRenderer as at, StreamManager as ot, SymbolSeriesStore as st, TimeAxis as ct, TradeZoneManager as lt, TradingManager as ut, TradingRenderer as dt, UndoRedoManager as ft, Viewport as pt, VolumeCandleRenderer as mt, VolumeProfileRenderer as ht, VolumeRenderer as gt, Watermark as _t, ZoomHandler as vt, barTimeStepMs as yt, findDominantSwing as bt, gpuContextsLeft as xt, isRegularSession as St, loadWebGL as Ct, mergeSessionHours as wt, rangePresetStart as Tt, readAlertOptions as Et, registerBuiltInDrawingTools as Dt, registerBuiltInIndicators as E, servesTimeframe as Ot, sourceParam as D, timestampToBarIndex as O, toHeikinAshi as kt, toKagi as At, toLineBreak as jt, toPointAndFigure as Mt, toRangeBars as Nt, toRenko as Pt, whenGpuContextFree as Ft, withResampling as It, xToBarIndex as Lt, xToTime as k, yToPrice as Rt } from "@tradecanvas/core";
 //#region src/regularHours.ts
-var kt = 864e5, At = 10;
-function jt(e, t) {
+var zt = 864e5, Bt = 10;
+function Vt(e, t) {
 	let n = e?.timezone;
-	if (!n || !f(n) || t.length < 2) return null;
+	if (!n || !p(n) || t.length < 2) return null;
 	let r = (e?.sessions ?? []).flatMap((e) => {
-		let t = v(e.start), n = v(e.end);
+		let t = x(e.start), n = x(e.end);
 		return t === null || n === null ? [] : [{
 			startMinute: t,
 			endMinute: n
@@ -14,34 +14,34 @@ function jt(e, t) {
 	});
 	if (r.length === 0) return null;
 	let i = Infinity;
-	for (let e = Math.max(1, t.length - At); e < t.length; e++) {
-		let n = m(t[e].time) - m(t[e - 1].time);
+	for (let e = Math.max(1, t.length - Bt); e < t.length; e++) {
+		let n = h(t[e].time) - h(t[e - 1].time);
 		n > 0 && n < i && (i = n);
 	}
-	if (!(i < kt)) return null;
+	if (!(i < zt)) return null;
 	let a = {
 		timeZone: n,
 		windows: r,
 		startMinute: r[0].startMinute,
 		endMinute: r[r.length - 1].endMinute
 	};
-	return (e) => ht(m(e), a);
+	return (e) => St(h(e), a);
 }
 //#endregion
 //#region src/chartA11y.ts
-var F = {
+var Ht = {
 	role: "chart",
 	summary: "{what}. Last price {close}.",
 	empty: "Chart, no data.",
 	view: "Showing {count} bars, {from} to {to}. High {high}, low {low}.",
 	bar: "{time}: open {open}, high {high}, low {low}, close {close}, volume {volume}.",
 	keys: "Arrow keys scroll and zoom, Home and End go to the start and the end. Comma and period read the bars one at a time."
-}, I = (e, t) => e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : e), Mt = [
+}, A = (e, t) => e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : e), Ut = [
 	"role",
 	"aria-roledescription",
 	"aria-label",
 	"aria-describedby"
-], Nt = 400, Pt = 1e3, Ft = class {
+], Wt = 400, Gt = 1e3, Kt = class {
 	live;
 	help;
 	labels;
@@ -55,20 +55,20 @@ var F = {
 	};
 	constructor(e, t, n = {}) {
 		this.container = e, this.source = t, this.labels = {
-			...F,
+			...Ht,
 			...n
 		};
-		for (let t of Mt) this.before.set(t, e.getAttribute(t));
-		e.setAttribute("role", "application"), this.help = L("div", "tc-sr-only"), this.help.id = `tc-chart-keys-${Math.random().toString(36).slice(2, 10)}`, e.setAttribute("aria-describedby", this.help.id), this.live = L("div", "tc-sr-only tc-sr-live"), this.live.setAttribute("aria-live", "polite"), this.live.setAttribute("aria-atomic", "true"), e.append(this.help, this.live), e.addEventListener("blur", this.onBlur), this.applyLabels();
+		for (let t of Ut) this.before.set(t, e.getAttribute(t));
+		e.setAttribute("role", "application"), this.help = qt("div", "tc-sr-only"), this.help.id = `tc-chart-keys-${Math.random().toString(36).slice(2, 10)}`, e.setAttribute("aria-describedby", this.help.id), this.live = qt("div", "tc-sr-only tc-sr-live"), this.live.setAttribute("aria-live", "polite"), this.live.setAttribute("aria-atomic", "true"), e.append(this.help, this.live), e.addEventListener("blur", this.onBlur), this.applyLabels();
 	}
 	setLabels(e) {
 		this.labels = {
-			...F,
+			...Ht,
 			...e
 		}, this.applyLabels();
 	}
 	refresh(e = !1) {
-		let t = Pt - (Date.now() - this.summaryAt);
+		let t = Gt - (Date.now() - this.summaryAt);
 		if (e || t <= 0 || this.container.getAttribute("aria-label") === this.labels.empty) {
 			this.summaryTimer && clearTimeout(this.summaryTimer), this.summaryTimer = null, this.summaryAt = Date.now(), this.container.setAttribute("aria-label", this.summary());
 			return;
@@ -80,7 +80,7 @@ var F = {
 	viewMoved() {
 		this.cursor = null, this.viewTimer && clearTimeout(this.viewTimer), this.viewTimer = setTimeout(() => {
 			this.viewTimer = null, this.say(this.viewText());
-		}, Nt);
+		}, Wt);
 	}
 	readBar(e) {
 		let t = this.source.bars();
@@ -93,13 +93,13 @@ var F = {
 		let i = t[this.cursor];
 		this.source.showBar(i.time);
 		let a = this.source.formatPrice;
-		this.say(I(this.labels.bar, {
+		this.say(A(this.labels.bar, {
 			time: this.source.formatTime(i.time),
 			open: a(i.open),
 			high: a(i.high),
 			low: a(i.low),
 			close: a(i.close),
-			volume: It(i.volume ?? 0)
+			volume: Jt(i.volume ?? 0)
 		}));
 	}
 	destroy() {
@@ -118,7 +118,7 @@ var F = {
 			this.labels.typeName ? this.labels.typeName(t) : t,
 			this.source.timeframe()
 		].filter(Boolean).join(", ");
-		return I(this.labels.summary, {
+		return A(this.labels.summary, {
 			what: n,
 			close: this.source.formatPrice(e[e.length - 1].close)
 		});
@@ -128,7 +128,7 @@ var F = {
 		if (e.length === 0) return this.labels.empty;
 		let t = this.source.visibleRange(), n = Math.max(0, Math.min(e.length - 1, Math.ceil(t.from))), r = Math.max(n, Math.min(e.length - 1, Math.floor(t.to))), i = -Infinity, a = Infinity;
 		for (let t = n; t <= r; t++) i = Math.max(i, e[t].high), a = Math.min(a, e[t].low);
-		return I(this.labels.view, {
+		return A(this.labels.view, {
 			count: r - n + 1,
 			from: this.source.formatTime(e[n].time),
 			to: this.source.formatTime(e[r].time),
@@ -140,7 +140,7 @@ var F = {
 		this.live.textContent = e;
 	}
 };
-function L(e, t) {
+function qt(e, t) {
 	let n = document.createElement(e);
 	return n.className = t, Object.assign(n.style, {
 		position: "absolute",
@@ -154,12 +154,12 @@ function L(e, t) {
 		border: "0"
 	}), n;
 }
-function It(e) {
+function Jt(e) {
 	return Number.isInteger(e) ? String(e) : e.toFixed(2);
 }
 //#endregion
 //#region src/indicatorLabel.ts
-function Lt(e, t, n, r) {
+function Yt(e, t, n, r) {
 	let i = Object.keys(n || t).map((e) => t[e]).filter((e) => typeof e == "number" && Number.isFinite(e)).slice(0, 3).map((e) => String(Number(e.toFixed(4)))), a = typeof t.symbol == "string" && t.symbol ? [t.symbol] : [];
 	return [
 		e === "spread" && t.mode === "ratio" ? "Ratio" : r ?? e.toUpperCase(),
@@ -169,52 +169,52 @@ function Lt(e, t, n, r) {
 }
 //#endregion
 //#region src/charts/ChartTypeStrategy.ts
-function Rt(e) {
+function Xt(e) {
 	switch (e) {
 		case "candlestick":
 		case "heikinAshi":
 		case "lineBreak":
-		case "rangeBars": return new fe();
-		case "line": return new Ne();
-		case "area": return new se();
-		case "bar": return new ue();
-		case "hollowCandle": return new ke();
-		case "baseline": return new de();
-		case "renko": return new Ge();
-		case "kagi": return new je();
-		case "pointAndFigure": return new T();
-		case "volumeCandles": return new st();
-		case "equivolume": return new Te();
-		case "hlcArea": return new Oe();
-		case "stepLine": return new Qe();
-		case "lineWithMarkers": return new Pe();
-		case "hiLo": return new C();
-		default: return new fe();
-	}
-}
-function zt(e, t, n = {}) {
+		case "rangeBars": return new ge();
+		case "line": return new Re();
+		case "area": return new de();
+		case "bar": return new me();
+		case "hollowCandle": return new Ne();
+		case "baseline": return new he();
+		case "renko": return new Qe();
+		case "kagi": return new Ie();
+		case "pointAndFigure": return new qe();
+		case "volumeCandles": return new mt();
+		case "equivolume": return new ke();
+		case "hlcArea": return new Me();
+		case "stepLine": return new at();
+		case "lineWithMarkers": return new ze();
+		case "hiLo": return new w();
+		default: return new ge();
+	}
+}
+function Zt(e, t, n = {}) {
 	if (t.length === 0) return t;
 	switch (e) {
-		case "heikinAshi": return xt(t);
+		case "heikinAshi": return kt(t);
 		case "renko": {
 			let e = n.renko?.boxSize;
-			return typeof e == "number" ? M(t, { brickSize: e }) : M(t, {
+			return typeof e == "number" ? Pt(t, { brickSize: e }) : Pt(t, {
 				brickSize: 0,
 				useATR: !0,
 				atrPeriod: n.renko?.atrPeriod ?? 14
 			});
 		}
-		case "lineBreak": return Ct(t, n.lineBreak?.lines ?? 3);
-		case "kagi": return St(t, n.kagi?.reversal ?? 4, n.kagi?.reversalType ?? "percent");
-		case "pointAndFigure": return wt(t, Ht(t, n), n.pointAndFigure?.reversal ?? 3);
+		case "lineBreak": return jt(t, n.lineBreak?.lines ?? 3);
+		case "kagi": return At(t, n.kagi?.reversal ?? 4, n.kagi?.reversalType ?? "percent");
+		case "pointAndFigure": return Mt(t, en(t, n), n.pointAndFigure?.reversal ?? 3);
 		case "rangeBars": {
 			let e = n.rangeBars?.range;
-			return Tt(t, { rangeSize: typeof e == "number" ? e : Ut(t) * .005 });
+			return Nt(t, { rangeSize: typeof e == "number" ? e : j(t) * .005 });
 		}
 		default: return t;
 	}
 }
-function Bt(e) {
+function Qt(e) {
 	switch (e) {
 		case "heikinAshi":
 		case "renko":
@@ -225,30 +225,30 @@ function Bt(e) {
 		default: return !1;
 	}
 }
-function Vt(e) {
-	return e !== "heikinAshi" && Bt(e);
+function $t(e) {
+	return e !== "heikinAshi" && Qt(e);
 }
-function Ht(e, t = {}) {
+function en(e, t = {}) {
 	let n = t.pointAndFigure?.boxSize;
-	return typeof n == "number" ? n : Ut(e) * .01;
+	return typeof n == "number" ? n : j(e) * .01;
 }
-function Ut(e) {
+function j(e) {
 	let t = 0;
 	for (let n of e) t += n.close;
 	return t / e.length;
 }
-function Wt(e, t) {
+function tn(e, t) {
 	let n = t?.(e);
-	return n ? n.createRenderer() : Rt(e);
+	return n ? n.createRenderer() : Xt(e);
 }
-function Gt(e, t, n, r) {
+function nn(e, t, n, r) {
 	if (t.length === 0) return t;
 	let i = n?.(e);
-	return i?.transform ? i.transform(t) : zt(e, t, r);
+	return i?.transform ? i.transform(t) : Zt(e, t, r);
 }
 //#endregion
 //#region src/state/AutoSaveScheduler.ts
-var Kt = class {
+var rn = class {
 	timer = null;
 	delayMs = 0;
 	key = null;
@@ -278,15 +278,15 @@ var Kt = class {
 };
 //#endregion
 //#region src/DataManager.ts
-function R(e) {
+function M(e) {
 	if (!e || typeof e.time != "number" || !Number.isFinite(e.time)) return !1;
 	let { open: t, high: n, low: r, close: i } = e;
 	return !(!isFinite(t) || !isFinite(n) || !isFinite(r) || !isFinite(i) || t < 0 || n < 0 || r < 0 || i < 0 || n < r || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0));
 }
-function qt(e) {
+function N(e) {
 	return e.volume !== void 0 && e.high >= e.open && e.high >= e.close && e.low <= e.open && e.low <= e.close;
 }
-function z(e) {
+function P(e) {
 	return {
 		...e,
 		high: Math.max(e.open, e.high, e.low, e.close),
@@ -294,7 +294,7 @@ function z(e) {
 		volume: e.volume === void 0 ? 0 : Math.max(0, e.volume)
 	};
 }
-var B = class {
+var F = class {
 	data = [];
 	getData() {
 		return this.data;
@@ -303,7 +303,7 @@ var B = class {
 		let t = [];
 		for (let n = 0; n < e.length; n++) {
 			let r = e[n];
-			R(r) && t.push(qt(r) ? r : z(r));
+			M(r) && t.push(N(r) ? r : P(r));
 		}
 		this.data = t;
 	}
@@ -311,7 +311,7 @@ var B = class {
 		let t = this.data.length > 0 ? this.data[0].time : Infinity, n = [];
 		for (let r = 0; r < e.length; r++) {
 			let i = e[r];
-			!R(i) || i.time >= t || n.push(qt(i) ? i : z(i));
+			!M(i) || i.time >= t || n.push(N(i) ? i : P(i));
 		}
 		if (n.length === 0) return 0;
 		n.sort((e, t) => e.time - t.time);
@@ -320,11 +320,11 @@ var B = class {
 		return n.length = r, this.data = n.concat(this.data), r;
 	}
 	appendBar(e) {
-		R(e) && this.data.push(z(e));
+		M(e) && this.data.push(P(e));
 	}
 	updateLastBar(e) {
-		if (!R(e)) return;
-		let t = z(e);
+		if (!M(e)) return;
+		let t = P(e);
 		if (this.data.length === 0) {
 			this.data.push(t);
 			return;
@@ -332,7 +332,7 @@ var B = class {
 		this.data[this.data.length - 1] = t;
 	}
 	updateLastBarFromTick(e) {
-		this.data.length !== 0 && (!isFinite(e.price) || e.price < 0 || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0) || (this.data[this.data.length - 1] = p(this.data[this.data.length - 1], e)));
+		this.data.length !== 0 && (!isFinite(e.price) || e.price < 0 || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0) || (this.data[this.data.length - 1] = m(this.data[this.data.length - 1], e)));
 	}
 	getLength() {
 		return this.data.length;
@@ -340,7 +340,7 @@ var B = class {
 	clear() {
 		this.data = [];
 	}
-}, Jt = 5e3, Yt = 6e4, Xt = 500, Zt = class {
+}, I = 5e3, an = 6e4, on = 500, sn = class {
 	loader = null;
 	pageSize = 500;
 	loading = !1;
@@ -381,7 +381,7 @@ var B = class {
 		try {
 			r = await e(t, this.pageSize);
 		} catch (e) {
-			return n === this.seq ? (this.loading = !1, this.failures++, this.retryAt = this.now() + Math.min(Yt, Jt * 2 ** (this.failures - 1)), this.emit({
+			return n === this.seq ? (this.loading = !1, this.failures++, this.retryAt = this.now() + Math.min(an, I * 2 ** (this.failures - 1)), this.emit({
 				state: "error",
 				count: 0,
 				error: e instanceof Error ? e.message : String(e)
@@ -411,34 +411,116 @@ var B = class {
 	now() {
 		return this.host.now ? this.host.now() : Date.now();
 	}
-}, Qt = class {
-	theme;
+}, L = class t {
+	base;
 	shape = null;
-	constructor(t) {
-		!t || t === "dark" ? this.theme = { ...e } : t === "light" ? this.theme = { ...n } : this.theme = { ...t };
+	chartType = "candlestick";
+	host = {};
+	user = /* @__PURE__ */ new Map();
+	effective = null;
+	constructor(e) {
+		this.base = t.read(e);
+	}
+	static read(t) {
+		if (!t || t === "dark") return { ...e };
+		if (t === "light") return { ...n };
+		let { style: r, ...i } = t;
+		return i;
 	}
 	getTheme() {
-		return this.theme;
+		return this.effective ??= te(this.base, this.chartType, this.merged()), this.effective;
+	}
+	getBaseTheme() {
+		return this.base;
 	}
-	setTheme(t) {
-		t === "dark" ? this.theme = { ...e } : t === "light" ? this.theme = { ...n } : this.theme = { ...t }, this.shape && (this.theme = {
-			...this.theme,
+	setTheme(e) {
+		this.base = t.read(e), this.shape && (this.base = {
+			...this.base,
 			shape: {
-				...this.theme.shape,
+				...this.base.shape,
 				...this.shape
 			}
-		});
+		}), this.effective = null;
 	}
 	setShape(e) {
-		this.shape = e ? { ...e } : null, this.theme = {
-			...this.theme,
+		this.shape = e ? { ...e } : null, this.base = {
+			...this.base,
 			shape: e ? {
-				...this.theme.shape,
+				...this.base.shape,
 				...e
-			} : this.theme.shape
+			} : this.base.shape
+		}, this.effective = null;
+	}
+	setChartType(e) {
+		e !== this.chartType && (this.chartType = e, this.effective = null);
+	}
+	applyOverrides(e, t) {
+		let n = { ...this.layer(t) };
+		for (let [t, r] of Object.entries(e)) r == null ? delete n[t] : n[t] = r;
+		return this.setLayer(t, n);
+	}
+	setOverrides(e, t) {
+		return this.setLayer(t, { ...e });
+	}
+	resetOverrides(e, t) {
+		if (!t) return this.setLayer(e, {});
+		let n = { ...this.layer(e) };
+		for (let e of t) delete n[e];
+		return this.setLayer(e, n);
+	}
+	getOverrides(e) {
+		return { ...this.layer(e) };
+	}
+	getUserOverrides() {
+		let e = {};
+		for (let [t, n] of this.user) Object.keys(n).length > 0 && (e[t] = { ...n });
+		return e;
+	}
+	setUserOverrides(e) {
+		return JSON.stringify(e) === JSON.stringify(this.getUserOverrides()) ? !1 : (this.user = new Map(Object.entries(e).map(([e, t]) => [e, { ...t }])), this.effective = null, !0);
+	}
+	getStyleValue(e) {
+		return c(this.base, this.merged(), e, this.chartType);
+	}
+	layer(e) {
+		return e === "host" ? this.host : this.user.get(this.base.name) ?? {};
+	}
+	setLayer(e, t) {
+		return JSON.stringify(t) === JSON.stringify(this.layer(e)) ? !1 : (e === "host" ? this.host = t : Object.keys(t).length > 0 ? this.user.set(this.base.name, t) : this.user.delete(this.base.name), this.effective = null, !0);
+	}
+	merged() {
+		return {
+			...this.host,
+			...this.user.get(this.base.name)
 		};
 	}
-}, $t = 200, en = 80, V = (e) => e.position === "top" || e.position === "bottom", tn = class {
+};
+//#endregion
+//#region src/style/styleOptions.ts
+function R(e, t) {
+	return t ? {
+		...t.visible === void 0 ? {} : { [`crosshair.${e}.visible`]: t.visible },
+		...t.color === void 0 ? {} : { [`crosshair.${e}.color`]: t.color },
+		...t.style === void 0 ? {} : { [`crosshair.${e}.style`]: t.style },
+		...t.width === void 0 ? {} : { [`crosshair.${e}.width`]: t.width }
+	} : {};
+}
+function cn(e) {
+	let { grid: t, crosshair: n } = e, r = n?.vLine?.labelBackground ?? n?.hLine?.labelBackground;
+	return {
+		...t?.hLineColor === void 0 ? {} : { "grid.horizontal.color": t.hLineColor },
+		...t?.hLineStyle === void 0 ? {} : { "grid.horizontal.style": t.hLineStyle },
+		...t?.vLineColor === void 0 ? {} : { "grid.vertical.color": t.vLineColor },
+		...t?.vLineStyle === void 0 ? {} : { "grid.vertical.style": t.vLineStyle },
+		...R("horizontal", n?.hLine),
+		...R("vertical", n?.vLine),
+		...r === void 0 ? {} : { "crosshair.labelBackground": r },
+		...e.overrides
+	};
+}
+//#endregion
+//#region src/layout/LayoutManager.ts
+var z = 200, B = 80, V = (e) => e.position === "top" || e.position === "bottom", ln = class {
 	panels = [];
 	containerWidth = 0;
 	containerHeight = 0;
@@ -454,8 +536,8 @@ var B = class {
 		this.panels.push({
 			id: e,
 			position: n,
-			size: r ?? (a ? $t : t),
-			minSize: a ? en : i,
+			size: r ?? (a ? z : t),
+			minSize: a ? B : i,
 			content: {
 				type: "indicator",
 				indicatorInstanceId: e
@@ -524,7 +606,7 @@ var B = class {
 		let r = this.panels.find((t) => t.id === e);
 		if (r) {
 			let a = r.position === "left" || r.position === "right", o = n === "left" || n === "right";
-			r.position = n, a !== o && (r.size = o ? $t : t, r.minSize = o ? en : i), o && (r.collapsed = void 0, this.maximized === e && (this.maximized = null));
+			r.position = n, a !== o && (r.size = o ? z : t, r.minSize = o ? B : i), o && (r.collapsed = void 0, this.maximized === e && (this.maximized = null));
 		}
 	}
 	setPanelSize(e, t) {
@@ -640,24 +722,24 @@ var B = class {
 	getMainChartRect() {
 		return this.resolve().mainChartRect;
 	}
-}, nn = 14, rn = 14, an = 22, on = 4;
-function sn(e) {
-	let { min: t, max: n, lastPrice: r, locale: i, fontFamily: o, fontSizeSmall: c, measure: u } = e, d = s(t, n), f = e.tagPrecision ?? d, p = r === null ? [t, n] : [
+}, un = 14, dn = 14, fn = 22, pn = 4;
+function mn(e) {
+	let { min: t, max: n, lastPrice: r, locale: i, fontFamily: o, fontSizeSmall: c, measure: l } = e, d = s(t, n), f = e.tagPrecision ?? d, p = r === null ? [t, n] : [
 		t,
 		n,
 		r
 	], m = a;
 	for (let t of p) {
 		if (!Number.isFinite(t)) continue;
-		let n = e.format ? e.format(t) : l(t, d, i), r = e.format ? n : l(t, f, i);
-		m = Math.max(m, u(n, `500 ${c}px ${o}`) + nn, u(r, `bold 11px ${o}`) + rn, u(r, `600 ${c}px ${o}`) + an);
+		let n = e.format ? e.format(t) : u(t, d, i), r = e.format ? n : u(t, f, i);
+		m = Math.max(m, l(n, `500 ${c}px ${o}`) + un, l(r, `bold 11px ${o}`) + dn, l(r, `600 ${c}px ${o}`) + fn);
 	}
-	return m <= a ? a : Math.ceil(m / on) * on;
+	return m <= a ? a : Math.ceil(m / pn) * pn;
 }
-function cn(e, t) {
+function hn(e, t) {
 	return t > e || t <= e - 12 ? t : e;
 }
-var ln = class {
+var gn = class {
 	netY = 0;
 	travelX = 0;
 	engaged = !1;
@@ -673,8 +755,8 @@ var ln = class {
 		}
 		return this.engaged;
 	}
-}, un = 1;
-function dn(e, t) {
+}, _n = 1;
+function vn(e, t) {
 	return e.filter((e) => (e.descriptor.layer ?? "overlay") === t);
 }
 function H(e) {
@@ -688,24 +770,24 @@ function H(e) {
 //#endregion
 //#region src/plugins/registry.ts
 var U = /* @__PURE__ */ new Map();
-function fn(e) {
+function yn(e) {
 	U.set(H(e), e);
 }
-function pn(e) {
+function bn(e) {
 	return U.delete(e);
 }
-function mn() {
+function W() {
 	return [...U.values()];
 }
-function hn() {
+function xn() {
 	U.clear();
 }
 //#endregion
 //#region src/plugins/PluginManager.ts
-var gn = class {
+var Sn = class {
 	plugins = /* @__PURE__ */ new Map();
 	constructor(e, t = {}) {
-		if (this.indicatorEngine = e, t.inheritGlobal !== !1) for (let e of mn()) this.add(e);
+		if (this.indicatorEngine = e, t.inheritGlobal !== !1) for (let e of W()) this.add(e);
 		for (let e of t.plugins ?? []) this.add(e);
 	}
 	register(e) {
@@ -735,15 +817,15 @@ var gn = class {
 	add(e) {
 		this.plugins.set(H(e), e), e.kind === "indicator" && this.indicatorEngine.register(e.plugin);
 	}
-}, _n = {
+}, Cn = {
 	orderPlace: (e, t) => e.placeOrder(t),
 	orderModify: (e, t) => e.modifyOrder(t),
 	orderCancel: (e, t) => e.cancelOrder(t),
 	positionModify: (e, t) => e.modifyPosition(t),
 	positionClose: (e, t) => e.closePosition(t),
-	positionReverse: (e, t, n) => vn(e, t, n)
+	positionReverse: (e, t, n) => wn(e, t, n)
 };
-async function vn(e, t, n) {
+async function wn(e, t, n) {
 	let { reversing: r } = n;
 	if (!r.has(t.positionId)) {
 		r.add(t.positionId);
@@ -772,7 +854,7 @@ async function vn(e, t, n) {
 		}
 	}
 }
-function yn(e, t) {
+function Tn(e, t) {
 	let n = [], r = null, i = {
 		positions: () => r ?? t.getPositions?.() ?? [],
 		reversing: /* @__PURE__ */ new Set()
@@ -782,8 +864,8 @@ function yn(e, t) {
 		e.data && t.onFill?.(e.data);
 	};
 	e.on("orders", a), e.on("positions", o), e.on("error", s), e.on("fill", c), n.push(() => e.off("orders", a), () => e.off("positions", o), () => e.off("error", s), () => e.off("fill", c));
-	for (let r of Object.keys(_n)) {
-		let a = _n[r], o = t.onIntent(r, (n) => {
+	for (let r of Object.keys(Cn)) {
+		let a = Cn[r], o = t.onIntent(r, (n) => {
 			Promise.resolve(a(e, n, i)).catch((e) => t.onError({
 				message: `Execution command failed: ${r}`,
 				cause: e
@@ -797,16 +879,16 @@ function yn(e, t) {
 }
 //#endregion
 //#region src/Chart.ts
-var bn = {
+var En = {
 	min: 0,
 	max: 100
-}, xn = 0xe8d4a51000, Sn = "exchange";
-function Cn(e) {
-	if (typeof e == "string" && e !== "exchange" && !f(e)) throw RangeError(`Unknown time zone: ${e}`);
+}, Dn = 0xe8d4a51000, On = "exchange";
+function kn(e) {
+	if (typeof e == "string" && e !== "exchange" && !p(e)) throw RangeError(`Unknown time zone: ${e}`);
 	if (typeof e == "number" && !Number.isFinite(e)) throw RangeError(`Invalid UTC offset: ${e}`);
 }
-var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
-	static version = "1.12.0";
+var An = 2, jn = .08, Mn = 800, Nn = 20, Pn = 8, Fn = class {
+	static version = "1.14.0";
 	engine;
 	viewport;
 	dataManager;
@@ -827,6 +909,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	indicatorUpdateFrom = null;
 	resolvedLayoutCache = null;
 	panelInfoCache = null;
+	paneStyles = /* @__PURE__ */ new Map();
+	lastBackground = null;
 	renderScheduled = !1;
 	priceAxisWidth = a;
 	measureCtx;
@@ -842,14 +926,14 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	indicatorHistoryDepth = 0;
 	removedDrawingAlerts = /* @__PURE__ */ new Map();
 	zoomAreaMode = !1;
-	priceAxisAddButton = new He();
+	priceAxisAddButton = new Ye();
 	displayTz = null;
 	timezoneSetting = null;
 	symbolInfo = null;
 	symbolInfoSeq = 0;
 	sessionBreaks;
 	sessionShading;
-	hostSessionHours = { ...xe };
+	hostSessionHours = { ...Te };
 	compareRenderer;
 	countdownInterval = null;
 	volumeRenderer;
@@ -862,15 +946,17 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	signalMarkerManager;
 	tradeZoneManager;
 	measureOverlay;
-	selectionBoxOverlay = new qe();
+	selectionBoxOverlay = new et();
 	replayManager;
 	replayBarUnsub = null;
 	replaySeeking = !1;
 	replaySession = null;
 	replayStepsSeries = null;
 	replayCoarse = null;
+	replayRevealMarks = !0;
+	replayOffset = 0;
 	undoRedoManager;
-	autoSaveScheduler = new Kt((e) => this.saveState(e));
+	autoSaveScheduler = new rn((e) => this.saveState(e));
 	animator;
 	crosshairTooltip;
 	pinnedTooltip;
@@ -882,15 +968,15 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	disposed = !1;
 	chartTypeOptions = {};
 	mainSeriesVisible = !0;
-	priceLines = new Ue();
-	symbolSeries = new et();
+	priceLines = new Xe();
+	symbolSeries = new st();
 	extendedHours = !0;
 	replayRestarting = !1;
 	fullSeries = null;
 	requestedSymbols = /* @__PURE__ */ new Set();
 	gridRenderer;
 	priceAxis;
-	leftPriceAxis = new E();
+	leftPriceAxis = new Je();
 	leftScaleRequested = !1;
 	leftAxisWidth = a;
 	leftViewport = null;
@@ -920,7 +1006,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	snapshotKey = null;
 	historyCheckQueued = !1;
 	constructor(e, t) {
-		t.timeZone != null && Cn(t.timeZone), this.container = e, this.options = {
+		t.timeZone != null && kn(t.timeZone), this.container = e, this.options = {
 			...t,
 			chartType: t.chartType ?? "candlestick"
 		}, this.numberLocale = t.numberLocale ?? "en-US", this.defaultAutoScale = t.autoScale !== !1;
@@ -958,15 +1044,15 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			logScale: n.logScale ?? !0,
 			timeframes: n.timeframes ?? [],
 			defaultTimeframeFavorites: n.defaultTimeframeFavorites ?? []
-		}, e.style.position = "relative", e.style.overflow = "hidden", e.tabIndex = 0, e.style.outline = "none", e.style.userSelect = "none", e.style.webkitUserSelect = "none", this.dataManager = new B(), this.history = new Zt({
+		}, e.style.position = "relative", e.style.overflow = "hidden", e.tabIndex = 0, e.style.outline = "none", e.style.userSelect = "none", e.style.webkitUserSelect = "none", this.dataManager = new F(), this.history = new sn({
 			oldestTime: () => this.dataManager.getData()[0]?.time ?? null,
 			prepend: (e) => this.prependBars(e),
 			emit: (e) => this.eventBus.emit("historyLoad", e)
-		}), this.themeManager = new Qt(t.theme), this.layoutManager = new tn(), this.indicatorEngine = new w(), this.pluginManager = new gn(this.indicatorEngine, { plugins: t.plugins }), this.eventBus = new Ee(), O(this.indicatorEngine), this.indicatorEngine.register(new he(this.symbolSeries)), this.indicatorEngine.register(new Ze(this.symbolSeries)), this.indicatorEngine.register(new ge(this.symbolSeries)), this.indicatorEngine.register(new _e(this.symbolSeries)), this.drawingManager = new Ce(), bt(this.drawingManager), this.drawingRenderer = new we(this.drawingManager), this.drawingManager.setRequestRender(() => {
+		}), this.themeManager = new L(t.theme), this.themeManager.setChartType(this.options.chartType ?? "candlestick"), this.applyStyle(cn(t), "host", !1), this.layoutManager = new ln(), this.indicatorEngine = new Pe(), this.pluginManager = new Sn(this.indicatorEngine, { plugins: t.plugins }), this.eventBus = new Ae(), E(this.indicatorEngine), this.indicatorEngine.register(new ye(this.symbolSeries)), this.indicatorEngine.register(new it(this.symbolSeries)), this.indicatorEngine.register(new be(this.symbolSeries)), this.indicatorEngine.register(new xe(this.symbolSeries)), this.drawingManager = new De(), Dt(this.drawingManager), this.drawingRenderer = new Oe(this.drawingManager), this.drawingManager.setRequestRender(() => {
 			this.syncRenderContext(), this.engine.requestRender(r.Overlay), this.scheduleAutoSave();
 		}), this.drawingManager.setEventCallback((e, t) => {
 			this.followDrawingAlerts(e, t?.id), this.eventBus.emit(e, t), (e === "drawingCreate" || e === "drawingUpdate" || e === "drawingRemove") && this.announceStateChange();
-		}), this.drawingManager.setToolFilter((e) => this.features.drawings && (this.features.drawingTools.length === 0 || this.features.drawingTools.includes(e))), this.undoRedoManager = new at();
+		}), this.drawingManager.setToolFilter((e) => this.features.drawings && (this.features.drawingTools.length === 0 || this.features.drawingTools.includes(e))), this.undoRedoManager = new ft();
 		let i = "";
 		this.undoRedoManager.setOnChange(() => {
 			let { canUndo: e, canRedo: t } = this.undoRedoManager.getState(), n = `${e}|${t}`;
@@ -979,21 +1065,21 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			primary: e[0] ?? null
 		})), this.drawingManager.setForeignHistory((e, t) => {
 			e.type === "custom" ? e.custom?.[t]() : this.applyIndicatorStep(e, t);
-		}), this.drawingManager.setDataGetter(() => this.dataManager.getData()), this.drawingManager.setDisplayDataGetter(() => this.getDisplayData()), t.crosshair?.mode === "magnet" && this.features.drawingMagnet && this.drawingManager.setMagnetMode("magnet"), this.tradingManager = new rt({
+		}), this.drawingManager.setDataGetter(() => this.dataManager.getData()), this.drawingManager.setDisplayDataGetter(() => this.getDisplayData()), t.crosshair?.mode === "magnet" && this.features.drawingMagnet && this.drawingManager.setMagnetMode("magnet"), this.tradingManager = new ut({
 			enabled: this.features.trading,
 			contextMenu: { enabled: this.features.tradingContextMenu }
-		}), this.tradingRenderer = new it(this.tradingManager), this.tradingManager.setContainer(e), this.tradingManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.tradingManager.setEventCallback((e, t) => {
+		}), this.tradingRenderer = new dt(this.tradingManager), this.tradingManager.setContainer(e), this.tradingManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.tradingManager.setEventCallback((e, t) => {
 			this.eventBus.emit(e, t);
-		}), this.engine = new We(e);
+		}), this.engine = new Ze(e);
 		let a = this.engine.dprManager.getContainerSize();
-		if (this.viewport = new ot(a.width, a.height, t.minBarSpacing ?? 2, t.maxBarSpacing ?? 30, t.rightMargin ?? 5), this.viewport.setPanLimits({
+		if (this.viewport = new pt(a.width, a.height, t.minBarSpacing ?? 2, t.maxBarSpacing ?? 30, t.rightMargin ?? 5), this.viewport.setPanLimits({
 			freePan: t.freePan ?? !0,
 			minVisibleBars: t.panLimits?.minVisibleBars ?? 3
 		}), this.layoutManager.resize(a.width, a.height), this.engine.onContainerResize = (e) => {
 			if (e.width <= 0 || e.height <= 0) return;
 			let t = this.viewport.isAtEnd();
 			this.viewport.resize(e.width, e.height), this.layoutManager.resize(e.width, e.height), this.updateViewportAndRender(t);
-		}, this.chartRenderer = this.createChartRenderer(this.options.chartType), this.gridRenderer = new De(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new E(), this.priceAxis.setLocale(this.numberLocale), this.leftPriceAxis.setLocale(this.numberLocale), this.timeAxis = new tt(), this.crosshairHandler = new ve(), this.crosshairHandler.setLocale(this.numberLocale), t.crosshair?.mode && this.crosshairHandler.setMode(t.crosshair.mode), this.crosshairHandler.setCallback((e, t) => {
+		}, this.chartRenderer = this.createChartRenderer(this.options.chartType), this.gridRenderer = new je(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new Je(), this.priceAxis.setLocale(this.numberLocale), this.leftPriceAxis.setLocale(this.numberLocale), this.timeAxis = new ct(), this.crosshairHandler = new Se(), this.crosshairHandler.setLocale(this.numberLocale), t.crosshair?.mode && this.crosshairHandler.setMode(t.crosshair.mode), this.crosshairHandler.setCallback((e, t) => {
 			if (e !== null && t) {
 				let n = this.dataManager.getData(), r = e < n.length ? n[e] : void 0;
 				this.chartLegend.setHoverBar(r ?? null);
@@ -1002,19 +1088,19 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 					prevClose: e > 0 ? n[e - 1]?.close : void 0,
 					priceRange: i.priceRange,
 					plot: i.chartRect,
-					barStepMs: ft(n)
+					barStepMs: yt(n)
 				}) : this.crosshairTooltip.hide(), this.pinnedTooltip.isPinned() && this.pinnedTooltip.reposition(this.viewport.getState(), r ?? null, e, this.themeManager.getTheme()), this.eventBus.emit("crosshairMove", {
 					point: t,
 					bar: r,
 					barIndex: e
 				});
 			} else this.crosshairTooltip.hide(), this.chartLegend.setHoverBar(null), this.eventBus.emit("crosshairLeave", {});
-		}), this.chartLegend = new pe(), this.chartLegend.setChartType(this.options.chartType), this.chartLegend.setLocale(this.numberLocale), this.watermark = new ut(), t.watermark && this.watermark.setConfig(t.watermark), this.volumeRenderer = new lt(), this.volumeProfile = new ct(), this.marketProfile = new Fe(), this.depthHeatmap = new Se(), this.periodLevels = new ze(), this.pivotMarkers = new Ve(), this.barCountdown = new le(), this.barCountdown.setVisible(this.features.barCountdown), this.sessionBreaks = new Je(), this.sessionBreaks.setLocale(this.numberLocale), this.sessionShading = new Ye(), this.compareRenderer = new me(), t.sessionBreaks ? this.sessionBreaks.setConfig({
+		}), this.chartLegend = new _e(), this.chartLegend.setChartType(this.options.chartType), this.chartLegend.setLocale(this.numberLocale), this.watermark = new _t(), t.watermark && this.watermark.setConfig(t.watermark), this.volumeRenderer = new gt(), this.volumeProfile = new ht(), this.marketProfile = new Be(), this.depthHeatmap = new Ee(), this.periodLevels = new We(), this.pivotMarkers = new Ke(), this.barCountdown = new pe(), this.barCountdown.setVisible(this.features.barCountdown), this.sessionBreaks = new tt(), this.sessionBreaks.setLocale(this.numberLocale), this.sessionShading = new nt(), this.compareRenderer = new ve(), t.sessionBreaks ? this.sessionBreaks.setConfig({
 			visible: t.sessionBreaks.visible ?? !0,
 			color: t.sessionBreaks.color,
 			lineStyle: t.sessionBreaks.lineStyle,
 			lineWidth: t.sessionBreaks.lineWidth
-		}) : t.features?.sessionBreaks !== !1 && this.sessionBreaks.setVisible(!0), t.logScale && this.features.logScale && this.viewport.setLogScale(!0), this.animator = new oe(), this.crosshairTooltip = new ye(), this.crosshairTooltip.create(e), this.crosshairTooltip.setLocale(this.numberLocale), this.pinnedTooltip = new Be(), this.pinnedTooltip.create(e), t.priceFormat && this.applyPriceFormat(t.priceFormat), t.chartTypeOptions && (this.chartTypeOptions = _(t.chartTypeOptions)), t.highLowLines && this.priceLines.setHighLow(!0), t.shapes && this.themeManager.setShape(Mn(t.shapes)), this.priceLines.setPriceText((e) => this.formatPrice(e)), t.extendedHours === !1 && (this.extendedHours = !1), t.timeFormatter && this.applyTimeFormatter(t.timeFormatter), this.keyboardHandler = new Me({
+		}) : t.features?.sessionBreaks !== !1 && this.sessionBreaks.setVisible(!0), t.logScale && this.features.logScale && this.viewport.setLogScale(!0), this.animator = new ue(), this.crosshairTooltip = new Ce(), this.crosshairTooltip.create(e), this.crosshairTooltip.setLocale(this.numberLocale), this.pinnedTooltip = new Ge(), this.pinnedTooltip.create(e), t.priceFormat && this.applyPriceFormat(t.priceFormat), t.chartTypeOptions && (this.chartTypeOptions = y(t.chartTypeOptions)), t.highLowLines && this.priceLines.setHighLow(!0), t.shapes && this.themeManager.setShape(Rn(t.shapes)), this.priceLines.setPriceText((e) => this.formatPrice(e)), t.extendedHours === !1 && (this.extendedHours = !1), t.timeFormatter && this.applyTimeFormatter(t.timeFormatter), this.keyboardHandler = new Le({
 			scrollBars: (e) => {
 				let t = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
 				this.viewport.scrollBy(e * t), this.updateViewportAndRender();
@@ -1031,17 +1117,17 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			},
 			fitContent: () => this.fitContent()
 		}), this.keyboardHandler.setEnabled(this.features.keyboard), t.a11y !== !1) {
-			this.a11y = new Ft(e, {
+			this.a11y = new Kt(e, {
 				symbol: () => this.currentSymbol || this.symbolInfo?.symbol || "",
 				timeframe: () => this.streamTimeframe ?? "",
 				chartType: () => this.options.chartType ?? "candlestick",
 				bars: () => this.getDisplayData(),
 				visibleRange: () => this.viewport.getState().visibleRange,
 				formatPrice: (e) => this.formatPrice(e),
-				formatTime: (e) => re(this.numberLocale || "en-US", {
+				formatTime: (e) => se(this.numberLocale || "en-US", {
 					dateStyle: "medium",
 					timeStyle: "short"
-				}, this.displayTz)(e > xn ? e : e * 1e3),
+				}, this.displayTz)(e > Dn ? e : e * 1e3),
 				showBar: (e) => this.setCrosshairTime(e)
 			}, t.a11y?.labels);
 			for (let e of [
@@ -1061,22 +1147,22 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				}
 				this.keyboardHandler.handleKey(e) && (e.preventDefault(), this.a11y?.viewMoved());
 			}
-		}, window.addEventListener("keydown", this.onWindowKeyDown), this.currentPriceLine = new be(), this.currentPriceLine.setLocale(this.numberLocale), this.priceAxis.setReservedPriceProvider(() => this.currentPriceLine.isVisible() ? this.currentPriceLine.getPrice() : null), this.alertManager = new ae(), this.alertManager.setDrawingLevels((e) => this.drawingLevelsNow(e)), this.alertManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.alertManager.on("triggered", (e) => {
-			this.eventBus.emit("alertTriggered", G(e)), this.eventBus.emit("dataUpdate", {
+		}, window.addEventListener("keydown", this.onWindowKeyDown), this.currentPriceLine = new we(), this.currentPriceLine.setLocale(this.numberLocale), this.priceAxis.setReservedPriceProvider(() => this.currentPriceLine.isVisible() ? this.currentPriceLine.getPrice() : null), this.alertManager = new le(), this.alertManager.setDrawingLevels((e) => this.drawingLevelsNow(e)), this.alertManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.alertManager.on("triggered", (e) => {
+			this.eventBus.emit("alertTriggered", K(e)), this.eventBus.emit("dataUpdate", {
 				alert: "triggered",
 				alertId: e.id,
 				price: e.price,
 				message: e.message
 			});
 		}), this.alertManager.on("added", (e) => {
-			this.eventBus.emit("alertAdd", G(e));
+			this.eventBus.emit("alertAdd", K(e));
 		}), this.alertManager.on("removed", (e) => {
 			this.eventBus.emit("alertRemove", { id: e });
 		}), this.alertManager.on("expired", (e) => {
-			this.eventBus.emit("alertExpired", G(e));
+			this.eventBus.emit("alertExpired", K(e));
 		}), this.alertManager.on("updated", (e) => {
-			this.eventBus.emit("alertUpdate", G(e));
-		}), this.signalMarkerManager = new Xe(), this.signalMarkerManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.signalMarkerManager.setDataGetter(() => this.dataManager.getData()), this.signalMarkerManager.on("added", (e) => {
+			this.eventBus.emit("alertUpdate", K(e));
+		}), this.signalMarkerManager = new rt(), this.signalMarkerManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.signalMarkerManager.setDataGetter(() => this.dataManager.getData()), this.signalMarkerManager.on("added", (e) => {
 			this.eventBus.emit("signalMarkerAdd", {
 				id: e.id,
 				source: e.source,
@@ -1084,18 +1170,24 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			});
 		}), this.signalMarkerManager.on("removed", (e) => {
 			this.eventBus.emit("signalMarkerRemove", { id: e });
-		}), this.tradeZoneManager = new nt(), this.tradeZoneManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.tradeZoneManager.setDataGetter(() => this.dataManager.getData()), this.tradeZoneManager.on("added", (e) => {
+		}), this.tradeZoneManager = new lt(), this.tradeZoneManager.setRequestRender(() => this.engine.requestRender(r.Overlay)), this.tradeZoneManager.setDataGetter(() => this.dataManager.getData()), this.tradeZoneManager.on("added", (e) => {
 			this.eventBus.emit("tradeZoneAdd", {
 				id: e.id,
 				direction: e.direction
 			});
 		}), this.tradeZoneManager.on("removed", (e) => {
 			this.eventBus.emit("tradeZoneRemove", { id: e });
-		}), this.replayManager = new Ke(), this.replayManager.on("stateChange", (e) => {
+		}), this.replayManager = new $e(), this.replayManager.on("complete", () => {
+			let e = this.getReplayBarIndex(), t = this.replayCoarse?.[e];
+			t && this.eventBus.emit("replayComplete", {
+				barIndex: e,
+				time: t.time
+			});
+		}), this.replayManager.on("stateChange", (e) => {
 			this.replayRestarting || this.eventBus.emit("replayState", { state: e });
-		}), this.measureOverlay = new Ie(), this.interactionManager = new Ae(e), this.features.panning) {
-			let e = new ln();
-			this.interactionManager.setPanHandler(new Le((t, n) => {
+		}), this.measureOverlay = new Ve(), this.interactionManager = new Fe(e), this.features.panning) {
+			let e = new gn();
+			this.interactionManager.setPanHandler(new He((t, n) => {
 				t && this.viewport.scrollBy(t), e.step(t, n, this.options.autoScale !== !1) && n && (this.options.autoScale = !1, this.viewport.panPriceRange(n)), this.updateViewportAndRender();
 			}, () => e.reset()));
 		}
@@ -1107,10 +1199,10 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				scales: !this.indicatorEngine.hasLeftScaleOverlays()
 			}
 		})), this.features.zooming) {
-			this.interactionManager.setZoomHandler(new dt((e, t) => {
+			this.interactionManager.setZoomHandler(new vt((e, t) => {
 				this.viewport.zoom(e, t - this.viewport.getState().chartRect.x), this.updateViewportAndRender();
 			}));
-			let e = new ce((e) => {
+			let e = new fe((e) => {
 				this.options.autoScale = !1, this.viewport.scalePriceRange(e), this.syncRenderContext(), this.engine.requestRender(), this.emitViewportEvents();
 			}, (e) => {
 				let t = this.viewport.getState().chartRect.width;
@@ -1130,7 +1222,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				y: t.y
 			});
 		})), this.interactionManager.setChartContextMenu((e, t) => this.eventBus.hasListeners("chartContextMenu") ? (this.eventBus.emit("chartContextMenu", this.contextAt(e, t)), !0) : !1), this.priceAxisAddButton.setEnabled(this.features.priceAxisAddButton && this.features.crosshair), this.interactionManager.setPriceAxisAddButton(this.priceAxisAddButton, (e) => {
-			let t = P(e.y, this.viewport.getState());
+			let t = Rt(e.y, this.viewport.getState());
 			Number.isFinite(t) && this.eventBus.emit("priceAxisAdd", {
 				price: t,
 				x: e.x,
@@ -1140,10 +1232,10 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			...this.viewport.getState(),
 			data: this.getDisplayData()
 		})), this.features.alerts) {
-			let e = new ie(this.alertManager, () => this.viewport.getState());
+			let e = new ce(this.alertManager, () => this.viewport.getState());
 			this.interactionManager.setAlertDragHandler(e);
 		}
-		let o = new Re();
+		let o = new Ue();
 		o.configure(() => this.getResolvedLayout(), (e, t) => this.setPanelSize(e, t)), this.interactionManager.setPaneResizeHandler(o), this.interactionManager.setAltClickHandler((e) => {
 			let t = this.getDisplayData();
 			if (t.length === 0) return;
@@ -1167,7 +1259,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				x: e.x,
 				y: e.y
 			}), t.length === 0) return;
-			let r = Ot(e.x, this.viewport.getState());
+			let r = Lt(e.x, this.viewport.getState());
 			r < 0 || r >= t.length || this.eventBus.emit("barClick", {
 				bar: t[r],
 				barIndex: r,
@@ -1207,7 +1299,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			end: () => {
 				let e = this.selectionBoxOverlay.end();
 				if (e && this.zoomAreaMode) {
-					if (e.x1 - e.x0 < On) return;
+					if (e.x1 - e.x0 < Pn) return;
 					this.zoomToBox(e), this.setZoomAreaMode(!1);
 					return;
 				}
@@ -1244,7 +1336,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		if (this.replaySession) return 0;
 		let t = null;
 		if (this.fullSeries) {
-			let n = this.fullSeries[0]?.time, r = /* @__PURE__ */ new Set(), i = e.filter((e) => zn(e) && (n === void 0 || e.time < n) && !r.has(e.time) && r.add(e.time)).sort((e, t) => e.time - t.time);
+			let n = this.fullSeries[0]?.time, r = /* @__PURE__ */ new Set(), i = e.filter((e) => Kn(e) && (n === void 0 || e.time < n) && !r.has(e.time) && r.add(e.time)).sort((e, t) => e.time - t.time);
 			this.fullSeries = [...i, ...this.fullSeries];
 			let a = this.sessionKeep(this.fullSeries);
 			t = i.length, e = a ? i.filter((e) => a(e.time)) : i;
@@ -1253,7 +1345,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		if (a === 0) return t ?? 0;
 		let o = this.dataManager.getData();
 		if (this.crosshairHandler.setData(o), this.displayDataCache = null, this.sessionBreaks.invalidateCache(), this.pinnedTooltip.isPinned() && this.pinnedTooltip.unpin(), this.measureOverlay.end(), this.recalcIndicators(o), i !== void 0) {
-			let e = Math.round(j(i, this.getDisplayData()));
+			let e = Math.round(O(i, this.getDisplayData()));
 			this.viewport.prependBars(e - r);
 		}
 		return this.updateViewportAndRender(), t ?? a;
@@ -1284,15 +1376,15 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	checkHistory() {
 		this.historyCheckQueued || !this.history.hasLoader() || (this.historyCheckQueued = !0, queueMicrotask(() => {
-			if (this.historyCheckQueued = !1, this.replaySession || !this.history.hasLoader() || Vt(this.options.chartType)) return;
+			if (this.historyCheckQueued = !1, this.replaySession || !this.history.hasLoader() || $t(this.options.chartType)) return;
 			let { from: e, to: t } = this.viewport.getState().visibleRange;
-			this.history.maybeLoad(Math.max(0, Math.floor(e)), Math.max(Dn, t - e));
+			this.history.maybeLoad(Math.max(0, Math.floor(e)), Math.max(Nn, t - e));
 		}));
 	}
 	useStreamHistory(e, t) {
 		if (this.hostHistoryLoader) return;
-		let n = Dt(e), r = n.fetchHistoryBefore, i = this.streamTimeframe;
-		if (!r || i === null || ne(i) !== null) {
+		let n = It(e), r = n.fetchHistoryBefore, i = this.streamTimeframe;
+		if (!r || i === null || ie(i) !== null) {
 			this.historyFromStream && this.history.setLoader(null), this.historyFromStream = !1;
 			return;
 		}
@@ -1352,7 +1444,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	setChartType(e) {
 		let t = this.options.chartType ?? "candlestick";
-		this.options.chartType = e, this.chartRenderer = this.createChartRenderer(e), this.chartLegend.setChartType(e), this.displayDataCache = null, this.updateViewportAndRender(!0), this.markStateChanged(), e !== t && this.eventBus.emit("chartTypeChange", {
+		this.options.chartType = e, this.themeManager.setChartType(e), this.chartRenderer = this.createChartRenderer(e), this.chartLegend.setChartType(e), this.displayDataCache = null, this.updateViewportAndRender(!0), this.markStateChanged(), e !== t && this.eventBus.emit("chartTypeChange", {
 			type: e,
 			previous: t
 		});
@@ -1360,11 +1452,11 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	setChartTypeOptions(e) {
 		this.chartTypeOptions = {
 			...this.chartTypeOptions,
-			..._(e)
+			...y(e)
 		}, this.displayDataCache = null, this.updateViewportAndRender(!0), this.markStateChanged();
 	}
 	getChartTypeOptions() {
-		return _(this.chartTypeOptions);
+		return y(this.chartTypeOptions);
 	}
 	setExtendedHours(e) {
 		e !== this.extendedHours && (this.extendedHours = e, this.reapplyExtendedHours(), this.markStateChanged());
@@ -1373,7 +1465,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.extendedHours;
 	}
 	sessionKeep(e) {
-		return this.extendedHours ? null : jt(this.symbolInfo, e);
+		return this.extendedHours ? null : Vt(this.symbolInfo, e);
 	}
 	shownBars(e) {
 		let t = this.sessionKeep(e);
@@ -1384,7 +1476,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.fullSeries = t ? e.slice() : null, t ? e.filter((e) => t(e.time)) : e;
 	}
 	placeStreamBar(e) {
-		let t = K(this.dataManager.getData(), e);
+		let t = q(this.dataManager.getData(), e);
 		return t === "stale" ? !1 : (t === "append" ? this.dataManager.appendBar(e) : this.dataManager.updateLastBar(e), !0);
 	}
 	takeBar(e, t) {
@@ -1414,7 +1506,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.priceLines.setQuoteShown(this.replaySession === null), this.priceLines;
 	}
 	setShapes(e) {
-		let t = Mn(e);
+		let t = Rn(e);
 		t.tagRadius !== void 0 && (this.themeManager.setShape({
 			...this.themeManager.getTheme().shape,
 			...t
@@ -1459,7 +1551,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	setSymbolSeries(e, t) {
 		e = e.trim(), this.symbolSeries.set(e, t), this.requestedSymbols.delete(e);
 		let n = this.dataManager.getData(), r = !1;
-		for (let t of this.indicatorEngine.getActiveIndicators()) !W.has(t.id) || String(t.params.symbol ?? "").trim() !== e.trim() || (this.indicatorEngine.updateIndicator(t.instanceId, {}, n), r = !0);
+		for (let t of this.indicatorEngine.getActiveIndicators()) !G.has(t.id) || String(t.params.symbol ?? "").trim() !== e.trim() || (this.indicatorEngine.updateIndicator(t.instanceId, {}, n), r = !0);
 		r && (this.announceIndicatorUpdate(0), this.updateViewportAndRender());
 	}
 	forgetUnreadSymbols() {
@@ -1473,27 +1565,27 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		let e = /* @__PURE__ */ new Set();
 		for (let t of this.indicatorEngine.getActiveIndicators()) {
 			let n = t.params.symbol;
-			W.has(t.id) && typeof n == "string" && n.trim() && e.add(n.trim());
+			G.has(t.id) && typeof n == "string" && n.trim() && e.add(n.trim());
 		}
 		return [...e];
 	}
 	requestMissingSymbols(e) {
 		this.forgetUnreadSymbols();
-		let t = this.indicatorEngine.getIndicatorConfig(e), n = t && W.has(t.id) && typeof t.params.symbol == "string" ? t.params.symbol.trim() : "";
+		let t = this.indicatorEngine.getIndicatorConfig(e), n = t && G.has(t.id) && typeof t.params.symbol == "string" ? t.params.symbol.trim() : "";
 		!n || this.symbolSeries.has(n) || this.requestedSymbols.has(n) || (this.requestedSymbols.add(n), this.eventBus.emit("symbolSeriesRequest", { symbol: n }));
 	}
 	updateIndicator(e, t) {
 		this.recordIndicators(e, () => this.updateIndicatorNow(e, t));
 	}
 	updateIndicatorNow(e, t) {
-		let n = this.indicatorEngine.getIndicatorDescriptor(e), r = n ? A(n) : null, i = r ? this.indicatorEngine.getIndicatorConfig(e)?.params[r] : void 0;
+		let n = this.indicatorEngine.getIndicatorDescriptor(e), r = n ? D(n) : null, i = r ? this.indicatorEngine.getIndicatorConfig(e)?.params[r] : void 0;
 		this.indicatorEngine.updateIndicator(e, t, this.dataManager.getData()), this.announceIndicatorUpdate(0), this.markStateChanged(), this.eventBus.emit("indicatorChange", {
 			instanceId: e,
 			change: "params"
 		}), this.requestMissingSymbols(e);
 		let a = this.indicatorEngine.getIndicatorConfig(e);
 		if (n?.placement === "overlay" && a && r && a.params[r] !== i) {
-			let t = h(a.params[r]), n = t ? this.paneHostOf(t.instanceId, e) : h(i) ? null : a.pane ?? null;
+			let t = g(a.params[r]), n = t ? this.paneHostOf(t.instanceId, e) : g(i) ? null : a.pane ?? null;
 			(n ?? void 0) !== a.pane && (this.indicatorEngine.setPane(e, n), this.eventBus.emit("indicatorChange", {
 				instanceId: e,
 				change: "pane"
@@ -1504,7 +1596,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	paneFor(e, t, n, r) {
 		if (n) return this.paneHostOf(n, r);
 		if (e.placement !== "overlay") return null;
-		let i = A(e), a = i ? h(t[i]) : null;
+		let i = D(e), a = i ? g(t[i]) : null;
 		return a ? this.paneHostOf(a.instanceId, r) : null;
 	}
 	paneHostOf(e, t) {
@@ -1547,8 +1639,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return {
 			...e,
 			priceRange: {
-				min: t.min - n * Tn,
-				max: t.max + n * Tn
+				min: t.min - n * jn,
+				max: t.max + n * jn
 			},
 			logScale: !1,
 			scaleMode: "regular",
@@ -1578,7 +1670,9 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	detachIndicator(e) {
 		if (!this.indicatorEngine.getIndicatorConfig(e)) return;
 		let t = this.layoutManager.getPanels().find((t) => t.id === e), n = this.indicatorEngine.getPaneMembers(e), r = t ? n.find((e) => this.indicatorEngine.getIndicatorDescriptor(e)?.placement === "panel") ?? null : null;
-		this.indicatorEngine.removeIndicator(e), r ? (this.indicatorEngine.setPane(r, null), this.layoutManager.renamePanel(e, r)) : this.layoutManager.removePanel(e);
+		this.indicatorEngine.removeIndicator(e);
+		let i = this.paneStyles.get(e);
+		this.paneStyles.delete(e), r ? (this.indicatorEngine.setPane(r, null), this.layoutManager.renamePanel(e, r), i && this.paneStyles.set(r, i)) : this.layoutManager.removePanel(e);
 		for (let e of n) e !== r && this.indicatorEngine.setPane(e, r), this.eventBus.emit("indicatorChange", {
 			instanceId: e,
 			change: "pane"
@@ -1588,6 +1682,28 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	getIndicatorStyle(e) {
 		return this.indicatorEngine.getIndicatorStyle(e);
 	}
+	setIndicatorDefaults(e, t) {
+		if (!t) {
+			this.indicatorEngine.setStyleDefaults(e, null);
+			return;
+		}
+		let { plots: n, ...r } = t, i = n === void 0 ? void 0 : ee(n);
+		this.indicatorEngine.setStyleDefaults(e, {
+			...r,
+			...i ? { plots: i } : {}
+		});
+	}
+	setPaneStyle(e, t) {
+		let n = this.paneOf(e);
+		this.layoutManager.getPanels().some((e) => e.id === n) && this.recordIndicators(n, () => this.setPaneStyleNow(n, t ? b(t) : null));
+	}
+	setPaneStyleNow(e, t) {
+		JSON.stringify(t) !== JSON.stringify(this.paneStyles.get(e) ?? null) && (t ? this.paneStyles.set(e, t) : this.paneStyles.delete(e), this.panelInfoCache = null, this.syncRenderContext(), this.engine.requestRender(), this.markStateChanged());
+	}
+	getPaneStyle(e) {
+		let t = this.paneStyles.get(this.paneOf(e));
+		return t ? { ...t } : null;
+	}
 	getIndicatorOutput(e) {
 		return this.indicatorEngine.getOutput(e);
 	}
@@ -1598,8 +1714,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.pluginManager;
 	}
 	static indicators() {
-		let e = new w();
-		return O(e), e.getAvailableIndicators();
+		let e = new Pe();
+		return E(e), e.getAvailableIndicators();
 	}
 	setPanelPosition(e, t) {
 		this.layoutManager.setPanelPosition(e, t), this.updateViewportAndRender(), this.eventBus.emit("indicatorChange", {
@@ -1622,8 +1738,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	paneMoveHost(e, t) {
 		let n = this.indicatorEngine.getIndicatorConfig(e), r = this.indicatorEngine.getIndicatorDescriptor(e);
 		if (!n || !r) return;
-		let i = A(r);
-		if (r.placement === "overlay" && i && h(n.params[i])) return;
+		let i = D(r);
+		if (r.placement === "overlay" && i && g(n.params[i])) return;
 		if (t === "price") return r.placement === "overlay" && n.pane ? null : void 0;
 		if (t === "new") {
 			let t = this.layoutManager.getPanels().some((t) => t.id === e);
@@ -1637,14 +1753,15 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		if (n === void 0 || !r) return !1;
 		let i = r.pane, a = this.layoutManager.getPanels().some((t) => t.id === e), o = new Set([e]);
 		if (a) {
-			let t = this.indicatorEngine.getPaneMembers(e), r = new Set(this.indicatorEngine.getDependents(e)), i = t.filter((e) => !r.has(e)), a = i.find((e) => this.indicatorEngine.getIndicatorDescriptor(e)?.placement === "panel") ?? null;
-			if (a) {
-				this.indicatorEngine.setPane(a, null), this.layoutManager.renamePanel(e, a);
+			let t = this.indicatorEngine.getPaneMembers(e), r = new Set(this.indicatorEngine.getDependents(e)), i = t.filter((e) => !r.has(e)), a = i.find((e) => this.indicatorEngine.getIndicatorDescriptor(e)?.placement === "panel") ?? null, s = this.paneStyles.get(e);
+			if (this.paneStyles.delete(e), a) {
+				this.indicatorEngine.setPane(a, null), this.layoutManager.renamePanel(e, a), s && this.paneStyles.set(a, s);
 				for (let e of i) e !== a && this.indicatorEngine.setPane(e, a);
 			} else {
 				this.layoutManager.removePanel(e);
 				for (let e of i) this.indicatorEngine.setPane(e, null);
 			}
+			this.panelInfoCache = null;
 			for (let i of t) r.has(i) && this.indicatorEngine.setPane(i, n ?? e), o.add(i);
 		}
 		if (this.indicatorEngine.setPane(e, n), t === "new") {
@@ -1728,12 +1845,12 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.features.legend ? e + this.chartLegend.getHeight() : e;
 	}
 	isTimeAligned() {
-		return Vt(this.options.chartType) ? !1 : this.getDisplayData().length === this.dataManager.getLength();
+		return $t(this.options.chartType) ? !1 : this.getDisplayData().length === this.dataManager.getLength();
 	}
 	roundPrice(e) {
 		if (!Number.isFinite(e)) return e;
 		let t = this.symbolInfo?.minTick ?? this.priceUnit ?? void 0;
-		if (t !== void 0 && t > 0) return Number((Math.round(e / t) * t).toFixed(te(t)));
+		if (t !== void 0 && t > 0) return Number((Math.round(e / t) * t).toFixed(re(t)));
 		let { min: n, max: r } = this.viewport.getState().priceRange;
 		return Number(e.toFixed(this.marketPricePrecision ?? s(n, r)));
 	}
@@ -1744,7 +1861,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.priceFormatter;
 	}
 	applyPriceFormat(e) {
-		this.priceFormatter = g(e), this.priceUnit = e && typeof e != "function" ? u(e) : null, this.viewport.setPriceFormat(this.priceFormatter, this.priceUnit), this.crosshairTooltip.setPriceFormatter(this.priceFormatter), this.pinnedTooltip.setPriceFormatter(this.priceFormatter);
+		this.priceFormatter = _(e), this.priceUnit = e && typeof e != "function" ? d(e) : null, this.viewport.setPriceFormat(this.priceFormatter, this.priceUnit), this.crosshairTooltip.setPriceFormatter(this.priceFormatter), this.pinnedTooltip.setPriceFormatter(this.priceFormatter);
 	}
 	setTimeFormatter(e) {
 		this.applyTimeFormatter(e), this.engine.requestRender();
@@ -1755,7 +1872,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	formatPrice(e) {
 		if (this.priceFormatter) return this.priceFormatter(e);
 		let { min: t, max: n } = this.viewport.getState().priceRange;
-		return l(e, this.marketPricePrecision ?? s(t, n), this.numberLocale);
+		return u(e, this.marketPricePrecision ?? s(t, n), this.numberLocale);
 	}
 	setDrawingTool(e) {
 		this.features.drawings && (e && this.features.drawingTools.length > 0 && !this.features.drawingTools.includes(e) || (e && this.setZoomAreaMode(!1), this.drawingManager.setActiveTool(e)));
@@ -1800,7 +1917,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	autoFib() {
 		if (!this.features.drawings) return null;
-		let e = this.getDisplayData(), t = this.viewport.getState(), n = pt(e, t.visibleRange.from, t.visibleRange.to);
+		let e = this.getDisplayData(), t = this.viewport.getState(), n = bt(e, t.visibleRange.from, t.visibleRange.to);
 		return n ? this.addDrawing({
 			type: "fibRetracement",
 			anchors: [n[0], n[1]]
@@ -1875,7 +1992,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	recordUndo(e) {
 		if (!this.features.drawingUndoRedo || typeof e?.undo != "function" || typeof e.redo != "function") return;
 		let t = performance.now(), n = this.undoRedoManager.last();
-		if (e.subject !== void 0 && n?.type === "custom" && n.custom?.subject === e.subject && t - n.custom.at < En) {
+		if (e.subject !== void 0 && n?.type === "custom" && n.custom?.subject === e.subject && t - n.custom.at < Mn) {
 			this.undoRedoManager.replaceLast({
 				...n,
 				custom: {
@@ -1922,7 +2039,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			x: t.x,
 			y: t.y
 		};
-		if ((e === "plot" || e === "priceAxis") && (r.price = P(t.y, n)), (e === "plot" || e === "timeAxis") && n.data.length > 0 && (r.time = N(t.x, n)), e === "pane") {
+		if ((e === "plot" || e === "priceAxis") && (r.price = Rt(t.y, n)), (e === "plot" || e === "timeAxis") && n.data.length > 0 && (r.time = k(t.x, n)), e === "pane") {
 			let e = this.getIndicatorPanes().find((e) => t.y >= e.rect.y && t.y <= e.rect.y + e.rect.height);
 			e && (r.pane = e.instanceId);
 		}
@@ -1948,7 +2065,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			...this.viewport.getState(),
 			data: this.getDisplayData()
 		};
-		this.setVisibleRange(N(e.x0, t), N(e.x1, t));
+		this.setVisibleRange(k(e.x0, t), k(e.x1, t));
 	}
 	lockAllDrawings() {
 		this.drawingManager.lockAllDrawings();
@@ -1993,7 +2110,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		for (let e of this.indicatorEngine.getActiveIndicators()) {
 			let t = this.indicatorEngine.getOutput(e.instanceId)?.series;
 			if (!t) continue;
-			let r = Lt(e.id, e.params, e.descriptor.defaultConfig, e.descriptor.shortName), o = e.descriptor.plots ?? Object.keys(t.find((e) => e) ?? {}).map((e) => ({
+			let r = Yt(e.id, e.params, e.descriptor.defaultConfig, e.descriptor.shortName), o = e.descriptor.plots ?? Object.keys(t.find((e) => e) ?? {}).map((e) => ({
 				key: e,
 				title: e
 			}));
@@ -2017,11 +2134,11 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	getExportText(e = "csv", t = {}) {
 		let { bars: n, columns: r } = this.getExportData(t);
-		return e === "json" ? S.toJSON(n, r) : S.toCSV(n, r);
+		return e === "json" ? C.toJSON(n, r) : C.toCSV(n, r);
 	}
 	download(e, t, n) {
 		let r = this.getExportText(e, n);
-		e === "json" ? S.download(r, t ?? "chart-data.json", "application/json") : S.download(r, t ?? "chart-data.csv", "text/csv");
+		e === "json" ? C.download(r, t ?? "chart-data.json", "application/json") : C.download(r, t ?? "chart-data.csv", "text/csv");
 	}
 	setAutoSave(e, t = 5e3) {
 		this.autoSaveScheduler.enable(e, t);
@@ -2071,7 +2188,11 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		this.recordIndicators(e, () => this.updateIndicatorStyleNow(e, t));
 	}
 	updateIndicatorStyleNow(e, t) {
-		this.indicatorEngine.updateIndicatorStyle(e, t), this.engine.requestRender(), this.markStateChanged(), this.eventBus.emit("indicatorChange", {
+		let { plots: n, ...r } = t, i = n === void 0 ? void 0 : ee(n);
+		this.indicatorEngine.updateIndicatorStyle(e, {
+			...r,
+			...i ? { plots: i } : {}
+		}), this.engine.requestRender(), this.markStateChanged(), this.eventBus.emit("indicatorChange", {
 			instanceId: e,
 			change: "style"
 		});
@@ -2177,8 +2298,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		this.features.trading && this.tradingManager.setConfig(e);
 	}
 	async connect(e) {
-		if (!k(e.adapter, e.timeframe)) throw RangeError(`${e.adapter.name} cannot serve the ${e.timeframe} timeframe`);
-		this.snapshotKey = null, this.replayStop(), this.disconnectStream(), this.streamManager = new $e(), this.streamManager.on("snapshot", (t) => {
+		if (!Ot(e.adapter, e.timeframe)) throw RangeError(`${e.adapter.name} cannot serve the ${e.timeframe} timeframe`);
+		this.snapshotKey = null, this.replayStop(), this.disconnectStream(), this.streamManager = new ot(), this.streamManager.on("snapshot", (t) => {
 			let n = `${this.currentSymbol}|${this.streamTimeframe}`;
 			this.replaySession ? this.replaySession.live.setData(t) : n === this.snapshotKey && this.dataManager.getLength() > 0 ? this.mergeSnapshot(t) : this.setData(t), this.snapshotKey = n, this.useStreamHistory(e.adapter, e.historyPageSize);
 		}), this.streamManager.on("barClose", (e) => {
@@ -2186,7 +2307,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				this.replaySession.live.appendBar(e);
 				return;
 			}
-			let t = K(this.fullSeries ?? this.dataManager.getData(), e);
+			let t = q(this.fullSeries ?? this.dataManager.getData(), e);
 			if (t === "stale" || !this.takeBar(e, t)) return;
 			let n = this.autoScrollOnNewBar && this.viewport.isAtEnd();
 			if (!this.placeStreamBar(e)) return;
@@ -2198,7 +2319,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				return;
 			}
 			this.currentPriceLine.setPrice(e.close);
-			let t = K(this.fullSeries ?? this.dataManager.getData(), e);
+			let t = q(this.fullSeries ?? this.dataManager.getData(), e);
 			if (t === "stale" || !this.takeBar(e, t) || !this.placeStreamBar(e)) {
 				this.scheduleRender();
 				return;
@@ -2227,7 +2348,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		}), this.autoScrollOnNewBar = e.autoScroll !== !1, this.setStreamTarget(e.symbol, e.timeframe), this.streamAdapter = e.adapter;
 		let t = this.streamManager;
 		if (this.resolveStreamSymbol(e.adapter, e.symbol), await t.connect(e), this.streamManager !== t) return;
-		let n = y(e.timeframe);
+		let n = ae(e.timeframe);
 		this.barCountdown.setTimeframeMs(n), this.countdownInterval && clearInterval(this.countdownInterval), this.countdownInterval = setInterval(() => {
 			this.barCountdown.isVisible() && this.engine.requestRender(r.Hover);
 		}, 1e3);
@@ -2245,8 +2366,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	async switchStream(e, t) {
 		if (!this.streamManager) return;
 		let n = this.streamAdapter;
-		if (n && !k(n, t)) throw RangeError(`${n.name} cannot serve the ${t} timeframe`);
-		this.setStreamTarget(e, t), this.historyFromStream && this.history.setLoader(null), this.barCountdown.setTimeframeMs(y(t)), n && this.resolveStreamSymbol(n, e), await this.streamManager.switchTo(e, t);
+		if (n && !Ot(n, t)) throw RangeError(`${n.name} cannot serve the ${t} timeframe`);
+		this.setStreamTarget(e, t), this.historyFromStream && this.history.setLoader(null), this.barCountdown.setTimeframeMs(ae(t)), n && this.resolveStreamSymbol(n, e), await this.streamManager.switchTo(e, t);
 	}
 	isTimeframeAllowed(e) {
 		let t = this.features.timeframes;
@@ -2261,7 +2382,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	connectExecution(e, t = {}) {
 		if (!this.features.trading) throw Error("connectExecution requires features.trading to be enabled");
-		this.disconnectExecution(), this.executionAdapter = e, this.execTeardown = yn(e, {
+		this.disconnectExecution(), this.executionAdapter = e, this.execTeardown = Tn(e, {
 			onIntent: (e, t) => {
 				let n = (e) => t(e.payload);
 				return this.eventBus.on(e, n), () => this.eventBus.off(e, n);
@@ -2352,18 +2473,18 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	goToTime(e) {
 		let t = this.getDisplayData();
 		if (t.length === 0 || !Number.isFinite(e)) return -1;
-		let n = Math.max(0, Math.min(t.length - 1, Math.floor(j(e, t)))), r = this.viewport.getState(), i = n * (r.barWidth + r.barSpacing) + r.barWidth / 2 - r.chartRect.width / 2;
+		let n = Math.max(0, Math.min(t.length - 1, Math.floor(O(e, t)))), r = this.viewport.getState(), i = n * (r.barWidth + r.barSpacing) + r.barWidth / 2 - r.chartRect.width / 2;
 		return this.viewport.scrollBy(i - r.offset), this.updateViewportAndRender(), n;
 	}
 	setVisibleRangePreset(e) {
 		let t = this.getDisplayData();
 		if (t.length === 0) return;
-		let n = t.length - 1, r = t[n].time > xn ? 1 : 1e3, i = vt(e, t[n].time * r, this.displayTz), a = i === null ? null : i / r;
+		let n = t.length - 1, r = t[n].time > Dn ? 1 : 1e3, i = Tt(e, t[n].time * r, this.displayTz), a = i === null ? null : i / r;
 		if (a === null || a < t[0].time) {
 			this.fitContent();
 			return;
 		}
-		let o = j(a, t), s = Math.min(n, e === "YTD" ? Math.ceil(o) : Math.floor(o) + 1);
+		let o = O(a, t), s = Math.min(n, e === "YTD" ? Math.ceil(o) : Math.floor(o) + 1);
 		this.viewport.zoomToBarRange(s, n + this.viewport.getRightMargin()), this.viewport.scrollToEnd(), this.updateViewportAndRender();
 	}
 	scrollToEnd() {
@@ -2377,7 +2498,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	setVisibleRange(e, t) {
 		let n = this.dataManager.getData();
 		if (n.length === 0) return;
-		let r = j(Math.min(e, t), n), i = j(Math.max(e, t), n);
+		let r = O(Math.min(e, t), n), i = O(Math.max(e, t), n);
 		this.viewport.zoomToBarRange(r, i), this.updateViewportAndRender();
 	}
 	setPanLimits(e) {
@@ -2411,10 +2532,41 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		this.eventBus.disableTauriBridge();
 	}
 	setTheme(e) {
-		this.themeManager.setTheme(e), this.syncRenderContext(), this.container.style.backgroundColor = this.themeManager.getTheme().background, this.engine.requestRender(), this.eventBus.emit("themeChange", { theme: e }), this.markStateChanged();
+		this.themeManager.setTheme(e), this.syncRenderContext(), this.container.style.backgroundColor = this.themeManager.getTheme().background, this.lastBackground = this.themeManager.getTheme().background, this.engine.requestRender(), this.eventBus.emit("themeChange", { theme: e }), this.markStateChanged();
 	}
 	getTheme() {
-		return this.themeManager.getTheme();
+		return this.themeManager.getBaseTheme();
+	}
+	applyOverrides(e, t = {}) {
+		this.applyStyle(e, t.layer ?? "host", !0);
+	}
+	setOverrides(e, t = {}) {
+		let n = t.layer ?? "host", { overrides: r, rejected: i } = v(e);
+		i.length > 0 && console.warn(`Style overrides left out (unknown key or value): ${i.join(", ")}`);
+		let a = Object.fromEntries(Object.entries(r).filter(([, e]) => e !== null));
+		this.themeManager.setOverrides(a, n) && this.styleChanged(n);
+	}
+	resetOverrides(e, t = {}) {
+		let n = t.layer ?? "host";
+		this.themeManager.resetOverrides(n, e) && this.styleChanged(n);
+	}
+	getOverrides(e = {}) {
+		return this.themeManager.getOverrides(e.layer ?? "host");
+	}
+	getStyle() {
+		return this.themeManager.getTheme().style;
+	}
+	getStyleValue(e) {
+		return this.themeManager.getStyleValue(e);
+	}
+	applyStyle(e, t, n) {
+		let { overrides: r, rejected: i } = v(e);
+		i.length > 0 && console.warn(`Style overrides left out (unknown key or value): ${i.join(", ")}`), this.themeManager.applyOverrides(r, t) && n && this.styleChanged(t);
+	}
+	styleChanged(e) {
+		this.syncRenderContext();
+		let t = this.themeManager.getTheme().background;
+		t !== this.lastBackground && (this.container.style.backgroundColor = t, this.lastBackground = t), this.engine.requestRender(), this.eventBus.emit("styleChange", { layer: e }), e === "user" && this.markStateChanged();
 	}
 	setWatermark(e, t) {
 		this.watermark.setConfig({
@@ -2438,7 +2590,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		e ? this.crosshairHandler.onPointerMove(e) : this.crosshairHandler.onPointerLeave(), this.engine.requestRender(r.Hover);
 	}
 	setCrosshairTime(e) {
-		let t = this.getDisplayData(), n = e === null || t.length === 0 ? null : Math.floor(j(e, t));
+		let t = this.getDisplayData(), n = e === null || t.length === 0 ? null : Math.floor(O(e, t));
 		n !== this.crosshairHandler.getSyncedSlot() && (this.crosshairHandler.setSyncedSlot(n), this.engine.requestRender(r.Hover));
 	}
 	getData() {
@@ -2500,7 +2652,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		this.periodLevels.setPeriod(e), this.engine.requestRender(r.Main);
 	}
 	setTimezone(e) {
-		Cn(e), this.timezoneSetting = e, this.applyTimezone();
+		kn(e), this.timezoneSetting = e, this.applyTimezone();
 	}
 	getTimezone() {
 		return this.timezoneSetting;
@@ -2509,7 +2661,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.displayTz;
 	}
 	applyTimezone() {
-		let e = this.symbolInfo?.timezone, t = this.timezoneSetting === "exchange" ? e && f(e) ? e : "UTC" : this.timezoneSetting;
+		let e = this.symbolInfo?.timezone, t = this.timezoneSetting === "exchange" ? e && p(e) ? e : "UTC" : this.timezoneSetting;
 		this.displayTz = t, this.timeAxis.setTimezoneOffset(t), this.crosshairHandler.setTimezoneOffset(t), this.crosshairTooltip.setTimezoneOffset(t), this.pinnedTooltip.setTimezone(t), this.sessionBreaks.setTimezone(t), this.engine.requestRender();
 	}
 	setSymbolInfo(e) {
@@ -2518,13 +2670,13 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			sessions: e.sessions?.map((e) => ({ ...e }))
 		} : null, this.marketConfig?.pricePrecision === void 0 && this.applyPricePrecision(this.symbolInfo?.pricePrecision ?? null);
 		let t = (this.symbolInfo?.sessions ?? []).flatMap((e) => {
-			let t = v(e.start), n = v(e.end);
+			let t = x(e.start), n = x(e.end);
 			return t === null || n === null ? [] : [{
 				startMinute: t,
 				endMinute: n
 			}];
 		}), n = this.symbolInfo?.timezone;
-		this.sessionShading.replaceConfig(t.length > 0 && n && f(n) ? {
+		this.sessionShading.replaceConfig(t.length > 0 && n && p(n) ? {
 			timeZone: n,
 			windows: t,
 			startMinute: t[0].startMinute,
@@ -2563,7 +2715,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.sessionShading.isVisible();
 	}
 	setSessionShadingConfig(e) {
-		this.hostSessionHours = _t(this.hostSessionHours, e), this.sessionShading.replaceConfig(this.hostSessionHours), this.engine.requestRender(r.Background);
+		this.hostSessionHours = wt(this.hostSessionHours, e), this.sessionShading.replaceConfig(this.hostSessionHours), this.engine.requestRender(r.Background);
 	}
 	setTooltipVisible(e) {
 		e || this.crosshairTooltip.hide();
@@ -2582,11 +2734,11 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.waitForGpu(null), e === "canvas" ? (this.applyRenderer(null), "canvas") : this.engine.getGpu() ? "webgl" : this.takeGpu(e, t, !0);
 	}
 	async takeGpu(e, t, n) {
-		let { gpu: r, reason: i } = await gt(e);
-		return t !== this.rendererToken || this.disposed ? (r?.destroy(), this.getRenderer()) : i === "limit" ? mt() > 0 ? this.takeGpu(e, t, n) : (this.waitForGpu(() => void this.takeGpu(e, t, !1)), n && this.applyRenderer(null, "limit"), this.getRenderer()) : ((r || n) && this.applyRenderer(r, i), this.getRenderer());
+		let { gpu: r, reason: i } = await Ct(e);
+		return t !== this.rendererToken || this.disposed ? (r?.destroy(), this.getRenderer()) : i === "limit" ? xt() > 0 ? this.takeGpu(e, t, n) : (this.waitForGpu(() => void this.takeGpu(e, t, !1)), n && this.applyRenderer(null, "limit"), this.getRenderer()) : ((r || n) && this.applyRenderer(r, i), this.getRenderer());
 	}
 	waitForGpu(e) {
-		this.stopWaitingForGpu?.(), this.stopWaitingForGpu = e ? Et(e) : null;
+		this.stopWaitingForGpu?.(), this.stopWaitingForGpu = e ? Ft(e) : null;
 	}
 	getRenderer() {
 		return this.engine.getGpu() ? "webgl" : "canvas";
@@ -2604,23 +2756,23 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		this.engine.getGpu() && this.engine.renderNow();
 	}
 	screenshot(e) {
-		this.features.screenshot && (this.freshFrame(), D.download(this.container, e, this.themeManager.getTheme().background));
+		this.features.screenshot && (this.freshFrame(), T.download(this.container, e, this.themeManager.getTheme().background));
 	}
 	async copyScreenshot() {
 		if (!this.features.screenshot) return !1;
 		try {
 			this.freshFrame();
-			let e = await D.toBlob(this.container, this.themeManager.getTheme().background), t = globalThis.ClipboardItem;
+			let e = await T.toBlob(this.container, this.themeManager.getTheme().background), t = globalThis.ClipboardItem;
 			return !e || !navigator.clipboard?.write || !t ? !1 : (await navigator.clipboard.write([new t({ "image/png": e })]), !0);
 		} catch {
 			return !1;
 		}
 	}
 	screenshotDataURL() {
-		return this.features.screenshot ? (this.freshFrame(), D.toDataURL(this.container, this.themeManager.getTheme().background)) : null;
+		return this.features.screenshot ? (this.freshFrame(), T.toDataURL(this.container, this.themeManager.getTheme().background)) : null;
 	}
 	async screenshotBlob() {
-		return this.features.screenshot ? (this.freshFrame(), D.toBlob(this.container, this.themeManager.getTheme().background)) : null;
+		return this.features.screenshot ? (this.freshFrame(), T.toBlob(this.container, this.themeManager.getTheme().background)) : null;
 	}
 	addAlert(e, t = "crossing", n, r = "price", i, a = {}) {
 		if (!this.features.alerts) return null;
@@ -2744,45 +2896,58 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	replayStart(e) {
 		if (!this.features.replay) return;
-		if (this.history.reset(), !this.replaySession) {
+		this.history.reset();
+		let t = this.replaySession ? this.replayOffset : 0;
+		if (!this.replaySession) {
 			if (this.dataManager.getLength() === 0) return;
-			let e = new B();
+			let e = new F();
 			e.setData(this.fullSeries ?? this.dataManager.getData()), this.replaySession = {
 				live: e,
 				price: null,
 				fedTime: null
 			};
 		}
-		let t = this.shownBars(this.replaySession.live.getData()), { steps: n, ...r } = e ?? {}, i = n ? Rn(n, t) : null;
-		this.replayStepsSeries = i, this.replayCoarse = t, this.options.autoScale = !0, this.replayRestarting = !0;
+		let { steps: n, startTime: r, hideHistory: i, revealMarks: a, ...o } = e ?? {}, s = this.shownBars(this.replaySession.live.getData()), c = t > 0 && r === void 0 && i !== !1, l = o.startIndex;
+		r !== void 0 && l === void 0 ? l = Vn(s, r) : c && l !== void 0 && (l += t);
+		let u = c ? t : i && l !== void 0 && l > 0 ? Math.min(Math.floor(l), s.length - 1) : 0, d = u > 0 ? s.slice(u) : s;
+		l !== void 0 && (o.startIndex = l - u), this.replayOffset = u, this.replayRevealMarks = a !== !1;
+		let f = n ? Gn(n, d) : null;
+		this.replayStepsSeries = f, this.replayCoarse = d, this.options.autoScale = !0, this.replayRestarting = !0;
 		try {
-			this.replayManager.load(i ?? t);
+			this.replayManager.load(f ?? d);
 		} finally {
 			this.replayRestarting = !1;
 		}
-		i && r.startIndex !== void 0 && (r.startIndex = Vn(i, t, r.startIndex)), this.replayBarUnsub?.();
-		let a = -1, o = -1, s = null, c = i ?? t;
+		f && o.startIndex !== void 0 && (o.startIndex = Jn(f, d, o.startIndex)), this.replayBarUnsub?.();
+		let p = -1, m = -1, h = null, g = f ?? d;
 		this.replayBarUnsub = this.replayManager.on("bar", ({ index: e }) => {
-			let n = e, r = t[e];
-			if (i) {
-				let c = i[e];
-				n = Bn(t, c.time), s = s !== null && o === e - 1 && n === a - 1 && s ? Un(s, c) : Hn(t[n], i, e), r = s;
+			let t = e, n = d[e];
+			if (f) {
+				let r = f[e];
+				t = qn(d, r.time), h = h !== null && m === e - 1 && t === p - 1 && h ? Xn(h, r) : Yn(d[t], f, e), n = h;
 			}
-			o = e;
-			let l = n + 1, u = a > 0 && l >= a && this.dataManager.getLength() === a, d = !(u && !this.replaySeeking) || this.autoScrollOnNewBar && this.viewport.isAtEnd();
-			if (u) {
-				i && l > a && this.dataManager.updateLastBar(t[a - 1]);
-				for (let e = a; e < l - 1; e++) this.dataManager.appendBar(t[e]);
-				l > a ? this.dataManager.appendBar(r) : this.dataManager.updateLastBar(r), this.recalcIndicatorsFrom(this.dataManager.getData(), Math.max(0, a - 1));
-			} else this.dataManager.setData([...t.slice(0, n), r]), this.recalcIndicators(this.dataManager.getData());
-			a = l, this.currentPriceLine.setPrice(r.close, n > 0 ? t[n - 1].close : void 0), this.crosshairHandler.setData(this.dataManager.getData()), this.displayDataCache = null, this.updateViewportAndRender(d), this.feedReplaySteps(c, e);
-			let f = c[e + 1]?.time ?? c[e].time + (e > 0 ? c[e].time - c[e - 1].time : 0);
-			this.eventBus.emit("replayStep", {
-				barIndex: n,
-				time: t[n].time,
-				until: f
+			m = e;
+			let r = t + 1, i = p > 0 && r >= p && this.dataManager.getLength() === p, a = !(i && !this.replaySeeking) || this.autoScrollOnNewBar && this.viewport.isAtEnd();
+			if (i) {
+				f && r > p && this.dataManager.updateLastBar(d[p - 1]);
+				for (let e = p; e < r - 1; e++) this.dataManager.appendBar(d[e]);
+				r > p ? this.dataManager.appendBar(n) : this.dataManager.updateLastBar(n), this.recalcIndicatorsFrom(this.dataManager.getData(), Math.max(0, p - 1));
+			} else this.dataManager.setData([...d.slice(0, t), n]), this.recalcIndicators(this.dataManager.getData());
+			p = r, this.currentPriceLine.setPrice(n.close, t > 0 ? d[t - 1].close : void 0), this.crosshairHandler.setData(this.dataManager.getData());
+			let o = g[e + 1]?.time ?? g[e].time + (e > 0 ? g[e].time - g[e - 1].time : 1);
+			this.replayRevealMarks && this.revealReplayMarks(o), this.displayDataCache = null, this.updateViewportAndRender(a), this.feedReplaySteps(g, e), this.eventBus.emit("replayStep", {
+				barIndex: t,
+				time: d[t].time,
+				until: o,
+				total: d.length
 			});
-		}), this.replayManager.play(r);
+		});
+		let _ = g[Math.max(0, Math.min(Math.floor(Number(o.startIndex ?? 0)) || 0, g.length - 1))];
+		this.revealReplayMarks(this.replayRevealMarks ? _?.time ?? null : null), !o.paused && o.startIndex !== void 0 && o.startIndex >= 1 && this.replaySeek(o.startIndex - 1), this.replayManager.play(o);
+	}
+	revealReplayMarks(e) {
+		let t = e !== null && this.replayOffset > 0 ? this.replayCoarse?.[0]?.time ?? -Infinity : -Infinity;
+		this.signalMarkerManager.setRevealUntil(e, t), this.tradeZoneManager.setRevealUntil(e, t);
 	}
 	replaySeekToTime(e) {
 		if (!this.replaySession || !this.replayCoarse) return;
@@ -2811,20 +2976,20 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			return;
 		}
 		if (i.time <= n.fedTime) return;
-		let a = e.slice(Fn(e, n.fedTime), t + 1);
+		let a = e.slice(Hn(e, n.fedTime), t + 1);
 		n.fedTime = i.time;
-		let o = Math.ceil(a.length / Pn);
-		for (let e = 0; e < a.length; e += o) for (let [t, n] of In(a.slice(e, e + o))) r.setMarkPrice(t, n);
+		let o = Math.ceil(a.length / Bn);
+		for (let e = 0; e < a.length; e += o) for (let [t, n] of Un(a.slice(e, e + o))) r.setMarkPrice(t, n);
 		this.tradingManager.setCurrentPrice(i.close);
 	}
 	getReplayBarIndex() {
 		if (!this.replaySession) return -1;
 		let { current: e } = this.replayManager.getProgress(), t = this.replayStepsSeries;
-		return t && this.replayCoarse ? Bn(this.replayCoarse, t[e]?.time ?? -Infinity) : e;
+		return t && this.replayCoarse ? qn(this.replayCoarse, t[e]?.time ?? -Infinity) : e;
 	}
 	replaySeekToBar(e) {
 		let t = this.replayStepsSeries;
-		this.replaySeek(t && this.replayCoarse ? Vn(t, this.replayCoarse, e) : e);
+		this.replaySeek(t && this.replayCoarse ? Jn(t, this.replayCoarse, e) : e);
 	}
 	replayPause() {
 		this.replayManager.pause();
@@ -2849,7 +3014,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		};
 	}
 	endReplaySession() {
-		this.replaySession && (this.returnMarkToLive(), this.replaySession = null, this.replayStepsSeries = null, this.replayCoarse = null, this.replayBarUnsub?.(), this.replayBarUnsub = null, this.replayManager.stop());
+		this.replaySession && (this.returnMarkToLive(), this.replaySession = null, this.replayStepsSeries = null, this.replayCoarse = null, this.replayBarUnsub?.(), this.replayBarUnsub = null, this.replayManager.stop(), this.replayOffset = 0, this.revealReplayMarks(null));
 	}
 	replaySeek(e) {
 		this.replaySeeking = !0;
@@ -2869,11 +3034,12 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.replayManager.getProgress();
 	}
 	captureSnapshot() {
-		return x.capture({
+		return S.capture({
 			getDrawings: () => this.getDrawings(),
-			getTheme: () => this.getTheme(),
+			getTheme: () => this.themeManager.getBaseTheme(),
 			getAlerts: () => this.getAlerts(),
-			getIndicators: () => this.getIndicatorSetup()
+			getIndicators: () => this.getIndicatorSetup(),
+			getOverrides: () => this.themeManager.getUserOverrides()
 		}, {
 			chartType: this.options.chartType,
 			chartTypeOptions: this.getChartTypeOptions(),
@@ -2881,14 +3047,14 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		});
 	}
 	restoreIndicators(e, t) {
-		let n = An(e), r = /* @__PURE__ */ new Map();
+		let n = In(e), r = /* @__PURE__ */ new Map();
 		this.unrestoredIndicators = [];
 		let i = new Set(this.indicatorEngine.getAvailableIndicators().map((e) => e.id)), a = [], o = /* @__PURE__ */ new Set();
 		if (t) {
 			let e = new Map(n.map((e) => [e.instanceId, e])), t = this.getIndicatorSetup();
 			for (let n of t) {
 				let t = e.get(n.instanceId);
-				t && jn(n, t) && o.add(n.instanceId);
+				t && Ln(n, t) && o.add(n.instanceId);
 			}
 			for (let e of t) o.has(e.instanceId) || this.removeIndicator(e.instanceId);
 			for (let e of [...o]) this.indicatorEngine.getIndicatorConfig(e) || o.delete(e);
@@ -2896,8 +3062,8 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		let s = (e) => {
 			let t = { ...e };
 			for (let [e, n] of Object.entries(t)) {
-				let i = h(n), a = i && r.get(i.instanceId);
-				a && (t[e] = d(a, i.key));
+				let i = g(n), a = i && r.get(i.instanceId);
+				a && (t[e] = f(a, i.key));
 			}
 			return t;
 		};
@@ -2936,15 +3102,19 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		return this.restorePanes(a), this.updateViewportAndRender(), r;
 	}
 	restoreLooks(e, t) {
-		let n = this.indicatorEngine.getIndicatorStyle(e);
+		let { plots: n, ...r } = this.indicatorEngine.getIndicatorStyle(e) ?? {
+			colors: [],
+			lineWidths: [],
+			opacity: 1
+		}, { plots: i, ...a } = t.style ?? {};
 		t.style && JSON.stringify({
-			...n,
-			...t.style
-		}) !== JSON.stringify(n) && this.updateIndicatorStyle(e, t.style);
-		let r = this.indicatorEngine.getIndicatorConfig(e);
-		(t.visible ?? !0) !== (r?.visible ?? !0) && this.setIndicatorVisible(e, t.visible ?? !0);
-		let i = t.levels ?? null;
-		JSON.stringify(i) !== JSON.stringify(r?.levels ?? null) && this.setIndicatorLevels(e, i);
+			...r,
+			...a
+		}) !== JSON.stringify(r) && this.updateIndicatorStyle(e, a), JSON.stringify(i ?? {}) !== JSON.stringify(n ?? {}) && (this.indicatorEngine.setPlotStyles(e, i ?? null), this.engine.requestRender());
+		let o = this.indicatorEngine.getIndicatorConfig(e);
+		(t.visible ?? !0) !== (o?.visible ?? !0) && this.setIndicatorVisible(e, t.visible ?? !0);
+		let s = t.levels ?? null;
+		JSON.stringify(s) !== JSON.stringify(o?.levels ?? null) && this.setIndicatorLevels(e, s), this.setPaneStyleNow(e, t.paneStyle ? b(t.paneStyle) : null);
 	}
 	restorePanes(e) {
 		for (let [t, n] of e) t.paneSize !== void 0 && this.layoutManager.setPanelSize(n, t.paneSize), (t.paneSize !== void 0 || t.paneCollapsed) && this.layoutManager.setPanelCollapsed(n, !!t.paneCollapsed), t.paneSize !== void 0 && this.layoutManager.setPanelScale(n, {
@@ -2971,6 +3141,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 				levels: i?.levels?.slice(),
 				pane: n.pane,
 				scale: i?.scale,
+				...r && this.paneStyles.has(n.instanceId) ? { paneStyle: { ...this.paneStyles.get(n.instanceId) } } : {},
 				...r ? {
 					paneSize: r.size,
 					paneOrder: e.indexOf(r),
@@ -3024,7 +3195,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		if (this.indicatorHistoryDepth > 0 || !this.features.drawingUndoRedo) return t();
 		let n = this.getIndicatorSetup(), r = this.withoutIndicatorHistory(t), i = this.getIndicatorSetup();
 		if (JSON.stringify(n) === JSON.stringify(i)) return r;
-		let a = performance.now(), o = this.undoRedoManager.last(), s = e !== void 0 && o?.type === "indicators" && o.indicators?.subject === e && a - (o.indicators.at ?? 0) < En && JSON.stringify(o.indicators.after) === JSON.stringify(n), c = {
+		let a = performance.now(), o = this.undoRedoManager.last(), s = e !== void 0 && o?.type === "indicators" && o.indicators?.subject === e && a - (o.indicators.at ?? 0) < Mn && JSON.stringify(o.indicators.after) === JSON.stringify(n), c = {
 			type: "indicators",
 			before: null,
 			after: null
@@ -3052,13 +3223,13 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	saveState(e) {
 		if (!this.features.saveLoad) return null;
-		let t = this.captureSnapshot(), n = x.serialize(t);
-		return e && x.saveToStorage(e, t), n;
+		let t = this.captureSnapshot(), n = S.serialize(t);
+		return e && S.saveToStorage(e, t), n;
 	}
 	loadState(e) {
 		if (!this.features.saveLoad) return;
-		let t = x.deserialize(e);
-		this.chartTypeOptions = t.chartTypeOptions ?? {}, this.displayDataCache = null, t.chartType && this.setChartType(t.chartType), t.drawings && this.setDrawings(t.drawings), t.theme && this.setTheme(t.theme);
+		let t = S.deserialize(e);
+		this.chartTypeOptions = t.chartTypeOptions ?? {}, this.displayDataCache = null, t.chartType && this.setChartType(t.chartType), t.drawings && this.setDrawings(t.drawings), (t.theme === "dark" || t.theme === "light") && this.setTheme(t.theme), t.version >= 3 && this.themeManager.setUserOverrides(t.overrides ?? {}) && this.styleChanged("user");
 		let n = t.version >= 2 && this.features.indicators ? this.withoutIndicatorHistory(() => this.restoreIndicators(t.indicators, !1)) : /* @__PURE__ */ new Map();
 		if (this.undoRedoManager.clear(), t.alerts && this.features.alerts) {
 			this.alertManager.clearAlerts();
@@ -3068,7 +3239,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 					let t = e.indexOf(":"), r = t > 0 ? n.get(e.slice(0, t)) : void 0;
 					return r ? r + e.slice(t) : e;
 				}, r = t(e.channel), i = {
-					...yt(e),
+					...Et(e),
 					...e.target ? { target: t(e.target) } : {}
 				};
 				if (!e.expired) {
@@ -3088,19 +3259,19 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	loadStateFromStorage(e) {
 		if (!this.features.saveLoad) return !1;
-		let t = x.loadFromStorage(e);
-		return t ? (this.loadState(x.serialize(t)), !0) : !1;
+		let t = S.loadFromStorage(e);
+		return t ? (this.loadState(S.serialize(t)), !0) : !1;
 	}
 	downloadState(e) {
-		this.features.saveLoad && x.downloadFile(this.captureSnapshot(), e);
+		this.features.saveLoad && S.downloadFile(this.captureSnapshot(), e);
 	}
 	async loadStateFromFile() {
 		if (!this.features.saveLoad) return;
-		let e = await x.loadFromFile();
-		this.loadState(x.serialize(e));
+		let e = await S.loadFromFile();
+		this.loadState(S.serialize(e));
 	}
 	setLocale(e) {
-		ee(e), this.engine.requestRender();
+		ne(e), this.engine.requestRender();
 	}
 	setNumberLocale(e) {
 		this.numberLocale = e, this.priceAxis.setLocale(e), this.leftPriceAxis.setLocale(e), this.crosshairHandler.setLocale(e), this.chartLegend.setLocale(e), this.crosshairTooltip.setLocale(e), this.sessionBreaks.setLocale(e), this.currentPriceLine.setLocale(e), this.updateViewportAndRender();
@@ -3111,26 +3282,26 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	setMarket(e) {
 		if (this.marketConfig = e, e.colorScheme) {
 			let t = {
-				...this.themeManager.getTheme(),
+				...this.themeManager.getBaseTheme(),
 				candleUp: e.colorScheme.up,
 				candleDown: e.colorScheme.down,
 				candleUpWick: e.colorScheme.up,
 				candleDownWick: e.colorScheme.down,
-				volumeUp: b(e.colorScheme.up),
-				volumeDown: b(e.colorScheme.down)
+				volumeUp: oe(e.colorScheme.up),
+				volumeDown: oe(e.colorScheme.down)
 			};
 			this.themeManager.setTheme(t);
 		}
 		e.pricePrecision !== void 0 && this.applyPricePrecision(e.pricePrecision), this.updateViewportAndRender();
 	}
 	applyPricePrecision(e) {
-		this.marketPricePrecision = e, this.tradingManager.setConfig({ pricePrecision: e ?? void 0 }), this.alertManager.setPricePrecision(e ?? wn), this.streamManager?.priceLine.setPricePrecision(e), this.currentPriceLine.setPricePrecision(e), this.crosshairHandler.setPricePrecision(e), this.chartLegend.setPricePrecision(e), this.crosshairTooltip.setPricePrecision(e);
+		this.marketPricePrecision = e, this.tradingManager.setConfig({ pricePrecision: e ?? void 0 }), this.alertManager.setPricePrecision(e ?? An), this.streamManager?.priceLine.setPricePrecision(e), this.currentPriceLine.setPricePrecision(e), this.crosshairHandler.setPricePrecision(e), this.chartLegend.setPricePrecision(e), this.crosshairTooltip.setPricePrecision(e);
 	}
 	getMarket() {
 		return this.marketConfig;
 	}
 	setPriceLimits(e) {
-		this.marketConfig && (c(e, this.marketConfig) && (this.marketConfig.priceLimits = {
+		this.marketConfig && (l(e, this.marketConfig) && (this.marketConfig.priceLimits = {
 			...this.marketConfig.priceLimits,
 			referencePrice: e
 		}), this.engine.requestRender());
@@ -3154,15 +3325,15 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		this.disposed = !0, this.waitForGpu(null), this.countdownInterval && clearInterval(this.countdownInterval), this.history.setLoader(null), this.disableAutoSave(), this.disconnectStream(), this.disconnectExecution(), this.onWindowKeyDown &&= (window.removeEventListener("keydown", this.onWindowKeyDown), null), this.keyboardHandler = null, this.a11y?.destroy(), this.a11y = null, this.interactionManager.detach(), this.tradingManager.destroy(), this.animator.dispose(), this.crosshairTooltip.destroy(), this.pinnedTooltip.destroy(), this.replayRestarting = !0, this.replayManager.dispose(), this.alertManager.dispose(), this.undoRedoManager.clear(), this.engine.destroy(), this.eventBus.destroy(), this.container.innerHTML = "";
 	}
 	createChartRenderer(e) {
-		let t = Wt(e, (e) => this.pluginManager.getChartType(e));
-		return t instanceof C && t.setPriceText((e) => this.formatPrice(e)), t;
+		let t = tn(e, (e) => this.pluginManager.getChartType(e));
+		return t instanceof w && t.setPriceText((e) => this.formatPrice(e)), t;
 	}
 	getDisplayData() {
 		if (this.displayDataCache) return this.displayDataCache;
 		let e = this.dataManager.getData();
 		if (e.length === 0) return e;
-		let t = Gt(this.options.chartType, e, (e) => this.pluginManager.getChartType(e), this.chartTypeOptions);
-		return this.chartRenderer instanceof T && !this.pluginManager.getChartType(this.options.chartType) && this.chartRenderer.setBoxSize(Ht(e, this.chartTypeOptions)), this.displayDataCache = t, t;
+		let t = nn(this.options.chartType, e, (e) => this.pluginManager.getChartType(e), this.chartTypeOptions);
+		return this.chartRenderer instanceof qe && !this.pluginManager.getChartType(this.options.chartType) && this.chartRenderer.setBoxSize(en(e, this.chartTypeOptions)), this.displayDataCache = t, t;
 	}
 	recalcIndicatorsFrom(e, t) {
 		this.indicatorEngine.recalculateFrom(e, t), this.announceIndicatorUpdate(t);
@@ -3194,7 +3365,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			this.viewport.setScaleBaseline(t[e]?.close);
 		}
 		if (n) {
-			let e = Nn(this.indicatorEngine.getOverlayPriceRange(r.visibleRange.from, Math.min(r.visibleRange.to, t.length - 1)), this.features.compareSymbols ? this.compareRenderer.getPriceRange(t, r) : null);
+			let e = zn(this.indicatorEngine.getOverlayPriceRange(r.visibleRange.from, Math.min(r.visibleRange.to, t.length - 1)), this.features.compareSymbols ? this.compareRenderer.getPriceRange(t, r) : null);
 			if (e) {
 				let t = r.priceRange, n = Math.min(t.min, e.min), i = Math.max(t.max, e.max);
 				if (n < t.min || i > t.max) {
@@ -3218,7 +3389,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	fitLeftAxisWidth() {
 		let e = this.leftViewport;
 		if (!e) return !1;
-		let t = this.themeManager.getTheme(), n = sn({
+		let t = this.themeManager.getTheme(), n = mn({
 			min: e.priceRange.min,
 			max: e.priceRange.max,
 			lastPrice: null,
@@ -3227,12 +3398,12 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			fontFamily: t.font.family,
 			fontSizeSmall: t.font.sizeSmall,
 			measure: (e, t) => this.measureText(e, t)
-		}), r = cn(this.leftAxisWidth, n);
+		}), r = hn(this.leftAxisWidth, n);
 		return r === this.leftAxisWidth ? !1 : (this.leftAxisWidth = r, this.layoutManager.setLeftAxisWidth(r), this.resolvedLayoutCache = null, this.panelInfoCache = null, this.viewport.setChartRect(this.getResolvedLayout().mainChartRect), !0);
 	}
 	fitPriceAxisWidth() {
 		if (!this.features.priceAxis) return !1;
-		let { priceRange: e } = this.viewport.getState(), t = this.themeManager.getTheme(), n = sn({
+		let { priceRange: e } = this.viewport.getState(), t = this.themeManager.getTheme(), n = mn({
 			min: e.min,
 			max: e.max,
 			lastPrice: this.currentPriceLine.getPrice(),
@@ -3242,7 +3413,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 			fontFamily: t.font.family,
 			fontSizeSmall: t.font.sizeSmall,
 			measure: (e, t) => this.measureText(e, t)
-		}), r = cn(this.priceAxisWidth, n);
+		}), r = hn(this.priceAxisWidth, n);
 		return r === this.priceAxisWidth ? !1 : (this.priceAxisWidth = r, this.layoutManager.setPriceAxisWidth(r), this.viewport.setPriceAxisWidth(r), this.resolvedLayoutCache = null, this.panelInfoCache = null, this.viewport.setChartRect(this.getResolvedLayout().mainChartRect), !0);
 	}
 	measureText(e, t) {
@@ -3286,15 +3457,16 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	buildPanelRenderInfos() {
 		if (this.panelInfoCache) return this.panelInfoCache;
 		let e = this.getResolvedLayout(), t = this.viewport.getState(), { from: n, to: r } = t.visibleRange, i = e.panels.map((e) => {
-			let i = e.config.logScale ? this.indicatorEngine.getPaneValueRange(e.config.id, n, r, !0) : null, a = i ?? this.indicatorEngine.getPaneValueRange(e.config.id, n, r) ?? { ...bn }, o = {
+			let i = e.config.logScale ? this.indicatorEngine.getPaneValueRange(e.config.id, n, r, !0) : null, a = i ?? this.indicatorEngine.getPaneValueRange(e.config.id, n, r) ?? { ...En }, o = {
 				x: e.rect.x,
 				y: e.rect.y + 20,
 				width: e.rect.width,
 				height: Math.max(0, e.rect.height - 20)
-			};
+			}, s = this.paneStyles.get(e.config.id);
 			return {
 				instanceId: e.config.id,
 				members: this.indicatorEngine.getPaneMembers(e.config.id),
+				...s ? { style: s } : {},
 				rect: e.rect,
 				viewport: {
 					...t,
@@ -3367,7 +3539,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		});
 	}
 	drawOverlayPlugins(e, t) {
-		let n = dn(this.pluginManager.getOverlays(), t);
+		let n = vn(this.pluginManager.getOverlays(), t);
 		if (n.length === 0) return;
 		let r = {
 			viewport: this.viewport.getState(),
@@ -3378,7 +3550,7 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 	}
 	buildPriceLimits() {
 		if (!this.marketConfig?.priceLimits?.enabled || !this.marketConfig.priceLimits.referencePrice) return null;
-		let e = c(this.marketConfig.priceLimits.referencePrice, this.marketConfig);
+		let e = l(this.marketConfig.priceLimits.referencePrice, this.marketConfig);
 		return e ? {
 			...e,
 			colors: this.marketConfig.colorScheme ? {
@@ -3389,11 +3561,11 @@ var wn = 2, Tn = .08, En = 800, Dn = 20, On = 8, kn = class {
 		} : null;
 	}
 };
-function An(e) {
+function In(e) {
 	let t = new Map(e.map((e) => [e.instanceId, e])), n = [], r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = (e) => {
 		if (r.has(e.instanceId) || i.has(e.instanceId)) return;
 		i.add(e.instanceId);
-		let o = [e.pane, ...Object.values(e.params).map((e) => h(e)?.instanceId)];
+		let o = [e.pane, ...Object.values(e.params).map((e) => g(e)?.instanceId)];
 		for (let e of o) {
 			let n = e ? t.get(e) : void 0;
 			n && a(n);
@@ -3403,26 +3575,26 @@ function An(e) {
 	for (let t of e) a(t);
 	return n;
 }
-function jn(e, t) {
+function Ln(e, t) {
 	return e.id === t.id && (e.pane ?? null) === (t.pane ?? null) && (e.scale ?? null) === (t.scale ?? null) && e.position === void 0 == (t.position === void 0);
 }
-function Mn(e) {
+function Rn(e) {
 	let t = e.tagRadius;
 	return typeof t == "number" && Number.isFinite(t) && t >= 0 ? { tagRadius: Math.min(t, 999) } : {};
 }
-var W = new Set([
+var G = new Set([
 	"compareSymbol",
 	"spread",
 	"correlation",
 	"correlationlog"
 ]);
-function Nn(e, t) {
+function zn(e, t) {
 	return e ? t ? {
 		min: Math.min(e.min, t.min),
 		max: Math.max(e.max, t.max)
 	} : e : t;
 }
-function G(e) {
+function K(e) {
 	return {
 		id: e.id,
 		price: e.price,
@@ -3437,8 +3609,16 @@ function G(e) {
 		bars: e.bars
 	};
 }
-var Pn = 500;
-function Fn(e, t) {
+var Bn = 500;
+function Vn(e, t) {
+	let n = 0, r = e.length;
+	for (; n < r;) {
+		let i = n + r >> 1;
+		e[i].time < t ? n = i + 1 : r = i;
+	}
+	return n;
+}
+function Hn(e, t) {
 	let n = 0, r = e.length;
 	for (; n < r;) {
 		let i = n + r >> 1;
@@ -3446,20 +3626,20 @@ function Fn(e, t) {
 	}
 	return n;
 }
-function In(e) {
+function Un(e) {
 	let t = 0, n = 0;
 	for (let r = 1; r < e.length; r++) e[r].low < e[t].low && (t = r), e[r].high > e[n].high && (n = r);
 	let r = [e[t].low, e[t].time], i = [e[n].high, e[n].time], a = t === n ? e[t].close >= e[t].open : t < n, o = e[e.length - 1];
 	return [...a ? [r, i] : [i, r], [o.close, o.time]];
 }
-function Ln(e) {
+function Wn(e) {
 	let t = 0;
 	for (let n = Math.max(1, e.length - 10); n < e.length; n++) t = Math.max(t, e[n].time - e[n - 1].time);
 	return t > 0 ? t : Infinity;
 }
-function Rn(e, t) {
+function Gn(e, t) {
 	if (t.length === 0) return null;
-	let n = t[t.length - 1].time + Ln(t), r = e.filter((e) => zn(e) && e.time >= t[0].time && e.time < n).sort((e, t) => e.time - t.time), i = [];
+	let n = t[t.length - 1].time + Wn(t), r = e.filter((e) => Kn(e) && e.time >= t[0].time && e.time < n).sort((e, t) => e.time - t.time), i = [];
 	for (let e of r) (i.length === 0 || i[i.length - 1].time !== e.time) && i.push(e);
 	if (i.length === 0) return null;
 	let a = t.findIndex((e) => e.time >= i[0].time);
@@ -3467,7 +3647,7 @@ function Rn(e, t) {
 	let o = t.slice(0, a), s = i.filter((e) => e.time >= t[a].time);
 	return [...o, ...s];
 }
-function zn(e) {
+function Kn(e) {
 	return [
 		e.time,
 		e.open,
@@ -3476,7 +3656,7 @@ function zn(e) {
 		e.close
 	].every(Number.isFinite);
 }
-function Bn(e, t) {
+function qn(e, t) {
 	let n = 0, r = e.length - 1;
 	for (; n < r;) {
 		let i = n + r + 1 >> 1;
@@ -3484,22 +3664,22 @@ function Bn(e, t) {
 	}
 	return n;
 }
-function Vn(e, t, n) {
+function Jn(e, t, n) {
 	let r = Math.max(0, Math.min(Math.floor(Number.isFinite(n) ? n : 0), t.length - 1)), i = r + 1 < t.length ? t[r + 1].time : Infinity, a = -1;
 	for (let t = 0; t < e.length && e[t].time < i; t++) a = t;
 	return Math.max(0, a);
 }
-function Hn(e, t, n) {
+function Yn(e, t, n) {
 	let r = n;
 	for (; r > 0 && t[r - 1].time >= e.time;) r--;
 	let i = {
 		...t[r],
 		time: e.time
 	};
-	for (let e = r + 1; e <= n; e++) i = Un(i, t[e]);
+	for (let e = r + 1; e <= n; e++) i = Xn(i, t[e]);
 	return i;
 }
-function Un(e, t) {
+function Xn(e, t) {
 	return {
 		time: e.time,
 		open: e.open,
@@ -3509,34 +3689,34 @@ function Un(e, t) {
 		volume: (e.volume ?? 0) + (t.volume ?? 0)
 	};
 }
-function K(e, t) {
+function q(e, t) {
 	let n = e[e.length - 1];
 	if (!n) return "append";
-	let r = m(t.time), i = m(n.time);
+	let r = h(t.time), i = h(n.time);
 	return r > i ? "append" : r === i ? "update" : "stale";
 }
 //#endregion
 //#region src/io/parseOHLCV.ts
-var Wn = [
+var Zn = [
 	"time",
 	"timestamp",
 	"date",
 	"datetime",
 	"t"
-], Gn = ["open", "o"], Kn = ["high", "h"], qn = ["low", "l"], Jn = ["close", "c"], Yn = [
+], Qn = ["open", "o"], $n = ["high", "h"], er = ["low", "l"], tr = ["close", "c"], nr = [
 	"volume",
 	"vol",
 	"v"
 ];
-function Xn(e) {
+function rr(e) {
 	let t = e.trim();
-	return t ? t[0] === "[" || t[0] === "{" ? Zn(t) : Qn(t) : {
+	return t ? t[0] === "[" || t[0] === "{" ? ir(t) : ar(t) : {
 		data: [],
 		rowCount: 0,
 		skipped: 0
 	};
 }
-function Zn(e) {
+function ir(e) {
 	let t;
 	try {
 		t = JSON.parse(e);
@@ -3546,19 +3726,19 @@ function Zn(e) {
 	if (!Array.isArray(t)) throw Error("Expected a JSON array of OHLCV rows");
 	let n = [], r = 0;
 	for (let e of t) {
-		let t = Array.isArray(e) ? nr(e) : tr(e);
+		let t = Array.isArray(e) ? ur(e) : lr(e);
 		t ? n.push(t) : r++;
 	}
-	return rr(n, t.length, r);
+	return dr(n, t.length, r);
 }
-function Qn(e) {
+function ar(e) {
 	let t = e.split(/\r?\n/).filter((e) => e.trim().length > 0);
 	if (t.length === 0) return {
 		data: [],
 		rowCount: 0,
 		skipped: 0
 	};
-	let n = $n(t[0]), r = q(t[0], n).map((e) => e.trim().toLowerCase()), i = r.some((e) => isNaN(Number(e)) && e.length > 0), a = i ? er(r) : {
+	let n = or(t[0]), r = sr(t[0], n).map((e) => e.trim().toLowerCase()), i = r.some((e) => isNaN(Number(e)) && e.length > 0), a = i ? cr(r) : {
 		time: 0,
 		open: 1,
 		high: 2,
@@ -3569,7 +3749,7 @@ function Qn(e) {
 	if (a.time < 0 || a.open < 0 || a.high < 0 || a.low < 0 || a.close < 0) throw Error("CSV is missing required column(s): time, open, high, low, close");
 	let o = [], s = 0;
 	for (let e = +!!i; e < t.length; e++) {
-		let r = q(t[e], n), i = Y(r[a.time]), c = J(r[a.open]), l = J(r[a.high]), u = J(r[a.low]), d = J(r[a.close]), f = a.volume >= 0 ? Number(r[a.volume]) : 0;
+		let r = sr(t[e], n), i = Y(r[a.time]), c = J(r[a.open]), l = J(r[a.high]), u = J(r[a.low]), d = J(r[a.close]), f = a.volume >= 0 ? Number(r[a.volume]) : 0;
 		if (i === null || ![
 			c,
 			l,
@@ -3588,9 +3768,9 @@ function Qn(e) {
 			volume: Number.isFinite(f) ? f : 0
 		});
 	}
-	return rr(o, t.length - +!!i, s);
+	return dr(o, t.length - +!!i, s);
 }
-function $n(e) {
+function or(e) {
 	let t = {
 		",": 0,
 		";": 0,
@@ -3602,7 +3782,7 @@ function $n(e) {
 	for (let [e, i] of Object.entries(t)) i > r && (n = e, r = i);
 	return n;
 }
-function q(e, t) {
+function sr(e, t) {
 	let n = [], r = "", i = !1;
 	for (let a = 0; a < e.length; a++) {
 		let o = e[a];
@@ -3610,25 +3790,25 @@ function q(e, t) {
 	}
 	return n.push(r), n;
 }
-function er(e) {
+function cr(e) {
 	let t = (t) => e.findIndex((e) => t.includes(e));
 	return {
-		time: t(Wn),
-		open: t(Gn),
-		high: t(Kn),
-		low: t(qn),
-		close: t(Jn),
-		volume: t(Yn)
+		time: t(Zn),
+		open: t(Qn),
+		high: t($n),
+		low: t(er),
+		close: t(tr),
+		volume: t(nr)
 	};
 }
-function tr(e) {
+function lr(e) {
 	let t = (t) => {
 		for (let n of t) {
 			if (e[n] !== void 0) return e[n];
 			let t = n.toUpperCase();
 			if (e[t] !== void 0) return e[t];
 		}
-	}, n = Y(String(t(Wn) ?? "")), r = Number(t(Gn)), i = Number(t(Kn)), a = Number(t(qn)), o = Number(t(Jn)), s = Number(t(Yn) ?? 0);
+	}, n = Y(String(t(Zn) ?? "")), r = Number(t(Qn)), i = Number(t($n)), a = Number(t(er)), o = Number(t(tr)), s = Number(t(nr) ?? 0);
 	return n === null || ![
 		r,
 		i,
@@ -3643,7 +3823,7 @@ function tr(e) {
 		volume: Number.isFinite(s) ? s : 0
 	};
 }
-function nr(e) {
+function ur(e) {
 	if (e.length < 5) return null;
 	let t = Y(String(e[0])), n = Number(e[1]), r = Number(e[2]), i = Number(e[3]), a = Number(e[4]), o = e.length >= 6 ? Number(e[5]) : 0;
 	return t === null || ![
@@ -3671,7 +3851,7 @@ function Y(e) {
 	let r = Date.parse(t);
 	return Number.isFinite(r) ? r : null;
 }
-function rr(e, t, n) {
+function dr(e, t, n) {
 	e.sort((e, t) => e.time - t.time);
 	let r = [];
 	for (let t of e) r.length > 0 && r[r.length - 1].time === t.time ? r[r.length - 1] = t : r.push(t);
@@ -3683,7 +3863,7 @@ function rr(e, t, n) {
 }
 //#endregion
 //#region src/io/DragDropImporter.ts
-var ir = class {
+var fr = class {
 	host;
 	overlay = null;
 	callbacks;
@@ -3716,7 +3896,7 @@ var ir = class {
 		e.preventDefault(), this.depth = 0, this.hideOverlay();
 		let t = e.dataTransfer?.files?.[0];
 		if (t) try {
-			let e = Xn(await t.text());
+			let e = rr(await t.text());
 			if (e.data.length === 0) throw Error(`No valid OHLCV rows found in "${t.name}"`);
 			this.callbacks.onData(e.data, e, t);
 		} catch (e) {
@@ -3760,7 +3940,7 @@ function Z(e) {
 	};
 	return e.symbol !== void 0 && (t.symbol = e.symbol), e.timeframe !== void 0 && (t.timeframe = e.timeframe), e.kind !== void 0 && (t.kind = e.kind), t;
 }
-var ar = (e, t) => t.updatedAt - e.updatedAt;
+var pr = (e, t) => t.updatedAt - e.updatedAt;
 function Q(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e;
@@ -3773,17 +3953,17 @@ function Q(e) {
 		kind: typeof t.kind == "string" ? t.kind : void 0
 	});
 }
-function or(e) {
+function mr(e) {
 	let t = Q(e), n = t ? e.content : void 0;
 	return t && typeof n == "string" ? {
 		...t,
 		content: n
 	} : null;
 }
-function sr(e = []) {
+function hr(e = []) {
 	let t = new Map(e.map((e) => [e.id, { ...e }]));
 	return {
-		list: () => [...t.values()].map(Z).sort(ar),
+		list: () => [...t.values()].map(Z).sort(pr),
 		load: (e) => {
 			let n = t.get(e);
 			return n ? { ...n } : null;
@@ -3796,7 +3976,7 @@ function sr(e = []) {
 		}
 	};
 }
-function cr(e = "tcw:layouts:") {
+function gr(e = "tcw:layouts:") {
 	let t = `${e}index`, n = (t) => `${e}item:${t}`, r = () => {
 		let e;
 		try {
@@ -3807,7 +3987,7 @@ function cr(e = "tcw:layouts:") {
 		return Array.isArray(e) ? e.map(Q).filter((e) => e !== null) : [];
 	}, i = (e) => localStorage.setItem(t, JSON.stringify(e));
 	return {
-		list: () => r().sort(ar),
+		list: () => r().sort(pr),
 		load: (e) => {
 			let t = r().find((t) => t.id === e), i = t ? localStorage.getItem(n(e)) : null;
 			return t && i !== null ? {
@@ -3825,14 +4005,14 @@ function cr(e = "tcw:layouts:") {
 }
 //#endregion
 //#region src/state/LayoutSession.ts
-var lr = 80;
+var _r = 80;
 function $(e) {
 	return e.replace(/\s+/g, " ").trim().slice(0, 80).trim() || null;
 }
-function ur() {
+function vr() {
 	return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
-function dr(e) {
+function yr(e) {
 	let { id: t, name: n, symbol: r, timeframe: i, updatedAt: a, kind: o } = e;
 	return {
 		id: t,
@@ -3843,7 +4023,7 @@ function dr(e) {
 		...o === void 0 ? {} : { kind: o }
 	};
 }
-var fr = class {
+var br = class {
 	currentLayout = null;
 	savedContent = null;
 	dirty = !1;
@@ -3859,7 +4039,7 @@ var fr = class {
 	now;
 	newId;
 	constructor(e, t, n = {}) {
-		this.storage = e, this.host = t, this.options = n, this.autoSave = n.autoSave ?? !0, this.debounceMs = n.debounceMs ?? 1500, this.kind = n.kind ?? "chart", this.now = n.now ?? Date.now, this.newId = n.newId ?? ur;
+		this.storage = e, this.host = t, this.options = n, this.autoSave = n.autoSave ?? !0, this.debounceMs = n.debounceMs ?? 1500, this.kind = n.kind ?? "chart", this.now = n.now ?? Date.now, this.newId = n.newId ?? vr;
 	}
 	current() {
 		return this.currentLayout;
@@ -3889,7 +4069,7 @@ var fr = class {
 	}
 	open(e) {
 		return this.queue(async () => {
-			let t = or(await this.storage.load(e));
+			let t = mr(await this.storage.load(e));
 			if (!t || t.id !== e || (t.kind ?? "chart") !== this.kind || this.destroyed) return !1;
 			this.cancelTimer(), this.applying++;
 			try {
@@ -3899,13 +4079,13 @@ var fr = class {
 			} finally {
 				this.applying--;
 			}
-			return this.cancelTimer(), this.currentLayout = dr(t), this.savedContent = this.host.capture().content, this.dirty = !1, this.notify(), !0;
+			return this.cancelTimer(), this.currentLayout = yr(t), this.savedContent = this.host.capture().content, this.dirty = !1, this.notify(), !0;
 		});
 	}
 	rename(e, t) {
 		let n = $(t);
 		return n ? this.queue(async () => {
-			let t = or(await this.storage.load(e));
+			let t = mr(await this.storage.load(e));
 			!t || t.id !== e || (await this.storage.save({
 				...t,
 				name: n
@@ -3983,7 +4163,7 @@ var fr = class {
 			content: n.content
 		};
 		await this.storage.save(r);
-		let i = dr(r);
+		let i = yr(r);
 		return this.currentLayout = i, this.savedContent = n.content, this.dirty = !1, this.notify(), i;
 	}
 	forget() {
@@ -4004,6 +4184,6 @@ var fr = class {
 	}
 };
 //#endregion
-export { Lt as C, B as S, H as _, sr as a, Xt as b, kn as c, hn as d, mn as f, dn as g, un as h, cr as i, Sn as l, pn as m, lr as n, ir as o, fn as p, $ as r, Xn as s, fr as t, gn as u, tn as v, Jt as x, Qt as y };
+export { Yt as C, F as S, H as _, hr as a, on as b, Fn as c, xn as d, W as f, vn as g, _n as h, gr as i, On as l, bn as m, _r as n, fr as o, yn as p, $ as r, rr as s, br as t, Sn as u, ln as v, I as x, L as y };
 
-//# sourceMappingURL=LayoutSession-2yRujs2S.js.map
+//# sourceMappingURL=LayoutSession-BTfv1oBV.js.map