@tradecanvas/chart 0.8.2 → 0.14.0

package/dist/widget/index.js

@@ -1,7 +1,41 @@
-import { t as e } from "../Chart-Cn_TSMO7.js";
-import { DARK_THEME as t, LIGHT_THEME as n } from "@tradecanvas/commons";
+import { r as e, t } from "../DragDropImporter-Br2ez5Gz.js";
+import { DARK_THEME as n, LIGHT_THEME as r, timeframeBucketStart as i, timeframeToMs as a } from "@tradecanvas/commons";
+//#region src/io/resampleOHLCV.ts
+function o(e, t, n = {}) {
+	if (e.length === 0) return [];
+	let r = n.weekStartsOn ?? 1, a = [], o = null, s = NaN;
+	for (let n of e) {
+		let e = i(n.time, t, r);
+		o === null || e !== s ? (o !== null && a.push(o), o = {
+			time: e,
+			open: n.open,
+			high: n.high,
+			low: n.low,
+			close: n.close,
+			volume: n.volume
+		}, s = e) : o = {
+			time: o.time,
+			open: o.open,
+			high: Math.max(o.high, n.high),
+			low: Math.min(o.low, n.low),
+			close: n.close,
+			volume: o.volume + n.volume
+		};
+	}
+	return o !== null && a.push(o), a;
+}
+function s(e) {
+	if (e.length < 2) return 0;
+	let t = [];
+	for (let n = 1; n < e.length; n++) {
+		let r = e[n].time - e[n - 1].time;
+		r > 0 && t.push(r);
+	}
+	return t.length === 0 ? 0 : (t.sort((e, t) => e - t), t[Math.floor(t.length / 2)]);
+}
+//#endregion
 //#region src/widget/widgetConfig.ts
-var r = [
+var c = [
 	{
 		label: "1m",
 		value: "1m"
@@ -26,7 +60,7 @@ var r = [
 		label: "1D",
 		value: "1d"
 	}
-], i = [
+], l = [
 	{
 		label: "Candlestick",
 		value: "candlestick"
@@ -75,7 +109,7 @@ var r = [
 		label: "Line + Markers",
 		value: "lineWithMarkers"
 	}
-], a = [
+], u = [
 	{
 		label: "Lines",
 		tools: [
@@ -188,7 +222,7 @@ var r = [
 			value: "arrow"
 		}]
 	}
-], o = [
+], d = [
 	{
 		id: "sma",
 		name: "SMA",
@@ -204,6 +238,11 @@ var r = [
 		name: "Hull MA",
 		type: "overlay"
 	},
+	{
+		id: "mtfma",
+		name: "MTF Moving Average",
+		type: "overlay"
+	},
 	{
 		id: "bb",
 		name: "Bollinger Bands",
@@ -219,6 +258,11 @@ var r = [
 		name: "Anchored VWAP",
 		type: "overlay"
 	},
+	{
+		id: "svwap",
+		name: "Session VWAP",
+		type: "overlay"
+	},
 	{
 		id: "ichimoku",
 		name: "Ichimoku Cloud",
@@ -259,6 +303,16 @@ var r = [
 		name: "Linear Regression Channel",
 		type: "overlay"
 	},
+	{
+		id: "chandelier",
+		name: "Chandelier Exit",
+		type: "overlay"
+	},
+	{
+		id: "alligator",
+		name: "Alligator",
+		type: "overlay"
+	},
 	{
 		id: "rsi",
 		name: "RSI",
@@ -349,12 +403,157 @@ var r = [
 		name: "Chaikin Oscillator",
 		type: "panel"
 	},
+	{
+		id: "voldelta",
+		name: "Volume Delta",
+		type: "panel"
+	},
+	{
+		id: "vortex",
+		name: "Vortex Indicator",
+		type: "panel"
+	},
+	{
+		id: "chop",
+		name: "Choppiness Index",
+		type: "panel"
+	},
+	{
+		id: "uo",
+		name: "Ultimate Oscillator",
+		type: "panel"
+	},
+	{
+		id: "fi",
+		name: "Force Index",
+		type: "panel"
+	},
+	{
+		id: "crsi",
+		name: "Connors RSI",
+		type: "panel"
+	},
+	{
+		id: "coppock",
+		name: "Coppock Curve",
+		type: "panel"
+	},
+	{
+		id: "kst",
+		name: "Know Sure Thing",
+		type: "panel"
+	},
+	{
+		id: "elderray",
+		name: "Elder Ray",
+		type: "panel"
+	},
+	{
+		id: "stc",
+		name: "Schaff Trend Cycle",
+		type: "panel"
+	},
+	{
+		id: "kvo",
+		name: "Klinger Oscillator",
+		type: "panel"
+	},
+	{
+		id: "fisher",
+		name: "Fisher Transform",
+		type: "panel"
+	},
+	{
+		id: "dpo",
+		name: "Detrended Price Osc",
+		type: "panel"
+	},
+	{
+		id: "bop",
+		name: "Balance of Power",
+		type: "panel"
+	},
+	{
+		id: "massindex",
+		name: "Mass Index",
+		type: "panel"
+	},
+	{
+		id: "cmo",
+		name: "Chande Momentum",
+		type: "panel"
+	},
+	{
+		id: "trix",
+		name: "TRIX",
+		type: "panel"
+	},
+	{
+		id: "emv",
+		name: "Ease of Movement",
+		type: "panel"
+	},
+	{
+		id: "pvt",
+		name: "Price Volume Trend",
+		type: "panel"
+	},
+	{
+		id: "wad",
+		name: "Williams A/D",
+		type: "panel"
+	},
+	{
+		id: "chaikinvol",
+		name: "Chaikin Volatility",
+		type: "panel"
+	},
+	{
+		id: "rvi",
+		name: "Relative Vigor Index",
+		type: "panel"
+	},
+	{
+		id: "stochrsi",
+		name: "Stochastic RSI",
+		type: "panel"
+	},
+	{
+		id: "ppo",
+		name: "Percentage Price Oscillator",
+		type: "panel"
+	},
+	{
+		id: "ac",
+		name: "Accelerator Oscillator",
+		type: "panel"
+	},
+	{
+		id: "rmi",
+		name: "Relative Momentum Index",
+		type: "panel"
+	},
+	{
+		id: "disparity",
+		name: "Disparity Index",
+		type: "panel"
+	},
+	{
+		id: "qstick",
+		name: "Qstick",
+		type: "panel"
+	},
+	{
+		id: "pgo",
+		name: "Pretty Good Oscillator",
+		type: "panel"
+	},
 	{
 		id: "volumeProfile",
 		name: "Volume Profile",
 		type: "panel"
 	}
-], s = [
+], f = [
 	"sma",
 	"ema",
 	"bb",
@@ -365,12 +564,12 @@ var r = [
 	"atr",
 	"obv",
 	"ichimoku"
-], c = [
+], ee = [
 	"BTCUSDT",
 	"ETHUSDT",
 	"SOLUSDT",
 	"BNBUSDT"
-], l = {
+], p = {
 	candleUpColor: "#26A69A",
 	candleDownColor: "#EF5350",
 	candleUpWick: "#26A69A",
@@ -379,26 +578,42 @@ var r = [
 	gridColor: "#1E222D",
 	gridVisible: !0,
 	volumeVisible: !0,
+	volumeProfileVisible: !1,
+	marketProfileVisible: !1,
+	marketProfileSplit: !1,
+	marketProfileLetters: !1,
+	marketProfileBuckets: 48,
+	marketProfileOpacity: .32,
+	depthHeatmapVisible: !1,
+	depthHeatmapOpacity: .7,
+	sessionShadingVisible: !1,
+	pivotMarkersVisible: !1,
+	pivotStrength: 5,
+	pivotStructureLabels: !1,
+	periodLevelsVisible: !1,
+	periodLevelsPeriod: "day",
 	legendVisible: !0,
 	barCountdown: !0,
 	logScale: !1,
+	scaleMode: "regular",
 	autoScale: !0,
 	crosshairMode: "magnet",
-	numberLocale: "en-US"
-}, u = "/* === TradeCanvas Widget Styles === */\r\n\r\n.tcw-root {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  height: 100%;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\r\n  font-size: 13px;\r\n  color: #d1d4dc;\r\n  background: #131722;\r\n  position: relative;\r\n  overflow: hidden;\r\n\r\n  /* Dark theme tokens (default) */\r\n  --tcw-bg: #131722;\r\n  --tcw-bg-elevated: #1E222D;\r\n  --tcw-border: #2A2E39;\r\n  --tcw-text: #d1d4dc;\r\n  --tcw-text-dim: #b2b5be;\r\n  --tcw-text-muted: #787b86;\r\n  --tcw-accent: #2962ff;\r\n  --tcw-accent-dim: rgba(41,98,255,0.15);\r\n  --tcw-accent-glow: rgba(41,98,255,0.12);\r\n  --tcw-red: #ef5350;\r\n  --tcw-green: #26a69a;\r\n  --tcw-transition: 0.15s ease;\r\n  --tcw-radius-lg: 8px;\r\n  --tcw-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;\r\n  --tcw-hover-bg: rgba(255,255,255,0.04);\r\n}\r\n\r\n.tcw-root[data-tcw-theme=\"light\"] {\r\n  color: #131722;\r\n  background: #ffffff;\r\n\r\n  --tcw-bg: #ffffff;\r\n  --tcw-bg-elevated: #f0f3fa;\r\n  --tcw-border: #e0e3eb;\r\n  --tcw-text: #131722;\r\n  --tcw-text-dim: #434651;\r\n  --tcw-text-muted: #787b86;\r\n  --tcw-accent: #2962ff;\r\n  --tcw-accent-dim: rgba(41,98,255,0.1);\r\n  --tcw-accent-glow: rgba(41,98,255,0.08);\r\n  --tcw-red: #ef5350;\r\n  --tcw-green: #26a69a;\r\n  --tcw-hover-bg: rgba(0,0,0,0.04);\r\n}\r\n\r\n/* === Toolbar === */\r\n\r\n.tcw-toolbar {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0;\r\n  padding: 0 12px;\r\n  height: 40px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n  background: var(--tcw-bg-elevated);\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 20;\r\n}\r\n\r\n.tcw-toolbar-symbol {\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: var(--tcw-text);\r\n  padding: 0 10px;\r\n  white-space: nowrap;\r\n  letter-spacing: -0.01em;\r\n  cursor: pointer;\r\n  border: none;\r\n  background: none;\r\n  font-family: inherit;\r\n}\r\n\r\n.tcw-toolbar-sep {\r\n  width: 1px;\r\n  height: 20px;\r\n  background: var(--tcw-border);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-toolbar-group {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2px;\r\n  padding: 0 8px;\r\n}\r\n\r\n.tcw-toolbar-spacer {\r\n  flex: 1;\r\n}\r\n\r\n.tcw-btn {\r\n  padding: 4px 8px;\r\n  font-size: 12px;\r\n  font-family: inherit;\r\n  border: none;\r\n  border-radius: 4px;\r\n  background: transparent;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  transition: all var(--tcw-transition);\r\n  white-space: nowrap;\r\n  line-height: 1;\r\n}\r\n\r\n.tcw-btn:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-btn.tcw-active {\r\n  background: var(--tcw-accent);\r\n  color: white;\r\n}\r\n\r\n.tcw-btn-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-family: inherit;\r\n  border: none;\r\n  border-radius: 4px;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  transition: all var(--tcw-transition);\r\n  line-height: 1;\r\n  position: relative;\r\n}\r\n\r\n.tcw-btn-icon:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-badge-count {\r\n  font-size: 10px;\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-dim);\r\n  padding: 0 4px;\r\n  border-radius: 8px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-indicator-chips {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 0 4px;\r\n  flex-wrap: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.tcw-indicator-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 2px 6px 2px 8px;\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  background: var(--tcw-accent-dim);\r\n  color: var(--tcw-accent);\r\n  border-radius: 4px;\r\n  white-space: nowrap;\r\n  line-height: 1.4;\r\n}\r\n\r\n.tcw-chip-remove {\r\n  cursor: pointer;\r\n  opacity: 0.6;\r\n  padding: 0 2px;\r\n  transition: opacity var(--tcw-transition);\r\n  border: none;\r\n  background: none;\r\n  color: inherit;\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.tcw-chip-remove:hover {\r\n  opacity: 1;\r\n}\r\n\r\n/* === Dropdown === */\r\n\r\n.tcw-dropdown-trigger {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  padding: 4px 8px;\r\n  font-size: 12px;\r\n  font-family: inherit;\r\n  border: none;\r\n  border-radius: 4px;\r\n  background: transparent;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  transition: all var(--tcw-transition);\r\n  white-space: nowrap;\r\n  line-height: 1;\r\n}\r\n\r\n.tcw-dropdown-trigger:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-dropdown {\r\n  position: absolute;\r\n  top: 100%;\r\n  margin-top: 4px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: 0 8px 32px rgba(0,0,0,0.4);\r\n  z-index: 50;\r\n  padding: 4px 0;\r\n  max-height: 400px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.tcw-dropdown-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 6px 12px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  transition: background var(--tcw-transition), color var(--tcw-transition);\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font-family: inherit;\r\n  text-align: left;\r\n}\r\n\r\n.tcw-dropdown-item:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-dropdown-item.tcw-active {\r\n  color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-dropdown-label {\r\n  text-transform: uppercase;\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.05em;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-dropdown-divider {\r\n  border-top: 1px solid var(--tcw-border);\r\n  margin: 4px 0;\r\n}\r\n\r\n.tcw-tag {\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  padding: 1px 5px;\r\n  border-radius: 3px;\r\n  background: var(--tcw-hover-bg);\r\n}\r\n\r\n/* === Body === */\r\n\r\n.tcw-body {\r\n  display: flex;\r\n  flex: 1;\r\n  min-height: 0;\r\n}\r\n\r\n.tcw-chart-container {\r\n  flex: 1;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* === Sidebar === */\r\n\r\n.tcw-sidebar {\r\n  width: 36px;\r\n  flex-shrink: 0;\r\n  background: var(--tcw-bg-elevated);\r\n  border-right: 1px solid var(--tcw-border);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 4px 0;\r\n  overflow: visible;\r\n}\r\n\r\n.tcw-tool-group-wrap {\r\n  position: relative;\r\n}\r\n\r\n.tcw-sidebar-btn {\r\n  width: 36px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  transition: all var(--tcw-transition);\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n.tcw-sidebar-btn:hover {\r\n  color: var(--tcw-text);\r\n  background: var(--tcw-hover-bg);\r\n}\r\n\r\n.tcw-sidebar-btn.tcw-active {\r\n  color: var(--tcw-accent);\r\n  background: var(--tcw-accent-glow);\r\n}\r\n\r\n.tcw-sidebar-btn.tcw-danger:hover {\r\n  color: var(--tcw-red);\r\n  background: rgba(239,68,68,0.1);\r\n}\r\n\r\n.tcw-multi-dot {\r\n  position: absolute;\r\n  bottom: 2px;\r\n  right: 2px;\r\n  width: 4px;\r\n  height: 4px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-text-muted);\r\n}\r\n\r\n.tcw-sidebar-divider {\r\n  width: 20px;\r\n  height: 1px;\r\n  background: var(--tcw-border);\r\n  margin: 4px 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-sidebar-spacer {\r\n  flex: 1;\r\n}\r\n\r\n/* === Flyout === */\r\n\r\n.tcw-flyout {\r\n  position: absolute;\r\n  left: 100%;\r\n  top: 0;\r\n  margin-left: 2px;\r\n  min-width: 160px;\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-lg);\r\n  box-shadow: 0 8px 32px rgba(0,0,0,0.4);\r\n  z-index: 30;\r\n  padding: 4px 0;\r\n}\r\n\r\n.tcw-flyout-header {\r\n  text-transform: uppercase;\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.05em;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-flyout-item {\r\n  padding: 6px 12px;\r\n  font-size: 12px;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  width: 100%;\r\n  display: block;\r\n  border: none;\r\n  background: none;\r\n  text-align: left;\r\n  font-family: inherit;\r\n  transition: background var(--tcw-transition), color var(--tcw-transition);\r\n}\r\n\r\n.tcw-flyout-item:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-flyout-item.tcw-active {\r\n  color: var(--tcw-accent);\r\n}\r\n\r\n/* === Modal === */\r\n\r\n.tcw-modal-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(0,0,0,0.5);\r\n  backdrop-filter: blur(4px);\r\n  -webkit-backdrop-filter: blur(4px);\r\n  z-index: 100;\r\n}\r\n\r\n.tcw-modal {\r\n  position: fixed;\r\n  z-index: 101;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-lg);\r\n  width: 480px;\r\n  max-width: 90vw;\r\n  max-height: 80vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: 0 24px 64px rgba(0,0,0,0.5);\r\n}\r\n\r\n.tcw-modal-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 16px 20px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n\r\n.tcw-modal-header h3 {\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  margin: 0;\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-modal-close {\r\n  width: 28px;\r\n  height: 28px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: transparent;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  border-radius: 4px;\r\n  transition: all var(--tcw-transition);\r\n}\r\n\r\n.tcw-modal-close:hover {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-modal-tabs {\r\n  display: flex;\r\n  gap: 0;\r\n  padding: 0 20px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n}\r\n\r\n.tcw-modal-tab {\r\n  padding: 10px 16px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  color: var(--tcw-text-muted);\r\n  border: none;\r\n  background: none;\r\n  cursor: pointer;\r\n  border-bottom: 2px solid transparent;\r\n  margin-bottom: -1px;\r\n  transition: color var(--tcw-transition);\r\n  font-family: inherit;\r\n  text-transform: capitalize;\r\n}\r\n\r\n.tcw-modal-tab:hover {\r\n  color: var(--tcw-text-dim);\r\n}\r\n\r\n.tcw-modal-tab.tcw-active {\r\n  color: var(--tcw-accent);\r\n  border-bottom-color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-modal-body {\r\n  padding: 20px;\r\n  overflow-y: auto;\r\n  flex: 1;\r\n}\r\n\r\n.tcw-settings-section {\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.tcw-settings-section:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.tcw-settings-section-title {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.05em;\r\n  color: var(--tcw-text-muted);\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.tcw-settings-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 8px 0;\r\n}\r\n\r\n.tcw-settings-row + .tcw-settings-row {\r\n  border-top: 1px solid rgba(255,255,255,0.03);\r\n}\r\n\r\n.tcw-root[data-tcw-theme=\"light\"] .tcw-settings-row + .tcw-settings-row {\r\n  border-top: 1px solid rgba(0,0,0,0.04);\r\n}\r\n\r\n.tcw-settings-label {\r\n  font-size: 13px;\r\n  color: var(--tcw-text-dim);\r\n}\r\n\r\n.tcw-color-picker-wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.tcw-color-picker-wrap input[type='color'] {\r\n  width: 28px;\r\n  height: 28px;\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: 4px;\r\n  background: none;\r\n  cursor: pointer;\r\n  padding: 2px;\r\n}\r\n\r\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\r\n  padding: 0;\r\n}\r\n\r\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\r\n  border: none;\r\n  border-radius: 2px;\r\n}\r\n\r\n.tcw-color-hex {\r\n  font-size: 11px;\r\n  font-family: var(--tcw-font-mono);\r\n  color: var(--tcw-text-muted);\r\n  min-width: 60px;\r\n}\r\n\r\n.tcw-toggle {\r\n  width: 36px;\r\n  height: 20px;\r\n  background: rgba(255,255,255,0.1);\r\n  border-radius: 10px;\r\n  position: relative;\r\n  cursor: pointer;\r\n  transition: background var(--tcw-transition);\r\n  border: none;\r\n  padding: 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-toggle::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 2px;\r\n  left: 2px;\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-text-muted);\r\n  transition: all var(--tcw-transition);\r\n}\r\n\r\n.tcw-toggle.tcw-on {\r\n  background: var(--tcw-accent);\r\n}\r\n\r\n.tcw-toggle.tcw-on::after {\r\n  left: 18px;\r\n  background: white;\r\n}\r\n\r\n.tcw-root[data-tcw-theme=\"light\"] .tcw-toggle {\r\n  background: rgba(0,0,0,0.1);\r\n}\r\n\r\n.tcw-root[data-tcw-theme=\"light\"] .tcw-toggle::after {\r\n  background: #888;\r\n}\r\n\r\n.tcw-root[data-tcw-theme=\"light\"] .tcw-toggle.tcw-on {\r\n  background: var(--tcw-accent);\r\n}\r\n\r\n.tcw-root[data-tcw-theme=\"light\"] .tcw-toggle.tcw-on::after {\r\n  background: white;\r\n}\r\n\r\n.tcw-settings-select {\r\n  padding: 4px 8px;\r\n  font-size: 12px;\r\n  font-family: inherit;\r\n  background: var(--tcw-bg);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: 4px;\r\n  color: var(--tcw-text);\r\n  cursor: pointer;\r\n}\r\n\r\n.tcw-modal-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 12px 20px;\r\n  border-top: 1px solid var(--tcw-border);\r\n}\r\n\r\n.tcw-reset-link {\r\n  font-size: 12px;\r\n  color: var(--tcw-text-muted);\r\n  cursor: pointer;\r\n  border: none;\r\n  background: none;\r\n  font-family: inherit;\r\n  text-decoration: underline;\r\n  text-underline-offset: 2px;\r\n  transition: color var(--tcw-transition);\r\n}\r\n\r\n.tcw-reset-link:hover {\r\n  color: var(--tcw-text-dim);\r\n}\r\n\r\n.tcw-done-btn {\r\n  padding: 6px 16px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  background: var(--tcw-accent);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n  transition: background var(--tcw-transition);\r\n}\r\n\r\n.tcw-done-btn:hover {\r\n  background: #2563eb;\r\n}\r\n\r\n/* === Status Bar === */\r\n\r\n.tcw-statusbar {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 6px 16px;\r\n  border-top: 1px solid var(--tcw-border);\r\n  background: var(--tcw-bg-elevated);\r\n  font-size: 11px;\r\n  color: var(--tcw-text-muted);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-status-indicator {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.tcw-status-dot {\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 50%;\r\n  background: var(--tcw-text-muted);\r\n  transition: background 0.3s;\r\n}\r\n\r\n.tcw-status-dot.tcw-connected {\r\n  background: var(--tcw-green);\r\n}\r\n\r\n.tcw-status-dot.tcw-error {\r\n  background: var(--tcw-red);\r\n}\r\n\r\n/* === Command Palette === */\r\n\r\n.tcw-cmd-palette {\r\n  position: fixed;\r\n  z-index: 102;\r\n  top: 20%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background: var(--tcw-bg-elevated);\r\n  border: 1px solid var(--tcw-border);\r\n  border-radius: var(--tcw-radius-lg);\r\n  width: 520px;\r\n  max-width: 90vw;\r\n  max-height: 60vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: 0 24px 64px rgba(0,0,0,0.5);\r\n  overflow: hidden;\r\n}\r\n\r\n.tcw-cmd-header {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 12px 16px;\r\n  border-bottom: 1px solid var(--tcw-border);\r\n  gap: 10px;\r\n}\r\n\r\n.tcw-cmd-icon {\r\n  font-size: 18px;\r\n  color: var(--tcw-text-muted);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-cmd-input {\r\n  flex: 1;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  font-size: 14px;\r\n  font-family: inherit;\r\n  color: var(--tcw-text);\r\n  caret-color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-cmd-input::placeholder {\r\n  color: var(--tcw-text-muted);\r\n}\r\n\r\n.tcw-cmd-hint {\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  border: 1px solid var(--tcw-border);\r\n  padding: 2px 6px;\r\n  border-radius: 3px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.tcw-cmd-list {\r\n  overflow-y: auto;\r\n  flex: 1;\r\n  padding: 4px 0;\r\n  max-height: 360px;\r\n}\r\n\r\n.tcw-cmd-category {\r\n  text-transform: uppercase;\r\n  font-size: 10px;\r\n  color: var(--tcw-text-muted);\r\n  letter-spacing: 0.05em;\r\n  padding: 8px 16px 4px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-cmd-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 8px 16px;\r\n  font-size: 13px;\r\n  color: var(--tcw-text-dim);\r\n  cursor: pointer;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font-family: inherit;\r\n  text-align: left;\r\n  transition: background 80ms ease;\r\n  gap: 8px;\r\n}\r\n\r\n.tcw-cmd-item:hover,\r\n.tcw-cmd-item.tcw-selected {\r\n  background: var(--tcw-hover-bg);\r\n  color: var(--tcw-text);\r\n}\r\n\r\n.tcw-cmd-item.tcw-active .tcw-cmd-item-label {\r\n  color: var(--tcw-accent);\r\n}\r\n\r\n.tcw-cmd-item-label {\r\n  flex: 1;\r\n}\r\n\r\n.tcw-cmd-check {\r\n  color: var(--tcw-accent);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n}\r\n\r\n.tcw-cmd-kbd {\r\n  font-size: 10px;\r\n  font-family: var(--tcw-font-mono);\r\n  color: var(--tcw-text-muted);\r\n  background: var(--tcw-bg);\r\n  border: 1px solid var(--tcw-border);\r\n  padding: 1px 5px;\r\n  border-radius: 3px;\r\n}\r\n\r\n.tcw-cmd-empty {\r\n  padding: 24px 16px;\r\n  text-align: center;\r\n  color: var(--tcw-text-muted);\r\n  font-size: 13px;\r\n}\r\n\r\n.tcw-cmd-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  padding: 8px 16px;\r\n  border-top: 1px solid var(--tcw-border);\r\n  font-size: 11px;\r\n  color: var(--tcw-text-muted);\r\n}\r\n\r\n/* === Responsive === */\r\n\r\n@media (max-width: 768px) {\r\n  .tcw-toolbar {\r\n    padding: 0 8px;\r\n    height: 36px;\r\n  }\r\n  .tcw-toolbar-sep {\r\n    display: none;\r\n  }\r\n  .tcw-indicator-chips {\r\n    display: none;\r\n  }\r\n  .tcw-sidebar {\r\n    width: 32px;\r\n  }\r\n  .tcw-sidebar-btn {\r\n    width: 32px;\r\n    height: 28px;\r\n  }\r\n}\r\n", d = 0, f = "tcw-styles";
-function p() {
-	if (d++, d > 1 || document.getElementById(f)) return;
+	numberLocale: "en-US",
+	timezone: "local"
+}, te = "/* === TradeCanvas Widget — Premium Styles === */\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\n  font-size: 13px;\n  line-height: 1.4;\n  color: #d1d4dc;\n  background: #0d0f17;\n  position: relative;\n  overflow: hidden;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* --- Dark theme tokens (default) --- */\n  --tcw-bg: #0d0f17;\n  --tcw-bg-surface: #131722;\n  --tcw-bg-elevated: #1a1e2d;\n  --tcw-bg-overlay: #20253480;\n  --tcw-border: #2a2e39;\n  --tcw-border-strong: #363a45;\n  --tcw-text: #e9ebf0;\n  --tcw-text-dim: #b2b5be;\n  --tcw-text-muted: #6b6f7a;\n\n  --tcw-accent: #4f88ff;\n  --tcw-accent-hover: #6b9aff;\n  --tcw-accent-soft: rgba(79, 136, 255, 0.14);\n  --tcw-accent-glow: rgba(79, 136, 255, 0.22);\n  --tcw-accent-line: rgba(79, 136, 255, 0.55);\n\n  --tcw-red: #f23645;\n  --tcw-red-soft: rgba(242, 54, 69, 0.12);\n  --tcw-green: #26a17b;\n  --tcw-green-soft: rgba(38, 161, 123, 0.12);\n  --tcw-amber: #ff9f43;\n\n  --tcw-hover-bg: rgba(255, 255, 255, 0.05);\n  --tcw-active-bg: rgba(255, 255, 255, 0.08);\n  --tcw-divider: rgba(255, 255, 255, 0.06);\n\n  /* Motion */\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --tcw-dur-fast: 120ms;\n  --tcw-dur-normal: 180ms;\n  --tcw-dur-slow: 260ms;\n\n  /* Shape */\n  --tcw-radius-sm: 4px;\n  --tcw-radius: 6px;\n  --tcw-radius-lg: 10px;\n  --tcw-radius-xl: 14px;\n\n  /* Elevation */\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\n  --tcw-ring: 0 0 0 2px rgba(79, 136, 255, 0.45);\n\n  /* Type */\n  --tcw-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', ui-monospace, monospace;\n}\n\n.tcw-root[data-tcw-theme='light'] {\n  color: #131722;\n  background: #fcfcfd;\n\n  --tcw-bg: #fcfcfd;\n  --tcw-bg-surface: #ffffff;\n  --tcw-bg-elevated: #ffffff;\n  --tcw-bg-overlay: rgba(255, 255, 255, 0.75);\n  --tcw-border: #e7e9ef;\n  --tcw-border-strong: #d4d7e0;\n  --tcw-text: #131722;\n  --tcw-text-dim: #50545e;\n  --tcw-text-muted: #8b8f99;\n\n  --tcw-accent: #2962ff;\n  --tcw-accent-hover: #1e4fd6;\n  --tcw-accent-soft: rgba(41, 98, 255, 0.10);\n  --tcw-accent-glow: rgba(41, 98, 255, 0.16);\n  --tcw-accent-line: rgba(41, 98, 255, 0.45);\n\n  --tcw-hover-bg: rgba(0, 0, 0, 0.04);\n  --tcw-active-bg: rgba(41, 98, 255, 0.08);\n  --tcw-divider: rgba(0, 0, 0, 0.06);\n\n  --tcw-shadow-sm: 0 1px 2px rgba(20, 28, 56, 0.05);\n  --tcw-shadow-md: 0 4px 12px rgba(20, 28, 56, 0.08), 0 1px 3px rgba(20, 28, 56, 0.04);\n  --tcw-shadow-lg: 0 12px 36px rgba(20, 28, 56, 0.14), 0 4px 12px rgba(20, 28, 56, 0.08);\n  --tcw-shadow-xl: 0 24px 64px rgba(20, 28, 56, 0.18), 0 12px 24px rgba(20, 28, 56, 0.1);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 10px;\n  height: 44px;\n  border-bottom: 1px solid var(--tcw-border);\n  background:\n    linear-gradient(180deg, var(--tcw-bg-elevated) 0%, var(--tcw-bg-surface) 100%);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-toolbar-symbol {\n  font-size: 14px;\n  font-weight: 650;\n  color: var(--tcw-text);\n  padding: 6px 12px;\n  white-space: nowrap;\n  letter-spacing: -0.015em;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  border-radius: var(--tcw-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-toolbar-symbol:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-toolbar-sep {\n  width: 1px;\n  height: 22px;\n  background: var(--tcw-border);\n  flex-shrink: 0;\n  margin: 0 4px;\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 4px;\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  padding: 6px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n  letter-spacing: -0.005em;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn:active {\n  transform: translateY(0.5px);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font-weight: 600;\n  box-shadow: inset 0 0 0 1px var(--tcw-accent-line);\n}\n\n.tcw-btn:focus-visible,\n.tcw-btn-icon:focus-visible,\n.tcw-sidebar-btn:focus-visible,\n.tcw-dropdown-trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-btn-icon {\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  line-height: 1;\n  position: relative;\n}\n\n.tcw-btn-icon:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn-icon svg {\n  display: block;\n}\n\n.tcw-badge-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  padding: 1px 5px;\n  border-radius: 9px;\n  font-family: var(--tcw-font-mono);\n}\n\n.tcw-indicator-chips {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 4px;\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.tcw-indicator-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 6px 3px 9px;\n  font-size: 11px;\n  font-weight: 500;\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  border-radius: 9999px;\n  white-space: nowrap;\n  line-height: 1.4;\n  letter-spacing: -0.005em;\n  border: 1px solid transparent;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-indicator-chip:hover {\n  border-color: var(--tcw-accent-line);\n}\n\n.tcw-chip-remove {\n  cursor: pointer;\n  opacity: 0.55;\n  padding: 0 2px;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n}\n\n.tcw-chip-remove:hover {\n  opacity: 1;\n}\n\n/* === Dropdown === */\n\n.tcw-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-dropdown-trigger:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: 6px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  z-index: 50;\n  padding: 6px;\n  max-height: 420px;\n  overflow-y: auto;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-pop-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 7px 10px;\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: left;\n  border-radius: var(--tcw-radius-sm);\n  gap: 12px;\n}\n\n.tcw-dropdown-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: 600;\n}\n\n.tcw-dropdown-label {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.08em;\n  padding: 8px 10px 4px;\n  font-weight: 600;\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-divider);\n  margin: 6px 4px;\n}\n\n.tcw-tag {\n  font-size: 10px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--tcw-hover-bg);\n  letter-spacing: 0.02em;\n}\n\n/* === Body === */\n\n.tcw-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n/* === Sidebar === */\n\n.tcw-sidebar {\n  width: 40px;\n  flex-shrink: 0;\n  background: linear-gradient(180deg, var(--tcw-bg-elevated) 0%, var(--tcw-bg-surface) 100%);\n  border-right: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 6px 0;\n  overflow: visible;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n}\n\n.tcw-sidebar-btn {\n  width: 32px;\n  height: 32px;\n  margin: 1px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\n  border-radius: var(--tcw-radius);\n}\n\n.tcw-sidebar-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-sidebar-btn.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  box-shadow: inset 2px 0 0 var(--tcw-accent);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-red-soft);\n}\n\n.tcw-multi-dot {\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  opacity: 0.7;\n}\n\n.tcw-sidebar-divider {\n  width: 22px;\n  height: 1px;\n  background: var(--tcw-divider);\n  margin: 6px 0;\n  flex-shrink: 0;\n}\n\n.tcw-sidebar-spacer {\n  flex: 1;\n}\n\n/* === Flyout === */\n\n.tcw-flyout {\n  position: absolute;\n  left: 100%;\n  top: 0;\n  margin-left: 6px;\n  min-width: 180px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  z-index: 30;\n  padding: 6px;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-slide-right {\n  from { opacity: 0; transform: translateX(-4px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.tcw-flyout-header {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.08em;\n  padding: 6px 10px 4px;\n  font-weight: 600;\n}\n\n.tcw-flyout-item {\n  padding: 7px 10px;\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: block;\n  border: none;\n  background: transparent;\n  text-align: left;\n  font-family: inherit;\n  border-radius: var(--tcw-radius-sm);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-flyout-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-flyout-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: 600;\n}\n\n/* Pinned (favorited) flyout item — a star marker on the right. */\n.tcw-flyout-item.tcw-flyout-faved::after {\n  content: '★';\n  float: right;\n  color: var(--tcw-accent);\n  font-size: 11px;\n  line-height: 1.4;\n}\n\n/* Favorites strip — pinned drawing tools above the tool groups. */\n.tcw-sidebar-favorites {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn {\n  position: relative;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  opacity: 0.7;\n}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(8, 10, 18, 0.55);\n  backdrop-filter: blur(6px) saturate(140%);\n  -webkit-backdrop-filter: blur(6px) saturate(140%);\n  z-index: 100;\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.tcw-modal {\n  position: fixed;\n  z-index: 101;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-xl);\n  width: 520px;\n  max-width: 92vw;\n  max-height: 82vh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-shadow-xl);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n@keyframes tcw-modal-in {\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 22px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-header h3 {\n  font-size: 15px;\n  font-weight: 650;\n  margin: 0;\n  color: var(--tcw-text);\n  letter-spacing: -0.015em;\n}\n\n.tcw-modal-close {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border-radius: var(--tcw-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-modal-close:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-modal-tabs {\n  display: flex;\n  gap: 4px;\n  padding: 0 18px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-tab {\n  padding: 11px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--tcw-text-muted);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n  font-family: inherit;\n  text-transform: capitalize;\n  letter-spacing: -0.005em;\n}\n\n.tcw-modal-tab:hover {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-modal-tab.tcw-active {\n  color: var(--tcw-accent);\n  border-bottom-color: var(--tcw-accent);\n  font-weight: 600;\n}\n\n.tcw-modal-body {\n  padding: 20px 22px;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: 22px;\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: 10.5px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.09em;\n  color: var(--tcw-text-muted);\n  margin-bottom: 12px;\n}\n\n.tcw-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-settings-label {\n  font-size: 13px;\n  color: var(--tcw-text-dim);\n  letter-spacing: -0.005em;\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  padding: 2px;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: 2px;\n}\n\n.tcw-color-hex {\n  font-size: 11px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  letter-spacing: 0.01em;\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.tcw-toggle::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition:\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\n    background var(--tcw-dur-fast) var(--tcw-ease);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: #fff;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\n  background: #999;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\n  background: #fff;\n}\n\n.tcw-settings-select {\n  padding: 6px 10px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  color: var(--tcw-text);\n  cursor: pointer;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-settings-select:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n.tcw-settings-select:focus-visible {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 22px;\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  border-radius: 0 0 var(--tcw-radius-xl) var(--tcw-radius-xl);\n}\n\n.tcw-reset-link {\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-color: var(--tcw-border-strong);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n  text-decoration-color: currentColor;\n}\n\n.tcw-done-btn {\n  padding: 8px 18px;\n  font-size: 12.5px;\n  font-weight: 600;\n  background: var(--tcw-accent);\n  color: #fff;\n  border: none;\n  border-radius: var(--tcw-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n  letter-spacing: -0.005em;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);\n}\n\n.tcw-done-btn:hover {\n  background: var(--tcw-accent-hover);\n  box-shadow: var(--tcw-shadow-md), 0 0 0 3px var(--tcw-accent-glow);\n}\n\n.tcw-done-btn:active {\n  transform: translateY(0.5px);\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 7px 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-weight: 500;\n}\n\n.tcw-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\n  position: relative;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n  box-shadow: 0 0 0 3px rgba(38, 161, 123, 0.18);\n}\n\n.tcw-status-dot.tcw-connected::after {\n  content: '';\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--tcw-green);\n  opacity: 0;\n  animation: tcw-pulse 2.2s ease-out infinite;\n}\n\n@keyframes tcw-pulse {\n  0% { opacity: 0.6; transform: scale(0.6); }\n  100% { opacity: 0; transform: scale(2.2); }\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n  box-shadow: 0 0 0 3px rgba(242, 54, 69, 0.2);\n}\n\n/* === Command Palette === */\n\n.tcw-cmd-palette {\n  position: fixed;\n  z-index: 102;\n  top: 18%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-xl);\n  width: 560px;\n  max-width: 92vw;\n  max-height: 62vh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-shadow-xl);\n  overflow: hidden;\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n.tcw-cmd-header {\n  display: flex;\n  align-items: center;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--tcw-divider);\n  gap: 12px;\n}\n\n.tcw-cmd-icon {\n  font-size: 18px;\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n}\n\n.tcw-cmd-input {\n  flex: 1;\n  background: transparent;\n  border: none;\n  outline: none;\n  font-size: 14.5px;\n  font-family: inherit;\n  color: var(--tcw-text);\n  caret-color: var(--tcw-accent);\n  letter-spacing: -0.005em;\n}\n\n.tcw-cmd-input::placeholder {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-cmd-hint {\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  border: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  padding: 3px 7px;\n  border-radius: 4px;\n  flex-shrink: 0;\n  box-shadow: inset 0 -1px 0 var(--tcw-border);\n}\n\n.tcw-cmd-list {\n  overflow-y: auto;\n  flex: 1;\n  padding: 6px;\n  max-height: 380px;\n}\n\n.tcw-cmd-category {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.09em;\n  padding: 10px 10px 4px;\n  font-weight: 600;\n}\n\n.tcw-cmd-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: 13px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: left;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  gap: 10px;\n  border-radius: var(--tcw-radius);\n  letter-spacing: -0.005em;\n}\n\n.tcw-cmd-item:hover,\n.tcw-cmd-item.tcw-selected {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-cmd-item.tcw-selected {\n  box-shadow: inset 2px 0 0 var(--tcw-accent);\n}\n\n.tcw-cmd-item.tcw-active .tcw-cmd-item-label {\n  color: var(--tcw-accent);\n  font-weight: 600;\n}\n\n.tcw-cmd-item-label {\n  flex: 1;\n}\n\n.tcw-cmd-check {\n  color: var(--tcw-accent);\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.tcw-cmd-kbd {\n  font-size: 10px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  padding: 2px 6px;\n  border-radius: 4px;\n  box-shadow: inset 0 -1px 0 var(--tcw-border);\n}\n\n.tcw-cmd-empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--tcw-text-muted);\n  font-size: 13px;\n}\n\n.tcw-cmd-footer {\n  display: flex;\n  align-items: center;\n  gap: 18px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--tcw-divider);\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  background: var(--tcw-bg-surface);\n}\n\n/* === Watchlist === */\n\n.tcw-watchlist {\n  width: 220px;\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-left: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-watchlist-header {\n  padding: 10px 14px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--tcw-text-muted);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-watchlist-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.tcw-watchlist-row {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border-left: 2px solid transparent;\n  outline: none;\n}\n\n.tcw-watchlist-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row:focus-visible {\n  background: var(--tcw-hover-bg);\n  border-left-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n  background: var(--tcw-accent-soft);\n  border-left-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\n  font-size: 12.5px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n}\n\n.tcw-watchlist-spark {\n  width: 56px;\n  height: 22px;\n  align-self: center;\n}\n\n.tcw-watchlist-stats {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  font-variant-numeric: tabular-nums;\n  font-family: var(--tcw-font-mono);\n}\n\n.tcw-watchlist-price {\n  font-size: 12px;\n  color: var(--tcw-text);\n  font-weight: 500;\n}\n\n.tcw-watchlist-change {\n  font-size: 10.5px;\n  color: var(--tcw-text-muted);\n  font-weight: 500;\n}\n\n.tcw-watchlist-change.tcw-up {\n  color: var(--tcw-green);\n}\n\n.tcw-watchlist-change.tcw-down {\n  color: var(--tcw-red);\n}\n\n@media (max-width: 768px) {\n  .tcw-watchlist {\n    display: none;\n  }\n}\n\n/* === Toast === */\n\n.tcw-toast {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translate(-50%, 12px);\n  z-index: 40;\n  padding: 9px 14px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: 9999px;\n  box-shadow: var(--tcw-shadow-lg);\n  font-size: 12.5px;\n  font-weight: 500;\n  color: var(--tcw-text);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n  max-width: calc(100% - 32px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  letter-spacing: -0.005em;\n}\n\n.tcw-toast.tcw-toast-in {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tcw-toast-error {\n  border-color: var(--tcw-red);\n  color: var(--tcw-red);\n}\n\n/* === Replay scrubber === */\n\n.tcw-replay-bar {\n  position: absolute;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: 9999px;\n  box-shadow: var(--tcw-shadow-lg);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  font-size: 12px;\n  color: var(--tcw-text);\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-replay-btn {\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  border-radius: 9999px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-replay-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-replay-btn.tcw-replay-play {\n  background: var(--tcw-accent);\n  color: #fff;\n  width: 32px;\n  height: 32px;\n  box-shadow: 0 0 0 3px var(--tcw-accent-glow);\n}\n\n.tcw-replay-btn.tcw-replay-play:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-replay-scrubber {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 220px;\n  height: 4px;\n  background: var(--tcw-border-strong);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-progress {\n  font-size: 11px;\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  text-align: center;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-replay-speed {\n  padding: 4px 8px;\n  font-size: 11px;\n  font-family: var(--tcw-font-mono);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n\n.tcw-replay-speed:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n@media (max-width: 640px) {\n  .tcw-replay-scrubber {\n    width: 140px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Hotkey sheet === */\n\n.tcw-hotkey-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px 32px;\n}\n\n.tcw-hotkey-section .tcw-settings-section-title {\n  margin-bottom: 8px;\n}\n\n.tcw-hotkey-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 6px 0;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-hotkey-row:last-child {\n  border-bottom: none;\n}\n\n.tcw-hotkey-keys {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.tcw-hotkey-sep {\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-hotkey-label {\n  font-size: 12.5px;\n  color: var(--tcw-text-dim);\n  text-align: right;\n  letter-spacing: -0.005em;\n}\n\n@media (max-width: 640px) {\n  .tcw-hotkey-grid {\n    grid-template-columns: 1fr;\n    gap: 18px;\n  }\n}\n\n/* === Scrollbar (subtle, premium feel) === */\n\n.tcw-dropdown::-webkit-scrollbar,\n.tcw-modal-body::-webkit-scrollbar,\n.tcw-cmd-list::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.tcw-dropdown::-webkit-scrollbar-track,\n.tcw-modal-body::-webkit-scrollbar-track,\n.tcw-cmd-list::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.tcw-dropdown::-webkit-scrollbar-thumb,\n.tcw-modal-body::-webkit-scrollbar-thumb,\n.tcw-cmd-list::-webkit-scrollbar-thumb {\n  background: var(--tcw-border-strong);\n  border-radius: 4px;\n  border: 2px solid transparent;\n  background-clip: padding-box;\n}\n\n.tcw-dropdown::-webkit-scrollbar-thumb:hover,\n.tcw-modal-body::-webkit-scrollbar-thumb:hover,\n.tcw-cmd-list::-webkit-scrollbar-thumb:hover {\n  background: var(--tcw-text-muted);\n  background-clip: padding-box;\n  border: 2px solid transparent;\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 4px;\n    height: 44px;            /* Apple HIG minimum touch target */\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-indicator-chips {\n    display: none;\n  }\n  .tcw-btn,\n  .tcw-dropdown-trigger {\n    padding: 10px 12px;      /* fatter tap target */\n    font-size: 13px;\n  }\n  .tcw-btn-icon {\n    width: 40px;\n    height: 40px;\n  }\n  .tcw-sidebar {\n    width: 44px;\n  }\n  .tcw-sidebar-btn {\n    width: 40px;\n    height: 40px;\n  }\n  .tcw-modal,\n  .tcw-cmd-palette {\n    width: 94vw;\n    border-radius: var(--tcw-radius-lg);\n  }\n\n  /* Hide the right-side watchlist on tablets too — already declared but\n   * grouped here for clarity. */\n  .tcw-watchlist {\n    display: none;\n  }\n\n  /* Replay scrubber compact mode */\n  .tcw-replay-scrubber {\n    width: 120px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Mobile bottom-sheet pattern ===\n * On phones, swap floating-centered modals for full-width sheets that slide\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\n * matches how every modern iOS/Android app handles overflow UI.\n */\n@media (max-width: 640px) {\n  .tcw-modal,\n  .tcw-cmd-palette {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    transform: none;\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 92vh;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n    border-bottom: none;\n    /* Grab handle */\n    padding-top: 8px;\n  }\n\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\n  .tcw-modal::before,\n  .tcw-cmd-palette::before {\n    content: '';\n    display: block;\n    width: 36px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--tcw-border-strong);\n    margin: 0 auto 8px;\n    opacity: 0.7;\n  }\n\n  /* Reuse the existing modal-in animation but slide from below instead of\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\n  @keyframes tcw-modal-in {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .tcw-modal,\n  .tcw-cmd-palette {\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\n  .tcw-modal-footer,\n  .tcw-cmd-footer {\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\n  }\n\n  /* Larger tap targets inside sheets */\n  .tcw-modal-tab {\n    padding: 14px 16px;\n  }\n  .tcw-cmd-item {\n    padding: 12px 14px;\n    font-size: 14px;\n  }\n  .tcw-dropdown-item {\n    padding: 12px 12px;\n    font-size: 14px;\n  }\n\n  /* Hotkey sheet — single column on phones */\n  .tcw-hotkey-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* === Price alerts panel === */\n\n.tcw-alerts-panel {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 40;\n  width: 300px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n@keyframes tcw-alerts-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.tcw-alerts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-alerts-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-alerts-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-form input,\n.tcw-alerts-form select {\n  height: 32px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-alerts-form input:focus,\n.tcw-alerts-form select:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-alerts-message,\n.tcw-alerts-source {\n  grid-column: 1 / -1;\n}\n\n.tcw-alerts-add {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 34px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #fff;\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-alerts-add:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-alerts-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n}\n\n.tcw-alerts-empty {\n  padding: 18px 12px;\n  text-align: center;\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n  line-height: 1.5;\n}\n\n.tcw-alerts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-alerts-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-alerts-triggered {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-info {\n  min-width: 0;\n}\n.tcw-alerts-row-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-alerts-row-note {\n  margin-top: 2px;\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-alerts-badge {\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px 5px;\n  border-radius: 999px;\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-del {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-alerts-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n\n@media (max-width: 640px) {\n  .tcw-alerts-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-alerts-list {\n    max-height: 40vh;\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Data Window === */\n\n.tcw-datawin {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 38;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-datawin-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-datawin-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--tcw-text-muted); }\n.tcw-datawin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 3px 8px;\n  font-size: 12px;\n}\n.tcw-datawin-label { color: var(--tcw-text-muted); }\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: 600; }\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\n.tcw-datawin-sub {\n  margin: 6px 8px 2px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--tcw-text-muted);\n  border-top: 1px solid var(--tcw-border);\n  padding-top: 6px;\n}\n\n@media (max-width: 640px) {\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n}\n\n/* === Depth-of-market ladder === */\n\n.tcw-ladder {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 41;\n  width: 240px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-ladder-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-ladder-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-ladder-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-ladder-cols {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  padding: 4px 0;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--tcw-text-muted);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-ladder-cols span { text-align: center; }\n.tcw-ladder-body { max-height: 360px; overflow-y: auto; }\n.tcw-ladder-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--tcw-text-muted); }\n\n.tcw-ladder-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  height: 22px;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ladder-cell {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: transparent;\n  font-size: 11px;\n  cursor: pointer;\n  font-variant-numeric: tabular-nums;\n  overflow: hidden;\n}\n.tcw-ladder-cell:disabled { cursor: default; }\n/* Depth bar grows from the centre column outward. */\n.tcw-ladder-cell::before {\n  content: '';\n  position: absolute;\n  top: 1px; bottom: 1px;\n  width: var(--w, 0%);\n}\n.tcw-ladder-bid { justify-content: flex-end; padding-right: 8px; color: var(--tcw-green); }\n.tcw-ladder-bid::before { right: 0; background: var(--tcw-green-soft); }\n.tcw-ladder-bid span, .tcw-ladder-bid { position: relative; }\n.tcw-ladder-ask { justify-content: flex-start; padding-left: 8px; color: var(--tcw-red); }\n.tcw-ladder-ask::before { left: 0; background: var(--tcw-red-soft); }\n.tcw-ladder-cell:not(:disabled):hover::before { opacity: 0.7; filter: brightness(1.4); }\n.tcw-ladder-cell > * { position: relative; }\n.tcw-ladder-price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--tcw-text-dim);\n  border-left: 1px solid var(--tcw-border);\n  border-right: 1px solid var(--tcw-border);\n}\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\n\n@media (max-width: 640px) {\n  .tcw-ladder { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n  .tcw-ladder-body { max-height: 45vh; padding-bottom: max(0px, env(safe-area-inset-bottom)); }\n}\n\n/* === Bracket order placement === */\n\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\n\n.tcw-bracket-bar {\n  position: absolute;\n  top: 52px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 8px 7px 14px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: 999px;\n  box-shadow: var(--tcw-shadow-lg);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-bracket-label {\n  font-size: 12px;\n  font-weight: 700;\n}\n.tcw-bracket-label[data-side='buy'] { color: var(--tcw-green); }\n.tcw-bracket-label[data-side='sell'] { color: var(--tcw-red); }\n.tcw-bracket-hint {\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n}\n.tcw-bracket-cancel, .tcw-bracket-confirm {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  height: 30px;\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 600;\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n}\n.tcw-bracket-cancel {\n  color: var(--tcw-text-dim);\n  background: var(--tcw-bg-surface);\n}\n.tcw-bracket-cancel:hover { color: var(--tcw-text); }\n.tcw-bracket-confirm {\n  color: #fff;\n  background: var(--tcw-accent);\n}\n.tcw-bracket-confirm:hover { background: var(--tcw-accent-hover); }\n\n@media (max-width: 640px) {\n  .tcw-bracket-bar { width: calc(100vw - 24px); justify-content: space-between; }\n  .tcw-bracket-hint { display: none; }\n}\n\n/* === Drawing style + templates popover === */\n\n.tcw-style-panel {\n  position: absolute;\n  bottom: 12px;\n  left: 52px;\n  z-index: 40;\n  width: 220px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-style-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--tcw-text);\n}\n.tcw-style-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.tcw-style-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid var(--tcw-border-strong);\n  cursor: pointer;\n  padding: 0;\n}\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-style-picker {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n}\n.tcw-style-width, .tcw-style-dash {\n  flex: 1;\n  min-width: 0;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  font-size: 11px;\n}\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: 2px; }\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-style-subhead {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--tcw-text-muted);\n  margin-top: 2px;\n}\n.tcw-style-save { display: flex; gap: 6px; }\n.tcw-style-name {\n  flex: 1;\n  min-width: 0;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\n.tcw-style-savebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n  height: 28px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #fff;\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\n\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\n.tcw-style-empty { font-size: 11px; color: var(--tcw-text-muted); padding: 4px 0; }\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\n.tcw-style-apply {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 7px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  text-align: left;\n}\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\n.tcw-style-tdel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\n\n/* === Settings range slider === */\n\n.tcw-settings-range {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.tcw-settings-range input[type='range'] {\n  width: 110px;\n  accent-color: var(--tcw-accent);\n  cursor: pointer;\n}\n.tcw-settings-range-val {\n  min-width: 38px;\n  text-align: right;\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-dim);\n}\n\n/* === Indicator settings dialog === */\n\n.tcw-modal-narrow {\n  max-width: 360px;\n}\n.tcw-indi-input {\n  width: 110px;\n  height: 30px;\n  padding: 0 8px;\n  font-size: 12px;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-indi-input:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-indi-color {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n\n/* === Object tree panel === */\n\n.tcw-tree-panel {\n  position: absolute;\n  top: 50px;\n  right: 12px;\n  z-index: 39;\n  width: 280px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: var(--tcw-shadow-lg);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n.tcw-tree-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-tree-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-tree-section {\n  padding: 6px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-section:last-child {\n  border-bottom: none;\n}\n.tcw-tree-section-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px 4px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-tree-add:hover {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n.tcw-tree-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.tcw-tree-list {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.tcw-tree-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-tree-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-tree-hidden .tcw-tree-name {\n  opacity: 0.5;\n}\n.tcw-tree-name {\n  min-width: 0;\n  font-size: 12px;\n  color: var(--tcw-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-tree-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tcw-tree-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n.tcw-tree-btn:hover {\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n}\n.tcw-tree-btn.tcw-tree-on {\n  color: var(--tcw-accent);\n}\n.tcw-tree-btn.tcw-tree-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n.tcw-tree-empty {\n  padding: 8px;\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-tree-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-tree-list {\n    max-height: 30vh;\n  }\n  .tcw-tree-section:last-child {\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Reduced motion === */\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root *,\n  .tcw-root *::before,\n  .tcw-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n", m = 0, h = "tcw-styles";
+function g() {
+	if (m++, m > 1 || document.getElementById(h)) return;
 	let e = document.createElement("style");
-	e.id = f, e.textContent = u, document.head.appendChild(e);
+	e.id = h, e.textContent = te, document.head.appendChild(e);
 }
-function m() {
-	if (d--, d > 0) return;
-	let e = document.getElementById(f);
+function _() {
+	if (m--, m > 0) return;
+	let e = document.getElementById(h);
 	e && e.remove();
 }
 //#endregion
 //#region src/widget/icons.ts
-var h = {
+var v = {
 	cursor: "<path d=\"M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z\"/><path d=\"M13 13l6 6\"/>",
 	trendingUp: "<polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"/><polyline points=\"16 7 22 7 22 13\"/>",
 	minus: "<path d=\"M5 12h14\"/>",
@@ -423,15 +638,26 @@ var h = {
 	play: "<polygon points=\"6 3 20 12 6 21 6 3\"/>",
 	pause: "<rect width=\"4\" height=\"16\" x=\"6\" y=\"4\"/><rect width=\"4\" height=\"16\" x=\"14\" y=\"4\"/>",
 	stop: "<rect width=\"14\" height=\"14\" x=\"5\" y=\"5\" rx=\"1\"/>",
-	receipt: "<path d=\"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z\"/><path d=\"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8\"/><path d=\"M12 17.5v-11\"/>"
+	receipt: "<path d=\"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z\"/><path d=\"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8\"/><path d=\"M12 17.5v-11\"/>",
+	bell: "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>",
+	plus: "<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>",
+	layers: "<path d=\"m12 2 9 5-9 5-9-5 9-5Z\"/><path d=\"m3 12 9 5 9-5\"/><path d=\"m3 17 9 5 9-5\"/>",
+	eye: "<path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+	eyeOff: "<path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.68\"/><path d=\"M6.6 6.6A13.06 13.06 0 0 0 2 11s3.5 7 10 7a9.1 9.1 0 0 0 5.4-1.6\"/><path d=\"m2 2 20 20\"/>",
+	lock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
+	unlock: "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 9.9-1\"/>",
+	palette: "<circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z\"/>",
+	trendingDown: "<polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\"/><polyline points=\"16 17 22 17 22 11\"/>",
+	check: "<polyline points=\"20 6 9 17 4 12\"/>",
+	ladder: "<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"21\"/><line x1=\"3\" y1=\"8\" x2=\"21\" y2=\"8\"/><line x1=\"3\" y1=\"13\" x2=\"21\" y2=\"13\"/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/>"
 };
-function g(e, t = 14) {
-	let n = h[e];
+function y(e, t = 14) {
+	let n = v[e];
 	return n ? `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${n}</svg>` : "";
 }
 //#endregion
 //#region src/widget/WidgetDropdown.ts
-var _ = class {
+var b = class {
 	trigger;
 	panel;
 	_isOpen = !1;
@@ -462,7 +688,7 @@ var _ = class {
 	destroy() {
 		this.trigger.removeEventListener("click", this.onTriggerClick), document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscapeKey), this.panel.remove();
 	}
-}, v = class {
+}, ne = class {
 	config;
 	callbacks;
 	el;
@@ -487,11 +713,32 @@ var _ = class {
 		let a = document.createElement("div");
 		a.style.position = "relative", a.style.display = "inline-flex";
 		let o = document.createElement("button");
-		o.className = "tcw-dropdown-trigger", o.dataset.role = "charttype", a.appendChild(o), n.appendChild(a), this.chartTypeDropdown = new _(a, { width: "160px" }), this.buildChartTypeMenu(), n.appendChild(this.sep());
+		o.className = "tcw-dropdown-trigger", o.dataset.role = "charttype", a.appendChild(o), n.appendChild(a), this.chartTypeDropdown = new b(a, { width: "160px" }), this.buildChartTypeMenu(), n.appendChild(this.sep());
 		let s = document.createElement("div");
 		s.style.position = "relative", s.style.display = "inline-flex";
 		let c = document.createElement("button");
-		c.className = "tcw-dropdown-trigger", c.dataset.role = "indicators", s.appendChild(c), n.appendChild(s), this.indicatorDropdown = new _(s, { width: "280px" }), this.buildIndicatorMenu(), this.chipsContainer = document.createElement("div"), this.chipsContainer.className = "tcw-indicator-chips", n.appendChild(this.chipsContainer), n.appendChild(this.spacer());
+		if (c.className = "tcw-dropdown-trigger", c.dataset.role = "indicators", s.appendChild(c), n.appendChild(s), this.indicatorDropdown = new b(s, { width: "280px" }), this.buildIndicatorMenu(), this.chipsContainer = document.createElement("div"), this.chipsContainer.className = "tcw-indicator-chips", n.appendChild(this.chipsContainer), n.appendChild(this.spacer()), t.onToggleReplay) {
+			let e = this.iconBtn("play", "Bar replay", t.onToggleReplay);
+			e.dataset.role = "replay", n.appendChild(e);
+		}
+		if (t.onBracket) {
+			let e = t.onBracket, r = this.iconBtn("trendingUp", "Long bracket", () => e("buy"));
+			r.dataset.role = "long", r.classList.add("tcw-btn-long"), n.appendChild(r);
+			let i = this.iconBtn("trendingDown", "Short bracket", () => e("sell"));
+			i.dataset.role = "short", i.classList.add("tcw-btn-short"), n.appendChild(i);
+		}
+		if (t.onToggleLadder) {
+			let e = this.iconBtn("ladder", "Depth ladder", t.onToggleLadder);
+			e.dataset.role = "ladder", n.appendChild(e);
+		}
+		if (t.onToggleObjects) {
+			let e = this.iconBtn("layers", "Objects", t.onToggleObjects);
+			e.dataset.role = "objects", n.appendChild(e);
+		}
+		if (t.onToggleAlerts) {
+			let e = this.iconBtn("bell", "Price alerts", t.onToggleAlerts);
+			e.dataset.role = "alerts", n.appendChild(e);
+		}
 		let l = this.iconBtn("camera", "Screenshot", t.onScreenshot);
 		n.appendChild(l);
 		let u = this.iconBtn("settings", "Chart Settings", t.onSettings);
@@ -527,11 +774,11 @@ var _ = class {
 		let n = this.el.querySelector("[data-role=\"charttype\"]");
 		if (n) {
 			let t = this.config.chartTypes.find((t) => t.value === e.chartType)?.label ?? "Candles";
-			n.innerHTML = `${g("barChart", 14)} ${t} ${g("chevronDown", 12)}`;
+			n.innerHTML = `${y("barChart", 14)} ${t} ${y("chevronDown", 12)}`;
 		}
 		let r = this.el.querySelector("[data-role=\"indicators\"]");
 		if (r) {
-			let t = e.activeIndicators.size, n = `${g("trendingUp", 14)} Indicators`;
+			let t = e.activeIndicators.size, n = `${y("trendingUp", 14)} Indicators`;
 			t > 0 && (n += ` <span class="tcw-badge-count">${t}</span>`), r.innerHTML = n;
 		}
 		if (this.chipsContainer) {
@@ -543,10 +790,10 @@ var _ = class {
 				let n = document.createElement("span");
 				n.textContent = e.label, t.appendChild(n);
 				let r = document.createElement("button");
-				r.className = "tcw-chip-remove", r.innerHTML = g("x", 10), r.addEventListener("click", () => this.callbacks.onRemoveIndicator(e.instanceId)), t.appendChild(r), this.chipsContainer.appendChild(t);
+				r.className = "tcw-chip-remove", r.innerHTML = y("x", 10), r.addEventListener("click", () => this.callbacks.onRemoveIndicator(e.instanceId)), t.appendChild(r), this.chipsContainer.appendChild(t);
 			}
 		}
-		this.themeBtn && (this.themeBtn.innerHTML = e.isDark ? g("moon", 14) : g("sun", 14));
+		this.themeBtn && (this.themeBtn.innerHTML = e.isDark ? y("moon", 14) : y("sun", 14));
 	}
 	getActiveIndicatorList(e) {
 		let t = [];
@@ -567,12 +814,12 @@ var _ = class {
 	}
 	iconBtn(e, t, n) {
 		let r = document.createElement("button");
-		return r.className = "tcw-btn-icon", r.title = t, r.innerHTML = g(e, 14), r.addEventListener("click", n), r;
+		return r.className = "tcw-btn-icon", r.title = t, r.innerHTML = y(e, 14), r.addEventListener("click", n), r;
 	}
 	destroy() {
 		this.chartTypeDropdown?.destroy(), this.indicatorDropdown?.destroy(), this.el.remove();
 	}
-}, y = [
+}, re = [
 	"trendingUp",
 	"minus",
 	"penLine",
@@ -581,7 +828,43 @@ var _ = class {
 	"gitBranch",
 	"ruler",
 	"type"
-], b = class {
+], ie = {
+	trendLine: "trendingUp",
+	ray: "trendingUp",
+	extendedLine: "trendingUp",
+	horizontalLine: "minus",
+	verticalLine: "penLine",
+	rectangle: "square",
+	ellipse: "square",
+	triangle: "square",
+	arrow: "trendingUp",
+	parallelChannel: "gitBranch",
+	regressionChannel: "gitBranch",
+	pitchfork: "gitBranch",
+	fibRetracement: "hash",
+	fibExtension: "hash",
+	fibTimeZones: "hash",
+	gannBox: "hash",
+	gannFan: "gitBranch",
+	elliottWave: "trendingUp",
+	priceRange: "ruler",
+	dateRange: "ruler",
+	measure: "ruler",
+	textAnnotation: "type",
+	anchoredVWAP: "trendingUp",
+	volumeProfileRange: "barChart"
+};
+function ae(e) {
+	return ie[e] ?? "penLine";
+}
+function oe(e, t) {
+	for (let n of e) {
+		let e = n.tools.find((e) => e.value === t);
+		if (e) return e.label;
+	}
+	return t;
+}
+var x = class {
 	config;
 	callbacks;
 	el;
@@ -590,29 +873,51 @@ var _ = class {
 	cursorBtn = null;
 	magnetBtn = null;
 	flyoutEl = null;
+	favoritesEl = null;
+	favoritesDivider = null;
+	favorites = [];
 	constructor(e, t, n) {
 		this.config = t, this.callbacks = n, this.el = document.createElement("div"), this.el.className = "tcw-sidebar", this.build(), e.appendChild(this.el);
 	}
 	build() {
 		let { config: e, callbacks: t, el: n } = this;
-		this.cursorBtn = document.createElement("button"), this.cursorBtn.className = "tcw-sidebar-btn", this.cursorBtn.title = "Cursor", this.cursorBtn.innerHTML = g("cursor", 14), this.cursorBtn.addEventListener("click", t.onCancelDrawing), n.appendChild(this.cursorBtn), n.appendChild(this.divider()), e.drawingToolGroups.forEach((e, r) => {
+		this.cursorBtn = document.createElement("button"), this.cursorBtn.className = "tcw-sidebar-btn", this.cursorBtn.title = "Cursor", this.cursorBtn.innerHTML = y("cursor", 14), this.cursorBtn.addEventListener("click", t.onCancelDrawing), n.appendChild(this.cursorBtn), n.appendChild(this.divider()), t.onToggleFavorite && (this.favorites = [...e.favorites ?? []], this.favoritesEl = document.createElement("div"), this.favoritesEl.className = "tcw-sidebar-favorites", n.appendChild(this.favoritesEl), this.favoritesDivider = this.divider(), n.appendChild(this.favoritesDivider), this.renderFavorites()), e.drawingToolGroups.forEach((e, r) => {
 			let i = document.createElement("div");
 			i.className = "tcw-tool-group-wrap";
 			let a = document.createElement("button");
-			if (a.className = "tcw-sidebar-btn", a.title = e.label, a.innerHTML = g(y[r] ?? "square", 14), e.tools.length > 1) {
+			if (a.className = "tcw-sidebar-btn", a.title = e.label, a.innerHTML = y(re[r] ?? "square", 14), e.tools.length > 1) {
 				let e = document.createElement("span");
 				e.className = "tcw-multi-dot", a.appendChild(e);
 			}
 			a.addEventListener("click", () => t.onDrawingTool(e.tools[0].value)), i.appendChild(a), i.addEventListener("mouseenter", () => this.showFlyout(r)), i.addEventListener("mouseleave", () => this.hideFlyout()), n.appendChild(i), this.groupWraps.push(i), this.groupButtons.push(a);
 		});
 		let r = document.createElement("div");
-		r.className = "tcw-sidebar-spacer", n.appendChild(r), n.appendChild(this.divider()), this.magnetBtn = document.createElement("button"), this.magnetBtn.className = "tcw-sidebar-btn", this.magnetBtn.title = "Magnet", this.magnetBtn.innerHTML = g("magnet", 14), this.magnetBtn.addEventListener("click", t.onToggleMagnet), n.appendChild(this.magnetBtn);
+		if (r.className = "tcw-sidebar-spacer", n.appendChild(r), n.appendChild(this.divider()), t.onToggleStyle) {
+			let e = document.createElement("button");
+			e.className = "tcw-sidebar-btn", e.title = "Drawing style & templates", e.dataset.role = "style", e.innerHTML = y("palette", 14), e.addEventListener("click", t.onToggleStyle), n.appendChild(e);
+		}
+		this.magnetBtn = document.createElement("button"), this.magnetBtn.className = "tcw-sidebar-btn", this.magnetBtn.title = "Magnet", this.magnetBtn.innerHTML = y("magnet", 14), this.magnetBtn.addEventListener("click", t.onToggleMagnet), n.appendChild(this.magnetBtn);
 		let i = document.createElement("button");
-		i.className = "tcw-sidebar-btn", i.title = "Undo", i.innerHTML = g("undo", 14), i.addEventListener("click", t.onUndo), n.appendChild(i);
+		i.className = "tcw-sidebar-btn", i.title = "Undo", i.innerHTML = y("undo", 14), i.addEventListener("click", t.onUndo), n.appendChild(i);
 		let a = document.createElement("button");
-		a.className = "tcw-sidebar-btn", a.title = "Redo", a.innerHTML = g("redo", 14), a.addEventListener("click", t.onRedo), n.appendChild(a);
+		a.className = "tcw-sidebar-btn", a.title = "Redo", a.innerHTML = y("redo", 14), a.addEventListener("click", t.onRedo), n.appendChild(a);
 		let o = document.createElement("button");
-		o.className = "tcw-sidebar-btn tcw-danger", o.title = "Clear all", o.innerHTML = g("trash", 14), o.addEventListener("click", t.onClearDrawings), n.appendChild(o);
+		o.className = "tcw-sidebar-btn tcw-danger", o.title = "Clear all", o.innerHTML = y("trash", 14), o.addEventListener("click", t.onClearDrawings), n.appendChild(o);
+	}
+	setFavorites(e) {
+		this.favorites = [...e], this.renderFavorites();
+	}
+	renderFavorites() {
+		if (!this.favoritesEl) return;
+		this.favoritesEl.replaceChildren();
+		let e = this.favorites.length > 0;
+		this.favoritesEl.style.display = e ? "" : "none", this.favoritesDivider && (this.favoritesDivider.style.display = e ? "" : "none");
+		for (let e of this.favorites) {
+			let t = document.createElement("button");
+			t.className = "tcw-sidebar-btn", t.title = `${oe(this.config.drawingToolGroups, e)} (right-click to unpin)`, t.dataset.toolValue = e, t.innerHTML = y(ae(e), 14), t.addEventListener("click", () => this.callbacks.onDrawingTool(e)), t.addEventListener("contextmenu", (t) => {
+				t.preventDefault(), this.callbacks.onToggleFavorite?.(e);
+			}), this.favoritesEl.appendChild(t);
+		}
 	}
 	showFlyout(e) {
 		let t = this.config.drawingToolGroups[e];
@@ -626,7 +931,9 @@ var _ = class {
 			let t = document.createElement("button");
 			t.className = "tcw-flyout-item", t.textContent = e.label, t.dataset.toolValue = e.value, t.addEventListener("click", () => {
 				this.callbacks.onDrawingTool(e.value), this.hideFlyout();
-			}), n.appendChild(t);
+			}), this.callbacks.onToggleFavorite && (this.favorites.includes(e.value) && t.classList.add("tcw-flyout-faved"), t.title = "Right-click to pin/unpin", t.addEventListener("contextmenu", (t) => {
+				t.preventDefault(), this.callbacks.onToggleFavorite?.(e.value);
+			})), n.appendChild(t);
 		}
 		this.flyoutEl = n, this.groupWraps[e].appendChild(n);
 	}
@@ -652,11 +959,11 @@ var _ = class {
 	destroy() {
 		this.hideFlyout(), this.el.remove();
 	}
-}, x = [
+}, S = [
 	"style",
 	"display",
 	"scale"
-], S = class {
+], C = class {
 	callbacks;
 	backdrop = null;
 	modal = null;
@@ -682,12 +989,12 @@ var _ = class {
 		let t = document.createElement("h3");
 		t.textContent = "Chart Settings", e.appendChild(t);
 		let n = document.createElement("button");
-		n.className = "tcw-modal-close", n.innerHTML = g("x", 16), n.addEventListener("click", () => {
+		n.className = "tcw-modal-close", n.innerHTML = y("x", 16), n.addEventListener("click", () => {
 			this.callbacks.onClose(), this.close();
 		}), e.appendChild(n), this.modal.appendChild(e);
 		let r = document.createElement("div");
 		r.className = "tcw-modal-tabs", this.tabButtons = [];
-		for (let e of x) {
+		for (let e of S) {
 			let t = document.createElement("button");
 			t.className = "tcw-modal-tab", t.textContent = e, t.dataset.tab = e, e === this.currentTab && t.classList.add("tcw-active"), t.addEventListener("click", () => {
 				this.currentTab = e, this.tabButtons.forEach((t) => t.classList.toggle("tcw-active", t.dataset.tab === e)), this.renderTabContent();
@@ -730,7 +1037,13 @@ var _ = class {
 	renderDisplayTab() {
 		if (!this.bodyEl || !this.currentSettings) return;
 		let e = this.currentSettings, t = this.section();
-		t.appendChild(this.toggleRow("Grid Lines", e.gridVisible, (e) => this.patch({ gridVisible: e }))), t.appendChild(this.toggleRow("Volume", e.volumeVisible, (e) => this.patch({ volumeVisible: e }))), t.appendChild(this.toggleRow("OHLC Legend", e.legendVisible, (e) => this.patch({ legendVisible: e }))), t.appendChild(this.toggleRow("Bar Countdown", e.barCountdown, (e) => this.patch({ barCountdown: e }))), t.appendChild(this.selectRow("Crosshair Mode", e.crosshairMode, [
+		t.appendChild(this.toggleRow("Grid Lines", e.gridVisible, (e) => this.patch({ gridVisible: e }))), t.appendChild(this.toggleRow("Volume", e.volumeVisible, (e) => this.patch({ volumeVisible: e }))), t.appendChild(this.toggleRow("Volume Profile", e.volumeProfileVisible, (e) => this.patch({ volumeProfileVisible: e }))), t.appendChild(this.toggleRow("Market Profile (TPO)", e.marketProfileVisible, (e) => this.patch({ marketProfileVisible: e }))), t.appendChild(this.toggleRow("MP split by session", e.marketProfileSplit, (e) => this.patch({ marketProfileSplit: e }))), t.appendChild(this.toggleRow("MP letters (TPO)", e.marketProfileLetters, (e) => this.patch({ marketProfileLetters: e }))), t.appendChild(this.rangeRow("MP buckets", e.marketProfileBuckets, 8, 200, 1, (e) => this.patch({ marketProfileBuckets: e }))), t.appendChild(this.rangeRow("MP opacity", e.marketProfileOpacity, .05, 1, .05, (e) => this.patch({ marketProfileOpacity: e }), (e) => `${Math.round(e * 100)}%`)), t.appendChild(this.toggleRow("Liquidity heatmap", e.depthHeatmapVisible, (e) => this.patch({ depthHeatmapVisible: e }))), t.appendChild(this.rangeRow("Heatmap opacity", e.depthHeatmapOpacity, .1, 1, .05, (e) => this.patch({ depthHeatmapOpacity: e }), (e) => `${Math.round(e * 100)}%`)), t.appendChild(this.toggleRow("Swing markers", e.pivotMarkersVisible, (e) => this.patch({ pivotMarkersVisible: e }))), t.appendChild(this.rangeRow("Swing strength", e.pivotStrength, 2, 20, 1, (e) => this.patch({ pivotStrength: e }))), t.appendChild(this.toggleRow("Swing structure (HH/HL)", e.pivotStructureLabels, (e) => this.patch({ pivotStructureLabels: e }))), t.appendChild(this.toggleRow("Session shading (RTH)", e.sessionShadingVisible, (e) => this.patch({ sessionShadingVisible: e }))), t.appendChild(this.toggleRow("Prior-period levels", e.periodLevelsVisible, (e) => this.patch({ periodLevelsVisible: e }))), t.appendChild(this.selectRow("Period levels basis", e.periodLevelsPeriod, [{
+			value: "day",
+			label: "Prior Day (PDH/PDL)"
+		}, {
+			value: "week",
+			label: "Prior Week (PWH/PWL)"
+		}], (e) => this.patch({ periodLevelsPeriod: e }))), t.appendChild(this.toggleRow("OHLC Legend", e.legendVisible, (e) => this.patch({ legendVisible: e }))), t.appendChild(this.toggleRow("Bar Countdown", e.barCountdown, (e) => this.patch({ barCountdown: e }))), t.appendChild(this.selectRow("Crosshair Mode", e.crosshairMode, [
 			{
 				label: "Magnet",
 				value: "magnet"
@@ -743,7 +1056,40 @@ var _ = class {
 				label: "Hidden",
 				value: "hidden"
 			}
-		], (e) => this.patch({ crosshairMode: e }))), t.appendChild(this.selectRow("Number Locale", e.numberLocale, [
+		], (e) => this.patch({ crosshairMode: e }))), t.appendChild(this.selectRow("Timezone", e.timezone, [
+			{
+				value: "local",
+				label: "Local"
+			},
+			{
+				value: "0",
+				label: "UTC / London"
+			},
+			{
+				value: "-300",
+				label: "New York (UTC-5)"
+			},
+			{
+				value: "-360",
+				label: "Chicago (UTC-6)"
+			},
+			{
+				value: "60",
+				label: "Frankfurt (UTC+1)"
+			},
+			{
+				value: "480",
+				label: "Singapore/HK (UTC+8)"
+			},
+			{
+				value: "540",
+				label: "Tokyo (UTC+9)"
+			},
+			{
+				value: "330",
+				label: "Mumbai (UTC+5:30)"
+			}
+		], (e) => this.patch({ timezone: e }))), t.appendChild(this.selectRow("Number Locale", e.numberLocale, [
 			{
 				label: "en-US (65,234.00)",
 				value: "en-US"
@@ -773,7 +1119,24 @@ var _ = class {
 	renderScaleTab() {
 		if (!this.bodyEl || !this.currentSettings) return;
 		let e = this.currentSettings, t = this.section();
-		t.appendChild(this.toggleRow("Auto Scale", e.autoScale, (e) => this.patch({ autoScale: e }))), t.appendChild(this.toggleRow("Log Scale", e.logScale, (e) => this.patch({ logScale: e }))), this.bodyEl.appendChild(t);
+		t.appendChild(this.toggleRow("Auto Scale", e.autoScale, (e) => this.patch({ autoScale: e }))), t.appendChild(this.selectRow("Price Scale", e.scaleMode, [
+			{
+				value: "regular",
+				label: "Regular"
+			},
+			{
+				value: "logarithmic",
+				label: "Logarithmic"
+			},
+			{
+				value: "percentage",
+				label: "Percentage"
+			},
+			{
+				value: "indexedTo100",
+				label: "Indexed to 100"
+			}
+		], (e) => this.patch({ scaleMode: e }))), this.bodyEl.appendChild(t);
 	}
 	patch(e) {
 		this.currentSettings && Object.assign(this.currentSettings, e), this.callbacks.onChange(e);
@@ -824,10 +1187,25 @@ var _ = class {
 		}
 		return o.addEventListener("change", () => r(o.value)), i.appendChild(o), i;
 	}
+	rangeRow(e, t, n, r, i, a, o = (e) => String(e)) {
+		let s = document.createElement("div");
+		s.className = "tcw-settings-row";
+		let c = document.createElement("span");
+		c.className = "tcw-settings-label", c.textContent = e, s.appendChild(c);
+		let l = document.createElement("div");
+		l.className = "tcw-settings-range";
+		let u = document.createElement("input");
+		u.type = "range", u.min = String(n), u.max = String(r), u.step = String(i), u.value = String(t);
+		let d = document.createElement("span");
+		return d.className = "tcw-settings-range-val", d.textContent = o(t), u.addEventListener("input", () => {
+			let e = Number(u.value);
+			d.textContent = o(e), a(e);
+		}), l.appendChild(u), l.appendChild(d), s.appendChild(l), s;
+	}
 	destroy() {
 		this.close();
 	}
-}, C = class {
+}, w = class {
 	el;
 	dotEl;
 	messageEl;
@@ -843,7 +1221,7 @@ var _ = class {
 	destroy() {
 		this.el.remove();
 	}
-}, w = class {
+}, T = class {
 	backdrop = null;
 	modal = null;
 	input = null;
@@ -968,145 +1346,1909 @@ var _ = class {
 	destroy() {
 		this.close();
 	}
-}, T = class {
-	chart;
-	state;
-	toolbar = null;
-	sidebar = null;
-	settings = null;
-	statusBar = null;
-	commandPalette = null;
-	root;
-	chartContainer;
-	destroyed = !1;
-	options;
-	symbolIndex = 0;
-	symbols;
-	settingsState;
-	adapter = null;
-	boundGlobalKeydown = null;
-	constructor(t, n = {}) {
-		this.options = n, this.symbols = n.symbols ?? c, this.settingsState = { ...l };
-		let u = this.resolveIsDark(n.theme), d = this.resolveTheme(n.theme);
-		this.state = {
-			symbol: n.symbol ?? this.symbols[0] ?? "BTCUSDT",
-			timeframe: n.timeframe ?? "5m",
-			chartType: n.chartOptions?.chartType ?? "candlestick",
-			isDark: u,
-			activeIndicators: /* @__PURE__ */ new Map(),
-			activeTool: null,
-			magnetEnabled: !0,
-			connectionState: "connecting",
-			connectionMessage: "Connecting..."
-		};
-		let f = this.symbols.indexOf(this.state.symbol);
-		f >= 0 && (this.symbolIndex = f), p(), this.root = document.createElement("div"), this.root.className = "tcw-root", this.root.dataset.tcwTheme = u ? "dark" : "light", t.appendChild(this.root), n.toolbar !== !1 && (this.toolbar = new v(this.root, {
-			symbols: this.symbols,
-			timeframes: n.timeframes ? r.filter((e) => n.timeframes.includes(e.value)) : r,
-			chartTypes: n.chartTypes ? i.filter((e) => n.chartTypes.includes(e.value)) : i,
-			indicators: o,
-			popularIndicatorIds: s
-		}, {
-			onSymbolClick: () => this.handleSymbolClick(),
-			onTimeframe: (e) => this.handleTimeframe(e),
-			onChartType: (e) => this.handleChartType(e),
-			onAddIndicator: (e) => this.handleAddIndicator(e),
-			onRemoveIndicator: (e) => this.handleRemoveIndicator(e),
-			onScreenshot: () => this.chart.screenshot(),
-			onSettings: () => this.openSettings(),
-			onToggleTheme: () => this.handleToggleTheme()
-		}));
-		let m = document.createElement("div");
-		m.className = "tcw-body", n.drawingTools !== !1 && (this.sidebar = new b(m, { drawingToolGroups: a }, {
-			onDrawingTool: (e) => this.handleDrawingTool(e),
-			onCancelDrawing: () => this.handleCancelDrawing(),
-			onToggleMagnet: () => this.handleToggleMagnet(),
-			onUndo: () => this.chart.undo(),
-			onRedo: () => this.chart.redo(),
-			onClearDrawings: () => {
-				this.chart.clearDrawings(), this.state = {
-					...this.state,
-					activeTool: null
-				}, this.updateUI();
-			}
-		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", m.appendChild(this.chartContainer), this.root.appendChild(m), this.chart = new e(this.chartContainer, {
-			chartType: this.state.chartType,
-			theme: d,
-			autoScale: !0,
-			crosshair: { mode: "magnet" },
-			features: {
-				drawings: !0,
-				drawingMagnet: !0,
-				drawingUndoRedo: !0,
-				indicators: !0,
-				trading: n.trading !== !1,
-				tradingContextMenu: n.trading !== !1,
-				volume: !0,
-				legend: !0,
-				crosshair: !0,
-				keyboard: !0,
-				screenshot: !0,
-				alerts: !0,
-				barCountdown: !0,
-				logScale: !0,
-				watermark: !0
-			},
-			...n.chartOptions
-		}), n.statusBar !== !1 && (this.statusBar = new C(this.root)), n.settings !== !1 && (this.settings = new S({
-			onChange: (e) => this.applySettings(e),
-			onReset: () => this.resetSettings(),
-			onClose: () => {}
-		})), this.commandPalette = new w({
-			onIndicator: (e) => this.handleAddIndicator(e),
-			onChartType: (e) => this.handleChartType(e),
-			onDrawingTool: (e) => this.handleDrawingTool(e),
-			onTimeframe: (e) => this.handleTimeframe(e),
-			onAction: (e) => this.handleAction(e),
-			onClose: () => {}
-		}), this.boundGlobalKeydown = (e) => {
-			(e.ctrlKey || e.metaKey) && e.key === "k" && (e.preventDefault(), this.toggleCommandPalette());
-		}, document.addEventListener("keydown", this.boundGlobalKeydown), n.adapter && (this.adapter = n.adapter, this.connectStream()), this.updateUI(), n.onReady?.(this.chart);
-	}
-	async setSymbol(e) {
-		this.state = {
-			...this.state,
-			symbol: e
-		};
-		let t = this.symbols.indexOf(e);
-		t >= 0 && (this.symbolIndex = t), this.options.onSymbolChange?.(e), this.updateUI(), this.adapter && await this.connectStream();
+}, E = class {
+	backdrop = null;
+	modal = null;
+	input = null;
+	list = null;
+	symbols = [];
+	current = "";
+	filtered = [];
+	selectedIndex = 0;
+	callbacks;
+	boundKeydown;
+	pickOverride = null;
+	constructor(e) {
+		this.callbacks = e, this.boundKeydown = this.handleKeydown.bind(this);
 	}
-	async setTimeframe(e) {
-		this.state = {
-			...this.state,
-			timeframe: e
-		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter && await this.connectStream();
+	open(e, t, n) {
+		if (this.backdrop) return;
+		this.pickOverride = n ?? null, this.symbols = e, this.current = t, this.filtered = e.map((e) => ({
+			symbol: e,
+			score: 0
+		})), this.selectedIndex = Math.max(0, e.indexOf(t)), this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.addEventListener("click", () => this.close()), this.modal = document.createElement("div"), this.modal.className = "tcw-cmd-palette";
+		let r = document.createElement("div");
+		r.className = "tcw-cmd-header";
+		let i = document.createElement("span");
+		i.className = "tcw-cmd-icon", i.innerHTML = A(), r.appendChild(i), this.input = document.createElement("input"), this.input.className = "tcw-cmd-input", this.input.type = "text", this.input.placeholder = "Search symbol… (e.g. BTC, ETH, AAPL)", this.input.autocomplete = "off", this.input.spellcheck = !1, this.input.addEventListener("input", () => this.filter()), r.appendChild(this.input);
+		let a = document.createElement("span");
+		a.className = "tcw-cmd-hint", a.textContent = "ESC", r.appendChild(a), this.modal.appendChild(r), this.list = document.createElement("div"), this.list.className = "tcw-cmd-list", this.modal.appendChild(this.list);
+		let o = document.createElement("div");
+		o.className = "tcw-cmd-footer", o.innerHTML = "<span>↑↓ Navigate</span><span>⏎ Open</span><span>Esc Close</span>", this.modal.appendChild(o), document.body.appendChild(this.backdrop), document.body.appendChild(this.modal), this.renderList(), this.input.focus(), document.addEventListener("keydown", this.boundKeydown);
 	}
-	setTheme(e) {
-		let t = this.resolveIsDark(e), n = this.resolveTheme(e);
-		this.state = {
-			...this.state,
-			isDark: t
-		}, this.root.dataset.tcwTheme = t ? "dark" : "light", this.chart.setTheme(n), this.updateUI();
+	close() {
+		document.removeEventListener("keydown", this.boundKeydown), this.backdrop?.remove(), this.modal?.remove(), this.backdrop = null, this.modal = null, this.input = null, this.list = null, this.pickOverride = null, this.callbacks.onClose();
 	}
-	getChart() {
-		return this.chart;
+	isOpen() {
+		return this.backdrop !== null;
 	}
 	destroy() {
-		this.destroyed || (this.destroyed = !0, this.boundGlobalKeydown && document.removeEventListener("keydown", this.boundGlobalKeydown), this.commandPalette?.destroy(), this.toolbar?.destroy(), this.sidebar?.destroy(), this.settings?.destroy(), this.statusBar?.destroy(), this.chart.destroy(), this.root.remove(), m());
+		this.close();
+	}
+	filter() {
+		let e = (this.input?.value ?? "").toUpperCase().trim();
+		e ? this.filtered = this.symbols.map((t) => ({
+			symbol: t,
+			score: D(t.toUpperCase(), e)
+		})).filter((e) => e.score > 0).sort((e, t) => t.score - e.score) : this.filtered = this.symbols.map((e) => ({
+			symbol: e,
+			score: 0
+		})), this.selectedIndex = 0, this.renderList();
+	}
+	renderList() {
+		if (!this.list) return;
+		if (this.list.innerHTML = "", this.filtered.length === 0) {
+			let e = document.createElement("div");
+			e.className = "tcw-cmd-empty", e.textContent = "No symbols match", this.list.appendChild(e);
+			return;
+		}
+		let e = (this.input?.value ?? "").toUpperCase().trim();
+		for (let t = 0; t < this.filtered.length; t++) {
+			let { symbol: n } = this.filtered[t], r = document.createElement("button");
+			r.className = "tcw-cmd-item", t === this.selectedIndex && r.classList.add("tcw-selected"), n === this.current && r.classList.add("tcw-active");
+			let i = document.createElement("span");
+			if (i.className = "tcw-cmd-item-label", i.innerHTML = O(n, e), r.appendChild(i), n === this.current) {
+				let e = document.createElement("span");
+				e.className = "tcw-cmd-check", e.textContent = "✓", r.appendChild(e);
+			}
+			r.addEventListener("click", () => this.pick(t)), r.addEventListener("mouseenter", () => {
+				this.selectedIndex = t, this.updateSelection();
+			}), this.list.appendChild(r);
+		}
+	}
+	updateSelection() {
+		if (!this.list) return;
+		let e = this.list.querySelectorAll(".tcw-cmd-item");
+		e.forEach((e, t) => e.classList.toggle("tcw-selected", t === this.selectedIndex)), e[this.selectedIndex]?.scrollIntoView({ block: "nearest" });
+	}
+	pick(e) {
+		let t = this.filtered[e];
+		if (!t) return;
+		let n = this.pickOverride;
+		n ? n(t.symbol) : this.callbacks.onPick(t.symbol), this.close();
+	}
+	handleKeydown(e) {
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), this.close();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), this.filtered.length > 0 && (this.selectedIndex = (this.selectedIndex + 1) % this.filtered.length, this.updateSelection());
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this.filtered.length > 0 && (this.selectedIndex = (this.selectedIndex - 1 + this.filtered.length) % this.filtered.length, this.updateSelection());
+				break;
+			case "Enter":
+				e.preventDefault(), this.pick(this.selectedIndex);
+				break;
+		}
+	}
+};
+function D(e, t) {
+	if (e === t) return 1e3;
+	if (e.startsWith(t)) return 500 + (50 - Math.min(50, e.length - t.length));
+	if (e.includes(t)) return 200 + (50 - Math.min(50, e.length - t.length));
+	let n = 0, r = -1, i = 0;
+	for (let a = 0; a < e.length && n < t.length; a++) e[a] === t[n] && (r >= 0 && (i += a - r - 1), r = a, n++);
+	return n < t.length ? 0 : 100 - Math.min(99, i);
+}
+function O(e, t) {
+	if (!t) return k(e);
+	let n = e.toUpperCase(), r = "", i = 0;
+	for (let a = 0; a < e.length; a++) i < t.length && n[a] === t[i] ? (r += `<mark style="background:transparent;color:var(--tcw-accent);font-weight:700">${k(e[a])}</mark>`, i++) : r += k(e[a]);
+	return r;
+}
+function k(e) {
+	return e.replace(/[&<>"']/g, (e) => ({
+		"&": "&amp;",
+		"<": "&lt;",
+		">": "&gt;",
+		"\"": "&quot;",
+		"'": "&#39;"
+	})[e]);
+}
+function A() {
+	return "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.3-4.3\"/></svg>";
+}
+//#endregion
+//#region src/widget/WidgetHotkeySheet.ts
+var j = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent) ? "⌘" : "Ctrl", M = [
+	{
+		title: "Search & navigation",
+		entries: [
+			{
+				keys: [j, "K"],
+				label: "Command palette"
+			},
+			{
+				keys: [j, "P"],
+				label: "Symbol search"
+			},
+			{
+				keys: ["?"],
+				label: "Show this sheet"
+			}
+		]
+	},
+	{
+		title: "Chart manipulation",
+		entries: [
+			{
+				keys: ["Shift", "Drag"],
+				label: "Measure tool (bars × price Δ)"
+			},
+			{
+				keys: ["Drag", "Price axis"],
+				label: "Compress / expand vertical scale"
+			},
+			{
+				keys: ["Drag", "Time axis"],
+				label: "Zoom time axis"
+			},
+			{
+				keys: ["Double-click", "Price axis"],
+				label: "Re-enable auto-scale"
+			},
+			{
+				keys: ["Double-click", "Time axis"],
+				label: "Fit content"
+			},
+			{
+				keys: ["Scroll"],
+				label: "Zoom around cursor"
+			}
+		]
+	},
+	{
+		title: "Touch (mobile / tablet)",
+		entries: [
+			{
+				keys: ["1 finger", "Drag"],
+				label: "Pan / move crosshair"
+			},
+			{
+				keys: ["2 fingers", "Pinch"],
+				label: "Zoom around midpoint"
+			},
+			{
+				keys: ["Long-press"],
+				label: "Pin OHLC tooltip at bar"
+			},
+			{
+				keys: ["Drag", "Axis strip"],
+				label: "Scale price / time axis"
+			}
+		]
+	},
+	{
+		title: "Keyboard",
+		entries: [
+			{
+				keys: ["←", "→"],
+				label: "Pan one bar"
+			},
+			{
+				keys: ["+", "−"],
+				label: "Zoom in / out"
+			},
+			{
+				keys: ["Home"],
+				label: "Scroll to start"
+			},
+			{
+				keys: ["End"],
+				label: "Scroll to end (live edge)"
+			},
+			{
+				keys: ["F"],
+				label: "Fit content"
+			}
+		]
+	},
+	{
+		title: "Drawing",
+		entries: [
+			{
+				keys: [j, "Z"],
+				label: "Undo"
+			},
+			{
+				keys: [
+					j,
+					"Shift",
+					"Z"
+				],
+				label: "Redo"
+			},
+			{
+				keys: ["Esc"],
+				label: "Cancel active drawing"
+			}
+		]
+	}
+], N = class {
+	backdrop = null;
+	modal = null;
+	callbacks;
+	boundKeydown;
+	constructor(e) {
+		this.callbacks = e, this.boundKeydown = (e) => {
+			e.key === "Escape" && (e.preventDefault(), this.close());
+		};
+	}
+	open() {
+		if (this.backdrop) return;
+		this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.addEventListener("click", () => this.close()), this.modal = document.createElement("div"), this.modal.className = "tcw-modal tcw-hotkey-sheet", this.modal.style.width = "640px";
+		let e = document.createElement("div");
+		e.className = "tcw-modal-header", e.innerHTML = "<h3>Keyboard shortcuts</h3>";
+		let t = document.createElement("button");
+		t.className = "tcw-modal-close", t.setAttribute("aria-label", "Close"), t.innerHTML = "×", t.addEventListener("click", () => this.close()), e.appendChild(t), this.modal.appendChild(e);
+		let n = document.createElement("div");
+		n.className = "tcw-modal-body";
+		let r = document.createElement("div");
+		r.className = "tcw-hotkey-grid";
+		for (let e of M) {
+			let t = document.createElement("section");
+			t.className = "tcw-hotkey-section";
+			let n = document.createElement("div");
+			n.className = "tcw-settings-section-title", n.textContent = e.title, t.appendChild(n);
+			for (let n of e.entries) {
+				let e = document.createElement("div");
+				e.className = "tcw-hotkey-row";
+				let r = document.createElement("div");
+				r.className = "tcw-hotkey-keys";
+				for (let e = 0; e < n.keys.length; e++) {
+					if (e > 0) {
+						let e = document.createElement("span");
+						e.className = "tcw-hotkey-sep", e.textContent = "+", r.appendChild(e);
+					}
+					let t = document.createElement("kbd");
+					t.className = "tcw-cmd-kbd", t.textContent = n.keys[e], r.appendChild(t);
+				}
+				e.appendChild(r);
+				let i = document.createElement("span");
+				i.className = "tcw-hotkey-label", i.textContent = n.label, e.appendChild(i), t.appendChild(e);
+			}
+			r.appendChild(t);
+		}
+		n.appendChild(r), this.modal.appendChild(n);
+		let i = document.createElement("div");
+		i.className = "tcw-modal-footer", i.innerHTML = "<span style=\"font-size:11px;color:var(--tcw-text-muted)\">Press ? anytime to show this sheet</span>";
+		let a = document.createElement("button");
+		a.className = "tcw-done-btn", a.textContent = "Got it", a.addEventListener("click", () => this.close()), i.appendChild(a), this.modal.appendChild(i), document.body.appendChild(this.backdrop), document.body.appendChild(this.modal), document.addEventListener("keydown", this.boundKeydown);
+	}
+	close() {
+		document.removeEventListener("keydown", this.boundKeydown), this.backdrop?.remove(), this.modal?.remove(), this.backdrop = null, this.modal = null, this.callbacks.onClose();
+	}
+	isOpen() {
+		return this.backdrop !== null;
+	}
+	destroy() {
+		this.close();
+	}
+}, P = [
+	.5,
+	1,
+	2,
+	5,
+	10,
+	20,
+	50,
+	100
+], F = class {
+	root = null;
+	scrubber = null;
+	progressLabel = null;
+	playBtn = null;
+	state = "stopped";
+	total = 0;
+	speed = 5;
+	callbacks;
+	constructor(e) {
+		this.callbacks = e;
+	}
+	mount(e, t) {
+		this.root || (this.total = Math.max(0, t.total), this.speed = t.speed ?? 5, this.state = "paused", this.root = document.createElement("div"), this.root.className = "tcw-replay-bar", this.root.innerHTML = this.markup(), e.appendChild(this.root), this.wireEvents(), this.syncUi());
+	}
+	unmount() {
+		this.root?.remove(), this.root = null, this.scrubber = null, this.progressLabel = null, this.playBtn = null, this.state = "stopped";
+	}
+	isMounted() {
+		return this.root !== null;
+	}
+	setState(e) {
+		this.state = e, this.syncUi();
+	}
+	setProgress(e, t) {
+		this.total = t, this.scrubber && (this.scrubber.max = String(Math.max(0, t - 1)), this.scrubber.value = String(e)), this.progressLabel && (this.progressLabel.textContent = `${e + 1} / ${t}`);
+	}
+	destroy() {
+		this.unmount();
+	}
+	markup() {
+		let e = P.map((e) => `<option value="${e}"${e === this.speed ? " selected" : ""}>${e}× bars/s</option>`).join("");
+		return `
+      <button class="tcw-replay-btn" data-act="close" title="Exit replay" aria-label="Exit replay">${B()}</button>
+      <button class="tcw-replay-btn" data-act="stepBack" title="Step back" aria-label="Step back">${R()}</button>
+      <button class="tcw-replay-btn tcw-replay-play" data-act="play" title="Play / pause" aria-label="Play / pause">${I()}</button>
+      <button class="tcw-replay-btn" data-act="stepForward" title="Step forward" aria-label="Step forward">${z()}</button>
+      <input type="range" class="tcw-replay-scrubber" data-act="seek" min="0" max="${Math.max(0, this.total - 1)}" value="0" step="1" />
+      <span class="tcw-replay-progress" data-tcw="progress">1 / ${this.total}</span>
+      <select class="tcw-replay-speed" data-act="speed">${e}</select>
+    `;
+	}
+	wireEvents() {
+		this.root && (this.scrubber = this.root.querySelector("input[data-act=\"seek\"]"), this.progressLabel = this.root.querySelector("[data-tcw=\"progress\"]"), this.playBtn = this.root.querySelector("button[data-act=\"play\"]"), this.root.querySelector("[data-act=\"close\"]")?.addEventListener("click", () => this.callbacks.onClose()), this.root.querySelector("[data-act=\"stepBack\"]")?.addEventListener("click", () => this.callbacks.onStepBack()), this.root.querySelector("[data-act=\"stepForward\"]")?.addEventListener("click", () => this.callbacks.onStepForward()), this.playBtn?.addEventListener("click", () => {
+			this.state === "playing" ? this.callbacks.onPause() : this.callbacks.onPlay();
+		}), this.scrubber?.addEventListener("input", () => {
+			let e = Number(this.scrubber.value);
+			this.callbacks.onSeek(e);
+		}), this.root.querySelector("[data-act=\"speed\"]")?.addEventListener("change", (e) => {
+			let t = Number(e.target.value);
+			this.speed = t, this.callbacks.onSpeedChange(t);
+		}));
+	}
+	syncUi() {
+		this.playBtn && (this.playBtn.innerHTML = this.state === "playing" ? L() : I(), this.playBtn.title = this.state === "playing" ? "Pause" : "Play");
+	}
+};
+function I() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7L8 5z\"/></svg>";
+}
+function L() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6 5h4v14H6zM14 5h4v14h-4z\"/></svg>";
+}
+function R() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6 6h2v12H6zM20 6L9 12l11 6V6z\"/></svg>";
+}
+function z() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4 6l11 6L4 18V6zM16 6h2v12h-2z\"/></svg>";
+}
+function B() {
+	return "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>";
+}
+//#endregion
+//#region src/widget/WidgetWatchlist.ts
+var V = class {
+	el;
+	listEl;
+	rowMap = /* @__PURE__ */ new Map();
+	entries = /* @__PURE__ */ new Map();
+	active = null;
+	callbacks;
+	constructor(e, t, n) {
+		this.callbacks = n, this.el = document.createElement("div"), this.el.className = "tcw-watchlist";
+		let r = document.createElement("div");
+		r.className = "tcw-watchlist-header", r.textContent = "Watchlist", this.el.appendChild(r), this.listEl = document.createElement("div"), this.listEl.className = "tcw-watchlist-list", this.el.appendChild(this.listEl);
+		for (let e of t) this.entries.set(e, { symbol: e }), this.appendRow(e);
+		e.appendChild(this.el);
+	}
+	setSymbols(e) {
+		let t = new Set(e);
+		for (let e of this.rowMap.keys()) t.has(e) || this.removeRow(e);
+		for (let t of e) this.rowMap.has(t) || (this.entries.set(t, this.entries.get(t) ?? { symbol: t }), this.appendRow(t));
+	}
+	setActive(e) {
+		if (this.active === e) return;
+		this.active && this.rowMap.has(this.active) && this.rowMap.get(this.active).row.classList.remove("tcw-watchlist-active"), this.active = e;
+		let t = this.rowMap.get(e);
+		t && t.row.classList.add("tcw-watchlist-active");
+	}
+	setEntry(e, t) {
+		let n = {
+			...this.entries.get(e) ?? { symbol: e },
+			...t
+		};
+		this.entries.set(e, n), this.renderRow(e);
+	}
+	destroy() {
+		this.el.remove(), this.rowMap.clear(), this.entries.clear();
+	}
+	appendRow(e) {
+		let t = document.createElement("div");
+		t.className = "tcw-watchlist-row", t.tabIndex = 0;
+		let n = document.createElement("div");
+		n.className = "tcw-watchlist-symbol", n.textContent = H(e);
+		let r = document.createElement("canvas");
+		r.className = "tcw-watchlist-spark", r.width = 64, r.height = 22;
+		let i = document.createElement("div");
+		i.className = "tcw-watchlist-stats";
+		let a = document.createElement("span");
+		a.className = "tcw-watchlist-price", a.textContent = "—";
+		let o = document.createElement("span");
+		o.className = "tcw-watchlist-change", o.textContent = "", i.appendChild(a), i.appendChild(o), t.appendChild(n), t.appendChild(r), t.appendChild(i), t.addEventListener("click", () => this.callbacks.onSelect(e)), t.addEventListener("keydown", (t) => {
+			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.callbacks.onSelect(e));
+		}), this.listEl.appendChild(t), this.rowMap.set(e, {
+			row: t,
+			priceEl: a,
+			changeEl: o,
+			sparkCanvas: r
+		}), e === this.active && t.classList.add("tcw-watchlist-active");
+	}
+	removeRow(e) {
+		let t = this.rowMap.get(e);
+		t && (t.row.remove(), this.rowMap.delete(e));
+	}
+	renderRow(e) {
+		let t = this.rowMap.get(e), n = this.entries.get(e);
+		if (!(!t || !n)) {
+			if (n.lastPrice !== void 0 && (t.priceEl.textContent = U(n.lastPrice)), n.lastPrice !== void 0 && n.refPrice !== void 0 && n.refPrice !== 0) {
+				let e = n.lastPrice - n.refPrice, r = e / n.refPrice * 100, i = e >= 0 ? "+" : "";
+				t.changeEl.textContent = `${i}${r.toFixed(2)}%`, t.changeEl.className = `tcw-watchlist-change ${e >= 0 ? "tcw-up" : "tcw-down"}`;
+			} else t.changeEl.textContent = "";
+			n.sparkline && n.sparkline.length >= 2 && W(t.sparkCanvas, n.sparkline, n.refPrice ?? n.sparkline[0]);
+		}
+	}
+};
+function H(e) {
+	for (let t of [
+		"USDT",
+		"USD",
+		"BTC",
+		"ETH",
+		"EUR"
+	]) if (e.length > t.length && e.endsWith(t)) return e.slice(0, -t.length) + "/" + t;
+	return e;
+}
+function U(e) {
+	if (e === 0) return "0";
+	let t = Math.abs(e);
+	return t >= 1e3 ? e.toFixed(2) : t >= 1 ? e.toFixed(4) : e.toPrecision(4);
+}
+function W(e, t, n) {
+	let r = e.getContext("2d");
+	if (!r) return;
+	let i = window.devicePixelRatio || 1;
+	e.width !== e.clientWidth * i && (e.width = (e.clientWidth || 64) * i, e.height = (e.clientHeight || 22) * i);
+	let a = e.width, o = e.height, s = Infinity, c = -Infinity;
+	for (let e of t) e < s && (s = e), e > c && (c = e);
+	let l = Math.max(c - s, 1e-9), u = t[t.length - 1] >= n ? "#26a17b" : "#f23645";
+	r.clearRect(0, 0, a, o), r.lineWidth = 1.4 * i, r.strokeStyle = u, r.beginPath();
+	let d = a / (t.length - 1);
+	for (let e = 0; e < t.length; e++) {
+		let n = e * d, i = o - (t[e] - s) / l * (o - 4) - 2;
+		e === 0 ? r.moveTo(n, i) : r.lineTo(n, i);
+	}
+	r.stroke();
+}
+//#endregion
+//#region src/widget/WidgetAlertsPanel.ts
+var G = [
+	{
+		value: "crossing",
+		label: "Crossing"
+	},
+	{
+		value: "crossingUp",
+		label: "Crossing up"
+	},
+	{
+		value: "crossingDown",
+		label: "Crossing down"
+	},
+	{
+		value: "greaterThan",
+		label: "Greater than"
+	},
+	{
+		value: "lessThan",
+		label: "Less than"
+	}
+], K = new Map(G.map((e) => [e.value, e.label]));
+function q(e) {
+	return Math.round(e * 1e6) / 1e6;
+}
+function se(e) {
+	let t = Math.abs(e);
+	return t >= 1e3 || t >= 1 ? e.toFixed(2) : e.toPrecision(4);
+}
+var ce = class {
+	el;
+	listEl;
+	priceInput;
+	conditionSelect;
+	sourceSelect;
+	messageInput;
+	emptyEl;
+	callbacks;
+	open = !1;
+	alerts = [];
+	sources = [{
+		channel: "price",
+		label: "Price"
+	}];
+	constructor(e, t) {
+		this.callbacks = t, this.el = document.createElement("div"), this.el.className = "tcw-alerts-panel", this.el.hidden = !0;
+		let n = document.createElement("div");
+		n.className = "tcw-alerts-header";
+		let r = document.createElement("span");
+		r.textContent = "Price Alerts";
+		let i = document.createElement("button");
+		i.className = "tcw-alerts-close", i.type = "button", i.setAttribute("aria-label", "Close alerts"), i.innerHTML = y("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n);
+		let a = document.createElement("form");
+		a.className = "tcw-alerts-form", this.sourceSelect = document.createElement("select"), this.sourceSelect.className = "tcw-alerts-source", this.sourceSelect.addEventListener("change", () => this.prefillPrice()), this.priceInput = document.createElement("input"), this.priceInput.type = "number", this.priceInput.step = "any", this.priceInput.placeholder = "Value", this.priceInput.className = "tcw-alerts-price", this.priceInput.required = !0, this.conditionSelect = document.createElement("select"), this.conditionSelect.className = "tcw-alerts-condition";
+		for (let e of G) {
+			let t = document.createElement("option");
+			t.value = e.value, t.textContent = e.label, this.conditionSelect.appendChild(t);
+		}
+		this.messageInput = document.createElement("input"), this.messageInput.type = "text", this.messageInput.placeholder = "Note (optional)", this.messageInput.className = "tcw-alerts-message";
+		let o = document.createElement("button");
+		o.type = "submit", o.className = "tcw-alerts-add", o.innerHTML = `${y("plus", 14)}<span>Add alert</span>`, a.appendChild(this.sourceSelect), a.appendChild(this.priceInput), a.appendChild(this.conditionSelect), a.appendChild(this.messageInput), a.appendChild(o), a.addEventListener("submit", (e) => {
+			e.preventDefault(), this.submitForm();
+		}), this.el.appendChild(a), this.listEl = document.createElement("div"), this.listEl.className = "tcw-alerts-list", this.el.appendChild(this.listEl), this.emptyEl = document.createElement("div"), this.emptyEl.className = "tcw-alerts-empty", this.emptyEl.textContent = "No alerts yet. Add one above, or right-click the chart.", this.listEl.appendChild(this.emptyEl), this.renderSources(), e.appendChild(this.el);
+	}
+	setSources(e) {
+		this.sources = e.length > 0 ? e : [{
+			channel: "price",
+			label: "Price"
+		}], this.renderSources();
+	}
+	renderSources() {
+		let e = this.sourceSelect.value || "price";
+		this.sourceSelect.replaceChildren();
+		for (let e of this.sources) {
+			let t = document.createElement("option");
+			t.value = e.channel, t.textContent = e.label, this.sourceSelect.appendChild(t);
+		}
+		this.sourceSelect.value = this.sources.some((t) => t.channel === e) ? e : "price";
+	}
+	isOpen() {
+		return this.open;
+	}
+	toggle() {
+		this.open ? this.close() : this.openPanel();
+	}
+	openPanel() {
+		this.open = !0, this.el.hidden = !1, this.priceInput.value === "" && this.prefillPrice();
+	}
+	prefillPrice() {
+		let e = this.callbacks.getChannelValue(this.sourceSelect.value || "price");
+		this.priceInput.value = e === null ? "" : String(q(e));
+	}
+	close() {
+		this.open = !1, this.el.hidden = !0;
+	}
+	setAlerts(e) {
+		this.alerts = e, this.renderList();
+	}
+	destroy() {
+		this.el.remove();
+	}
+	submitForm() {
+		let e = Number(this.priceInput.value);
+		if (!Number.isFinite(e)) return;
+		let t = this.conditionSelect.value, n = this.messageInput.value.trim() || void 0, r = this.sourceSelect.value || "price", i = this.sources.find((e) => e.channel === r)?.label ?? "Price";
+		this.callbacks.onAdd(e, t, n, r, i), this.messageInput.value = "", this.prefillPrice();
+	}
+	renderList() {
+		if (this.listEl.replaceChildren(), this.alerts.length === 0) {
+			this.listEl.appendChild(this.emptyEl);
+			return;
+		}
+		for (let e of [...this.alerts].reverse()) {
+			let t = document.createElement("div");
+			t.className = "tcw-alerts-row" + (e.triggered ? " tcw-alerts-triggered" : "");
+			let n = document.createElement("div");
+			n.className = "tcw-alerts-info";
+			let r = document.createElement("div");
+			r.className = "tcw-alerts-row-main";
+			let i = K.get(e.condition) ?? e.condition, a = e.channel && e.channel !== "price", o = a ? se(e.price) : this.callbacks.formatPrice(e.price);
+			if (r.textContent = `${a && e.label ? `${e.label} ` : ""}${i} ${o}`, n.appendChild(r), e.message) {
+				let t = document.createElement("div");
+				t.className = "tcw-alerts-row-note", t.textContent = e.message, n.appendChild(t);
+			}
+			if (e.triggered) {
+				let e = document.createElement("span");
+				e.className = "tcw-alerts-badge", e.textContent = "triggered", r.appendChild(e);
+			}
+			let s = document.createElement("button");
+			s.type = "button", s.className = "tcw-alerts-del", s.setAttribute("aria-label", "Delete alert"), s.innerHTML = y("trash", 14), s.addEventListener("click", () => this.callbacks.onRemove(e.id)), t.appendChild(n), t.appendChild(s), this.listEl.appendChild(t);
+		}
+	}
+}, le = class {
+	el;
+	indicatorsEl;
+	drawingsEl;
+	compareEl = null;
+	callbacks;
+	open = !1;
+	constructor(e, t) {
+		this.callbacks = t, this.el = document.createElement("div"), this.el.className = "tcw-tree-panel", this.el.hidden = !0;
+		let n = document.createElement("div");
+		n.className = "tcw-tree-header";
+		let r = document.createElement("span");
+		r.textContent = "Objects";
+		let i = document.createElement("button");
+		i.type = "button", i.className = "tcw-tree-close", i.setAttribute("aria-label", "Close objects"), i.innerHTML = y("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n), this.indicatorsEl = this.makeSection("Indicators"), this.drawingsEl = this.makeSection("Drawings"), this.callbacks.onAddCompare && (this.compareEl = this.makeSection("Compare", () => this.callbacks.onAddCompare?.())), e.appendChild(this.el);
+	}
+	isOpen() {
+		return this.open;
+	}
+	toggle() {
+		this.open ? this.close() : this.openPanel();
+	}
+	openPanel() {
+		this.open = !0, this.el.hidden = !1;
+	}
+	close() {
+		this.open = !1, this.el.hidden = !0;
+	}
+	destroy() {
+		this.el.remove();
+	}
+	setObjects(e, t, n = []) {
+		this.renderIndicators(e), this.renderDrawings(t), this.renderCompares(n);
+	}
+	makeSection(e, t) {
+		let n = document.createElement("div");
+		n.className = "tcw-tree-section";
+		let r = document.createElement("div");
+		r.className = "tcw-tree-section-head";
+		let i = document.createElement("span");
+		if (i.textContent = e, r.appendChild(i), t) {
+			let n = document.createElement("button");
+			n.type = "button", n.className = "tcw-tree-add", n.setAttribute("aria-label", `Add ${e.toLowerCase()}`), n.title = `Add ${e.toLowerCase()}`, n.innerHTML = y("plus", 13), n.addEventListener("click", t), r.appendChild(n);
+		}
+		let a = document.createElement("div");
+		return a.className = "tcw-tree-list", n.appendChild(r), n.appendChild(a), this.el.appendChild(n), a;
+	}
+	renderIndicators(e) {
+		if (this.indicatorsEl.replaceChildren(), e.length === 0) {
+			this.indicatorsEl.appendChild(this.emptyRow("No indicators"));
+			return;
+		}
+		for (let t of e) {
+			let e = this.row(t.name);
+			t.visible || e.classList.add("tcw-tree-hidden");
+			let n = document.createElement("div");
+			n.className = "tcw-tree-actions", this.callbacks.onToggleIndicatorVisible && n.appendChild(this.iconButton(t.visible ? "eye" : "eyeOff", t.visible ? "Hide" : "Show", "", () => this.callbacks.onToggleIndicatorVisible?.(t.instanceId, !t.visible))), this.callbacks.onConfigureIndicator && n.appendChild(this.iconButton("settings", "Indicator settings", "", () => this.callbacks.onConfigureIndicator?.(t.instanceId))), n.appendChild(this.iconButton("trash", "Remove indicator", "tcw-tree-del", () => this.callbacks.onRemoveIndicator(t.instanceId))), e.appendChild(n), this.indicatorsEl.appendChild(e);
+		}
+	}
+	renderDrawings(e) {
+		if (this.drawingsEl.replaceChildren(), e.length === 0) {
+			this.drawingsEl.appendChild(this.emptyRow("No drawings"));
+			return;
+		}
+		for (let t of e) {
+			let e = this.row(t.label);
+			t.visible || e.classList.add("tcw-tree-hidden");
+			let n = document.createElement("div");
+			n.className = "tcw-tree-actions", n.appendChild(this.iconButton(t.visible ? "eye" : "eyeOff", t.visible ? "Hide" : "Show", "", () => this.callbacks.onToggleDrawingVisible(t.id, !t.visible))), n.appendChild(this.iconButton(t.locked ? "lock" : "unlock", t.locked ? "Unlock" : "Lock", t.locked ? "tcw-tree-on" : "", () => this.callbacks.onToggleDrawingLocked(t.id, !t.locked))), n.appendChild(this.iconButton("trash", "Remove drawing", "tcw-tree-del", () => this.callbacks.onRemoveDrawing(t.id))), e.appendChild(n), this.drawingsEl.appendChild(e);
+		}
+	}
+	renderCompares(e) {
+		if (this.compareEl) {
+			if (this.compareEl.replaceChildren(), e.length === 0) {
+				this.compareEl.appendChild(this.emptyRow("No comparisons"));
+				return;
+			}
+			for (let t of e) {
+				let e = this.row(t.label), n = document.createElement("span");
+				n.className = "tcw-tree-dot", n.style.background = t.color, e.insertBefore(n, e.firstChild), this.callbacks.onRemoveCompare && e.appendChild(this.iconButton("trash", "Remove comparison", "tcw-tree-del", () => this.callbacks.onRemoveCompare?.(t.id))), this.compareEl.appendChild(e);
+			}
+		}
+	}
+	row(e) {
+		let t = document.createElement("div");
+		t.className = "tcw-tree-row";
+		let n = document.createElement("span");
+		return n.className = "tcw-tree-name", n.textContent = e, n.title = e, t.appendChild(n), t;
+	}
+	emptyRow(e) {
+		let t = document.createElement("div");
+		return t.className = "tcw-tree-empty", t.textContent = e, t;
+	}
+	iconButton(e, t, n, r) {
+		let i = document.createElement("button");
+		return i.type = "button", i.className = `tcw-tree-btn ${n}`.trim(), i.setAttribute("aria-label", t), i.title = t, i.innerHTML = y(e, 14), i.addEventListener("click", r), i;
+	}
+}, ue = {
+	trendLine: "Trend Line",
+	ray: "Ray",
+	extendedLine: "Extended Line",
+	horizontalLine: "Horizontal Line",
+	verticalLine: "Vertical Line",
+	rectangle: "Rectangle",
+	ellipse: "Ellipse",
+	triangle: "Triangle",
+	arrow: "Arrow",
+	parallelChannel: "Parallel Channel",
+	regressionChannel: "Regression Channel",
+	pitchfork: "Pitchfork",
+	fibRetracement: "Fib Retracement",
+	fibExtension: "Fib Extension",
+	fibTimeZones: "Fib Time Zones",
+	gannBox: "Gann Box",
+	gannFan: "Gann Fan",
+	elliottWave: "Elliott Wave",
+	priceRange: "Price Range",
+	dateRange: "Date Range",
+	measure: "Measure",
+	textAnnotation: "Text",
+	anchoredVWAP: "Anchored VWAP",
+	volumeProfileRange: "Volume Profile"
+};
+function de(e) {
+	return ue[e] ?? e;
+}
+//#endregion
+//#region src/widget/WidgetIndicatorSettings.ts
+var fe = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function pe(e) {
+	return e.replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/^./, (e) => e.toUpperCase());
+}
+var me = class {
+	backdrop;
+	modal;
+	bodyEl;
+	titleEl;
+	callbacks;
+	target = null;
+	draft = {};
+	constructor(e, t) {
+		this.callbacks = t, this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.hidden = !0, this.backdrop.addEventListener("click", (e) => {
+			e.target === this.backdrop && this.close();
+		}), this.modal = document.createElement("div"), this.modal.className = "tcw-modal tcw-modal-narrow";
+		let n = document.createElement("div");
+		n.className = "tcw-modal-header", this.titleEl = document.createElement("h3"), this.titleEl.textContent = "Indicator";
+		let r = document.createElement("button");
+		r.className = "tcw-modal-close", r.setAttribute("aria-label", "Close"), r.innerHTML = y("x", 16), r.addEventListener("click", () => this.close()), n.appendChild(this.titleEl), n.appendChild(r), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-modal-body";
+		let i = document.createElement("div");
+		i.className = "tcw-modal-footer";
+		let a = document.createElement("button");
+		a.className = "tcw-reset-link", a.textContent = "Reset to defaults", a.addEventListener("click", () => this.resetDefaults());
+		let o = document.createElement("button");
+		o.className = "tcw-done-btn", o.textContent = "Done", o.addEventListener("click", () => this.close()), i.appendChild(a), i.appendChild(o), this.modal.appendChild(n), this.modal.appendChild(this.bodyEl), this.modal.appendChild(i), this.backdrop.appendChild(this.modal), e.appendChild(this.backdrop);
+	}
+	open(e) {
+		this.target = e, this.titleEl.textContent = `${e.name} settings`, this.draft = {}, this.renderFields(), this.backdrop.hidden = !1;
+	}
+	close() {
+		this.backdrop.hidden = !0, this.target = null, this.callbacks.onClose();
+	}
+	isOpen() {
+		return !this.backdrop.hidden;
+	}
+	destroy() {
+		this.backdrop.remove();
+	}
+	currentValue(e) {
+		if (e in this.draft) return this.draft[e];
+		let t = this.target?.params[e], n = this.target?.defaults[e];
+		return t ?? n;
+	}
+	setValue(e, t) {
+		this.target && (this.draft[e] = t, this.callbacks.onApply(this.target.instanceId, { ...this.draft }));
+	}
+	resetDefaults() {
+		if (!this.target) return;
+		let e = {};
+		for (let [t, n] of Object.entries(this.target.defaults)) e[t] = n;
+		this.draft = e, this.callbacks.onApply(this.target.instanceId, { ...e }), this.renderFields();
+	}
+	renderFields() {
+		if (this.bodyEl.replaceChildren(), !this.target) return;
+		let e = document.createElement("div");
+		e.className = "tcw-settings-section";
+		let t = Object.keys(this.target.defaults);
+		if (t.length === 0) {
+			let t = document.createElement("div");
+			t.className = "tcw-settings-label", t.textContent = "This indicator has no adjustable parameters.", e.appendChild(t);
+		}
+		for (let n of t) e.appendChild(this.fieldRow(n));
+		this.bodyEl.appendChild(e);
+	}
+	fieldRow(e) {
+		let t = document.createElement("div");
+		t.className = "tcw-settings-row";
+		let n = document.createElement("span");
+		n.className = "tcw-settings-label", n.textContent = pe(e), t.appendChild(n);
+		let r = this.currentValue(e), i = typeof (this.target?.defaults[e] ?? r);
+		return i === "boolean" ? t.appendChild(this.toggleControl(e, !!r)) : i === "number" ? t.appendChild(this.numberControl(e, Number(r))) : typeof r == "string" && fe.test(r) ? t.appendChild(this.colorControl(e, r)) : t.appendChild(this.textControl(e, String(r ?? ""))), t;
+	}
+	toggleControl(e, t) {
+		let n = document.createElement("button");
+		return n.className = `tcw-toggle${t ? " tcw-on" : ""}`, n.type = "button", n.addEventListener("click", () => {
+			let t = !n.classList.contains("tcw-on");
+			n.classList.toggle("tcw-on", t), this.setValue(e, t);
+		}), n;
+	}
+	numberControl(e, t) {
+		let n = document.createElement("input");
+		return n.type = "number", n.className = "tcw-indi-input", n.value = String(t), n.step = Number.isInteger(t) ? "1" : "0.1", n.addEventListener("change", () => {
+			let t = Number(n.value);
+			Number.isFinite(t) && this.setValue(e, t);
+		}), n;
+	}
+	colorControl(e, t) {
+		let n = document.createElement("input");
+		return n.type = "color", n.className = "tcw-indi-color", n.value = t.length === 4 ? he(t) : t, n.addEventListener("input", () => this.setValue(e, n.value)), n;
+	}
+	textControl(e, t) {
+		let n = document.createElement("input");
+		return n.type = "text", n.className = "tcw-indi-input", n.value = t, n.addEventListener("change", () => this.setValue(e, n.value)), n;
+	}
+};
+function he(e) {
+	let t = e[1], n = e[2], r = e[3];
+	return `#${t}${t}${n}${n}${r}${r}`;
+}
+//#endregion
+//#region src/widget/DrawingTemplateStore.ts
+function ge() {
+	try {
+		return typeof localStorage < "u" ? localStorage : null;
+	} catch {
+		return null;
+	}
+}
+var _e = [
+	"color",
+	"lineWidth",
+	"lineStyle",
+	"fillColor",
+	"fillOpacity",
+	"fontSize"
+];
+function J(e) {
+	if (!e || typeof e != "object") return {};
+	let t = {}, n = e;
+	for (let e of _e) n[e] !== void 0 && (t[e] = n[e]);
+	return t;
+}
+var ve = class {
+	templates = [];
+	constructor(e = "tcw:draw-templates", t = ge()) {
+		this.storageKey = e, this.storage = t, this.load();
+	}
+	list() {
+		return this.templates.map((e) => ({
+			name: e.name,
+			style: { ...e.style }
+		}));
+	}
+	get(e) {
+		let t = this.templates.find((t) => t.name === e);
+		return t ? {
+			name: t.name,
+			style: { ...t.style }
+		} : null;
+	}
+	save(e, t) {
+		let n = e.trim();
+		if (!n) return;
+		let r = J(t);
+		this.templates = this.templates.filter((e) => e.name !== n), this.templates.push({
+			name: n,
+			style: r
+		}), this.persist();
+	}
+	remove(e) {
+		let t = this.templates.filter((t) => t.name !== e);
+		t.length !== this.templates.length && (this.templates = t, this.persist());
+	}
+	clear() {
+		this.templates = [], this.persist();
+	}
+	load() {
+		if (this.storage) try {
+			let e = this.storage.getItem(this.storageKey);
+			if (!e) return;
+			let t = JSON.parse(e);
+			if (!Array.isArray(t)) return;
+			this.templates = t.filter((e) => e && typeof e.name == "string").map((e) => ({
+				name: e.name,
+				style: J(e.style)
+			}));
+		} catch {}
+	}
+	persist() {
+		if (this.storage) try {
+			this.storage.setItem(this.storageKey, JSON.stringify(this.templates));
+		} catch {}
+	}
+}, ye = [
+	"#2962ff",
+	"#089981",
+	"#f23645",
+	"#ff9800",
+	"#ab47bc",
+	"#26c6da",
+	"#ffffff",
+	"#787b86"
+], be = [
+	1,
+	2,
+	3,
+	4
+], xe = [
+	"solid",
+	"dashed",
+	"dotted"
+], Se = class {
+	el;
+	templatesEl;
+	nameInput;
+	callbacks;
+	store;
+	open = !1;
+	constructor(e, t, n) {
+		this.callbacks = t, this.store = n, this.el = document.createElement("div"), this.el.className = "tcw-style-panel", this.el.hidden = !0;
+		let r = document.createElement("div");
+		r.className = "tcw-style-header";
+		let i = document.createElement("span");
+		i.textContent = "Drawing Style";
+		let a = document.createElement("button");
+		a.type = "button", a.className = "tcw-style-close", a.setAttribute("aria-label", "Close"), a.innerHTML = y("x", 14), a.addEventListener("click", () => this.close()), r.appendChild(i), r.appendChild(a), this.el.appendChild(r), this.el.appendChild(this.colorRow()), this.el.appendChild(this.widthRow()), this.el.appendChild(this.lineStyleRow());
+		let o = document.createElement("div");
+		o.className = "tcw-style-subhead", o.textContent = "Templates", this.el.appendChild(o);
+		let s = document.createElement("div");
+		s.className = "tcw-style-save", this.nameInput = document.createElement("input"), this.nameInput.type = "text", this.nameInput.placeholder = "Template name", this.nameInput.className = "tcw-style-name";
+		let c = document.createElement("button");
+		c.type = "button", c.className = "tcw-style-savebtn", c.innerHTML = `${y("plus", 13)}<span>Save</span>`, c.addEventListener("click", () => this.saveTemplate()), s.appendChild(this.nameInput), s.appendChild(c), this.el.appendChild(s), this.templatesEl = document.createElement("div"), this.templatesEl.className = "tcw-style-templates", this.el.appendChild(this.templatesEl), e.appendChild(this.el), this.renderTemplates();
+	}
+	isOpen() {
+		return this.open;
+	}
+	toggle() {
+		this.open ? this.close() : this.openPanel();
+	}
+	openPanel() {
+		this.open = !0, this.el.hidden = !1, this.syncActiveControls(), this.renderTemplates();
+	}
+	close() {
+		this.open = !1, this.el.hidden = !0;
+	}
+	destroy() {
+		this.el.remove();
+	}
+	colorRow() {
+		let e = document.createElement("div");
+		e.className = "tcw-style-row tcw-style-colors";
+		for (let t of ye) {
+			let n = document.createElement("button");
+			n.type = "button", n.className = "tcw-style-swatch", n.style.background = t, n.dataset.color = t, n.setAttribute("aria-label", t), n.addEventListener("click", () => this.applyStyle({ color: t })), e.appendChild(n);
+		}
+		let t = document.createElement("input");
+		return t.type = "color", t.className = "tcw-style-picker", t.addEventListener("input", () => this.applyStyle({ color: t.value })), e.appendChild(t), e;
+	}
+	widthRow() {
+		let e = document.createElement("div");
+		e.className = "tcw-style-row tcw-style-widths";
+		for (let t of be) {
+			let n = document.createElement("button");
+			n.type = "button", n.className = "tcw-style-width", n.dataset.width = String(t);
+			let r = document.createElement("span");
+			r.style.height = `${t}px`, n.appendChild(r), n.addEventListener("click", () => this.applyStyle({ lineWidth: t })), e.appendChild(n);
+		}
+		return e;
+	}
+	lineStyleRow() {
+		let e = document.createElement("div");
+		e.className = "tcw-style-row tcw-style-dashes";
+		for (let t of xe) {
+			let n = document.createElement("button");
+			n.type = "button", n.className = "tcw-style-dash", n.dataset.linestyle = t, n.textContent = t === "solid" ? "──" : t === "dashed" ? "╌╌" : "┄┄", n.title = t, n.addEventListener("click", () => this.applyStyle({ lineStyle: t })), e.appendChild(n);
+		}
+		return e;
+	}
+	applyStyle(e) {
+		this.callbacks.onStyleChange(e), this.syncActiveControls();
+	}
+	syncActiveControls() {
+		let e = this.callbacks.getStyle();
+		this.el.querySelectorAll(".tcw-style-swatch").forEach((t) => {
+			t.classList.toggle("tcw-on", t.dataset.color?.toLowerCase() === e.color?.toLowerCase());
+		}), this.el.querySelectorAll(".tcw-style-width").forEach((t) => {
+			t.classList.toggle("tcw-on", Number(t.dataset.width) === e.lineWidth);
+		}), this.el.querySelectorAll(".tcw-style-dash").forEach((t) => {
+			t.classList.toggle("tcw-on", t.dataset.linestyle === e.lineStyle);
+		});
+	}
+	saveTemplate() {
+		let e = this.nameInput.value.trim();
+		e && (this.store.save(e, this.callbacks.getStyle()), this.nameInput.value = "", this.renderTemplates());
+	}
+	renderTemplates() {
+		this.templatesEl.replaceChildren();
+		let e = this.store.list();
+		if (e.length === 0) {
+			let e = document.createElement("div");
+			e.className = "tcw-style-empty", e.textContent = "No saved templates", this.templatesEl.appendChild(e);
+			return;
+		}
+		for (let t of e) {
+			let e = document.createElement("div");
+			e.className = "tcw-style-template";
+			let n = document.createElement("button");
+			n.type = "button", n.className = "tcw-style-apply";
+			let r = document.createElement("span");
+			r.className = "tcw-style-tdot", r.style.background = t.style.color ?? "var(--tcw-text-muted)";
+			let i = document.createElement("span");
+			i.textContent = t.name, n.appendChild(r), n.appendChild(i), n.addEventListener("click", () => {
+				this.callbacks.onStyleChange({ ...t.style }), this.syncActiveControls();
+			});
+			let a = document.createElement("button");
+			a.type = "button", a.className = "tcw-style-tdel", a.setAttribute("aria-label", "Delete template"), a.innerHTML = y("trash", 13), a.addEventListener("click", () => {
+				this.store.remove(t.name), this.renderTemplates();
+			}), e.appendChild(n), e.appendChild(a), this.templatesEl.appendChild(e);
+		}
+	}
+};
+//#endregion
+//#region src/widget/DrawingFavoritesStore.ts
+function Ce() {
+	try {
+		return typeof localStorage < "u" ? localStorage : null;
+	} catch {
+		return null;
+	}
+}
+var we = class {
+	favorites = [];
+	constructor(e = "tcw:draw-favorites", t = Ce()) {
+		this.storageKey = e, this.storage = t, this.load();
+	}
+	list() {
+		return [...this.favorites];
+	}
+	has(e) {
+		return this.favorites.includes(e);
+	}
+	add(e) {
+		!e || this.favorites.includes(e) || (this.favorites = [...this.favorites, e], this.persist());
+	}
+	remove(e) {
+		this.favorites.includes(e) && (this.favorites = this.favorites.filter((t) => t !== e), this.persist());
+	}
+	toggle(e) {
+		return this.has(e) ? (this.remove(e), !1) : (this.add(e), !0);
+	}
+	seedDefaults(e) {
+		this.favorites.length > 0 || (this.favorites = [...new Set(e.filter(Boolean))], this.persist());
+	}
+	load() {
+		if (this.storage) try {
+			let e = this.storage.getItem(this.storageKey);
+			if (!e) return;
+			let t = JSON.parse(e);
+			Array.isArray(t) && (this.favorites = [...new Set(t.filter((e) => typeof e == "string"))]);
+		} catch {}
+	}
+	persist() {
+		if (this.storage) try {
+			this.storage.setItem(this.storageKey, JSON.stringify(this.favorites));
+		} catch {}
+	}
+}, Te = class {
+	el;
+	labelEl;
+	callbacks;
+	visible = !1;
+	constructor(e, t) {
+		this.callbacks = t, this.el = document.createElement("div"), this.el.className = "tcw-bracket-bar", this.el.hidden = !0, this.labelEl = document.createElement("span"), this.labelEl.className = "tcw-bracket-label", this.el.appendChild(this.labelEl);
+		let n = document.createElement("span");
+		n.className = "tcw-bracket-hint", n.textContent = "drag lines to adjust", this.el.appendChild(n);
+		let r = document.createElement("button");
+		r.type = "button", r.className = "tcw-bracket-cancel", r.innerHTML = `${y("x", 14)}<span>Cancel</span>`, r.addEventListener("click", () => this.callbacks.onCancel());
+		let i = document.createElement("button");
+		i.type = "button", i.className = "tcw-bracket-confirm", i.innerHTML = `${y("check", 14)}<span>Place</span>`, i.addEventListener("click", () => this.callbacks.onConfirm()), this.el.appendChild(r), this.el.appendChild(i), e.appendChild(this.el);
+	}
+	show(e) {
+		this.visible = !0, this.labelEl.textContent = e === "buy" ? "Long bracket" : "Short bracket", this.labelEl.dataset.side = e, this.el.hidden = !1;
+	}
+	hide() {
+		this.visible = !1, this.el.hidden = !0;
+	}
+	isVisible() {
+		return this.visible;
+	}
+	destroy() {
+		this.el.remove();
+	}
+}, Ee = class {
+	options;
+	audioCtx = null;
+	audioEl = null;
+	permissionAsked = !1;
+	constructor(e = {}) {
+		if (this.options = e, typeof e.sound == "string") try {
+			this.audioEl = new Audio(e.sound), this.audioEl.preload = "auto";
+		} catch {
+			this.audioEl = null;
+		}
+		e.desktop && this.ensurePermission();
+	}
+	setOptions(e) {
+		this.options = {
+			...this.options,
+			...e
+		};
+	}
+	notify(e) {
+		this.options.sound && this.playSound(), this.options.desktop && this.showDesktop(e);
+	}
+	playSound() {
+		if (this.audioEl) {
+			this.audioEl.currentTime = 0, this.audioEl.play().catch(() => {});
+			return;
+		}
+		this.beep();
+	}
+	beep() {
+		try {
+			let e = window.AudioContext ?? window.webkitAudioContext;
+			if (!e) return;
+			this.audioCtx ||= new e();
+			let t = this.audioCtx, n = t.currentTime, r = t.createGain();
+			r.gain.setValueAtTime(1e-4, n), r.gain.exponentialRampToValueAtTime(.2, n + .01), r.gain.exponentialRampToValueAtTime(1e-4, n + .35), r.connect(t.destination);
+			let i = t.createOscillator();
+			i.type = "sine", i.frequency.setValueAtTime(880, n), i.frequency.setValueAtTime(1320, n + .16), i.connect(r), i.start(n), i.stop(n + .36);
+		} catch {}
+	}
+	ensurePermission() {
+		this.permissionAsked || (this.permissionAsked = !0, !(typeof Notification > "u") && Notification.permission === "default" && Notification.requestPermission().catch(() => {}));
+	}
+	showDesktop(e) {
+		if (!(typeof Notification > "u")) {
+			if (Notification.permission !== "granted") {
+				this.ensurePermission();
+				return;
+			}
+			try {
+				new Notification(this.options.title ?? "Price alert", { body: e });
+			} catch {}
+		}
 	}
-	handleSymbolClick() {
-		this.symbolIndex = (this.symbolIndex + 1) % this.symbols.length;
-		let e = this.symbols[this.symbolIndex];
+	destroy() {
+		try {
+			this.audioCtx?.close();
+		} catch {}
+		this.audioCtx = null, this.audioEl = null;
+	}
+};
+//#endregion
+//#region src/widget/ladderRows.ts
+function De(e, t = 12) {
+	let n = [...e.asks].sort((e, t) => e.price - t.price).slice(0, t), r = [...e.bids].sort((e, t) => t.price - e.price).slice(0, t), i = n.length > 0 ? n[0].price : null, a = r.length > 0 ? r[0].price : null, o = i !== null && a !== null ? (i + a) / 2 : null, s = /* @__PURE__ */ new Map(), c = (e) => {
+		let t = s.get(e);
+		return t || (t = {
+			price: e,
+			bidVolume: 0,
+			askVolume: 0
+		}, s.set(e, t)), t;
+	};
+	for (let e of n) c(e.price).askVolume += e.volume;
+	for (let e of r) c(e.price).bidVolume += e.volume;
+	let l = [...s.values()].sort((e, t) => t.price - e.price), u = 0;
+	for (let e of l) u = Math.max(u, e.bidVolume, e.askVolume);
+	return {
+		rows: l,
+		maxVolume: u,
+		mid: o
+	};
+}
+//#endregion
+//#region src/widget/WidgetDepthLadder.ts
+var Oe = class {
+	el;
+	bodyEl;
+	callbacks;
+	open = !1;
+	levels;
+	constructor(e, t, n = 12) {
+		this.callbacks = t, this.levels = n, this.el = document.createElement("div"), this.el.className = "tcw-ladder", this.el.hidden = !0;
+		let r = document.createElement("div");
+		r.className = "tcw-ladder-header";
+		let i = document.createElement("span");
+		i.textContent = "Depth Ladder";
+		let a = document.createElement("button");
+		a.type = "button", a.className = "tcw-ladder-close", a.setAttribute("aria-label", "Close"), a.innerHTML = y("x", 14), a.addEventListener("click", () => this.close()), r.appendChild(i), r.appendChild(a), this.el.appendChild(r);
+		let o = document.createElement("div");
+		o.className = "tcw-ladder-cols", o.innerHTML = "<span>Bid</span><span>Price</span><span>Ask</span>", this.el.appendChild(o), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-ladder-body", this.el.appendChild(this.bodyEl), e.appendChild(this.el);
+	}
+	isOpen() {
+		return this.open;
+	}
+	toggle() {
+		this.open ? this.close() : this.openPanel();
+	}
+	openPanel() {
+		this.open = !0, this.el.hidden = !1;
+	}
+	close() {
+		this.open = !1, this.el.hidden = !0;
+	}
+	setData(e) {
+		if (!e) {
+			this.renderEmpty();
+			return;
+		}
+		this.render(De(e, this.levels));
+	}
+	destroy() {
+		this.el.remove();
+	}
+	renderEmpty() {
+		this.bodyEl.replaceChildren();
+		let e = document.createElement("div");
+		e.className = "tcw-ladder-empty", e.textContent = "No order-book data", this.bodyEl.appendChild(e);
+	}
+	render(e) {
+		if (this.bodyEl.replaceChildren(), e.rows.length === 0) {
+			this.renderEmpty();
+			return;
+		}
+		let t = e.maxVolume > 0 ? 1 / e.maxVolume : 0;
+		for (let n of e.rows) {
+			let e = n.askVolume > 0, r = document.createElement("div");
+			r.className = "tcw-ladder-row";
+			let i = document.createElement("button");
+			i.type = "button", i.className = "tcw-ladder-cell tcw-ladder-bid", n.bidVolume > 0 ? (i.textContent = Y(n.bidVolume), i.style.setProperty("--w", `${(n.bidVolume * t * 100).toFixed(1)}%`), i.title = `Sell @ ${this.callbacks.formatPrice(n.price)}`, i.addEventListener("click", () => this.callbacks.onTrade("sell", n.price))) : i.disabled = !0;
+			let a = document.createElement("div");
+			a.className = `tcw-ladder-price ${e ? "tcw-ask" : "tcw-bid"}`, a.textContent = this.callbacks.formatPrice(n.price);
+			let o = document.createElement("button");
+			o.type = "button", o.className = "tcw-ladder-cell tcw-ladder-ask", n.askVolume > 0 ? (o.textContent = Y(n.askVolume), o.style.setProperty("--w", `${(n.askVolume * t * 100).toFixed(1)}%`), o.title = `Buy @ ${this.callbacks.formatPrice(n.price)}`, o.addEventListener("click", () => this.callbacks.onTrade("buy", n.price))) : o.disabled = !0, r.appendChild(i), r.appendChild(a), r.appendChild(o), this.bodyEl.appendChild(r);
+		}
+	}
+};
+function Y(e) {
+	return e >= 1e3 ? (e / 1e3).toFixed(1) + "k" : e >= 1 ? e.toFixed(2).replace(/\.00$/, "") : e.toPrecision(2);
+}
+//#endregion
+//#region src/widget/WidgetDataWindow.ts
+var ke = class {
+	el;
+	bodyEl;
+	callbacks;
+	open = !1;
+	constructor(e, t) {
+		this.callbacks = t, this.el = document.createElement("div"), this.el.className = "tcw-datawin", this.el.hidden = !0;
+		let n = document.createElement("div");
+		n.className = "tcw-datawin-header";
+		let r = document.createElement("span");
+		r.textContent = "Data Window";
+		let i = document.createElement("button");
+		i.type = "button", i.className = "tcw-datawin-close", i.setAttribute("aria-label", "Close"), i.innerHTML = y("x", 14), i.addEventListener("click", () => this.close()), n.appendChild(r), n.appendChild(i), this.el.appendChild(n), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-datawin-body", this.el.appendChild(this.bodyEl), e.appendChild(this.el);
+	}
+	isOpen() {
+		return this.open;
+	}
+	toggle() {
+		this.open ? this.close() : this.openPanel();
+	}
+	openPanel() {
+		this.open = !0, this.el.hidden = !1;
+	}
+	close() {
+		this.open = !1, this.el.hidden = !0;
+	}
+	destroy() {
+		this.el.remove();
+	}
+	render(e) {
+		if (!this.open) return;
+		if (this.bodyEl.replaceChildren(), !e.ohlc) {
+			let e = document.createElement("div");
+			e.className = "tcw-datawin-empty", e.textContent = "Hover the chart", this.bodyEl.appendChild(e);
+			return;
+		}
+		let t = this.callbacks.formatPrice, n = e.ohlc;
+		this.bodyEl.appendChild(this.row("Open", t(n.open))), this.bodyEl.appendChild(this.row("High", t(n.high))), this.bodyEl.appendChild(this.row("Low", t(n.low))), this.bodyEl.appendChild(this.row("Close", t(n.close)));
+		let r = e.change > 0 ? "up" : e.change < 0 ? "down" : "", i = e.change > 0 ? "+" : "";
+		this.bodyEl.appendChild(this.row("Change", `${i}${t(e.change)} (${i}${e.changePct.toFixed(2)}%)`, r)), this.bodyEl.appendChild(this.row("Volume", X(n.volume)));
+		for (let t of e.indicators) {
+			let e = document.createElement("div");
+			e.className = "tcw-datawin-sub", e.textContent = t.name, this.bodyEl.appendChild(e);
+			for (let e of t.values) this.bodyEl.appendChild(this.row(e.key, Ae(e.value)));
+		}
+	}
+	row(e, t, n = "") {
+		let r = document.createElement("div");
+		r.className = "tcw-datawin-row";
+		let i = document.createElement("span");
+		i.className = "tcw-datawin-label", i.textContent = e;
+		let a = document.createElement("span");
+		return a.className = `tcw-datawin-value${n ? ` tcw-${n}` : ""}`, a.textContent = t, r.appendChild(i), r.appendChild(a), r;
+	}
+};
+function Ae(e) {
+	if (!Number.isFinite(e)) return "—";
+	let t = Math.abs(e);
+	return t >= 1e3 ? e.toFixed(2) : t >= 1 ? e.toFixed(4) : e.toPrecision(4);
+}
+function X(e) {
+	return e >= 1e9 ? (e / 1e9).toFixed(2) + "B" : e >= 1e6 ? (e / 1e6).toFixed(2) + "M" : e >= 1e3 ? (e / 1e3).toFixed(2) + "K" : e.toFixed(0);
+}
+//#endregion
+//#region src/widget/widgetShareState.ts
+var Z = globalThis.Buffer;
+function je(e) {
+	if (Z) return Z.from(e, "utf8").toString("base64");
+	let t = new TextEncoder().encode(e), n = "";
+	for (let e of t) n += String.fromCharCode(e);
+	return btoa(n);
+}
+function Me(e) {
+	if (Z) return Z.from(e, "base64").toString("utf8");
+	let t = atob(e), n = new Uint8Array(t.length);
+	for (let e = 0; e < t.length; e++) n[e] = t.charCodeAt(e);
+	return new TextDecoder().decode(n);
+}
+function Ne(e) {
+	return e.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function Pe(e) {
+	let t = e.replace(/-/g, "+").replace(/_/g, "/");
+	return t + (t.length % 4 == 0 ? "" : "=".repeat(4 - t.length % 4));
+}
+function Fe(e) {
+	return Ne(je(JSON.stringify(e)));
+}
+function Ie(e) {
+	if (!e) return null;
+	try {
+		let t = Me(Pe(e)), n = JSON.parse(t);
+		return !n || n.v !== 1 || typeof n.symbol != "string" ? null : {
+			v: 1,
+			symbol: n.symbol,
+			timeframe: n.timeframe,
+			chartType: n.chartType,
+			scaleMode: n.scaleMode ?? "regular",
+			indicators: Array.isArray(n.indicators) ? n.indicators : [],
+			drawings: Array.isArray(n.drawings) ? n.drawings : []
+		};
+	} catch {
+		return null;
+	}
+}
+var Q = "tcw";
+function Le(e) {
+	let t = e.startsWith("#") ? e.slice(1) : e;
+	for (let e of t.split("&")) {
+		let t = e.indexOf("=");
+		if (t > 0 && e.slice(0, t) === Q) return decodeURIComponent(e.slice(t + 1));
+	}
+	return null;
+}
+function Re(e, t) {
+	let [n] = e.split("#");
+	return `${n}#${Q}=${t}`;
+}
+//#endregion
+//#region src/widget/ChartWidget.ts
+var $ = [
+	"#f7931a",
+	"#627eea",
+	"#26a17b",
+	"#e84142",
+	"#8247e5",
+	"#f3ba2f"
+], ze = class {
+	chart;
+	state;
+	toolbar = null;
+	sidebar = null;
+	settings = null;
+	statusBar = null;
+	commandPalette = null;
+	symbolSearch = null;
+	hotkeySheet = null;
+	replayBar = null;
+	dragDrop = null;
+	alertsPanel = null;
+	objectTree = null;
+	indicatorSettings = null;
+	drawingStyle = null;
+	bracketBar = null;
+	alertNotifier = null;
+	depthLadder = null;
+	dataWindow = null;
+	lastHoverIndex = null;
+	favoritesStore = new we();
+	watchlist = null;
+	watchlistSparkBuffer = /* @__PURE__ */ new Map();
+	sessionRefPrice = null;
+	watchlistInterval = null;
+	replayOriginalData = null;
+	replayPollInterval = null;
+	replaySpeed = 5;
+	layoutKeyPrefix = null;
+	layoutDebounceMs = 1500;
+	activeLayoutKey = null;
+	root;
+	chartContainer;
+	destroyed = !1;
+	options;
+	symbols;
+	settingsState;
+	adapter = null;
+	boundGlobalKeydown = null;
+	baseSeries = null;
+	baseTimeframeMs = 0;
+	compares = [];
+	constructor(n, r = {}) {
+		if (this.options = r, this.symbols = r.symbols ?? ee, this.settingsState = { ...p }, r.persistLayouts) {
+			let e = r.persistLayouts === !0 ? {} : r.persistLayouts;
+			this.layoutKeyPrefix = e.keyPrefix ?? "tcw:layout:", this.layoutDebounceMs = e.debounceMs ?? 1500;
+		}
+		let i = this.resolveIsDark(r.theme), a = this.resolveTheme(r.theme);
 		this.state = {
+			symbol: r.symbol ?? this.symbols[0] ?? "BTCUSDT",
+			timeframe: r.timeframe ?? "5m",
+			chartType: r.chartOptions?.chartType ?? "candlestick",
+			isDark: i,
+			activeIndicators: /* @__PURE__ */ new Map(),
+			activeTool: null,
+			magnetEnabled: !0,
+			connectionState: "connecting",
+			connectionMessage: "Connecting..."
+		}, g(), this.root = document.createElement("div"), this.root.className = "tcw-root", this.root.dataset.tcwTheme = i ? "dark" : "light", n.appendChild(this.root), r.toolbar !== !1 && (this.toolbar = new ne(this.root, {
+			symbols: this.symbols,
+			timeframes: r.timeframes ? c.filter((e) => r.timeframes.includes(e.value)) : c,
+			chartTypes: r.chartTypes ? l.filter((e) => r.chartTypes.includes(e.value)) : l,
+			indicators: d,
+			popularIndicatorIds: f
+		}, {
+			onSymbolClick: () => this.handleSymbolClick(),
+			onTimeframe: (e) => this.handleTimeframe(e),
+			onChartType: (e) => this.handleChartType(e),
+			onAddIndicator: (e) => this.handleAddIndicator(e),
+			onRemoveIndicator: (e) => this.handleRemoveIndicator(e),
+			onScreenshot: () => this.chart.screenshot(),
+			onSettings: () => this.openSettings(),
+			onToggleTheme: () => this.handleToggleTheme(),
+			onToggleReplay: () => this.toggleReplay(),
+			onToggleAlerts: r.alerts === !1 ? void 0 : () => this.toggleAlerts(),
+			onToggleObjects: r.objectTree === !1 ? void 0 : () => this.toggleObjects(),
+			onBracket: r.trading === !1 ? void 0 : (e) => this.startBracket(e),
+			onToggleLadder: r.trading !== !1 && r.depthLadder ? () => this.depthLadder?.toggle() : void 0
+		}));
+		let o = document.createElement("div");
+		if (o.className = "tcw-body", r.drawingTools !== !1 && (r.drawingFavorites && this.favoritesStore.seedDefaults(r.drawingFavorites), this.sidebar = new x(o, {
+			drawingToolGroups: u,
+			favorites: this.favoritesStore.list()
+		}, {
+			onDrawingTool: (e) => this.handleDrawingTool(e),
+			onCancelDrawing: () => this.handleCancelDrawing(),
+			onToggleMagnet: () => this.handleToggleMagnet(),
+			onToggleFavorite: (e) => this.handleToggleFavorite(e),
+			onUndo: () => this.chart.undo(),
+			onRedo: () => this.chart.redo(),
+			onClearDrawings: () => {
+				this.chart.clearDrawings(), this.state = {
+					...this.state,
+					activeTool: null
+				}, this.updateUI();
+			},
+			onToggleStyle: () => this.drawingStyle?.toggle()
+		})), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", o.appendChild(this.chartContainer), r.watchlist && (this.watchlist = new V(o, this.symbols, { onSelect: (e) => {
+			this.setSymbol(e);
+		} }), this.watchlist.setActive(this.state.symbol)), this.root.appendChild(o), this.chart = new e(this.chartContainer, {
+			chartType: this.state.chartType,
+			theme: a,
+			autoScale: !0,
+			crosshair: { mode: "magnet" },
+			features: {
+				drawings: !0,
+				drawingMagnet: !0,
+				drawingUndoRedo: !0,
+				indicators: !0,
+				trading: r.trading !== !1,
+				tradingContextMenu: r.trading !== !1,
+				volume: !0,
+				legend: !0,
+				crosshair: !0,
+				keyboard: !0,
+				screenshot: !0,
+				alerts: !0,
+				barCountdown: !0,
+				logScale: !0,
+				watermark: !0
+			},
+			...r.chartOptions
+		}), r.dragDropImport !== !1 && (this.dragDrop = new t(this.chartContainer, {
+			onData: (e, t, n) => {
+				this.setData(e), this.toast(`Loaded ${t.data.length} bars from ${n.name}` + (t.skipped > 0 ? ` (${t.skipped} skipped)` : ""));
+			},
+			onError: (e, t) => {
+				this.toast(`${t.name}: ${e.message}`, "error");
+			}
+		}), this.dragDrop.attach()), r.statusBar !== !1 && (this.statusBar = new w(this.root)), r.settings !== !1 && (this.settings = new C({
+			onChange: (e) => this.applySettings(e),
+			onReset: () => this.resetSettings(),
+			onClose: () => {}
+		})), this.symbolSearch = new E({
+			onPick: (e) => {
+				this.setSymbol(e);
+			},
+			onClose: () => {}
+		}), this.hotkeySheet = new N({ onClose: () => {} }), this.chart.on("barClick", (e) => {
+			if (!this.replayBar?.isMounted()) return;
+			let t = e.payload.barIndex;
+			typeof t == "number" && (this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(t), this.replayBar.setState("paused"));
+		}), this.dataWindow = new ke(this.root, { formatPrice: (e) => this.formatAlertPrice(e) }), this.chart.on("crosshairMove", (e) => {
+			let t = e.payload;
+			this.lastHoverIndex = typeof t.barIndex == "number" ? t.barIndex : null, this.dataWindow?.isOpen() && this.dataWindow.render(this.buildDataWindowModel());
+		}), r.drawingTools !== !1 && (this.drawingStyle = new Se(this.root, {
+			onStyleChange: (e) => {
+				this.chart.setDrawingStyle(e), this.chart.setSelectedDrawingStyle(e);
+			},
+			getStyle: () => this.chart.getDrawingStyle()
+		}, new ve())), r.trading !== !1 && (this.bracketBar = new Te(this.root, {
+			onConfirm: () => this.chart.confirmBracket(),
+			onCancel: () => {
+				this.chart.cancelBracket(), this.bracketBar?.hide();
+			}
+		}), this.chart.on("bracketPlace", (e) => {
+			let t = e.payload;
+			this.bracketBar?.hide(), this.toast(`${t.side === "buy" ? "Long" : "Short"} bracket placed · ${t.riskReward.toFixed(2)}R`);
+		}), r.depthLadder && (this.depthLadder = new Oe(this.root, {
+			onTrade: (e, t) => {
+				this.chart.placeOrderIntent({
+					side: e,
+					type: "limit",
+					price: t
+				}), this.toast(`${e === "buy" ? "Buy" : "Sell"} limit @ ${this.formatAlertPrice(t)}`);
+			},
+			formatPrice: (e) => this.formatAlertPrice(e)
+		})), this.chart.on("dataUpdate", (e) => {
+			let t = e.payload;
+			t && t.bracket === "cancelled" && this.bracketBar?.hide();
+		})), r.alerts !== !1 && (this.alertsPanel = new ce(this.root, {
+			onAdd: (e, t, n, r, i) => {
+				this.chart.addAlert(e, t, n, r, i);
+			},
+			onRemove: (e) => this.chart.removeAlert(e),
+			onClear: () => this.chart.clearAlerts(),
+			getChannelValue: (e) => this.getAlertChannelValue(e),
+			formatPrice: (e) => this.formatAlertPrice(e)
+		}), this.chart.on("alertAdd", () => this.refreshAlerts()), this.chart.on("alertRemove", () => this.refreshAlerts()), this.chart.on("alertUpdate", () => this.refreshAlerts()), r.alertNotifications && (this.alertNotifier = new Ee(r.alertNotifications)), this.chart.on("alertTriggered", (e) => {
+			let t = e.payload, n = `Price ${this.formatAlertPrice(t.price)}${t.message ? ` — ${t.message}` : ""}`;
+			this.toast(`🔔 Alert: ${n}`, "info"), this.alertNotifier?.notify(n), this.refreshAlerts();
+		})), r.objectTree !== !1) {
+			this.indicatorSettings = new me(this.root, {
+				onApply: (e, t) => this.chart.updateIndicator(e, t),
+				onClose: () => {}
+			}), this.objectTree = new le(this.root, {
+				onRemoveIndicator: (e) => this.handleRemoveIndicator(e),
+				onConfigureIndicator: (e) => this.openIndicatorSettings(e),
+				onToggleIndicatorVisible: (e, t) => {
+					this.chart.setIndicatorVisible(e, t), this.refreshObjects();
+				},
+				onRemoveDrawing: (e) => {
+					this.chart.removeDrawing(e), this.refreshObjects();
+				},
+				onToggleDrawingVisible: (e, t) => {
+					this.chart.setDrawingVisible(e, t), this.refreshObjects();
+				},
+				onToggleDrawingLocked: (e, t) => {
+					this.chart.setDrawingLocked(e, t), this.refreshObjects();
+				},
+				onAddCompare: () => this.handleAddCompare(),
+				onRemoveCompare: (e) => this.handleRemoveCompare(e)
+			});
+			let e = () => {
+				this.objectTree?.isOpen() && this.refreshObjects();
+			};
+			this.chart.on("drawingCreate", e), this.chart.on("drawingRemove", e), this.chart.on("indicatorAdd", e), this.chart.on("indicatorRemove", e);
+		}
+		if (this.commandPalette = new T({
+			onIndicator: (e) => this.handleAddIndicator(e),
+			onChartType: (e) => this.handleChartType(e),
+			onDrawingTool: (e) => this.handleDrawingTool(e),
+			onTimeframe: (e) => this.handleTimeframe(e),
+			onAction: (e) => this.handleAction(e),
+			onClose: () => {}
+		}), this.boundGlobalKeydown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === "k") e.preventDefault(), this.toggleCommandPalette();
+			else if ((e.ctrlKey || e.metaKey) && (e.key === "p" || e.key === "P")) e.preventDefault(), this.symbolSearch?.open(this.symbols, this.state.symbol);
+			else if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+				let t = document.activeElement;
+				if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+				e.preventDefault(), this.hotkeySheet?.open();
+			}
+		}, document.addEventListener("keydown", this.boundGlobalKeydown), r.adapter && (this.adapter = r.adapter, this.connectStream()), this.watchlist && (this.watchlistInterval = setInterval(() => this.tickWatchlist(), 1e3)), this.updateUI(), r.onReady?.(this.chart), r.shareUrl && typeof location < "u") {
+			let e = Le(location.hash);
+			e && this.importState(e);
+		}
+	}
+	setSymbols(e) {
+		this.symbols = e, this.watchlist?.setSymbols(e);
+	}
+	async setSymbol(e) {
+		this.flushActiveLayout(), this.state = {
 			...this.state,
 			symbol: e
-		}, this.options.onSymbolChange?.(e), this.updateUI(), this.adapter && this.connectStream();
+		}, this.sessionRefPrice = null, this.options.onSymbolChange?.(e), this.updateUI(), this.watchlist?.setActive(e), this.adapter && await this.connectStream();
+	}
+	setWatchlistEntry(e, t) {
+		this.watchlist?.setEntry(e, t);
+	}
+	tickWatchlist() {
+		if (!this.watchlist) return;
+		let e = this.chart.getData();
+		if (e.length === 0) return;
+		let t = e[e.length - 1];
+		this.sessionRefPrice === null && (this.sessionRefPrice = e[0].open);
+		let n = this.watchlistSparkBuffer.get(this.state.symbol) ?? [];
+		n.push(t.close), n.length > 40 && n.shift(), this.watchlistSparkBuffer.set(this.state.symbol, n), this.watchlist.setEntry(this.state.symbol, {
+			lastPrice: t.close,
+			refPrice: this.sessionRefPrice,
+			sparkline: n.slice()
+		});
 	}
-	handleTimeframe(e) {
+	async setTimeframe(e) {
+		if (this.state = {
+			...this.state,
+			timeframe: e
+		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter) {
+			await this.connectStream();
+			return;
+		}
+		this.options.resampleTimeframes !== !1 && this.applyTimeframeData();
+	}
+	setTheme(e) {
+		let t = this.resolveIsDark(e), n = this.resolveTheme(e);
 		this.state = {
+			...this.state,
+			isDark: t
+		}, this.root.dataset.tcwTheme = t ? "dark" : "light", this.chart.setTheme(n), this.updateUI();
+	}
+	getChart() {
+		return this.chart;
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.boundGlobalKeydown && document.removeEventListener("keydown", this.boundGlobalKeydown), this.flushActiveLayout(), this.commandPalette?.destroy(), this.symbolSearch?.destroy(), this.hotkeySheet?.destroy(), this.replayPollInterval && clearInterval(this.replayPollInterval), this.replayBar?.destroy(), this.dragDrop?.detach(), this.alertsPanel?.destroy(), this.objectTree?.destroy(), this.indicatorSettings?.destroy(), this.drawingStyle?.destroy(), this.bracketBar?.destroy(), this.alertNotifier?.destroy(), this.depthLadder?.destroy(), this.dataWindow?.destroy(), this.watchlistInterval && clearInterval(this.watchlistInterval), this.watchlist?.destroy(), this.toolbar?.destroy(), this.sidebar?.destroy(), this.settings?.destroy(), this.statusBar?.destroy(), this.chart.destroy(), this.root.remove(), _());
+	}
+	handleSymbolClick() {
+		this.symbolSearch?.open(this.symbols, this.state.symbol);
+	}
+	handleTimeframe(e) {
+		if (this.state = {
 			...this.state,
 			timeframe: e
-		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter && this.connectStream();
+		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter) {
+			this.connectStream();
+			return;
+		}
+		if (this.options.resampleTimeframes !== !1) {
+			if (!this.baseSeries) {
+				let e = this.chart.getData();
+				e.length > 0 && (this.baseSeries = e, this.baseTimeframeMs = s(e));
+			}
+			this.applyTimeframeData();
+		}
+	}
+	setData(e) {
+		this.baseSeries = e, this.baseTimeframeMs = s(e), this.applyTimeframeData();
+	}
+	applyTimeframeData() {
+		if (!this.baseSeries) return;
+		let e = a(this.state.timeframe);
+		if (this.baseTimeframeMs > 0 && e > this.baseTimeframeMs) {
+			let e = this.options.weekStartsOn ?? 1;
+			this.chart.setData(o(this.baseSeries, this.state.timeframe, { weekStartsOn: e }));
+		} else this.chart.setData(this.baseSeries);
+	}
+	toggleAlerts() {
+		this.alertsPanel && (this.alertsPanel.toggle(), this.alertsPanel.isOpen() && this.refreshAlerts());
+	}
+	handleToggleFavorite(e) {
+		let t = this.favoritesStore.toggle(e);
+		this.sidebar?.setFavorites(this.favoritesStore.list()), this.toast(t ? "Pinned to favorites" : "Unpinned");
+	}
+	exportState() {
+		let e = this.chart.getActiveIndicators().map((e) => ({
+			id: e.id,
+			params: e.params
+		}));
+		return Fe({
+			v: 1,
+			symbol: this.state.symbol,
+			timeframe: this.state.timeframe,
+			chartType: this.state.chartType,
+			scaleMode: this.chart.getScaleMode(),
+			indicators: e,
+			drawings: this.chart.getDrawings()
+		});
+	}
+	async importState(e) {
+		let t = Ie(e);
+		if (!t) return !1;
+		t.symbol && t.symbol !== this.state.symbol && await this.setSymbol(t.symbol), t.timeframe && t.timeframe !== this.state.timeframe && await this.setTimeframe(t.timeframe), t.chartType && this.handleChartType(t.chartType), this.chart.setScaleMode(t.scaleMode);
+		for (let [, e] of this.state.activeIndicators) this.chart.removeIndicator(e);
+		let n = /* @__PURE__ */ new Map();
+		for (let e of t.indicators) {
+			let t = this.chart.addIndicator(e.id, e.params);
+			t && n.set(e.id, t);
+		}
+		return this.state = {
+			...this.state,
+			activeIndicators: n
+		}, this.chart.setDrawings(t.drawings), this.updateUI(), !0;
+	}
+	async copyChartImage() {
+		let e = await this.chart.copyScreenshot();
+		this.toast(e ? "Chart image copied" : "Copy failed — image clipboard unavailable", e ? "info" : "error");
+	}
+	async copyShareLink() {
+		let e = Re(typeof location < "u" ? location.href : "", this.exportState());
+		try {
+			await navigator.clipboard.writeText(e), this.toast("Share link copied");
+		} catch {
+			this.toast("Copy failed — clipboard unavailable", "error");
+		}
+	}
+	setDepth(e) {
+		this.chart.setDepthData(e), this.depthLadder?.setData(e), e && this.chart.pushDepthSnapshot(e);
+	}
+	startBracket(e) {
+		this.chart.startBracket(e) && this.bracketBar?.show(e);
+	}
+	buildDataWindowModel() {
+		let e = this.chart.getData(), t = this.lastHoverIndex;
+		if (t === null || t < 0 || t >= e.length) return {
+			ohlc: null,
+			change: 0,
+			changePct: 0,
+			indicators: []
+		};
+		let n = e[t], r = t > 0 ? e[t - 1].close : n.open, i = n.close - r, a = r === 0 ? 0 : i / r * 100, o = this.chart.getActiveIndicators().map((e) => {
+			let n = this.chart.getIndicatorOutput(e.instanceId)?.series?.[t] ?? null, r = n ? Object.entries(n).filter(([, e]) => typeof e == "number" && Number.isFinite(e)).map(([e, t]) => ({
+				key: e,
+				value: t
+			})) : [];
+			return {
+				name: e.descriptor.name,
+				values: r
+			};
+		}).filter((e) => e.values.length > 0);
+		return {
+			ohlc: {
+				open: n.open,
+				high: n.high,
+				low: n.low,
+				close: n.close,
+				volume: n.volume
+			},
+			change: i,
+			changePct: a,
+			indicators: o
+		};
+	}
+	toggleDataWindow() {
+		this.dataWindow && (this.dataWindow.toggle(), this.dataWindow.isOpen() && this.dataWindow.render(this.buildDataWindowModel()));
+	}
+	toggleObjects() {
+		this.objectTree && (this.objectTree.toggle(), this.objectTree.isOpen() && this.refreshObjects());
+	}
+	openIndicatorSettings(e) {
+		if (!this.indicatorSettings) return;
+		let t = this.chart.getActiveIndicators().find((t) => t.instanceId === e);
+		t && this.indicatorSettings.open({
+			instanceId: e,
+			name: t.descriptor.name,
+			defaults: t.descriptor.defaultConfig,
+			params: t.params
+		});
+	}
+	refreshObjects() {
+		if (!this.objectTree) return;
+		let e = this.chart.getActiveIndicators().map((e) => ({
+			instanceId: e.instanceId,
+			name: e.descriptor.name,
+			visible: e.visible
+		})), t = this.chart.getDrawings().map((e) => ({
+			id: e.id,
+			label: de(e.type),
+			visible: e.visible,
+			locked: e.locked
+		})), n = this.compares.map((e) => ({
+			id: e.id,
+			label: e.symbol,
+			color: e.color
+		}));
+		this.objectTree.setObjects(e, t, n);
+	}
+	async handleAddCompare() {
+		if (!this.adapter) {
+			this.toast("Comparison needs a live data adapter", "error");
+			return;
+		}
+		let e = new Set([this.state.symbol, ...this.compares.map((e) => e.symbol)]), t = this.symbols.filter((t) => !e.has(t));
+		this.symbolSearch?.open(t.length ? t : this.symbols, this.state.symbol, (e) => {
+			this.addCompareSymbol(e);
+		});
+	}
+	async addCompareSymbol(e) {
+		if (!this.adapter || this.compares.some((t) => t.symbol === e)) return;
+		let t = $[this.compares.length % $.length], n = `cmp_${e}`;
+		try {
+			let r = await this.adapter.fetchHistory(e, this.state.timeframe, this.options.historyLimit ?? 500);
+			this.compares.length === 0 && this.chart.setCompareMode("percent"), this.chart.addCompareSymbol(n, e, r, t), this.compares = [...this.compares, {
+				id: n,
+				symbol: e,
+				color: t
+			}], this.refreshObjects(), this.toast(`Comparing ${e}`);
+		} catch (t) {
+			this.toast(`${e}: ${t instanceof Error ? t.message : "failed to load"}`, "error");
+		}
+	}
+	handleRemoveCompare(e) {
+		this.chart.removeCompareSymbol(e), this.compares = this.compares.filter((t) => t.id !== e), this.refreshObjects();
+	}
+	async refetchCompares() {
+		if (!this.adapter || this.compares.length === 0) return;
+		let e = this.compares.filter((e) => e.symbol === this.state.symbol);
+		for (let t of e) this.handleRemoveCompare(t.id);
+		for (let e of this.compares) try {
+			let t = await this.adapter.fetchHistory(e.symbol, this.state.timeframe, this.options.historyLimit ?? 500);
+			this.chart.updateCompareData(e.id, t);
+		} catch {}
+	}
+	refreshAlerts() {
+		this.alertsPanel && (this.alertsPanel.setSources(this.buildAlertSources()), this.alertsPanel.setAlerts(this.chart.getAlerts().map((e) => ({
+			id: e.id,
+			price: e.price,
+			condition: e.condition,
+			message: e.message,
+			triggered: e.triggered,
+			channel: e.channel,
+			label: e.label
+		}))));
+	}
+	buildAlertSources() {
+		let e = [{
+			channel: "price",
+			label: "Price"
+		}];
+		for (let t of this.chart.getActiveIndicators()) {
+			let n = this.chart.getIndicatorOutput(t.instanceId)?.series, r = n && n.length > 0 ? n[n.length - 1] : null, i = r ? Object.keys(r).filter((e) => typeof r[e] == "number") : [];
+			for (let n of i) {
+				let r = i.length > 1 ? `${t.descriptor.name} ${n}` : t.descriptor.name;
+				e.push({
+					channel: `${t.instanceId}:${n}`,
+					label: r
+				});
+			}
+		}
+		return e;
+	}
+	getAlertChannelValue(e) {
+		let t = this.chart.getData();
+		if (e === "price") return t.length > 0 ? t[t.length - 1].close : null;
+		let n = e.indexOf(":");
+		if (n < 0 || t.length === 0) return null;
+		let r = e.slice(0, n), i = e.slice(n + 1), a = this.chart.getIndicatorOutput(r)?.series?.[t.length - 1]?.[i];
+		return typeof a == "number" && Number.isFinite(a) ? a : null;
+	}
+	formatAlertPrice(e) {
+		let t = Math.abs(e), n = t >= 1e3 ? 2 : t >= 1 ? 4 : 6, r = this.settingsState.numberLocale || void 0;
+		return e.toLocaleString(r, {
+			minimumFractionDigits: 2,
+			maximumFractionDigits: n
+		});
 	}
 	handleChartType(e) {
 		this.state = {
@@ -1156,25 +3298,25 @@ var _ = class {
 	}
 	buildCommandItems() {
 		let e = [];
-		for (let t of o) e.push({
+		for (let t of d) e.push({
 			id: t.id,
 			label: t.name,
 			category: "indicator",
 			active: this.state.activeIndicators.has(t.id)
 		});
-		for (let t of i) e.push({
+		for (let t of l) e.push({
 			id: t.value,
 			label: t.label,
 			category: "chartType",
 			active: this.state.chartType === t.value
 		});
-		for (let t of a) for (let n of t.tools) e.push({
+		for (let t of u) for (let n of t.tools) e.push({
 			id: n.value,
 			label: n.label,
 			category: "drawing",
 			active: this.state.activeTool === n.value
 		});
-		for (let t of r) e.push({
+		for (let t of c) e.push({
 			id: t.value,
 			label: t.label,
 			category: "timeframe",
@@ -1185,6 +3327,10 @@ var _ = class {
 			label: "Screenshot",
 			category: "action",
 			shortcut: ""
+		}, {
+			id: "copyImage",
+			label: "Copy Chart Image",
+			category: "action"
 		}, {
 			id: "toggleTheme",
 			label: "Toggle Theme",
@@ -1193,6 +3339,18 @@ var _ = class {
 			id: "settings",
 			label: "Settings",
 			category: "action"
+		}, {
+			id: "shareView",
+			label: "Share View (copy link)",
+			category: "action"
+		}, {
+			id: "autoFib",
+			label: "Auto Fibonacci (visible swing)",
+			category: "action"
+		}, {
+			id: "dataWindow",
+			label: "Toggle Data Window",
+			category: "action"
 		}, {
 			id: "clearDrawings",
 			label: "Clear All Drawings",
@@ -1210,6 +3368,20 @@ var _ = class {
 			case "settings":
 				this.openSettings();
 				break;
+			case "copyImage":
+				this.copyChartImage();
+				break;
+			case "shareView":
+				this.copyShareLink();
+				break;
+			case "autoFib": {
+				let e = this.chart.autoFib();
+				this.toast(e ? "Auto Fibonacci added" : "No clear swing in view");
+				break;
+			}
+			case "dataWindow":
+				this.toggleDataWindow();
+				break;
 			case "clearDrawings":
 				this.chart.clearDrawings(), this.state = {
 					...this.state,
@@ -1242,7 +3414,7 @@ var _ = class {
 		this.state = {
 			...this.state,
 			isDark: e
-		}, this.root.dataset.tcwTheme = e ? "dark" : "light", this.chart.setTheme(e ? t : n), this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
+		}, this.root.dataset.tcwTheme = e ? "dark" : "light", this.chart.setTheme(e ? n : r), this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
 			fontSize: 48,
 			color: e ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)"
 		}), this.updateUI();
@@ -1250,16 +3422,114 @@ var _ = class {
 	openSettings() {
 		this.settings?.open(this.settingsState);
 	}
+	toast(e, t = "info") {
+		let n = document.createElement("div");
+		n.className = `tcw-toast ${t === "error" ? "tcw-toast-error" : ""}`, n.textContent = e, this.root.appendChild(n), requestAnimationFrame(() => n.classList.add("tcw-toast-in")), setTimeout(() => {
+			n.classList.remove("tcw-toast-in"), n.addEventListener("transitionend", () => n.remove(), { once: !0 }), setTimeout(() => n.remove(), 400);
+		}, 3500);
+	}
+	clearSavedLayout(e) {
+		if (!this.layoutKeyPrefix) return;
+		let t = e ?? this.state.symbol;
+		try {
+			localStorage.removeItem(this.layoutKeyPrefix + t);
+		} catch {}
+	}
+	applySymbolLayout(e) {
+		if (!this.layoutKeyPrefix) return;
+		let t = this.layoutKeyPrefix + e;
+		this.activeLayoutKey = t;
+		try {
+			this.chart.loadStateFromStorage(t) && this.rebuildActiveIndicatorsMapFromChart();
+		} catch {}
+		this.chart.setAutoSave(t, this.layoutDebounceMs);
+	}
+	flushActiveLayout() {
+		if (this.activeLayoutKey) {
+			try {
+				this.chart.saveState(this.activeLayoutKey);
+			} catch {}
+			this.chart.disableAutoSave(), this.activeLayoutKey = null;
+		}
+	}
+	rebuildActiveIndicatorsMapFromChart() {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of this.chart.getActiveIndicators()) e.set(t.id, t.instanceId);
+		this.state = {
+			...this.state,
+			activeIndicators: e
+		}, this.updateUI();
+	}
+	toggleReplay() {
+		this.replayBar?.isMounted() ? this.exitReplay() : this.enterReplay();
+	}
+	enterReplay() {
+		let e = this.chart.getData();
+		e.length < 2 || (this.replayOriginalData = e.slice(), this.replayBar = new F({
+			onPlay: () => {
+				this.chart.getReplayState() === "paused" ? this.chart.replayResume() : this.chart.replay({
+					speed: this.replaySpeed,
+					interval: 200
+				}), this.replayBar?.setState("playing");
+			},
+			onPause: () => {
+				this.chart.replayPause(), this.replayBar?.setState("paused");
+			},
+			onStop: () => {
+				this.chart.replayStop(), this.replayBar?.setState("paused");
+			},
+			onStepBack: () => {
+				let e = this.chart.getReplayProgress();
+				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(Math.max(0, e.current - 1)), this.replayBar?.setState("paused");
+			},
+			onStepForward: () => {
+				let e = this.chart.getReplayProgress();
+				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(Math.min(e.total - 1, e.current + 1)), this.replayBar?.setState("paused");
+			},
+			onSeek: (e) => {
+				this.chart.getReplayState() === "playing" && this.chart.replayPause(), this.chart.replaySeek(e), this.replayBar?.setState("paused");
+			},
+			onSpeedChange: (e) => {
+				this.replaySpeed = e, this.chart.setReplaySpeed(e);
+			},
+			onClose: () => this.exitReplay()
+		}), this.replayBar.mount(this.chartContainer, {
+			total: e.length,
+			speed: this.replaySpeed
+		}), this.chart.replay({
+			speed: this.replaySpeed,
+			interval: 200,
+			startIndex: 1
+		}), this.chart.replayPause(), this.replayBar.setState("paused"), this.replayPollInterval = setInterval(() => {
+			if (!this.replayBar?.isMounted()) return;
+			let e = this.chart.getReplayProgress();
+			this.replayBar.setProgress(e.current, e.total);
+			let t = this.chart.getReplayState();
+			t === "stopped" ? this.replayBar.setState("paused") : this.replayBar.setState(t);
+		}, 150));
+	}
+	exitReplay() {
+		this.replayPollInterval &&= (clearInterval(this.replayPollInterval), null), this.chart.replayStop(), this.replayBar?.unmount(), this.replayBar = null, this.replayOriginalData &&= (this.chart.setData(this.replayOriginalData), null);
+	}
 	applySettings(e) {
 		this.settingsState = {
 			...this.settingsState,
 			...e
-		}, e.gridVisible !== void 0 && this.chart.setGridVisible(e.gridVisible), e.volumeVisible !== void 0 && this.chart.setVolumeVisible(e.volumeVisible), e.crosshairMode !== void 0 && this.chart.setCrosshairMode(e.crosshairMode), e.autoScale !== void 0 && this.chart.setAutoScale(e.autoScale), e.logScale !== void 0 && this.chart.setLogScale(e.logScale), e.numberLocale !== void 0 && this.chart.setNumberLocale(e.numberLocale);
+		}, e.gridVisible !== void 0 && this.chart.setGridVisible(e.gridVisible), e.volumeVisible !== void 0 && this.chart.setVolumeVisible(e.volumeVisible), e.volumeProfileVisible !== void 0 && this.chart.setVolumeProfileVisible(e.volumeProfileVisible), e.marketProfileVisible !== void 0 && this.chart.setMarketProfileVisible(e.marketProfileVisible), e.marketProfileSplit !== void 0 && this.chart.setMarketProfileConfig({ splitBySession: e.marketProfileSplit }), e.marketProfileLetters !== void 0 && this.chart.setMarketProfileConfig({ letters: e.marketProfileLetters }), e.marketProfileBuckets !== void 0 && this.chart.setMarketProfileConfig({ buckets: e.marketProfileBuckets }), e.marketProfileOpacity !== void 0 && this.chart.setMarketProfileConfig({ opacity: e.marketProfileOpacity }), e.depthHeatmapVisible !== void 0 && this.chart.setDepthHeatmapVisible(e.depthHeatmapVisible), e.depthHeatmapOpacity !== void 0 && this.chart.setDepthHeatmapConfig({ opacity: e.depthHeatmapOpacity }), e.sessionShadingVisible !== void 0 && this.chart.setSessionShadingVisible(e.sessionShadingVisible), e.pivotMarkersVisible !== void 0 && this.chart.setPivotMarkersVisible(e.pivotMarkersVisible), e.pivotStrength !== void 0 && this.chart.setPivotMarkersConfig({
+			left: e.pivotStrength,
+			right: e.pivotStrength
+		}), e.pivotStructureLabels !== void 0 && this.chart.setPivotMarkersConfig({ structureLabels: e.pivotStructureLabels }), e.periodLevelsVisible !== void 0 && this.chart.setPeriodLevelsVisible(e.periodLevelsVisible), e.periodLevelsPeriod !== void 0 && this.chart.setPeriodLevelsPeriod(e.periodLevelsPeriod), e.crosshairMode !== void 0 && this.chart.setCrosshairMode(e.crosshairMode), e.autoScale !== void 0 && this.chart.setAutoScale(e.autoScale), e.scaleMode === void 0 ? e.logScale !== void 0 && (this.chart.setLogScale(e.logScale), this.settingsState = {
+			...this.settingsState,
+			scaleMode: e.logScale ? "logarithmic" : "regular"
+		}) : (this.chart.setScaleMode(e.scaleMode), this.settingsState = {
+			...this.settingsState,
+			logScale: e.scaleMode === "logarithmic"
+		}), e.numberLocale !== void 0 && this.chart.setNumberLocale(e.numberLocale), e.timezone !== void 0 && this.chart.setTimezoneOffset(e.timezone === "local" ? null : Number(e.timezone));
 		let t = { ...this.chart.getTheme() }, n = !1;
 		e.candleUpColor !== void 0 && (t.candleUp = e.candleUpColor, n = !0), e.candleDownColor !== void 0 && (t.candleDown = e.candleDownColor, n = !0), e.candleUpWick !== void 0 && (t.candleUpWick = e.candleUpWick, n = !0), e.candleDownWick !== void 0 && (t.candleDownWick = e.candleDownWick, n = !0), e.backgroundColor !== void 0 && (t.background = e.backgroundColor, n = !0), e.gridColor !== void 0 && (t.grid = e.gridColor, n = !0), n && this.chart.setTheme(t);
 	}
 	resetSettings() {
-		this.settingsState = { ...l }, this.applySettings(this.settingsState);
+		this.settingsState = { ...p }, this.applySettings(this.settingsState);
 	}
 	async connectStream() {
 		if (this.adapter) {
@@ -1277,11 +3547,11 @@ var _ = class {
 				}), this.chart.setWatermark(this.state.symbol.replace("USDT", " / USDT"), {
 					fontSize: 48,
 					color: this.state.isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)"
-				}), this.state = {
+				}), this.applySymbolLayout(this.state.symbol), this.state = {
 					...this.state,
 					connectionState: "connected",
 					connectionMessage: "Live"
-				};
+				}, this.refetchCompares();
 			} catch (e) {
 				this.state = {
 					...this.state,
@@ -1304,7 +3574,7 @@ var _ = class {
 		return e === void 0 || e === "dark" ? !0 : e === "light" ? !1 : typeof e == "object" && e.background ? this.isColorDark(e.background) : !0;
 	}
 	resolveTheme(e) {
-		return e === void 0 || e === "dark" ? t : e === "light" ? n : typeof e == "object" ? e : t;
+		return e === void 0 || e === "dark" ? n : e === "light" ? r : typeof e == "object" ? e : n;
 	}
 	isColorDark(e) {
 		if (e.startsWith("#") && e.length >= 7) {
@@ -1315,6 +3585,6 @@ var _ = class {
 	}
 };
 //#endregion
-export { T as ChartWidget };
+export { ze as ChartWidget };
 
 //# sourceMappingURL=index.js.map