@forgecharts/sdk 1.1.29 → 1.1.31

package/dist/react/internal.js

@@ -6943,6 +6943,924 @@ var IndicatorDAG = class {
   }
 };
 
+// src/pine/pine-lexer.ts
+var PineLexer = class {
+  _src;
+  _pos = 0;
+  _line = 1;
+  _col = 1;
+  /** Version extracted from `//@version=N` */
+  version = 5;
+  constructor(src) {
+    this._src = src.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  }
+  tokenize() {
+    const raw = this._rawTokenize();
+    return this._injectIndents(raw);
+  }
+  // ─── Raw tokenisation ────────────────────────────────────────────────────────
+  _rawTokenize() {
+    const tokens = [];
+    while (this._pos < this._src.length) {
+      const ch = this._src[this._pos];
+      if (ch === "\n") {
+        tokens.push(this._make("NEWLINE", "\n"));
+        this._pos++;
+        this._line++;
+        this._col = 1;
+        continue;
+      }
+      if (ch === " " || ch === "	") {
+        this._pos++;
+        this._col++;
+        continue;
+      }
+      if (ch === "/" && this._peek(1) === "/") {
+        const commentStart = this._pos;
+        while (this._pos < this._src.length && this._src[this._pos] !== "\n") {
+          this._pos++;
+          this._col++;
+        }
+        const comment = this._src.slice(commentStart, this._pos);
+        const vMatch = comment.match(/\/\/@version\s*=\s*(\d+)/);
+        if (vMatch) this.version = parseInt(vMatch[1], 10);
+        continue;
+      }
+      if (ch >= "0" && ch <= "9" || ch === "." && this._isDigit(this._peek(1))) {
+        tokens.push(this._readNumber());
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        tokens.push(this._readString(ch));
+        continue;
+      }
+      if (this._isAlpha(ch)) {
+        const tok = this._readIdent();
+        tokens.push(tok);
+        continue;
+      }
+      const two = this._src.slice(this._pos, this._pos + 2);
+      if (two === "<=") {
+        tokens.push(this._make("LTE", two));
+        this._adv(2);
+        continue;
+      }
+      if (two === ">=") {
+        tokens.push(this._make("GTE", two));
+        this._adv(2);
+        continue;
+      }
+      if (two === "==") {
+        tokens.push(this._make("EQEQ", two));
+        this._adv(2);
+        continue;
+      }
+      if (two === "!=") {
+        tokens.push(this._make("NEQ", two));
+        this._adv(2);
+        continue;
+      }
+      if (two === ":=") {
+        tokens.push(this._make("REASSIGN", two));
+        this._adv(2);
+        continue;
+      }
+      if (two === "=>") {
+        tokens.push(this._make("ARROW", two));
+        this._adv(2);
+        continue;
+      }
+      const singleOps = {
+        "+": "PLUS",
+        "-": "MINUS",
+        "*": "STAR",
+        "/": "SLASH",
+        "%": "PERCENT",
+        "<": "LT",
+        ">": "GT",
+        "?": "QMARK",
+        ":": "COLON",
+        "(": "LPAREN",
+        ")": "RPAREN",
+        "[": "LBRACKET",
+        "]": "RBRACKET",
+        ",": "COMMA",
+        ".": "DOT",
+        "=": "ASSIGN"
+      };
+      if (ch in singleOps) {
+        tokens.push(this._make(singleOps[ch], ch));
+        this._pos++;
+        this._col++;
+        continue;
+      }
+      throw new SyntaxError(`[Pine] Unexpected character '${ch}' at ${this._line}:${this._col}`);
+    }
+    tokens.push(this._make("EOF", ""));
+    return tokens;
+  }
+  // ─── Indent/Dedent injection ─────────────────────────────────────────────────
+  _injectIndents(raw) {
+    const out = [];
+    const indentStack = [0];
+    let i = 0;
+    while (i < raw.length) {
+      const tok = raw[i];
+      if (tok.kind !== "NEWLINE") {
+        out.push(tok);
+        i++;
+        continue;
+      }
+      out.push(tok);
+      i++;
+      let spaces = 0;
+      let j = i;
+      while (j < raw.length && raw[j].kind === "NEWLINE") {
+        out.push(raw[j]);
+        j++;
+      }
+      i = j;
+      if (i >= raw.length || raw[i].kind === "EOF") break;
+      const nextTok = raw[i];
+      spaces = nextTok.col - 1;
+      const currentIndent = indentStack[indentStack.length - 1];
+      if (spaces > currentIndent) {
+        indentStack.push(spaces);
+        out.push({ kind: "INDENT", value: "", line: nextTok.line, col: 1 });
+      } else {
+        while (spaces < indentStack[indentStack.length - 1]) {
+          indentStack.pop();
+          out.push({ kind: "DEDENT", value: "", line: nextTok.line, col: 1 });
+        }
+      }
+    }
+    while (indentStack.length > 1) {
+      indentStack.pop();
+      out.push({ kind: "DEDENT", value: "", line: 0, col: 0 });
+    }
+    out.push({ kind: "EOF", value: "", line: this._line, col: this._col });
+    return out;
+  }
+  // ─── Helpers ─────────────────────────────────────────────────────────────────
+  _make(kind, value) {
+    return { kind, value, line: this._line, col: this._col };
+  }
+  _peek(offset) {
+    return this._src[this._pos + offset] ?? "";
+  }
+  _adv(n = 1) {
+    this._pos += n;
+    this._col += n;
+  }
+  _isDigit(ch) {
+    return ch >= "0" && ch <= "9";
+  }
+  _isAlpha(ch) {
+    return ch >= "a" && ch <= "z" || ch >= "A" && ch <= "Z" || ch === "_";
+  }
+  _isAlphaNum(ch) {
+    return this._isAlpha(ch) || this._isDigit(ch);
+  }
+  _readNumber() {
+    const start = this._pos;
+    const startCol = this._col;
+    while (this._pos < this._src.length) {
+      const c = this._src[this._pos];
+      if (this._isDigit(c) || c === ".") {
+        this._pos++;
+        this._col++;
+      } else break;
+    }
+    return { kind: "NUMBER", value: this._src.slice(start, this._pos), line: this._line, col: startCol };
+  }
+  _readString(quote) {
+    const startCol = this._col;
+    this._pos++;
+    this._col++;
+    let result = "";
+    while (this._pos < this._src.length && this._src[this._pos] !== quote) {
+      if (this._src[this._pos] === "\\") {
+        this._pos++;
+        this._col++;
+        const esc = this._src[this._pos] ?? "";
+        result += esc === "n" ? "\n" : esc === "t" ? "	" : esc;
+      } else {
+        result += this._src[this._pos];
+      }
+      this._pos++;
+      this._col++;
+    }
+    this._pos++;
+    this._col++;
+    return { kind: "STRING", value: result, line: this._line, col: startCol };
+  }
+  _readIdent() {
+    const start = this._pos;
+    const startCol = this._col;
+    while (this._pos < this._src.length && this._isAlphaNum(this._src[this._pos])) {
+      this._pos++;
+      this._col++;
+    }
+    const name = this._src.slice(start, this._pos);
+    if (name === "true" || name === "false") {
+      return { kind: "BOOL", value: name, line: this._line, col: startCol };
+    }
+    return { kind: "IDENT", value: name, line: this._line, col: startCol };
+  }
+};
+
+// src/pine/pine-parser.ts
+var PineParser = class {
+  _tokens;
+  _pos = 0;
+  version;
+  constructor(src) {
+    const lexer = new PineLexer(src);
+    this._tokens = lexer.tokenize();
+    this.version = lexer.version;
+  }
+  parse() {
+    const stmts = [];
+    this._skipNL();
+    while (!this._check("EOF")) {
+      const s = this._stmt();
+      if (s !== null) stmts.push(s);
+      this._skipNL();
+    }
+    return { kind: "PineProgram", version: this.version, stmts };
+  }
+  // ─── Statements ─────────────────────────────────────────────────────────────
+  _stmt() {
+    const t = this._cur();
+    const loc = { line: t.line, col: t.col };
+    if (t.kind === "IDENT" && (t.value === "var" || t.value === "varip")) {
+      return this._varDecl();
+    }
+    if (t.kind === "IDENT" && t.value === "if") {
+      return this._ifStmt();
+    }
+    if (t.kind === "IDENT") {
+      const p1 = this._peekKind(1);
+      const p2 = this._peekKind(2);
+      const isAssign = p1 === "ASSIGN" || p1 === "REASSIGN";
+      const isTyped = p1 === "IDENT" && (p2 === "ASSIGN" || p2 === "REASSIGN");
+      if (isAssign || isTyped) {
+        return this._assignStmt();
+      }
+    }
+    if (t.kind === "IDENT" && t.value === "indicator") {
+      return this._indicatorDecl();
+    }
+    const expr = this._expr();
+    this._consumeNLorEOF();
+    return { kind: "PineExprStmt", expr, loc };
+  }
+  _varDecl() {
+    const tok = this._advance();
+    const modifier = tok.value;
+    const loc = { line: tok.line, col: tok.col };
+    let typeHint;
+    if (this._check("IDENT") && this._peekKind(1) === "ASSIGN") {
+      const maybeType = this._cur().value;
+      if (["float", "int", "bool", "string", "color", "series", "simple", "const"].includes(maybeType)) {
+        typeHint = maybeType;
+        this._advance();
+      }
+    }
+    const name = this._consume("IDENT", "Expected variable name after 'var'").value;
+    this._consume("ASSIGN", "Expected '=' in var declaration");
+    const value = this._expr();
+    this._consumeNLorEOF();
+    return typeHint !== void 0 ? { kind: "PineVarDecl", modifier, name, typeHint, value, loc } : { kind: "PineVarDecl", modifier, name, value, loc };
+  }
+  _assignStmt() {
+    const nameTok = this._advance();
+    const loc = { line: nameTok.line, col: nameTok.col };
+    const name = nameTok.value;
+    let op = "=";
+    if (this._check("IDENT")) {
+      this._advance();
+    }
+    if (this._check("REASSIGN")) {
+      op = ":=";
+      this._advance();
+    } else {
+      this._consume("ASSIGN", "Expected '=' or ':='");
+    }
+    const value = this._expr();
+    this._consumeNLorEOF();
+    return { kind: "PineAssign", name, op, value, loc };
+  }
+  _indicatorDecl() {
+    const tok = this._advance();
+    const loc = { line: tok.line, col: tok.col };
+    this._consume("LPAREN", "Expected '(' after 'indicator'");
+    const { args, namedArgs } = this._argList();
+    this._consume("RPAREN", "Expected ')' after indicator args");
+    this._consumeNLorEOF();
+    return { kind: "PineIndicatorDecl", args, namedArgs, loc };
+  }
+  _ifStmt() {
+    const tok = this._advance();
+    const loc = { line: tok.line, col: tok.col };
+    const condition = this._expr();
+    this._consumeNLorEOF();
+    const then = this._indentedBlock();
+    const else_ = [];
+    if (this._check("IDENT") && this._cur().value === "else") {
+      this._advance();
+      this._consumeNLorEOF();
+      else_.push(...this._indentedBlock());
+    }
+    return { kind: "PineIf", condition, then, else_, loc };
+  }
+  _indentedBlock() {
+    const stmts = [];
+    if (!this._check("INDENT")) return stmts;
+    this._advance();
+    this._skipNL();
+    while (!this._check("DEDENT") && !this._check("EOF")) {
+      const s = this._stmt();
+      if (s !== null) stmts.push(s);
+      this._skipNL();
+    }
+    if (this._check("DEDENT")) this._advance();
+    return stmts;
+  }
+  // ─── Expressions ────────────────────────────────────────────────────────────
+  _expr() {
+    return this._ternary();
+  }
+  _ternary() {
+    let left = this._or();
+    if (this._match("QMARK")) {
+      const consequent = this._expr();
+      this._consume("COLON", "Expected ':' in ternary");
+      const alternate = this._expr();
+      const node = {
+        kind: "PineTernary",
+        condition: left,
+        consequent,
+        alternate,
+        loc: this._locOf(left)
+      };
+      return node;
+    }
+    return left;
+  }
+  _or() {
+    let left = this._and();
+    while (this._checkIdent("or")) {
+      this._advance();
+      const right = this._and();
+      left = this._bin("or", left, right);
+    }
+    return left;
+  }
+  _and() {
+    let left = this._not();
+    while (this._checkIdent("and")) {
+      this._advance();
+      const right = this._not();
+      left = this._bin("and", left, right);
+    }
+    return left;
+  }
+  _not() {
+    if (this._checkIdent("not")) {
+      const loc = this._locOfCur();
+      this._advance();
+      const operand = this._comparison();
+      const node = { kind: "PineUnary", op: "not", operand, loc };
+      return node;
+    }
+    return this._comparison();
+  }
+  _comparison() {
+    let left = this._addition();
+    while (true) {
+      if (this._match("LTE")) {
+        left = this._bin("<=", left, this._addition());
+        continue;
+      }
+      if (this._match("GTE")) {
+        left = this._bin(">=", left, this._addition());
+        continue;
+      }
+      if (this._match("EQEQ")) {
+        left = this._bin("==", left, this._addition());
+        continue;
+      }
+      if (this._match("NEQ")) {
+        left = this._bin("!=", left, this._addition());
+        continue;
+      }
+      if (this._match("LT")) {
+        left = this._bin("<", left, this._addition());
+        continue;
+      }
+      if (this._match("GT")) {
+        left = this._bin(">", left, this._addition());
+        continue;
+      }
+      break;
+    }
+    return left;
+  }
+  _addition() {
+    let left = this._multiply();
+    while (true) {
+      if (this._match("PLUS")) {
+        left = this._bin("+", left, this._multiply());
+        continue;
+      }
+      if (this._match("MINUS")) {
+        left = this._bin("-", left, this._multiply());
+        continue;
+      }
+      break;
+    }
+    return left;
+  }
+  _multiply() {
+    let left = this._unary();
+    while (true) {
+      if (this._match("STAR")) {
+        left = this._bin("*", left, this._unary());
+        continue;
+      }
+      if (this._match("SLASH")) {
+        left = this._bin("/", left, this._unary());
+        continue;
+      }
+      if (this._match("PERCENT")) {
+        left = this._bin("%", left, this._unary());
+        continue;
+      }
+      break;
+    }
+    return left;
+  }
+  _unary() {
+    if (this._match("MINUS")) {
+      const operand = this._unary();
+      const node = { kind: "PineUnary", op: "-", operand, loc: this._locOfCur() };
+      return node;
+    }
+    return this._postfix();
+  }
+  _postfix() {
+    let expr = this._primary();
+    while (this._check("LBRACKET")) {
+      const loc = this._locOfCur();
+      this._advance();
+      const index = this._expr();
+      this._consume("RBRACKET", "Expected ']'");
+      const node = { kind: "PineIndex", series: expr, index, loc };
+      expr = node;
+    }
+    return expr;
+  }
+  _primary() {
+    const t = this._cur();
+    const loc = { line: t.line, col: t.col };
+    if (t.kind === "NUMBER") {
+      this._advance();
+      const node = { kind: "PineNumberLit", value: parseFloat(t.value), loc };
+      return node;
+    }
+    if (t.kind === "STRING") {
+      this._advance();
+      const node = { kind: "PineStringLit", value: t.value, loc };
+      return node;
+    }
+    if (t.kind === "BOOL") {
+      this._advance();
+      const node = { kind: "PineBoolLit", value: t.value === "true", loc };
+      return node;
+    }
+    if (t.kind === "IDENT" && t.value === "na") {
+      this._advance();
+      const node = { kind: "PineNa", loc };
+      return node;
+    }
+    if (t.kind === "IDENT" && this._peekKind(1) === "DOT") {
+      const ns = t.value;
+      this._advance();
+      this._advance();
+      const member = this._consume("IDENT", "Expected member name after '.'").value;
+      if (this._check("LPAREN")) {
+        this._advance();
+        const { args, namedArgs } = this._argList();
+        this._consume("RPAREN", "Expected ')'");
+        const node2 = { kind: "PineNsCall", namespace: ns, fn: member, args, namedArgs, loc };
+        return node2;
+      }
+      const node = { kind: "PineMember", object: ns, prop: member, loc };
+      return node;
+    }
+    if (t.kind === "IDENT" && this._peekKind(1) === "LPAREN") {
+      const fn = t.value;
+      this._advance();
+      this._advance();
+      const { args, namedArgs } = this._argList();
+      this._consume("RPAREN", "Expected ')'");
+      const node = { kind: "PineCall", fn, args, namedArgs, loc };
+      return node;
+    }
+    if (t.kind === "IDENT") {
+      this._advance();
+      const node = { kind: "PineIdent", name: t.value, loc };
+      return node;
+    }
+    if (t.kind === "LPAREN") {
+      this._advance();
+      const inner = this._expr();
+      this._consume("RPAREN", "Expected ')'");
+      return inner;
+    }
+    throw new SyntaxError(`[Pine] Unexpected token '${t.value}' (${t.kind}) at ${t.line}:${t.col}`);
+  }
+  // ─── Arg list helper ────────────────────────────────────────────────────────
+  _argList() {
+    const args = [];
+    const namedArgs = /* @__PURE__ */ new Map();
+    if (this._check("RPAREN")) return { args, namedArgs };
+    this._parseOneArg(args, namedArgs);
+    while (this._match("COMMA")) {
+      if (this._check("RPAREN")) break;
+      this._parseOneArg(args, namedArgs);
+    }
+    return { args, namedArgs };
+  }
+  _parseOneArg(args, namedArgs) {
+    if (this._check("IDENT") && this._peekKind(1) === "ASSIGN" && this._peekKind(2) !== "ASSIGN") {
+      const key = this._advance().value;
+      this._advance();
+      const val = this._expr();
+      namedArgs.set(key, val);
+    } else {
+      args.push(this._expr());
+    }
+  }
+  // ─── Token helpers ───────────────────────────────────────────────────────────
+  _cur() {
+    return this._tokens[this._pos];
+  }
+  _advance() {
+    return this._tokens[this._pos++];
+  }
+  _check(kind) {
+    return this._cur().kind === kind;
+  }
+  _checkIdent(name) {
+    const t = this._cur();
+    return t.kind === "IDENT" && t.value === name;
+  }
+  _peekKind(offset) {
+    return this._tokens[this._pos + offset]?.kind ?? "EOF";
+  }
+  _match(kind) {
+    if (this._check(kind)) {
+      this._advance();
+      return true;
+    }
+    return false;
+  }
+  _consume(kind, msg) {
+    if (this._check(kind)) return this._advance();
+    const t = this._cur();
+    throw new SyntaxError(`[Pine] ${msg} \u2014 got '${t.value}' (${t.kind}) at ${t.line}:${t.col}`);
+  }
+  _skipNL() {
+    while (this._check("NEWLINE")) this._advance();
+  }
+  _consumeNLorEOF() {
+    if (this._check("NEWLINE") || this._check("EOF")) {
+      if (this._check("NEWLINE")) this._advance();
+    }
+  }
+  _locOfCur() {
+    return { line: this._cur().line, col: this._cur().col };
+  }
+  _locOf(expr) {
+    return expr.loc;
+  }
+  _bin(op, left, right) {
+    return { kind: "PineBinary", op, left, right, loc: this._locOf(left) };
+  }
+};
+
+// src/pine/pine-transpiler.ts
+var TA_MAP = {
+  sma: "sma",
+  ema: "ema",
+  rsi: "rsi",
+  wma: "wma",
+  rma: "rma",
+  stdev: "stdev",
+  highest: "highest",
+  lowest: "lowest",
+  change: "change",
+  mom: "mom",
+  atr: "atr",
+  crossover: "crossover",
+  crossunder: "crossunder",
+  barssince: "barssince"
+};
+var MATH_MAP = {
+  abs: "abs",
+  max: "max",
+  min: "min",
+  round: "round",
+  floor: "floor",
+  ceil: "ceil",
+  sqrt: "sqrt",
+  log: "log",
+  pow: "pow",
+  sign: "sign",
+  exp: "exp"
+};
+var COLOR_MAP = {
+  red: '"#f23645"',
+  green: '"#26a69a"',
+  blue: '"#2196f3"',
+  white: '"#ffffff"',
+  black: '"#000000"',
+  yellow: '"#ffeb3b"',
+  orange: '"#ff9800"',
+  purple: '"#9c27b0"',
+  aqua: '"#00bcd4"',
+  gray: '"#787b86"',
+  silver: '"#b2b5be"',
+  lime: '"#4caf50"',
+  maroon: '"#880000"',
+  navy: '"#000080"',
+  olive: '"#808000"',
+  teal: '"#008080"',
+  fuchsia: '"#ff00ff"'
+};
+var UNSUPPORTED_FN = /* @__PURE__ */ new Set([
+  "plotshape",
+  "plotarrow",
+  "plotbar",
+  "plotcandle",
+  "barcolor",
+  "bgcolor",
+  "alertcondition",
+  "alert",
+  "strategy",
+  "label",
+  "line",
+  "box",
+  "table",
+  "request"
+]);
+var PineTranspiler = class {
+  _diag;
+  _indent = 0;
+  _out = [];
+  constructor(diag) {
+    this._diag = diag;
+  }
+  transpile(prog) {
+    this._out = [];
+    this._indent = 0;
+    for (const stmt of prog.stmts) {
+      this._stmt(stmt);
+    }
+    return this._out.join("");
+  }
+  // ─── Statements ─────────────────────────────────────────────────────────────
+  _stmt(s) {
+    switch (s.kind) {
+      case "PineIndicatorDecl":
+        return this._indicatorDecl(s);
+      case "PineVarDecl":
+        return this._varDecl(s);
+      case "PineAssign":
+        return this._assign(s);
+      case "PineExprStmt":
+        return this._exprStmt(s);
+      case "PineIf":
+        return this._ifStmt(s);
+    }
+  }
+  _indicatorDecl(s) {
+    const title = s.args[0];
+    const titleStr = title ? this._expr(title) : '"Script"';
+    this._line(`indicator(${titleStr})`);
+  }
+  _varDecl(s) {
+    this._line(`${s.name} = ${this._expr(s.value)}`);
+  }
+  _assign(s) {
+    this._line(`${s.name} = ${this._expr(s.value)}`);
+  }
+  _exprStmt(s) {
+    const expr = s.expr;
+    if ((expr.kind === "PineCall" || expr.kind === "PineNsCall") && UNSUPPORTED_FN.has(expr.kind === "PineCall" ? expr.fn : expr.fn)) {
+      const name = expr.kind === "PineCall" ? expr.fn : `${expr.namespace}.${expr.fn}`;
+      this._diag.add("warning", `'${name}()' is not supported and will be ignored`, s.loc, "PINE_UNSUPPORTED_FN");
+      this._line(`// ${name}() not supported`);
+      return;
+    }
+    this._line(this._expr(expr));
+  }
+  _ifStmt(s) {
+    this._line(`if ${this._expr(s.condition)}`);
+    this._indent++;
+    for (const st of s.then) this._stmt(st);
+    if (s.then.length === 0) this._line("0");
+    this._indent--;
+    if (s.else_.length > 0) {
+      this._line("else");
+      this._indent++;
+      for (const st of s.else_) this._stmt(st);
+      this._indent--;
+    }
+  }
+  // ─── Expressions ────────────────────────────────────────────────────────────
+  _expr(e) {
+    switch (e.kind) {
+      case "PineNumberLit":
+        return this._numLit(e);
+      case "PineStringLit":
+        return `"${e.value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+      case "PineBoolLit":
+        return e.value ? "true" : "false";
+      case "PineNa":
+        return "na";
+      case "PineIdent":
+        return e.name;
+      case "PineNsCall":
+        return this._nsCall(e);
+      case "PineCall":
+        return this._call(e);
+      case "PineIndex":
+        return `${this._expr(e.series)}[${this._expr(e.index)}]`;
+      case "PineBinary":
+        return this._binary(e);
+      case "PineUnary":
+        return this._unary(e);
+      case "PineTernary":
+        return `${this._expr(e.condition)} ? ${this._expr(e.consequent)} : ${this._expr(e.alternate)}`;
+      case "PineMember":
+        return this._member(e);
+      // PineColorLit is resolved via PineMember for color.red etc
+      default:
+        return "0";
+    }
+  }
+  _numLit(e) {
+    return Number.isInteger(e.value) ? String(e.value) : String(e.value);
+  }
+  _nsCall(e) {
+    const { namespace: ns, fn } = e;
+    if (ns === "ta") {
+      const mapped = TA_MAP[fn];
+      if (mapped) {
+        const args = this._positionalArgs(e.args);
+        return `${mapped}(${args})`;
+      }
+      this._diag.add("warning", `'ta.${fn}()' is not supported`, e.loc, "PINE_UNSUPPORTED_FN");
+      return `/* ta.${fn} not supported */ 0`;
+    }
+    if (ns === "math") {
+      const mapped = MATH_MAP[fn];
+      if (mapped) {
+        const args = this._positionalArgs(e.args);
+        return `${mapped}(${args})`;
+      }
+      this._diag.add("warning", `'math.${fn}()' is not supported`, e.loc, "PINE_UNSUPPORTED_FN");
+      return `/* math.${fn} not supported */ 0`;
+    }
+    if (ns === "input") {
+      return this._inputNsCall(e);
+    }
+    if (ns === "strategy" || ns === "label" || ns === "line" || ns === "box" || ns === "table" || ns === "request") {
+      this._diag.add("warning", `'${ns}.${fn}()' is not supported`, e.loc, "PINE_UNSUPPORTED_FN");
+      return `/* ${ns}.${fn} not supported */ 0`;
+    }
+    this._diag.add("warning", `'${ns}.${fn}()' is not supported`, e.loc, "PINE_UNSUPPORTED_FN");
+    return `/* ${ns}.${fn} not supported */ 0`;
+  }
+  _inputNsCall(e) {
+    if (e.fn === "source") {
+      return e.args[0] ? this._expr(e.args[0]) : "close";
+    }
+    const defVal = e.args[0] ?? e.namedArgs.get("defval");
+    return defVal ? `input(${this._expr(defVal)})` : "input(0)";
+  }
+  _call(e) {
+    if (UNSUPPORTED_FN.has(e.fn)) {
+      this._diag.add("warning", `'${e.fn}()' is not supported and will be ignored`, e.loc, "PINE_UNSUPPORTED_FN");
+      return `/* ${e.fn} not supported */ 0`;
+    }
+    if (e.fn === "input") {
+      const defVal = e.args[0] ?? e.namedArgs.get("defval");
+      return defVal ? `input(${this._expr(defVal)})` : "input(0)";
+    }
+    if (e.fn === "plot") {
+      return this._plotCall(e);
+    }
+    if (e.fn === "indicator") {
+      const title = e.args[0];
+      const titleStr = title ? this._expr(title) : '"Script"';
+      return `indicator(${titleStr})`;
+    }
+    const args = this._positionalArgs(e.args);
+    return `${e.fn}(${args})`;
+  }
+  _plotCall(e) {
+    const series = e.args[0];
+    if (!series) return "/* plot() missing series */";
+    return `plot(${this._expr(series)})`;
+  }
+  _member(e) {
+    if (e.object === "color") {
+      const hex = COLOR_MAP[e.prop];
+      if (hex) return hex;
+      this._diag.add("info", `'color.${e.prop}' is not a known color`, e.loc, "PINE_UNKNOWN_COLOR");
+      return '"#888888"';
+    }
+    if (e.object === "line" || e.object === "label" || e.object === "box") {
+      return `"${e.prop}"`;
+    }
+    if (e.object === "timeframe" || e.object === "syminfo" || e.object === "session") {
+      this._diag.add("info", `'${e.object}.${e.prop}' is not supported`, e.loc, "PINE_UNSUPPORTED_FN");
+      return "0";
+    }
+    return `${e.object}_${e.prop}`;
+  }
+  _binary(e) {
+    const l = this._expr(e.left);
+    const r = this._expr(e.right);
+    return `(${l} ${e.op} ${r})`;
+  }
+  _unary(e) {
+    if (e.op === "not") return `not ${this._expr(e.operand)}`;
+    return `${e.op}${this._expr(e.operand)}`;
+  }
+  _positionalArgs(args) {
+    return args.map((a) => this._expr(a)).join(", ");
+  }
+  // ─── Output helpers ─────────────────────────────────────────────────────────
+  _line(code) {
+    const pad = "  ".repeat(this._indent);
+    this._out.push(`${pad}${code}
+`);
+  }
+};
+
+// src/pine/diagnostics.ts
+var DiagnosticBag = class {
+  _diags = [];
+  add(severity, message, loc, code) {
+    this._diags.push({ severity, message, line: loc.line, col: loc.col, code });
+  }
+  get diagnostics() {
+    return this._diags;
+  }
+  hasErrors() {
+    return this._diags.some((d) => d.severity === "error");
+  }
+};
+
+// src/pine/PineCompiler.ts
+var PineCompiler = class _PineCompiler {
+  /**
+   * Compile Pine Script source to TScript.
+   * Parse errors throw a `SyntaxError`; semantic problems populate diagnostics.
+   */
+  compile(pineSource) {
+    const diag = new DiagnosticBag();
+    const parser = new PineParser(pineSource);
+    const program = parser.parse();
+    const transpiler = new PineTranspiler(diag);
+    const tscript = transpiler.transpile(program);
+    return {
+      tscript,
+      diagnostics: diag.diagnostics,
+      ok: !diag.hasErrors()
+    };
+  }
+  /**
+   * Convenience: compile + run against a bar series.
+   * Returns the plot outputs and any diagnostics.
+   */
+  static run(pineSource, bars) {
+    const compiler = new _PineCompiler();
+    const result = compiler.compile(pineSource);
+    if (!result.ok) {
+      return { plots: [], diagnostics: result.diagnostics };
+    }
+    const indicator = new TScriptIndicator(result.tscript);
+    const plots = indicator.run(bars);
+    return { plots, diagnostics: result.diagnostics };
+  }
+};
+
 // src/api/drawing tools/pointers menu/dot.ts
 var DOT_RADIUS = 3;
 var DOT_COLOR = "var(--crosshair-overlay, rgba(255,255,255,0.75))";
@@ -10414,1146 +11332,2181 @@ function IndicatorsDialog({ onAdd, onClose }) {
       /* @__PURE__ */ jsx(
         "input",
         {
-          ref: inputRef,
-          className: "ind-search-input",
+          ref: inputRef,
+          className: "ind-search-input",
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "Search indicators\u2026",
+          autoComplete: "off",
+          spellCheck: false
+        }
+      ),
+      query && /* @__PURE__ */ jsx("button", { className: "ind-search-clear", onClick: () => setQuery(""), "aria-label": "Clear", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", width: "10", height: "10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none", children: [
+        /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "10", y2: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "2", x2: "2", y2: "10" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ind-tabs", children: CATEGORIES.map((cat) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `ind-tab${cat === category ? " active" : ""}`,
+        onClick: () => setCategory(cat),
+        children: cat
+      },
+      cat
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "ind-list-wrap", children: visible.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "ind-empty", children: [
+      'No indicators match "',
+      query,
+      '"'
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ind-section-hdr", children: [
+        /* @__PURE__ */ jsx("span", { children: "Built-in" }),
+        /* @__PURE__ */ jsx("span", { className: "ind-section-count", children: visible.length })
+      ] }),
+      visible.map((entry) => {
+        const isAdded = added === entry.type;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `ind-list-row${isAdded ? " added" : ""}`,
+            onClick: () => handleAdd(entry),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "ind-list-info", children: [
+                /* @__PURE__ */ jsx("span", { className: "ind-list-name", children: entry.label }),
+                /* @__PURE__ */ jsxs("span", { className: "ind-list-meta", children: [
+                  entry.author,
+                  " \xB7 ",
+                  entry.category
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: `ind-list-badge${entry.defaultConfig.overlay ? " overlay" : " pane"}`, children: entry.defaultConfig.overlay ? "Overlay" : "Pane" }),
+              /* @__PURE__ */ jsx("span", { className: "ind-list-add", children: isAdded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 10", width: "11", height: "10", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: /* @__PURE__ */ jsx("polyline", { points: "1,5 4,8 11,1" }) }),
+                "Added"
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", width: "11", height: "11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "1", x2: "6", y2: "11" }),
+                  /* @__PURE__ */ jsx("line", { x1: "1", y1: "6", x2: "11", y2: "6" })
+                ] }),
+                "Add to Chart"
+              ] }) })
+            ]
+          },
+          entry.type
+        );
+      })
+    ] }) })
+  ] }) });
+}
+var DEFAULT_FAVORITES = ["1m", "5m", "15m", "30m", "1h", "4h", "1d", "1w"];
+var TF_LABELS = {
+  "1m": "1 minute",
+  "2m": "2 minutes",
+  "3m": "3 minutes",
+  "4m": "4 minutes",
+  "5m": "5 minutes",
+  "10m": "10 minutes",
+  "15m": "15 minutes",
+  "20m": "20 minutes",
+  "30m": "30 minutes",
+  "45m": "45 minutes",
+  "1h": "1 hour",
+  "2h": "2 hours",
+  "3h": "3 hours",
+  "4h": "4 hours",
+  "6h": "6 hours",
+  "8h": "8 hours",
+  "12h": "12 hours",
+  "1d": "1 day",
+  "2d": "2 days",
+  "3d": "3 days",
+  "1w": "1 week",
+  "2w": "2 weeks",
+  "1M": "1 month",
+  "3M": "3 months",
+  "6M": "6 months",
+  "12M": "12 months"
+};
+var TF_GROUPS_ALL = [
+  { label: "Minutes", items: ["1m", "2m", "3m", "4m", "5m", "10m", "15m", "20m", "30m", "45m"] },
+  { label: "Hours", items: ["1h", "2h", "3h", "4h", "6h", "8h", "12h"] },
+  { label: "Days", items: ["1d", "2d", "3d", "1w", "2w", "1M", "3M", "6M", "12M"] }
+];
+function TimeframeDropdown({
+  timeframe,
+  customTimeframes,
+  favorites,
+  onSelect,
+  onToggleFavorite,
+  onAddCustom,
+  onClose
+}) {
+  const [collapsed, setCollapsed] = useState({});
+  const [addingCustom, setAddingCustom] = useState(false);
+  const [input, setInput] = useState("");
+  const ref = useRef(null);
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+  const commit = () => {
+    const val = input.trim();
+    if (!val) return;
+    onAddCustom(val);
+    onSelect(val);
+    setInput("");
+    onClose();
+  };
+  const toggleGroup = (label) => setCollapsed((prev) => ({ ...prev, [label]: !prev[label] }));
+  return /* @__PURE__ */ jsxs("div", { ref, className: "tf-dropdown", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "tf-dropdown-add-custom",
+        onClick: () => setAddingCustom((a) => !a),
+        children: "+ Add custom interval..."
+      }
+    ),
+    addingCustom && /* @__PURE__ */ jsxs("div", { className: "tf-dropdown-add-row", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "tf-dropdown-input",
           type: "text",
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          placeholder: "Search indicators\u2026",
-          autoComplete: "off",
-          spellCheck: false
+          value: input,
+          placeholder: "e.g. 2h, 45m",
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") commit();
+          },
+          autoFocus: true
         }
       ),
-      query && /* @__PURE__ */ jsx("button", { className: "ind-search-clear", onClick: () => setQuery(""), "aria-label": "Clear", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", width: "10", height: "10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none", children: [
-        /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "10", y2: "10" }),
-        /* @__PURE__ */ jsx("line", { x1: "10", y1: "2", x2: "2", y2: "10" })
-      ] }) })
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "tf-dropdown-add-btn",
+          disabled: !input.trim(),
+          onClick: commit,
+          children: "Add"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ind-tabs", children: CATEGORIES.map((cat) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: `ind-tab${cat === category ? " active" : ""}`,
-        onClick: () => setCategory(cat),
-        children: cat
+    TF_GROUPS_ALL.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "tf-dropdown-group-hdr",
+          onClick: () => toggleGroup(group.label),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: group.label }),
+            /* @__PURE__ */ jsx("span", { className: `tf-dropdown-chevron${collapsed[group.label] ? " collapsed" : ""}`, children: "\u2227" })
+          ]
+        }
+      ),
+      !collapsed[group.label] && group.items.map((tf) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "tf-dropdown-row",
+          onClick: () => {
+            onSelect(tf);
+            onClose();
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: TF_LABELS[tf] ?? tf }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "tf-star-btn",
+                title: favorites.includes(tf) ? "Remove from toolbar" : "Add to toolbar",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleFavorite(tf);
+                },
+                children: /* @__PURE__ */ jsx("span", { className: `tf-star${favorites.includes(tf) ? " favorited" : ""}`, children: "\u2605" })
+              }
+            )
+          ]
+        },
+        tf
+      ))
+    ] }, group.label)),
+    customTimeframes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "tf-dropdown-group-hdr",
+          onClick: () => toggleGroup("Custom"),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "Custom" }),
+            /* @__PURE__ */ jsx("span", { className: `tf-dropdown-chevron${collapsed["Custom"] ? " collapsed" : ""}`, children: "\u2227" })
+          ]
+        }
+      ),
+      !collapsed["Custom"] && customTimeframes.map((tf) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "tf-dropdown-row",
+          onClick: () => {
+            onSelect(tf);
+            onClose();
+          },
+          children: /* @__PURE__ */ jsx("span", { children: tf })
+        },
+        tf
+      ))
+    ] })
+  ] });
+}
+function TopToolbar({
+  symbol,
+  timeframe,
+  theme,
+  customTimeframes,
+  favorites,
+  onSymbolChange,
+  onTimeframeChange,
+  onAddCustomTimeframe,
+  onFavoritesChange,
+  onAddIndicator,
+  onToggleTheme,
+  onCopyScreenshot,
+  onDownloadScreenshot,
+  onFullscreen,
+  isFullscreen,
+  currentLayoutName,
+  currentLayoutId,
+  autoSave,
+  onSaveLayout,
+  onLoadLayout,
+  onRenameLayout,
+  onCopyLayout,
+  onToggleAutoSave,
+  onDeleteLayout,
+  onOpenLayoutInNewTab,
+  onFetchLayouts,
+  symbolResolver,
+  showTradeButton,
+  tradeDrawerOpen,
+  onToggleTradeDrawer
+}) {
+  const [tfOpen, setTfOpen] = useState(false);
+  const [symOpen, setSymOpen] = useState(false);
+  const [indOpen, setIndOpen] = useState(false);
+  const [ssOpen, setSsOpen] = useState(false);
+  const ssRef = useRef(null);
+  const tfRef = useRef(null);
+  useEffect(() => {
+    if (!ssOpen) return;
+    const handler = (e) => {
+      if (ssRef.current && !ssRef.current.contains(e.target)) setSsOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [ssOpen]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "6px 12px",
+        background: "var(--toolbar-bg)",
+        borderRadius: 8,
+        flexShrink: 0
       },
-      cat
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: "ind-list-wrap", children: visible.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "ind-empty", children: [
-      'No indicators match "',
-      query,
-      '"'
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "ind-section-hdr", children: [
-        /* @__PURE__ */ jsx("span", { children: "Built-in" }),
-        /* @__PURE__ */ jsx("span", { className: "ind-section-count", children: visible.length })
-      ] }),
-      visible.map((entry) => {
-        const isAdded = added === entry.type;
-        return /* @__PURE__ */ jsxs(
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, letterSpacing: "-0.5px", color: "var(--accent)" }, children: "ForgeCharts" }),
+        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+        /* @__PURE__ */ jsxs(
           "button",
           {
-            className: `ind-list-row${isAdded ? " added" : ""}`,
-            onClick: () => handleAdd(entry),
+            className: "sym-trigger",
+            onClick: () => setSymOpen(true),
+            title: "Search symbols",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  viewBox: "0 0 14 14",
+                  width: "12",
+                  height: "12",
+                  stroke: "currentColor",
+                  fill: "none",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "5.5", r: "4" }),
+                    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "13", y2: "13" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: symbol }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 6", width: "8", height: "6", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 0l5 6 5-6z" }) })
+            ]
+          }
+        ),
+        symOpen && /* @__PURE__ */ jsx(
+          SymbolSearchDialog,
+          {
+            current: symbol,
+            onSelect: onSymbolChange,
+            onClose: () => setSymOpen(false),
+            symbolResolver
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+        /* @__PURE__ */ jsxs("div", { ref: tfRef, style: { display: "flex", gap: 2, position: "relative" }, children: [
+          favorites.map((tf) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: tf === timeframe ? "active" : void 0,
+              onClick: () => onTimeframeChange(tf),
+              children: tf
+            },
+            tf
+          )),
+          !favorites.includes(timeframe) && timeframe && /* @__PURE__ */ jsx("button", { className: "active", style: { fontStyle: "italic" }, children: timeframe }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: tfOpen ? "active" : void 0,
+              onClick: () => setTfOpen((o) => !o),
+              title: "More timeframes",
+              style: { fontSize: 11, padding: "4px 7px" },
+              children: "\u25BE"
+            }
+          ),
+          tfOpen && /* @__PURE__ */ jsx(
+            TimeframeDropdown,
+            {
+              timeframe,
+              customTimeframes,
+              favorites,
+              onSelect: onTimeframeChange,
+              onToggleFavorite: (tf) => {
+                const next = favorites.includes(tf) ? favorites.filter((f) => f !== tf) : [...favorites, tf];
+                onFavoritesChange(next);
+              },
+              onAddCustom: onAddCustomTimeframe,
+              onClose: () => setTfOpen(false)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `ind-trigger${indOpen ? " active" : ""}`,
+            onClick: () => setIndOpen((o) => !o),
+            title: "Indicators",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "ind-list-info", children: [
-                /* @__PURE__ */ jsx("span", { className: "ind-list-name", children: entry.label }),
-                /* @__PURE__ */ jsxs("span", { className: "ind-list-meta", children: [
-                  entry.author,
-                  " \xB7 ",
-                  entry.category
-                ] })
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", fill: "none", strokeWidth: "1.6", strokeLinecap: "round", children: [
+                /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 9,10 14,4" }),
+                /* @__PURE__ */ jsx("line", { x1: "11", y1: "2", x2: "14", y2: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "14", y1: "2", x2: "14", y2: "5" })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: `ind-list-badge${entry.defaultConfig.overlay ? " overlay" : " pane"}`, children: entry.defaultConfig.overlay ? "Overlay" : "Pane" }),
-              /* @__PURE__ */ jsx("span", { className: "ind-list-add", children: isAdded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 10", width: "11", height: "10", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: /* @__PURE__ */ jsx("polyline", { points: "1,5 4,8 11,1" }) }),
-                "Added"
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", width: "11", height: "11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none", children: [
-                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "1", x2: "6", y2: "11" }),
-                  /* @__PURE__ */ jsx("line", { x1: "1", y1: "6", x2: "11", y2: "6" })
-                ] }),
-                "Add to Chart"
-              ] }) })
+              "Indicators"
             ]
-          },
-          entry.type
-        );
-      })
-    ] }) })
-  ] }) });
-}
-var DEFAULT_FAVORITES = ["1m", "5m", "15m", "30m", "1h", "4h", "1d", "1w"];
-var TF_LABELS = {
-  "1m": "1 minute",
-  "2m": "2 minutes",
-  "3m": "3 minutes",
-  "4m": "4 minutes",
-  "5m": "5 minutes",
-  "10m": "10 minutes",
-  "15m": "15 minutes",
-  "20m": "20 minutes",
-  "30m": "30 minutes",
-  "45m": "45 minutes",
-  "1h": "1 hour",
-  "2h": "2 hours",
-  "3h": "3 hours",
-  "4h": "4 hours",
-  "6h": "6 hours",
-  "8h": "8 hours",
-  "12h": "12 hours",
-  "1d": "1 day",
-  "2d": "2 days",
-  "3d": "3 days",
-  "1w": "1 week",
-  "2w": "2 weeks",
-  "1M": "1 month",
-  "3M": "3 months",
-  "6M": "6 months",
-  "12M": "12 months"
-};
-var TF_GROUPS_ALL = [
-  { label: "Minutes", items: ["1m", "2m", "3m", "4m", "5m", "10m", "15m", "20m", "30m", "45m"] },
-  { label: "Hours", items: ["1h", "2h", "3h", "4h", "6h", "8h", "12h"] },
-  { label: "Days", items: ["1d", "2d", "3d", "1w", "2w", "1M", "3M", "6M", "12M"] }
-];
-function TimeframeDropdown({
-  timeframe,
-  customTimeframes,
-  favorites,
-  onSelect,
-  onToggleFavorite,
-  onAddCustom,
-  onClose
-}) {
-  const [collapsed, setCollapsed] = useState({});
-  const [addingCustom, setAddingCustom] = useState(false);
-  const [input, setInput] = useState("");
-  const ref = useRef(null);
-  useEffect(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onClose]);
-  const commit = () => {
-    const val = input.trim();
-    if (!val) return;
-    onAddCustom(val);
-    onSelect(val);
-    setInput("");
-    onClose();
-  };
-  const toggleGroup = (label) => setCollapsed((prev) => ({ ...prev, [label]: !prev[label] }));
-  return /* @__PURE__ */ jsxs("div", { ref, className: "tf-dropdown", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "tf-dropdown-add-custom",
-        onClick: () => setAddingCustom((a) => !a),
-        children: "+ Add custom interval..."
-      }
-    ),
-    addingCustom && /* @__PURE__ */ jsxs("div", { className: "tf-dropdown-add-row", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          className: "tf-dropdown-input",
-          type: "text",
-          value: input,
-          placeholder: "e.g. 2h, 45m",
-          onChange: (e) => setInput(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter") commit();
-          },
-          autoFocus: true
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "tf-dropdown-add-btn",
-          disabled: !input.trim(),
-          onClick: commit,
-          children: "Add"
-        }
-      )
-    ] }),
-    TF_GROUPS_ALL.map((group) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: "tf-dropdown-group-hdr",
-          onClick: () => toggleGroup(group.label),
-          children: [
-            /* @__PURE__ */ jsx("span", { children: group.label }),
-            /* @__PURE__ */ jsx("span", { className: `tf-dropdown-chevron${collapsed[group.label] ? " collapsed" : ""}`, children: "\u2227" })
-          ]
-        }
-      ),
-      !collapsed[group.label] && group.items.map((tf) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: "tf-dropdown-row",
-          onClick: () => {
-            onSelect(tf);
-            onClose();
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { children: TF_LABELS[tf] ?? tf }),
+          }
+        ),
+        indOpen && /* @__PURE__ */ jsx(
+          IndicatorsDialog,
+          {
+            onAdd: (config) => {
+              onAddIndicator(config);
+            },
+            onClose: () => setIndOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center", gap: 4 }, children: [
+          showTradeButton && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: `top-trade-btn${tradeDrawerOpen ? " active" : ""}`,
+                onClick: onToggleTradeDrawer,
+                title: "Trade \u2014 Connect your broker",
+                style: { display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 8px", fontSize: 12 },
+                children: [
+                  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: [
+                    /* @__PURE__ */ jsx("rect", { x: "1.5", y: "3", width: "13", height: "10", rx: "1.5" }),
+                    /* @__PURE__ */ jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8" }),
+                    /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11" })
+                  ] }),
+                  "Trade"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "toolbar-sep" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            LayoutMenu,
+            {
+              currentName: currentLayoutName,
+              currentLayoutId,
+              autoSave,
+              onFetchLayouts,
+              onSave: onSaveLayout,
+              onLoad: onLoadLayout,
+              onRename: onRenameLayout,
+              onCopy: onCopyLayout,
+              onToggleAutoSave,
+              onDelete: onDeleteLayout,
+              onOpenInNewTab: onOpenLayoutInNewTab
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onToggleTheme,
+              title: `Switch to ${theme === "dark" ? "light" : "dark"} mode`,
+              style: { fontSize: 14, padding: "4px 8px" },
+              children: theme === "dark" ? "\u2600" : "\u263E"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { ref: ssRef, style: { position: "relative" }, children: [
             /* @__PURE__ */ jsx(
               "button",
               {
-                className: "tf-star-btn",
-                title: favorites.includes(tf) ? "Remove from toolbar" : "Add to toolbar",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onToggleFavorite(tf);
-                },
-                children: /* @__PURE__ */ jsx("span", { className: `tf-star${favorites.includes(tf) ? " favorited" : ""}`, children: "\u2605" })
+                className: ssOpen ? "active" : void 0,
+                onClick: () => setSsOpen((o) => !o),
+                title: "Screenshot",
+                style: { display: "inline-flex", alignItems: "center", padding: "4px 7px" },
+                children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
+                  /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "12", height: "9", rx: "1" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8.5", r: "2.5" }),
+                  /* @__PURE__ */ jsx("path", { d: "M6 4l1-2h2l1 2" })
+                ] })
               }
-            )
-          ]
-        },
-        tf
-      ))
-    ] }, group.label)),
-    customTimeframes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
+            ),
+            ssOpen && /* @__PURE__ */ jsxs("div", { className: "ss-dropdown", children: [
+              /* @__PURE__ */ jsxs("button", { className: "ss-dropdown-item", onClick: () => {
+                setSsOpen(false);
+                onCopyScreenshot();
+              }, children: [
+                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
+                  /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1" }),
+                  /* @__PURE__ */ jsx("path", { d: "M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1" })
+                ] }),
+                "Copy to Clipboard"
+              ] }),
+              /* @__PURE__ */ jsxs("button", { className: "ss-dropdown-item", onClick: () => {
+                setSsOpen(false);
+                onDownloadScreenshot();
+              }, children: [
+                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "11" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "4,7 8,11 12,7" }),
+                  /* @__PURE__ */ jsx("line", { x1: "2", y1: "14", x2: "14", y2: "14" })
+                ] }),
+                "Download PNG"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onFullscreen,
+              title: isFullscreen ? "Exit Fullscreen" : "Fullscreen",
+              style: { display: "inline-flex", alignItems: "center", padding: "4px 7px" },
+              children: isFullscreen ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M6 2v4H2M10 2v4h4M10 14v-4h4M6 14v-4H2" }) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var WatchListIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "9", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "11", width: "10", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx("circle", { cx: "13", cy: "11.75", r: "2.5" }),
+  /* @__PURE__ */ jsx("line", { x1: "13", y1: "10.75", x2: "13", y2: "12.75", strokeWidth: "1.2" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "11.75", x2: "14", y2: "11.75", strokeWidth: "1.2" })
+] });
+function RightToolbar({ watchlistOpen, onToggleWatchlist }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 2,
+        padding: "6px 4px",
+        background: "var(--toolbar-bg)",
+        borderRadius: 8,
+        width: 40,
+        flexShrink: 0,
+        userSelect: "none"
+      },
+      children: /* @__PURE__ */ jsx(
         "button",
         {
-          className: "tf-dropdown-group-hdr",
-          onClick: () => toggleGroup("Custom"),
-          children: [
-            /* @__PURE__ */ jsx("span", { children: "Custom" }),
-            /* @__PURE__ */ jsx("span", { className: `tf-dropdown-chevron${collapsed["Custom"] ? " collapsed" : ""}`, children: "\u2227" })
-          ]
+          title: "Watch List",
+          className: `drawing-tool-btn${watchlistOpen ? " is-active" : ""}`,
+          onClick: onToggleWatchlist,
+          children: /* @__PURE__ */ jsx(WatchListIcon, {})
         }
-      ),
-      !collapsed["Custom"] && customTimeframes.map((tf) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "tf-dropdown-row",
-          onClick: () => {
-            onSelect(tf);
-            onClose();
-          },
-          children: /* @__PURE__ */ jsx("span", { children: tf })
-        },
-        tf
-      ))
-    ] })
-  ] });
+      )
+    }
+  );
+}
+var TIMEZONE_OPTIONS = [
+  { label: "UTC", value: "UTC" },
+  { label: "Exchange", value: "exchange" },
+  // Americas
+  { label: "(UTC-10) Honolulu", value: "Pacific/Honolulu" },
+  { label: "(UTC-9) Anchorage", value: "America/Anchorage" },
+  { label: "(UTC-9) Juneau", value: "America/Juneau" },
+  { label: "(UTC-8) Los Angeles", value: "America/Los_Angeles" },
+  { label: "(UTC-8) Vancouver", value: "America/Vancouver" },
+  { label: "(UTC-7) Denver", value: "America/Denver" },
+  { label: "(UTC-7) Phoenix", value: "America/Phoenix" },
+  { label: "(UTC-6) Chicago", value: "America/Chicago" },
+  { label: "(UTC-6) Mexico City", value: "America/Mexico_City" },
+  { label: "(UTC-6) San Salvador", value: "America/El_Salvador" },
+  { label: "(UTC-5) Bogota", value: "America/Bogota" },
+  { label: "(UTC-5) Lima", value: "America/Lima" },
+  { label: "(UTC-5) New York", value: "America/New_York" },
+  { label: "(UTC-5) Toronto", value: "America/Toronto" },
+  { label: "(UTC-4) Caracas", value: "America/Caracas" },
+  { label: "(UTC-4) Halifax", value: "America/Halifax" },
+  { label: "(UTC-3) Buenos Aires", value: "America/Argentina/Buenos_Aires" },
+  { label: "(UTC-3) Santiago", value: "America/Santiago" },
+  { label: "(UTC-3) Sao Paulo", value: "America/Sao_Paulo" },
+  { label: "(UTC-2) Mid-Atlantic", value: "Atlantic/South_Georgia" },
+  { label: "(UTC-1) Azores", value: "Atlantic/Azores" },
+  // Europe / Africa (UTC / UTC+0)
+  { label: "(UTC) Casablanca", value: "Africa/Casablanca" },
+  { label: "(UTC) Dublin", value: "Europe/Dublin" },
+  { label: "(UTC) Lisbon", value: "Europe/Lisbon" },
+  { label: "(UTC) London", value: "Europe/London" },
+  { label: "(UTC) Reykjavik", value: "Atlantic/Reykjavik" },
+  // UTC+1
+  { label: "(UTC+1) Amsterdam", value: "Europe/Amsterdam" },
+  { label: "(UTC+1) Belgrade", value: "Europe/Belgrade" },
+  { label: "(UTC+1) Berlin", value: "Europe/Berlin" },
+  { label: "(UTC+1) Bratislava", value: "Europe/Bratislava" },
+  { label: "(UTC+1) Brussels", value: "Europe/Brussels" },
+  { label: "(UTC+1) Budapest", value: "Europe/Budapest" },
+  { label: "(UTC+1) Copenhagen", value: "Europe/Copenhagen" },
+  { label: "(UTC+1) Lagos", value: "Africa/Lagos" },
+  { label: "(UTC+1) Luxembourg", value: "Europe/Luxembourg" },
+  { label: "(UTC+1) Madrid", value: "Europe/Madrid" },
+  { label: "(UTC+1) Malta", value: "Europe/Malta" },
+  { label: "(UTC+1) Oslo", value: "Europe/Oslo" },
+  { label: "(UTC+1) Paris", value: "Europe/Paris" },
+  { label: "(UTC+1) Prague", value: "Europe/Prague" },
+  { label: "(UTC+1) Rome", value: "Europe/Rome" },
+  { label: "(UTC+1) Sarajevo", value: "Europe/Sarajevo" },
+  { label: "(UTC+1) Stockholm", value: "Europe/Stockholm" },
+  { label: "(UTC+1) Vienna", value: "Europe/Vienna" },
+  { label: "(UTC+1) Warsaw", value: "Europe/Warsaw" },
+  { label: "(UTC+1) Zurich", value: "Europe/Zurich" },
+  // UTC+2
+  { label: "(UTC+2) Athens", value: "Europe/Athens" },
+  { label: "(UTC+2) Bucharest", value: "Europe/Bucharest" },
+  { label: "(UTC+2) Cairo", value: "Africa/Cairo" },
+  { label: "(UTC+2) Helsinki", value: "Europe/Helsinki" },
+  { label: "(UTC+2) Istanbul", value: "Europe/Istanbul" },
+  { label: "(UTC+2) Jerusalem", value: "Asia/Jerusalem" },
+  { label: "(UTC+2) Johannesburg", value: "Africa/Johannesburg" },
+  { label: "(UTC+2) Kyiv", value: "Europe/Kiev" },
+  { label: "(UTC+2) Riga", value: "Europe/Riga" },
+  { label: "(UTC+2) Sofia", value: "Europe/Sofia" },
+  { label: "(UTC+2) Tallinn", value: "Europe/Tallinn" },
+  { label: "(UTC+2) Vilnius", value: "Europe/Vilnius" },
+  // UTC+3
+  { label: "(UTC+3) Baghdad", value: "Asia/Baghdad" },
+  { label: "(UTC+3) Kuwait", value: "Asia/Kuwait" },
+  { label: "(UTC+3) Moscow", value: "Europe/Moscow" },
+  { label: "(UTC+3) Nairobi", value: "Africa/Nairobi" },
+  { label: "(UTC+3) Qatar", value: "Asia/Qatar" },
+  { label: "(UTC+3) Riyadh", value: "Asia/Riyadh" },
+  // UTC+3:30 / UTC+4
+  { label: "(UTC+3:30) Tehran", value: "Asia/Tehran" },
+  { label: "(UTC+4) Abu Dhabi", value: "Asia/Dubai" },
+  { label: "(UTC+4) Baku", value: "Asia/Baku" },
+  { label: "(UTC+4) Dubai", value: "Asia/Dubai" },
+  { label: "(UTC+4) Muscat", value: "Asia/Muscat" },
+  { label: "(UTC+4) Tbilisi", value: "Asia/Tbilisi" },
+  { label: "(UTC+4:30) Kabul", value: "Asia/Kabul" },
+  // UTC+5
+  { label: "(UTC+5) Islamabad", value: "Asia/Karachi" },
+  { label: "(UTC+5) Karachi", value: "Asia/Karachi" },
+  { label: "(UTC+5) Tashkent", value: "Asia/Tashkent" },
+  { label: "(UTC+5:30) Chennai", value: "Asia/Kolkata" },
+  { label: "(UTC+5:30) Mumbai", value: "Asia/Kolkata" },
+  { label: "(UTC+5:30) New Delhi", value: "Asia/Kolkata" },
+  { label: "(UTC+5:45) Kathmandu", value: "Asia/Kathmandu" },
+  // UTC+6
+  { label: "(UTC+6) Almaty", value: "Asia/Almaty" },
+  { label: "(UTC+6) Dhaka", value: "Asia/Dhaka" },
+  // UTC+7
+  { label: "(UTC+7) Bangkok", value: "Asia/Bangkok" },
+  { label: "(UTC+7) Hanoi", value: "Asia/Ho_Chi_Minh" },
+  { label: "(UTC+7) Jakarta", value: "Asia/Jakarta" },
+  // UTC+8
+  { label: "(UTC+8) Beijing", value: "Asia/Shanghai" },
+  { label: "(UTC+8) Hong Kong", value: "Asia/Hong_Kong" },
+  { label: "(UTC+8) Kuala Lumpur", value: "Asia/Kuala_Lumpur" },
+  { label: "(UTC+8) Perth", value: "Australia/Perth" },
+  { label: "(UTC+8) Shanghai", value: "Asia/Shanghai" },
+  { label: "(UTC+8) Singapore", value: "Asia/Singapore" },
+  { label: "(UTC+8) Taipei", value: "Asia/Taipei" },
+  // UTC+9
+  { label: "(UTC+9) Osaka", value: "Asia/Tokyo" },
+  { label: "(UTC+9) Seoul", value: "Asia/Seoul" },
+  { label: "(UTC+9) Tokyo", value: "Asia/Tokyo" },
+  { label: "(UTC+9:30) Adelaide", value: "Australia/Adelaide" },
+  { label: "(UTC+9:30) Darwin", value: "Australia/Darwin" },
+  // UTC+10
+  { label: "(UTC+10) Brisbane", value: "Australia/Brisbane" },
+  { label: "(UTC+10) Canberra", value: "Australia/Sydney" },
+  { label: "(UTC+10) Melbourne", value: "Australia/Melbourne" },
+  { label: "(UTC+10) Sydney", value: "Australia/Sydney" },
+  // UTC+12
+  { label: "(UTC+12) Auckland", value: "Pacific/Auckland" },
+  { label: "(UTC+12) Fiji", value: "Pacific/Fiji" }
+];
+function getUtcOffsetLabel(iana) {
+  try {
+    const parts = new Intl.DateTimeFormat("en", {
+      timeZone: iana,
+      timeZoneName: "shortOffset"
+    }).formatToParts(/* @__PURE__ */ new Date());
+    const tzName = parts.find((p) => p.type === "timeZoneName")?.value ?? "GMT";
+    const offset = tzName.replace(/^GMT/, "");
+    return offset ? `(UTC${offset})` : "(UTC)";
+  } catch {
+    return "(UTC)";
+  }
+}
+function getDisplayLabel(opt) {
+  if (opt.value === "UTC" || opt.value === "exchange") return opt.label;
+  const city = opt.label.replace(/^\(UTC[^)]*\)\s*/, "");
+  return `${getUtcOffsetLabel(opt.value)} ${city}`;
+}
+var CRYPTO_EXCHANGES = /* @__PURE__ */ new Set([
+  "BINANCE",
+  "BINANCEUS",
+  "BINANCEUSDM",
+  "BINANCECOINM",
+  "COINBASE",
+  "COINBASEPRO",
+  "KRAKEN",
+  "KRAKENFX",
+  "BYBIT",
+  "BITGET",
+  "OKX",
+  "OKEX",
+  "HUOBI",
+  "HTX",
+  "KUCOIN",
+  "GEMINI",
+  "BITSTAMP",
+  "BITFINEX",
+  "MEXC",
+  "GATEIO",
+  "GATE",
+  "BITMEX",
+  "DERIBIT"
+]);
+function symbolSupportsSession(symbol) {
+  const exchange = symbol.includes(":") ? symbol.split(":")[0].toUpperCase() : "";
+  return exchange !== "" && !CRYPTO_EXCHANGES.has(exchange);
+}
+function useClockTime(timezone) {
+  const [time, setTime] = useState(() => _formatClock(timezone));
+  useEffect(() => {
+    setTime(_formatClock(timezone));
+    const id = setInterval(() => setTime(_formatClock(timezone)), 1e3);
+    return () => clearInterval(id);
+  }, [timezone]);
+  return time;
+}
+function _formatClock(timezone) {
+  const tz = timezone === "exchange" ? "UTC" : timezone;
+  try {
+    return new Intl.DateTimeFormat("en-GB", {
+      timeZone: tz,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    }).format(/* @__PURE__ */ new Date());
+  } catch {
+    return new Intl.DateTimeFormat("en-GB", {
+      timeZone: "UTC",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    }).format(/* @__PURE__ */ new Date());
+  }
 }
-function TopToolbar({
-  symbol,
-  timeframe,
-  theme,
-  customTimeframes,
-  favorites,
-  onSymbolChange,
-  onTimeframeChange,
-  onAddCustomTimeframe,
-  onFavoritesChange,
-  onAddIndicator,
-  onToggleTheme,
-  onCopyScreenshot,
-  onDownloadScreenshot,
-  onFullscreen,
-  isFullscreen,
-  currentLayoutName,
-  currentLayoutId,
-  autoSave,
-  onSaveLayout,
-  onLoadLayout,
-  onRenameLayout,
-  onCopyLayout,
-  onToggleAutoSave,
-  onDeleteLayout,
-  onOpenLayoutInNewTab,
-  onFetchLayouts,
-  symbolResolver,
-  showTradeButton,
-  tradeDrawerOpen,
-  onToggleTradeDrawer
-}) {
-  const [tfOpen, setTfOpen] = useState(false);
-  const [symOpen, setSymOpen] = useState(false);
-  const [indOpen, setIndOpen] = useState(false);
-  const [ssOpen, setSsOpen] = useState(false);
-  const ssRef = useRef(null);
-  const tfRef = useRef(null);
+function BottomToolbar({ symbol, timezone, onTimezoneChange, session, onSessionChange, onToggleScriptDrawer, scriptDrawerOpen }) {
+  const showSession = symbolSupportsSession(symbol);
+  const [open, setOpen] = useState(false);
+  const [sessionOpen, setSessionOpen] = useState(false);
+  const rootRef = useRef(null);
+  const sessionRef = useRef(null);
+  const clockTime = useClockTime(timezone);
+  const current = TIMEZONE_OPTIONS.find((o) => o.value === timezone) ?? TIMEZONE_OPTIONS[0];
   useEffect(() => {
-    if (!ssOpen) return;
+    if (!open) return;
     const handler = (e) => {
-      if (ssRef.current && !ssRef.current.contains(e.target)) setSsOpen(false);
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
-  }, [ssOpen]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "6px 12px",
-        background: "var(--toolbar-bg)",
-        borderRadius: 8,
-        flexShrink: 0
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, letterSpacing: "-0.5px", color: "var(--accent)" }, children: "ForgeCharts" }),
-        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
+  }, [open]);
+  useEffect(() => {
+    if (!sessionOpen) return;
+    const handler = (e) => {
+      if (sessionRef.current && !sessionRef.current.contains(e.target)) setSessionOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [sessionOpen]);
+  return /* @__PURE__ */ jsxs("div", { className: "bottom-bar", children: [
+    /* @__PURE__ */ jsx("div", { className: "bottom-bar-left", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: `bottom-bar-btn${scriptDrawerOpen ? " active" : ""}`,
+        onClick: onToggleScriptDrawer,
+        title: "Script Engine",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 16 16",
+              width: "11",
+              height: "11",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.6",
+              strokeLinecap: "round",
+              children: [
+                /* @__PURE__ */ jsx("polyline", { points: "4,6 2,8 4,10" }),
+                /* @__PURE__ */ jsx("polyline", { points: "12,6 14,8 12,10" }),
+                /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "7", y2: "13" })
+              ]
+            }
+          ),
+          "Script"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "bottom-bar-right", children: [
+      /* @__PURE__ */ jsxs("div", { ref: rootRef, style: { position: "relative", display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: "sym-trigger",
-            onClick: () => setSymOpen(true),
-            title: "Search symbols",
+            className: `bottom-bar-btn${open ? " active" : ""}`,
+            onClick: () => setOpen((o) => !o),
+            title: "Chart timezone",
             children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  viewBox: "0 0 14 14",
-                  width: "12",
-                  height: "12",
-                  stroke: "currentColor",
-                  fill: "none",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round",
-                  children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "5.5", r: "4" }),
-                    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "13", y2: "13" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: symbol }),
-              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 6", width: "8", height: "6", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 0l5 6 5-6z" }) })
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.2", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5.5" }),
+                /* @__PURE__ */ jsx("path", { d: "M7 1.5C7 1.5 9 4 9 7s-2 5.5-2 5.5M7 1.5C7 1.5 5 4 5 7s2 5.5 2 5.5" }),
+                /* @__PURE__ */ jsx("line", { x1: "1.5", y1: "7", x2: "12.5", y2: "7" }),
+                /* @__PURE__ */ jsx("line", { x1: "2", y1: "4.5", x2: "12", y2: "4.5" }),
+                /* @__PURE__ */ jsx("line", { x1: "2", y1: "9.5", x2: "12", y2: "9.5" })
+              ] }),
+              getDisplayLabel(current)
             ]
           }
         ),
-        symOpen && /* @__PURE__ */ jsx(
-          SymbolSearchDialog,
-          {
-            current: symbol,
-            onSelect: onSymbolChange,
-            onClose: () => setSymOpen(false),
-            symbolResolver
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
-        /* @__PURE__ */ jsxs("div", { ref: tfRef, style: { display: "flex", gap: 2, position: "relative" }, children: [
-          favorites.map((tf) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("span", { className: "bottom-bar-clock", title: `Current time in ${getDisplayLabel(current)}`, children: clockTime }),
+        open && /* @__PURE__ */ jsxs("div", { className: "bottom-bar-dropdown bottom-bar-dropdown--right", children: [
+          /* @__PURE__ */ jsx("div", { className: "bottom-bar-dropdown-section", children: "Timezone" }),
+          TIMEZONE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
             "button",
             {
-              className: tf === timeframe ? "active" : void 0,
-              onClick: () => onTimeframeChange(tf),
-              children: tf
+              className: `bottom-bar-dropdown-item${opt.value === timezone ? " current" : ""}`,
+              onClick: () => {
+                onTimezoneChange(opt.value);
+                setOpen(false);
+              },
+              children: [
+                opt.value === timezone && /* @__PURE__ */ jsx("span", { className: "bottom-bar-check", children: "\xE2\u0153\u201C" }),
+                getDisplayLabel(opt)
+              ]
             },
-            tf
-          )),
-          !favorites.includes(timeframe) && timeframe && /* @__PURE__ */ jsx("button", { className: "active", style: { fontStyle: "italic" }, children: timeframe }),
-          /* @__PURE__ */ jsx(
+            opt.value + opt.label
+          ))
+        ] })
+      ] }),
+      showSession && /* @__PURE__ */ jsxs("div", { ref: sessionRef, style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `bottom-bar-btn${sessionOpen ? " active" : ""}`,
+            onClick: () => setSessionOpen((o) => !o),
+            title: "Trading session",
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.2", children: [
+                /* @__PURE__ */ jsx("rect", { x: "1.5", y: "2.5", width: "11", height: "9", rx: "1" }),
+                /* @__PURE__ */ jsx("line", { x1: "1.5", y1: "5.5", x2: "12.5", y2: "5.5" }),
+                /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "2.5", x2: "4.5", y2: "1" }),
+                /* @__PURE__ */ jsx("line", { x1: "9.5", y1: "2.5", x2: "9.5", y2: "1" })
+              ] }),
+              session === "extended" ? "Extended hours" : "Regular hours"
+            ]
+          }
+        ),
+        sessionOpen && /* @__PURE__ */ jsxs("div", { className: "bottom-bar-dropdown bottom-bar-dropdown--right", children: [
+          /* @__PURE__ */ jsx("div", { className: "bottom-bar-dropdown-section", children: "Sessions" }),
+          /* @__PURE__ */ jsxs(
             "button",
             {
-              className: tfOpen ? "active" : void 0,
-              onClick: () => setTfOpen((o) => !o),
-              title: "More timeframes",
-              style: { fontSize: 11, padding: "4px 7px" },
-              children: "\u25BE"
+              className: `bottom-bar-dropdown-item${session === "regular" ? " current" : ""}`,
+              onClick: () => {
+                onSessionChange("regular");
+                setSessionOpen(false);
+              },
+              children: [
+                session === "regular" && /* @__PURE__ */ jsx("span", { className: "bottom-bar-check", children: "\xE2\u0153\u201C" }),
+                /* @__PURE__ */ jsxs("span", { className: "bottom-bar-session-label", children: [
+                  /* @__PURE__ */ jsx("strong", { children: "Regular trading hours" }),
+                  /* @__PURE__ */ jsx("span", { children: "Exchange session only (RTH) \xE2\u20AC\u201D cleaner signals, higher liquidity" })
+                ] })
+              ]
             }
           ),
-          tfOpen && /* @__PURE__ */ jsx(
-            TimeframeDropdown,
+          /* @__PURE__ */ jsxs(
+            "button",
             {
-              timeframe,
-              customTimeframes,
-              favorites,
-              onSelect: onTimeframeChange,
-              onToggleFavorite: (tf) => {
-                const next = favorites.includes(tf) ? favorites.filter((f) => f !== tf) : [...favorites, tf];
-                onFavoritesChange(next);
+              className: `bottom-bar-dropdown-item${session === "extended" ? " current" : ""}`,
+              onClick: () => {
+                onSessionChange("extended");
+                setSessionOpen(false);
               },
-              onAddCustom: onAddCustomTimeframe,
-              onClose: () => setTfOpen(false)
+              children: [
+                session === "extended" && /* @__PURE__ */ jsx("span", { className: "bottom-bar-check", children: "\xE2\u0153\u201C" }),
+                /* @__PURE__ */ jsxs("span", { className: "bottom-bar-session-label", children: [
+                  /* @__PURE__ */ jsx("strong", { children: "Extended / electronic hours" }),
+                  /* @__PURE__ */ jsx("span", { children: "Includes pre-market & after-hours (ETH) \xE2\u20AC\u201D full price range" })
+                ] })
+              ]
             }
           )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ChartWorkspace({
+  // TabBar
+  tabs,
+  activeTabId,
+  onSelectTab,
+  onAddTab,
+  onCloseTab,
+  onRenameTab,
+  // TopToolbar
+  symbol,
+  timeframe,
+  theme,
+  customTimeframes,
+  favoriteTfs,
+  onSymbolChange,
+  onTimeframeChange,
+  onAddCustomTimeframe,
+  onFavoriteTfsChange,
+  onAddIndicator,
+  onToggleTheme,
+  onCopyScreenshot,
+  onDownloadScreenshot,
+  onFullscreen,
+  isFullscreen,
+  currentLayoutName,
+  currentLayoutId,
+  autoSave,
+  onFetchLayouts,
+  onSaveLayout,
+  onLoadLayout,
+  onRenameLayout,
+  onCopyLayout,
+  onToggleAutoSave,
+  onDeleteLayout,
+  onOpenLayoutInNewTab,
+  showTradeButton,
+  tradeDrawerOpen,
+  onToggleTradeDrawer,
+  symbolResolver,
+  // RightToolbar
+  watchlistOpen,
+  onToggleWatchlist,
+  // BottomToolbar
+  activeSymbol,
+  timezone,
+  onTimezoneChange,
+  session,
+  onSessionChange,
+  scriptDrawerOpen,
+  onToggleScriptDrawer,
+  // Chart + state
+  chartSlots,
+  isLicensed,
+  wsLoaded,
+  drawers
+}) {
+  const tabItems = tabs.map((t) => ({
+    id: t.id,
+    label: t.label,
+    ...t.isSaved !== void 0 ? { isSaved: t.isSaved } : {}
+  }));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: "var(--shelf-bg)",
+        padding: 6,
+        gap: 4
+      },
+      children: [
+        !wsLoaded && /* @__PURE__ */ jsxs("div", { style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--bg)",
+          zIndex: 1e3
+        }, children: [
+          /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", style: { animation: "spin 0.9s linear infinite" }, children: [
+            /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "12", fill: "none", stroke: "var(--border)", strokeWidth: "3" }),
+            /* @__PURE__ */ jsx("path", { d: "M16 4 A12 12 0 0 1 28 16", fill: "none", stroke: "var(--primary)", strokeWidth: "3", strokeLinecap: "round" })
+          ] }),
+          /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "toolbar-sep" }),
-        /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          TabBar,
           {
-            className: `ind-trigger${indOpen ? " active" : ""}`,
-            onClick: () => setIndOpen((o) => !o),
-            title: "Indicators",
-            children: [
-              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", fill: "none", strokeWidth: "1.6", strokeLinecap: "round", children: [
-                /* @__PURE__ */ jsx("polyline", { points: "2,12 6,7 9,10 14,4" }),
-                /* @__PURE__ */ jsx("line", { x1: "11", y1: "2", x2: "14", y2: "2" }),
-                /* @__PURE__ */ jsx("line", { x1: "14", y1: "2", x2: "14", y2: "5" })
-              ] }),
-              "Indicators"
-            ]
+            tabs: tabItems,
+            activeId: activeTabId,
+            onSelect: onSelectTab,
+            onAdd: onAddTab,
+            onClose: onCloseTab,
+            onRename: onRenameTab
           }
         ),
-        indOpen && /* @__PURE__ */ jsx(
-          IndicatorsDialog,
+        /* @__PURE__ */ jsx(
+          TopToolbar,
           {
-            onAdd: (config) => {
-              onAddIndicator(config);
-            },
-            onClose: () => setIndOpen(false)
+            symbol,
+            timeframe,
+            theme,
+            customTimeframes,
+            favorites: favoriteTfs,
+            onSymbolChange,
+            onTimeframeChange,
+            onAddCustomTimeframe,
+            onFavoritesChange: onFavoriteTfsChange,
+            onAddIndicator,
+            onToggleTheme,
+            onCopyScreenshot,
+            onDownloadScreenshot,
+            onFullscreen,
+            isFullscreen,
+            currentLayoutName,
+            currentLayoutId,
+            autoSave,
+            onFetchLayouts,
+            onSaveLayout,
+            onLoadLayout,
+            onRenameLayout,
+            onCopyLayout,
+            onToggleAutoSave,
+            onDeleteLayout,
+            onOpenLayoutInNewTab,
+            symbolResolver,
+            ...showTradeButton !== void 0 ? { showTradeButton } : {},
+            ...tradeDrawerOpen !== void 0 ? { tradeDrawerOpen } : {},
+            ...onToggleTradeDrawer !== void 0 ? { onToggleTradeDrawer } : {}
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center", gap: 4 }, children: [
-          showTradeButton && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: `top-trade-btn${tradeDrawerOpen ? " active" : ""}`,
-                onClick: onToggleTradeDrawer,
-                title: "Trade \u2014 Connect your broker",
-                style: { display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 8px", fontSize: 12 },
-                children: [
-                  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: [
-                    /* @__PURE__ */ jsx("rect", { x: "1.5", y: "3", width: "13", height: "10", rx: "1.5" }),
-                    /* @__PURE__ */ jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8" }),
-                    /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11" })
-                  ] }),
-                  "Trade"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "toolbar-sep" })
-          ] }),
-          /* @__PURE__ */ jsx(
-            LayoutMenu,
-            {
-              currentName: currentLayoutName,
-              currentLayoutId,
-              autoSave,
-              onFetchLayouts,
-              onSave: onSaveLayout,
-              onLoad: onLoadLayout,
-              onRename: onRenameLayout,
-              onCopy: onCopyLayout,
-              onToggleAutoSave,
-              onDelete: onDeleteLayout,
-              onOpenInNewTab: onOpenLayoutInNewTab
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onToggleTheme,
-              title: `Switch to ${theme === "dark" ? "light" : "dark"} mode`,
-              style: { fontSize: 14, padding: "4px 8px" },
-              children: theme === "dark" ? "\u2600" : "\u263E"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { ref: ssRef, style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", gap: 8, minHeight: 0, overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", gap: 8, minWidth: 0, minHeight: 0 }, children: [
+            !isLicensed && /* @__PURE__ */ jsxs("div", { style: {
+              position: "absolute",
+              inset: 0,
+              zIndex: 100,
+              background: "rgba(0,0,0,0.6)",
+              backdropFilter: "blur(4px)",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 12
+            }, children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "40", height: "40", fill: "none", stroke: "rgba(255,255,255,0.7)", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0110 0v4" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 700, fontSize: 18, letterSpacing: "0.01em" }, children: "Unlicensed" }),
+              /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.65)", fontSize: 13 }, children: "Please activate your license in the admin studio" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { position: "relative", flex: 1, minWidth: 0, minHeight: 0 }, children: chartSlots }),
             /* @__PURE__ */ jsx(
-              "button",
+              RightToolbar,
               {
-                className: ssOpen ? "active" : void 0,
-                onClick: () => setSsOpen((o) => !o),
-                title: "Screenshot",
-                style: { display: "inline-flex", alignItems: "center", padding: "4px 7px" },
-                children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
-                  /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "12", height: "9", rx: "1" }),
-                  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8.5", r: "2.5" }),
-                  /* @__PURE__ */ jsx("path", { d: "M6 4l1-2h2l1 2" })
-                ] })
+                watchlistOpen,
+                onToggleWatchlist
               }
-            ),
-            ssOpen && /* @__PURE__ */ jsxs("div", { className: "ss-dropdown", children: [
-              /* @__PURE__ */ jsxs("button", { className: "ss-dropdown-item", onClick: () => {
-                setSsOpen(false);
-                onCopyScreenshot();
-              }, children: [
-                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
-                  /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1" }),
-                  /* @__PURE__ */ jsx("path", { d: "M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1" })
-                ] }),
-                "Copy to Clipboard"
-              ] }),
-              /* @__PURE__ */ jsxs("button", { className: "ss-dropdown-item", onClick: () => {
-                setSsOpen(false);
-                onDownloadScreenshot();
-              }, children: [
-                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", children: [
-                  /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "11" }),
-                  /* @__PURE__ */ jsx("polyline", { points: "4,7 8,11 12,7" }),
-                  /* @__PURE__ */ jsx("line", { x1: "2", y1: "14", x2: "14", y2: "14" })
-                ] }),
-                "Download PNG"
-              ] })
-            ] })
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onFullscreen,
-              title: isFullscreen ? "Exit Fullscreen" : "Fullscreen",
-              style: { display: "inline-flex", alignItems: "center", padding: "4px 7px" },
-              children: isFullscreen ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M6 2v4H2M10 2v4h4M10 14v-4h4M6 14v-4H2" }) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" }) })
-            }
-          )
-        ] })
+          drawers
+        ] }),
+        /* @__PURE__ */ jsx(
+          BottomToolbar,
+          {
+            symbol: activeSymbol,
+            timezone,
+            onTimezoneChange,
+            session,
+            onSessionChange,
+            onToggleScriptDrawer,
+            scriptDrawerOpen
+          }
+        )
       ]
     }
   );
 }
-var WatchListIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
-  /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
-  /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "9", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
-  /* @__PURE__ */ jsx("rect", { x: "2", y: "11", width: "10", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
-  /* @__PURE__ */ jsx("circle", { cx: "13", cy: "11.75", r: "2.5" }),
-  /* @__PURE__ */ jsx("line", { x1: "13", y1: "10.75", x2: "13", y2: "12.75", strokeWidth: "1.2" }),
-  /* @__PURE__ */ jsx("line", { x1: "12", y1: "11.75", x2: "14", y2: "11.75", strokeWidth: "1.2" })
-] });
-function RightToolbar({ watchlistOpen, onToggleWatchlist }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 2,
-        padding: "6px 4px",
-        background: "var(--toolbar-bg)",
-        borderRadius: 8,
-        width: 40,
-        flexShrink: 0,
-        userSelect: "none"
-      },
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          title: "Watch List",
-          className: `drawing-tool-btn${watchlistOpen ? " is-active" : ""}`,
-          onClick: onToggleWatchlist,
-          children: /* @__PURE__ */ jsx(WatchListIcon, {})
-        }
-      )
-    }
-  );
-}
-var TIMEZONE_OPTIONS = [
-  { label: "UTC", value: "UTC" },
-  { label: "Exchange", value: "exchange" },
-  // Americas
-  { label: "(UTC-10) Honolulu", value: "Pacific/Honolulu" },
-  { label: "(UTC-9) Anchorage", value: "America/Anchorage" },
-  { label: "(UTC-9) Juneau", value: "America/Juneau" },
-  { label: "(UTC-8) Los Angeles", value: "America/Los_Angeles" },
-  { label: "(UTC-8) Vancouver", value: "America/Vancouver" },
-  { label: "(UTC-7) Denver", value: "America/Denver" },
-  { label: "(UTC-7) Phoenix", value: "America/Phoenix" },
-  { label: "(UTC-6) Chicago", value: "America/Chicago" },
-  { label: "(UTC-6) Mexico City", value: "America/Mexico_City" },
-  { label: "(UTC-6) San Salvador", value: "America/El_Salvador" },
-  { label: "(UTC-5) Bogota", value: "America/Bogota" },
-  { label: "(UTC-5) Lima", value: "America/Lima" },
-  { label: "(UTC-5) New York", value: "America/New_York" },
-  { label: "(UTC-5) Toronto", value: "America/Toronto" },
-  { label: "(UTC-4) Caracas", value: "America/Caracas" },
-  { label: "(UTC-4) Halifax", value: "America/Halifax" },
-  { label: "(UTC-3) Buenos Aires", value: "America/Argentina/Buenos_Aires" },
-  { label: "(UTC-3) Santiago", value: "America/Santiago" },
-  { label: "(UTC-3) Sao Paulo", value: "America/Sao_Paulo" },
-  { label: "(UTC-2) Mid-Atlantic", value: "Atlantic/South_Georgia" },
-  { label: "(UTC-1) Azores", value: "Atlantic/Azores" },
-  // Europe / Africa (UTC / UTC+0)
-  { label: "(UTC) Casablanca", value: "Africa/Casablanca" },
-  { label: "(UTC) Dublin", value: "Europe/Dublin" },
-  { label: "(UTC) Lisbon", value: "Europe/Lisbon" },
-  { label: "(UTC) London", value: "Europe/London" },
-  { label: "(UTC) Reykjavik", value: "Atlantic/Reykjavik" },
-  // UTC+1
-  { label: "(UTC+1) Amsterdam", value: "Europe/Amsterdam" },
-  { label: "(UTC+1) Belgrade", value: "Europe/Belgrade" },
-  { label: "(UTC+1) Berlin", value: "Europe/Berlin" },
-  { label: "(UTC+1) Bratislava", value: "Europe/Bratislava" },
-  { label: "(UTC+1) Brussels", value: "Europe/Brussels" },
-  { label: "(UTC+1) Budapest", value: "Europe/Budapest" },
-  { label: "(UTC+1) Copenhagen", value: "Europe/Copenhagen" },
-  { label: "(UTC+1) Lagos", value: "Africa/Lagos" },
-  { label: "(UTC+1) Luxembourg", value: "Europe/Luxembourg" },
-  { label: "(UTC+1) Madrid", value: "Europe/Madrid" },
-  { label: "(UTC+1) Malta", value: "Europe/Malta" },
-  { label: "(UTC+1) Oslo", value: "Europe/Oslo" },
-  { label: "(UTC+1) Paris", value: "Europe/Paris" },
-  { label: "(UTC+1) Prague", value: "Europe/Prague" },
-  { label: "(UTC+1) Rome", value: "Europe/Rome" },
-  { label: "(UTC+1) Sarajevo", value: "Europe/Sarajevo" },
-  { label: "(UTC+1) Stockholm", value: "Europe/Stockholm" },
-  { label: "(UTC+1) Vienna", value: "Europe/Vienna" },
-  { label: "(UTC+1) Warsaw", value: "Europe/Warsaw" },
-  { label: "(UTC+1) Zurich", value: "Europe/Zurich" },
-  // UTC+2
-  { label: "(UTC+2) Athens", value: "Europe/Athens" },
-  { label: "(UTC+2) Bucharest", value: "Europe/Bucharest" },
-  { label: "(UTC+2) Cairo", value: "Africa/Cairo" },
-  { label: "(UTC+2) Helsinki", value: "Europe/Helsinki" },
-  { label: "(UTC+2) Istanbul", value: "Europe/Istanbul" },
-  { label: "(UTC+2) Jerusalem", value: "Asia/Jerusalem" },
-  { label: "(UTC+2) Johannesburg", value: "Africa/Johannesburg" },
-  { label: "(UTC+2) Kyiv", value: "Europe/Kiev" },
-  { label: "(UTC+2) Riga", value: "Europe/Riga" },
-  { label: "(UTC+2) Sofia", value: "Europe/Sofia" },
-  { label: "(UTC+2) Tallinn", value: "Europe/Tallinn" },
-  { label: "(UTC+2) Vilnius", value: "Europe/Vilnius" },
-  // UTC+3
-  { label: "(UTC+3) Baghdad", value: "Asia/Baghdad" },
-  { label: "(UTC+3) Kuwait", value: "Asia/Kuwait" },
-  { label: "(UTC+3) Moscow", value: "Europe/Moscow" },
-  { label: "(UTC+3) Nairobi", value: "Africa/Nairobi" },
-  { label: "(UTC+3) Qatar", value: "Asia/Qatar" },
-  { label: "(UTC+3) Riyadh", value: "Asia/Riyadh" },
-  // UTC+3:30 / UTC+4
-  { label: "(UTC+3:30) Tehran", value: "Asia/Tehran" },
-  { label: "(UTC+4) Abu Dhabi", value: "Asia/Dubai" },
-  { label: "(UTC+4) Baku", value: "Asia/Baku" },
-  { label: "(UTC+4) Dubai", value: "Asia/Dubai" },
-  { label: "(UTC+4) Muscat", value: "Asia/Muscat" },
-  { label: "(UTC+4) Tbilisi", value: "Asia/Tbilisi" },
-  { label: "(UTC+4:30) Kabul", value: "Asia/Kabul" },
-  // UTC+5
-  { label: "(UTC+5) Islamabad", value: "Asia/Karachi" },
-  { label: "(UTC+5) Karachi", value: "Asia/Karachi" },
-  { label: "(UTC+5) Tashkent", value: "Asia/Tashkent" },
-  { label: "(UTC+5:30) Chennai", value: "Asia/Kolkata" },
-  { label: "(UTC+5:30) Mumbai", value: "Asia/Kolkata" },
-  { label: "(UTC+5:30) New Delhi", value: "Asia/Kolkata" },
-  { label: "(UTC+5:45) Kathmandu", value: "Asia/Kathmandu" },
-  // UTC+6
-  { label: "(UTC+6) Almaty", value: "Asia/Almaty" },
-  { label: "(UTC+6) Dhaka", value: "Asia/Dhaka" },
-  // UTC+7
-  { label: "(UTC+7) Bangkok", value: "Asia/Bangkok" },
-  { label: "(UTC+7) Hanoi", value: "Asia/Ho_Chi_Minh" },
-  { label: "(UTC+7) Jakarta", value: "Asia/Jakarta" },
-  // UTC+8
-  { label: "(UTC+8) Beijing", value: "Asia/Shanghai" },
-  { label: "(UTC+8) Hong Kong", value: "Asia/Hong_Kong" },
-  { label: "(UTC+8) Kuala Lumpur", value: "Asia/Kuala_Lumpur" },
-  { label: "(UTC+8) Perth", value: "Australia/Perth" },
-  { label: "(UTC+8) Shanghai", value: "Asia/Shanghai" },
-  { label: "(UTC+8) Singapore", value: "Asia/Singapore" },
-  { label: "(UTC+8) Taipei", value: "Asia/Taipei" },
-  // UTC+9
-  { label: "(UTC+9) Osaka", value: "Asia/Tokyo" },
-  { label: "(UTC+9) Seoul", value: "Asia/Seoul" },
-  { label: "(UTC+9) Tokyo", value: "Asia/Tokyo" },
-  { label: "(UTC+9:30) Adelaide", value: "Australia/Adelaide" },
-  { label: "(UTC+9:30) Darwin", value: "Australia/Darwin" },
-  // UTC+10
-  { label: "(UTC+10) Brisbane", value: "Australia/Brisbane" },
-  { label: "(UTC+10) Canberra", value: "Australia/Sydney" },
-  { label: "(UTC+10) Melbourne", value: "Australia/Melbourne" },
-  { label: "(UTC+10) Sydney", value: "Australia/Sydney" },
-  // UTC+12
-  { label: "(UTC+12) Auckland", value: "Pacific/Auckland" },
-  { label: "(UTC+12) Fiji", value: "Pacific/Fiji" }
-];
-function getUtcOffsetLabel(iana) {
-  try {
-    const parts = new Intl.DateTimeFormat("en", {
-      timeZone: iana,
-      timeZoneName: "shortOffset"
-    }).formatToParts(/* @__PURE__ */ new Date());
-    const tzName = parts.find((p) => p.type === "timeZoneName")?.value ?? "GMT";
-    const offset = tzName.replace(/^GMT/, "");
-    return offset ? `(UTC${offset})` : "(UTC)";
-  } catch {
-    return "(UTC)";
-  }
-}
-function getDisplayLabel(opt) {
-  if (opt.value === "UTC" || opt.value === "exchange") return opt.label;
-  const city = opt.label.replace(/^\(UTC[^)]*\)\s*/, "");
-  return `${getUtcOffsetLabel(opt.value)} ${city}`;
-}
-var CRYPTO_EXCHANGES = /* @__PURE__ */ new Set([
-  "BINANCE",
-  "BINANCEUS",
-  "BINANCEUSDM",
-  "BINANCECOINM",
-  "COINBASE",
-  "COINBASEPRO",
-  "KRAKEN",
-  "KRAKENFX",
-  "BYBIT",
-  "BITGET",
-  "OKX",
-  "OKEX",
-  "HUOBI",
-  "HTX",
-  "KUCOIN",
-  "GEMINI",
-  "BITSTAMP",
-  "BITFINEX",
-  "MEXC",
-  "GATEIO",
-  "GATE",
-  "BITMEX",
-  "DERIBIT"
-]);
-function symbolSupportsSession(symbol) {
-  const exchange = symbol.includes(":") ? symbol.split(":")[0].toUpperCase() : "";
-  return exchange !== "" && !CRYPTO_EXCHANGES.has(exchange);
-}
-function useClockTime(timezone) {
-  const [time, setTime] = useState(() => _formatClock(timezone));
-  useEffect(() => {
-    setTime(_formatClock(timezone));
-    const id = setInterval(() => setTime(_formatClock(timezone)), 1e3);
-    return () => clearInterval(id);
-  }, [timezone]);
-  return time;
-}
-function _formatClock(timezone) {
-  const tz = timezone === "exchange" ? "UTC" : timezone;
-  try {
-    return new Intl.DateTimeFormat("en-GB", {
-      timeZone: tz,
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hour12: false
-    }).format(/* @__PURE__ */ new Date());
-  } catch {
-    return new Intl.DateTimeFormat("en-GB", {
-      timeZone: "UTC",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hour12: false
-    }).format(/* @__PURE__ */ new Date());
-  }
+function applyRuntimeConfig(caps, config) {
+  if (!config) return caps;
+  const orderEntry = config.enableOrderEntry === false ? false : caps.orderEntry;
+  const draggableOrders = config.enableDraggableOrders === false ? false : caps.draggableOrders;
+  const bracketOrders = config.enableBracketOrders === false ? false : caps.bracketOrders;
+  const managedTrading = config.enableManagedTrading === false ? false : caps.managedTrading;
+  const indicators = config.enableIndicators === false ? false : caps.indicators;
+  return {
+    ...caps,
+    orderEntry,
+    draggableOrders,
+    bracketOrders,
+    managedTrading,
+    indicators,
+    // Recalculate derived render flags from the updated feature flags.
+    renderOrderEntry: orderEntry,
+    renderBuySellButtons: orderEntry,
+    renderOrderTicket: orderEntry,
+    renderBracketControls: orderEntry && bracketOrders,
+    renderOrderModificationControls: orderEntry && draggableOrders,
+    renderManagedTradingControls: managedTrading,
+    renderIndicators: indicators
+  };
 }
-function BottomToolbar({ symbol, timezone, onTimezoneChange, session, onSessionChange, onToggleScriptDrawer, scriptDrawerOpen }) {
-  const showSession = symbolSupportsSession(symbol);
-  const [open, setOpen] = useState(false);
-  const [sessionOpen, setSessionOpen] = useState(false);
-  const rootRef = useRef(null);
-  const sessionRef = useRef(null);
-  const clockTime = useClockTime(timezone);
-  const current = TIMEZONE_OPTIONS.find((o) => o.value === timezone) ?? TIMEZONE_OPTIONS[0];
+function useChartCapabilities(config) {
+  const [licCaps, setLicCaps] = useState(() => getCapabilities());
   useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    const unsub = LicenseManager.getInstance().subscribe(() => {
+      setLicCaps(getCapabilities());
+    });
+    return unsub;
+  }, []);
+  return useMemo(() => applyRuntimeConfig(licCaps, config), [licCaps, config]);
+}
+
+// src/react/trading/TradingBridge.ts
+function createTradingBridgeLogger(callbacks, label) {
+  if (process.env.NODE_ENV === "production") return callbacks;
+  const tag = label ? `[TradingBridge:${label}]` : "[TradingBridge]";
+  return {
+    onPlaceOrderIntent: (intent) => {
+      console.debug(
+        `${tag} PLACE  side=%s type=%s qty=%s price=%s stopPrice=%s correlationId=%s`,
+        intent.side,
+        intent.orderType,
+        intent.qty,
+        intent.limitPrice ?? "\u2014",
+        intent.stopPrice ?? "\u2014",
+        intent.correlationId,
+        intent
+      );
+      return callbacks.onPlaceOrderIntent?.(intent);
+    },
+    onModifyOrderIntent: (intent) => {
+      console.debug(
+        `${tag} MODIFY orderId=%s limitPrice=%s stopPrice=%s qty=%s`,
+        intent.orderId,
+        intent.limitPrice ?? "\u2014",
+        intent.stopPrice ?? "\u2014",
+        intent.qty ?? "\u2014",
+        intent
+      );
+      return callbacks.onModifyOrderIntent?.(intent);
+    },
+    onCancelOrderIntent: (intent) => {
+      console.debug(
+        `${tag} CANCEL orderId=%s symbol=%s`,
+        intent.orderId,
+        intent.symbol,
+        intent
+      );
+      return callbacks.onCancelOrderIntent?.(intent);
+    },
+    onBracketAdjustIntent: (intent) => {
+      console.debug(
+        `${tag} BRACKET_ADJUST entry=%s sl=%s tp=%s`,
+        intent.entryOrderId,
+        intent.stopLossPrice ?? "\u2014",
+        intent.takeProfitPrice ?? "\u2014",
+        intent
+      );
+      return callbacks.onBracketAdjustIntent?.(intent);
+    }
+  };
+}
+var TA_FUNCTIONS = [
+  { name: "sma(src, len)", desc: "Simple moving average" },
+  { name: "ema(src, len)", desc: "Exponential moving average" },
+  { name: "wma(src, len)", desc: "Weighted moving average" },
+  { name: "rma(src, len)", desc: "Wilder (RMA) moving average" },
+  { name: "stdev(src, len)", desc: "Standard deviation" },
+  { name: "highest(src, len)", desc: "Highest value over N bars" },
+  { name: "lowest(src, len)", desc: "Lowest value over N bars" },
+  { name: "atr(len)", desc: "Average true range" },
+  { name: "change(src)", desc: "Difference from previous bar" },
+  { name: "mom(src, len)", desc: "Momentum" },
+  { name: "crossover(a, b)", desc: "True when a crosses above b" },
+  { name: "crossunder(a, b)", desc: "True when a crosses below b" },
+  { name: "barssince(cond)", desc: "Bars since condition was true" }
+];
+var BUILT_IN_SERIES = [
+  "open",
+  "high",
+  "low",
+  "close",
+  "volume",
+  "hl2",
+  "hlc3",
+  "ohlc4",
+  "bar_index"
+];
+var UTILITY_FUNCTIONS = [
+  { name: 'indicator("Title")', desc: "Declare the indicator name" },
+  { name: "input(default)", desc: "Create a user-configurable parameter" },
+  { name: "plot(value)", desc: "Plot a line on the chart" },
+  { name: "nz(val, rep?)", desc: "Replace NaN with rep (default 0)" },
+  { name: "na(val)", desc: "Returns true if value is NaN" }
+];
+var MATH_FUNCTIONS = ["abs", "max", "min", "round", "floor", "ceil", "sqrt", "log", "pow", "sign"];
+var TSCRIPT_TEMPLATE = `indicator("My Indicator")
+
+// Parameters \u2014 shown in the UI
+length = input(14)
+fast   = input(9)
+slow   = input(21)
+
+// Calculations using built-in TA functions
+fast_ma = ema(close, fast)
+slow_ma = ema(close, slow)
+signal  = crossover(fast_ma, slow_ma)
+
+// Plot results (overlay: true draws on price pane)
+plot(fast_ma)
+plot(slow_ma)
+`;
+var PINE_TEMPLATE = `//@version=5
+indicator("My Pine Indicator", overlay=false)
+
+length = input.int(14, title="Length")
+src    = input.source(close, title="Source")
+
+value  = ta.rsi(src, length)
+
+plot(value, title="RSI", color=color.blue)
+hline(70, "Overbought", color=color.red)
+hline(30, "Oversold",   color=color.green)
+`;
+function ScriptDrawer({ onClose, onAddIndicator }) {
+  const [lang, setLang] = useState("tscript");
+  const [code, setCode] = useState(TSCRIPT_TEMPLATE);
+  const [overlay, setOverlay] = useState(false);
+  const [errors, setErrors] = useState([]);
+  const [refOpen, setRefOpen] = useState(false);
+  const [drawerWidth, setDrawerWidth] = useState(380);
+  const dragState = useRef(null);
+  const onResizeMouseDown = (e) => {
+    e.preventDefault();
+    dragState.current = { startX: e.clientX, startW: drawerWidth };
+    const onMove = (ev) => {
+      if (!dragState.current) return;
+      const delta = dragState.current.startX - ev.clientX;
+      setDrawerWidth(Math.min(700, Math.max(280, dragState.current.startW + delta)));
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  useEffect(() => {
-    if (!sessionOpen) return;
-    const handler = (e) => {
-      if (sessionRef.current && !sessionRef.current.contains(e.target)) setSessionOpen(false);
+    const onUp = () => {
+      dragState.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [sessionOpen]);
-  return /* @__PURE__ */ jsxs("div", { className: "bottom-bar", children: [
-    /* @__PURE__ */ jsx("div", { className: "bottom-bar-left", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: `bottom-bar-btn${scriptDrawerOpen ? " active" : ""}`,
-        onClick: onToggleScriptDrawer,
-        title: "Script Engine",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              viewBox: "0 0 16 16",
-              width: "11",
-              height: "11",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "1.6",
-              strokeLinecap: "round",
-              children: [
-                /* @__PURE__ */ jsx("polyline", { points: "4,6 2,8 4,10" }),
-                /* @__PURE__ */ jsx("polyline", { points: "12,6 14,8 12,10" }),
-                /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "7", y2: "13" })
-              ]
-            }
-          ),
-          "Script"
-        ]
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const handleLangChange = (next) => {
+    setLang(next);
+    setErrors([]);
+    setCode(next === "tscript" ? TSCRIPT_TEMPLATE : PINE_TEMPLATE);
+  };
+  const handleAddToChart = () => {
+    setErrors([]);
+    if (lang === "pine") {
+      const result = new PineCompiler().compile(code);
+      if (!result.ok) {
+        const msgs = result.diagnostics.map(
+          (d) => `Line ${d.line ?? "?"}: ${d.message}`
+        );
+        setErrors(msgs.length ? msgs : ["Compilation failed \u2014 check your Pine Script."]);
+        return;
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "bottom-bar-right", children: [
-      /* @__PURE__ */ jsxs("div", { ref: rootRef, style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+      onAddIndicator({ type: "script", script: result.tscript, overlay });
+    } else {
+      onAddIndicator({ type: "script", script: code, overlay });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "script-drawer", style: { width: drawerWidth }, children: [
+    /* @__PURE__ */ jsx("div", { className: "script-drawer-resize", onMouseDown: onResizeMouseDown }),
+    /* @__PURE__ */ jsxs("div", { className: "script-drawer-header", children: [
+      /* @__PURE__ */ jsxs("span", { className: "script-drawer-title", children: [
         /* @__PURE__ */ jsxs(
-          "button",
+          "svg",
           {
-            className: `bottom-bar-btn${open ? " active" : ""}`,
-            onClick: () => setOpen((o) => !o),
-            title: "Chart timezone",
+            viewBox: "0 0 16 16",
+            width: "14",
+            height: "14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            strokeLinecap: "round",
+            style: { flexShrink: 0 },
             children: [
-              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.2", children: [
-                /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5.5" }),
-                /* @__PURE__ */ jsx("path", { d: "M7 1.5C7 1.5 9 4 9 7s-2 5.5-2 5.5M7 1.5C7 1.5 5 4 5 7s2 5.5 2 5.5" }),
-                /* @__PURE__ */ jsx("line", { x1: "1.5", y1: "7", x2: "12.5", y2: "7" }),
-                /* @__PURE__ */ jsx("line", { x1: "2", y1: "4.5", x2: "12", y2: "4.5" }),
-                /* @__PURE__ */ jsx("line", { x1: "2", y1: "9.5", x2: "12", y2: "9.5" })
-              ] }),
-              getDisplayLabel(current)
+              /* @__PURE__ */ jsx("polyline", { points: "4,6 2,8 4,10" }),
+              /* @__PURE__ */ jsx("polyline", { points: "12,6 14,8 12,10" }),
+              /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "7", y2: "13" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "bottom-bar-clock", title: `Current time in ${getDisplayLabel(current)}`, children: clockTime }),
-        open && /* @__PURE__ */ jsxs("div", { className: "bottom-bar-dropdown bottom-bar-dropdown--right", children: [
-          /* @__PURE__ */ jsx("div", { className: "bottom-bar-dropdown-section", children: "Timezone" }),
-          TIMEZONE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: `bottom-bar-dropdown-item${opt.value === timezone ? " current" : ""}`,
-              onClick: () => {
-                onTimezoneChange(opt.value);
-                setOpen(false);
-              },
-              children: [
-                opt.value === timezone && /* @__PURE__ */ jsx("span", { className: "bottom-bar-check", children: "\xE2\u0153\u201C" }),
-                getDisplayLabel(opt)
-              ]
-            },
-            opt.value + opt.label
-          ))
-        ] })
+        "Script Engine"
       ] }),
-      showSession && /* @__PURE__ */ jsxs("div", { ref: sessionRef, style: { position: "relative", display: "flex", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: `bottom-bar-btn${sessionOpen ? " active" : ""}`,
-            onClick: () => setSessionOpen((o) => !o),
-            title: "Trading session",
-            children: [
-              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "1.2", children: [
-                /* @__PURE__ */ jsx("rect", { x: "1.5", y: "2.5", width: "11", height: "9", rx: "1" }),
-                /* @__PURE__ */ jsx("line", { x1: "1.5", y1: "5.5", x2: "12.5", y2: "5.5" }),
-                /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "2.5", x2: "4.5", y2: "1" }),
-                /* @__PURE__ */ jsx("line", { x1: "9.5", y1: "2.5", x2: "9.5", y2: "1" })
-              ] }),
-              session === "extended" ? "Extended hours" : "Regular hours"
-            ]
-          }
-        ),
-        sessionOpen && /* @__PURE__ */ jsxs("div", { className: "bottom-bar-dropdown bottom-bar-dropdown--right", children: [
-          /* @__PURE__ */ jsx("div", { className: "bottom-bar-dropdown-section", children: "Sessions" }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: `bottom-bar-dropdown-item${session === "regular" ? " current" : ""}`,
-              onClick: () => {
-                onSessionChange("regular");
-                setSessionOpen(false);
-              },
-              children: [
-                session === "regular" && /* @__PURE__ */ jsx("span", { className: "bottom-bar-check", children: "\xE2\u0153\u201C" }),
-                /* @__PURE__ */ jsxs("span", { className: "bottom-bar-session-label", children: [
-                  /* @__PURE__ */ jsx("strong", { children: "Regular trading hours" }),
-                  /* @__PURE__ */ jsx("span", { children: "Exchange session only (RTH) \xE2\u20AC\u201D cleaner signals, higher liquidity" })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: `bottom-bar-dropdown-item${session === "extended" ? " current" : ""}`,
-              onClick: () => {
-                onSessionChange("extended");
-                setSessionOpen(false);
-              },
-              children: [
-                session === "extended" && /* @__PURE__ */ jsx("span", { className: "bottom-bar-check", children: "\xE2\u0153\u201C" }),
-                /* @__PURE__ */ jsxs("span", { className: "bottom-bar-session-label", children: [
-                  /* @__PURE__ */ jsx("strong", { children: "Extended / electronic hours" }),
-                  /* @__PURE__ */ jsx("span", { children: "Includes pre-market & after-hours (ETH) \xE2\u20AC\u201D full price range" })
-                ] })
-              ]
-            }
-          )
-        ] })
+      /* @__PURE__ */ jsx("button", { className: "script-close-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 12 12",
+          width: "12",
+          height: "12",
+          stroke: "currentColor",
+          strokeWidth: "1.8",
+          strokeLinecap: "round",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "11", y2: "11" }),
+            /* @__PURE__ */ jsx("line", { x1: "11", y1: "1", x2: "1", y2: "11" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "script-lang-tabs", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `script-lang-tab${lang === "tscript" ? " active" : ""}`,
+          onClick: () => handleLangChange("tscript"),
+          children: "TScript"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `script-lang-tab${lang === "pine" ? " active" : ""}`,
+          onClick: () => handleLangChange("pine"),
+          children: "Pine Script\u2122"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "script-ref-section", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "script-ref-toggle",
+          onClick: () => setRefOpen((o) => !o),
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 10 6",
+                width: "8",
+                height: "6",
+                fill: "currentColor",
+                style: { transform: refOpen ? "rotate(180deg)" : "none", transition: "transform 0.15s" },
+                children: /* @__PURE__ */ jsx("path", { d: "M0 0l5 6 5-6z" })
+              }
+            ),
+            "Built-in Reference"
+          ]
+        }
+      ),
+      refOpen && /* @__PURE__ */ jsxs("div", { className: "script-ref-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "script-ref-group-label", children: "Series" }),
+        /* @__PURE__ */ jsx("div", { className: "script-feature-list", children: BUILT_IN_SERIES.map((s) => /* @__PURE__ */ jsx("span", { className: "script-feature-pill series", children: s }, s)) }),
+        /* @__PURE__ */ jsx("div", { className: "script-ref-group-label", children: "TA Functions" }),
+        /* @__PURE__ */ jsx("div", { className: "script-feature-list", children: TA_FUNCTIONS.map((f) => /* @__PURE__ */ jsxs("span", { className: "script-feature-pill ta", title: f.desc, children: [
+          f.name.split("(")[0],
+          "()"
+        ] }, f.name)) }),
+        /* @__PURE__ */ jsx("div", { className: "script-ref-group-label", children: "Math" }),
+        /* @__PURE__ */ jsx("div", { className: "script-feature-list", children: MATH_FUNCTIONS.map((f) => /* @__PURE__ */ jsxs("span", { className: "script-feature-pill math", children: [
+          f,
+          "()"
+        ] }, f)) }),
+        /* @__PURE__ */ jsx("div", { className: "script-ref-group-label", children: "Utility" }),
+        /* @__PURE__ */ jsx("div", { className: "script-feature-list", children: UTILITY_FUNCTIONS.map((f) => /* @__PURE__ */ jsxs("span", { className: "script-feature-pill util", title: f.desc, children: [
+          f.name.split("(")[0],
+          "()"
+        ] }, f.name)) }),
+        /* @__PURE__ */ jsx("div", { className: "script-ref-detail", children: [...TA_FUNCTIONS, ...UTILITY_FUNCTIONS].map((f) => /* @__PURE__ */ jsxs("div", { className: "script-ref-row", children: [
+          /* @__PURE__ */ jsx("code", { className: "script-ref-fn", children: f.name }),
+          /* @__PURE__ */ jsx("span", { className: "script-ref-desc", children: f.desc })
+        ] }, f.name)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "script-editor-wrap", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "script-editor",
+        spellCheck: false,
+        value: code,
+        onChange: (e) => {
+          setCode(e.target.value);
+          setErrors([]);
+        }
+      }
+    ) }),
+    errors.length > 0 && /* @__PURE__ */ jsx("div", { className: "script-errors", children: errors.map((msg, i) => /* @__PURE__ */ jsxs("div", { className: "script-error-line", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 12 12",
+          width: "11",
+          height: "11",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          strokeLinecap: "round",
+          style: { flexShrink: 0, color: "var(--down, #ef5350)" },
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "3.5", x2: "6", y2: "6.5" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "8", x2: "6", y2: "8.5" })
+          ]
+        }
+      ),
+      msg
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: "script-footer", children: [
+      /* @__PURE__ */ jsxs("label", { className: "script-overlay-label", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: overlay,
+            onChange: (e) => setOverlay(e.target.checked)
+          }
+        ),
+        "Overlay on price"
+      ] }),
+      /* @__PURE__ */ jsxs("button", { className: "script-run-btn", onClick: handleAddToChart, children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 12 12",
+            width: "11",
+            height: "11",
+            fill: "currentColor",
+            style: { flexShrink: 0 },
+            children: /* @__PURE__ */ jsx("polygon", { points: "2,1 11,6 2,11" })
+          }
+        ),
+        "Add to Chart"
       ] })
     ] })
   ] });
 }
-function ChartWorkspace({
-  // TabBar
-  tabs,
-  activeTabId,
-  onSelectTab,
-  onAddTab,
-  onCloseTab,
-  onRenameTab,
-  // TopToolbar
-  symbol,
-  timeframe,
-  theme,
-  customTimeframes,
-  favoriteTfs,
-  onSymbolChange,
-  onTimeframeChange,
-  onAddCustomTimeframe,
-  onFavoriteTfsChange,
-  onAddIndicator,
-  onToggleTheme,
-  onCopyScreenshot,
-  onDownloadScreenshot,
-  onFullscreen,
-  isFullscreen,
-  currentLayoutName,
-  currentLayoutId,
-  autoSave,
-  onFetchLayouts,
-  onSaveLayout,
-  onLoadLayout,
-  onRenameLayout,
-  onCopyLayout,
-  onToggleAutoSave,
-  onDeleteLayout,
-  onOpenLayoutInNewTab,
-  showTradeButton,
-  tradeDrawerOpen,
-  onToggleTradeDrawer,
-  symbolResolver,
-  // RightToolbar
-  watchlistOpen,
-  onToggleWatchlist,
-  // BottomToolbar
-  activeSymbol,
-  timezone,
-  onTimezoneChange,
-  session,
-  onSessionChange,
-  scriptDrawerOpen,
-  onToggleScriptDrawer,
-  // Chart + state
-  chartSlots,
-  isLicensed,
-  wsLoaded,
-  drawers
+
+// src/react/shell/watchlistApi.ts
+var _apiBase = "/api";
+var _memToken = null;
+var _getAuthToken = null;
+async function _resolveToken() {
+  if (_getAuthToken) {
+    try {
+      return await _getAuthToken();
+    } catch {
+    }
+  }
+  if (_memToken) return _memToken;
+  if (typeof localStorage !== "undefined") return localStorage.getItem("forgecharts-token");
+  return null;
+}
+async function _authHeader() {
+  const token = await _resolveToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+async function apiFetch(method, path, body) {
+  const bodyInit = body !== void 0 ? JSON.stringify(body) : null;
+  const res = await fetch(`${_apiBase}${path}`, {
+    method,
+    headers: { "Content-Type": "application/json", ...await _authHeader() },
+    ...bodyInit !== null ? { body: bodyInit } : {}
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error ?? res.statusText);
+  }
+  if (res.status === 204) return void 0;
+  return res.json();
+}
+var watchlistApi = {
+  configure(cfg) {
+    if (cfg.apiBase) _apiBase = cfg.apiBase;
+    if (cfg.getAuthToken) _getAuthToken = cfg.getAuthToken;
+    if (cfg.token) _memToken = cfg.token;
+  },
+  setToken(token) {
+    _memToken = token;
+  },
+  getAll() {
+    return apiFetch("GET", "/watchlist");
+  },
+  addItem(symbol, group_id) {
+    return apiFetch("POST", "/watchlist/items", { symbol, group_id });
+  },
+  removeItem(id) {
+    return apiFetch("DELETE", `/watchlist/items/${encodeURIComponent(id)}`);
+  },
+  moveItemToGroup(id, group_id) {
+    return apiFetch("PATCH", `/watchlist/items/${encodeURIComponent(id)}`, { group_id });
+  },
+  addGroup(name) {
+    return apiFetch("POST", "/watchlist/groups", { name });
+  },
+  removeGroup(id) {
+    return apiFetch("DELETE", `/watchlist/groups/${encodeURIComponent(id)}`);
+  },
+  reorderItems(ids) {
+    return apiFetch("PUT", "/watchlist/items/reorder", { ids });
+  }
+};
+var _ws = null;
+var _listeners = /* @__PURE__ */ new Set();
+var _subscribed = /* @__PURE__ */ new Set();
+var _reconnectTimer = null;
+function _wsUrl() {
+  if (typeof window === "undefined") return "ws://localhost:4001/ws";
+  const proto = window.location.protocol === "https:" ? "wss" : "ws";
+  return `${proto}://${window.location.host}/ws`;
+}
+function _send(msg) {
+  if (_ws?.readyState === WebSocket.OPEN) {
+    _ws.send(JSON.stringify(msg));
+  }
+}
+function _ensureConnected() {
+  if (_ws && (_ws.readyState === WebSocket.CONNECTING || _ws.readyState === WebSocket.OPEN)) return;
+  if (_reconnectTimer) {
+    clearTimeout(_reconnectTimer);
+    _reconnectTimer = null;
+  }
+  _ws = new WebSocket(_wsUrl());
+  _ws.onopen = () => {
+    for (const sym of _subscribed) {
+      _send({ type: "subscribe_quote", symbol: sym });
+    }
+  };
+  _ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === "quote") {
+        for (const listener of _listeners) {
+          listener(msg.payload);
+        }
+      }
+    } catch {
+    }
+  };
+  _ws.onclose = () => {
+    _ws = null;
+    if (_subscribed.size > 0) {
+      _reconnectTimer = setTimeout(_ensureConnected, 3e3);
+    }
+  };
+}
+function _addListener(fn) {
+  _listeners.add(fn);
+}
+function _removeListener(fn) {
+  _listeners.delete(fn);
+}
+function _subscribe(symbols) {
+  _ensureConnected();
+  for (const sym of symbols) {
+    if (!_subscribed.has(sym)) {
+      _subscribed.add(sym);
+      _send({ type: "subscribe_quote", symbol: sym });
+    }
+  }
+}
+function _unsubscribe(symbols) {
+  for (const sym of symbols) {
+    _subscribed.delete(sym);
+    _send({ type: "unsubscribe_quote", symbol: sym });
+  }
+  if (_subscribed.size === 0 && _ws) {
+    _ws.close();
+    _ws = null;
+  }
+}
+function useWatchlistQuotes(symbols) {
+  const [prices, setPrices] = useState(/* @__PURE__ */ new Map());
+  const [dirs, setDirs] = useState(/* @__PURE__ */ new Map());
+  const symbolsKey = symbols.slice().sort().join(",");
+  const listenerRef = useRef(null);
+  const onQuote = useCallback((payload) => {
+    if (!_subscribed.has(payload.symbol)) return;
+    setPrices((prev) => {
+      const next = new Map(prev);
+      next.set(payload.symbol, payload.last);
+      return next;
+    });
+    if (payload.dir) {
+      const dir = payload.dir;
+      setDirs((prev) => {
+        const next = new Map(prev);
+        next.set(payload.symbol, dir);
+        return next;
+      });
+      setTimeout(() => {
+        setDirs((prev) => {
+          const next = new Map(prev);
+          next.delete(payload.symbol);
+          return next;
+        });
+      }, 650);
+    }
+  }, []);
+  useEffect(() => {
+    if (listenerRef.current) _removeListener(listenerRef.current);
+    listenerRef.current = onQuote;
+    _addListener(onQuote);
+    return () => {
+      if (listenerRef.current) _removeListener(listenerRef.current);
+      listenerRef.current = null;
+    };
+  }, [onQuote]);
+  useEffect(() => {
+    const syms = symbols.filter(Boolean);
+    if (syms.length > 0) _subscribe(syms);
+    return () => {
+      if (syms.length > 0) _unsubscribe(syms);
+    };
+  }, [symbolsKey]);
+  return { prices, dirs };
+}
+function fmtPrice(v) {
+  const abs = Math.abs(v);
+  const dec = abs >= 1e3 ? 2 : abs >= 1 ? 2 : abs >= 1e-4 ? 4 : 6;
+  return v.toLocaleString("en-US", { minimumFractionDigits: dec, maximumFractionDigits: dec });
+}
+function SymbolRow({
+  item,
+  quote,
+  flash,
+  dragOver,
+  logoUrl,
+  onSelect,
+  onRemove,
+  onContextMenu,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
 }) {
-  const tabItems = tabs.map((t) => ({
-    id: t.id,
-    label: t.label,
-    ...t.isSaved !== void 0 ? { isSaved: t.isSaved } : {}
-  }));
+  const liveColor = flash === "up" ? "var(--wl-up)" : flash === "down" ? "var(--wl-down)" : quote ? quote.change >= 0 ? "var(--wl-up)" : "var(--wl-down)" : "var(--text-muted)";
+  const changeColor = quote ? quote.change >= 0 ? "var(--wl-up)" : "var(--wl-down)" : "var(--text-muted)";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        background: "var(--shelf-bg)",
-        padding: 6,
-        gap: 4
-      },
+      className: `wl-row${dragOver ? " wl-drag-over" : ""}`,
+      draggable: true,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onDragEnd,
+      onClick: onSelect,
+      onContextMenu,
+      title: item.symbol,
       children: [
-        !wsLoaded && /* @__PURE__ */ jsxs("div", { style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "var(--bg)",
-          zIndex: 1e3
-        }, children: [
-          /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", style: { animation: "spin 0.9s linear infinite" }, children: [
-            /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "12", fill: "none", stroke: "var(--border)", strokeWidth: "3" }),
-            /* @__PURE__ */ jsx("path", { d: "M16 4 A12 12 0 0 1 28 16", fill: "none", stroke: "var(--primary)", strokeWidth: "3", strokeLinecap: "round" })
-          ] }),
-          /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
-        ] }),
-        /* @__PURE__ */ jsx(
-          TabBar,
-          {
-            tabs: tabItems,
-            activeId: activeTabId,
-            onSelect: onSelectTab,
-            onAdd: onAddTab,
-            onClose: onCloseTab,
-            onRename: onRenameTab
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TopToolbar,
+        /* @__PURE__ */ jsx("div", { className: "wl-drag-handle", title: "Drag to reorder", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 8 12", width: "8", height: "12", fill: "currentColor", children: [
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "5", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "10", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "5", y: "0", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "2", height: "2", rx: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "5", y: "10", width: "2", height: "2", rx: "1" })
+        ] }) }),
+        item.symbol.includes(":") && /* @__PURE__ */ jsx(
+          "img",
           {
-            symbol,
-            timeframe,
-            theme,
-            customTimeframes,
-            favorites: favoriteTfs,
-            onSymbolChange,
-            onTimeframeChange,
-            onAddCustomTimeframe,
-            onFavoritesChange: onFavoriteTfsChange,
-            onAddIndicator,
-            onToggleTheme,
-            onCopyScreenshot,
-            onDownloadScreenshot,
-            onFullscreen,
-            isFullscreen,
-            currentLayoutName,
-            currentLayoutId,
-            autoSave,
-            onFetchLayouts,
-            onSaveLayout,
-            onLoadLayout,
-            onRenameLayout,
-            onCopyLayout,
-            onToggleAutoSave,
-            onDeleteLayout,
-            onOpenLayoutInNewTab,
-            symbolResolver,
-            ...showTradeButton !== void 0 ? { showTradeButton } : {},
-            ...tradeDrawerOpen !== void 0 ? { tradeDrawerOpen } : {},
-            ...onToggleTradeDrawer !== void 0 ? { onToggleTradeDrawer } : {}
+            className: "wl-logo",
+            src: logoUrl ?? `/api/logos/${encodeURIComponent(item.symbol.split(":")[0].toUpperCase())}`,
+            alt: "",
+            onError: (e) => {
+              const img = e.currentTarget;
+              if (logoUrl && !img.src.includes("/api/logos/")) {
+                img.src = `/api/logos/${encodeURIComponent(item.symbol.split(":")[0].toUpperCase())}`;
+              } else {
+                img.style.display = "none";
+              }
+            }
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", gap: 8, minHeight: 0, overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", gap: 8, minWidth: 0, minHeight: 0 }, children: [
-            !isLicensed && /* @__PURE__ */ jsxs("div", { style: {
-              position: "absolute",
-              inset: 0,
-              zIndex: 100,
-              background: "rgba(0,0,0,0.6)",
-              backdropFilter: "blur(4px)",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 12
-            }, children: [
-              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "40", height: "40", fill: "none", stroke: "rgba(255,255,255,0.7)", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
-                /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0110 0v4" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 700, fontSize: 18, letterSpacing: "0.01em" }, children: "Unlicensed" }),
-              /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.65)", fontSize: 13 }, children: "Please activate your license in the admin studio" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { style: { position: "relative", flex: 1, minWidth: 0, minHeight: 0 }, children: chartSlots }),
-            /* @__PURE__ */ jsx(
-              RightToolbar,
-              {
-                watchlistOpen,
-                onToggleWatchlist
-              }
-            )
+        /* @__PURE__ */ jsx("span", { className: "wl-symbol", children: item.symbol }),
+        quote ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `wl-last${flash ? ` wl-flash-${flash}` : ""}`,
+              style: { color: liveColor },
+              children: fmtPrice(quote.last)
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "wl-change", style: { color: changeColor }, children: [
+            quote.change >= 0 ? "+" : "",
+            fmtPrice(quote.change)
           ] }),
-          drawers
-        ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-pct", style: { color: changeColor }, children: [
+            quote.change >= 0 ? "+" : "",
+            quote.changePct.toFixed(2),
+            "%"
+          ] })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "wl-no-data", children: "\u2014" }),
         /* @__PURE__ */ jsx(
-          BottomToolbar,
+          "button",
           {
-            symbol: activeSymbol,
-            timezone,
-            onTimezoneChange,
-            session,
-            onSessionChange,
-            onToggleScriptDrawer,
-            scriptDrawerOpen
+            className: "wl-remove-btn",
+            title: "Remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            children: "\u2715"
           }
         )
       ]
     }
   );
 }
-function applyRuntimeConfig(caps, config) {
-  if (!config) return caps;
-  const orderEntry = config.enableOrderEntry === false ? false : caps.orderEntry;
-  const draggableOrders = config.enableDraggableOrders === false ? false : caps.draggableOrders;
-  const bracketOrders = config.enableBracketOrders === false ? false : caps.bracketOrders;
-  const managedTrading = config.enableManagedTrading === false ? false : caps.managedTrading;
-  const indicators = config.enableIndicators === false ? false : caps.indicators;
-  return {
-    ...caps,
-    orderEntry,
-    draggableOrders,
-    bracketOrders,
-    managedTrading,
-    indicators,
-    // Recalculate derived render flags from the updated feature flags.
-    renderOrderEntry: orderEntry,
-    renderBuySellButtons: orderEntry,
-    renderOrderTicket: orderEntry,
-    renderBracketControls: orderEntry && bracketOrders,
-    renderOrderModificationControls: orderEntry && draggableOrders,
-    renderManagedTradingControls: managedTrading,
-    renderIndicators: indicators
+function WatchlistDrawer({ onClose, onSelectSymbol, symbolResolver }) {
+  const [groups, setGroups] = useState([]);
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [addError, setAddError] = useState("");
+  const [ctxMenu, setCtxMenu] = useState(null);
+  const [groupDialog, setGroupDialog] = useState(null);
+  const [groupName, setGroupName] = useState("");
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const [logoMap, setLogoMap] = useState(/* @__PURE__ */ new Map());
+  const [drawerWidth, setDrawerWidth] = useState(360);
+  const [colWidths, setColWidths] = useState({ last: 70, chg: 70, pct: 60, vol: 52 });
+  const [dragItemId, setDragItemId] = useState(null);
+  const [dropTargetId, setDropTargetId] = useState(null);
+  const ctxRef = useRef(null);
+  const drawerRef = useRef(null);
+  const dragState = useRef(null);
+  const colDragRef = useRef(null);
+  const onColResizeMouseDown = (e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    colDragRef.current = { col, startX: e.clientX, startW: colWidths[col] };
+    const onMove = (ev) => {
+      if (!colDragRef.current) return;
+      const { col: c, startX, startW } = colDragRef.current;
+      const next = Math.max(36, startW + (ev.clientX - startX));
+      setColWidths((prev) => ({ ...prev, [c]: next }));
+    };
+    const onUp = () => {
+      colDragRef.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
   };
-}
-function useChartCapabilities(config) {
-  const [licCaps, setLicCaps] = useState(() => getCapabilities());
+  const onResizeMouseDown = (e) => {
+    e.preventDefault();
+    dragState.current = { startX: e.clientX, startW: drawerWidth };
+    const onMove = (ev) => {
+      if (!dragState.current) return;
+      const delta = dragState.current.startX - ev.clientX;
+      const next = Math.min(600, Math.max(240, dragState.current.startW + delta));
+      setDrawerWidth(next);
+    };
+    const onUp = () => {
+      dragState.current = null;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const reload = useCallback(async () => {
+    try {
+      const data = await watchlistApi.getAll();
+      setGroups(data.groups);
+      setItems(data.items);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, []);
   useEffect(() => {
-    const unsub = LicenseManager.getInstance().subscribe(() => {
-      setLicCaps(getCapabilities());
+    reload();
+  }, [reload]);
+  useEffect(() => {
+    if (items.length === 0) return;
+    const syms = [...new Set(items.map((i) => i.symbol))].join(",");
+    fetch(`/api/reference/symbols/logos?symbols=${encodeURIComponent(syms)}`).then((r) => r.ok ? r.json() : {}).then((map) => setLogoMap(new Map(Object.entries(map)))).catch(() => {
     });
-    return unsub;
-  }, []);
-  return useMemo(() => applyRuntimeConfig(licCaps, config), [licCaps, config]);
-}
-
-// src/react/trading/TradingBridge.ts
-function createTradingBridgeLogger(callbacks, label) {
-  if (process.env.NODE_ENV === "production") return callbacks;
-  const tag = label ? `[TradingBridge:${label}]` : "[TradingBridge]";
-  return {
-    onPlaceOrderIntent: (intent) => {
-      console.debug(
-        `${tag} PLACE  side=%s type=%s qty=%s price=%s stopPrice=%s correlationId=%s`,
-        intent.side,
-        intent.orderType,
-        intent.qty,
-        intent.limitPrice ?? "\u2014",
-        intent.stopPrice ?? "\u2014",
-        intent.correlationId,
-        intent
-      );
-      return callbacks.onPlaceOrderIntent?.(intent);
-    },
-    onModifyOrderIntent: (intent) => {
-      console.debug(
-        `${tag} MODIFY orderId=%s limitPrice=%s stopPrice=%s qty=%s`,
-        intent.orderId,
-        intent.limitPrice ?? "\u2014",
-        intent.stopPrice ?? "\u2014",
-        intent.qty ?? "\u2014",
-        intent
-      );
-      return callbacks.onModifyOrderIntent?.(intent);
-    },
-    onCancelOrderIntent: (intent) => {
-      console.debug(
-        `${tag} CANCEL orderId=%s symbol=%s`,
-        intent.orderId,
-        intent.symbol,
-        intent
-      );
-      return callbacks.onCancelOrderIntent?.(intent);
-    },
-    onBracketAdjustIntent: (intent) => {
-      console.debug(
-        `${tag} BRACKET_ADJUST entry=%s sl=%s tp=%s`,
-        intent.entryOrderId,
-        intent.stopLossPrice ?? "\u2014",
-        intent.takeProfitPrice ?? "\u2014",
-        intent
-      );
-      return callbacks.onBracketAdjustIntent?.(intent);
+  }, [items]);
+  const symbols = items.map((i) => i.symbol);
+  const { prices: livePrices, dirs: liveDirs } = useWatchlistQuotes(symbols);
+  const sessionOpenRef = useRef(/* @__PURE__ */ new Map());
+  const quotes = useRef(/* @__PURE__ */ new Map()).current;
+  quotes.clear();
+  for (const [sym, last] of livePrices) {
+    if (!sessionOpenRef.current.has(sym)) {
+      sessionOpenRef.current.set(sym, last);
+    }
+    const open = sessionOpenRef.current.get(sym);
+    const change = last - open;
+    quotes.set(sym, {
+      last,
+      change,
+      changePct: open !== 0 ? change / open * 100 : 0
+    });
+  }
+  const prevItemsRef = useRef([]);
+  if (prevItemsRef.current !== items) {
+    const prevSyms = new Set(prevItemsRef.current.map((i) => i.symbol));
+    const nextSyms = new Set(items.map((i) => i.symbol));
+    for (const s of prevSyms) {
+      if (!nextSyms.has(s)) sessionOpenRef.current.delete(s);
+    }
+    prevItemsRef.current = items;
+  }
+  useEffect(() => {
+    if (!ctxMenu) return;
+    const handler = (e) => {
+      if (ctxRef.current && !ctxRef.current.contains(e.target)) setCtxMenu(null);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [ctxMenu]);
+  const handleAddFromSearch = useCallback(async (symbol) => {
+    setSearchOpen(false);
+    setAddError("");
+    try {
+      await watchlistApi.addItem(symbol);
+      await reload();
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : "Failed to add");
+    }
+  }, [reload]);
+  const handleRemove = async (id) => {
+    await watchlistApi.removeItem(id);
+    await reload();
+  };
+  const openCtxMenu = (e, item) => {
+    e.preventDefault();
+    setCtxMenu({ x: e.clientX, y: e.clientY, itemId: item.id, symbol: item.symbol });
+  };
+  const openGroupDialog = (itemId) => {
+    setCtxMenu(null);
+    setGroupName("");
+    setGroupDialog({ itemId });
+  };
+  const handleCreateGroup = async () => {
+    const name = groupName.trim();
+    if (!name || !groupDialog) return;
+    const group = await watchlistApi.addGroup(name);
+    await watchlistApi.moveItemToGroup(groupDialog.itemId, group.id);
+    setGroupDialog(null);
+    await reload();
+  };
+  const handleMoveToExisting = async (itemId, groupId) => {
+    setCtxMenu(null);
+    await watchlistApi.moveItemToGroup(itemId, groupId);
+    await reload();
+  };
+  const handleUngroup = async (itemId) => {
+    setCtxMenu(null);
+    await watchlistApi.moveItemToGroup(itemId, null);
+    await reload();
+  };
+  const handleDragStart = (e, itemId) => {
+    setDragItemId(itemId);
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, targetId) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (targetId !== dragItemId) setDropTargetId(targetId);
+  };
+  const handleDrop = async (e, targetId) => {
+    e.preventDefault();
+    if (!dragItemId || dragItemId === targetId) return;
+    setDragItemId(null);
+    setDropTargetId(null);
+    const reorder = (list) => {
+      const from = list.findIndex((i) => i.id === dragItemId);
+      const to = list.findIndex((i) => i.id === targetId);
+      if (from === -1 || to === -1) return list;
+      const next = [...list];
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      return next;
+    };
+    const newItems = (() => {
+      const ungr = items.filter((i) => i.group_id === null);
+      const newUngr = reorder(ungr);
+      if (newUngr !== ungr) {
+        return [...newUngr, ...items.filter((i) => i.group_id !== null)];
+      }
+      const result = [...items];
+      for (const group of groups) {
+        const grp = items.filter((i) => i.group_id === group.id);
+        const newGrp = reorder(grp);
+        if (newGrp !== grp) {
+          const base = result.filter((i) => i.group_id !== group.id);
+          return [...base, ...newGrp];
+        }
+      }
+      return result;
+    })();
+    setItems(newItems);
+    try {
+      await watchlistApi.reorderItems(newItems.map((i) => i.id));
+    } catch {
+      await reload();
     }
   };
+  const handleDragEnd = () => {
+    setDragItemId(null);
+    setDropTargetId(null);
+  };
+  const handleRemoveGroup = async (groupId) => {
+    await watchlistApi.removeGroup(groupId);
+    await reload();
+  };
+  const toggleCollapse = (groupId) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      next.has(groupId) ? next.delete(groupId) : next.add(groupId);
+      return next;
+    });
+  };
+  const ungrouped = items.filter((i) => i.group_id === null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: drawerRef,
+      className: "wl-drawer",
+      style: {
+        width: drawerWidth,
+        "--wl-last": `${colWidths.last}px`,
+        "--wl-chg": `${colWidths.chg}px`,
+        "--wl-pct": `${colWidths.pct}px`,
+        "--wl-vol": `${colWidths.vol}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "wl-resize-handle", onMouseDown: onResizeMouseDown }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-header", children: [
+          /* @__PURE__ */ jsxs("span", { className: "wl-header-title", children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", stroke: "currentColor", fill: "none", strokeWidth: "1.5", children: [
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "9", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" }),
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "11", width: "10", height: "1.5", rx: "0.5", fill: "currentColor", stroke: "none" })
+            ] }),
+            "Watchlist"
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "wl-close-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "1.8", children: [
+            /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-add-row", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              readOnly: true,
+              className: "wl-add-input",
+              placeholder: "Add symbol  e.g. BINANCE:BTCUSDT",
+              onClick: () => setSearchOpen(true),
+              onFocus: () => setSearchOpen(true),
+              style: { cursor: "pointer" }
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { className: "wl-add-btn", onClick: () => setSearchOpen(true), title: "Add", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx("line", { x1: "7", y1: "1", x2: "7", y2: "13" }),
+            /* @__PURE__ */ jsx("line", { x1: "1", y1: "7", x2: "13", y2: "7" })
+          ] }) })
+        ] }),
+        addError && /* @__PURE__ */ jsx("div", { className: "wl-add-error", children: addError }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-col-headers", children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", { className: "wl-col-symbol", children: "Symbol" }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-last", children: [
+            "Last",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "last") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-chg", children: [
+            "Chg",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "chg") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-pct", children: [
+            "Chg%",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "pct") })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "wl-col-vol", children: [
+            "Vol",
+            /* @__PURE__ */ jsx("div", { className: "wl-col-resize", onMouseDown: (e) => onColResizeMouseDown(e, "vol") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "wl-list", children: [
+          loading && /* @__PURE__ */ jsx("div", { className: "wl-empty", children: "Loading\u2026" }),
+          groups.map((group) => {
+            const groupItems = items.filter((i) => i.group_id === group.id);
+            const isCollapsed = collapsed.has(group.id);
+            return /* @__PURE__ */ jsxs("div", { className: "wl-group", children: [
+              /* @__PURE__ */ jsxs("div", { className: "wl-group-header", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "wl-group-toggle",
+                    onClick: () => toggleCollapse(group.id),
+                    title: isCollapsed ? "Expand" : "Collapse",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        viewBox: "0 0 10 10",
+                        width: "8",
+                        height: "8",
+                        stroke: "currentColor",
+                        fill: "none",
+                        strokeWidth: "1.5",
+                        style: { transform: isCollapsed ? "rotate(-90deg)" : "none", transition: "transform 0.15s" },
+                        children: /* @__PURE__ */ jsx("polyline", { points: "2,3 5,7 8,3" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "wl-group-name", children: group.name }),
+                /* @__PURE__ */ jsx("span", { className: "wl-group-count", children: groupItems.length }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "wl-remove-btn wl-group-del",
+                    title: "Remove group (items become ungrouped)",
+                    onClick: () => handleRemoveGroup(group.id),
+                    children: "\u2715"
+                  }
+                )
+              ] }),
+              !isCollapsed && groupItems.map((item) => /* @__PURE__ */ jsx(
+                SymbolRow,
+                {
+                  item,
+                  quote: quotes.get(item.symbol),
+                  flash: liveDirs.get(item.symbol),
+                  dragOver: dropTargetId === item.id,
+                  ...logoMap.get(item.symbol) !== void 0 && { logoUrl: logoMap.get(item.symbol) },
+                  onSelect: () => onSelectSymbol(item.symbol),
+                  onRemove: () => handleRemove(item.id),
+                  onContextMenu: (e) => openCtxMenu(e, item),
+                  onDragStart: (e) => handleDragStart(e, item.id),
+                  onDragOver: (e) => handleDragOver(e, item.id),
+                  onDrop: (e) => handleDrop(e, item.id),
+                  onDragEnd: handleDragEnd
+                },
+                item.id
+              ))
+            ] }, group.id);
+          }),
+          ungrouped.length > 0 && groups.length > 0 && /* @__PURE__ */ jsx("div", { className: "wl-group-label-ungrouped", children: "Other" }),
+          ungrouped.map((item) => /* @__PURE__ */ jsx(
+            SymbolRow,
+            {
+              item,
+              quote: quotes.get(item.symbol),
+              flash: liveDirs.get(item.symbol),
+              dragOver: dropTargetId === item.id,
+              ...logoMap.get(item.symbol) !== void 0 && { logoUrl: logoMap.get(item.symbol) },
+              onSelect: () => onSelectSymbol(item.symbol),
+              onRemove: () => handleRemove(item.id),
+              onContextMenu: (e) => openCtxMenu(e, item),
+              onDragStart: (e) => handleDragStart(e, item.id),
+              onDragOver: (e) => handleDragOver(e, item.id),
+              onDrop: (e) => handleDrop(e, item.id),
+              onDragEnd: handleDragEnd
+            },
+            item.id
+          )),
+          !loading && items.length === 0 && /* @__PURE__ */ jsxs("div", { className: "wl-empty", children: [
+            "No symbols yet.",
+            /* @__PURE__ */ jsx("br", {}),
+            "Type a symbol above and press Enter."
+          ] })
+        ] }),
+        ctxMenu && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: ctxRef,
+            className: "wl-ctx-menu",
+            style: { top: ctxMenu.y, left: ctxMenu.x },
+            children: [
+              groups.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "wl-ctx-section", children: "Move to group" }),
+                groups.map((g) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "wl-ctx-item",
+                    onClick: () => handleMoveToExisting(ctxMenu.itemId, g.id),
+                    children: g.name
+                  },
+                  g.id
+                )),
+                /* @__PURE__ */ jsx("div", { className: "wl-ctx-divider" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "wl-ctx-item",
+                  onClick: () => openGroupDialog(ctxMenu.itemId),
+                  children: "New group\u2026"
+                }
+              ),
+              items.find((i) => i.id === ctxMenu.itemId)?.group_id && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "wl-ctx-item",
+                  onClick: () => handleUngroup(ctxMenu.itemId),
+                  children: "Remove from group"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "wl-ctx-divider" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "wl-ctx-item wl-ctx-item--danger",
+                  onClick: () => {
+                    setCtxMenu(null);
+                    handleRemove(ctxMenu.itemId);
+                  },
+                  children: "Remove symbol"
+                }
+              )
+            ]
+          }
+        ),
+        groupDialog && /* @__PURE__ */ jsx("div", { className: "wl-dialog-backdrop", children: /* @__PURE__ */ jsxs("div", { className: "wl-dialog", children: [
+          /* @__PURE__ */ jsx("div", { className: "wl-dialog-title", children: "Add to group" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "wl-dialog-input",
+              placeholder: "Group name",
+              value: groupName,
+              onChange: (e) => setGroupName(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleCreateGroup();
+              },
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "wl-dialog-actions", children: [
+            /* @__PURE__ */ jsx("button", { className: "wl-dialog-cancel", onClick: () => setGroupDialog(null), children: "Cancel" }),
+            /* @__PURE__ */ jsx("button", { className: "wl-dialog-confirm", onClick: handleCreateGroup, disabled: !groupName.trim(), children: "Save" })
+          ] })
+        ] }) }),
+        searchOpen && /* @__PURE__ */ jsx(
+          SymbolSearchDialog,
+          {
+            current: "",
+            onSelect: handleAddFromSearch,
+            onClose: () => setSearchOpen(false),
+            symbolResolver
+          }
+        )
+      ]
+    }
+  );
+}
+var BROKERS = [
+  { id: "rithmic", name: "Rithmic", description: "Futures & Forex", status: "available" },
+  { id: "ibkr", name: "Interactive Brokers", description: "Stocks, Options & More", status: "coming-soon" },
+  { id: "tradovate", name: "Tradovate", description: "Futures & Options", status: "coming-soon" },
+  { id: "alpaca", name: "Alpaca", description: "Stocks & Crypto", status: "coming-soon" },
+  { id: "tradestation", name: "TradeStation", description: "Stocks, Futures & Options", status: "coming-soon" },
+  { id: "tradier", name: "Tradier", description: "Stocks & Options", status: "coming-soon" },
+  { id: "ninjabrokerage", name: "NinjaTrader Brokerage", description: "Futures & Forex", status: "coming-soon" },
+  { id: "tastytrade", name: "tastytrade", description: "Options & Futures", status: "coming-soon" }
+];
+function TradeDrawer({ onClose }) {
+  return /* @__PURE__ */ jsxs("div", { className: "trade-drawer", children: [
+    /* @__PURE__ */ jsxs("div", { className: "trade-drawer-header", children: [
+      /* @__PURE__ */ jsxs("span", { className: "trade-drawer-title", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+          /* @__PURE__ */ jsx("rect", { x: "1.5", y: "3", width: "13", height: "10", rx: "1.5" }),
+          /* @__PURE__ */ jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8" }),
+          /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "11" })
+        ] }),
+        "Trade \u2014 Connect a broker"
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "trade-drawer-close", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", width: "12", height: "12", stroke: "currentColor", strokeWidth: "1.8", children: [
+        /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "2", y2: "12" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "trade-drawer-body", children: BROKERS.map((broker) => /* @__PURE__ */ jsxs("div", { className: "broker-card", children: [
+      /* @__PURE__ */ jsx("div", { className: "broker-card-name", children: broker.name }),
+      /* @__PURE__ */ jsx("div", { className: "broker-card-desc", children: broker.description }),
+      /* @__PURE__ */ jsx("span", { className: `broker-card-status broker-card-status--${broker.status}`, children: broker.status === "available" ? "Available" : "Coming Soon" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "broker-card-connect",
+          disabled: broker.status !== "available",
+          title: broker.status === "available" ? `Connect ${broker.name}` : "Coming soon",
+          children: broker.status === "available" ? "Connect" : "Coming Soon"
+        }
+      )
+    ] }, broker.id)) })
+  ] });
 }
 function uid() {
   return Math.random().toString(36).slice(2, 10);
@@ -11642,16 +13595,11 @@ var ManagedAppShell = forwardRef(
     const [isFullscreen, setIsFullscreen] = useState(false);
     const capabilities = useChartCapabilities(config);
     useEffect(() => {
-      if (process.env.NODE_ENV === "production") return;
-      if ((capabilities.orderEntry || capabilities.draggableOrders || capabilities.renderManagedTradingControls) && !renderTradeDrawer) {
-        console.warn(
-          "[ManagedAppShell] Trading capabilities are active (orderEntry=%s, draggableOrders=%s, managedTrading=%s) but renderTradeDrawer was not provided. Trading UI will be suppressed.",
-          capabilities.orderEntry,
-          capabilities.draggableOrders,
-          capabilities.managedTrading
-        );
-      }
-    }, [capabilities.orderEntry, capabilities.draggableOrders, capabilities.managedTrading]);
+      watchlistApi.configure({
+        apiBase: `${apiUrl ?? ""}/api`,
+        ...getAuthToken ? { getAuthToken } : {}
+      });
+    }, [apiUrl, getAuthToken]);
     const [isLicensed, setIsLicensed] = useState(() => LicenseManager.getInstance().getLicense() !== null);
     useEffect(() => LicenseManager.getInstance().subscribe(() => {
       setIsLicensed(LicenseManager.getInstance().getLicense() !== null);
@@ -11971,21 +13919,11 @@ var ManagedAppShell = forwardRef(
       tab.id
     )) });
     const drawers = /* @__PURE__ */ jsxs(Fragment, { children: [
-      scriptDrawerOpen && renderScriptDrawer?.({
-        onClose: () => setScriptDrawerOpen(false),
-        onAddIndicator: handleAddIndicator
-      }),
-      watchlistOpen && renderWatchlistDrawer?.({
-        onClose: () => setWatchlistOpen(false),
-        onSelectSymbol: (sym) => {
-          handleSymbolChange(sym);
-        }
-      })
+      scriptDrawerOpen && (renderScriptDrawer ? renderScriptDrawer({ onClose: () => setScriptDrawerOpen(false), onAddIndicator: handleAddIndicator }) : /* @__PURE__ */ jsx(ScriptDrawer, { onClose: () => setScriptDrawerOpen(false), onAddIndicator: handleAddIndicator })),
+      watchlistOpen && (renderWatchlistDrawer ? renderWatchlistDrawer({ onClose: () => setWatchlistOpen(false), onSelectSymbol: handleSymbolChange }) : /* @__PURE__ */ jsx(WatchlistDrawer, { onClose: () => setWatchlistOpen(false), onSelectSymbol: handleSymbolChange, symbolResolver }))
     ] });
     return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { height: "100%" }, children: [
-      tradeDrawerOpen && capabilities.renderManagedTradingControls && renderTradeDrawer?.({
-        onClose: () => setTradeDrawerOpen(false)
-      }),
+      tradeDrawerOpen && capabilities.renderManagedTradingControls && (renderTradeDrawer ? renderTradeDrawer({ onClose: () => setTradeDrawerOpen(false) }) : /* @__PURE__ */ jsx(TradeDrawer, { onClose: () => setTradeDrawerOpen(false) })),
       /* @__PURE__ */ jsx(
         ChartWorkspace,
         {