@coderyo/ui-shell 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,9 +1,42 @@
 // src/top-bar.ts
 import { DEFAULT_INTERVALS } from "@coderyo/data";
-import { t as t3 } from "@coderyo/i18n";
+
+// src/logo-slot.ts
+function mountLogoSlot(parent, opts = {}) {
+  const slot = document.createElement("div");
+  slot.className = "tv-logo-slot";
+  slot.style.cssText = "display:flex;align-items:center;gap:8px;margin-right:12px;flex-shrink:0;font-weight:600;font-size:13px;color:var(--tv-fg,#e6edf3);";
+  const label = opts.label ?? "TradView";
+  const text = document.createElement("span");
+  text.textContent = label;
+  const children = [];
+  if (opts.imageSrc) {
+    const img = document.createElement("img");
+    img.src = opts.imageSrc;
+    img.alt = label;
+    img.style.cssText = "height:22px;width:auto;display:block;";
+    children.push(img);
+  }
+  children.push(text);
+  if (opts.href) {
+    const link = document.createElement("a");
+    link.href = opts.href;
+    link.style.cssText = "color:inherit;text-decoration:none;display:flex;align-items:center;gap:8px;";
+    link.append(...children);
+    slot.appendChild(link);
+  } else {
+    slot.append(...children);
+  }
+  parent.appendChild(slot);
+  return slot;
+}
 
 // src/user-preferences.ts
-import { DEFAULT_INDICATOR_CONFIG, indicatorConfigStorageKey } from "@coderyo/indicators";
+import {
+  defaultChartStorage,
+  loadIndicatorConfig as loadIndicatorConfigFromCore,
+  saveIndicatorConfig as saveIndicatorConfigToCore
+} from "@coderyo/core";
 var GRID_SETTING_KEY = "tradview:settings:showGrid";
 var RETURN_CURSOR_KEY = "tradview:settings:returnToCursorAfterDraw";
 function loadShowGridPreference() {
@@ -33,30 +66,21 @@ function saveReturnToCursorPreference(v) {
   }
 }
 function loadIndicatorConfig(symbol, interval) {
-  try {
-    const raw = localStorage.getItem(indicatorConfigStorageKey(symbol, interval));
-    if (!raw) return { ...DEFAULT_INDICATOR_CONFIG };
-    return { ...DEFAULT_INDICATOR_CONFIG, ...JSON.parse(raw) };
-  } catch {
-    return { ...DEFAULT_INDICATOR_CONFIG };
-  }
+  return loadIndicatorConfigFromCore(defaultChartStorage, symbol, interval);
 }
 function saveIndicatorConfig(symbol, interval, config) {
-  try {
-    localStorage.setItem(indicatorConfigStorageKey(symbol, interval), JSON.stringify(config));
-  } catch {
-  }
+  saveIndicatorConfigToCore(defaultChartStorage, symbol, interval, config);
 }
 
 // src/settings-panel.ts
-import { DEFAULT_INDICATOR_CONFIG as DEFAULT_INDICATOR_CONFIG2 } from "@coderyo/indicators";
+import { DEFAULT_INDICATOR_CONFIG } from "@coderyo/indicators";
 import { t } from "@coderyo/i18n";
 function mountSettingsPanel(parent, opts = {}) {
   let open = false;
   let tab = "chart";
   let showGrid = opts.showGrid ?? loadShowGridPreference();
   let returnToCursor = opts.returnToCursorAfterDraw ?? loadReturnToCursorPreference();
-  let indicatorConfig = { ...opts.indicatorConfig ?? DEFAULT_INDICATOR_CONFIG2 };
+  let indicatorConfig = { ...opts.indicatorConfig ?? DEFAULT_INDICATOR_CONFIG };
   const wrap = document.createElement("div");
   wrap.style.cssText = "position:relative;";
   const btn = document.createElement("button");
@@ -101,6 +125,17 @@ function mountSettingsPanel(parent, opts = {}) {
     row.append(input, document.createTextNode(label));
     return row;
   };
+  const actionButton = (label, onClick) => {
+    const btn2 = document.createElement("button");
+    btn2.type = "button";
+    btn2.textContent = label;
+    btn2.style.cssText = "display:block;width:100%;margin-top:10px;padding:6px 10px;border-radius:4px;border:1px solid #f85149;background:#21262d;color:#f85149;cursor:pointer;font-size:12px;";
+    btn2.onclick = (e) => {
+      e.stopPropagation();
+      onClick();
+    };
+    return btn2;
+  };
   const numberField = (label, value, onChange) => {
     const row = document.createElement("label");
     row.style.cssText = "display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;";
@@ -131,6 +166,14 @@ function mountSettingsPanel(parent, opts = {}) {
           opts.onReturnToCursorChange?.(v);
         })
       );
+      if (opts.onClearAllDrawings) {
+        content.appendChild(
+          actionButton(t("settings.drawing.clearAll", "\u6E05\u9664\u6240\u6709\u756B\u7DDA"), () => {
+            opts.onClearAllDrawings?.();
+            renderContent();
+          })
+        );
+      }
     } else {
       content.appendChild(
         checkbox(t("settings.ind.macd", "MACD \u7A97\u683C"), indicatorConfig.showMacd, (v) => {
@@ -222,6 +265,15 @@ function mountSettingsPanel(parent, opts = {}) {
           opts.onIndicatorConfigChange?.(indicatorConfig);
         })
       );
+      if (opts.onClearAllIndicators) {
+        content.appendChild(
+          actionButton(t("settings.ind.clearAll", "\u6E05\u7A7A\u6240\u6709\u6307\u6A19"), () => {
+            opts.onClearAllIndicators?.();
+            if (opts.indicatorConfig) indicatorConfig = { ...opts.indicatorConfig };
+            renderContent();
+          })
+        );
+      }
     }
   };
   renderTabs();
@@ -230,6 +282,10 @@ function mountSettingsPanel(parent, opts = {}) {
   btn.onclick = (e) => {
     e.stopPropagation();
     open = !open;
+    if (open) {
+      if (opts.indicatorConfig) indicatorConfig = { ...opts.indicatorConfig };
+      renderContent();
+    }
     panel.style.display = open ? "block" : "none";
   };
   const close = () => {
@@ -243,6 +299,108 @@ function mountSettingsPanel(parent, opts = {}) {
   return wrap;
 }
 
+// src/symbol-search-dialog.ts
+function createSymbolSearchDialog(opts) {
+  const i18n = opts.i18n;
+  const backdrop = document.createElement("div");
+  backdrop.className = "tv-symbol-dialog-backdrop";
+  backdrop.style.cssText = "display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.55);align-items:flex-start;justify-content:center;padding:12vh 16px 16px;";
+  const panel = document.createElement("div");
+  panel.className = "tv-symbol-dialog";
+  panel.style.cssText = "width:min(420px,100%);background:var(--tv-surface,#161b22);border:1px solid var(--tv-border,#30363d);border-radius:8px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,0.4);";
+  const title = document.createElement("div");
+  title.textContent = i18n?.t("symbol.search", "\u641C\u5C0B\u5546\u54C1") ?? "\u641C\u5C0B\u5546\u54C1";
+  title.style.cssText = "font-size:13px;font-weight:600;color:var(--tv-fg,#e6edf3);margin-bottom:8px;";
+  const input = document.createElement("input");
+  input.type = "search";
+  input.placeholder = i18n?.t("symbol.search", "\u641C\u5C0B\u5546\u54C1") ?? "\u641C\u5C0B\u5546\u54C1";
+  input.value = opts.initialSymbol ?? "";
+  input.style.cssText = "width:100%;box-sizing:border-box;padding:8px 10px;border-radius:4px;border:1px solid var(--tv-border,#30363d);background:var(--tv-bg,#0d1117);color:var(--tv-fg,#e6edf3);font-size:13px;";
+  const list = document.createElement("div");
+  list.style.cssText = "margin-top:8px;max-height:240px;overflow:auto;";
+  panel.append(title, input, list);
+  backdrop.appendChild(panel);
+  let timer;
+  let mounted = false;
+  const renderHits = (hits) => {
+    list.replaceChildren();
+    if (hits.length === 0) {
+      const empty = document.createElement("div");
+      empty.textContent = "\u2014";
+      empty.style.cssText = "padding:8px;color:var(--tv-muted,#8b949e);font-size:12px;";
+      list.appendChild(empty);
+      return;
+    }
+    for (const hit of hits) {
+      const row = document.createElement("button");
+      row.type = "button";
+      row.textContent = hit.exchange ? `${hit.symbol} \xB7 ${hit.exchange}` : hit.symbol;
+      row.style.cssText = "display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:transparent;color:var(--tv-fg,#e6edf3);cursor:pointer;font-size:12px;border-radius:4px;";
+      row.onmouseenter = () => {
+        row.style.background = "var(--tv-btn-bg,#21262d)";
+      };
+      row.onmouseleave = () => {
+        row.style.background = "transparent";
+      };
+      row.onclick = () => {
+        opts.onSelect(hit.symbol);
+        close();
+      };
+      list.appendChild(row);
+    }
+  };
+  const runSearch = () => {
+    const q = input.value.trim();
+    if (q.length < 1) {
+      list.replaceChildren();
+      return;
+    }
+    void opts.onSearch(q).then(renderHits).catch(() => list.replaceChildren());
+  };
+  input.addEventListener("input", () => {
+    clearTimeout(timer);
+    timer = setTimeout(runSearch, 200);
+  });
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") close();
+    if (e.key === "Enter") runSearch();
+  });
+  backdrop.addEventListener("click", (e) => {
+    if (e.target === backdrop) close();
+  });
+  const open = () => {
+    if (!mounted) {
+      document.body.appendChild(backdrop);
+      mounted = true;
+    }
+    backdrop.style.display = "flex";
+    input.focus();
+    input.select();
+    runSearch();
+  };
+  const close = () => {
+    backdrop.style.display = "none";
+  };
+  const destroy = () => {
+    clearTimeout(timer);
+    backdrop.remove();
+    mounted = false;
+  };
+  return { open, close, destroy };
+}
+function mountSymbolSearchDialogTrigger(parent, dialog, opts) {
+  const wrap = document.createElement("div");
+  wrap.style.cssText = "display:flex;align-items:center;margin-right:8px;flex-shrink:0;";
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.textContent = opts.initialSymbol ?? (opts.i18n?.t("symbol.search", "\u641C\u5C0B\u5546\u54C1") ?? "\u641C\u5C0B\u5546\u54C1");
+  btn.style.cssText = "min-width:140px;text-align:left;background:var(--tv-bg,#0d1117);color:var(--tv-fg,#e6edf3);border:1px solid var(--tv-border,#30363d);border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;";
+  btn.onclick = () => dialog.open();
+  wrap.appendChild(btn);
+  parent.appendChild(wrap);
+  return wrap;
+}
+
 // src/symbol-search.ts
 import { t as t2 } from "@coderyo/i18n";
 function mountSymbolSearch(parent, opts) {
@@ -306,13 +464,32 @@ function mountSymbolSearch(parent, opts) {
   return wrap;
 }
 
+// src/theme-toggle.ts
+function mountThemeToggle(parent, opts) {
+  const i18n = opts.i18n;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "tv-theme-toggle";
+  btn.style.cssText = "background:var(--tv-btn-bg,#21262d);color:var(--tv-fg,#e6edf3);border:1px solid var(--tv-border,#30363d);border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;flex-shrink:0;";
+  const paint = (theme) => {
+    btn.textContent = theme === "dark" ? i18n?.t("theme.dark", "\u6DF1\u8272") ?? "\u6DF1\u8272" : i18n?.t("theme.light", "\u6DFA\u8272") ?? "\u6DFA\u8272";
+  };
+  btn.onclick = () => {
+    const next = opts.themeProvider.toggle();
+    opts.onThemeChange?.(next);
+  };
+  opts.themeProvider.subscribe((theme) => paint(theme));
+  parent.appendChild(btn);
+  return btn;
+}
+
 // src/top-bar.ts
 function mountManualSymbolInput(parent, opts) {
   const wrap = document.createElement("div");
   wrap.style.cssText = "display:flex;align-items:center;gap:4px;margin-right:8px;";
   const input = document.createElement("input");
   input.type = "text";
-  input.placeholder = t3("symbol.search", "Symbol");
+  input.placeholder = opts.i18n?.t("symbol.search", "Symbol") ?? "Symbol";
   input.value = opts.initialSymbol ?? "";
   input.style.cssText = "width:140px;background:#0d1117;color:#e6edf3;border:1px solid #30363d;border-radius:4px;padding:4px 8px;font-size:12px;";
   const apply = () => {
@@ -332,9 +509,14 @@ function mountManualSymbolInput(parent, opts) {
   parent.appendChild(wrap);
 }
 function mountTopBar(parent, opts = {}) {
+  const i18n = opts.i18n;
+  const tKey = (key, fallback) => i18n?.t(key, fallback) ?? fallback;
   const bar = document.createElement("div");
   bar.className = "tv-topbar";
-  bar.style.cssText = "display:flex;gap:8px;padding:8px 12px;align-items:center;border-bottom:1px solid #30363d;background:#161b22;";
+  bar.style.cssText = "display:flex;gap:8px;padding:8px 12px;align-items:center;border-bottom:1px solid var(--tv-border,#30363d);background:var(--tv-surface,#161b22);flex-shrink:0;box-sizing:border-box;width:100%;min-width:0;overflow-x:auto;overflow-y:visible;position:relative;";
+  if (opts.logo !== false) {
+    mountLogoSlot(bar, opts.logo ?? { label: "TradView" });
+  }
   const symbolMode = opts.symbolInput ?? "manual";
   if (symbolMode === "search" && opts.onSymbolSearch && opts.onSymbolSelect) {
     mountSymbolSearch(bar, {
@@ -342,17 +524,32 @@ function mountTopBar(parent, opts = {}) {
       onSearch: opts.onSymbolSearch,
       onSelect: opts.onSymbolSelect
     });
+  } else if (symbolMode === "dialog" && opts.onSymbolSearch && opts.onSymbolSelect) {
+    const dialog = createSymbolSearchDialog({
+      initialSymbol: opts.initialSymbol,
+      onSearch: opts.onSymbolSearch,
+      onSelect: opts.onSymbolSelect,
+      i18n
+    });
+    mountSymbolSearchDialogTrigger(bar, dialog, {
+      initialSymbol: opts.initialSymbol,
+      i18n
+    });
   } else if (symbolMode === "manual" && opts.onSymbolSelect) {
     mountManualSymbolInput(bar, {
       initialSymbol: opts.initialSymbol,
-      onSymbolSelect: opts.onSymbolSelect
+      onSymbolSelect: opts.onSymbolSelect,
+      i18n
     });
   }
   const intervals = opts.intervals ?? DEFAULT_INTERVALS;
-  const btnStyle = "background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;";
+  const btnStyle = "background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;flex-shrink:0;";
   const btnActiveStyle = btnStyle.replace("#21262d", "#388bfd").replace("#e6edf3", "#fff");
   const intervalButtons = /* @__PURE__ */ new Map();
   let activeInterval = opts.activeInterval ?? intervals[0];
+  const intervalRow = document.createElement("div");
+  intervalRow.className = "tv-topbar-intervals";
+  intervalRow.style.cssText = "display:flex;gap:8px;flex-wrap:nowrap;align-items:center;flex-shrink:0;";
   const paintIntervalButtons = () => {
     for (const [iv, btn] of intervalButtons) {
       btn.style.cssText = iv === activeInterval ? btnActiveStyle : btnStyle;
@@ -361,7 +558,7 @@ function mountTopBar(parent, opts = {}) {
   for (const iv of intervals) {
     const btn = document.createElement("button");
     btn.type = "button";
-    btn.textContent = t3(`interval.${iv}`, iv);
+    btn.textContent = tKey(`interval.${iv}`, iv);
     btn.style.cssText = btnStyle;
     btn.onclick = () => {
       if (activeInterval === iv) return;
@@ -370,9 +567,10 @@ function mountTopBar(parent, opts = {}) {
       opts.onIntervalChange?.(iv);
     };
     intervalButtons.set(iv, btn);
-    bar.appendChild(btn);
+    intervalRow.appendChild(btn);
   }
   paintIntervalButtons();
+  bar.appendChild(intervalRow);
   const spacer = document.createElement("div");
   spacer.style.flex = "1";
   bar.appendChild(spacer);
@@ -384,11 +582,19 @@ function mountTopBar(parent, opts = {}) {
     b.onclick = () => fn?.();
     return b;
   };
-  bar.appendChild(mkBtn(t3("theme.dark", "\u4E3B\u984C"), opts.onThemeToggle));
+  if (opts.themeProvider) {
+    mountThemeToggle(bar, {
+      themeProvider: opts.themeProvider,
+      i18n,
+      onThemeChange: opts.onThemeChange
+    });
+  } else {
+    bar.appendChild(mkBtn(tKey("theme.dark", "\u4E3B\u984C"), opts.onThemeToggle));
+  }
   if (opts.showSettings && opts.settings) mountSettingsPanel(bar, opts.settings);
   bar.appendChild(mkBtn("\u26F6", opts.onFullscreen));
   bar.appendChild(mkBtn("\u{1F4F7}", opts.onScreenshot));
-  parent.prepend(bar);
+  parent.appendChild(bar);
   return {
     el: bar,
     setActiveInterval: (interval) => {
@@ -399,8 +605,116 @@ function mountTopBar(parent, opts = {}) {
   };
 }
 
+// src/theme-provider.ts
+var THEME_STORAGE_KEY = "tradview:theme";
+var THEME_VARS = {
+  dark: {
+    "--tv-bg": "#0d1117",
+    "--tv-surface": "#161b22",
+    "--tv-border": "#30363d",
+    "--tv-fg": "#e6edf3",
+    "--tv-muted": "#8b949e",
+    "--tv-accent": "#388bfd",
+    "--tv-btn-bg": "#21262d"
+  },
+  light: {
+    "--tv-bg": "#ffffff",
+    "--tv-surface": "#f6f8fa",
+    "--tv-border": "#d0d7de",
+    "--tv-fg": "#24292f",
+    "--tv-muted": "#656d76",
+    "--tv-accent": "#0969da",
+    "--tv-btn-bg": "#f6f8fa"
+  }
+};
+function loadTheme() {
+  try {
+    const v = localStorage.getItem(THEME_STORAGE_KEY);
+    return v === "light" ? "light" : "dark";
+  } catch {
+    return "dark";
+  }
+}
+function saveTheme(theme) {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  } catch {
+  }
+}
+function applyThemeToDocument(theme, root = document.documentElement) {
+  const vars = THEME_VARS[theme];
+  for (const [k, v] of Object.entries(vars)) root.style.setProperty(k, v);
+  root.dataset.tradviewTheme = theme;
+}
+function createThemeProvider(initial) {
+  let theme = initial ?? loadTheme();
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    applyThemeToDocument(theme);
+    for (const l of listeners) l(theme);
+  };
+  applyThemeToDocument(theme);
+  return {
+    getTheme: () => theme,
+    setTheme: (next) => {
+      if (next === theme) return;
+      theme = next;
+      saveTheme(theme);
+      notify();
+    },
+    toggle: () => {
+      theme = theme === "dark" ? "light" : "dark";
+      saveTheme(theme);
+      notify();
+      return theme;
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      listener(theme);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+
+// src/i18n-provider.ts
+import {
+  getLocale,
+  registerLocale,
+  setLocale,
+  t as i18nT
+} from "@coderyo/i18n";
+function interpolate(text, params) {
+  if (!params) return text;
+  return text.replace(/\{(\w+)\}/g, (_, key) => String(params[key] ?? `{${key}}`));
+}
+function createI18nProvider(defaultLocale = "zh-TW") {
+  setLocale(defaultLocale);
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    t(key, fallback, params) {
+      return interpolate(i18nT(key, fallback), params);
+    },
+    getLocale,
+    setLocale(locale) {
+      setLocale(locale);
+      for (const l of listeners) l(locale);
+    },
+    registerLocale(loc, dictionary) {
+      registerLocale(loc, dictionary);
+      if (getLocale() === loc) {
+        for (const l of listeners) l(loc);
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      listener(getLocale());
+      return () => listeners.delete(listener);
+    }
+  };
+}
+
 // src/context-menu.ts
-import { t as t4 } from "@coderyo/i18n";
+import { t as t3 } from "@coderyo/i18n";
 function attachChartContextMenu(chartHost, opts = {}) {
   let menu = null;
   const close = () => {
@@ -414,7 +728,7 @@ function attachChartContextMenu(chartHost, opts = {}) {
     const actions = opts.actions ?? [
       {
         id: "fit",
-        label: t4("context.fitContent", "\u9069\u914D\u756B\u9762"),
+        label: t3("context.fitContent", "\u9069\u914D\u756B\u9762"),
         onClick: () => {
         }
       }
@@ -493,13 +807,13 @@ O ${fmt2(o?.o)}  H ${fmt2(o?.h)}  L ${fmt2(o?.l)}  C ${fmt2(o?.c)}`;
 }
 
 // src/drawing-properties-panel.ts
-import { t as t5 } from "@coderyo/i18n";
+import { t as t4 } from "@coderyo/i18n";
 function mountDrawingPropertiesPanel(parent, opts = {}) {
   const panel = document.createElement("aside");
   panel.className = "tv-drawing-props";
   panel.style.cssText = "display:none;width:220px;flex-shrink:0;border-left:1px solid #30363d;background:#161b22;padding:10px 12px;font-size:12px;color:#e6edf3;overflow:auto;";
   const title = document.createElement("div");
-  title.textContent = t5("drawing.props.title", "\u7E6A\u5716\u5C6C\u6027");
+  title.textContent = t4("drawing.props.title", "\u7E6A\u5716\u5C6C\u6027");
   title.style.cssText = "font-weight:600;margin-bottom:10px;";
   const typeEl = document.createElement("div");
   typeEl.style.color = "#8b949e";
@@ -513,26 +827,26 @@ function mountDrawingPropertiesPanel(parent, opts = {}) {
     row.appendChild(span);
     return row;
   };
-  const colorRow = mkRow(t5("drawing.props.color", "\u984F\u8272"));
+  const colorRow = mkRow(t4("drawing.props.color", "\u984F\u8272"));
   const colorInput = document.createElement("input");
   colorInput.type = "color";
   colorInput.style.cssText = "width:100%;height:28px;border:none;background:transparent;cursor:pointer;";
   colorRow.appendChild(colorInput);
-  const widthRow = mkRow(t5("drawing.props.lineWidth", "\u7DDA\u5BEC"));
+  const widthRow = mkRow(t4("drawing.props.lineWidth", "\u7DDA\u5BEC"));
   const widthInput = document.createElement("input");
   widthInput.type = "range";
   widthInput.min = "1";
   widthInput.max = "6";
   widthInput.style.width = "100%";
   widthRow.appendChild(widthInput);
-  const textRow = mkRow(t5("drawing.props.text", "\u6587\u5B57"));
+  const textRow = mkRow(t4("drawing.props.text", "\u6587\u5B57"));
   const textInput = document.createElement("input");
   textInput.type = "text";
   textInput.style.cssText = "padding:4px 8px;border-radius:4px;border:1px solid #30363d;background:#0d1117;color:#e6edf3;";
   textRow.appendChild(textInput);
   const lockedHint = document.createElement("div");
   lockedHint.style.cssText = "color:#f78166;font-size:11px;margin-top:6px;display:none;";
-  lockedHint.textContent = t5("drawing.props.locked", "\u5DF2\u9396\u5B9A \u2014 \u89E3\u9396\u5F8C\u53EF\u7DE8\u8F2F");
+  lockedHint.textContent = t4("drawing.props.locked", "\u5DF2\u9396\u5B9A \u2014 \u89E3\u9396\u5F8C\u53EF\u7DE8\u8F2F");
   panel.append(title, typeEl, colorRow, widthRow, textRow, lockedHint);
   parent.appendChild(panel);
   const emit = () => {
@@ -551,7 +865,7 @@ function mountDrawingPropertiesPanel(parent, opts = {}) {
       return;
     }
     panel.style.display = "block";
-    typeEl.textContent = `${t5("drawing.props.type", "\u985E\u578B")}: ${drawing.type}`;
+    typeEl.textContent = `${t4("drawing.props.type", "\u985E\u578B")}: ${drawing.type}`;
     const meta = drawing.meta ?? {};
     colorInput.value = String(meta.color ?? "#58a6ff");
     widthInput.value = String(meta.lineWidth ?? 2);
@@ -635,7 +949,7 @@ function createDemoLayoutOptions(partial = {}) {
 }
 
 // src/status-bar.ts
-import { getLocale, setLocale, t as t6 } from "@coderyo/i18n";
+import { getLocale as getLocale2, setLocale as setLocale2, t as t5 } from "@coderyo/i18n";
 function fmt(n, digits = 2) {
   if (n == null || Number.isNaN(n)) return "\u2014";
   return n.toLocaleString(void 0, { maximumFractionDigits: digits });
@@ -652,7 +966,7 @@ function mountStatusBar(parent, opts = {}) {
   const localeWrap = document.createElement("label");
   localeWrap.style.cssText = "display:flex;align-items:center;gap:4px;margin-left:auto;";
   const localeLabel = document.createElement("span");
-  localeLabel.textContent = t6("status.locale", "\u8A9E\u7CFB");
+  localeLabel.textContent = t5("status.locale", "\u8A9E\u7CFB");
   const localeSelect = document.createElement("select");
   localeSelect.style.cssText = "background:#0d1117;color:#e6edf3;border:1px solid #30363d;border-radius:4px;font-size:11px;padding:2px 4px;";
   for (const loc of ["zh-TW", "en"]) {
@@ -661,11 +975,11 @@ function mountStatusBar(parent, opts = {}) {
     opt.textContent = loc;
     localeSelect.appendChild(opt);
   }
-  localeSelect.value = opts.locale ?? getLocale();
+  localeSelect.value = opts.locale ?? getLocale2();
   localeSelect.onchange = () => {
-    setLocale(localeSelect.value);
+    setLocale2(localeSelect.value);
     opts.onLocaleChange?.(localeSelect.value);
-    localeLabel.textContent = t6("status.locale", "\u8A9E\u7CFB");
+    localeLabel.textContent = t5("status.locale", "\u8A9E\u7CFB");
     render(opts);
   };
   localeWrap.append(localeLabel, localeSelect);
@@ -673,14 +987,14 @@ function mountStatusBar(parent, opts = {}) {
   parent.appendChild(bar);
   const render = (state) => {
     const merged = { ...opts, ...state };
-    conn.textContent = `${t6("status.connection", "\u9023\u7DDA")}\uFF1A${merged.connection ?? "\u2014"}`;
+    conn.textContent = `${t5("status.connection", "\u9023\u7DDA")}\uFF1A${merged.connection ?? "\u2014"}`;
     const parts = [merged.symbol, merged.interval].filter(Boolean);
     sym.textContent = parts.length ? parts.join(" \xB7 ") : "";
     const o = merged.ohlcv;
     if (o && (o.o != null || o.c != null)) {
       ohlcv.textContent = `O ${fmt(o.o)}  H ${fmt(o.h)}  L ${fmt(o.l)}  C ${fmt(o.c)}  V ${fmt(o.v, 0)}`;
     } else {
-      ohlcv.textContent = t6("status.ohlcvHint", "\u79FB\u52D5\u5341\u5B57\u7DDA\u67E5\u770B OHLCV");
+      ohlcv.textContent = t5("status.ohlcvHint", "\u79FB\u52D5\u5341\u5B57\u7DDA\u67E5\u770B OHLCV");
     }
   };
   render(opts);
@@ -694,7 +1008,7 @@ function mountStatusBar(parent, opts = {}) {
 }
 
 // src/shortcuts-modal.ts
-import { t as t7 } from "@coderyo/i18n";
+import { t as t6 } from "@coderyo/i18n";
 var SHORTCUTS = [
   { key: "\u2196 / Esc", desc: "\u6E38\u6A19\uFF08\u9078\u53D6/\u7DE8\u8F2F\u7E6A\u5716\uFF09" },
   { key: "Delete", desc: "\u522A\u9664\u9078\u4E2D\u7E6A\u5716" },
@@ -723,7 +1037,7 @@ function openShortcutsModal() {
   const box = document.createElement("div");
   box.style.cssText = "min-width:320px;max-width:90vw;padding:16px 20px;background:#161b22;border:1px solid #30363d;border-radius:8px;color:#e6edf3;";
   const h = document.createElement("h2");
-  h.textContent = t7("shortcuts.title", "\u5FEB\u6377\u9375");
+  h.textContent = t6("shortcuts.title", "\u5FEB\u6377\u9375");
   h.style.cssText = "font-size:16px;margin:0 0 12px;";
   const list = document.createElement("div");
   list.style.cssText = "font-size:13px;line-height:1.8;";
@@ -734,7 +1048,7 @@ function openShortcutsModal() {
   }
   const closeBtn = document.createElement("button");
   closeBtn.type = "button";
-  closeBtn.textContent = t7("shortcuts.close", "\u95DC\u9589");
+  closeBtn.textContent = t6("shortcuts.close", "\u95DC\u9589");
   closeBtn.style.cssText = "margin-top:14px;padding:6px 14px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;";
   const close = () => backdrop.remove();
   closeBtn.onclick = close;
@@ -784,7 +1098,15 @@ function mountChartLayout(root, opts = {}) {
   root.style.display = "flex";
   root.style.flexDirection = "column";
   root.style.height = "100%";
-  root.style.background = "#0d1117";
+  root.style.width = "100%";
+  root.style.minWidth = "0";
+  root.style.boxSizing = "border-box";
+  root.style.overflow = "visible";
+  const themeProvider = opts.themeProvider ?? createThemeProvider();
+  const i18nProvider = opts.i18n ?? createI18nProvider();
+  themeProvider.subscribe((theme) => {
+    root.style.background = theme === "dark" ? "#0d1117" : "#f6f8fa";
+  });
   let activeTool = opts.activeDrawingTool ?? "cursor";
   let setActiveDesktop = null;
   let setActiveMobile = null;
@@ -797,10 +1119,14 @@ function mountChartLayout(root, opts = {}) {
     setActiveDrawingTool(tool);
     opts.onDrawingToolSelect?.(tool);
   };
+  const headerSlot = document.createElement("div");
+  headerSlot.className = "tv-layout-header";
+  headerSlot.style.cssText = "display:none;flex-shrink:0;width:100%;min-width:0;overflow:visible;position:relative;z-index:30;";
   const body = document.createElement("div");
-  body.style.cssText = "display:flex;flex:1;min-height:0;";
+  body.className = "tv-layout-body";
+  body.style.cssText = "display:flex;flex:1;min-height:0;min-width:0;overflow:hidden;position:relative;z-index:0;";
   const leftAside = document.createElement("aside");
-  leftAside.style.cssText = "width:48px;border-right:1px solid #30363d;background:#161b22;display:flex;flex-direction:column;align-items:center;padding:8px 4px;gap:8px;flex-shrink:0;z-index:20;";
+  leftAside.style.cssText = "width:48px;border-right:1px solid #30363d;background:#161b22;display:flex;flex-direction:column;align-items:center;padding:8px 4px;gap:8px;flex-shrink:0;";
   const bottomBar = document.createElement("div");
   bottomBar.style.cssText = "display:none;flex-shrink:0;gap:6px;padding:6px 8px;border-top:1px solid #30363d;background:#161b22;overflow-x:auto;";
   const chartColumn = document.createElement("div");
@@ -815,11 +1141,10 @@ function mountChartLayout(root, opts = {}) {
     onStyleChange: opts.onDrawingStyleChange
   });
   opts.onDrawingSelectionBind?.(propertiesPanel.bind);
+  root.appendChild(headerSlot);
   root.appendChild(body);
   root.appendChild(bottomBar);
-  let topBar = document.createElement("div");
-  topBar.style.display = "none";
-  root.insertBefore(topBar, body);
+  let topBar = headerSlot;
   let setActiveInterval = () => {
   };
   const crosshairLegend = mountCrosshairLegend(chartHost, { symbol: opts.initialSymbol });
@@ -853,18 +1178,27 @@ function mountChartLayout(root, opts = {}) {
   const applyLayoutFeatures = () => {
     const f = layoutFeatures;
     if (f.showTopBar) {
-      topBar.remove();
+      headerSlot.replaceChildren();
+      headerSlot.style.display = "";
       const mounted = mountTopBar(
-        root,
+        headerSlot,
         Object.assign(opts, {
           symbolInput: f.symbolInput,
-          showSettings: f.showSettings
+          showSettings: f.showSettings,
+          themeProvider: opts.themeProvider ?? themeProvider,
+          i18n: opts.i18n ?? i18nProvider,
+          onThemeChange: (theme) => {
+            opts.onThemeChange?.(theme);
+            if (!opts.onThemeChange) opts.onThemeToggle?.();
+          }
         })
       );
       topBar = mounted.el;
       setActiveInterval = mounted.setActiveInterval;
     } else {
-      topBar.style.display = "none";
+      headerSlot.replaceChildren();
+      headerSlot.style.display = "none";
+      topBar = headerSlot;
     }
     if (f.showLeftToolbar) mountLeftToolbar();
     else unmountLeftToolbar();
@@ -902,7 +1236,7 @@ function mountChartLayout(root, opts = {}) {
 }
 
 // src/drawing-context-menu.ts
-import { t as t8 } from "@coderyo/i18n";
+import { t as t7 } from "@coderyo/i18n";
 function openDrawingContextMenu(clientX, clientY, drawing, handlers) {
   const menu = document.createElement("div");
   menu.style.cssText = "position:fixed;z-index:60;min-width:168px;padding:4px 0;background:#161b22;border:1px solid #30363d;border-radius:6px;box-shadow:0 8px 24px #01040988;";
@@ -924,16 +1258,16 @@ function openDrawingContextMenu(clientX, clientY, drawing, handlers) {
   };
   if (drawing) {
     const locked = Boolean(drawing.meta?.locked);
-    add(t8("drawing.ctx.delete", "\u522A\u9664"), handlers.onDelete);
-    add(t8("drawing.ctx.copy", "\u8907\u88FD"), handlers.onCopy);
+    add(t7("drawing.ctx.delete", "\u522A\u9664"), handlers.onDelete);
+    add(t7("drawing.ctx.copy", "\u8907\u88FD"), handlers.onCopy);
     add(
-      locked ? t8("drawing.ctx.unlock", "\u89E3\u9396") : t8("drawing.ctx.lock", "\u9396\u5B9A"),
+      locked ? t7("drawing.ctx.unlock", "\u89E3\u9396") : t7("drawing.ctx.lock", "\u9396\u5B9A"),
       handlers.onToggleLock
     );
     if (drawing.type === "text") {
-      add(t8("drawing.ctx.editText", "\u7DE8\u8F2F\u6587\u5B57"), handlers.onEditText);
+      add(t7("drawing.ctx.editText", "\u7DE8\u8F2F\u6587\u5B57"), handlers.onEditText);
     }
-    add(t8("drawing.ctx.deselect", "\u53D6\u6D88\u9078\u53D6"), handlers.onDeselect);
+    add(t7("drawing.ctx.deselect", "\u53D6\u6D88\u9078\u53D6"), handlers.onDeselect);
   }
   document.body.appendChild(menu);
   const close = () => {
@@ -985,7 +1319,7 @@ import {
   lineNumbers,
   placeholder
 } from "@codemirror/view";
-import { t as t9 } from "@coderyo/i18n";
+import { t as t8 } from "@coderyo/i18n";
 
 // src/pine-language.ts
 import { StreamLanguage } from "@codemirror/language";
@@ -1045,10 +1379,10 @@ function createPineLinter(onStatus) {
     const src = view.state.doc.toString();
     const result = compilePineLite(src);
     if (result.ok) {
-      onStatus?.(t9("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA"), true);
+      onStatus?.(t8("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA"), true);
       return [];
     }
-    onStatus?.(result.errors[0] ?? t9("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4"), false);
+    onStatus?.(result.errors[0] ?? t8("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4"), false);
     return pineDiagnosticsToCm(src, result.diagnostics ?? []);
   });
 }
@@ -1077,16 +1411,16 @@ function mountPineEditorPanel(parent, opts = {}) {
   wrap.open = true;
   wrap.style.cssText = "flex-shrink:0;border-top:1px solid #30363d;background:#161b22;max-height:220px;display:flex;flex-direction:column;";
   const summary = document.createElement("summary");
-  summary.textContent = t9("pine.editor.title", "Pine \u8173\u672C\u7DE8\u8F2F\u5668");
+  summary.textContent = t8("pine.editor.title", "Pine \u8173\u672C\u7DE8\u8F2F\u5668");
   summary.style.cssText = "cursor:pointer;color:#58a6ff;user-select:none;padding:6px 12px;font-size:12px;flex-shrink:0;";
   const toolbar = document.createElement("div");
   toolbar.style.cssText = "display:flex;align-items:center;gap:8px;padding:0 12px 6px;flex-shrink:0;";
   const status = document.createElement("span");
   status.style.cssText = "font-size:11px;color:#8b949e;flex:1;";
-  status.textContent = t9("pine.status.idle", "\u5C31\u7DD2");
+  status.textContent = t8("pine.status.idle", "\u5C31\u7DD2");
   const applyBtn = document.createElement("button");
   applyBtn.type = "button";
-  applyBtn.textContent = t9("pine.apply", "\u5957\u7528\u81F3\u5716\u8868");
+  applyBtn.textContent = t8("pine.apply", "\u5957\u7528\u81F3\u5716\u8868");
   applyBtn.style.cssText = "padding:4px 10px;background:#238636;color:#fff;border:1px solid #2ea043;border-radius:4px;cursor:pointer;font-size:11px;";
   const host = document.createElement("div");
   host.style.cssText = "flex:1;min-height:120px;max-height:160px;overflow:hidden;border-top:1px solid #30363d;";
@@ -1101,10 +1435,10 @@ function mountPineEditorPanel(parent, opts = {}) {
     savePineScriptPreference(src);
     if (r.ok) {
       status.style.color = "#3fb950";
-      status.textContent = t9("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA");
+      status.textContent = t8("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA");
     } else {
       status.style.color = "#f85149";
-      status.textContent = r.errors[0] ?? t9("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4");
+      status.textContent = r.errors[0] ?? t8("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4");
     }
   };
   const extensions = [
@@ -1122,7 +1456,7 @@ function mountPineEditorPanel(parent, opts = {}) {
       status.textContent = msg;
     }),
     keymap.of([...defaultKeymap, ...historyKeymap]),
-    placeholder(t9("pine.placeholder", "// plot(sma(close, 20))")),
+    placeholder(t8("pine.placeholder", "// plot(sma(close, 20))")),
     EditorView.updateListener.of((u) => {
       if (!u.docChanged) return;
       if (debounceTimer) clearTimeout(debounceTimer);
@@ -1155,23 +1489,32 @@ export {
   GRID_SETTING_KEY,
   PINE_SCRIPT_STORAGE_KEY,
   RETURN_CURSOR_KEY,
+  THEME_STORAGE_KEY,
+  applyThemeToDocument,
   attachChartContextMenu,
   bindShortcutsModal,
   createDemoLayoutOptions,
+  createI18nProvider,
+  createSymbolSearchDialog,
+  createThemeProvider,
   loadIndicatorConfig,
   loadPineScriptPreference,
   loadReturnToCursorPreference,
   loadShowGridPreference,
+  loadTheme,
   mergeLayoutFeatures,
   mountChartLayout,
   mountCodeSnippetPanel,
   mountCrosshairLegend,
   mountDrawingPropertiesPanel,
+  mountLogoSlot,
   mountPineEditorPanel,
   mountSettingsPanel as mountSettingsMenu,
   mountSettingsPanel,
   mountStatusBar,
   mountSymbolSearch,
+  mountSymbolSearchDialogTrigger,
+  mountThemeToggle,
   mountTopBar,
   openDrawingContextMenu,
   openShortcutsModal,
@@ -1180,6 +1523,7 @@ export {
   saveIndicatorConfig,
   savePineScriptPreference,
   saveReturnToCursorPreference,
-  saveShowGridPreference
+  saveShowGridPreference,
+  saveTheme
 };
 //# sourceMappingURL=index.js.map