@leeguoo/pwtk-network-debugger 1.3.1-beta.0 → 1.3.1-beta.1

package/dist/index.esm.js

@@ -17031,14 +17031,23 @@ class LiquidGlassRenderer {
     this.preset = config.preset || "normal";
     this.liquidConfig = this.computeLiquidConfig(this.preset, this.quality);
     this.timeStep = this.getTimeStepForQuality(this.quality);
-    const gl = this.canvas.getContext("webgl2", {
+    let gl = this.canvas.getContext("webgl2", {
       alpha: true,
       antialias: true,
       premultipliedAlpha: false,
       preserveDrawingBuffer: true
     });
     if (!gl) {
-      throw new Error("WebGL2 not supported");
+      console.log("[PWTK WebGL] WebGL2 not available, falling back to WebGL1");
+      gl = this.canvas.getContext("webgl", {
+        alpha: true,
+        antialias: true,
+        premultipliedAlpha: false,
+        preserveDrawingBuffer: true
+      });
+    }
+    if (!gl) {
+      throw new Error("Neither WebGL2 nor WebGL1 is supported");
     }
     this.gl = gl;
     this.setupGL();
@@ -17411,6 +17420,7 @@ class LiquidGlassScene {
   constructor(container) {
     this.layers = /* @__PURE__ */ new Map();
     this.isActive = false;
+    this.mutationObserver = null;
     this.snapshotCanvas = null;
     this.snapshotScale = 1;
     this.capturePromise = null;
@@ -17429,11 +17439,26 @@ class LiquidGlassScene {
     this.autoQualityEnabled = true;
     this.lastPerformanceCheck = 0;
     this.performanceCheckInterval = 3e3;
+    this.lastDOMChangeTime = 0;
+    this.domChangeDebounceDelay = 500;
+    this.pendingRefresh = false;
+    this.idleCallbackId = null;
     this.markSnapshotDirty = () => {
       if (this.destroyed) return;
       this.snapshotNeedsUpdate = true;
       this.scheduleBackgroundRefresh();
     };
+    this.handleDOMChange = () => {
+      if (this.destroyed || this.pendingRefresh) return;
+      const now = performance.now();
+      if (now - this.lastDOMChangeTime < this.domChangeDebounceDelay) {
+        return;
+      }
+      this.lastDOMChangeTime = now;
+      this.pendingRefresh = true;
+      this.snapshotNeedsUpdate = true;
+      this.scheduleBackgroundRefreshIdle();
+    };
     this.handleVisibilityChange = () => {
       if (!document.hidden) {
         this.sceneStats.visibilityChangeCount++;
@@ -17467,6 +17492,35 @@ class LiquidGlassScene {
     window.addEventListener("scroll", this.markSnapshotDirty, { passive: true });
     window.addEventListener("resize", this.markSnapshotDirty);
     document.addEventListener("visibilitychange", this.handleVisibilityChange);
+    this.setupDOMMutationObserver();
+  }
+  setupDOMMutationObserver() {
+    this.mutationObserver = new MutationObserver((mutations) => {
+      const hasSignificantChange = mutations.some((mutation) => {
+        if (this.container.contains(mutation.target)) {
+          return false;
+        }
+        return mutation.type === "childList" && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) || mutation.type === "attributes" || mutation.type === "characterData";
+      });
+      if (hasSignificantChange) {
+        this.handleDOMChange();
+      }
+    });
+    const observerConfig = {
+      childList: true,
+      // 监听子节点的添加和移除
+      attributes: true,
+      // 监听属性变化
+      characterData: true,
+      // 监听文本内容变化
+      subtree: true,
+      // 监听所有后代节点
+      attributeOldValue: false,
+      characterDataOldValue: false,
+      // 只监听可能影响视觉的属性
+      attributeFilter: ["class", "style", "src", "href", "hidden", "disabled"]
+    };
+    this.mutationObserver.observe(document.body, observerConfig);
   }
   setupContainer() {
     const computedStyle = getComputedStyle(this.container);
@@ -17706,6 +17760,18 @@ class LiquidGlassScene {
       this.refreshTimeout = null;
     }
     this.resizeObserver.disconnect();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    if (this.idleCallbackId !== null) {
+      if (typeof cancelIdleCallback !== "undefined") {
+        cancelIdleCallback(this.idleCallbackId);
+      } else {
+        clearTimeout(this.idleCallbackId);
+      }
+      this.idleCallbackId = null;
+    }
     window.removeEventListener("scroll", this.markSnapshotDirty);
     window.removeEventListener("resize", this.markSnapshotDirty);
     document.removeEventListener("visibilitychange", this.handleVisibilityChange);
@@ -17820,13 +17886,49 @@ class LiquidGlassScene {
     await this.capturePromise;
   }
   scheduleBackgroundRefresh() {
-    if (this.refreshTimeout !== null) return;
+    if (this.refreshTimeout !== null) {
+      clearTimeout(this.refreshTimeout);
+    }
     this.refreshTimeout = window.setTimeout(() => {
       this.refreshTimeout = null;
       if (!this.destroyed) {
         this.updateBackgrounds();
       }
-    }, 120);
+    }, 150);
+  }
+  scheduleBackgroundRefreshIdle() {
+    if (this.idleCallbackId !== null) {
+      if (typeof cancelIdleCallback !== "undefined") {
+        cancelIdleCallback(this.idleCallbackId);
+      } else {
+        clearTimeout(this.idleCallbackId);
+      }
+      this.idleCallbackId = null;
+    }
+    if (typeof requestIdleCallback !== "undefined") {
+      this.idleCallbackId = requestIdleCallback(
+        (deadline) => {
+          this.idleCallbackId = null;
+          if (this.destroyed) return;
+          if (deadline.timeRemaining() > 10 || deadline.didTimeout) {
+            this.pendingRefresh = false;
+            this.updateBackgrounds();
+          } else {
+            this.scheduleBackgroundRefreshIdle();
+          }
+        },
+        { timeout: 2e3 }
+        // 最多等待 2 秒，避免无限延迟
+      );
+    } else {
+      this.idleCallbackId = window.setTimeout(() => {
+        this.idleCallbackId = null;
+        if (!this.destroyed) {
+          this.pendingRefresh = false;
+          this.updateBackgrounds();
+        }
+      }, 200);
+    }
   }
 }
 const _WebGLManager = class _WebGLManager {
@@ -17853,10 +17955,26 @@ const _WebGLManager = class _WebGLManager {
   checkWebGLSupport() {
     try {
       const canvas = document.createElement("canvas");
-      const gl = canvas.getContext("webgl2", { failIfMajorPerformanceCaveat: true });
-      this.isSupported = !!gl;
-      return this.isSupported;
+      let gl = canvas.getContext("webgl2", { failIfMajorPerformanceCaveat: true });
+      if (gl) {
+        this.isSupported = true;
+        return true;
+      }
+      gl = canvas.getContext("webgl", {
+        alpha: true,
+        antialias: true,
+        premultipliedAlpha: true
+      });
+      if (gl) {
+        console.log("[PWTK WebGL] WebGL2 not available, using WebGL1");
+        this.isSupported = true;
+        return true;
+      }
+      console.warn("[PWTK WebGL] Neither WebGL2 nor WebGL1 is supported");
+      this.isSupported = false;
+      return false;
     } catch (error) {
+      console.error("[PWTK WebGL] Error checking WebGL support:", error);
       this.isSupported = false;
       return false;
     }
@@ -18138,7 +18256,7 @@ const _DebugPanel = class _DebugPanel {
     this.container.style.pointerEvents = "auto";
     this.container.innerHTML = `
       <div class="debugger-header">
-        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.1-beta.0"}</span></div>
+        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.1-beta.1"}</span></div>
         <div class="debugger-controls">
           <button class="debugger-btn" data-action="clear" title="清空"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
           <button class="debugger-btn" data-action="export" title="导出"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg></button>
@@ -19231,7 +19349,7 @@ if (typeof window !== "undefined") {
 }
 function loadLiquidGlass() {
   return new Promise((resolve) => {
-    import("./container-DZOQFeJd.mjs").then(() => {
+    import("./container-Ll0bZChs.mjs").then(() => {
       return import("./button-DfB5OFDC.mjs");
     }).then(() => {
       resolve();
@@ -19372,7 +19490,7 @@ const _NetworkDebugger = class _NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.3.1-beta.0";
+      const currentVersion = "1.3.1-beta.1";
       logger.info(`[PWTK Update] Checking for updates... Current version: ${currentVersion}`);
       const response = await fetch("https://registry.npmjs.org/@leeguoo/pwtk-network-debugger/latest");
       const data = await response.json();
@@ -19392,7 +19510,7 @@ const _NetworkDebugger = class _NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.3.1-beta.0"
+        currentVersion: "1.3.1-beta.1"
       };
     }
   }
@@ -19488,7 +19606,7 @@ const _NetworkDebugger = class _NetworkDebugger {
     return headers.slk || headers["x-slk"] || "";
   }
 };
-_NetworkDebugger.version = "1.3.1-beta.0";
+_NetworkDebugger.version = "1.3.1-beta.1";
 let NetworkDebugger = _NetworkDebugger;
 let globalInstance = null;
 const NetworkDebuggerGlobal = {