@leeguoo/pwtk-network-debugger 1.3.6 → 1.3.8

package/dist/{container-D251rMGP.mjs → container-D0255Dzc.mjs}

@@ -10,17 +10,37 @@ class Container {
   static pendingForceRefresh = false;
   static settingsKey = "pwtk_glass_settings_v1";
   static defaultSettings = {
-    enableWebGL: true,
+    enableWebGL: false,
     autoRefresh: true,
     enableButtonAnimation: true
   };
   static settings = { ...Container.defaultSettings };
+  static maxSnapshotPixels = 3e6;
+  static minSnapshotScale = 0.5;
+  static pageSnapshotScale = 1;
+  static documentWriteWarnDepth = 0;
+  static originalConsoleWarn = null;
   static handleWindowRefresh = () => Container.scheduleSnapshotRefresh();
   static handleVisibilityRefresh = () => {
     if (typeof document !== "undefined" && !document.hidden) {
       Container.scheduleSnapshotRefresh();
     }
   };
+  static getDevicePixelRatio() {
+    if (typeof window === "undefined") return 1;
+    const dpr = window.devicePixelRatio || 1;
+    return Math.max(1, Math.min(dpr, 2));
+  }
+  static computeSnapshotScale(pageWidth, pageHeight) {
+    const baseScale = Container.getDevicePixelRatio();
+    const area = pageWidth * pageHeight;
+    if (!Number.isFinite(area) || area <= 0) {
+      return baseScale;
+    }
+    const maxScale = Math.sqrt(Container.maxSnapshotPixels / area);
+    const scale = Math.min(baseScale, maxScale);
+    return Math.max(Container.minSnapshotScale, Math.min(scale, baseScale));
+  }
   static loadSettings() {
     if (typeof window === "undefined" || typeof window.localStorage === "undefined") {
       return { ...Container.defaultSettings };
@@ -116,6 +136,32 @@ class Container {
       });
     }
   }
+  static suppressDocumentWriteWarnings() {
+    if (typeof console === "undefined" || typeof console.warn !== "function") {
+      return;
+    }
+    if (Container.documentWriteWarnDepth === 0) {
+      Container.originalConsoleWarn = console.warn;
+      console.warn = (...args) => {
+        if (args.length > 0 && typeof args[0] === "string" && args[0].includes("Avoid using document.write")) {
+          return;
+        }
+        if (Container.originalConsoleWarn) {
+          Container.originalConsoleWarn.apply(console, args);
+        }
+      };
+    }
+    Container.documentWriteWarnDepth++;
+  }
+  static restoreDocumentWriteWarnings() {
+    if (Container.documentWriteWarnDepth > 0) {
+      Container.documentWriteWarnDepth--;
+      if (Container.documentWriteWarnDepth === 0 && Container.originalConsoleWarn) {
+        console.warn = Container.originalConsoleWarn;
+        Container.originalConsoleWarn = null;
+      }
+    }
+  }
   static shouldUseWebGL() {
     return Container.settings.enableWebGL !== false;
   }
@@ -125,9 +171,11 @@ class Container {
   constructor(options = {}) {
     this.width = 0;
     this.height = 0;
+    this.dpr = Container.getDevicePixelRatio();
     this.borderRadius = options.borderRadius || 48;
     this.type = options.type || "rounded";
-    this.tintOpacity = options.tintOpacity !== void 0 ? options.tintOpacity : 0.2;
+    this.tintOpacity = options.tintOpacity !== void 0 ? options.tintOpacity : 0.06;
+    this.glassOpacity = options.glassOpacity !== void 0 ? options.glassOpacity : 0.08;
     this.canvas = null;
     this.element = null;
     this.gl = null;
@@ -135,6 +183,7 @@ class Container {
     this.webglInitialized = false;
     this.children = [];
     this.animationFrameId = null;
+    this.destroyed = false;
     Container.instances.push(this);
     Container.ensureGlobalObservers();
     this.init();
@@ -164,6 +213,7 @@ class Container {
   }
   updateSizeFromDOM() {
     requestAnimationFrame(() => {
+      if (!this.element || !this.canvas) return;
       const rect = this.element.getBoundingClientRect();
       let newWidth = Math.ceil(rect.width);
       let newHeight = Math.ceil(rect.height);
@@ -179,16 +229,20 @@ class Container {
         this.borderRadius = newHeight / 2;
         this.element.style.borderRadius = this.borderRadius + "px";
       }
-      if (newWidth !== this.width || newHeight !== this.height) {
+      const nextDpr = Container.getDevicePixelRatio();
+      const pixelWidth = Math.max(1, Math.round(newWidth * nextDpr));
+      const pixelHeight = Math.max(1, Math.round(newHeight * nextDpr));
+      if (newWidth !== this.width || newHeight !== this.height || nextDpr !== this.dpr) {
         this.width = newWidth;
         this.height = newHeight;
-        this.canvas.width = newWidth;
-        this.canvas.height = newHeight;
+        this.dpr = nextDpr;
+        this.canvas.width = pixelWidth;
+        this.canvas.height = pixelHeight;
         this.canvas.style.width = newWidth + "px";
         this.canvas.style.height = newHeight + "px";
         this.canvas.style.borderRadius = this.borderRadius + "px";
         if (this.gl_refs.gl) {
-          this.gl_refs.gl.viewport(0, 0, newWidth, newHeight);
+          this.gl_refs.gl.viewport(0, 0, pixelWidth, pixelHeight);
           this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc, newWidth, newHeight);
           this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc, this.borderRadius);
         }
@@ -196,8 +250,8 @@ class Container {
           if (child instanceof Button && child.isNestedGlass && child.gl_refs.gl) {
             const gl = child.gl_refs.gl;
             gl.bindTexture(gl.TEXTURE_2D, child.gl_refs.texture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, newWidth, newHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-            gl.uniform2f(child.gl_refs.textureSizeLoc, newWidth, newHeight);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.canvas.width, this.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            gl.uniform2f(child.gl_refs.textureSizeLoc, this.canvas.width, this.canvas.height);
             if (child.gl_refs.containerSizeLoc) {
               gl.uniform2f(child.gl_refs.containerSizeLoc, newWidth, newHeight);
             }
@@ -248,6 +302,7 @@ class Container {
     this.gl = this.canvas.getContext("webgl", { preserveDrawingBuffer: true });
     if (!this.gl) {
       console.error("WebGL not supported");
+      this.applyFallbackStyles();
       return;
     }
   }
@@ -303,15 +358,30 @@ class Container {
     if (!html2canvas) {
       console.error("[PWTK] html2canvas not available, containers will not initialize");
       Container.isCapturing = false;
+      const pending = Container.waitingForSnapshot.slice();
       Container.waitingForSnapshot = [];
+      pending.forEach((container) => {
+        if (container && typeof container.applyFallbackStyles === "function") {
+          container.applyFallbackStyles();
+        }
+      });
       return;
     }
     const targets = Container.drainWaitingQueue();
+    const doc = document.documentElement;
+    const body = document.body;
+    const pageWidth = Math.max(doc?.scrollWidth || 0, body?.scrollWidth || 0, window.innerWidth || 0);
+    const pageHeight = Math.max(doc?.scrollHeight || 0, body?.scrollHeight || 0, window.innerHeight || 0);
+    const scale = Container.computeSnapshotScale(pageWidth, pageHeight);
+    Container.pageSnapshotScale = scale;
+    Container.suppressDocumentWriteWarnings();
     html2canvas(document.body, {
-      scale: 1,
+      scale,
       useCORS: true,
-      allowTaint: true,
+      allowTaint: false,
       backgroundColor: null,
+      windowWidth: pageWidth,
+      windowHeight: pageHeight,
       logging: false,
       ignoreElements: function(element) {
         return element.classList.contains("glass-container") || element.classList.contains("glass-button") || element.classList.contains("glass-button-text");
@@ -326,7 +396,13 @@ class Container {
     }).catch((error) => {
       console.error("[PWTK] html2canvas error:", error);
       Container.isCapturing = false;
+      const pending = Container.toUniqueList([...targets, ...Container.waitingForSnapshot]);
       Container.waitingForSnapshot = [];
+      pending.forEach((container) => {
+        if (container && typeof container.applyFallbackStyles === "function") {
+          container.applyFallbackStyles();
+        }
+      });
     }).finally(() => {
       Container.isCapturing = false;
       if (Container.pendingForceRefresh || Container.waitingForSnapshot.length > 0) {
@@ -334,6 +410,7 @@ class Container {
         Container.pendingForceRefresh = false;
         Container.refreshAll(shouldForce);
       }
+      Container.restoreDocumentWriteWarnings();
     });
   }
   initWebGL() {
@@ -345,6 +422,11 @@ class Container {
     if (!this.webglInitialized) {
       this.setupShader(snapshotCanvas);
       this.webglInitialized = true;
+      this.children.forEach((child) => {
+        if (child instanceof Button && child.isNestedGlass && !child.webglInitialized) {
+          child.initNestedGlass();
+        }
+      });
       return;
     }
     const gl = this.gl_refs.gl;
@@ -534,6 +616,7 @@ class Container {
     uniform vec2 u_resolution;
       uniform vec2 u_textureSize;
       uniform float u_scrollY;
+      uniform float u_pageWidth;
       uniform float u_pageHeight;
       uniform float u_viewportHeight;
       uniform float u_blurRadius;
@@ -549,6 +632,7 @@ class Container {
       uniform float u_cornerBoost;
       uniform float u_rippleEffect;
       uniform float u_tintOpacity;
+      uniform float u_glassOpacity;
     varying vec2 v_texcoord;
 
       // Function to calculate distance from rounded rectangle edge
@@ -626,8 +710,13 @@ class Container {
         vec2 containerOffset = (coord - 0.5) * containerSize;
         vec2 pagePixel = containerCenter + containerOffset;
         
+        float scaleX = u_textureSize.x / max(u_pageWidth, 1.0);
+        float scaleY = u_textureSize.y / max(u_pageHeight, 1.0);
+        vec2 scaledPagePixel = vec2(pagePixel.x * scaleX, pagePixel.y * scaleY);
+        
         // Convert to texture coordinate (0 to 1)
-        vec2 textureCoord = pagePixel / textureSize;
+        vec2 textureCoord = scaledPagePixel / textureSize;
+        textureCoord = clamp(textureCoord, vec2(0.0), vec2(1.0));
         
         // Glass refraction effects
         float distFromEdgeShape;
@@ -786,7 +875,8 @@ class Container {
         }
         float mask = 1.0 - smoothstep(-1.0, 1.0, maskDistance);
         
-        gl_FragColor = vec4(color.rgb, mask);
+        float opacity = clamp(u_glassOpacity, 0.02, 0.95);
+        gl_FragColor = vec4(color.rgb, mask * opacity);
       }
     `;
     const program = this.createProgram(gl, vsSource, fsSource);
@@ -803,6 +893,7 @@ class Container {
     const resolutionLoc = gl.getUniformLocation(program, "u_resolution");
     const textureSizeLoc = gl.getUniformLocation(program, "u_textureSize");
     const scrollYLoc = gl.getUniformLocation(program, "u_scrollY");
+    const pageWidthLoc = gl.getUniformLocation(program, "u_pageWidth");
     const pageHeightLoc = gl.getUniformLocation(program, "u_pageHeight");
     const viewportHeightLoc = gl.getUniformLocation(program, "u_viewportHeight");
     const blurRadiusLoc = gl.getUniformLocation(program, "u_blurRadius");
@@ -818,6 +909,7 @@ class Container {
     const cornerBoostLoc = gl.getUniformLocation(program, "u_cornerBoost");
     const rippleEffectLoc = gl.getUniformLocation(program, "u_rippleEffect");
     const tintOpacityLoc = gl.getUniformLocation(program, "u_tintOpacity");
+    const glassOpacityLoc = gl.getUniformLocation(program, "u_glassOpacity");
     const imageLoc = gl.getUniformLocation(program, "u_image");
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -828,9 +920,11 @@ class Container {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     this.gl_refs = {
       gl,
+      program,
       texture,
       textureSizeLoc,
       scrollYLoc,
+      pageWidthLoc,
       positionLoc,
       texcoordLoc,
       resolutionLoc,
@@ -849,6 +943,7 @@ class Container {
       cornerBoostLoc,
       rippleEffectLoc,
       tintOpacityLoc,
+      glassOpacityLoc,
       imageLoc,
       positionBuffer,
       texcoordBuffer
@@ -861,7 +956,9 @@ class Container {
     gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
     gl.enableVertexAttribArray(texcoordLoc);
     gl.vertexAttribPointer(texcoordLoc, 2, gl.FLOAT, false, 0, 0);
-    gl.uniform2f(resolutionLoc, this.canvas.width, this.canvas.height);
+    const cssWidth = this.width || Math.max(1, Math.round(this.canvas.width / this.dpr));
+    const cssHeight = this.height || Math.max(1, Math.round(this.canvas.height / this.dpr));
+    gl.uniform2f(resolutionLoc, cssWidth, cssHeight);
     gl.uniform2f(textureSizeLoc, image.width, image.height);
     gl.uniform1f(blurRadiusLoc, window.glassControls?.blurRadius || 5);
     gl.uniform1f(borderRadiusLoc, this.borderRadius);
@@ -875,10 +972,13 @@ class Container {
     gl.uniform1f(cornerBoostLoc, window.glassControls?.cornerBoost || 0.02);
     gl.uniform1f(rippleEffectLoc, window.glassControls?.rippleEffect || 0.1);
     gl.uniform1f(tintOpacityLoc, this.tintOpacity);
+    gl.uniform1f(glassOpacityLoc, window.glassControls?.glassOpacity ?? this.glassOpacity);
     const position = this.getPosition();
     gl.uniform2f(containerPositionLoc, position.x, position.y);
+    const pageWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
     const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
     const viewportHeight = window.innerHeight;
+    gl.uniform1f(pageWidthLoc, pageWidth);
     gl.uniform1f(pageHeightLoc, pageHeight);
     gl.uniform1f(viewportHeightLoc, viewportHeight);
     gl.activeTexture(gl.TEXTURE0);
@@ -892,16 +992,25 @@ class Container {
       this.animationFrameId = null;
     }
     const render = () => {
-      if (!this.gl_refs.gl) {
+      if (this.destroyed || !this.gl_refs.gl) {
         this.animationFrameId = null;
         return;
       }
+      if (!this.element || !this.element.isConnected) {
+        this.destroy();
+        return;
+      }
       const gl = this.gl_refs.gl;
       gl.clear(gl.COLOR_BUFFER_BIT);
       const scrollY = window.pageYOffset || document.documentElement.scrollTop;
       gl.uniform1f(this.gl_refs.scrollYLoc, scrollY);
       const position = this.getPosition();
       gl.uniform2f(this.gl_refs.containerPositionLoc, position.x, position.y);
+      const pageWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+      const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+      gl.uniform1f(this.gl_refs.pageWidthLoc, pageWidth);
+      gl.uniform1f(this.gl_refs.pageHeightLoc, pageHeight);
+      gl.uniform1f(this.gl_refs.viewportHeightLoc, window.innerHeight);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       this.animationFrameId = window.requestAnimationFrame(render);
     };
@@ -932,6 +1041,58 @@ class Container {
     }
     return shader;
   }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    if (this.animationFrameId !== null) {
+      window.cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.children.forEach((child) => {
+      if (typeof child.stopNestedAnimation === "function") {
+        child.stopNestedAnimation();
+      }
+    });
+    if (this.gl_refs.gl) {
+      const gl = this.gl_refs.gl;
+      if (this.gl_refs.texture) gl.deleteTexture(this.gl_refs.texture);
+      if (this.gl_refs.positionBuffer) gl.deleteBuffer(this.gl_refs.positionBuffer);
+      if (this.gl_refs.texcoordBuffer) gl.deleteBuffer(this.gl_refs.texcoordBuffer);
+      if (this.gl_refs.program) gl.deleteProgram(this.gl_refs.program);
+    }
+    this.gl_refs = {};
+    this.webglInitialized = false;
+    Container.waitingForSnapshot = Container.waitingForSnapshot.filter((item) => item !== this);
+    Container.instances = Container.instances.filter((item) => item !== this);
+    if (!Container.instances.length) {
+      Container.teardownGlobalObservers();
+      Container.pageSnapshot = null;
+      Container.pageSnapshotScale = 1;
+      Container.isCapturing = false;
+      Container.pendingForceRefresh = false;
+    }
+  }
+  static teardownGlobalObservers() {
+    if (!Container.globalListenersSetup) return;
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      Container.globalListenersSetup = false;
+      return;
+    }
+    if (Container.refreshTimer) {
+      window.clearTimeout(Container.refreshTimer);
+      Container.refreshTimer = null;
+    }
+    if (Container.mutationObserver) {
+      Container.mutationObserver.disconnect();
+      Container.mutationObserver = null;
+    }
+    window.removeEventListener("resize", Container.handleWindowRefresh);
+    window.removeEventListener("orientationchange", Container.handleWindowRefresh);
+    window.removeEventListener("focus", Container.handleWindowRefresh);
+    window.removeEventListener("pageshow", Container.handleWindowRefresh);
+    document.removeEventListener("visibilitychange", Container.handleVisibilityRefresh);
+    Container.globalListenersSetup = false;
+  }
 }
 if (typeof window !== "undefined") {
   Container.settings = Container.loadSettings();