zsbqb-static 0.1.0

package/js/app.js

@@ -0,0 +1,2124 @@
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return decodeURIComponent(parts.pop().split(";").shift());
+  return "";
+}
+
+const PREVIEW_AUDIO_KEY = "zsbqb.preview.audio";
+const PREVIEW_AUDIO_EVENT = "zsbqb:preview-audio";
+const PREVIEW_MUTE_ICON_ON =
+  '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>';
+const PREVIEW_MUTE_ICON_OFF =
+  '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71 0 1.52-.51 2.93-1.37 4.06l.99.99zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73 4.27 3zM12 4 9.91 6.09 12 8.18V4z"/></svg>';
+
+function clampPreviewVolume(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return 1;
+  return Math.min(1, Math.max(0, n));
+}
+
+function normalizePreviewAudioPrefs(raw) {
+  const volume = clampPreviewVolume(raw && raw.volume);
+  const muted = Boolean(raw && raw.muted) || volume <= 0;
+  return {
+    volume: volume > 0 ? volume : 1,
+    muted,
+    alwaysMute: Boolean(raw && raw.alwaysMute),
+    hitsounds: Boolean(raw && raw.hitsounds),
+    burstColor: raw && raw.burstColor === "red" ? "red" : "pink",
+  };
+}
+
+function readPreviewAudioPrefs() {
+  try {
+    const raw = window.localStorage.getItem(PREVIEW_AUDIO_KEY);
+    if (!raw) return { volume: 1, muted: false, alwaysMute: false, hitsounds: false, burstColor: "pink" };
+    return normalizePreviewAudioPrefs(JSON.parse(raw));
+  } catch (_err) {
+    return { volume: 1, muted: false, alwaysMute: false, hitsounds: false, burstColor: "pink" };
+  }
+}
+
+function writePreviewAudioPrefs(next, options) {
+  const prefs = normalizePreviewAudioPrefs({
+    ...readPreviewAudioPrefs(),
+    ...(next || {}),
+  });
+  const prev = readPreviewAudioPrefs();
+  const same =
+    prev.muted === prefs.muted &&
+    prev.alwaysMute === prefs.alwaysMute &&
+    prev.hitsounds === prefs.hitsounds &&
+    prev.burstColor === prefs.burstColor &&
+    Math.abs(prev.volume - prefs.volume) < 0.0005;
+  try {
+    window.localStorage.setItem(
+      PREVIEW_AUDIO_KEY,
+      JSON.stringify({
+        volume: prefs.volume,
+        muted: prefs.muted,
+        alwaysMute: prefs.alwaysMute,
+        hitsounds: prefs.hitsounds,
+        burstColor: prefs.burstColor,
+      }),
+    );
+  } catch (_err) {
+    // Private mode can reject localStorage writes.
+  }
+  if (!same) {
+    const detail = {
+      volume: prefs.volume,
+      muted: prefs.muted,
+      alwaysMute: prefs.alwaysMute,
+      hitsounds: prefs.hitsounds,
+      burstColor: prefs.burstColor,
+    };
+    if (options && options.apply === false) detail.apply = false;
+    window.dispatchEvent(new CustomEvent(PREVIEW_AUDIO_EVENT, { detail }));
+  }
+  return prefs;
+}
+
+window.ZsbqbPreviewAudio = {
+  key: PREVIEW_AUDIO_KEY,
+  event: PREVIEW_AUDIO_EVENT,
+  read: readPreviewAudioPrefs,
+  write: writePreviewAudioPrefs,
+};
+
+function closePreviewMuteHelp() {
+  document.querySelectorAll("[data-preview-mute-help-panel]").forEach((panel) => {
+    panel.hidden = true;
+  });
+  document.querySelectorAll("[data-preview-mute-help]").forEach((button) => {
+    button.setAttribute("aria-expanded", "false");
+  });
+}
+
+function syncPreviewMuteUi(prefs) {
+  const state = prefs || readPreviewAudioPrefs();
+  const on = Boolean(state.alwaysMute);
+  document.querySelectorAll("[data-preview-mute-toggle]").forEach((toggle) => {
+    if (toggle.getAttribute("aria-hidden") === "true") return;
+    toggle.setAttribute("aria-checked", on ? "true" : "false");
+    toggle.classList.toggle("is-on", on);
+    const icon = toggle.querySelector("[data-preview-mute-icon]");
+    if (icon) icon.innerHTML = on ? PREVIEW_MUTE_ICON_OFF : PREVIEW_MUTE_ICON_ON;
+  });
+  document.querySelectorAll("[data-preview-mute] .user-menu__mute").forEach((row) => {
+    row.classList.toggle("is-on", on);
+  });
+  document.querySelectorAll("[data-preview-mute-badge]").forEach((badge) => {
+    badge.hidden = !on;
+  });
+  document.querySelectorAll("[data-user-menu-trigger]").forEach((trigger) => {
+    trigger.classList.toggle("is-preview-muted", on);
+  });
+  const hits = Boolean(state.hitsounds);
+  document.querySelectorAll("[data-preview-hitsounds-toggle]").forEach((toggle) => {
+    toggle.setAttribute("aria-checked", hits ? "true" : "false");
+    toggle.classList.toggle("is-on", hits);
+  });
+  const color = state.burstColor === "red" ? "red" : "pink";
+  document.querySelectorAll("[data-preview-burst-color-toggle]").forEach((toggle) => {
+    toggle.setAttribute("aria-checked", color === "pink" ? "true" : "false");
+    toggle.classList.toggle("is-pink", color === "pink");
+    toggle.classList.toggle("is-red", color === "red");
+    toggle.setAttribute("aria-label", color === "pink" ? "爆气色 粉色" : "爆气色 红色");
+  });
+}
+
+function bindPreviewAudioMenu() {
+  syncPreviewMuteUi();
+
+  document.querySelectorAll("[data-preview-mute-toggle]").forEach((toggle) => {
+    toggle.addEventListener("click", (event) => {
+      event.preventDefault();
+      const prefs = readPreviewAudioPrefs();
+      writePreviewAudioPrefs({ alwaysMute: !prefs.alwaysMute });
+    });
+  });
+
+  document.querySelectorAll("[data-preview-hitsounds-toggle]").forEach((toggle) => {
+    toggle.addEventListener("click", (event) => {
+      event.preventDefault();
+      const prefs = readPreviewAudioPrefs();
+      writePreviewAudioPrefs({ hitsounds: !prefs.hitsounds });
+    });
+  });
+
+  document.querySelectorAll("[data-preview-burst-color-toggle]").forEach((toggle) => {
+    toggle.addEventListener("click", (event) => {
+      event.preventDefault();
+      const prefs = readPreviewAudioPrefs();
+      writePreviewAudioPrefs({ burstColor: prefs.burstColor === "red" ? "pink" : "red" });
+    });
+  });
+
+  document.querySelectorAll("[data-preview-mute]").forEach((root) => {
+    const help = root.querySelector("[data-preview-mute-help]");
+    const panel = root.querySelector("[data-preview-mute-help-panel]");
+    if (!help || !panel) return;
+    help.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const willOpen = panel.hidden;
+      closePreviewMuteHelp();
+      panel.hidden = !willOpen;
+      help.setAttribute("aria-expanded", willOpen ? "true" : "false");
+    });
+  });
+
+  window.addEventListener(PREVIEW_AUDIO_EVENT, (event) => {
+    syncPreviewMuteUi((event && event.detail) || readPreviewAudioPrefs());
+  });
+  window.addEventListener("storage", (event) => {
+    if (event.key !== PREVIEW_AUDIO_KEY) return;
+    const prefs = readPreviewAudioPrefs();
+    syncPreviewMuteUi(prefs);
+    window.dispatchEvent(new CustomEvent(PREVIEW_AUDIO_EVENT, { detail: prefs }));
+  });
+}
+
+function syncCsrfTokenFromCookie(form) {
+  const input = form.querySelector('input[name="csrfmiddlewaretoken"]');
+  const token = getCookie("csrftoken");
+  if (input && token) {
+    input.value = token;
+  }
+}
+
+function bindCsrfFormSync() {
+  document.querySelectorAll("form").forEach((form) => {
+    if (!form.querySelector('input[name="csrfmiddlewaretoken"]')) return;
+    form.addEventListener(
+      "submit",
+      () => {
+        syncCsrfTokenFromCookie(form);
+      },
+      true,
+    );
+  });
+}
+
+function runTencentCaptcha(appId) {
+  return new Promise((resolve, reject) => {
+    if (!window.TencentCaptcha) {
+      reject(new Error("sdk"));
+      return;
+    }
+    const callback = (res) => {
+      if (res.ret === 0) {
+        resolve({ ticket: res.ticket || "", randstr: res.randstr || "" });
+        return;
+      }
+      if (res.ret === 2) {
+        reject(new Error("cancel"));
+        return;
+      }
+      reject(new Error("fail"));
+    };
+    try {
+      const instance = new TencentCaptcha(appId, callback, {});
+      instance.show();
+    } catch (err) {
+      reject(err);
+    }
+  });
+}
+
+function getTencentCaptchaRoot(form) {
+  return form ? form.querySelector("[data-tencent-captcha]") : null;
+}
+
+function readTencentCaptcha(form) {
+  const root = getTencentCaptchaRoot(form);
+  if (!root) return null;
+  const ticketInput = root.querySelector('input[name="captcha_ticket"]');
+  const randstrInput = root.querySelector('input[name="captcha_randstr"]');
+  return {
+    ticket: ((ticketInput && ticketInput.value) || "").trim(),
+    randstr: ((randstrInput && randstrInput.value) || "").trim(),
+    ticketInput,
+    randstrInput,
+    root,
+  };
+}
+
+function setTencentCaptchaVerified(form, ticket, randstr) {
+  const data = readTencentCaptcha(form);
+  if (!data) return;
+  if (data.ticketInput) data.ticketInput.value = ticket;
+  if (data.randstrInput) data.randstrInput.value = randstr;
+  const btn = data.root.querySelector("[data-tencent-captcha-btn]");
+  const status = data.root.querySelector("[data-tencent-captcha-status]");
+  if (btn) btn.hidden = true;
+  if (status) status.hidden = false;
+}
+
+function resetTencentCaptcha(form) {
+  const data = readTencentCaptcha(form);
+  if (!data) return;
+  if (data.ticketInput) data.ticketInput.value = "";
+  if (data.randstrInput) data.randstrInput.value = "";
+  const btn = data.root.querySelector("[data-tencent-captcha-btn]");
+  const status = data.root.querySelector("[data-tencent-captcha-status]");
+  if (btn) {
+    btn.hidden = false;
+    btn.disabled = false;
+  }
+  if (status) status.hidden = true;
+}
+
+async function ensureTencentCaptcha(form) {
+  const root = getTencentCaptchaRoot(form);
+  if (!root) return true;
+  const appId = (root.dataset.captchaAppId || "").trim();
+  const current = readTencentCaptcha(form);
+  if (current && current.ticket && current.randstr) return true;
+  if (!appId) {
+    alert("人机验证未配置");
+    return false;
+  }
+  try {
+    const result = await runTencentCaptcha(appId);
+    setTencentCaptchaVerified(form, result.ticket, result.randstr);
+    return true;
+  } catch (err) {
+    if (err && err.message !== "cancel") {
+      alert("人机验证失败，请重试");
+    }
+    return false;
+  }
+}
+
+function bindTencentCaptcha() {
+  document.querySelectorAll("[data-tencent-captcha-btn]").forEach((button) => {
+    button.addEventListener("click", async () => {
+      const form = button.closest("form");
+      if (!form) return;
+      button.disabled = true;
+      const ok = await ensureTencentCaptcha(form);
+      button.disabled = false;
+      if (!ok) resetTencentCaptcha(form);
+    });
+  });
+
+  document.querySelectorAll("[data-login-form]").forEach((form) => {
+    form.addEventListener("submit", async (event) => {
+      if (!getTencentCaptchaRoot(form)) return;
+      const current = readTencentCaptcha(form);
+      if (current && current.ticket && current.randstr) return;
+      event.preventDefault();
+      const ok = await ensureTencentCaptcha(form);
+      if (ok) form.submit();
+    });
+  });
+}
+
+function bindSmsButtons() {
+  document.querySelectorAll("[data-sms-btn]").forEach((button) => {
+    button.addEventListener("click", async () => {
+      const form = button.closest("[data-sms-form]") || button.closest("form");
+      if (!form) return;
+      const phoneInput = form.querySelector('input[name="phone"]');
+      const debugEl = form.querySelector("[data-sms-debug]");
+      const phone = ((phoneInput && phoneInput.value) || "").trim();
+      if (!/^1[3-9]\d{9}$/.test(phone)) {
+        alert("请输入有效的 11 位手机号");
+        return;
+      }
+      const needsCaptcha = Boolean(getTencentCaptchaRoot(form));
+      if (needsCaptcha) {
+        const ok = await ensureTencentCaptcha(form);
+        if (!ok) return;
+      }
+      const captcha = readTencentCaptcha(form);
+      const original = button.textContent;
+      button.disabled = true;
+      button.textContent = "发送中...";
+      const body = {
+        phone,
+        purpose: button.dataset.purpose || "register",
+      };
+      if (captcha && captcha.ticket && captcha.randstr) {
+        body.captcha_ticket = captcha.ticket;
+        body.captcha_randstr = captcha.randstr;
+      }
+      try {
+        const response = await fetch("/accounts/sms/send/", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRFToken": getCookie("csrftoken"),
+          },
+          body: JSON.stringify(body),
+        });
+        const data = await response.json();
+        if (!data.ok) {
+          button.disabled = false;
+          button.textContent = original;
+          resetTencentCaptcha(form);
+          alert(data.message || "发送失败");
+          return;
+        }
+        if (debugEl && data.debug_code) {
+          debugEl.hidden = false;
+          debugEl.textContent = `开发模式验证码：${data.debug_code}`;
+        }
+        let remain = data.retry_after || 60;
+        const timer = setInterval(() => {
+          remain -= 1;
+          button.textContent = `${remain}s`;
+          if (remain <= 0) {
+            clearInterval(timer);
+            button.disabled = false;
+            button.textContent = original;
+            resetTencentCaptcha(form);
+          }
+        }, 1000);
+        button.textContent = `${remain}s`;
+        resetTencentCaptcha(form);
+      } catch (err) {
+        button.disabled = false;
+        button.textContent = original;
+        resetTencentCaptcha(form);
+        alert("发送失败，请稍后重试");
+      }
+    });
+  });
+}
+
+function bindProfileUsername() {
+  document.querySelectorAll("[data-profile-username]").forEach((field) => {
+    const viewRow = field.querySelector("[data-profile-username-view]");
+    const editPanel = field.querySelector("[data-profile-username-edit-panel]");
+    const editBtn = field.querySelector("[data-profile-username-edit]");
+    const input = field.querySelector('input[name="username"]');
+    if (!viewRow || !editPanel || !editBtn || !input) return;
+
+    function showEdit() {
+      viewRow.hidden = true;
+      editPanel.hidden = false;
+      input.focus();
+      input.select();
+    }
+
+    editBtn.addEventListener("click", showEdit);
+
+    if (!editPanel.hidden) {
+      input.focus();
+      input.select();
+    }
+  });
+}
+
+function bindLoginTabs() {
+  document.querySelectorAll("[data-login-form]").forEach((form) => {
+    const tabs = form.closest(".auth-card")?.querySelector("[data-login-tabs]");
+    const modeInput = form.querySelector('input[name="login_mode"]');
+    const panels = form.querySelectorAll("[data-login-panel]");
+    const eyebrow = form.closest(".auth-card")?.querySelector("[data-login-eyebrow]");
+    if (!tabs || !modeInput) return;
+
+    function setMode(mode) {
+      modeInput.value = mode;
+      tabs.querySelectorAll("[data-login-mode]").forEach((tab) => {
+        const on = tab.dataset.loginMode === mode;
+        tab.classList.toggle("is-on", on);
+        tab.setAttribute("aria-selected", on ? "true" : "false");
+      });
+      panels.forEach((panel) => {
+        const isCurrent = panel.dataset.loginPanel === mode;
+        panel.hidden = !isCurrent;
+        if (!isCurrent) {
+          const input = panel.querySelector("input");
+          if (input) input.value = "";
+        }
+      });
+      if (eyebrow) {
+        eyebrow.textContent = mode === "phone" ? "手机号 + 密码" : "用户名 + 密码";
+      }
+    }
+
+    tabs.querySelectorAll("[data-login-mode]").forEach((tab) => {
+      tab.addEventListener("click", () => setMode(tab.dataset.loginMode || "username"));
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", bindCsrfFormSync);
+document.addEventListener("DOMContentLoaded", bindLoginTabs);
+document.addEventListener("DOMContentLoaded", bindProfileUsername);
+document.addEventListener("DOMContentLoaded", bindSmsButtons);
+document.addEventListener("DOMContentLoaded", bindTencentCaptcha);
+document.addEventListener("DOMContentLoaded", bindCategoryModal);
+document.addEventListener("DOMContentLoaded", bindSearchClear);
+document.addEventListener("DOMContentLoaded", bindBpmFilter);
+document.addEventListener("DOMContentLoaded", bindFamilyPicker);
+document.addEventListener("DOMContentLoaded", bindStarPicker);
+document.addEventListener("DOMContentLoaded", bindUserMenu);
+document.addEventListener("DOMContentLoaded", bindPreviewAudioMenu);
+
+function bindUserMenu() {
+  document.querySelectorAll("[data-user-menu]").forEach((root) => {
+    const trigger = root.querySelector("[data-user-menu-trigger]");
+    const menu = root.querySelector("[data-user-menu-panel]");
+    if (!trigger || !menu) return;
+
+    const closeMenu = () => {
+      menu.hidden = true;
+      trigger.setAttribute("aria-expanded", "false");
+      closePreviewMuteHelp();
+    };
+
+    const openMenu = () => {
+      menu.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+    };
+
+    trigger.addEventListener("click", (event) => {
+      event.stopPropagation();
+      if (menu.hidden) openMenu();
+      else closeMenu();
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!root.contains(event.target)) closeMenu();
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMenu();
+    });
+  });
+}
+
+function bindStarPicker() {
+  document.querySelectorAll("[data-star-picker]").forEach((root) => {
+    const native = root.querySelector(".star-picker__native");
+    const trigger = root.querySelector("[data-star-trigger]");
+    const menu = root.querySelector("[data-star-menu]");
+    const valueEl = root.querySelector("[data-star-value]");
+    const form = root.closest("form");
+    if (!native || !trigger || !menu || !valueEl || !form) return;
+
+    const blockWheel = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const blockDirectionKeys = (event) => {
+      if (
+        [
+          "ArrowUp",
+          "ArrowDown",
+          "ArrowLeft",
+          "ArrowRight",
+          "PageUp",
+          "PageDown",
+          "Home",
+          "End",
+        ].includes(event.key)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+
+    native.addEventListener("wheel", blockWheel, { passive: false });
+    native.addEventListener("keydown", blockDirectionKeys);
+    native.addEventListener("focus", () => native.blur());
+    trigger.addEventListener("wheel", blockWheel, { passive: false });
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (menu.hidden) openMenu();
+      }
+    });
+
+    native.addEventListener("change", () => {
+      const option = menu.querySelector(
+        `[data-star-option][data-star-value="${native.value}"]`
+      );
+      if (option) {
+        menu.querySelectorAll("[data-star-option]").forEach((item) => {
+          const on = item === option;
+          item.classList.toggle("is-on", on);
+          item.setAttribute("aria-selected", on ? "true" : "false");
+        });
+        renderValue(option);
+      }
+    });
+
+    const closeMenu = () => {
+      menu.hidden = true;
+      trigger.setAttribute("aria-expanded", "false");
+    };
+
+    const openMenu = () => {
+      menu.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+    };
+
+    const renderValue = (option) => {
+      valueEl.textContent = option.textContent.trim() || "全部";
+    };
+
+    const pickOption = (option) => {
+      const value = option.getAttribute("data-star-value") || "";
+      native.value = value;
+      menu.querySelectorAll("[data-star-option]").forEach((item) => {
+        const on = item === option;
+        item.classList.toggle("is-on", on);
+        item.setAttribute("aria-selected", on ? "true" : "false");
+      });
+      renderValue(option);
+      closeMenu();
+      if (document.querySelector(".song-list")) {
+        window.__applyQueryFilters?.();
+        return;
+      }
+      form.requestSubmit();
+    };
+
+    trigger.addEventListener("click", () => {
+      if (menu.hidden) openMenu();
+      else closeMenu();
+    });
+
+    menu.addEventListener("click", (event) => {
+      const option = event.target.closest("[data-star-option]");
+      if (option && menu.contains(option)) pickOption(option);
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!root.contains(event.target)) closeMenu();
+    });
+
+    document.addEventListener("pointerdown", (event) => {
+      if (!root.contains(event.target)) closeMenu();
+    });
+
+    window.addEventListener("scroll", closeMenu, { passive: true });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMenu();
+    });
+  });
+}
+
+function bindFamilyPicker() {
+  document.querySelectorAll("[data-family-picker]").forEach((root) => {
+    const native = root.querySelector(".family-picker__native");
+    const trigger = root.querySelector("[data-family-trigger]");
+    const menu = root.querySelector("[data-family-menu]");
+    const valueEl = root.querySelector("[data-family-value]");
+    const form = root.closest("form");
+    if (!native || !trigger || !menu || !valueEl || !form) return;
+
+    const blockWheel = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const blockDirectionKeys = (event) => {
+      if (
+        [
+          "ArrowUp",
+          "ArrowDown",
+          "ArrowLeft",
+          "ArrowRight",
+          "PageUp",
+          "PageDown",
+          "Home",
+          "End",
+        ].includes(event.key)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+
+    native.addEventListener("wheel", blockWheel, { passive: false });
+    native.addEventListener("keydown", blockDirectionKeys);
+    native.addEventListener("focus", () => native.blur());
+    trigger.addEventListener("wheel", blockWheel, { passive: false });
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (menu.hidden) openMenu();
+      }
+    });
+
+    native.addEventListener("change", () => {
+      const option = menu.querySelector(
+        `[data-family-option][data-family-value="${native.value}"]`
+      );
+      if (option) {
+        menu.querySelectorAll("[data-family-option]").forEach((item) => {
+          const on = item === option;
+          item.classList.toggle("is-on", on);
+          item.setAttribute("aria-selected", on ? "true" : "false");
+        });
+        renderValue(option);
+      }
+    });
+
+    const closeMenu = () => {
+      menu.hidden = true;
+      trigger.setAttribute("aria-expanded", "false");
+    };
+
+    const openMenu = () => {
+      menu.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+    };
+
+    const renderValue = (option) => {
+      const label = option.querySelector("span")?.textContent || "全部";
+      const icon = option.querySelector(".family-picker__icon");
+      valueEl.textContent = "";
+      if (icon) {
+        valueEl.appendChild(icon.cloneNode(true));
+      }
+      const text = document.createElement("span");
+      text.textContent = label;
+      valueEl.appendChild(text);
+    };
+
+    const pickOption = (option) => {
+      const value = option.getAttribute("data-family-value") || "";
+      if (!value) return;
+      native.value = value;
+      menu.querySelectorAll("[data-family-option]").forEach((item) => {
+        const on = item === option;
+        item.classList.toggle("is-on", on);
+        item.setAttribute("aria-selected", on ? "true" : "false");
+      });
+      renderValue(option);
+      closeMenu();
+      if (typeof window.__queryLoadFamily === "function" && window.__queryLoadFamily(value, "")) {
+        return;
+      }
+      // 歌单按模式整页拉取；切模式必须带 family 跳转，不能走空搜索拦截/前端过滤。
+      // 星级选项因模式而异，一并清掉以免旧星级在新模式上被前端滤成空列表。
+      navigateQueryForm(form, { family: value, star: "" });
+    };
+
+    trigger.addEventListener("click", () => {
+      if (menu.hidden) openMenu();
+      else closeMenu();
+    });
+
+    menu.querySelectorAll("[data-family-option]").forEach((option) => {
+      option.addEventListener("click", () => pickOption(option));
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!root.contains(event.target)) closeMenu();
+    });
+
+    document.addEventListener("pointerdown", (event) => {
+      if (!root.contains(event.target)) closeMenu();
+    });
+
+    window.addEventListener("scroll", closeMenu, { passive: true });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMenu();
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", bindBurstCorrect);
+
+function correctBurstCodeNum(burstNum, halfCombo, userCb) {
+  return burstNum - (halfCombo - userCb);
+}
+
+function burstComboDelta(halfCombo, userCb) {
+  return userCb - halfCombo;
+}
+
+function burstComboTargets(item) {
+  if (item.dataset.burstKind === "double") {
+    const secondRow = item
+      .querySelector("[data-burst-code-second]")
+      ?.closest(".burst-code-row");
+    return secondRow ? secondRow.querySelectorAll("[data-burst-combo]") : [];
+  }
+  return item.querySelectorAll("[data-burst-combo]");
+}
+
+function applyBurstComboCorrection(item, delta) {
+  burstComboTargets(item).forEach((el) => {
+    const base = Number(el.dataset.burstCombo);
+    if (!Number.isFinite(base)) return;
+    el.textContent = String(base + delta);
+  });
+}
+
+function restoreBurstComboValues(item) {
+  burstComboTargets(item).forEach((el) => {
+    const base = el.dataset.burstCombo;
+    el.textContent = base !== "" ? base : "—";
+  });
+}
+
+function formatBurstDescLine(tag, desc, combo, classes) {
+  const comboVal = combo !== "" && combo !== undefined ? combo : "—";
+  return (
+    `<span class="burst-desc-tag">${tag}</span>${desc || "—"} (` +
+    `<span class="${classes}" data-burst-combo="${combo || ""}">${comboVal}</span>)`
+  );
+}
+
+function applyCorrectionBase(item) {
+  if (!item.dataset.corrBurstCodeNum) return;
+
+  const firstDescs = item.querySelector("[data-burst-code-main]")
+    ?.closest(".burst-code-row")
+    ?.querySelector(".burst-descs");
+  if (!firstDescs) return;
+
+  const updateLine = (tag, desc, combo) => {
+    firstDescs.querySelectorAll(".burst-desc-line").forEach((line) => {
+      if (line.querySelector(".burst-desc-tag")?.textContent?.trim() !== tag) return;
+      const comboEl = line.querySelector("[data-burst-combo]");
+      const classes = comboEl?.className || "";
+      line.innerHTML = formatBurstDescLine(tag, desc, combo, classes);
+    });
+  };
+
+  updateLine("[开始]", item.dataset.corrStartDesc, item.dataset.corrStartCombo);
+  updateLine("[结束]", item.dataset.corrEndDesc, item.dataset.corrEndCombo);
+
+  const gainEl = item.querySelector(".slot-gain");
+  if (gainEl) gainEl.textContent = item.dataset.corrGain || "—";
+
+  const scoreEl = item.querySelector("[data-burst-score]");
+  if (scoreEl) scoreEl.textContent = item.dataset.corrScore || "—";
+}
+
+function getSingleCalcBurstNum(item) {
+  if (item.dataset.corrBurstCodeNum) {
+    return {
+      prefix: item.dataset.corrBurstCodePrefix || "",
+      num: Number(item.dataset.corrBurstCodeNum),
+    };
+  }
+  return {
+    prefix: item.dataset.burstCodePrefix || "",
+    num: Number(item.dataset.burstCodeNum),
+  };
+}
+
+function setCorrectedBurstCode(el, text) {
+  if (!el) return;
+  el.textContent = text;
+  const rank = el.closest(".burst-code-col")?.querySelector(".burst-code-rank");
+  if (rank) rank.textContent = "（修正后）";
+}
+
+function snapshotBurstItem(item) {
+  item.querySelectorAll("[data-burst-snapshot]").forEach((el) => {
+    if (el.dataset.originalHtml == null) el.dataset.originalHtml = el.innerHTML;
+  });
+}
+
+function restoreBurstItem(item) {
+  item.querySelectorAll("[data-burst-snapshot]").forEach((el) => {
+    if (el.dataset.originalHtml != null) el.innerHTML = el.dataset.originalHtml;
+  });
+}
+
+function bindBurstCorrect() {
+  document.querySelectorAll(".burst-item[data-burst-kind]").forEach((item) => {
+    const input = item.querySelector("[data-burst-cb-input]");
+    const calcBtn = item.querySelector("[data-burst-calc]");
+    const undoBtn = item.querySelector("[data-burst-undo]");
+    const mainCode = item.querySelector("[data-burst-code-main]");
+    if (!input || !calcBtn || !undoBtn || !mainCode) return;
+
+    snapshotBurstItem(item);
+
+    const syncCalcButton = () => {
+      const raw = input.value.trim();
+      calcBtn.disabled = raw === "" || !Number.isFinite(Number(raw));
+    };
+
+    const syncUndoButton = () => {
+      undoBtn.disabled = !item.classList.contains("is-corrected");
+    };
+
+    const undoCorrection = () => {
+      restoreBurstItem(item);
+      item.classList.remove("is-corrected");
+      syncUndoButton();
+    };
+
+    input.addEventListener("input", syncCalcButton);
+    syncCalcButton();
+    syncUndoButton();
+
+    calcBtn.addEventListener("click", () => {
+      if (calcBtn.disabled) return;
+
+      const halfCombo = Number(item.dataset.halfCombo);
+      const userCb = Number(input.value);
+      if (!Number.isFinite(halfCombo) || !Number.isFinite(userCb)) return;
+
+      const kind = item.dataset.burstKind;
+      if (kind !== "double" && item.dataset.corrBurstCodeNum) {
+        applyCorrectionBase(item);
+      }
+
+      const delta = burstComboDelta(halfCombo, userCb);
+      if (kind === "double") {
+        const prefix = item.dataset.burstCode2Prefix || item.dataset.burstCodePrefix || "";
+        const bNum = Number(item.dataset.burstCode2Num || item.dataset.burstCodeNum);
+        if (!Number.isFinite(bNum)) return;
+        const corrected = correctBurstCodeNum(bNum, halfCombo, userCb);
+        const code2 = `${prefix}${corrected}`;
+        setCorrectedBurstCode(item.querySelector("[data-burst-code-second]"), code2);
+      } else {
+        const { prefix, num: bNum } = getSingleCalcBurstNum(item);
+        if (!Number.isFinite(bNum)) return;
+        const corrected = correctBurstCodeNum(bNum, halfCombo, userCb);
+        const code = prefix ? `${prefix}${corrected}` : String(corrected);
+        setCorrectedBurstCode(mainCode, code);
+      }
+      applyBurstComboCorrection(item, delta);
+      item.classList.add("is-corrected");
+      syncUndoButton();
+    });
+
+    undoBtn.addEventListener("click", () => {
+      if (undoBtn.disabled) return;
+      undoCorrection();
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", bindBurstAccordion);
+document.addEventListener("DOMContentLoaded", bindBurstDetailClose);
+
+function bindBurstDetailClose() {
+  document.querySelectorAll("[data-burst-close]").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      event.preventDefault();
+      const returnUrl =
+        button.getAttribute("data-return-url") ||
+        button.getAttribute("href") ||
+        "/query/";
+
+      if (window.history.length > 1 && document.referrer) {
+        try {
+          const ref = new URL(document.referrer);
+          const target = new URL(returnUrl, window.location.origin);
+          const refPath = ref.pathname.replace(/\/$/, "") || "/";
+          const targetPath = target.pathname.replace(/\/$/, "") || "/";
+          if (
+            (refPath === "/query" || refPath === "/query/") &&
+            refPath === targetPath &&
+            ref.search === target.search
+          ) {
+            history.back();
+            return;
+          }
+        } catch (_) {
+          /* fall through */
+        }
+      }
+
+      window.location.assign(returnUrl);
+    });
+  });
+}
+
+function bindBurstAccordion() {
+  document.querySelectorAll("[data-burst-toggle]").forEach((button) => {
+    const item = button.closest(".burst-item");
+    if (!item) return;
+    button.addEventListener("click", () => {
+      const open = item.classList.toggle("is-open");
+      button.textContent = open ? "收起" : "展开";
+      button.setAttribute("aria-expanded", open ? "true" : "false");
+      item.dispatchEvent(new CustomEvent("burst:accordion-change", { bubbles: true }));
+    });
+  });
+}
+
+function debounce(fn, ms) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+
+function bindBpmFilter() {
+  document.querySelectorAll("[data-bpm-filter]").forEach((root) => {
+    const bucketInput = root.querySelector("[data-bpm-bucket]");
+    const exactField = root.querySelector("[data-bpm-exact-field]");
+    const visibleInput = root.querySelector("[data-bpm-input]");
+    const caretBtn = root.querySelector("[data-bpm-caret]");
+    const menu = root.querySelector("[data-bpm-menu]");
+    const form = root.closest("form");
+    const searchInput = form?.querySelector("[data-search-input]");
+    if (!bucketInput || !exactField || !visibleInput || !caretBtn || !menu || !form) return;
+
+    const syncFormFields = () => {
+      const mode = root.dataset.bpmMode || "none";
+      if (mode === "range") {
+        bucketInput.disabled = false;
+        exactField.disabled = true;
+        exactField.value = "";
+      } else if (mode === "exact") {
+        bucketInput.disabled = true;
+        bucketInput.value = "";
+        exactField.disabled = false;
+        exactField.value = visibleInput.value.trim();
+      } else {
+        bucketInput.disabled = true;
+        bucketInput.value = "";
+        exactField.disabled = true;
+        exactField.value = "";
+      }
+    };
+
+    const hasBpmFilter = () => {
+      const mode = root.dataset.bpmMode || "none";
+      return mode === "range" || (mode === "exact" && visibleInput.value.trim());
+    };
+
+    const submitForm = () => {
+      syncFormFields();
+      if (document.querySelector(".song-list")) {
+        window.__applyQueryFilters?.();
+        return;
+      }
+      form.requestSubmit();
+    };
+
+    const snapshotSubmitted = () => {
+      const mode = root.dataset.bpmMode || "none";
+      if (mode === "exact") return visibleInput.value.trim();
+      if (mode === "range") return `range:${bucketInput.value || ""}`;
+      return "";
+    };
+
+    let lastSubmitted = snapshotSubmitted();
+    let skipBlurCommit = false;
+
+    const commitExactBpm = () => {
+      if (visibleInput.readOnly) return;
+      const text = visibleInput.value.trim();
+      const mode = text ? "exact" : "none";
+      const nextKey = mode === "exact" ? text : "";
+      if (nextKey === lastSubmitted && mode === (root.dataset.bpmMode || "none")) return;
+      root.dataset.bpmMode = mode;
+      if (text) markRangeOption("");
+      lastSubmitted = nextKey;
+      submitForm();
+    };
+
+    const markRangeOption = (value) => {
+      menu.querySelectorAll("[data-bpm-range]").forEach((option) => {
+        const on = (option.getAttribute("data-bpm-range") || "") === value;
+        option.classList.toggle("is-on", on);
+        option.setAttribute("aria-selected", on ? "true" : "false");
+      });
+    };
+
+    const closeMenu = () => {
+      menu.hidden = true;
+      caretBtn.setAttribute("aria-expanded", "false");
+    };
+
+    const openMenu = () => {
+      menu.hidden = false;
+      caretBtn.setAttribute("aria-expanded", "true");
+    };
+
+    const beginExactInput = () => {
+      if (!visibleInput.readOnly) return;
+      root.dataset.bpmMode = "none";
+      visibleInput.readOnly = false;
+      visibleInput.value = "";
+      bucketInput.value = "";
+      exactField.value = "";
+      markRangeOption("");
+    };
+
+    const pickRange = (option) => {
+      const value = option.getAttribute("data-bpm-range") || "";
+      const display = option.getAttribute("data-bpm-range-display") || value;
+      if (!value) {
+        root.dataset.bpmMode = "none";
+        visibleInput.readOnly = false;
+        visibleInput.value = "";
+        bucketInput.value = "";
+        exactField.value = "";
+      } else {
+        root.dataset.bpmMode = "range";
+        bucketInput.value = value;
+        visibleInput.value = display;
+        visibleInput.readOnly = true;
+        exactField.value = "";
+      }
+      markRangeOption(value);
+      closeMenu();
+      lastSubmitted = value ? `range:${value}` : "";
+      submitForm();
+    };
+
+    const debouncedSearchSubmit = debounce(() => {
+      // 搜索词只在点「搜索」/回车时提交；这里仅当已选 BPM 时把关键词带上。
+      if (!searchInput?.value.trim() || !hasBpmFilter()) return;
+      if (document.querySelector(".song-list")) {
+        window.__applyQueryFilters?.();
+        return;
+      }
+      submitForm();
+    }, 400);
+
+    caretBtn.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (menu.hidden) openMenu();
+      else closeMenu();
+    });
+
+    menu.querySelectorAll("[data-bpm-range]").forEach((option) => {
+      option.addEventListener("click", () => pickRange(option));
+    });
+
+    visibleInput.addEventListener("focus", beginExactInput);
+    visibleInput.addEventListener("mousedown", (event) => {
+      if (visibleInput.readOnly) {
+        event.preventDefault();
+        beginExactInput();
+        visibleInput.focus();
+      }
+    });
+
+    visibleInput.addEventListener("blur", (event) => {
+      if (skipBlurCommit) {
+        skipBlurCommit = false;
+        return;
+      }
+      const next = event.relatedTarget;
+      if (next && root.contains(next)) return;
+      commitExactBpm();
+    });
+
+    visibleInput.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        skipBlurCommit = true;
+        commitExactBpm();
+      }
+    });
+
+    if (searchInput) {
+      searchInput.addEventListener("input", debouncedSearchSubmit);
+    }
+
+    document.addEventListener("click", (event) => {
+      if (!root.contains(event.target)) closeMenu();
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMenu();
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", bindQueryLetterSearch);
+document.addEventListener("DOMContentLoaded", bindIdempotentSearchForm);
+document.addEventListener("DOMContentLoaded", bindAlphaRail);
+document.addEventListener("DOMContentLoaded", bindTitleMarquees);
+window.bindTitleMarquees = bindTitleMarquees;
+document.addEventListener("DOMContentLoaded", bindClientQueryFilters);
+
+function clearLetterWhenSearching(form) {
+  const searchInput = form.querySelector("[data-search-input]");
+  if (!searchInput?.value.trim()) return;
+  form.querySelectorAll("[data-letter-field]").forEach((input) => input.remove());
+}
+
+function queryFormParams(form) {
+  const params = new URLSearchParams();
+  for (const [key, value] of new FormData(form).entries()) {
+    const trimmed = String(value).trim();
+    if (key === "q" && !trimmed) continue;
+    params.set(key, String(value));
+  }
+  return params;
+}
+
+function navigateQueryForm(form, overrides) {
+  const params = queryFormParams(form);
+  Object.entries(overrides || {}).forEach(([key, value]) => {
+    const next = value == null ? "" : String(value);
+    if (!next) params.delete(key);
+    else params.set(key, next);
+  });
+  const qs = params.toString();
+  const path = window.location.pathname || "/query/";
+  const target = qs ? `${path}?${qs}` : path;
+  const current = `${window.location.pathname}${window.location.search}`;
+  if (target === current) return;
+  window.location.assign(target);
+}
+
+function bindIdempotentSearchForm() {
+  document.querySelectorAll(".query-filters").forEach((form) => {
+    let lastKey = "";
+    let inflight = false;
+    form.addEventListener("submit", (event) => {
+      const searchInput = form.querySelector("[data-search-input]");
+      const newQuery = searchInput ? searchInput.value.trim() : "";
+      const currentQuery = (new URLSearchParams(window.location.search).get("q") || "").trim();
+      const formFamily = form.querySelector("[name='family']")?.value || "";
+      const currentFamily = new URLSearchParams(window.location.search).get("family") || "";
+      const familyChanged = Boolean(formFamily) && formFamily !== currentFamily;
+
+      // 空点搜索：输入框为空或纯空白。切模式时必须放行，否则选择器只改了 UI、歌单仍停在旧模式。
+      if (!newQuery) {
+        if (searchInput) {
+          searchInput.value = "";
+        }
+        // 如果当前原本就处于无关键词的歌单缓存目录浏览态：
+        // 不触发真正搜索与页面刷新，直接拦截并保持在当前歌单缓存目录
+        if (!currentQuery && !familyChanged) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (searchInput) searchInput.focus();
+          return;
+        }
+
+        // 如果之前有搜索词（处于搜索结果态），本次清空搜索框点搜索是为了回到当前歌单缓存目录：
+        // 临时禁用 searchInput 使得 URL 不带多余的空 q= 参数
+        if (searchInput) {
+          searchInput.disabled = true;
+          setTimeout(() => {
+            searchInput.disabled = false;
+          }, 500);
+        }
+      }
+
+      // 若当前页面存在歌曲列表且未切换模式（family 相同），绝不打香港源站，由客户端直接过滤
+      if (document.querySelector(".song-list") && !familyChanged) {
+        event.preventDefault();
+        event.stopPropagation();
+        window.__applyQueryFilters?.();
+        return;
+      }
+      if (familyChanged && typeof window.__queryLoadFamily === "function") {
+        event.preventDefault();
+        event.stopPropagation();
+        window.__queryLoadFamily(formFamily, "");
+        return;
+      }
+
+      const key = new URLSearchParams(new FormData(form)).toString();
+      if (inflight && key === lastKey) {
+        event.preventDefault();
+        return;
+      }
+      inflight = true;
+      lastKey = key;
+    });
+  });
+}
+
+function bindClientQueryFilters() {
+  const songList = document.querySelector(".song-list");
+  if (!songList || songList.hasAttribute("data-query-app")) return;
+
+  const searchInput = document.querySelector("[data-search-input]");
+  const starNative = document.querySelector(".star-picker__native");
+  const bpmBucketInput = document.querySelector("[data-bpm-bucket]");
+  const bpmExactField = document.querySelector("[data-bpm-exact-field]");
+  const bpmVisibleInput = document.querySelector("[data-bpm-input]");
+  const emptyHint = document.querySelector("[data-client-empty]");
+  const countEl = document.querySelector("[data-song-count]");
+  const songRows = Array.from(document.querySelectorAll(".song-row"));
+
+  const urlParams = new URLSearchParams(window.location.search);
+  let filterState = {
+    q: (urlParams.get("q") || "").trim().toLowerCase(),
+    star: (urlParams.get("star") || "").trim(),
+    letter: (urlParams.get("letter") || "").trim(),
+    bpmBucket: (urlParams.get("bpm") || "").trim(),
+    bpmExact: (urlParams.get("bpm_exact") || "").trim(),
+  };
+
+  // 同步搜索输入框
+  if (searchInput && searchInput.value !== filterState.q) {
+    if (filterState.q) searchInput.value = filterState.q;
+    const clearBtn = searchInput.parentElement?.querySelector("[data-search-clear]");
+    if (clearBtn) clearBtn.classList.toggle("is-on", filterState.q.length > 0);
+  }
+
+  function compactText(value) {
+    return (value || "").toLowerCase().replace(/\s+/g, "");
+  }
+
+  function fieldMatches(raw, needle, compactNeedle) {
+    const text = (raw || "").toLowerCase();
+    if (text.includes(needle) || text.includes(compactNeedle)) return true;
+    return compactText(text).includes(compactNeedle);
+  }
+
+  function syncLetterField(letter) {
+    const form = document.querySelector(".query-filters");
+    if (!form) return;
+    let input = form.querySelector("[data-letter-field]");
+    const value = (letter || "").trim();
+    if (!value) {
+      if (input) input.remove();
+      return;
+    }
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "hidden";
+      input.name = "letter";
+      input.setAttribute("data-letter-field", "");
+      form.appendChild(input);
+    }
+    input.value = value;
+  }
+
+  function applyFilters() {
+    let visibleCount = 0;
+    const qRaw = filterState.q;
+    const qClean = qRaw.replace(/\s+/g, "");
+
+    songRows.forEach((row) => {
+      const title = (row.dataset.title || "").toLowerCase();
+      const artist = (row.dataset.artist || "").toLowerCase();
+      const pinyin = (row.dataset.pinyin || "").toLowerCase();
+      const initials = (row.dataset.initials || "").toLowerCase();
+      const artistPinyin = (row.dataset.artistPinyin || "").toLowerCase();
+      const artistInitials = (row.dataset.artistInitials || "").toLowerCase();
+      const leadNonZhEn = row.dataset.leadNonZhEn === "1";
+      const star = row.dataset.star || "";
+      const bpmRaw = (row.dataset.bpm || "").trim();
+      const bpm = Number(bpmRaw);
+      const hasBpm = bpmRaw !== "" && Number.isFinite(bpm);
+      const letter = (row.dataset.firstLetter || "").toLowerCase();
+
+      let matchQ = true;
+      if (qRaw) {
+        matchQ = [title, artist, pinyin, initials, artistPinyin, artistInitials].some((field) =>
+          fieldMatches(field, qRaw, qClean)
+        );
+      }
+
+      let matchStar = true;
+      if (filterState.star) {
+        matchStar = star === filterState.star;
+      }
+
+      let matchLetter = true;
+      if (filterState.letter) {
+        if (filterState.letter === "#") {
+          matchLetter = leadNonZhEn;
+        } else {
+          matchLetter = letter === filterState.letter.toLowerCase();
+        }
+      }
+
+      let matchBpm = true;
+      if (filterState.bpmExact || filterState.bpmBucket) {
+        if (!hasBpm) {
+          matchBpm = false;
+        } else if (filterState.bpmExact) {
+          matchBpm = Math.round(bpm) === parseInt(filterState.bpmExact, 10);
+        } else if (filterState.bpmBucket === "100-") {
+          matchBpm = bpm < 100;
+        } else if (filterState.bpmBucket === "200+") {
+          matchBpm = bpm >= 200;
+        } else {
+          const low = parseInt(filterState.bpmBucket, 10);
+          matchBpm = bpm >= low && bpm < low + 10;
+        }
+      }
+
+      const isMatch = matchQ && matchStar && matchLetter && matchBpm;
+      row.hidden = !isMatch;
+      if (isMatch) visibleCount++;
+    });
+
+    if (emptyHint) emptyHint.hidden = visibleCount > 0;
+    if (countEl) countEl.textContent = String(visibleCount);
+
+    const qHint = document.querySelector("[data-query-q-hint]");
+    const hintTail = document.querySelector("[data-query-hint-tail]");
+    const qDisplay = (searchInput?.value || "").trim();
+    if (qHint) {
+      qHint.textContent = qDisplay ? `[${qDisplay}]` : "";
+      qHint.hidden = !qDisplay;
+    }
+    if (hintTail) {
+      if (qDisplay) {
+        hintTail.textContent = "。点击歌曲选择查看类别。";
+      } else if (filterState.star || filterState.letter || filterState.bpmBucket || filterState.bpmExact) {
+        hintTail.textContent = "。可继续输入关键词缩小范围。";
+      } else {
+        hintTail.textContent = "。点左侧字母或选择星级/BPM 浏览本模式全部歌曲。";
+      }
+    }
+
+    document.querySelectorAll("[data-alpha-item]").forEach((el) => {
+      const active =
+        filterState.letter &&
+        el.textContent.trim().toLowerCase() === filterState.letter.toLowerCase();
+      el.classList.toggle("is-on", Boolean(active));
+    });
+
+    syncLetterField(filterState.letter);
+
+    const params = new URLSearchParams(window.location.search);
+    if (filterState.q) params.set("q", filterState.q);
+    else params.delete("q");
+    if (filterState.star) params.set("star", filterState.star);
+    else params.delete("star");
+    if (filterState.letter) params.set("letter", filterState.letter);
+    else params.delete("letter");
+    if (filterState.bpmExact) params.set("bpm_exact", filterState.bpmExact);
+    else params.delete("bpm_exact");
+    if (filterState.bpmBucket) params.set("bpm", filterState.bpmBucket);
+    else params.delete("bpm");
+
+    const qs = params.toString();
+    const target = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+    window.history.replaceState(null, "", target);
+
+    if (songList.hasAttribute("data-filter-pending")) {
+      songList.removeAttribute("data-filter-pending");
+      songList.hidden = false;
+    }
+  }
+
+  // 暴露给星级、BPM、字母轨与清空按钮调用
+  window.__applyQueryFilters = function () {
+    // 从输入组件同步最新值
+    filterState.q = (searchInput?.value || "").trim().toLowerCase();
+    filterState.star = (starNative?.value || "").trim();
+    filterState.bpmBucket = (bpmBucketInput?.value || "").trim();
+    filterState.bpmExact = (bpmExactField?.value || "").trim();
+    if (filterState.q) filterState.letter = "";
+    applyFilters();
+  };
+
+  window.__setQueryLetterFilter = function (label) {
+    const next = (label || "").trim();
+    if (filterState.letter.toLowerCase() === next.toLowerCase()) {
+      filterState.letter = "";
+    } else {
+      filterState.letter = next;
+    }
+    // 选字母时清空搜索关键词
+    if (searchInput) {
+      searchInput.value = "";
+      filterState.q = "";
+      const clearBtn = searchInput.parentElement?.querySelector("[data-search-clear]");
+      if (clearBtn) clearBtn.classList.remove("is-on");
+    }
+    applyFilters();
+  };
+
+  if (searchInput) {
+    searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        window.__applyQueryFilters();
+      }
+    });
+  }
+
+  // 首屏立即按 URL 参数执行一次过滤
+  applyFilters();
+}
+
+function bindQueryLetterSearch() {
+  document.querySelectorAll(".query-filters").forEach((form) => {
+    const searchInput = form.querySelector("[data-search-input]");
+    if (!searchInput) return;
+    form.addEventListener("submit", () => clearLetterWhenSearching(form));
+    searchInput.addEventListener("input", () => clearLetterWhenSearching(form));
+  });
+}
+
+function bindTitleMarquees() {
+  const DRAG_THRESHOLD = 5;
+
+  document.querySelectorAll("[data-title-marquee]").forEach((rail) => {
+    const text = rail.querySelector("[data-title-marquee-text]");
+    if (!text || rail.dataset.marqueeBound === "1") return;
+    rail.dataset.marqueeBound = "1";
+
+    let offset = 0;
+    let maxScroll = 0;
+    let dragging = false;
+    let moved = false;
+    let pointerId = null;
+    let startX = 0;
+    let startOffset = 0;
+
+    function measure() {
+      maxScroll = Math.max(0, text.scrollWidth - rail.clientWidth);
+      rail.classList.toggle("is-overflow", maxScroll > 0);
+      if (maxScroll <= 0) {
+        offset = 0;
+        text.style.transform = "";
+        return false;
+      }
+      if (offset < -maxScroll) offset = -maxScroll;
+      if (offset > 0) offset = 0;
+      return true;
+    }
+
+    function apply() {
+      text.style.transform = offset ? `translateX(${offset}px)` : "";
+    }
+
+    function suppressClick(target) {
+      if (!target) return;
+      const once = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        target.removeEventListener("click", once, true);
+      };
+      target.addEventListener("click", once, true);
+    }
+
+    rail.addEventListener("pointerdown", (event) => {
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      if (!measure()) return;
+      dragging = true;
+      moved = false;
+      pointerId = event.pointerId;
+      startX = event.clientX;
+      startOffset = offset;
+      rail.classList.add("is-dragging");
+      try {
+        rail.setPointerCapture(event.pointerId);
+      } catch (err) {
+        /* ignore */
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    rail.addEventListener("pointermove", (event) => {
+      if (!dragging || event.pointerId !== pointerId) return;
+      const dx = event.clientX - startX;
+      if (Math.abs(dx) > DRAG_THRESHOLD) moved = true;
+      if (!measure()) return;
+      offset = Math.min(0, Math.max(-maxScroll, startOffset + dx));
+      apply();
+      event.preventDefault();
+    });
+
+    function endDrag(event) {
+      if (!dragging || (event && event.pointerId !== pointerId)) return;
+      dragging = false;
+      pointerId = null;
+      rail.classList.remove("is-dragging");
+      if (moved) {
+        suppressClick(rail);
+        suppressClick(rail.closest("button"));
+      }
+      moved = false;
+    }
+
+    rail.addEventListener("pointerup", endDrag);
+    rail.addEventListener("pointercancel", endDrag);
+
+    if (typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver(() => {
+        measure();
+        apply();
+      });
+      ro.observe(rail);
+    }
+
+    measure();
+    apply();
+  });
+}
+
+function bindAlphaRail() {
+  const rail = document.querySelector("[data-alpha-rail]");
+  if (!rail) return;
+  const items = Array.from(rail.querySelectorAll("[data-alpha-item]"));
+  if (!items.length) return;
+
+  let dragging = false;
+  let current = null;
+  let navigating = false;
+
+  function pickItem(clientY) {
+    let best = null;
+    let bestDist = Infinity;
+    for (const item of items) {
+      const rect = item.getBoundingClientRect();
+      if (clientY >= rect.top && clientY <= rect.bottom) return item;
+      const mid = (rect.top + rect.bottom) / 2;
+      const dist = Math.abs(clientY - mid);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = item;
+      }
+    }
+    return best;
+  }
+
+  function setScrub(item) {
+    if (current === item) return;
+    current = item;
+    items.forEach((el) => el.classList.toggle("is-scrub", el === item));
+  }
+
+  function clearScrub() {
+    current = null;
+    items.forEach((el) => el.classList.remove("is-scrub"));
+  }
+
+  function goTo(item) {
+    if (!item || navigating) return;
+    if (document.querySelector(".song-list")) {
+      const label = item.textContent.trim();
+      window.__setQueryLetterFilter?.(label);
+      return;
+    }
+    const next = item.href;
+    if (!next || next === window.location.href) return;
+    navigating = true;
+    window.location.assign(next);
+  }
+
+  function onPointerDown(event) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    dragging = true;
+    setScrub(pickItem(event.clientY));
+    try {
+      rail.setPointerCapture(event.pointerId);
+    } catch (err) {
+      /* ignore */
+    }
+    event.preventDefault();
+  }
+
+  function onPointerMove(event) {
+    if (!dragging) return;
+    setScrub(pickItem(event.clientY));
+    event.preventDefault();
+  }
+
+  function onPointerUp(event) {
+    if (!dragging) return;
+    dragging = false;
+    const target = pickItem(event.clientY) || current;
+    clearScrub();
+    goTo(target);
+  }
+
+  function onPointerCancel() {
+    dragging = false;
+    clearScrub();
+  }
+
+  rail.addEventListener("pointerdown", onPointerDown);
+  rail.addEventListener("pointermove", onPointerMove);
+  rail.addEventListener("pointerup", onPointerUp);
+  rail.addEventListener("pointercancel", onPointerCancel);
+
+  items.forEach((item) => {
+    item.addEventListener("click", (event) => {
+      event.preventDefault();
+    });
+  });
+}
+
+function bindSearchClear() {
+  document.querySelectorAll("[data-search-input]").forEach((input) => {
+    const clearBtn = input.parentElement?.querySelector("[data-search-clear]");
+    if (!clearBtn) return;
+    const sync = () => {
+      clearBtn.classList.toggle("is-on", input.value.length > 0);
+    };
+    input.addEventListener("input", sync);
+    clearBtn.addEventListener("click", () => {
+      input.value = "";
+      sync();
+      input.focus();
+      if (document.querySelector(".song-list")) {
+        window.__applyQueryFilters?.();
+        return;
+      }
+      const form = input.closest("form");
+      if (form) form.requestSubmit();
+    });
+    sync();
+  });
+}
+
+function atlasPackForFamily(family) {
+  if (family === "pinball") return "pinball";
+  if (family === "bubble") return "bubble";
+  if (family === "crescent") return "crescent";
+  return "idol";
+}
+
+function prefetchHref(url, as) {
+  if (!url) return;
+  const found = Array.prototype.some.call(document.querySelectorAll('link[rel="prefetch"]'), function (link) {
+    return link.getAttribute("href") === url;
+  });
+  if (found) return;
+  const link = document.createElement("link");
+  link.rel = "prefetch";
+  if (as) link.as = as;
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+function stampAsset(url) {
+  const ver = (window.__NOTE_PREVIEW_ASSET_VER__ || "").trim();
+  if (!ver || !url || /[?&]v=/.test(url)) return url;
+  return url + (url.indexOf("?") >= 0 ? "&" : "?") + "v=" + encodeURIComponent(ver);
+}
+
+const PREVIEW_ATLAS_PACKS = ["idol", "pinball", "bubble", "crescent"];
+const PREVIEW_SFX_FILES = [
+  "burst-start.m4a",
+  "burst-end.m4a",
+  "key-tone.m4a",
+  "key-tone-long.m4a",
+  "key-tone-slide.m4a",
+  "key-tone-rhythm.m4a",
+  "key-tone-classic.m4a",
+  "key-tone-xingdong.m4a",
+  "key-tone-xingdong-slide.m4a",
+  "key-tone-pinball.m4a",
+  "key-tone-pinball-slide.m4a",
+  "key-tone-bubble.m4a",
+  "key-tone-bubble-slide.m4a",
+  "key-tone-crescent.m4a",
+  "key-tone-crescent-slide.m4a",
+];
+const warmedPreviewStatic = window.__NOTE_PREVIEW_WARMED__ || (window.__NOTE_PREVIEW_WARMED__ = {});
+
+function readPreviewStaticUrls() {
+  const node = document.getElementById("note-preview-static-urls");
+  if (node && node.textContent) {
+    try {
+      const parsed = JSON.parse(node.textContent);
+      if (Array.isArray(parsed) && parsed.length) return parsed;
+    } catch (_error) {
+      // fall through to constructed list
+    }
+  }
+  if (Array.isArray(window.__NOTE_PREVIEW_STATIC_URLS__) && window.__NOTE_PREVIEW_STATIC_URLS__.length) {
+    return window.__NOTE_PREVIEW_STATIC_URLS__;
+  }
+  const urls = [];
+  const js = (window.__NOTE_PREVIEW_JS_URL__ || "").trim();
+  if (js) urls.push(js);
+  const host = (window.__NOTE_PREVIEW_HOST_JS_URL__ || "").trim();
+  if (host) urls.push(host);
+  let base = (window.__NOTE_PREVIEW_ASSET_BASE__ || "").trim();
+  if (!base) return urls;
+  if (base.charAt(base.length - 1) !== "/") base += "/";
+  urls.push(stampAsset(base + "atlas/manifest.json"));
+  urls.push(stampAsset(base + "atlas/shared.webp"));
+  PREVIEW_ATLAS_PACKS.forEach(function (pack) {
+    urls.push(stampAsset(base + "atlas/" + pack + ".webp"));
+  });
+  PREVIEW_SFX_FILES.forEach(function (name) {
+    urls.push(stampAsset(base + "sfx/" + name));
+  });
+  return urls;
+}
+
+function warmPreviewStaticUrl(url) {
+  if (!url || warmedPreviewStatic[url]) return;
+  warmedPreviewStatic[url] = 1;
+  const sameOrigin = url.charAt(0) === "/" || url.indexOf(window.location.origin) === 0;
+  const asHint = /\.js(\?|$)/i.test(url)
+    ? "script"
+    : /\.webp(\?|$)/i.test(url)
+      ? "image"
+      : /\.m4a(\?|$)/i.test(url)
+        ? "audio"
+        : "fetch";
+  prefetchHref(url, asHint);
+  const opts = {
+    mode: "cors",
+    credentials: sameOrigin ? "same-origin" : "omit",
+    cache: "force-cache",
+    priority: "low",
+  };
+  fetch(url, opts).catch(function () {
+    fetch(url, {
+      mode: "cors",
+      credentials: sameOrigin ? "same-origin" : "omit",
+      cache: "reload",
+    }).catch(function () {});
+  });
+}
+
+function deployNotePreviewStatic(preferredFamily) {
+  const pack = atlasPackForFamily(preferredFamily || "");
+  const needle = pack ? "atlas/" + pack + ".webp" : "";
+  const urls = readPreviewStaticUrls().slice();
+  if (needle) {
+    urls.sort(function (left, right) {
+      const a = left.indexOf(needle) >= 0 ? 0 : 1;
+      const b = right.indexOf(needle) >= 0 ? 0 : 1;
+      return a - b;
+    });
+  }
+  urls.forEach(warmPreviewStaticUrl);
+}
+
+function prefetchPreviewAssets(family) {
+  deployNotePreviewStatic(family);
+}
+
+function readCatalogPrefetchUrls() {
+  const node = document.getElementById("catalog-prefetch-urls");
+  if (!node || !node.textContent) return [];
+  try {
+    const parsed = JSON.parse(node.textContent);
+    return Array.isArray(parsed) ? parsed.filter(Boolean) : [];
+  } catch (_error) {
+    return [];
+  }
+}
+
+function deployCatalogStatic() {
+  const urls = readCatalogPrefetchUrls();
+  urls.forEach(function (url, index) {
+    if (!url || warmedPreviewStatic[url]) return;
+    // 搜索函数、查询页框架、拼音表、当前模式歌单用高优先级，其余模式随后填缓存。
+    const high = index < 4;
+    warmedPreviewStatic[url] = 1;
+    const sameOrigin = url.charAt(0) === "/" || url.indexOf(window.location.origin) === 0;
+    const asHint = /\.js(\?|$)/i.test(url) ? "script" : "fetch";
+    prefetchHref(url, asHint);
+    fetch(url, {
+      mode: "cors",
+      credentials: sameOrigin ? "same-origin" : "omit",
+      cache: "force-cache",
+      priority: high ? "high" : "low",
+    }).catch(function () {
+      fetch(url, {
+        mode: "cors",
+        credentials: sameOrigin ? "same-origin" : "omit",
+        cache: "reload",
+      }).catch(function () {});
+    });
+  });
+}
+
+window.deployNotePreviewStatic = deployNotePreviewStatic;
+window.prefetchNotePreviewAssets = prefetchPreviewAssets;
+window.deployCatalogStatic = deployCatalogStatic;
+
+function bindCategoryModal() {
+  const modal = document.querySelector("[data-category-modal]");
+  if (!modal) return;
+
+  const CATEGORY_KEY = "zsbqb.query.category";
+  const PREFETCH_TTL_MS = 30 * 60 * 1000;
+  const PREFETCH_FROZEN_KEY = "zsbqb.prefetch.frozenUntil";
+  const titleEl = modal.querySelector("[data-category-title]");
+  const artistEl = modal.querySelector("[data-category-artist]");
+  const familyLabelEl = modal.querySelector("[data-category-family-label]");
+  const familyIconEl = modal.querySelector("[data-category-family-icon]");
+  const metaEl = modal.querySelector("[data-category-meta]");
+  const singleLink = modal.querySelector("[data-category-single]");
+  const doubleLink = modal.querySelector("[data-category-double]");
+  const lockEl = modal.querySelector("[data-category-lock]");
+  let prefetchAbort = null;
+
+  function readPredictedMode() {
+    const server = (modal.getAttribute("data-predicted-mode") || "").trim();
+    let stored = null;
+    try {
+      const raw = window.localStorage.getItem(CATEGORY_KEY);
+      if (raw === "single" || raw === "double") {
+        stored = { mode: raw, at: Date.now() };
+        window.localStorage.setItem(CATEGORY_KEY, JSON.stringify(stored));
+      } else if (raw) {
+        stored = JSON.parse(raw);
+      }
+    } catch (_error) {
+      stored = null;
+    }
+    if (stored && (stored.mode === "single" || stored.mode === "double")) {
+      const at = Number(stored.at) || 0;
+      if (at && Date.now() - at < PREFETCH_TTL_MS) {
+        return stored.mode;
+      }
+    }
+    if (server === "single" || server === "double") return server;
+    return "";
+  }
+
+  function saveCategory(mode) {
+    const value = mode === "double" ? "double" : "single";
+    try {
+      window.localStorage.setItem(CATEGORY_KEY, JSON.stringify({ mode: value, at: Date.now() }));
+    } catch (_error) {
+      // Private mode can reject localStorage writes.
+    }
+  }
+
+  function prefetchHandoffKey(family, star, title, mode) {
+    return `zsbqb.prefetch:${family}:${star}:${title}:${mode}`;
+  }
+
+  function isPrefetchFrozen() {
+    try {
+      return Date.now() < Number(window.sessionStorage.getItem(PREFETCH_FROZEN_KEY) || 0);
+    } catch (_error) {
+      return false;
+    }
+  }
+
+  function markPrefetchFrozen(retryAfterSec) {
+    const ms = Math.max(1, Number(retryAfterSec) || 3600) * 1000;
+    try {
+      window.sessionStorage.setItem(PREFETCH_FROZEN_KEY, String(Date.now() + ms));
+    } catch (_error) {
+      // Ignore storage failures.
+    }
+  }
+
+  function prefetchSongDetail(opts) {
+    const family = opts.family;
+    const star = opts.star;
+    const title = opts.title;
+    const mode = opts.mode;
+    const ticket = opts.ticket;
+    if (!family || !star || !title || !mode || !ticket) return;
+    if (isPrefetchFrozen()) return;
+    if (prefetchAbort) prefetchAbort.abort();
+    prefetchAbort = new AbortController();
+    const params = new URLSearchParams();
+    params.set("mode", mode);
+    params.set("ticket", ticket);
+    params.set("prefetch", "1");
+    const url =
+      "/api/query/songs/" +
+      encodeURIComponent(family) +
+      "/" +
+      encodeURIComponent(star) +
+      "/" +
+      encodeURIComponent(title) +
+      "/?" +
+      params.toString();
+    fetch(url, { credentials: "same-origin", signal: prefetchAbort.signal })
+      .then((res) => {
+        if (res.status === 429) {
+          markPrefetchFrozen(res.headers.get("Retry-After"));
+          throw new Error("prefetch_frozen");
+        }
+        if (!res.ok) throw new Error("fetch_failed");
+        return res.json();
+      })
+      .then((payload) => {
+        if (!payload || !payload.ok) return;
+        try {
+          window.sessionStorage.setItem(
+            prefetchHandoffKey(family, star, title, mode),
+            JSON.stringify({ at: Date.now(), payload })
+          );
+        } catch (_error) {
+          // Ignore storage failures.
+        }
+      })
+      .catch(() => {});
+  }
+
+  function ticketUrl(family, star, title) {
+    const params = new URLSearchParams({
+      family: family || "",
+      star: star || "",
+      title: title || "",
+    });
+    return `/api/query/ticket/?${params.toString()}`;
+  }
+
+  function ensureTicket(button) {
+    const existing = button.getAttribute("data-ticket") || "";
+    if (existing) return Promise.resolve(existing);
+    const family = button.getAttribute("data-family") || "";
+    const star = button.getAttribute("data-star") || "";
+    const title = button.getAttribute("data-title") || "";
+    if (!family || !title) return Promise.resolve("");
+    return fetch(ticketUrl(family, star, title), { credentials: "same-origin" })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        const ticket = data && data.ok ? data.ticket || "" : "";
+        if (ticket) button.setAttribute("data-ticket", ticket);
+        return ticket;
+      })
+      .catch(() => "");
+  }
+
+  function prefetchFromPick(button) {
+    if (!button) return;
+    const family = button.getAttribute("data-family") || "";
+    const star = button.getAttribute("data-star") || "";
+    const title = button.getAttribute("data-title") || "";
+    const supportsDouble = button.getAttribute("data-supports-double") === "1";
+    prefetchPreviewAssets(family);
+    let prefetchMode = readPredictedMode();
+    if (prefetchMode === "double" && !supportsDouble) prefetchMode = "single";
+    if (!prefetchMode) return;
+    ensureTicket(button).then((ticket) => {
+      if (!ticket) return;
+      prefetchSongDetail({ family, star, title, mode: prefetchMode, ticket });
+    });
+  }
+
+  function closeModal() {
+    if (prefetchAbort) prefetchAbort.abort();
+    modal.hidden = true;
+    document.body.style.overflow = "";
+  }
+
+  function openModal(button) {
+    const title = button.getAttribute("data-title") || "";
+    const artist = (button.getAttribute("data-artist") || "").trim();
+    const family = button.getAttribute("data-family") || "";
+    const familyLabel = button.getAttribute("data-family-label") || family;
+    const star = button.getAttribute("data-star") || "";
+    const bpm = button.getAttribute("data-bpm") || "";
+    const ticket = button.getAttribute("data-ticket") || "";
+    const base = button.getAttribute("data-detail-base") || "#";
+    const supportsDouble = button.getAttribute("data-supports-double") === "1";
+    const icon = button.getAttribute("data-icon") || "";
+
+    function applyTicketLinks(nextTicket) {
+      const ticketQs = nextTicket ? `&ticket=${encodeURIComponent(nextTicket)}` : "";
+      const returnTarget = `${window.location.pathname}${window.location.search}`;
+      const returnQs =
+        returnTarget.startsWith("/query/") &&
+        !returnTarget.match(/^\/query\/[^/?#]+\/\d+\//)
+          ? `&return=${encodeURIComponent(returnTarget)}`
+          : "";
+      singleLink.href = `${base}?mode=single${ticketQs}${returnQs}`;
+      if (supportsDouble) {
+        doubleLink.href = `${base}?mode=double${ticketQs}${returnQs}`;
+      }
+    }
+
+    applyTicketLinks(ticket);
+    if (!ticket) {
+      ensureTicket(button).then((next) => {
+        if (next) applyTicketLinks(next);
+      });
+    }
+
+    titleEl.textContent = title;
+    if (artistEl) {
+      artistEl.textContent = artist;
+      artistEl.hidden = !artist;
+    }
+    familyLabelEl.textContent = familyLabel;
+    if (family) {
+      familyLabelEl.setAttribute("data-family", family);
+    } else {
+      familyLabelEl.removeAttribute("data-family");
+    }
+    if (metaEl) {
+      const parts = [];
+      if (star) parts.push(`${star}⭐`);
+      if (bpm) parts.push(`BPM ${bpm}`);
+      metaEl.textContent = parts.join("  ");
+      metaEl.hidden = parts.length === 0;
+    }
+    if (familyIconEl) {
+      if (icon) {
+        familyIconEl.src = icon;
+        familyIconEl.alt = familyLabel;
+        familyIconEl.hidden = false;
+        familyIconEl.classList.toggle("mode-icon--ornate", icon.indexOf("dianfeng") !== -1);
+      } else {
+        familyIconEl.hidden = true;
+        familyIconEl.removeAttribute("src");
+        familyIconEl.classList.remove("mode-icon--ornate");
+      }
+    }
+
+    if (supportsDouble) {
+      doubleLink.hidden = false;
+      doubleLink.removeAttribute("tabindex");
+      doubleLink.removeAttribute("aria-hidden");
+    } else {
+      doubleLink.removeAttribute("href");
+      doubleLink.hidden = true;
+      doubleLink.tabIndex = -1;
+      doubleLink.setAttribute("aria-hidden", "true");
+    }
+    if (lockEl) lockEl.hidden = supportsDouble;
+    prefetchFromPick(button);
+
+    modal.dataset.navLock = "";
+    singleLink?.classList.remove("is-busy", "is-last");
+    singleLink?.removeAttribute("title");
+    doubleLink?.classList.remove("is-busy", "is-last");
+    doubleLink?.removeAttribute("title");
+
+    modal.hidden = false;
+    document.body.style.overflow = "hidden";
+  }
+
+  function lockCategoryNav(event) {
+    const link = event.currentTarget;
+    if (link.hidden || !link.getAttribute("href") || link.getAttribute("href") === "#") {
+      event.preventDefault();
+      return;
+    }
+    if (modal.dataset.navLock === "1") {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    modal.dataset.navLock = "1";
+    saveCategory(link.hasAttribute("data-category-double") ? "double" : "single");
+    singleLink?.classList.add("is-busy");
+    doubleLink?.classList.add("is-busy");
+  }
+
+  if (singleLink) singleLink.addEventListener("click", lockCategoryNav);
+  if (doubleLink) doubleLink.addEventListener("click", lockCategoryNav);
+
+  document.addEventListener("pointerdown", (event) => {
+    const button = event.target.closest("[data-song-pick]");
+    if (button) prefetchFromPick(button);
+  }, { passive: true });
+  document.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-song-pick]");
+    if (button) openModal(button);
+  });
+
+  modal.querySelectorAll("[data-category-close]").forEach((el) => {
+    el.addEventListener("click", closeModal);
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !modal.hidden) closeModal();
+  });
+}
+