@tradecanvas/chart 0.4.0 → 0.6.0

package/dist/widget/index.js

@@ -0,0 +1,1058 @@
+import { t as e } from "../Chart-CrrTKx3r.js";
+import { DARK_THEME as t, LIGHT_THEME as n } from "@tradecanvas/commons";
+//#region src/widget/widgetConfig.ts
+var r = [
+	{
+		label: "1m",
+		value: "1m"
+	},
+	{
+		label: "5m",
+		value: "5m"
+	},
+	{
+		label: "15m",
+		value: "15m"
+	},
+	{
+		label: "1H",
+		value: "1h"
+	},
+	{
+		label: "4H",
+		value: "4h"
+	},
+	{
+		label: "1D",
+		value: "1d"
+	}
+], i = [
+	{
+		label: "Candlestick",
+		value: "candlestick"
+	},
+	{
+		label: "Line",
+		value: "line"
+	},
+	{
+		label: "Area",
+		value: "area"
+	},
+	{
+		label: "Bar",
+		value: "bar"
+	},
+	{
+		label: "Heikin-Ashi",
+		value: "heikinAshi"
+	},
+	{
+		label: "Hollow Candle",
+		value: "hollowCandle"
+	},
+	{
+		label: "Baseline",
+		value: "baseline"
+	}
+], a = [
+	{
+		label: "Lines",
+		tools: [
+			{
+				label: "Trend Line",
+				value: "trendLine"
+			},
+			{
+				label: "Ray",
+				value: "ray"
+			},
+			{
+				label: "Extended Line",
+				value: "extendedLine"
+			}
+		]
+	},
+	{
+		label: "Horizontal/Vertical",
+		tools: [{
+			label: "Horizontal Line",
+			value: "horizontalLine"
+		}, {
+			label: "Vertical Line",
+			value: "verticalLine"
+		}]
+	},
+	{
+		label: "Channels",
+		tools: [{
+			label: "Parallel Channel",
+			value: "parallelChannel"
+		}, {
+			label: "Regression Channel",
+			value: "regressionChannel"
+		}]
+	},
+	{
+		label: "Fibonacci",
+		tools: [{
+			label: "Fib Retracement",
+			value: "fibRetracement"
+		}, {
+			label: "Fib Extension",
+			value: "fibExtension"
+		}]
+	},
+	{
+		label: "Shapes",
+		tools: [
+			{
+				label: "Rectangle",
+				value: "rectangle"
+			},
+			{
+				label: "Ellipse",
+				value: "ellipse"
+			},
+			{
+				label: "Triangle",
+				value: "triangle"
+			}
+		]
+	},
+	{
+		label: "Gann & Advanced",
+		tools: [
+			{
+				label: "Pitchfork",
+				value: "pitchfork"
+			},
+			{
+				label: "Gann Fan",
+				value: "gannFan"
+			},
+			{
+				label: "Gann Box",
+				value: "gannBox"
+			},
+			{
+				label: "Elliott Wave",
+				value: "elliottWave"
+			}
+		]
+	},
+	{
+		label: "Measure",
+		tools: [
+			{
+				label: "Price Range",
+				value: "priceRange"
+			},
+			{
+				label: "Date Range",
+				value: "dateRange"
+			},
+			{
+				label: "Measure",
+				value: "measure"
+			}
+		]
+	},
+	{
+		label: "Annotation",
+		tools: [{
+			label: "Text",
+			value: "text"
+		}, {
+			label: "Arrow",
+			value: "arrow"
+		}]
+	}
+], o = [
+	{
+		id: "sma",
+		name: "SMA",
+		type: "overlay"
+	},
+	{
+		id: "ema",
+		name: "EMA",
+		type: "overlay"
+	},
+	{
+		id: "bb",
+		name: "Bollinger Bands",
+		type: "overlay"
+	},
+	{
+		id: "vwap",
+		name: "VWAP",
+		type: "overlay"
+	},
+	{
+		id: "ichimoku",
+		name: "Ichimoku Cloud",
+		type: "overlay"
+	},
+	{
+		id: "psar",
+		name: "Parabolic SAR",
+		type: "overlay"
+	},
+	{
+		id: "supertrend",
+		name: "Supertrend",
+		type: "overlay"
+	},
+	{
+		id: "keltner",
+		name: "Keltner Channel",
+		type: "overlay"
+	},
+	{
+		id: "donchian",
+		name: "Donchian Channel",
+		type: "overlay"
+	},
+	{
+		id: "rsi",
+		name: "RSI",
+		type: "panel"
+	},
+	{
+		id: "macd",
+		name: "MACD",
+		type: "panel"
+	},
+	{
+		id: "stochastic",
+		name: "Stochastic",
+		type: "panel"
+	},
+	{
+		id: "atr",
+		name: "ATR",
+		type: "panel"
+	},
+	{
+		id: "adx",
+		name: "ADX",
+		type: "panel"
+	},
+	{
+		id: "obv",
+		name: "OBV",
+		type: "panel"
+	},
+	{
+		id: "williamsR",
+		name: "Williams %R",
+		type: "panel"
+	},
+	{
+		id: "cci",
+		name: "CCI",
+		type: "panel"
+	},
+	{
+		id: "mfi",
+		name: "MFI",
+		type: "panel"
+	},
+	{
+		id: "roc",
+		name: "ROC",
+		type: "panel"
+	},
+	{
+		id: "tsi",
+		name: "TSI",
+		type: "panel"
+	},
+	{
+		id: "cmf",
+		name: "CMF",
+		type: "panel"
+	},
+	{
+		id: "aroon",
+		name: "Aroon",
+		type: "panel"
+	},
+	{
+		id: "stddev",
+		name: "Std Deviation",
+		type: "panel"
+	},
+	{
+		id: "vroc",
+		name: "Volume ROC",
+		type: "panel"
+	},
+	{
+		id: "ad",
+		name: "Acc/Dist",
+		type: "panel"
+	},
+	{
+		id: "volumeProfile",
+		name: "Volume Profile",
+		type: "panel"
+	}
+], s = [
+	"sma",
+	"ema",
+	"bb",
+	"rsi",
+	"macd",
+	"stochastic",
+	"vwap",
+	"atr",
+	"obv",
+	"ichimoku"
+], c = [
+	"BTCUSDT",
+	"ETHUSDT",
+	"SOLUSDT",
+	"BNBUSDT"
+], l = {
+	candleUpColor: "#26A69A",
+	candleDownColor: "#EF5350",
+	candleUpWick: "#26A69A",
+	candleDownWick: "#EF5350",
+	backgroundColor: "#131722",
+	gridColor: "#1E222D",
+	gridVisible: !0,
+	volumeVisible: !0,
+	legendVisible: !0,
+	barCountdown: !0,
+	logScale: !1,
+	autoScale: !0,
+	crosshairMode: "magnet",
+	numberLocale: "en-US"
+}, u = "/* === TradeCanvas Widget Styles === */\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n  font-size: 13px;\n  color: #d1d4dc;\n  background: #131722;\n  position: relative;\n  overflow: hidden;\n\n  /* Dark theme tokens (default) */\n  --tcw-bg: #131722;\n  --tcw-bg-elevated: #1E222D;\n  --tcw-border: #2A2E39;\n  --tcw-text: #d1d4dc;\n  --tcw-text-dim: #b2b5be;\n  --tcw-text-muted: #787b86;\n  --tcw-accent: #2962ff;\n  --tcw-accent-dim: rgba(41,98,255,0.15);\n  --tcw-accent-glow: rgba(41,98,255,0.12);\n  --tcw-red: #ef5350;\n  --tcw-green: #26a69a;\n  --tcw-transition: 0.15s ease;\n  --tcw-radius-lg: 8px;\n  --tcw-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;\n  --tcw-hover-bg: rgba(255,255,255,0.04);\n}\n\n.tcw-root[data-tcw-theme=\"light\"] {\n  color: #131722;\n  background: #ffffff;\n\n  --tcw-bg: #ffffff;\n  --tcw-bg-elevated: #f0f3fa;\n  --tcw-border: #e0e3eb;\n  --tcw-text: #131722;\n  --tcw-text-dim: #434651;\n  --tcw-text-muted: #787b86;\n  --tcw-accent: #2962ff;\n  --tcw-accent-dim: rgba(41,98,255,0.1);\n  --tcw-accent-glow: rgba(41,98,255,0.08);\n  --tcw-red: #ef5350;\n  --tcw-green: #26a69a;\n  --tcw-hover-bg: rgba(0,0,0,0.04);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 12px;\n  height: 40px;\n  border-bottom: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-elevated);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n}\n\n.tcw-toolbar-symbol {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--tcw-text);\n  padding: 0 10px;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n  cursor: pointer;\n  border: none;\n  background: none;\n  font-family: inherit;\n}\n\n.tcw-toolbar-sep {\n  width: 1px;\n  height: 20px;\n  background: var(--tcw-border);\n  flex-shrink: 0;\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 8px;\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: all var(--tcw-transition);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-accent);\n  color: white;\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: 4px;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: all var(--tcw-transition);\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-badge-count {\n  font-size: 10px;\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-dim);\n  padding: 0 4px;\n  border-radius: 8px;\n  font-weight: 600;\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: 2px 6px 2px 8px;\n  font-size: 11px;\n  font-weight: 500;\n  background: var(--tcw-accent-dim);\n  color: var(--tcw-accent);\n  border-radius: 4px;\n  white-space: nowrap;\n  line-height: 1.4;\n}\n\n.tcw-chip-remove {\n  cursor: pointer;\n  opacity: 0.6;\n  padding: 0 2px;\n  transition: opacity var(--tcw-transition);\n  border: none;\n  background: none;\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: 4px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: all var(--tcw-transition);\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: 4px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n  z-index: 50;\n  padding: 4px 0;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  font-size: 12px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-transition), color var(--tcw-transition);\n  width: 100%;\n  border: none;\n  background: none;\n  font-family: inherit;\n  text-align: left;\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}\n\n.tcw-dropdown-label {\n  text-transform: uppercase;\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  letter-spacing: 0.05em;\n  padding: 6px 12px;\n  font-weight: 600;\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-border);\n  margin: 4px 0;\n}\n\n.tcw-tag {\n  font-size: 10px;\n  color: var(--tcw-text-muted);\n  padding: 1px 5px;\n  border-radius: 3px;\n  background: var(--tcw-hover-bg);\n}\n\n/* === Body === */\n\n.tcw-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n}\n\n/* === Sidebar === */\n\n.tcw-sidebar {\n  width: 36px;\n  flex-shrink: 0;\n  background: var(--tcw-bg-elevated);\n  border-right: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 4px 0;\n  overflow: visible;\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n}\n\n.tcw-sidebar-btn {\n  width: 36px;\n  height: 32px;\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: all var(--tcw-transition);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\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-glow);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: rgba(239,68,68,0.1);\n}\n\n.tcw-multi-dot {\n  position: absolute;\n  bottom: 2px;\n  right: 2px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n}\n\n.tcw-sidebar-divider {\n  width: 20px;\n  height: 1px;\n  background: var(--tcw-border);\n  margin: 4px 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: 2px;\n  min-width: 160px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg);\n  box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n  z-index: 30;\n  padding: 4px 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.05em;\n  padding: 6px 12px;\n  font-weight: 600;\n}\n\n.tcw-flyout-item {\n  padding: 6px 12px;\n  font-size: 12px;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: block;\n  border: none;\n  background: none;\n  text-align: left;\n  font-family: inherit;\n  transition: background var(--tcw-transition), color var(--tcw-transition);\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}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  z-index: 100;\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-lg);\n  width: 480px;\n  max-width: 90vw;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 24px 64px rgba(0,0,0,0.5);\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-modal-header h3 {\n  font-size: 15px;\n  font-weight: 600;\n  margin: 0;\n  color: var(--tcw-text);\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: 4px;\n  transition: all var(--tcw-transition);\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: 0;\n  padding: 0 20px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-modal-tab {\n  padding: 10px 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--tcw-text-muted);\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  transition: color var(--tcw-transition);\n  font-family: inherit;\n  text-transform: capitalize;\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}\n\n.tcw-modal-body {\n  padding: 20px;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: 20px;\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\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: 8px 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid rgba(255,255,255,0.03);\n}\n\n.tcw-root[data-tcw-theme=\"light\"] .tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid rgba(0,0,0,0.04);\n}\n\n.tcw-settings-label {\n  font-size: 13px;\n  color: var(--tcw-text-dim);\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border);\n  border-radius: 4px;\n  background: none;\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: 60px;\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255,255,255,0.1);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-transition);\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: all var(--tcw-transition);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: white;\n}\n\n.tcw-root[data-tcw-theme=\"light\"] .tcw-toggle {\n  background: rgba(0,0,0,0.1);\n}\n\n.tcw-root[data-tcw-theme=\"light\"] .tcw-toggle::after {\n  background: #888;\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: white;\n}\n\n.tcw-settings-select {\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--tcw-bg);\n  border: 1px solid var(--tcw-border);\n  border-radius: 4px;\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  border-top: 1px solid var(--tcw-border);\n}\n\n.tcw-reset-link {\n  font-size: 12px;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: none;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  transition: color var(--tcw-transition);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-done-btn {\n  padding: 6px 16px;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--tcw-accent);\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--tcw-transition);\n}\n\n.tcw-done-btn:hover {\n  background: #2563eb;\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-elevated);\n  font-size: 11px;\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tcw-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background 0.3s;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 8px;\n    height: 36px;\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-indicator-chips {\n    display: none;\n  }\n  .tcw-sidebar {\n    width: 32px;\n  }\n  .tcw-sidebar-btn {\n    width: 32px;\n    height: 28px;\n  }\n}\n", d = 0, f = "tcw-styles";
+function p() {
+	if (d++, d > 1 || document.getElementById(f)) return;
+	let e = document.createElement("style");
+	e.id = f, e.textContent = u, document.head.appendChild(e);
+}
+function m() {
+	if (d--, d > 0) return;
+	let e = document.getElementById(f);
+	e && e.remove();
+}
+//#endregion
+//#region src/widget/icons.ts
+var h = {
+	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\"/>",
+	penLine: "<path d=\"M12 20h9\"/><path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z\"/>",
+	hash: "<line x1=\"4\" y1=\"9\" x2=\"20\" y2=\"9\"/><line x1=\"4\" y1=\"15\" x2=\"20\" y2=\"15\"/><line x1=\"10\" y1=\"3\" x2=\"8\" y2=\"21\"/><line x1=\"16\" y1=\"3\" x2=\"14\" y2=\"21\"/>",
+	square: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/>",
+	gitBranch: "<line x1=\"6\" y1=\"3\" x2=\"6\" y2=\"15\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>",
+	ruler: "<path d=\"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z\"/><path d=\"m14.5 12.5 2-2\"/><path d=\"m11.5 9.5 2-2\"/><path d=\"m8.5 6.5 2-2\"/><path d=\"m17.5 15.5 2-2\"/>",
+	type: "<polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" y1=\"20\" x2=\"15\" y2=\"20\"/><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\"/>",
+	magnet: "<path d=\"m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3L6 15\"/><path d=\"m5 8 4 4\"/><path d=\"m12 15 4 4\"/>",
+	undo: "<path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/>",
+	redo: "<path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\"/>",
+	trash: "<path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"/><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"/>",
+	camera: "<path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"/><circle cx=\"12\" cy=\"13\" r=\"3\"/>",
+	settings: "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+	moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>",
+	sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>",
+	chevronDown: "<path d=\"m6 9 6 6 6-6\"/>",
+	chevronUp: "<path d=\"m18 15-6-6-6 6\"/>",
+	barChart: "<line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"/><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"/>",
+	x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>",
+	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\"/>"
+};
+function g(e, t = 14) {
+	let n = h[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 {
+	trigger;
+	panel;
+	_isOpen = !1;
+	onOutsideClick;
+	onEscapeKey;
+	onTriggerClick;
+	constructor(e, t = {}) {
+		this.trigger = e, this.panel = document.createElement("div"), this.panel.className = "tcw-dropdown", this.panel.style.width = t.width ?? "200px", t.align === "right" ? this.panel.style.right = "0" : this.panel.style.left = "0", this.panel.style.display = "none", e.style.position = "relative", e.appendChild(this.panel), this.onTriggerClick = () => {
+			this._isOpen ? this.close() : this.open();
+		}, this.onOutsideClick = (e) => {
+			this.trigger.contains(e.target) || this.close();
+		}, this.onEscapeKey = (e) => {
+			e.key === "Escape" && this.close();
+		}, e.addEventListener("click", this.onTriggerClick);
+	}
+	setContent(e) {
+		this.panel.innerHTML = e;
+	}
+	open() {
+		this._isOpen || (this._isOpen = !0, this.panel.style.display = "", document.addEventListener("mousedown", this.onOutsideClick), document.addEventListener("keydown", this.onEscapeKey));
+	}
+	close() {
+		this._isOpen && (this._isOpen = !1, this.panel.style.display = "none", document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscapeKey));
+	}
+	isOpen() {
+		return this._isOpen;
+	}
+	destroy() {
+		this.trigger.removeEventListener("click", this.onTriggerClick), document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscapeKey), this.panel.remove();
+	}
+}, v = class {
+	config;
+	callbacks;
+	el;
+	chartTypeDropdown = null;
+	indicatorDropdown = null;
+	tfButtons = [];
+	chipsContainer = null;
+	themeBtn = null;
+	constructor(e, t, n) {
+		this.config = t, this.callbacks = n, this.el = document.createElement("div"), this.el.className = "tcw-toolbar", this.build(), e.appendChild(this.el);
+	}
+	build() {
+		let { config: e, callbacks: t, el: n } = this, r = document.createElement("button");
+		r.className = "tcw-toolbar-symbol", r.dataset.role = "symbol", r.addEventListener("click", t.onSymbolClick), n.appendChild(r), n.appendChild(this.sep());
+		let i = document.createElement("div");
+		i.className = "tcw-toolbar-group";
+		for (let n of e.timeframes) {
+			let e = document.createElement("button");
+			e.className = "tcw-btn", e.textContent = n.label, e.dataset.tf = n.value, e.addEventListener("click", () => t.onTimeframe(n.value)), i.appendChild(e), this.tfButtons.push(e);
+		}
+		n.appendChild(i), n.appendChild(this.sep());
+		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());
+		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());
+		let l = this.iconBtn("camera", "Screenshot", t.onScreenshot);
+		n.appendChild(l);
+		let u = this.iconBtn("settings", "Chart Settings", t.onSettings);
+		n.appendChild(u), this.themeBtn = this.iconBtn("moon", "Toggle theme", t.onToggleTheme), this.themeBtn.dataset.role = "theme", n.appendChild(this.themeBtn);
+	}
+	buildChartTypeMenu() {
+		if (!this.chartTypeDropdown) return;
+		let e = this.config.chartTypes.map((e) => `<button class="tcw-dropdown-item" data-ct="${e.value}">${e.label}</button>`).join("");
+		this.chartTypeDropdown.setContent(e), this.chartTypeDropdown.panel.querySelectorAll(".tcw-dropdown-item").forEach((e) => {
+			e.addEventListener("click", (e) => {
+				let t = e.currentTarget.dataset.ct;
+				this.callbacks.onChartType(t), this.chartTypeDropdown?.close();
+			});
+		});
+	}
+	buildIndicatorMenu() {
+		if (!this.indicatorDropdown) return;
+		let { indicators: e, popularIndicatorIds: t } = this.config, n = e.filter((e) => t.includes(e.id)), r = e.filter((e) => !t.includes(e.id)), i = "<div class=\"tcw-dropdown-label\">Popular</div>";
+		for (let e of n) i += `<button class="tcw-dropdown-item" data-ind="${e.id}"><span>${e.name}</span><span class="tcw-tag">${e.type}</span></button>`;
+		i += "<div class=\"tcw-dropdown-divider\"></div>", i += "<div class=\"tcw-dropdown-label\">All</div>";
+		for (let e of r) i += `<button class="tcw-dropdown-item" data-ind="${e.id}"><span>${e.name}</span><span class="tcw-tag">${e.type}</span></button>`;
+		this.indicatorDropdown.setContent(i), this.indicatorDropdown.panel.querySelectorAll(".tcw-dropdown-item[data-ind]").forEach((e) => {
+			e.addEventListener("click", (e) => {
+				let t = e.currentTarget.dataset.ind;
+				this.callbacks.onAddIndicator(t);
+			});
+		});
+	}
+	update(e) {
+		let t = this.el.querySelector("[data-role=\"symbol\"]");
+		t && (t.textContent = e.symbol);
+		for (let t of this.tfButtons) t.classList.toggle("tcw-active", t.dataset.tf === e.timeframe);
+		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)}`;
+		}
+		let r = this.el.querySelector("[data-role=\"indicators\"]");
+		if (r) {
+			let t = e.activeIndicators.size, n = `${g("trendingUp", 14)} Indicators`;
+			t > 0 && (n += ` <span class="tcw-badge-count">${t}</span>`), r.innerHTML = n;
+		}
+		if (this.chipsContainer) {
+			let t = this.getActiveIndicatorList(e);
+			this.chipsContainer.innerHTML = "";
+			for (let e of t) {
+				let t = document.createElement("div");
+				t.className = "tcw-indicator-chip";
+				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);
+			}
+		}
+		this.themeBtn && (this.themeBtn.innerHTML = e.isDark ? g("moon", 14) : g("sun", 14));
+	}
+	getActiveIndicatorList(e) {
+		let t = [];
+		for (let [n, r] of e.activeIndicators.entries()) t.push({
+			instanceId: r,
+			id: n,
+			label: n.toUpperCase()
+		});
+		return t;
+	}
+	sep() {
+		let e = document.createElement("span");
+		return e.className = "tcw-toolbar-sep", e;
+	}
+	spacer() {
+		let e = document.createElement("span");
+		return e.className = "tcw-toolbar-spacer", e;
+	}
+	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;
+	}
+	destroy() {
+		this.chartTypeDropdown?.destroy(), this.indicatorDropdown?.destroy(), this.el.remove();
+	}
+}, y = [
+	"trendingUp",
+	"minus",
+	"penLine",
+	"hash",
+	"square",
+	"gitBranch",
+	"ruler",
+	"type"
+], b = class {
+	config;
+	callbacks;
+	el;
+	groupWraps = [];
+	groupButtons = [];
+	cursorBtn = null;
+	magnetBtn = null;
+	flyoutEl = null;
+	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) => {
+			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) {
+				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);
+		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);
+		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);
+		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);
+	}
+	showFlyout(e) {
+		let t = this.config.drawingToolGroups[e];
+		if (!t || t.tools.length <= 1) return;
+		this.hideFlyout();
+		let n = document.createElement("div");
+		n.className = "tcw-flyout";
+		let r = document.createElement("div");
+		r.className = "tcw-flyout-header", r.textContent = t.label, n.appendChild(r);
+		for (let e of t.tools) {
+			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.flyoutEl = n, this.groupWraps[e].appendChild(n);
+	}
+	hideFlyout() {
+		this.flyoutEl &&= (this.flyoutEl.remove(), null);
+	}
+	update(e) {
+		this.cursorBtn && this.cursorBtn.classList.toggle("tcw-active", e.activeTool === null);
+		let { drawingToolGroups: t } = this.config;
+		for (let n = 0; n < t.length; n++) {
+			let r = t[n].tools.some((t) => t.value === e.activeTool);
+			this.groupButtons[n].classList.toggle("tcw-active", r);
+		}
+		this.flyoutEl && this.flyoutEl.querySelectorAll(".tcw-flyout-item").forEach((t) => {
+			let n = t;
+			n.classList.toggle("tcw-active", n.dataset.toolValue === e.activeTool);
+		}), this.magnetBtn && (this.magnetBtn.classList.toggle("tcw-active", e.magnetEnabled), this.magnetBtn.title = e.magnetEnabled ? "Magnet ON" : "Magnet OFF");
+	}
+	divider() {
+		let e = document.createElement("div");
+		return e.className = "tcw-sidebar-divider", e;
+	}
+	destroy() {
+		this.hideFlyout(), this.el.remove();
+	}
+}, x = [
+	"style",
+	"display",
+	"scale"
+], S = class {
+	callbacks;
+	backdrop = null;
+	modal = null;
+	currentTab = "style";
+	currentSettings = null;
+	bodyEl = null;
+	tabButtons = [];
+	constructor(e) {
+		this.callbacks = e;
+	}
+	open(e) {
+		this.currentSettings = { ...e }, this.currentTab = "style", this.buildModal();
+	}
+	close() {
+		this.backdrop?.remove(), this.modal?.remove(), this.backdrop = null, this.modal = null, this.bodyEl = null, this.tabButtons = [];
+	}
+	buildModal() {
+		this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.addEventListener("click", () => {
+			this.callbacks.onClose(), this.close();
+		}), document.body.appendChild(this.backdrop), this.modal = document.createElement("div"), this.modal.className = "tcw-modal";
+		let e = document.createElement("div");
+		e.className = "tcw-modal-header";
+		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", () => {
+			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) {
+			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();
+			}), r.appendChild(t), this.tabButtons.push(t);
+		}
+		this.modal.appendChild(r), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-modal-body", this.modal.appendChild(this.bodyEl), this.renderTabContent();
+		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.callbacks.onReset()), i.appendChild(a);
+		let o = document.createElement("button");
+		o.className = "tcw-done-btn", o.textContent = "Done", o.addEventListener("click", () => {
+			this.callbacks.onClose(), this.close();
+		}), i.appendChild(o), this.modal.appendChild(i), document.body.appendChild(this.modal);
+		let s = (e) => {
+			e.key === "Escape" && (document.removeEventListener("keydown", s), this.callbacks.onClose(), this.close());
+		};
+		document.addEventListener("keydown", s);
+	}
+	renderTabContent() {
+		if (!(!this.bodyEl || !this.currentSettings)) switch (this.bodyEl.innerHTML = "", this.currentTab) {
+			case "style":
+				this.renderStyleTab();
+				break;
+			case "display":
+				this.renderDisplayTab();
+				break;
+			case "scale":
+				this.renderScaleTab();
+				break;
+		}
+	}
+	renderStyleTab() {
+		if (!this.bodyEl || !this.currentSettings) return;
+		let e = this.currentSettings, t = this.section("Candle Colors");
+		t.appendChild(this.colorRow("Up Body", e.candleUpColor, (e) => this.patch({ candleUpColor: e }))), t.appendChild(this.colorRow("Down Body", e.candleDownColor, (e) => this.patch({ candleDownColor: e }))), t.appendChild(this.colorRow("Up Wick", e.candleUpWick, (e) => this.patch({ candleUpWick: e }))), t.appendChild(this.colorRow("Down Wick", e.candleDownWick, (e) => this.patch({ candleDownWick: e }))), this.bodyEl.appendChild(t);
+		let n = this.section("Background");
+		n.appendChild(this.colorRow("Background", e.backgroundColor, (e) => this.patch({ backgroundColor: e }))), n.appendChild(this.colorRow("Grid", e.gridColor, (e) => this.patch({ gridColor: e }))), this.bodyEl.appendChild(n);
+	}
+	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, [
+			{
+				label: "Magnet",
+				value: "magnet"
+			},
+			{
+				label: "Normal",
+				value: "normal"
+			},
+			{
+				label: "Hidden",
+				value: "hidden"
+			}
+		], (e) => this.patch({ crosshairMode: e }))), t.appendChild(this.selectRow("Number Locale", e.numberLocale, [
+			{
+				label: "en-US (65,234.00)",
+				value: "en-US"
+			},
+			{
+				label: "de-DE (65.234,00)",
+				value: "de-DE"
+			},
+			{
+				label: "fr-FR (65 234,00)",
+				value: "fr-FR"
+			},
+			{
+				label: "vi-VN (65.234,00)",
+				value: "vi-VN"
+			},
+			{
+				label: "en-IN (65,234.00)",
+				value: "en-IN"
+			},
+			{
+				label: "ja-JP (65,234.00)",
+				value: "ja-JP"
+			}
+		], (e) => this.patch({ numberLocale: e }))), this.bodyEl.appendChild(t);
+	}
+	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);
+	}
+	patch(e) {
+		this.currentSettings && Object.assign(this.currentSettings, e), this.callbacks.onChange(e);
+	}
+	section(e) {
+		let t = document.createElement("div");
+		if (t.className = "tcw-settings-section", e) {
+			let n = document.createElement("div");
+			n.className = "tcw-settings-section-title", n.textContent = e, t.appendChild(n);
+		}
+		return t;
+	}
+	colorRow(e, t, n) {
+		let r = document.createElement("div");
+		r.className = "tcw-settings-row";
+		let i = document.createElement("span");
+		i.className = "tcw-settings-label", i.textContent = e, r.appendChild(i);
+		let a = document.createElement("div");
+		a.className = "tcw-color-picker-wrap";
+		let o = document.createElement("input");
+		o.type = "color", o.value = t;
+		let s = document.createElement("span");
+		return s.className = "tcw-color-hex", s.textContent = t, o.addEventListener("input", () => {
+			s.textContent = o.value, n(o.value);
+		}), a.appendChild(o), a.appendChild(s), r.appendChild(a), r;
+	}
+	toggleRow(e, t, n) {
+		let r = document.createElement("div");
+		r.className = "tcw-settings-row";
+		let i = document.createElement("span");
+		i.className = "tcw-settings-label", i.textContent = e, r.appendChild(i);
+		let a = document.createElement("button");
+		return a.className = `tcw-toggle${t ? " tcw-on" : ""}`, a.addEventListener("click", () => {
+			let e = !a.classList.contains("tcw-on");
+			a.classList.toggle("tcw-on", e), n(e);
+		}), r.appendChild(a), r;
+	}
+	selectRow(e, t, n, r) {
+		let i = document.createElement("div");
+		i.className = "tcw-settings-row";
+		let a = document.createElement("span");
+		a.className = "tcw-settings-label", a.textContent = e, i.appendChild(a);
+		let o = document.createElement("select");
+		o.className = "tcw-settings-select";
+		for (let e of n) {
+			let n = document.createElement("option");
+			n.value = e.value, n.textContent = e.label, e.value === t && (n.selected = !0), o.appendChild(n);
+		}
+		return o.addEventListener("change", () => r(o.value)), i.appendChild(o), i;
+	}
+	destroy() {
+		this.close();
+	}
+}, C = class {
+	el;
+	dotEl;
+	messageEl;
+	infoEl;
+	constructor(e) {
+		this.el = document.createElement("div"), this.el.className = "tcw-statusbar";
+		let t = document.createElement("div");
+		t.className = "tcw-status-indicator", this.dotEl = document.createElement("span"), this.dotEl.className = "tcw-status-dot", t.appendChild(this.dotEl), this.messageEl = document.createElement("span"), t.appendChild(this.messageEl), this.el.appendChild(t), this.infoEl = document.createElement("span"), this.el.appendChild(this.infoEl), e.appendChild(this.el);
+	}
+	update(e) {
+		this.dotEl.className = "tcw-status-dot", e.connectionState === "connected" ? this.dotEl.classList.add("tcw-connected") : e.connectionState === "error" && this.dotEl.classList.add("tcw-error"), this.messageEl.textContent = e.message, this.infoEl.textContent = `${e.symbol} ${e.timeframe}`;
+	}
+	destroy() {
+		this.el.remove();
+	}
+}, w = class {
+	chart;
+	state;
+	toolbar = null;
+	sidebar = null;
+	settings = null;
+	statusBar = null;
+	root;
+	chartContainer;
+	destroyed = !1;
+	options;
+	symbolIndex = 0;
+	symbols;
+	settingsState;
+	adapter = 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: () => {}
+		})), 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();
+	}
+	async setTimeframe(e) {
+		this.state = {
+			...this.state,
+			timeframe: e
+		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter && await this.connectStream();
+	}
+	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.toolbar?.destroy(), this.sidebar?.destroy(), this.settings?.destroy(), this.statusBar?.destroy(), this.chart.destroy(), this.root.remove(), m());
+	}
+	handleSymbolClick() {
+		this.symbolIndex = (this.symbolIndex + 1) % this.symbols.length;
+		let e = this.symbols[this.symbolIndex];
+		this.state = {
+			...this.state,
+			symbol: e
+		}, this.options.onSymbolChange?.(e), this.updateUI(), this.adapter && this.connectStream();
+	}
+	handleTimeframe(e) {
+		this.state = {
+			...this.state,
+			timeframe: e
+		}, this.options.onTimeframeChange?.(e), this.updateUI(), this.adapter && this.connectStream();
+	}
+	handleChartType(e) {
+		this.state = {
+			...this.state,
+			chartType: e
+		}, this.chart.setChartType(e), this.updateUI();
+	}
+	handleAddIndicator(e) {
+		if (this.state.activeIndicators.has(e)) {
+			let t = this.state.activeIndicators.get(e);
+			this.chart.removeIndicator(t);
+			let n = new Map(this.state.activeIndicators);
+			n.delete(e), this.state = {
+				...this.state,
+				activeIndicators: n
+			};
+		} else {
+			let t = this.chart.addIndicator(e);
+			if (t) {
+				let n = new Map(this.state.activeIndicators);
+				n.set(e, t), this.state = {
+					...this.state,
+					activeIndicators: n
+				};
+			}
+		}
+		this.updateUI();
+	}
+	handleRemoveIndicator(e) {
+		this.chart.removeIndicator(e);
+		let t = new Map(this.state.activeIndicators);
+		for (let [n, r] of t.entries()) if (r === e) {
+			t.delete(n);
+			break;
+		}
+		this.state = {
+			...this.state,
+			activeIndicators: t
+		}, this.updateUI();
+	}
+	handleDrawingTool(e) {
+		this.state = {
+			...this.state,
+			activeTool: e
+		}, this.chart.setDrawingTool(e), this.updateUI();
+	}
+	handleCancelDrawing() {
+		this.state = {
+			...this.state,
+			activeTool: null
+		}, this.chart.setDrawingTool(null), this.updateUI();
+	}
+	handleToggleMagnet() {
+		let e = !this.state.magnetEnabled;
+		this.state = {
+			...this.state,
+			magnetEnabled: e
+		}, this.chart.setDrawingMagnet(e), this.updateUI();
+	}
+	handleToggleTheme() {
+		let e = !this.state.isDark;
+		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"), {
+			fontSize: 48,
+			color: e ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)"
+		}), this.updateUI();
+	}
+	openSettings() {
+		this.settings?.open(this.settingsState);
+	}
+	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);
+		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);
+	}
+	async connectStream() {
+		if (this.adapter) {
+			this.state = {
+				...this.state,
+				connectionState: "connecting",
+				connectionMessage: "Connecting..."
+			}, this.updateUI();
+			try {
+				this.chart.disconnectStream(), await this.chart.connect({
+					adapter: this.adapter,
+					symbol: this.state.symbol,
+					timeframe: this.state.timeframe,
+					historyLimit: this.options.historyLimit ?? 500
+				}), 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.state,
+					connectionState: "connected",
+					connectionMessage: "Live"
+				};
+			} catch (e) {
+				this.state = {
+					...this.state,
+					connectionState: "error",
+					connectionMessage: e instanceof Error ? e.message : "Connection failed"
+				};
+			}
+			this.updateUI();
+		}
+	}
+	updateUI() {
+		this.toolbar?.update(this.state), this.sidebar?.update(this.state), this.statusBar?.update({
+			connectionState: this.state.connectionState,
+			message: this.state.connectionMessage,
+			symbol: this.state.symbol,
+			timeframe: this.state.timeframe
+		});
+	}
+	resolveIsDark(e) {
+		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;
+	}
+	isColorDark(e) {
+		if (e.startsWith("#") && e.length >= 7) {
+			let t = parseInt(e.slice(1, 3), 16), n = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
+			return t + n + r < 384;
+		}
+		return !0;
+	}
+};
+//#endregion
+export { w as ChartWidget };
+
+//# sourceMappingURL=index.js.map