@snack-kit/lib 0.1.0 → 0.3.0

package/dist/es/chunk-4DLFIN3C.js

@@ -0,0 +1,866 @@
+import { Get, Context } from './chunk-JQYH5FWE.js';
+
+// src/debugger/debugger.ts
+var STORAGE_PREFIX = "__snackkit_debugger__";
+var KEY_GATEWAY = `${STORAGE_PREFIX}gateway`;
+var KEY_TYPE = `${STORAGE_PREFIX}type`;
+var KEY_SERVER = `${STORAGE_PREFIX}server`;
+function isChinese() {
+  return /^zh/i.test(navigator.language ?? "");
+}
+var T = {
+  gateway: () => isChinese() ? "\u7F51\u5173" : "Gateway",
+  tag: () => isChinese() ? "\u6807\u7B7E" : "Tag",
+  server: () => isChinese() ? "\u670D\u52A1" : "Server",
+  ctx: () => isChinese() ? "\u4E0A\u4E0B\u6587" : "Ctx",
+  ctxLabel: () => isChinese() ? "\u4E0A\u4E0B\u6587  \u2014  \u70B9\u51FB\u884C\u590D\u5236 key" : "Ctx  \u2014  click row to copy key",
+  search: () => isChinese() ? "\u641C\u7D22..." : "Search...",
+  noMatch: () => isChinese() ? "\u65E0\u5339\u914D\u9879" : "No results",
+  allTags: () => isChinese() ? "\u5168\u90E8\u6807\u7B7E" : "All tags",
+  selectGateway: () => isChinese() ? "\u9009\u62E9\u7F51\u5173" : "Select gateway",
+  selectServer: () => isChinese() ? "\u9009\u62E9\u670D\u52A1" : "Select server",
+  filterCtx: () => isChinese() ? "\u8FC7\u6EE4\u8DEF\u7531..." : "Filter routes...",
+  selectFirst: () => isChinese() ? "\u2190 \u8BF7\u5148\u9009\u62E9\u670D\u52A1" : "\u2190 Select a server first",
+  loading: () => isChinese() ? "\u52A0\u8F7D\u670D\u52A1\u5217\u8868..." : "Loading...",
+  loadFailed: (m) => isChinese() ? `\u52A0\u8F7D\u5931\u8D25: ${m}` : `Failed: ${m}`,
+  loaded: (n) => isChinese() ? `\u5DF2\u52A0\u8F7D ${n} \u4E2A\u670D\u52A1` : `${n} servers loaded`,
+  switching: () => isChinese() ? "\u5207\u6362\u670D\u52A1\u4E2D..." : "Switching...",
+  switchFailed: (m) => isChinese() ? `\u5207\u6362\u5931\u8D25: ${m}` : `Failed: ${m}`,
+  routes: (name, n) => isChinese() ? `${name} \xB7 ${n} \u6761\u8DEF\u7531` : `${name} \xB7 ${n} routes`,
+  copied: (k) => isChinese() ? `\u5DF2\u590D\u5236: ${k}` : `Copied: ${k}`,
+  copyAll: () => isChinese() ? "\u590D\u5236\u5168\u90E8 JSON" : "Copy all JSON",
+  copyAllDone: () => isChinese() ? "\u5DF2\u590D\u5236\u4E3A JSON" : "Copied as JSON"
+};
+var PANEL_STYLE = `
+  #__snackkit_debugger__ {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 99999;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
+    font-size: 13px;
+    color: #b8ccec;
+    user-select: none;
+  }
+
+  /* \u2500\u2500 \u6D6E\u52A8\u6309\u94AE \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-toggle {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #4f8ef7, #6d6ff5);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 14px rgba(79,142,247,0.45);
+    margin-left: auto;
+    font-size: 20px;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  #__snackkit_debugger__ .dbg-toggle:hover {
+    transform: scale(1.08);
+    box-shadow: 0 6px 20px rgba(79,142,247,0.55);
+  }
+  #__snackkit_debugger__ .dbg-toggle:active { transform: scale(0.94); }
+
+  /* \u2500\u2500 \u9762\u677F\u4E3B\u4F53 \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-panel {
+    background: #1e2638;
+    border: 1px solid #2d3a55;
+    border-radius: 12px;
+    width: 440px;
+    margin-bottom: 10px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
+    overflow: visible;
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+    pointer-events: none;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+  }
+  #__snackkit_debugger__ .dbg-panel.open {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+  }
+
+  /* \u2500\u2500 \u9762\u677F Header \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    background: #171e2e;
+    border-bottom: 1px solid #2d3a55;
+    border-radius: 12px 12px 0 0;
+  }
+  #__snackkit_debugger__ .dbg-header-left {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+  #__snackkit_debugger__ .dbg-header-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #34d399;
+    box-shadow: 0 0 6px rgba(52,211,153,0.6);
+  }
+  #__snackkit_debugger__ .dbg-header-dot.loading {
+    background: #fbbf24;
+    box-shadow: 0 0 6px rgba(251,191,36,0.6);
+    animation: dbg-pulse 1s ease-in-out infinite;
+  }
+  #__snackkit_debugger__ .dbg-header-dot.err {
+    background: #f87171;
+    box-shadow: 0 0 6px rgba(248,113,113,0.6);
+  }
+  #__snackkit_debugger__ .dbg-header-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #dce8fa;
+    letter-spacing: 0.03em;
+  }
+  #__snackkit_debugger__ .dbg-header-meta {
+    font-size: 11px;
+    color: #4d6080;
+  }
+
+  /* \u2500\u2500 \u9762\u677F\u5185\u5BB9\u533A \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-body {
+    padding: 12px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 420px;
+    overflow: visible;
+  }
+
+  /* \u2500\u2500 \u5B57\u6BB5\u884C \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-field {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  #__snackkit_debugger__ .dbg-field-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  #__snackkit_debugger__ .dbg-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: #5e72a0;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+  }
+
+  /* \u2500\u2500 \u4E00\u952E\u590D\u5236\u5168\u90E8 JSON \u6309\u94AE \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-copy-all {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: 1px solid #2d3a55;
+    border-radius: 4px;
+    padding: 2px 7px;
+    color: #5e72a0;
+    font-size: 10px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+  }
+  #__snackkit_debugger__ .dbg-copy-all:hover {
+    border-color: #4f8ef7;
+    color: #7aacfa;
+    background: rgba(79,142,247,0.08);
+  }
+  #__snackkit_debugger__ .dbg-copy-all.done {
+    border-color: #34d399;
+    color: #34d399;
+  }
+
+  /* \u2500\u2500 \u81EA\u5B9A\u4E49\u4E0B\u62C9 \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-select {
+    position: relative;
+  }
+  #__snackkit_debugger__ .dbg-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    background: #252f45;
+    border: 1px solid #2d3a55;
+    border-radius: 6px;
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+    min-height: 32px;
+  }
+  #__snackkit_debugger__ .dbg-select-trigger:hover { border-color: #3d5070; background: #2d3a55; }
+  #__snackkit_debugger__ .dbg-select.open .dbg-select-trigger {
+    border-color: #4f8ef7;
+    background: #2d3a55;
+  }
+  #__snackkit_debugger__ .dbg-select-val {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    color: #b8ccec;
+  }
+  #__snackkit_debugger__ .dbg-select-val.placeholder { color: #3d5070; }
+  #__snackkit_debugger__ .dbg-select-arrow {
+    color: #3d5070;
+    font-size: 10px;
+    flex-shrink: 0;
+    transition: transform 0.15s, color 0.15s;
+  }
+  #__snackkit_debugger__ .dbg-select.open .dbg-select-arrow {
+    transform: rotate(180deg);
+    color: #4f8ef7;
+  }
+  #__snackkit_debugger__ .dbg-select-dropdown {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: #1e2638;
+    border: 1px solid #2d3a55;
+    border-radius: 8px;
+    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(4px);
+    pointer-events: none;
+    transition: opacity 0.14s, transform 0.14s;
+    z-index: 100000;
+  }
+  #__snackkit_debugger__ .dbg-select.open .dbg-select-dropdown {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+  #__snackkit_debugger__ .dbg-select-search {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    border-bottom: 1px solid #2d3a55;
+  }
+  #__snackkit_debugger__ .dbg-select-search-icon { color: #3d5070; font-size: 11px; flex-shrink: 0; }
+  #__snackkit_debugger__ .dbg-select-search input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #b8ccec;
+    font-size: 12px;
+    font-family: inherit;
+  }
+  #__snackkit_debugger__ .dbg-select-search input::placeholder { color: #3d5070; }
+  #__snackkit_debugger__ .dbg-select-list {
+    max-height: 160px;
+    overflow-y: auto;
+  }
+  #__snackkit_debugger__ .dbg-select-list::-webkit-scrollbar { width: 3px; }
+  #__snackkit_debugger__ .dbg-select-list::-webkit-scrollbar-track { background: transparent; }
+  #__snackkit_debugger__ .dbg-select-list::-webkit-scrollbar-thumb { background: #2d3a55; border-radius: 2px; }
+  #__snackkit_debugger__ .dbg-select-option {
+    padding: 7px 10px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #8aa4c8;
+    transition: background 0.1s, color 0.1s;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #__snackkit_debugger__ .dbg-select-option:hover { background: #2d3a55; color: #dce8fa; }
+  #__snackkit_debugger__ .dbg-select-option.active { color: #7aacfa; background: #1e3060; }
+  #__snackkit_debugger__ .dbg-select-option.hidden { display: none; }
+  #__snackkit_debugger__ .dbg-select-empty {
+    padding: 12px 10px;
+    font-size: 12px;
+    color: #3d5070;
+    text-align: center;
+  }
+
+  /* \u2500\u2500 \u8DEF\u7531\u5217\u8868 \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-ctx-field {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  #__snackkit_debugger__ .dbg-ctx-wrap {
+    flex: 1;
+    min-height: 0;
+    border: 1px solid #2d3a55;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #252f45;
+    display: flex;
+    flex-direction: column;
+  }
+  #__snackkit_debugger__ .dbg-ctx-search {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border-bottom: 1px solid #2d3a55;
+    background: #1e2638;
+  }
+  #__snackkit_debugger__ .dbg-ctx-search input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #b8ccec;
+    font-size: 12px;
+    font-family: inherit;
+  }
+  #__snackkit_debugger__ .dbg-ctx-search input::placeholder { color: #3d5070; }
+  #__snackkit_debugger__ .dbg-ctx-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  #__snackkit_debugger__ .dbg-ctx-list::-webkit-scrollbar { width: 3px; }
+  #__snackkit_debugger__ .dbg-ctx-list::-webkit-scrollbar-track { background: transparent; }
+  #__snackkit_debugger__ .dbg-ctx-list::-webkit-scrollbar-thumb { background: #2d3a55; border-radius: 2px; }
+  #__snackkit_debugger__ .dbg-ctx-item {
+    padding: 5px 10px;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: minmax(80px, 148px) 1fr auto;
+    gap: 8px;
+    align-items: center;
+    border-bottom: 1px solid #1e2638;
+    transition: background 0.1s;
+  }
+  #__snackkit_debugger__ .dbg-ctx-item:last-child { border-bottom: none; }
+  #__snackkit_debugger__ .dbg-ctx-item:hover { background: #2d3a55; }
+  #__snackkit_debugger__ .dbg-ctx-item.hidden { display: none; }
+  #__snackkit_debugger__ .dbg-ctx-key {
+    font-size: 12px;
+    color: #7aacfa;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #__snackkit_debugger__ .dbg-ctx-val {
+    font-size: 11px;
+    color: #4d6080;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color 0.1s;
+  }
+  #__snackkit_debugger__ .dbg-ctx-item:hover .dbg-ctx-val { color: #7a90b0; }
+  #__snackkit_debugger__ .dbg-ctx-copy {
+    font-size: 11px;
+    color: #3d5070;
+    opacity: 0;
+    flex-shrink: 0;
+    transition: opacity 0.1s, color 0.1s;
+  }
+  #__snackkit_debugger__ .dbg-ctx-item:hover .dbg-ctx-copy { opacity: 1; color: #5e72a0; }
+  #__snackkit_debugger__ .dbg-ctx-item.copied .dbg-ctx-copy { color: #34d399; opacity: 1; }
+  #__snackkit_debugger__ .dbg-ctx-empty {
+    padding: 16px 10px;
+    font-size: 12px;
+    color: #3d5070;
+    text-align: center;
+  }
+
+  /* \u2500\u2500 \u5E95\u90E8\u72B6\u6001\u680F \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-footer {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 14px;
+    background: #171e2e;
+    border-top: 1px solid #2d3a55;
+    border-radius: 0 0 12px 12px;
+    font-size: 11px;
+    color: #4d6080;
+    min-height: 30px;
+  }
+  #__snackkit_debugger__ .dbg-footer.ok { color: #34d399; }
+  #__snackkit_debugger__ .dbg-footer.err { color: #f87171; }
+  #__snackkit_debugger__ .dbg-footer-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
+  @keyframes dbg-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.35; }
+  }
+`;
+var SearchSelect = class {
+  constructor(onChange) {
+    this.options = [];
+    this.selected = "";
+    this.onChange = onChange;
+    this.el = document.createElement("div");
+    this.el.className = "dbg-select";
+    this.trigger = document.createElement("div");
+    this.trigger.className = "dbg-select-trigger";
+    this.valEl = document.createElement("span");
+    this.valEl.className = "dbg-select-val placeholder";
+    const arrow = document.createElement("span");
+    arrow.className = "dbg-select-arrow";
+    arrow.textContent = "\u25BE";
+    this.trigger.appendChild(this.valEl);
+    this.trigger.appendChild(arrow);
+    this.dropdown = document.createElement("div");
+    this.dropdown.className = "dbg-select-dropdown";
+    const searchWrap = document.createElement("div");
+    searchWrap.className = "dbg-select-search";
+    const searchIcon = document.createElement("span");
+    searchIcon.className = "dbg-select-search-icon";
+    searchIcon.textContent = "\u2315";
+    this.searchInput = document.createElement("input");
+    this.searchInput.type = "text";
+    this.searchInput.placeholder = T.search();
+    searchWrap.appendChild(searchIcon);
+    searchWrap.appendChild(this.searchInput);
+    this.listEl = document.createElement("div");
+    this.listEl.className = "dbg-select-list";
+    this.dropdown.appendChild(searchWrap);
+    this.dropdown.appendChild(this.listEl);
+    this.el.appendChild(this.trigger);
+    this.el.appendChild(this.dropdown);
+    this.bindEvents();
+  }
+  bindEvents() {
+    this.trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = this.el.classList.contains("open");
+      document.querySelectorAll("#__snackkit_debugger__ .dbg-select.open").forEach((el) => {
+        if (el !== this.el) el.classList.remove("open");
+      });
+      this.el.classList.toggle("open", !isOpen);
+      if (!isOpen) {
+        this.searchInput.value = "";
+        this.filterOptions("");
+        setTimeout(() => this.searchInput.focus(), 50);
+      }
+    });
+    this.searchInput.addEventListener("input", () => {
+      this.filterOptions(this.searchInput.value);
+    });
+    this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    document.addEventListener("click", () => {
+      this.el.classList.remove("open");
+    });
+  }
+  filterOptions(query) {
+    const q = query.toLowerCase();
+    let visibleCount = 0;
+    this.listEl.querySelectorAll(".dbg-select-option").forEach((opt) => {
+      const match = !q || opt.textContent.toLowerCase().includes(q);
+      opt.classList.toggle("hidden", !match);
+      if (match) visibleCount++;
+    });
+    let emptyEl = this.listEl.querySelector(".dbg-select-empty");
+    if (visibleCount === 0) {
+      if (!emptyEl) {
+        emptyEl = document.createElement("div");
+        emptyEl.className = "dbg-select-empty";
+        emptyEl.textContent = T.noMatch();
+        this.listEl.appendChild(emptyEl);
+      }
+    } else {
+      emptyEl?.remove();
+    }
+  }
+  /** 更新选项列表 */
+  setOptions(options, placeholder) {
+    this.options = options;
+    this.listEl.innerHTML = "";
+    this.valEl.textContent = placeholder;
+    this.valEl.className = "dbg-select-val placeholder";
+    this.selected = "";
+    options.forEach(({ value, label }) => {
+      const opt = document.createElement("div");
+      opt.className = "dbg-select-option";
+      opt.dataset["value"] = value;
+      opt.textContent = label;
+      opt.setAttribute("title", label);
+      opt.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.select(value, label);
+        this.el.classList.remove("open");
+      });
+      this.listEl.appendChild(opt);
+    });
+  }
+  /** 选中某个值（不触发 onChange） */
+  setValue(value) {
+    const opt = this.options.find((o) => o.value === value);
+    if (opt) this.select(opt.value, opt.label, false);
+  }
+  select(value, label, emit = true) {
+    this.selected = value;
+    this.valEl.textContent = label;
+    this.valEl.className = "dbg-select-val";
+    this.listEl.querySelectorAll(".dbg-select-option").forEach((el) => {
+      el.classList.toggle("active", el.dataset["value"] === value);
+    });
+    if (emit) this.onChange(value);
+  }
+  getValue() {
+    return this.selected;
+  }
+  getElement() {
+    return this.el;
+  }
+};
+var Debugger = class _Debugger {
+  constructor(options) {
+    this.servers = [];
+    this.currentCtxMap = {};
+    this.options = options;
+    this.gateways = Array.isArray(options.gateways) ? options.gateways : [options.gateways];
+  }
+  /**
+   * 初始化并渲染调试面板
+   *
+   * 调用后在页面右下角插入浮动按钮，点击展开调试面板。
+   * 面板支持：选择调试网关、切换目标服务、查看并复制路由 ctx。
+   * 网关/服务选择通过 `localStorage` 持久化，刷新后自动恢复。
+   *
+   * @param options 配置项
+   *
+   * @example 单网关
+   * ```ts
+   * import { Debugger } from '@snack-kit/lib/debugger'
+   *
+   * await Debugger.init({
+   *   gateways: 'http://dev-gateway.example.com',
+   * })
+   * ```
+   *
+   * @example 多网关（开发/测试环境切换）
+   * ```ts
+   * await Debugger.init({
+   *   gateways: [
+   *     'http://dev-gateway.example.com',
+   *     'http://test-gateway.example.com',
+   *   ],
+   *   timeout: 5000,
+   * })
+   * ```
+   *
+   * @example 仅在非生产环境加载
+   * ```ts
+   * if (import.meta.env.DEV) {
+   *   const { Debugger } = await import('@snack-kit/lib/debugger')
+   *   await Debugger.init({ gateways: 'http://dev-gateway.example.com' })
+   * }
+   * ```
+   */
+  static async init(options) {
+    const instance = new _Debugger({ timeout: 1e4, ...options });
+    instance.injectStyle();
+    instance.buildDOM();
+    await instance.restoreState();
+    return instance;
+  }
+  /** 注入内联样式 */
+  injectStyle() {
+    if (document.getElementById("__snackkit_debugger_style__")) return;
+    const style = document.createElement("style");
+    style.id = "__snackkit_debugger_style__";
+    style.textContent = PANEL_STYLE;
+    document.head.appendChild(style);
+  }
+  /** 构建 DOM 结构 */
+  buildDOM() {
+    const root = document.createElement("div");
+    root.id = "__snackkit_debugger__";
+    const panel = document.createElement("div");
+    panel.className = "dbg-panel";
+    this.panelEl = panel;
+    const header = document.createElement("div");
+    header.className = "dbg-header";
+    const headerLeft = document.createElement("div");
+    headerLeft.className = "dbg-header-left";
+    this.headerDot = document.createElement("span");
+    this.headerDot.className = "dbg-header-dot loading";
+    const headerTitle = document.createElement("span");
+    headerTitle.className = "dbg-header-title";
+    headerTitle.textContent = "Snack Kit Debugger";
+    headerLeft.appendChild(this.headerDot);
+    headerLeft.appendChild(headerTitle);
+    header.appendChild(headerLeft);
+    panel.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "dbg-body";
+    this.gwVersion = document.createElement("span");
+    this.gwVersion.className = "dbg-header-meta";
+    this.gwSelect = new SearchSelect((val) => this.onGatewayChange(val));
+    this.gwSelect.setOptions(this.gateways.map((g) => ({ value: g, label: g })), T.selectGateway());
+    body.appendChild(this.createFieldWithAction(T.gateway(), this.gwVersion, this.gwSelect.getElement()));
+    this.typeSelect = new SearchSelect((val) => this.onTypeChange(val));
+    body.appendChild(this.createField(T.tag(), this.typeSelect.getElement()));
+    this.serverSelect = new SearchSelect((val) => this.onServerChange(val));
+    body.appendChild(this.createField(T.server(), this.serverSelect.getElement()));
+    const ctxWrap = document.createElement("div");
+    ctxWrap.className = "dbg-ctx-wrap";
+    const ctxSearch = document.createElement("div");
+    ctxSearch.className = "dbg-ctx-search";
+    const ctxSearchIcon = document.createElement("span");
+    ctxSearchIcon.className = "dbg-select-search-icon";
+    ctxSearchIcon.textContent = "\u2315";
+    this.ctxSearchInput = document.createElement("input");
+    this.ctxSearchInput.type = "text";
+    this.ctxSearchInput.placeholder = T.filterCtx();
+    this.ctxSearchInput.addEventListener("input", () => this.filterCtx(this.ctxSearchInput.value));
+    ctxSearch.appendChild(ctxSearchIcon);
+    ctxSearch.appendChild(this.ctxSearchInput);
+    this.ctxList = document.createElement("div");
+    this.ctxList.className = "dbg-ctx-list";
+    ctxWrap.appendChild(ctxSearch);
+    ctxWrap.appendChild(this.ctxList);
+    this.copyAllBtn = document.createElement("button");
+    this.copyAllBtn.className = "dbg-copy-all";
+    this.copyAllBtn.textContent = T.copyAll();
+    this.copyAllBtn.setAttribute("title", isChinese() ? "\u5C06\u5168\u90E8\u4E0A\u4E0B\u6587\u590D\u5236\u4E3A JSON\uFF0C\u53EF\u4F5C\u4E3A Context.load({...}) \u7684\u53C2\u6570" : "Copy all ctx entries as JSON for Context.load({...})");
+    this.copyAllBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.copyAllCtx();
+    });
+    const ctxField = this.createFieldWithAction(T.ctxLabel(), this.copyAllBtn, ctxWrap);
+    ctxField.classList.add("dbg-ctx-field");
+    body.appendChild(ctxField);
+    panel.appendChild(body);
+    const footer = document.createElement("div");
+    footer.className = "dbg-footer";
+    this.footerEl = footer;
+    panel.appendChild(footer);
+    const toggle = document.createElement("button");
+    toggle.className = "dbg-toggle";
+    toggle.textContent = "\u{1F41B}";
+    toggle.setAttribute("title", "Snack Debugger");
+    toggle.addEventListener("click", (e) => {
+      e.stopPropagation();
+      panel.classList.toggle("open");
+    });
+    root.appendChild(panel);
+    root.appendChild(toggle);
+    document.body.appendChild(root);
+  }
+  /** 创建普通字段行（label + content） */
+  createField(label, content) {
+    const field = document.createElement("div");
+    field.className = "dbg-field";
+    const lbl = document.createElement("div");
+    lbl.className = "dbg-label";
+    lbl.textContent = label;
+    field.appendChild(lbl);
+    field.appendChild(content);
+    return field;
+  }
+  /** 创建带操作按钮的字段行（label + action button + content） */
+  createFieldWithAction(label, action, content) {
+    const field = document.createElement("div");
+    field.className = "dbg-field";
+    const fieldHeader = document.createElement("div");
+    fieldHeader.className = "dbg-field-header";
+    const lbl = document.createElement("div");
+    lbl.className = "dbg-label";
+    lbl.textContent = label;
+    fieldHeader.appendChild(lbl);
+    fieldHeader.appendChild(action);
+    field.appendChild(fieldHeader);
+    field.appendChild(content);
+    return field;
+  }
+  /** 恢复上次持久化的状态 */
+  async restoreState() {
+    const savedGw = localStorage.getItem(KEY_GATEWAY);
+    const gw = savedGw && this.gateways.includes(savedGw) ? savedGw : this.gateways[0];
+    this.gwSelect.setValue(gw);
+    await this.loadServers(gw);
+    const savedType = localStorage.getItem(KEY_TYPE);
+    if (savedType) {
+      this.typeSelect.setValue(savedType);
+      this.renderServerOptions(savedType);
+    }
+    const savedServer = localStorage.getItem(KEY_SERVER);
+    if (savedServer && this.servers.find((s) => s.key === savedServer)) {
+      this.serverSelect.setValue(savedServer);
+      await this.applyServer(savedServer);
+    }
+  }
+  async onGatewayChange(gw) {
+    localStorage.setItem(KEY_GATEWAY, gw);
+    this.gwVersion.textContent = "";
+    await this.loadServers(gw);
+  }
+  onTypeChange(type) {
+    localStorage.setItem(KEY_TYPE, type);
+    this.renderServerOptions(type);
+  }
+  async onServerChange(key) {
+    localStorage.setItem(KEY_SERVER, key);
+    await this.applyServer(key);
+  }
+  /** 从网关加载服务列表 */
+  async loadServers(gwUrl) {
+    this.setHeader("loading");
+    this.setFooter(T.loading(), "");
+    const result = await Get(`${gwUrl}/web-debug/host/list`, {
+      cache: true,
+      timeout: this.options.timeout
+    });
+    if (result.error) {
+      this.setHeader("err");
+      this.setFooter(T.loadFailed(result.error.message), "err");
+      return;
+    }
+    this.servers = result.data ?? [];
+    this.renderTypeOptions();
+    this.setHeader("ok");
+    this.setFooter(T.loaded(this.servers.length), "ok");
+  }
+  /** 渲染标签选项 */
+  renderTypeOptions() {
+    const types = [...new Set(this.servers.map((s) => s.type).filter(Boolean))];
+    const opts = [{ value: "", label: T.allTags() }, ...types.map((t) => ({ value: t, label: t }))];
+    this.typeSelect.setOptions(opts, T.allTags());
+    this.typeSelect.setValue("");
+    this.renderServerOptions("");
+  }
+  /** 根据标签渲染服务选项 */
+  renderServerOptions(type) {
+    const filtered = type ? this.servers.filter((s) => s.type === type) : this.servers;
+    this.serverSelect.setOptions(
+      filtered.map((s) => ({ value: s.key, label: `${s.name}  (${s.key})` })),
+      T.selectServer()
+    );
+    this.renderCtxList({});
+  }
+  /** 切换目标服务，重新加载 Context 路由映射 */
+  async applyServer(key) {
+    if (!key) {
+      this.renderCtxList({});
+      return;
+    }
+    const server = this.servers.find((s) => s.key === key);
+    if (!server) return;
+    this.setFooter(T.switching(), "");
+    try {
+      await Context.load(server.origin, this.options.timeout);
+      const res = await fetch(`${server.origin}/ngw/context`);
+      const raw = res.ok ? await res.json() : {};
+      const ctxMap = {};
+      for (const [k, v] of Object.entries(raw)) {
+        if (k !== "$info" && typeof v === "string") ctxMap[k] = v;
+      }
+      const info = Context.info;
+      if (info) this.gwVersion.textContent = `v${info.version}`;
+      this.renderCtxList(ctxMap);
+      const count = Object.keys(ctxMap).length;
+      this.setFooter(T.routes(server.name, count), "ok");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      this.setFooter(T.switchFailed(msg), "err");
+    }
+  }
+  /** 渲染路由列表 */
+  renderCtxList(ctxMap) {
+    this.currentCtxMap = ctxMap;
+    this.ctxList.innerHTML = "";
+    this.ctxSearchInput.value = "";
+    const entries = Object.entries(ctxMap);
+    if (entries.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "dbg-ctx-empty";
+      empty.textContent = T.selectFirst();
+      this.ctxList.appendChild(empty);
+      return;
+    }
+    entries.forEach(([k, v]) => {
+      const item = document.createElement("div");
+      item.className = "dbg-ctx-item";
+      item.dataset["key"] = k;
+      const keySpan = document.createElement("span");
+      keySpan.className = "dbg-ctx-key";
+      keySpan.textContent = k;
+      keySpan.setAttribute("title", k);
+      const valSpan = document.createElement("span");
+      valSpan.className = "dbg-ctx-val";
+      valSpan.textContent = v;
+      valSpan.setAttribute("title", `${k}  \u2192  ${v}`);
+      const copyIcon = document.createElement("span");
+      copyIcon.className = "dbg-ctx-copy";
+      copyIcon.textContent = "\u2398";
+      item.appendChild(keySpan);
+      item.appendChild(valSpan);
+      item.appendChild(copyIcon);
+      item.addEventListener("click", () => this.copyCtxItem(item, k));
+      this.ctxList.appendChild(item);
+    });
+  }
+  /** 过滤路由列表 */
+  filterCtx(query) {
+    const q = query.toLowerCase();
+    this.ctxList.querySelectorAll(".dbg-ctx-item").forEach((item) => {
+      const key = item.dataset["key"] ?? "";
+      item.classList.toggle("hidden", !!q && !key.toLowerCase().includes(q));
+    });
+  }
+  /** 复制单个 ctx key */
+  copyCtxItem(item, text) {
+    navigator.clipboard.writeText(text).then(() => {
+      item.classList.add("copied");
+      const icon = item.querySelector(".dbg-ctx-copy");
+      if (icon) icon.textContent = "\u2713";
+      setTimeout(() => {
+        item.classList.remove("copied");
+        const ic = item.querySelector(".dbg-ctx-copy");
+        if (ic) ic.textContent = "\u2398";
+      }, 1500);
+      this.setFooter(T.copied(text), "ok");
+      setTimeout(() => this.setFooter("", ""), 2e3);
+    });
+  }
+  /** 一键复制全部上下文为 JSON */
+  copyAllCtx() {
+    const entries = Object.keys(this.currentCtxMap);
+    if (entries.length === 0) return;
+    const json = JSON.stringify(this.currentCtxMap, null, 2);
+    navigator.clipboard.writeText(json).then(() => {
+      this.copyAllBtn.textContent = "\u2713 " + T.copyAllDone();
+      this.copyAllBtn.classList.add("done");
+      setTimeout(() => {
+        this.copyAllBtn.textContent = T.copyAll();
+        this.copyAllBtn.classList.remove("done");
+      }, 2e3);
+      this.setFooter(T.copyAllDone(), "ok");
+      setTimeout(() => this.setFooter("", ""), 2500);
+    });
+  }
+  setHeader(state) {
+    this.headerDot.className = `dbg-header-dot${state !== "ok" ? ` ${state}` : ""}`;
+  }
+  setFooter(msg, cls) {
+    this.footerEl.innerHTML = msg ? `<span class="dbg-footer-dot"></span>${msg}` : "";
+    this.footerEl.className = `dbg-footer${cls ? ` ${cls}` : ""}`;
+  }
+};
+
+export { Debugger };
+//# sourceMappingURL=chunk-4DLFIN3C.js.map
+//# sourceMappingURL=chunk-4DLFIN3C.js.map