@leeguoo/pwtk-network-debugger 1.3.7 → 1.3.8

package/dist/{button-B5OqHDUm.mjs → button-CboZyj7j.mjs}

@@ -5,11 +5,13 @@ class Button extends Container {
     const onClick = options.onClick || null;
     const type = options.type || "rounded";
     const warp = options.warp !== void 0 ? options.warp : false;
-    const tintOpacity = options.tintOpacity !== void 0 ? options.tintOpacity : 0.2;
+    const tintOpacity = options.tintOpacity !== void 0 ? options.tintOpacity : 0.06;
+    const glassOpacity = options.glassOpacity !== void 0 ? options.glassOpacity : 0.08;
     super({
       borderRadius: fontSize,
       type,
-      tintOpacity
+      tintOpacity,
+      glassOpacity
     });
     this.text = text;
     this.fontSize = fontSize;
@@ -27,6 +29,21 @@ class Button extends Container {
     this.setupClickHandler();
     this.setSizeFromText();
   }
+  updateCanvasSize(width, height) {
+    if (!this.canvas) return;
+    this.dpr = Container.getDevicePixelRatio();
+    const pixelWidth = Math.max(1, Math.round(width * this.dpr));
+    const pixelHeight = Math.max(1, Math.round(height * this.dpr));
+    this.canvas.width = pixelWidth;
+    this.canvas.height = pixelHeight;
+    this.canvas.style.width = width + "px";
+    this.canvas.style.height = height + "px";
+    if (this.gl_refs.gl) {
+      this.gl_refs.gl.viewport(0, 0, pixelWidth, pixelHeight);
+      this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc, width, height);
+      this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc, this.borderRadius);
+    }
+  }
   setSizeFromText() {
     let width, height;
     if (this.type === "circle") {
@@ -62,17 +79,7 @@ class Button extends Container {
     if (this.type === "circle") {
       this.width = width;
       this.height = height;
-      if (this.canvas) {
-        this.canvas.width = width;
-        this.canvas.height = height;
-        this.canvas.style.width = width + "px";
-        this.canvas.style.height = height + "px";
-        if (this.gl_refs.gl) {
-          this.gl_refs.gl.viewport(0, 0, width, height);
-          this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc, width, height);
-          this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc, this.borderRadius);
-        }
-      }
+      this.updateCanvasSize(width, height);
     } else if (this.type === "pill") {
       this.width = width;
       this.height = height;
@@ -80,17 +87,7 @@ class Button extends Container {
       this.element.style.height = height + "px";
       this.element.style.maxWidth = width + "px";
       this.element.style.maxHeight = height + "px";
-      if (this.canvas) {
-        this.canvas.width = width;
-        this.canvas.height = height;
-        this.canvas.style.width = width + "px";
-        this.canvas.style.height = height + "px";
-        if (this.gl_refs.gl) {
-          this.gl_refs.gl.viewport(0, 0, width, height);
-          this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc, width, height);
-          this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc, this.borderRadius);
-        }
-      }
+      this.updateCanvasSize(width, height);
     } else {
       this.updateSizeFromDOM();
     }
@@ -140,8 +137,7 @@ class Button extends Container {
     super.applySnapshot(snapshotCanvas);
   }
   initNestedGlass() {
-    if (!this.parent.webglInitialized) {
-      setTimeout(() => this.initNestedGlass(), 100);
+    if (!this.parent || !this.parent.webglInitialized) {
       return;
     }
     this.setupDynamicNestedShader();
@@ -179,7 +175,8 @@ class Button extends Container {
       uniform float u_cornerBoost;
       uniform float u_rippleEffect;
       uniform float u_tintOpacity;
-      varying vec2 v_texcoord;
+      uniform float u_glassOpacity;
+    varying vec2 v_texcoord;
 
       // Function to calculate distance from rounded rectangle edge
       float roundedRectDistance(vec2 coord, vec2 size, float radius) {
@@ -337,7 +334,7 @@ class Button extends Container {
         
         // HIGH-QUALITY BUTTON BLUR on container texture
         vec4 color = vec4(0.0);
-        vec2 texelSize = 1.0 / containerSize;
+        vec2 texelSize = 1.0 / u_textureSize;
         float sigma = u_blurRadius / 3.0; // More substantial blur
         vec2 blurStep = texelSize * sigma;
         
@@ -413,8 +410,9 @@ class Button extends Container {
           maskDistance = roundedRectDistance(coord, u_resolution, u_borderRadius);
         }
         float mask = 1.0 - smoothstep(-1.0, 1.0, maskDistance);
+        float opacity = clamp(u_glassOpacity, 0.02, 0.95);
         
-        gl_FragColor = vec4(finalTinted, mask);
+        gl_FragColor = vec4(finalTinted, mask * opacity);
       }
     `;
     const program = this.createProgram(gl, vsSource, fsSource);
@@ -445,6 +443,7 @@ class Button extends 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);
@@ -486,6 +485,7 @@ class Button extends Container {
       cornerBoostLoc,
       rippleEffectLoc,
       tintOpacityLoc,
+      glassOpacityLoc,
       imageLoc,
       positionBuffer,
       texcoordBuffer
@@ -498,7 +498,9 @@ class Button extends 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, containerCanvas.width, containerCanvas.height);
     gl.uniform1f(blurRadiusLoc, window.glassControls?.blurRadius || 2);
     gl.uniform1f(borderRadiusLoc, this.borderRadius);
@@ -512,6 +514,7 @@ class Button extends 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 buttonPosition = this.getPosition();
     const containerPosition = this.parent.getPosition();
     gl.uniform2f(buttonPositionLoc, buttonPosition.x, buttonPosition.y);
@@ -528,7 +531,15 @@ class Button extends Container {
       this.nestedAnimationFrameId = null;
     }
     const render = () => {
-      if (!this.gl_refs.gl || !this.parent) return;
+      if (this.destroyed || !this.gl_refs.gl || !this.parent) return;
+      if (!this.element || !this.element.isConnected) {
+        this.stopNestedAnimation();
+        return;
+      }
+      if (!this.parent.element || !this.parent.element.isConnected) {
+        this.stopNestedAnimation();
+        return;
+      }
       const gl = this.gl_refs.gl;
       const containerCanvas = this.parent.canvas;
       gl.bindTexture(gl.TEXTURE_2D, this.gl_refs.texture);
@@ -561,6 +572,10 @@ class Button extends Container {
       this.nestedAnimationFrameId = null;
     }
   }
+  destroy() {
+    this.stopNestedAnimation();
+    super.destroy();
+  }
 }
 if (typeof window !== "undefined") {
   window.Button = Button;

package/dist/button-DXA15AWP.js

@@ -0,0 +1 @@
+"use strict";class t extends Container{constructor(t={}){const e=t.text||"Button",i=parseInt(t.size)||48,n=t.onClick||null,o=t.type||"rounded",s=void 0!==t.warp?t.warp:!1;super({borderRadius:i,type:o,tintOpacity:void 0!==t.tintOpacity?t.tintOpacity:.06,glassOpacity:void 0!==t.glassOpacity?t.glassOpacity:.08});this.text=e;this.fontSize=i;this.onClick=n;this.type=o;this.warp=s;this.parent=null;this.isNestedGlass=!1;this.nestedAnimationFrameId=null;this.element.classList.add("glass-button");if("circle"===this.type)this.element.classList.add("glass-button-circle");this.createTextElement();this.setupClickHandler();this.setSizeFromText()}updateCanvasSize(t,e){if(!this.canvas)return;this.dpr=Container.getDevicePixelRatio();const i=Math.max(1,Math.round(t*this.dpr)),n=Math.max(1,Math.round(e*this.dpr));this.canvas.width=i;this.canvas.height=n;this.canvas.style.width=t+"px";this.canvas.style.height=e+"px";if(this.gl_refs.gl){this.gl_refs.gl.viewport(0,0,i,n);this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc,t,e);this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc,this.borderRadius)}}setSizeFromText(){let e,i;if("circle"===this.type){const t=2.5*this.fontSize;e=t;i=t;this.borderRadius=t/2;this.element.style.width=e+"px";this.element.style.height=i+"px";this.element.style.minWidth=e+"px";this.element.style.minHeight=i+"px";this.element.style.maxWidth=e+"px";this.element.style.maxHeight=i+"px"}else if("pill"===this.type){const n=t.measureText(this.text,this.fontSize);e=Math.ceil(n.width+2*this.fontSize);i=Math.ceil(this.fontSize+1.2*this.fontSize);this.borderRadius=i/2;this.element.style.minWidth=e+"px";this.element.style.minHeight=i+"px"}else{const n=t.measureText(this.text,this.fontSize);e=Math.ceil(n.width+2*this.fontSize);i=Math.ceil(this.fontSize+1.5*this.fontSize);this.borderRadius=this.fontSize;this.element.style.minWidth=e+"px";this.element.style.minHeight=i+"px"}this.element.style.borderRadius=this.borderRadius+"px";if(this.canvas)this.canvas.style.borderRadius=this.borderRadius+"px";if("circle"===this.type){this.width=e;this.height=i;this.updateCanvasSize(e,i)}else if("pill"===this.type){this.width=e;this.height=i;this.element.style.width=e+"px";this.element.style.height=i+"px";this.element.style.maxWidth=e+"px";this.element.style.maxHeight=i+"px";this.updateCanvasSize(e,i)}else this.updateSizeFromDOM()}setupAsNestedGlass(){if(this.parent&&!this.isNestedGlass){this.isNestedGlass=!0;if(this.webglInitialized)this.initWebGL()}}static measureText(t,e){const i=document.createElement("canvas").getContext("2d");i.font=`${e}px system-ui, -apple-system, sans-serif`;return i.measureText(t)}createTextElement(){this.textElement=document.createElement("div");this.textElement.className="glass-button-text";this.textElement.textContent=this.text;this.textElement.style.fontSize=this.fontSize+"px";this.element.appendChild(this.textElement)}setupClickHandler(){if(this.onClick&&this.element)this.element.addEventListener("click",t=>{t.preventDefault();this.onClick(this.text)})}initWebGL(){if(Container.pageSnapshot&&this.gl)if(this.parent&&this.isNestedGlass)this.initNestedGlass();else super.initWebGL()}applySnapshot(t){if(!this.parent||!this.isNestedGlass)super.applySnapshot(t)}initNestedGlass(){if(this.parent&&this.parent.webglInitialized){this.setupDynamicNestedShader();this.webglInitialized=!0}}setupDynamicNestedShader(){const t=this.gl,e=this.createProgram(t,"\n      attribute vec2 a_position;\n      attribute vec2 a_texcoord;\n      varying vec2 v_texcoord;\n\n      void main() {\n        gl_Position = vec4(a_position, 0, 1);\n        v_texcoord = a_texcoord;\n      }\n    ","\n      precision mediump float;\n      uniform sampler2D u_image;\n      uniform vec2 u_resolution;\n      uniform vec2 u_textureSize;\n      uniform float u_blurRadius;\n      uniform float u_borderRadius;\n      uniform vec2 u_buttonPosition;\n      uniform vec2 u_containerPosition;\n      uniform vec2 u_containerSize;\n      uniform float u_warp;\n      uniform float u_edgeIntensity;\n      uniform float u_rimIntensity;\n      uniform float u_baseIntensity;\n      uniform float u_edgeDistance;\n      uniform float u_rimDistance;\n      uniform float u_baseDistance;\n      uniform float u_cornerBoost;\n      uniform float u_rippleEffect;\n      uniform float u_tintOpacity;\n      uniform float u_glassOpacity;\n    varying vec2 v_texcoord;\n\n      // Function to calculate distance from rounded rectangle edge\n      float roundedRectDistance(vec2 coord, vec2 size, float radius) {\n        vec2 center = size * 0.5;\n        vec2 pixelCoord = coord * size;\n        vec2 toCorner = abs(pixelCoord - center) - (center - radius);\n        float outsideCorner = length(max(toCorner, 0.0));\n        float insideCorner = min(max(toCorner.x, toCorner.y), 0.0);\n        return (outsideCorner + insideCorner - radius);\n      }\n      \n      // Function to calculate distance from circle edge (negative inside, positive outside)\n      float circleDistance(vec2 coord, vec2 size, float radius) {\n        vec2 center = vec2(0.5, 0.5);\n        vec2 pixelCoord = coord * size;\n        vec2 centerPixel = center * size;\n        float distFromCenter = length(pixelCoord - centerPixel);\n        return distFromCenter - radius;\n      }\n      \n      // Check if this is a pill (border radius is approximately 50% of height AND width > height)\n      bool isPill(vec2 size, float radius) {\n        float heightRatioDiff = abs(radius - size.y * 0.5);\n        bool radiusMatchesHeight = heightRatioDiff < 2.0;\n        bool isWiderThanTall = size.x > size.y + 4.0; // Must be significantly wider\n        return radiusMatchesHeight && isWiderThanTall;\n      }\n      \n      // Check if this is a circle (border radius is approximately 50% of smaller dimension AND roughly square)\n      bool isCircle(vec2 size, float radius) {\n        float minDim = min(size.x, size.y);\n        bool radiusMatchesMinDim = abs(radius - minDim * 0.5) < 1.0;\n        bool isRoughlySquare = abs(size.x - size.y) < 4.0; // Width and height are similar\n        return radiusMatchesMinDim && isRoughlySquare;\n      }\n      \n      // Function to calculate distance from pill edge (capsule shape)\n      float pillDistance(vec2 coord, vec2 size, float radius) {\n        vec2 center = size * 0.5;\n        vec2 pixelCoord = coord * size;\n        \n        // Proper capsule: line segment with radius\n        // The capsule axis runs horizontally from (radius, center.y) to (size.x - radius, center.y)\n        vec2 capsuleStart = vec2(radius, center.y);\n        vec2 capsuleEnd = vec2(size.x - radius, center.y);\n        \n        // Project point onto the capsule axis (line segment)\n        vec2 capsuleAxis = capsuleEnd - capsuleStart;\n        float capsuleLength = length(capsuleAxis);\n        \n        if (capsuleLength > 0.0) {\n          vec2 toPoint = pixelCoord - capsuleStart;\n          float t = clamp(dot(toPoint, capsuleAxis) / dot(capsuleAxis, capsuleAxis), 0.0, 1.0);\n          vec2 closestPointOnAxis = capsuleStart + t * capsuleAxis;\n          return length(pixelCoord - closestPointOnAxis) - radius;\n        } else {\n          // Degenerate case: just a circle\n          return length(pixelCoord - center) - radius;\n        }\n      }\n\n      void main() {\n        vec2 coord = v_texcoord;\n        \n        // Calculate button position within container space\n        vec2 buttonSize = u_resolution;\n        vec2 containerSize = u_containerSize;\n        \n        // Convert screen positions to container-relative coordinates\n        // Container position is center, convert to top-left\n        vec2 containerTopLeft = u_containerPosition - containerSize * 0.5;\n        vec2 buttonTopLeft = u_buttonPosition - buttonSize * 0.5;\n        \n        // Get button's position relative to container's top-left\n        vec2 buttonRelativePos = buttonTopLeft - containerTopLeft;\n        \n        // Current pixel position within the button (0 to buttonSize)\n        vec2 buttonPixel = coord * buttonSize;\n        \n        // Absolute pixel position in container space\n        vec2 containerPixel = buttonRelativePos + buttonPixel;\n        \n        // Convert to texture coordinates (0 to 1)\n        vec2 baseTextureCoord = containerPixel / containerSize;\n        \n        // BUTTON'S SOPHISTICATED GLASS EFFECTS on top of container's glass\n        float distFromEdgeShape;\n        vec2 shapeNormal; // Normal vector pointing away from shape surface\n        \n        if (isPill(u_resolution, u_borderRadius)) {\n          distFromEdgeShape = -pillDistance(coord, u_resolution, u_borderRadius);\n          \n          // Calculate normal for pill shape\n          vec2 center = vec2(0.5, 0.5);\n          vec2 pixelCoord = coord * u_resolution;\n          vec2 capsuleStart = vec2(u_borderRadius, center.y * u_resolution.y);\n          vec2 capsuleEnd = vec2(u_resolution.x - u_borderRadius, center.y * u_resolution.y);\n          vec2 capsuleAxis = capsuleEnd - capsuleStart;\n          float capsuleLength = length(capsuleAxis);\n          \n          if (capsuleLength > 0.0) {\n            vec2 toPoint = pixelCoord - capsuleStart;\n            float t = clamp(dot(toPoint, capsuleAxis) / dot(capsuleAxis, capsuleAxis), 0.0, 1.0);\n            vec2 closestPointOnAxis = capsuleStart + t * capsuleAxis;\n            vec2 normalDir = pixelCoord - closestPointOnAxis;\n            shapeNormal = length(normalDir) > 0.0 ? normalize(normalDir) : vec2(0.0, 1.0);\n          } else {\n            shapeNormal = normalize(coord - center);\n          }\n        } else if (isCircle(u_resolution, u_borderRadius)) {\n          distFromEdgeShape = -circleDistance(coord, u_resolution, u_borderRadius);\n          vec2 center = vec2(0.5, 0.5);\n          shapeNormal = normalize(coord - center);\n        } else {\n          distFromEdgeShape = -roundedRectDistance(coord, u_resolution, u_borderRadius);\n          vec2 center = vec2(0.5, 0.5);\n          shapeNormal = normalize(coord - center);\n        }\n        distFromEdgeShape = max(distFromEdgeShape, 0.0);\n        \n        float distFromLeft = coord.x;\n        float distFromRight = 1.0 - coord.x;\n        float distFromTop = coord.y;\n        float distFromBottom = 1.0 - coord.y;\n        float distFromEdge = distFromEdgeShape / min(u_resolution.x, u_resolution.y);\n        \n        // MULTI-LAYER BUTTON GLASS REFRACTION using shape-aware normal\n        float normalizedDistance = distFromEdge * min(u_resolution.x, u_resolution.y);\n        float baseIntensity = 1.0 - exp(-normalizedDistance * u_baseDistance);\n        float edgeIntensity = exp(-normalizedDistance * u_edgeDistance);\n        float rimIntensity = exp(-normalizedDistance * u_rimDistance);\n        \n        // Apply center warping only if warp is enabled, keep edge and rim effects always\n        float baseComponent = u_warp > 0.5 ? baseIntensity * u_baseIntensity : 0.0;\n        float totalIntensity = baseComponent + edgeIntensity * u_edgeIntensity + rimIntensity * u_rimIntensity;\n        \n        vec2 baseRefraction = shapeNormal * totalIntensity;\n        \n        // Corner enhancement for buttons\n        float cornerProximityX = min(distFromLeft, distFromRight);\n        float cornerProximityY = min(distFromTop, distFromBottom);\n        float cornerDistance = max(cornerProximityX, cornerProximityY);\n        float cornerNormalized = cornerDistance * min(u_resolution.x, u_resolution.y);\n        \n        float cornerBoost = exp(-cornerNormalized * 0.3) * u_cornerBoost;\n        vec2 cornerRefraction = shapeNormal * cornerBoost;\n        \n        // Button ripple texture\n        vec2 perpendicular = vec2(-shapeNormal.y, shapeNormal.x);\n        float rippleEffect = sin(distFromEdge * 30.0) * u_rippleEffect * rimIntensity;\n        vec2 textureRefraction = perpendicular * rippleEffect;\n        \n        vec2 totalRefraction = baseRefraction + cornerRefraction + textureRefraction;\n        vec2 textureCoord = baseTextureCoord + totalRefraction;\n        \n        // HIGH-QUALITY BUTTON BLUR on container texture\n        vec4 color = vec4(0.0);\n        vec2 texelSize = 1.0 / u_textureSize;\n        float sigma = u_blurRadius / 3.0; // More substantial blur\n        vec2 blurStep = texelSize * sigma;\n        \n        float totalWeight = 0.0;\n        \n        // 9x9 blur for buttons (more samples for quality)\n        for(float i = -4.0; i <= 4.0; i += 1.0) {\n          for(float j = -4.0; j <= 4.0; j += 1.0) {\n            float distance = length(vec2(i, j));\n            if(distance > 4.0) continue;\n            \n            float weight = exp(-(distance * distance) / (2.0 * sigma * sigma));\n            \n            vec2 offset = vec2(i, j) * blurStep;\n            color += texture2D(u_image, textureCoord + offset) * weight;\n            totalWeight += weight;\n          }\n        }\n        \n        color /= totalWeight;\n        \n        // BUTTON'S OWN GRADIENT LAYERS (same sophistication as container)\n        float gradientPosition = coord.y;\n        \n        // Primary button gradient\n        vec3 topTint = vec3(1.0, 1.0, 1.0);\n        vec3 bottomTint = vec3(0.7, 0.7, 0.7);\n        vec3 gradientTint = mix(topTint, bottomTint, gradientPosition);\n        vec3 tintedColor = mix(color.rgb, gradientTint, u_tintOpacity * 0.7);\n        color = vec4(tintedColor, color.a);\n        \n        // SECOND BUTTON GRADIENT - sampling from container's texture for variation\n        vec2 viewportCenter = u_buttonPosition;\n        float topY = max(0.0, (viewportCenter.y - buttonSize.y * 0.4) / containerSize.y);\n        float midY = viewportCenter.y / containerSize.y;\n        float bottomY = min(1.0, (viewportCenter.y + buttonSize.y * 0.4) / containerSize.y);\n        \n        vec3 topColor = texture2D(u_image, vec2(0.5, topY)).rgb;\n        vec3 midColor = texture2D(u_image, vec2(0.5, midY)).rgb;\n        vec3 bottomColor = texture2D(u_image, vec2(0.5, bottomY)).rgb;\n        \n        vec3 sampledGradient;\n        if (gradientPosition < 0.1) {\n          sampledGradient = topColor;\n        } else if (gradientPosition > 0.9) {\n          sampledGradient = bottomColor;\n        } else {\n          float transitionPos = (gradientPosition - 0.1) / 0.8;\n          if (transitionPos < 0.5) {\n            float t = transitionPos * 2.0;\n            sampledGradient = mix(topColor, midColor, t);\n          } else {\n            float t = (transitionPos - 0.5) * 2.0;\n            sampledGradient = mix(midColor, bottomColor, t);\n          }\n        }\n        \n        vec3 secondTinted = mix(color.rgb, sampledGradient, u_tintOpacity * 0.4);\n        \n        // Button highlighting/shadow system\n        vec3 buttonTopTint = vec3(1.08, 1.08, 1.08);    \n        vec3 buttonBottomTint = vec3(0.92, 0.92, 0.92); \n        vec3 buttonGradient = mix(buttonTopTint, buttonBottomTint, gradientPosition);\n        vec3 finalTinted = secondTinted * buttonGradient;\n        \n        // Shape mask (rounded rectangle, circle, or pill)\n        float maskDistance;\n        if (isPill(u_resolution, u_borderRadius)) {\n          maskDistance = pillDistance(coord, u_resolution, u_borderRadius);\n        } else if (isCircle(u_resolution, u_borderRadius)) {\n          maskDistance = circleDistance(coord, u_resolution, u_borderRadius);\n        } else {\n          maskDistance = roundedRectDistance(coord, u_resolution, u_borderRadius);\n        }\n        float mask = 1.0 - smoothstep(-1.0, 1.0, maskDistance);\n        float opacity = clamp(u_glassOpacity, 0.02, 0.95);\n        \n        gl_FragColor = vec4(finalTinted, mask * opacity);\n      }\n    ");if(!e)return;t.useProgram(e);const i=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,i);t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),t.STATIC_DRAW);const n=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,n);t.bufferData(t.ARRAY_BUFFER,new Float32Array([0,1,1,1,0,0,0,0,1,1,1,0]),t.STATIC_DRAW);const o=t.getAttribLocation(e,"a_position"),s=t.getAttribLocation(e,"a_texcoord"),r=t.getUniformLocation(e,"u_resolution"),a=t.getUniformLocation(e,"u_textureSize"),l=t.getUniformLocation(e,"u_blurRadius"),c=t.getUniformLocation(e,"u_borderRadius"),u=t.getUniformLocation(e,"u_buttonPosition"),d=t.getUniformLocation(e,"u_containerPosition"),m=t.getUniformLocation(e,"u_containerSize"),h=t.getUniformLocation(e,"u_warp"),f=t.getUniformLocation(e,"u_edgeIntensity"),p=t.getUniformLocation(e,"u_rimIntensity"),g=t.getUniformLocation(e,"u_baseIntensity"),x=t.getUniformLocation(e,"u_edgeDistance"),_=t.getUniformLocation(e,"u_rimDistance"),v=t.getUniformLocation(e,"u_baseDistance"),b=t.getUniformLocation(e,"u_cornerBoost"),y=t.getUniformLocation(e,"u_rippleEffect"),R=t.getUniformLocation(e,"u_tintOpacity"),T=t.getUniformLocation(e,"u_glassOpacity"),C=t.getUniformLocation(e,"u_image"),E=t.createTexture();t.bindTexture(t.TEXTURE_2D,E);const A=this.parent.canvas;t.texImage2D(t.TEXTURE_2D,0,t.RGBA,A.width,A.height,0,t.RGBA,t.UNSIGNED_BYTE,null);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE);this.gl_refs={gl:t,texture:E,textureSizeLoc:a,positionLoc:o,texcoordLoc:s,resolutionLoc:r,blurRadiusLoc:l,borderRadiusLoc:c,buttonPositionLoc:u,containerPositionLoc:d,containerSizeLoc:m,warpLoc:h,edgeIntensityLoc:f,rimIntensityLoc:p,baseIntensityLoc:g,edgeDistanceLoc:x,rimDistanceLoc:_,baseDistanceLoc:v,cornerBoostLoc:b,rippleEffectLoc:y,tintOpacityLoc:R,glassOpacityLoc:T,imageLoc:C,positionBuffer:i,texcoordBuffer:n};t.viewport(0,0,this.canvas.width,this.canvas.height);t.clearColor(0,0,0,0);t.bindBuffer(t.ARRAY_BUFFER,i);t.enableVertexAttribArray(o);t.vertexAttribPointer(o,2,t.FLOAT,!1,0,0);t.bindBuffer(t.ARRAY_BUFFER,n);t.enableVertexAttribArray(s);t.vertexAttribPointer(s,2,t.FLOAT,!1,0,0);const S=this.width||Math.max(1,Math.round(this.canvas.width/this.dpr)),L=this.height||Math.max(1,Math.round(this.canvas.height/this.dpr));t.uniform2f(r,S,L);t.uniform2f(a,A.width,A.height);t.uniform1f(l,window.glassControls?.blurRadius||2);t.uniform1f(c,this.borderRadius);t.uniform1f(h,this.warp?1:0);t.uniform1f(f,window.glassControls?.edgeIntensity||.01);t.uniform1f(p,window.glassControls?.rimIntensity||.05);t.uniform1f(g,window.glassControls?.baseIntensity||.01);t.uniform1f(x,window.glassControls?.edgeDistance||.15);t.uniform1f(_,window.glassControls?.rimDistance||.8);t.uniform1f(v,window.glassControls?.baseDistance||.1);t.uniform1f(b,window.glassControls?.cornerBoost||.02);t.uniform1f(y,window.glassControls?.rippleEffect||.1);t.uniform1f(R,this.tintOpacity);t.uniform1f(T,window.glassControls?.glassOpacity??this.glassOpacity);const D=this.getPosition(),z=this.parent.getPosition();t.uniform2f(u,D.x,D.y);t.uniform2f(d,z.x,z.y);t.uniform2f(m,this.parent.width,this.parent.height);t.activeTexture(t.TEXTURE0);t.bindTexture(t.TEXTURE_2D,E);t.uniform1i(C,0);this.startNestedRenderLoop()}startNestedRenderLoop(){if(null!==this.nestedAnimationFrameId){cancelAnimationFrame(this.nestedAnimationFrameId);this.nestedAnimationFrameId=null}const t=()=>{if(this.destroyed||!this.gl_refs.gl||!this.parent)return;if(!this.element||!this.element.isConnected){this.stopNestedAnimation();return}if(!this.parent.element||!this.parent.element.isConnected){this.stopNestedAnimation();return}const t=this.gl_refs.gl,e=this.parent.canvas;t.bindTexture(t.TEXTURE_2D,this.gl_refs.texture);t.texSubImage2D(t.TEXTURE_2D,0,0,0,t.RGBA,t.UNSIGNED_BYTE,e);t.clear(t.COLOR_BUFFER_BIT);const i=this.getPosition(),n=this.parent.getPosition();t.uniform2f(this.gl_refs.buttonPositionLoc,i.x,i.y);t.uniform2f(this.gl_refs.containerPositionLoc,n.x,n.y);t.drawArrays(t.TRIANGLES,0,6)},e=()=>{if("undefined"!=typeof Container){const t=!1!==Container.settings?.enableButtonAnimation,e=Container.shouldUseWebGL?Container.shouldUseWebGL():!0;if(!t||!e){this.nestedAnimationFrameId=null;return}}t();this.nestedAnimationFrameId=requestAnimationFrame(e)};e();this.render=t}stopNestedAnimation(){if(null!==this.nestedAnimationFrameId){cancelAnimationFrame(this.nestedAnimationFrameId);this.nestedAnimationFrameId=null}}destroy(){this.stopNestedAnimation();super.destroy()}}if("undefined"!=typeof window)window.Button=t;

package/dist/container-CAnQoMGr.js

@@ -0,0 +1 @@
+"use strict";class e{static instances=[];static pageSnapshot=null;static isCapturing=!1;static waitingForSnapshot=[];static mutationObserver=null;static globalListenersSetup=!1;static domReadyListenerAttached=!1;static refreshTimer=null;static pendingForceRefresh=!1;static settingsKey="pwtk_glass_settings_v1";static defaultSettings={enableWebGL:!1,autoRefresh:!0,enableButtonAnimation:!0};static settings={...e.defaultSettings};static maxSnapshotPixels=3e6;static minSnapshotScale=.5;static pageSnapshotScale=1;static documentWriteWarnDepth=0;static originalConsoleWarn=null;static handleWindowRefresh=()=>e.scheduleSnapshotRefresh();static handleVisibilityRefresh=()=>{if("undefined"!=typeof document&&!document.hidden)e.scheduleSnapshotRefresh()};static getDevicePixelRatio(){if("undefined"==typeof window)return 1;const e=window.devicePixelRatio||1;return Math.max(1,Math.min(e,2))}static computeSnapshotScale(t,i){const n=e.getDevicePixelRatio(),o=t*i;if(!Number.isFinite(o)||o<=0)return n;const s=Math.sqrt(e.maxSnapshotPixels/o),r=Math.min(n,s);return Math.max(e.minSnapshotScale,Math.min(r,n))}static loadSettings(){if("undefined"==typeof window||void 0===window.localStorage)return{...e.defaultSettings};try{const t=window.localStorage.getItem(e.settingsKey);if(!t)return{...e.defaultSettings};const i=JSON.parse(t);return{...e.defaultSettings,...i}}catch{return{...e.defaultSettings}}}static saveSettings(){if("undefined"!=typeof window&&void 0!==window.localStorage)try{window.localStorage.setItem(e.settingsKey,JSON.stringify(e.settings))}catch{}}static updateSetting(t,i){e.settings[t]=i;e.saveSettings();e.applySettings(t)}static applySettings(t){const i=e.shouldUseWebGL();e.instances.forEach(t=>{if(i){t.restoreFromFallback();if(t.webglInitialized)t.startRenderLoop();if(!1!==e.settings.enableButtonAnimation)t.children.forEach(e=>{if("function"==typeof e.startNestedRenderLoop)e.startNestedRenderLoop()})}else t.applyFallbackStyles()});if("undefined"!=typeof window)window.glassControls={...window.glassControls||{},nestedAnimationEnabled:!1!==e.settings.enableButtonAnimation};if("enableWebGL"===t)if(i)if(!e.pageSnapshot&&e.instances.length){e.waitingForSnapshot=e.instances.slice();if(!e.isCapturing){e.isCapturing=!0;e.instances[0].capturePageSnapshot(!0)}}else e.instances.forEach(t=>{if(!t.webglInitialized&&e.pageSnapshot)t.initWebGL()});else{e.isCapturing=!1;e.waitingForSnapshot=[]}if("autoRefresh"===t&&!1===e.settings.autoRefresh)if(e.refreshTimer){window.clearTimeout(e.refreshTimer);e.refreshTimer=null}if("enableButtonAnimation"===t){const t=!1!==e.settings.enableButtonAnimation;e.instances.forEach(e=>{e.children.forEach(e=>{if("function"==typeof e.startNestedRenderLoop)if(t)e.startNestedRenderLoop();else if("function"==typeof e.stopNestedAnimation)e.stopNestedAnimation()})})}}static suppressDocumentWriteWarnings(){if("undefined"!=typeof console&&"function"==typeof console.warn){if(0===e.documentWriteWarnDepth){e.originalConsoleWarn=console.warn;console.warn=(...t)=>{if(!(t.length>0&&"string"==typeof t[0]&&t[0].includes("Avoid using document.write")))if(e.originalConsoleWarn)e.originalConsoleWarn.apply(console,t)}}e.documentWriteWarnDepth++}}static restoreDocumentWriteWarnings(){if(e.documentWriteWarnDepth>0){e.documentWriteWarnDepth--;if(0===e.documentWriteWarnDepth&&e.originalConsoleWarn){console.warn=e.originalConsoleWarn;e.originalConsoleWarn=null}}}static shouldUseWebGL(){return!1!==e.settings.enableWebGL}static isAutoRefreshEnabled(){return!1!==e.settings.autoRefresh&&e.shouldUseWebGL()}constructor(t={}){this.width=0;this.height=0;this.dpr=e.getDevicePixelRatio();this.borderRadius=t.borderRadius||48;this.type=t.type||"rounded";this.tintOpacity=void 0!==t.tintOpacity?t.tintOpacity:.06;this.glassOpacity=void 0!==t.glassOpacity?t.glassOpacity:.08;this.canvas=null;this.element=null;this.gl=null;this.gl_refs={};this.webglInitialized=!1;this.children=[];this.animationFrameId=null;this.destroyed=!1;e.instances.push(this);e.ensureGlobalObservers();this.init()}addChild(e){this.children.push(e);e.parent=this;if(e.element&&this.element)this.element.appendChild(e.element);if(e instanceof Button)e.setupAsNestedGlass();this.updateSizeFromDOM();return e}removeChild(e){const t=this.children.indexOf(e);if(t>-1){this.children.splice(t,1);e.parent=null;if(e.element&&this.element.contains(e.element))this.element.removeChild(e.element);this.updateSizeFromDOM()}}updateSizeFromDOM(){requestAnimationFrame(()=>{if(!this.element||!this.canvas)return;const t=this.element.getBoundingClientRect();let i=Math.ceil(t.width),n=Math.ceil(t.height);if("circle"===this.type){const e=Math.max(i,n);i=e;n=e;this.borderRadius=e/2;this.element.style.width=e+"px";this.element.style.height=e+"px";this.element.style.borderRadius=this.borderRadius+"px"}else if("pill"===this.type){this.borderRadius=n/2;this.element.style.borderRadius=this.borderRadius+"px"}const o=e.getDevicePixelRatio(),s=Math.max(1,Math.round(i*o)),r=Math.max(1,Math.round(n*o));if(i!==this.width||n!==this.height||o!==this.dpr){this.width=i;this.height=n;this.dpr=o;this.canvas.width=s;this.canvas.height=r;this.canvas.style.width=i+"px";this.canvas.style.height=n+"px";this.canvas.style.borderRadius=this.borderRadius+"px";if(this.gl_refs.gl){this.gl_refs.gl.viewport(0,0,s,r);this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc,i,n);this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc,this.borderRadius)}this.children.forEach(e=>{if(e instanceof Button&&e.isNestedGlass&&e.gl_refs.gl){const t=e.gl_refs.gl;t.bindTexture(t.TEXTURE_2D,e.gl_refs.texture);t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.canvas.width,this.canvas.height,0,t.RGBA,t.UNSIGNED_BYTE,null);t.uniform2f(e.gl_refs.textureSizeLoc,this.canvas.width,this.canvas.height);if(e.gl_refs.containerSizeLoc)t.uniform2f(e.gl_refs.containerSizeLoc,i,n)}})}})}init(){this.createElement();this.setupCanvas();this.updateSizeFromDOM();if(e.shouldUseWebGL())if(e.pageSnapshot)this.initWebGL();else if(e.isCapturing)e.waitingForSnapshot.push(this);else{e.isCapturing=!0;e.waitingForSnapshot.push(this);this.capturePageSnapshot()}else this.applyFallbackStyles()}createElement(){this.element=document.createElement("div");this.element.className="glass-container";if("circle"===this.type)this.element.classList.add("glass-container-circle");else if("pill"===this.type)this.element.classList.add("glass-container-pill");this.element.style.borderRadius=this.borderRadius+"px";this.canvas=document.createElement("canvas");this.canvas.style.borderRadius=this.borderRadius+"px";this.canvas.style.position="absolute";this.canvas.style.top="0";this.canvas.style.left="0";this.canvas.style.width="100%";this.canvas.style.height="100%";this.canvas.style.boxShadow="0 25px 50px rgba(0, 0, 0, 0.25)";this.canvas.style.zIndex="-1";this.element.appendChild(this.canvas)}setupCanvas(){this.gl=this.canvas.getContext("webgl",{preserveDrawingBuffer:!0});if(this.gl);else{console.error("WebGL not supported");this.applyFallbackStyles()}}applyFallbackStyles(){if(this.element){if(this.canvas)this.canvas.style.display="none";if(null!==this.animationFrameId){window.cancelAnimationFrame(this.animationFrameId);this.animationFrameId=null}this.element.dataset.pwtkFallback="true";this.element.style.background="linear-gradient(135deg, rgba(255,255,255,0.35), rgba(200,210,230,0.18))";this.element.style.backdropFilter="blur(14px) saturate(140%)";this.element.style.webkitBackdropFilter="blur(14px) saturate(140%)";this.element.style.border="1px solid rgba(255,255,255,0.28)";this.element.style.boxShadow="0 15px 35px rgba(15, 23, 42, 0.33)";this.children.forEach(e=>{if("function"==typeof e.stopNestedAnimation)e.stopNestedAnimation()})}}restoreFromFallback(){if(this.element)if("true"===this.element.dataset.pwtkFallback){delete this.element.dataset.pwtkFallback;if(this.canvas)this.canvas.style.display="";this.element.style.removeProperty("background");this.element.style.removeProperty("backdrop-filter");this.element.style.removeProperty("-webkit-backdrop-filter");this.element.style.removeProperty("border");this.element.style.removeProperty("box-shadow")}}getPosition(){const e=this.canvas.getBoundingClientRect();return{x:e.left+e.width/2,y:e.top+e.height/2}}capturePageSnapshot(){if(!e.shouldUseWebGL()){e.isCapturing=!1;return}const t=window.html2canvas;if(!t){console.error("[PWTK] html2canvas not available, containers will not initialize");e.isCapturing=!1;const t=e.waitingForSnapshot.slice();e.waitingForSnapshot=[];t.forEach(e=>{if(e&&"function"==typeof e.applyFallbackStyles)e.applyFallbackStyles()});return}const i=e.drainWaitingQueue(),n=document.documentElement,o=document.body,s=Math.max(n?.scrollWidth||0,o?.scrollWidth||0,window.innerWidth||0),r=Math.max(n?.scrollHeight||0,o?.scrollHeight||0,window.innerHeight||0),a=e.computeSnapshotScale(s,r);e.pageSnapshotScale=a;e.suppressDocumentWriteWarnings();t(document.body,{scale:a,useCORS:!0,allowTaint:!1,backgroundColor:null,windowWidth:s,windowHeight:r,logging:!1,ignoreElements:function(e){return e.classList.contains("glass-container")||e.classList.contains("glass-button")||e.classList.contains("glass-button-text")}}).then(t=>{e.pageSnapshot=t;e.isCapturing=!1;e.toUniqueList(i).forEach(e=>{e.initWebGL()})}).catch(t=>{console.error("[PWTK] html2canvas error:",t);e.isCapturing=!1;const n=e.toUniqueList([...i,...e.waitingForSnapshot]);e.waitingForSnapshot=[];n.forEach(e=>{if(e&&"function"==typeof e.applyFallbackStyles)e.applyFallbackStyles()})}).finally(()=>{e.isCapturing=!1;if(e.pendingForceRefresh||e.waitingForSnapshot.length>0){const t=e.pendingForceRefresh;e.pendingForceRefresh=!1;e.refreshAll(t)}e.restoreDocumentWriteWarnings()})}initWebGL(){if(e.pageSnapshot&&this.gl)this.applySnapshot(e.pageSnapshot)}applySnapshot(e){if(!e||!this.gl)return;if(!this.webglInitialized){this.setupShader(e);this.webglInitialized=!0;this.children.forEach(e=>{if(e instanceof Button&&e.isNestedGlass&&!e.webglInitialized)e.initNestedGlass()});return}const t=this.gl_refs.gl;if(t&&this.gl_refs.texture){t.bindTexture(t.TEXTURE_2D,this.gl_refs.texture);t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e);if(this.gl_refs.textureSizeLoc)t.uniform2f(this.gl_refs.textureSizeLoc,e.width,e.height)}}static drainWaitingQueue(){const t=e.waitingForSnapshot.slice();e.waitingForSnapshot=[];return t}static toUniqueList(e){return Array.from(new Set(e.filter(Boolean)))}static invalidateSnapshot(t={}){if(e.isCapturing)e.isCapturing=!1;e.pageSnapshot=null;if(!1!==t.clearQueue)e.waitingForSnapshot=[]}static refreshAll(t=!1){if("undefined"==typeof window)return;if(!e.instances.length)return;if(!e.shouldUseWebGL())return;e.instances.forEach(t=>{if(!("undefined"!=typeof Button&&t instanceof Button&&t.isNestedGlass))if(!e.waitingForSnapshot.includes(t))e.waitingForSnapshot.push(t)});if(e.isCapturing){e.pendingForceRefresh=e.pendingForceRefresh||t||!1;return}const i=e.instances[0];if(i){e.isCapturing=!0;i.capturePageSnapshot(t)}}static scheduleSnapshotRefresh(){if("undefined"!=typeof window)if(e.instances.length)if(e.isAutoRefreshEnabled())if(!e.isCapturing){if(e.refreshTimer)window.clearTimeout(e.refreshTimer);e.refreshTimer=window.setTimeout(()=>{e.refreshTimer=null;e.refreshAll(!0)},200)}else e.pendingForceRefresh=!0}static ensureGlobalObservers(){if("undefined"!=typeof window&&"undefined"!=typeof document&&!e.globalListenersSetup)if(document.body){e.globalListenersSetup=!0;e.settings=e.loadSettings();e.setupMutationObserver();window.addEventListener("resize",e.handleWindowRefresh);window.addEventListener("orientationchange",e.handleWindowRefresh);window.addEventListener("focus",e.handleWindowRefresh);window.addEventListener("pageshow",e.handleWindowRefresh);document.addEventListener("visibilitychange",e.handleVisibilityRefresh);e.applySettings()}else if(!e.domReadyListenerAttached){e.domReadyListenerAttached=!0;document.addEventListener("DOMContentLoaded",()=>{e.domReadyListenerAttached=!1;e.ensureGlobalObservers()},{once:!0})}}static setupMutationObserver(){if(e.mutationObserver||"undefined"==typeof MutationObserver||"undefined"==typeof document)return;const t=new MutationObserver(t=>{if(t.some(t=>{if(e.isHtml2CanvasMutation(t))return!1;const i=t.target;return!e.isMutationInsideGlass(i)}))e.scheduleSnapshotRefresh()});t.observe(document.body,{childList:!0,attributes:!0,characterData:!0,subtree:!0});e.mutationObserver=t}static isMutationInsideGlass(t){if(!t||"object"!=typeof t||"number"!=typeof t.nodeType)return!1;else return e.instances.some(e=>e.element&&e.element.contains(t))}static isHtml2CanvasMutation(e){const t=e=>{if(!e||"object"!=typeof e)return!1;if("number"!=typeof e.nodeType||1!==e.nodeType)return!1;const t=e,i=t.classList;if(i&&(i.contains("html2canvas-container")||i.contains("html2canvas-clone")))return!0;if("string"==typeof t.id&&t.id.startsWith("html2canvas"))return!0;if(("string"==typeof t.className?t.className:"").includes("html2canvas"))return!0;if("function"==typeof t.getAttribute&&"true"===t.getAttribute("data-html2canvas-ignore"))return!0;else return!1};if(t(e.target))return!0;if(e.addedNodes)for(const i of e.addedNodes)if(t(i))return!0;if(e.removedNodes)for(const i of e.removedNodes)if(t(i))return!0;return!1}setupShader(e){const t=this.gl,i=this.createProgram(t,"\n    attribute vec2 a_position;\n    attribute vec2 a_texcoord;\n    varying vec2 v_texcoord;\n\n    void main() {\n      gl_Position = vec4(a_position, 0, 1);\n      v_texcoord = a_texcoord;\n    }\n  ","\n    precision mediump float;\n    uniform sampler2D u_image;\n    uniform vec2 u_resolution;\n      uniform vec2 u_textureSize;\n      uniform float u_scrollY;\n      uniform float u_pageWidth;\n      uniform float u_pageHeight;\n      uniform float u_viewportHeight;\n      uniform float u_blurRadius;\n      uniform float u_borderRadius;\n      uniform vec2 u_containerPosition;\n      uniform float u_warp;\n      uniform float u_edgeIntensity;\n      uniform float u_rimIntensity;\n      uniform float u_baseIntensity;\n      uniform float u_edgeDistance;\n      uniform float u_rimDistance;\n      uniform float u_baseDistance;\n      uniform float u_cornerBoost;\n      uniform float u_rippleEffect;\n      uniform float u_tintOpacity;\n      uniform float u_glassOpacity;\n    varying vec2 v_texcoord;\n\n      // Function to calculate distance from rounded rectangle edge\n      float roundedRectDistance(vec2 coord, vec2 size, float radius) {\n        vec2 center = size * 0.5;\n        vec2 pixelCoord = coord * size;\n        vec2 toCorner = abs(pixelCoord - center) - (center - radius);\n        float outsideCorner = length(max(toCorner, 0.0));\n        float insideCorner = min(max(toCorner.x, toCorner.y), 0.0);\n        return (outsideCorner + insideCorner - radius);\n      }\n      \n      // Function to calculate distance from circle edge (negative inside, positive outside)\n      float circleDistance(vec2 coord, vec2 size, float radius) {\n        vec2 center = vec2(0.5, 0.5);\n        vec2 pixelCoord = coord * size;\n        vec2 centerPixel = center * size;\n        float distFromCenter = length(pixelCoord - centerPixel);\n        return distFromCenter - radius;\n      }\n      \n      // Check if this is a pill (border radius is approximately 50% of height AND width > height)\n      bool isPill(vec2 size, float radius) {\n        float heightRatioDiff = abs(radius - size.y * 0.5);\n        bool radiusMatchesHeight = heightRatioDiff < 2.0;\n        bool isWiderThanTall = size.x > size.y + 4.0; // Must be significantly wider\n        return radiusMatchesHeight && isWiderThanTall;\n      }\n      \n      // Check if this is a circle (border radius is approximately 50% of smaller dimension AND roughly square)\n      bool isCircle(vec2 size, float radius) {\n        float minDim = min(size.x, size.y);\n        bool radiusMatchesMinDim = abs(radius - minDim * 0.5) < 1.0;\n        bool isRoughlySquare = abs(size.x - size.y) < 4.0; // Width and height are similar\n        return radiusMatchesMinDim && isRoughlySquare;\n      }\n      \n      // Function to calculate distance from pill edge (capsule shape)\n      float pillDistance(vec2 coord, vec2 size, float radius) {\n        vec2 center = size * 0.5;\n        vec2 pixelCoord = coord * size;\n        \n        // Proper capsule: line segment with radius\n        // The capsule axis runs horizontally from (radius, center.y) to (size.x - radius, center.y)\n        vec2 capsuleStart = vec2(radius, center.y);\n        vec2 capsuleEnd = vec2(size.x - radius, center.y);\n        \n        // Project point onto the capsule axis (line segment)\n        vec2 capsuleAxis = capsuleEnd - capsuleStart;\n        float capsuleLength = length(capsuleAxis);\n        \n        if (capsuleLength > 0.0) {\n          vec2 toPoint = pixelCoord - capsuleStart;\n          float t = clamp(dot(toPoint, capsuleAxis) / dot(capsuleAxis, capsuleAxis), 0.0, 1.0);\n          vec2 closestPointOnAxis = capsuleStart + t * capsuleAxis;\n          return length(pixelCoord - closestPointOnAxis) - radius;\n        } else {\n          // Degenerate case: just a circle\n          return length(pixelCoord - center) - radius;\n        }\n      }\n\n    void main() {\n        vec2 coord = v_texcoord;\n        \n        // Calculate which area of the page should be visible through the container\n        float scrollY = u_scrollY;\n        vec2 containerSize = u_resolution;\n        vec2 textureSize = u_textureSize;\n        \n        // Container position in viewport coordinates\n        vec2 containerCenter = u_containerPosition + vec2(0.0, scrollY);\n        \n        // Convert container coordinates to page coordinates\n        vec2 containerOffset = (coord - 0.5) * containerSize;\n        vec2 pagePixel = containerCenter + containerOffset;\n        \n        float scaleX = u_textureSize.x / max(u_pageWidth, 1.0);\n        float scaleY = u_textureSize.y / max(u_pageHeight, 1.0);\n        vec2 scaledPagePixel = vec2(pagePixel.x * scaleX, pagePixel.y * scaleY);\n        \n        // Convert to texture coordinate (0 to 1)\n        vec2 textureCoord = scaledPagePixel / textureSize;\n        textureCoord = clamp(textureCoord, vec2(0.0), vec2(1.0));\n        \n        // Glass refraction effects\n        float distFromEdgeShape;\n        vec2 shapeNormal; // Normal vector pointing away from shape surface\n        \n        if (isPill(u_resolution, u_borderRadius)) {\n          distFromEdgeShape = -pillDistance(coord, u_resolution, u_borderRadius);\n          \n          // Calculate normal for pill shape\n          vec2 center = vec2(0.5, 0.5);\n          vec2 pixelCoord = coord * u_resolution;\n          vec2 capsuleStart = vec2(u_borderRadius, center.y * u_resolution.y);\n          vec2 capsuleEnd = vec2(u_resolution.x - u_borderRadius, center.y * u_resolution.y);\n          vec2 capsuleAxis = capsuleEnd - capsuleStart;\n          float capsuleLength = length(capsuleAxis);\n          \n          if (capsuleLength > 0.0) {\n            vec2 toPoint = pixelCoord - capsuleStart;\n            float t = clamp(dot(toPoint, capsuleAxis) / dot(capsuleAxis, capsuleAxis), 0.0, 1.0);\n            vec2 closestPointOnAxis = capsuleStart + t * capsuleAxis;\n            vec2 normalDir = pixelCoord - closestPointOnAxis;\n            shapeNormal = length(normalDir) > 0.0 ? normalize(normalDir) : vec2(0.0, 1.0);\n          } else {\n            shapeNormal = normalize(coord - center);\n          }\n        } else if (isCircle(u_resolution, u_borderRadius)) {\n          distFromEdgeShape = -circleDistance(coord, u_resolution, u_borderRadius);\n          vec2 center = vec2(0.5, 0.5);\n          shapeNormal = normalize(coord - center);\n        } else {\n          distFromEdgeShape = -roundedRectDistance(coord, u_resolution, u_borderRadius);\n      vec2 center = vec2(0.5, 0.5);\n          shapeNormal = normalize(coord - center);\n        }\n        distFromEdgeShape = max(distFromEdgeShape, 0.0);\n        \n        float distFromLeft = coord.x;\n        float distFromRight = 1.0 - coord.x;\n        float distFromTop = coord.y;\n        float distFromBottom = 1.0 - coord.y;\n        float distFromEdge = distFromEdgeShape / min(u_resolution.x, u_resolution.y);\n        \n        // Smooth glass refraction using shape-aware normal\n        float normalizedDistance = distFromEdge * min(u_resolution.x, u_resolution.y);\n        float baseIntensity = 1.0 - exp(-normalizedDistance * u_baseDistance);\n        float edgeIntensity = exp(-normalizedDistance * u_edgeDistance);\n        float rimIntensity = exp(-normalizedDistance * u_rimDistance);\n        \n        // Apply center warping only if warp is enabled, keep edge and rim effects always\n        float baseComponent = u_warp > 0.5 ? baseIntensity * u_baseIntensity : 0.0;\n        float totalIntensity = baseComponent + edgeIntensity * u_edgeIntensity + rimIntensity * u_rimIntensity;\n        \n        vec2 baseRefraction = shapeNormal * totalIntensity;\n        \n        float cornerProximityX = min(distFromLeft, distFromRight);\n        float cornerProximityY = min(distFromTop, distFromBottom);\n        float cornerDistance = max(cornerProximityX, cornerProximityY);\n        float cornerNormalized = cornerDistance * min(u_resolution.x, u_resolution.y);\n        \n        float cornerBoost = exp(-cornerNormalized * 0.3) * u_cornerBoost;\n        vec2 cornerRefraction = shapeNormal * cornerBoost;\n        \n        vec2 perpendicular = vec2(-shapeNormal.y, shapeNormal.x);\n        float rippleEffect = sin(distFromEdge * 25.0) * u_rippleEffect * rimIntensity;\n        vec2 textureRefraction = perpendicular * rippleEffect;\n        \n        vec2 totalRefraction = baseRefraction + cornerRefraction + textureRefraction;\n        textureCoord += totalRefraction;\n        \n        // Gaussian blur\n        vec4 color = vec4(0.0);\n        vec2 texelSize = 1.0 / u_textureSize;\n        float sigma = u_blurRadius / 2.0;\n        vec2 blurStep = texelSize * sigma;\n        \n        float totalWeight = 0.0;\n        \n        for(float i = -6.0; i <= 6.0; i += 1.0) {\n          for(float j = -6.0; j <= 6.0; j += 1.0) {\n            float distance = length(vec2(i, j));\n            if(distance > 6.0) continue;\n            \n            float weight = exp(-(distance * distance) / (2.0 * sigma * sigma));\n            \n            vec2 offset = vec2(i, j) * blurStep;\n            color += texture2D(u_image, textureCoord + offset) * weight;\n            totalWeight += weight;\n          }\n        }\n        \n        color /= totalWeight;\n        \n        // Simple vertical gradient\n        float gradientPosition = coord.y;\n        vec3 topTint = vec3(1.0, 1.0, 1.0);\n        vec3 bottomTint = vec3(0.7, 0.7, 0.7);\n        vec3 gradientTint = mix(topTint, bottomTint, gradientPosition);\n        vec3 tintedColor = mix(color.rgb, gradientTint, u_tintOpacity);\n        color = vec4(tintedColor, color.a);\n        \n        // Sampled gradient\n        vec2 viewportCenter = containerCenter;\n        float topY = (viewportCenter.y - containerSize.y * 0.4) / textureSize.y;\n        float midY = viewportCenter.y / textureSize.y;\n        float bottomY = (viewportCenter.y + containerSize.y * 0.4) / textureSize.y;\n        \n        vec3 topColor = vec3(0.0);\n        vec3 midColor = vec3(0.0);\n        vec3 bottomColor = vec3(0.0);\n        \n        float sampleCount = 0.0;\n        for(float x = 0.0; x < 1.0; x += 0.05) {\n          for(float yOffset = -5.0; yOffset <= 5.0; yOffset += 1.0) {\n            vec2 topSample = vec2(x, topY + yOffset * texelSize.y);\n            vec2 midSample = vec2(x, midY + yOffset * texelSize.y);\n            vec2 bottomSample = vec2(x, bottomY + yOffset * texelSize.y);\n            \n            topColor += texture2D(u_image, topSample).rgb;\n            midColor += texture2D(u_image, midSample).rgb;\n            bottomColor += texture2D(u_image, bottomSample).rgb;\n            sampleCount += 1.0;\n          }\n        }\n        \n        topColor /= sampleCount;\n        midColor /= sampleCount;\n        bottomColor /= sampleCount;\n        \n        vec3 sampledGradient;\n        if (gradientPosition < 0.1) {\n          sampledGradient = topColor;\n        } else if (gradientPosition > 0.9) {\n          sampledGradient = bottomColor;\n        } else {\n          float transitionPos = (gradientPosition - 0.1) / 0.8;\n          if (transitionPos < 0.5) {\n            float t = transitionPos * 2.0;\n            sampledGradient = mix(topColor, midColor, t);\n          } else {\n            float t = (transitionPos - 0.5) * 2.0;\n            sampledGradient = mix(midColor, bottomColor, t);\n          }\n        }\n        \n        vec3 finalTinted = mix(color.rgb, sampledGradient, u_tintOpacity * 0.3);\n        color = vec4(finalTinted, color.a);\n        \n        // Shape mask (rounded rectangle, circle, or pill)\n        float maskDistance;\n        if (isPill(u_resolution, u_borderRadius)) {\n          maskDistance = pillDistance(coord, u_resolution, u_borderRadius);\n        } else if (isCircle(u_resolution, u_borderRadius)) {\n          maskDistance = circleDistance(coord, u_resolution, u_borderRadius);\n        } else {\n          maskDistance = roundedRectDistance(coord, u_resolution, u_borderRadius);\n        }\n        float mask = 1.0 - smoothstep(-1.0, 1.0, maskDistance);\n        \n        float opacity = clamp(u_glassOpacity, 0.02, 0.95);\n        gl_FragColor = vec4(color.rgb, mask * opacity);\n      }\n    ");if(!i)return;t.useProgram(i);const n=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,n);t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),t.STATIC_DRAW);const o=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,o);t.bufferData(t.ARRAY_BUFFER,new Float32Array([0,1,1,1,0,0,0,0,1,1,1,0]),t.STATIC_DRAW);const s=t.getAttribLocation(i,"a_position"),r=t.getAttribLocation(i,"a_texcoord"),a=t.getUniformLocation(i,"u_resolution"),l=t.getUniformLocation(i,"u_textureSize"),c=t.getUniformLocation(i,"u_scrollY"),d=t.getUniformLocation(i,"u_pageWidth"),u=t.getUniformLocation(i,"u_pageHeight"),f=t.getUniformLocation(i,"u_viewportHeight"),h=t.getUniformLocation(i,"u_blurRadius"),m=t.getUniformLocation(i,"u_borderRadius"),p=t.getUniformLocation(i,"u_containerPosition"),g=t.getUniformLocation(i,"u_warp"),y=t.getUniformLocation(i,"u_edgeIntensity"),v=t.getUniformLocation(i,"u_rimIntensity"),b=t.getUniformLocation(i,"u_baseIntensity"),w=t.getUniformLocation(i,"u_edgeDistance"),x=t.getUniformLocation(i,"u_rimDistance"),_=t.getUniformLocation(i,"u_baseDistance"),S=t.getUniformLocation(i,"u_cornerBoost"),R=t.getUniformLocation(i,"u_rippleEffect"),L=t.getUniformLocation(i,"u_tintOpacity"),C=t.getUniformLocation(i,"u_glassOpacity"),E=t.getUniformLocation(i,"u_image"),F=t.createTexture();t.bindTexture(t.TEXTURE_2D,F);t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE);t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE);this.gl_refs={gl:t,program:i,texture:F,textureSizeLoc:l,scrollYLoc:c,pageWidthLoc:d,positionLoc:s,texcoordLoc:r,resolutionLoc:a,pageHeightLoc:u,viewportHeightLoc:f,blurRadiusLoc:h,borderRadiusLoc:m,containerPositionLoc:p,warpLoc:g,edgeIntensityLoc:y,rimIntensityLoc:v,baseIntensityLoc:b,edgeDistanceLoc:w,rimDistanceLoc:x,baseDistanceLoc:_,cornerBoostLoc:S,rippleEffectLoc:R,tintOpacityLoc:L,glassOpacityLoc:C,imageLoc:E,positionBuffer:n,texcoordBuffer:o};t.viewport(0,0,this.canvas.width,this.canvas.height);t.clearColor(0,0,0,0);t.bindBuffer(t.ARRAY_BUFFER,n);t.enableVertexAttribArray(s);t.vertexAttribPointer(s,2,t.FLOAT,!1,0,0);t.bindBuffer(t.ARRAY_BUFFER,o);t.enableVertexAttribArray(r);t.vertexAttribPointer(r,2,t.FLOAT,!1,0,0);const A=this.width||Math.max(1,Math.round(this.canvas.width/this.dpr)),D=this.height||Math.max(1,Math.round(this.canvas.height/this.dpr));t.uniform2f(a,A,D);t.uniform2f(l,e.width,e.height);t.uniform1f(h,window.glassControls?.blurRadius||5);t.uniform1f(m,this.borderRadius);t.uniform1f(g,this.warp?1:0);t.uniform1f(y,window.glassControls?.edgeIntensity||.01);t.uniform1f(v,window.glassControls?.rimIntensity||.05);t.uniform1f(b,window.glassControls?.baseIntensity||.01);t.uniform1f(w,window.glassControls?.edgeDistance||.15);t.uniform1f(x,window.glassControls?.rimDistance||.8);t.uniform1f(_,window.glassControls?.baseDistance||.1);t.uniform1f(S,window.glassControls?.cornerBoost||.02);t.uniform1f(R,window.glassControls?.rippleEffect||.1);t.uniform1f(L,this.tintOpacity);t.uniform1f(C,window.glassControls?.glassOpacity??this.glassOpacity);const T=this.getPosition();t.uniform2f(p,T.x,T.y);const P=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth),W=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight),z=window.innerHeight;t.uniform1f(d,P);t.uniform1f(u,W);t.uniform1f(f,z);t.activeTexture(t.TEXTURE0);t.bindTexture(t.TEXTURE_2D,F);t.uniform1i(E,0);this.startRenderLoop()}startRenderLoop(){if(null!==this.animationFrameId){window.cancelAnimationFrame(this.animationFrameId);this.animationFrameId=null}const e=()=>{if(this.destroyed||!this.gl_refs.gl){this.animationFrameId=null;return}if(!this.element||!this.element.isConnected){this.destroy();return}const t=this.gl_refs.gl;t.clear(t.COLOR_BUFFER_BIT);const i=window.pageYOffset||document.documentElement.scrollTop;t.uniform1f(this.gl_refs.scrollYLoc,i);const n=this.getPosition();t.uniform2f(this.gl_refs.containerPositionLoc,n.x,n.y);const o=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth),s=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);t.uniform1f(this.gl_refs.pageWidthLoc,o);t.uniform1f(this.gl_refs.pageHeightLoc,s);t.uniform1f(this.gl_refs.viewportHeightLoc,window.innerHeight);t.drawArrays(t.TRIANGLES,0,6);this.animationFrameId=window.requestAnimationFrame(e)};e();this.render=e}createProgram(e,t,i){const n=this.compileShader(e,e.VERTEX_SHADER,t),o=this.compileShader(e,e.FRAGMENT_SHADER,i);if(!n||!o)return null;const s=e.createProgram();e.attachShader(s,n);e.attachShader(s,o);e.linkProgram(s);if(!e.getProgramParameter(s,e.LINK_STATUS)){console.error("Program link error:",e.getProgramInfoLog(s));return null}return s}compileShader(e,t,i){const n=e.createShader(t);e.shaderSource(n,i);e.compileShader(n);if(!e.getShaderParameter(n,e.COMPILE_STATUS)){console.error("Shader compile error:",e.getShaderInfoLog(n));return null}return n}destroy(){if(!this.destroyed){this.destroyed=!0;if(null!==this.animationFrameId){window.cancelAnimationFrame(this.animationFrameId);this.animationFrameId=null}this.children.forEach(e=>{if("function"==typeof e.stopNestedAnimation)e.stopNestedAnimation()});if(this.gl_refs.gl){const e=this.gl_refs.gl;if(this.gl_refs.texture)e.deleteTexture(this.gl_refs.texture);if(this.gl_refs.positionBuffer)e.deleteBuffer(this.gl_refs.positionBuffer);if(this.gl_refs.texcoordBuffer)e.deleteBuffer(this.gl_refs.texcoordBuffer);if(this.gl_refs.program)e.deleteProgram(this.gl_refs.program)}this.gl_refs={};this.webglInitialized=!1;e.waitingForSnapshot=e.waitingForSnapshot.filter(e=>e!==this);e.instances=e.instances.filter(e=>e!==this);if(!e.instances.length){e.teardownGlobalObservers();e.pageSnapshot=null;e.pageSnapshotScale=1;e.isCapturing=!1;e.pendingForceRefresh=!1}}}static teardownGlobalObservers(){if(e.globalListenersSetup)if("undefined"!=typeof window&&"undefined"!=typeof document){if(e.refreshTimer){window.clearTimeout(e.refreshTimer);e.refreshTimer=null}if(e.mutationObserver){e.mutationObserver.disconnect();e.mutationObserver=null}window.removeEventListener("resize",e.handleWindowRefresh);window.removeEventListener("orientationchange",e.handleWindowRefresh);window.removeEventListener("focus",e.handleWindowRefresh);window.removeEventListener("pageshow",e.handleWindowRefresh);document.removeEventListener("visibilitychange",e.handleVisibilityRefresh);e.globalListenersSetup=!1}else e.globalListenersSetup=!1}}if("undefined"!=typeof window){e.settings=e.loadSettings();window.Container=e}

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

@@ -10,11 +10,14 @@ class Container {
   static pendingForceRefresh = false;
   static settingsKey = "pwtk_glass_settings_v1";
   static defaultSettings = {
-    enableWebGL: true,
-    autoRefresh: false,
+    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();
@@ -23,6 +26,21 @@ class Container {
       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 };
@@ -153,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;
@@ -163,6 +183,7 @@ class Container {
     this.webglInitialized = false;
     this.children = [];
     this.animationFrameId = null;
+    this.destroyed = false;
     Container.instances.push(this);
     Container.ensureGlobalObservers();
     this.init();
@@ -192,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);
@@ -207,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);
         }
@@ -224,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);
             }
@@ -276,6 +302,7 @@ class Container {
     this.gl = this.canvas.getContext("webgl", { preserveDrawingBuffer: true });
     if (!this.gl) {
       console.error("WebGL not supported");
+      this.applyFallbackStyles();
       return;
     }
   }
@@ -331,16 +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");
@@ -355,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) {
@@ -375,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;
@@ -564,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;
@@ -579,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
@@ -656,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;
@@ -816,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);
@@ -833,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");
@@ -848,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);
@@ -858,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,
@@ -879,6 +943,7 @@ class Container {
       cornerBoostLoc,
       rippleEffectLoc,
       tintOpacityLoc,
+      glassOpacityLoc,
       imageLoc,
       positionBuffer,
       texcoordBuffer
@@ -891,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);
@@ -905,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);
@@ -922,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);
     };
@@ -962,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();