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

package/dist/button-CbMfuNRL.js

@@ -0,0 +1 @@
+"use strict";class e extends Container{constructor(e={}){const t=e.text||"Button",i=parseInt(e.size)||48,n=e.onClick||null,o=e.type||"rounded",s=void 0!==e.warp?e.warp:!1;super({borderRadius:i,type:o,tintOpacity:void 0!==e.tintOpacity?e.tintOpacity:.2});this.text=t;this.fontSize=i;this.onClick=n;this.type=o;this.warp=s;this.parent=null;this.isNestedGlass=!1;this.element.classList.add("glass-button");if("circle"===this.type)this.element.classList.add("glass-button-circle");this.createTextElement();this.setupClickHandler();this.setSizeFromText()}setSizeFromText(){let t,i;if("circle"===this.type){const e=2.5*this.fontSize;t=e;i=e;this.borderRadius=e/2;this.element.style.width=t+"px";this.element.style.height=i+"px";this.element.style.minWidth=t+"px";this.element.style.minHeight=i+"px";this.element.style.maxWidth=t+"px";this.element.style.maxHeight=i+"px"}else if("pill"===this.type){const n=e.measureText(this.text,this.fontSize);t=Math.ceil(n.width+2*this.fontSize);i=Math.ceil(this.fontSize+1.2*this.fontSize);this.borderRadius=i/2;this.element.style.minWidth=t+"px";this.element.style.minHeight=i+"px"}else{const n=e.measureText(this.text,this.fontSize);t=Math.ceil(n.width+2*this.fontSize);i=Math.ceil(this.fontSize+1.5*this.fontSize);this.borderRadius=this.fontSize;this.element.style.minWidth=t+"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=t;this.height=i;if(this.canvas){this.canvas.width=t;this.canvas.height=i;this.canvas.style.width=t+"px";this.canvas.style.height=i+"px";if(this.gl_refs.gl){this.gl_refs.gl.viewport(0,0,t,i);this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc,t,i);this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc,this.borderRadius)}}}else if("pill"===this.type){this.width=t;this.height=i;this.element.style.width=t+"px";this.element.style.height=i+"px";this.element.style.maxWidth=t+"px";this.element.style.maxHeight=i+"px";if(this.canvas){this.canvas.width=t;this.canvas.height=i;this.canvas.style.width=t+"px";this.canvas.style.height=i+"px";if(this.gl_refs.gl){this.gl_refs.gl.viewport(0,0,t,i);this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc,t,i);this.gl_refs.gl.uniform1f(this.gl_refs.borderRadiusLoc,this.borderRadius)}}}else this.updateSizeFromDOM()}setupAsNestedGlass(){if(this.parent&&!this.isNestedGlass){this.isNestedGlass=!0;if(this.webglInitialized)this.initWebGL()}}static measureText(e,t){const i=document.createElement("canvas").getContext("2d");i.font=`${t}px system-ui, -apple-system, sans-serif`;return i.measureText(e)}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",e=>{e.preventDefault();this.onClick(this.text)})}initWebGL(){if(Container.pageSnapshot&&this.gl)if(this.parent&&this.isNestedGlass)this.initNestedGlass();else super.initWebGL()}applySnapshot(e){if(!this.parent||!this.isNestedGlass)super.applySnapshot(e)}initNestedGlass(){if(this.parent.webglInitialized){this.setupDynamicNestedShader();this.webglInitialized=!0}else setTimeout(()=>this.initNestedGlass(),100)}setupDynamicNestedShader(){const e=this.gl,t=this.createProgram(e,"\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      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 / containerSize;\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        \n        gl_FragColor = vec4(finalTinted, mask);\n      }\n    ");if(!t)return;e.useProgram(t);const i=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,i);e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),e.STATIC_DRAW);const n=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,n);e.bufferData(e.ARRAY_BUFFER,new Float32Array([0,1,1,1,0,0,0,0,1,1,1,0]),e.STATIC_DRAW);const o=e.getAttribLocation(t,"a_position"),s=e.getAttribLocation(t,"a_texcoord"),r=e.getUniformLocation(t,"u_resolution"),a=e.getUniformLocation(t,"u_textureSize"),l=e.getUniformLocation(t,"u_blurRadius"),c=e.getUniformLocation(t,"u_borderRadius"),u=e.getUniformLocation(t,"u_buttonPosition"),d=e.getUniformLocation(t,"u_containerPosition"),f=e.getUniformLocation(t,"u_containerSize"),m=e.getUniformLocation(t,"u_warp"),h=e.getUniformLocation(t,"u_edgeIntensity"),p=e.getUniformLocation(t,"u_rimIntensity"),g=e.getUniformLocation(t,"u_baseIntensity"),x=e.getUniformLocation(t,"u_edgeDistance"),_=e.getUniformLocation(t,"u_rimDistance"),v=e.getUniformLocation(t,"u_baseDistance"),b=e.getUniformLocation(t,"u_cornerBoost"),y=e.getUniformLocation(t,"u_rippleEffect"),R=e.getUniformLocation(t,"u_tintOpacity"),T=e.getUniformLocation(t,"u_image"),E=e.createTexture();e.bindTexture(e.TEXTURE_2D,E);const C=this.parent.canvas;e.texImage2D(e.TEXTURE_2D,0,e.RGBA,C.width,C.height,0,e.RGBA,e.UNSIGNED_BYTE,null);e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR);e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR);e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE);e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE);this.gl_refs={gl:e,texture:E,textureSizeLoc:a,positionLoc:o,texcoordLoc:s,resolutionLoc:r,blurRadiusLoc:l,borderRadiusLoc:c,buttonPositionLoc:u,containerPositionLoc:d,containerSizeLoc:f,warpLoc:m,edgeIntensityLoc:h,rimIntensityLoc:p,baseIntensityLoc:g,edgeDistanceLoc:x,rimDistanceLoc:_,baseDistanceLoc:v,cornerBoostLoc:b,rippleEffectLoc:y,tintOpacityLoc:R,imageLoc:T,positionBuffer:i,texcoordBuffer:n};e.viewport(0,0,this.canvas.width,this.canvas.height);e.clearColor(0,0,0,0);e.bindBuffer(e.ARRAY_BUFFER,i);e.enableVertexAttribArray(o);e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0);e.bindBuffer(e.ARRAY_BUFFER,n);e.enableVertexAttribArray(s);e.vertexAttribPointer(s,2,e.FLOAT,!1,0,0);e.uniform2f(r,this.canvas.width,this.canvas.height);e.uniform2f(a,C.width,C.height);e.uniform1f(l,window.glassControls?.blurRadius||2);e.uniform1f(c,this.borderRadius);e.uniform1f(m,this.warp?1:0);e.uniform1f(h,window.glassControls?.edgeIntensity||.01);e.uniform1f(p,window.glassControls?.rimIntensity||.05);e.uniform1f(g,window.glassControls?.baseIntensity||.01);e.uniform1f(x,window.glassControls?.edgeDistance||.15);e.uniform1f(_,window.glassControls?.rimDistance||.8);e.uniform1f(v,window.glassControls?.baseDistance||.1);e.uniform1f(b,window.glassControls?.cornerBoost||.02);e.uniform1f(y,window.glassControls?.rippleEffect||.1);e.uniform1f(R,this.tintOpacity);const L=this.getPosition(),S=this.parent.getPosition();e.uniform2f(u,L.x,L.y);e.uniform2f(d,S.x,S.y);e.uniform2f(f,this.parent.width,this.parent.height);e.activeTexture(e.TEXTURE0);e.bindTexture(e.TEXTURE_2D,E);e.uniform1i(T,0);this.startNestedRenderLoop()}startNestedRenderLoop(){const e=()=>{if(!this.gl_refs.gl||!this.parent)return;const e=this.gl_refs.gl,t=this.parent.canvas;e.bindTexture(e.TEXTURE_2D,this.gl_refs.texture);e.texSubImage2D(e.TEXTURE_2D,0,0,0,e.RGBA,e.UNSIGNED_BYTE,t);e.clear(e.COLOR_BUFFER_BIT);const i=this.getPosition(),n=this.parent.getPosition();e.uniform2f(this.gl_refs.buttonPositionLoc,i.x,i.y);e.uniform2f(this.gl_refs.containerPositionLoc,n.x,n.y);e.drawArrays(e.TRIANGLES,0,6)},t=()=>{e();requestAnimationFrame(t)};t();this.render=e}}if("undefined"!=typeof window)window.Button=e;

package/dist/{button-DfB5OFDC.mjs → button-Dt1KsQb6.mjs}

@@ -132,6 +132,12 @@ class Button extends Container {
       super.initWebGL();
     }
   }
+  applySnapshot(snapshotCanvas) {
+    if (this.parent && this.isNestedGlass) {
+      return;
+    }
+    super.applySnapshot(snapshotCanvas);
+  }
   initNestedGlass() {
     if (!this.parent.webglInitialized) {
       setTimeout(() => this.initNestedGlass(), 100);

package/dist/{container-DZOQFeJd.mjs → container-BiE06oNd.mjs}

@@ -3,6 +3,17 @@ class Container {
   static pageSnapshot = null;
   static isCapturing = false;
   static waitingForSnapshot = [];
+  static mutationObserver = null;
+  static globalListenersSetup = false;
+  static domReadyListenerAttached = false;
+  static refreshTimer = null;
+  static pendingForceRefresh = false;
+  static handleWindowRefresh = () => Container.scheduleSnapshotRefresh();
+  static handleVisibilityRefresh = () => {
+    if (typeof document !== "undefined" && !document.hidden) {
+      Container.scheduleSnapshotRefresh();
+    }
+  };
   constructor(options = {}) {
     this.width = 0;
     this.height = 0;
@@ -16,6 +27,7 @@ class Container {
     this.webglInitialized = false;
     this.children = [];
     Container.instances.push(this);
+    Container.ensureGlobalObservers();
     this.init();
   }
   addChild(child) {
@@ -135,6 +147,14 @@ class Container {
   }
   capturePageSnapshot() {
     console.log("Capturing page snapshot...");
+    const html2canvas = window.html2canvas;
+    if (!html2canvas) {
+      console.error("[PWTK] html2canvas not available, containers will not initialize");
+      Container.isCapturing = false;
+      Container.waitingForSnapshot = [];
+      return;
+    }
+    const targets = Container.drainWaitingQueue();
     html2canvas(document.body, {
       scale: 1,
       useCORS: true,
@@ -147,27 +167,141 @@ class Container {
       console.log("Page snapshot captured");
       Container.pageSnapshot = snapshot;
       Container.isCapturing = false;
-      const waitingContainers = Container.waitingForSnapshot.slice();
-      Container.waitingForSnapshot = [];
-      waitingContainers.forEach((container) => {
-        if (!container.webglInitialized) {
-          container.initWebGL();
-        }
+      const uniqueTargets = Container.toUniqueList(targets);
+      uniqueTargets.forEach((container) => {
+        container.initWebGL();
       });
     }).catch((error) => {
-      console.error("html2canvas error:", error);
+      console.error("[PWTK] html2canvas error:", error);
       Container.isCapturing = false;
       Container.waitingForSnapshot = [];
+    }).finally(() => {
+      Container.isCapturing = false;
+      if (Container.pendingForceRefresh || Container.waitingForSnapshot.length > 0) {
+        const shouldForce = Container.pendingForceRefresh;
+        Container.pendingForceRefresh = false;
+        Container.refreshAll(shouldForce);
+      }
     });
   }
   initWebGL() {
     if (!Container.pageSnapshot || !this.gl) return;
-    const img = new Image();
-    img.src = Container.pageSnapshot.toDataURL();
-    img.onload = () => {
-      this.setupShader(img);
+    this.applySnapshot(Container.pageSnapshot);
+  }
+  applySnapshot(snapshotCanvas) {
+    if (!snapshotCanvas || !this.gl) return;
+    if (!this.webglInitialized) {
+      this.setupShader(snapshotCanvas);
       this.webglInitialized = true;
-    };
+      return;
+    }
+    const gl = this.gl_refs.gl;
+    if (!gl || !this.gl_refs.texture) {
+      return;
+    }
+    gl.bindTexture(gl.TEXTURE_2D, this.gl_refs.texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, snapshotCanvas);
+    if (this.gl_refs.textureSizeLoc) {
+      gl.uniform2f(this.gl_refs.textureSizeLoc, snapshotCanvas.width, snapshotCanvas.height);
+    }
+  }
+  static drainWaitingQueue() {
+    const targets = Container.waitingForSnapshot.slice();
+    Container.waitingForSnapshot = [];
+    return targets;
+  }
+  static toUniqueList(items) {
+    return Array.from(new Set(items.filter(Boolean)));
+  }
+  static refreshAll(force = false) {
+    if (typeof window === "undefined") return;
+    if (!Container.instances.length) return;
+    Container.instances.forEach((instance) => {
+      if (typeof Button !== "undefined" && instance instanceof Button && instance.isNestedGlass) {
+        return;
+      }
+      if (!Container.waitingForSnapshot.includes(instance)) {
+        Container.waitingForSnapshot.push(instance);
+      }
+    });
+    if (Container.isCapturing) {
+      Container.pendingForceRefresh = Container.pendingForceRefresh || force || false;
+      return;
+    }
+    const entry = Container.instances[0];
+    if (!entry) return;
+    Container.isCapturing = true;
+    entry.capturePageSnapshot(force);
+  }
+  static scheduleSnapshotRefresh() {
+    if (typeof window === "undefined") return;
+    if (!Container.instances.length) return;
+    if (Container.isCapturing) {
+      Container.pendingForceRefresh = true;
+      return;
+    }
+    if (Container.refreshTimer) {
+      window.clearTimeout(Container.refreshTimer);
+    }
+    Container.refreshTimer = window.setTimeout(() => {
+      Container.refreshTimer = null;
+      Container.refreshAll(true);
+    }, 200);
+  }
+  static ensureGlobalObservers() {
+    if (typeof window === "undefined" || typeof document === "undefined" || Container.globalListenersSetup) {
+      return;
+    }
+    if (!document.body) {
+      if (!Container.domReadyListenerAttached) {
+        Container.domReadyListenerAttached = true;
+        document.addEventListener(
+          "DOMContentLoaded",
+          () => {
+            Container.domReadyListenerAttached = false;
+            Container.ensureGlobalObservers();
+          },
+          { once: true }
+        );
+      }
+      return;
+    }
+    Container.globalListenersSetup = true;
+    Container.setupMutationObserver();
+    window.addEventListener("resize", Container.handleWindowRefresh);
+    window.addEventListener("orientationchange", Container.handleWindowRefresh);
+    window.addEventListener("focus", Container.handleWindowRefresh);
+    window.addEventListener("pageshow", Container.handleWindowRefresh);
+    document.addEventListener("visibilitychange", Container.handleVisibilityRefresh);
+  }
+  static setupMutationObserver() {
+    if (Container.mutationObserver || typeof MutationObserver === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const observer = new MutationObserver((mutations) => {
+      const shouldRefresh = mutations.some((mutation) => {
+        const target = mutation.target;
+        return !Container.isMutationInsideGlass(target);
+      });
+      if (shouldRefresh) {
+        Container.scheduleSnapshotRefresh();
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true
+    });
+    Container.mutationObserver = observer;
+  }
+  static isMutationInsideGlass(node) {
+    if (!node || typeof node !== "object" || typeof node.nodeType !== "number") {
+      return false;
+    }
+    return Container.instances.some((instance) => {
+      return instance.element && instance.element.contains(node);
+    });
   }
   setupShader(image) {
     const gl = this.gl;

package/dist/container-C5VYurOl.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 handleWindowRefresh=()=>e.scheduleSnapshotRefresh();static handleVisibilityRefresh=()=>{if("undefined"!=typeof document&&!document.hidden)e.scheduleSnapshotRefresh()};constructor(t={}){this.width=0;this.height=0;this.borderRadius=t.borderRadius||48;this.type=t.type||"rounded";this.tintOpacity=void 0!==t.tintOpacity?t.tintOpacity:.2;this.canvas=null;this.element=null;this.gl=null;this.gl_refs={};this.webglInitialized=!1;this.children=[];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(()=>{const e=this.element.getBoundingClientRect();let t=Math.ceil(e.width),n=Math.ceil(e.height);if("circle"===this.type){const e=Math.max(t,n);t=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"}if(t!==this.width||n!==this.height){this.width=t;this.height=n;this.canvas.width=t;this.canvas.height=n;this.canvas.style.width=t+"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,t,n);this.gl_refs.gl.uniform2f(this.gl_refs.resolutionLoc,t,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 i=e.gl_refs.gl;i.bindTexture(i.TEXTURE_2D,e.gl_refs.texture);i.texImage2D(i.TEXTURE_2D,0,i.RGBA,t,n,0,i.RGBA,i.UNSIGNED_BYTE,null);i.uniform2f(e.gl_refs.textureSizeLoc,t,n);if(e.gl_refs.containerSizeLoc)i.uniform2f(e.gl_refs.containerSizeLoc,t,n)}})}})}init(){this.createElement();this.setupCanvas();this.updateSizeFromDOM();if(e.pageSnapshot)this.initWebGL();else if(e.isCapturing)e.waitingForSnapshot.push(this);else{e.isCapturing=!0;e.waitingForSnapshot.push(this);this.capturePageSnapshot()}}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")}getPosition(){const e=this.canvas.getBoundingClientRect();return{x:e.left+e.width/2,y:e.top+e.height/2}}capturePageSnapshot(){console.log("Capturing page snapshot...");const t=window.html2canvas;if(!t){console.error("[PWTK] html2canvas not available, containers will not initialize");e.isCapturing=!1;e.waitingForSnapshot=[];return}const n=e.drainWaitingQueue();t(document.body,{scale:1,useCORS:!0,allowTaint:!0,backgroundColor:null,ignoreElements:function(e){return e.classList.contains("glass-container")||e.classList.contains("glass-button")||e.classList.contains("glass-button-text")}}).then(t=>{console.log("Page snapshot captured");e.pageSnapshot=t;e.isCapturing=!1;e.toUniqueList(n).forEach(e=>{e.initWebGL()})}).catch(t=>{console.error("[PWTK] html2canvas error:",t);e.isCapturing=!1;e.waitingForSnapshot=[]}).finally(()=>{e.isCapturing=!1;if(e.pendingForceRefresh||e.waitingForSnapshot.length>0){const t=e.pendingForceRefresh;e.pendingForceRefresh=!1;e.refreshAll(t)}})}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;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 refreshAll(t=!1){if("undefined"==typeof window)return;if(!e.instances.length)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 n=e.instances[0];if(n){e.isCapturing=!0;n.capturePageSnapshot(t)}}static scheduleSnapshotRefresh(){if("undefined"!=typeof window)if(e.instances.length)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.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)}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=>{const n=t.target;return!e.isMutationInsideGlass(n)}))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))}setupShader(e){const t=this.gl,n=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_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    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        // Convert to texture coordinate (0 to 1)\n        vec2 textureCoord = pagePixel / textureSize;\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        gl_FragColor = vec4(color.rgb, mask);\n      }\n    ");if(!n)return;t.useProgram(n);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 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 r=t.getAttribLocation(n,"a_position"),s=t.getAttribLocation(n,"a_texcoord"),a=t.getUniformLocation(n,"u_resolution"),l=t.getUniformLocation(n,"u_textureSize"),c=t.getUniformLocation(n,"u_scrollY"),u=t.getUniformLocation(n,"u_pageHeight"),d=t.getUniformLocation(n,"u_viewportHeight"),f=t.getUniformLocation(n,"u_blurRadius"),h=t.getUniformLocation(n,"u_borderRadius"),m=t.getUniformLocation(n,"u_containerPosition"),p=t.getUniformLocation(n,"u_warp"),g=t.getUniformLocation(n,"u_edgeIntensity"),v=t.getUniformLocation(n,"u_rimIntensity"),_=t.getUniformLocation(n,"u_baseIntensity"),b=t.getUniformLocation(n,"u_edgeDistance"),x=t.getUniformLocation(n,"u_rimDistance"),y=t.getUniformLocation(n,"u_baseDistance"),R=t.getUniformLocation(n,"u_cornerBoost"),w=t.getUniformLocation(n,"u_rippleEffect"),S=t.getUniformLocation(n,"u_tintOpacity"),C=t.getUniformLocation(n,"u_image"),L=t.createTexture();t.bindTexture(t.TEXTURE_2D,L);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,texture:L,textureSizeLoc:l,scrollYLoc:c,positionLoc:r,texcoordLoc:s,resolutionLoc:a,pageHeightLoc:u,viewportHeightLoc:d,blurRadiusLoc:f,borderRadiusLoc:h,containerPositionLoc:m,warpLoc:p,edgeIntensityLoc:g,rimIntensityLoc:v,baseIntensityLoc:_,edgeDistanceLoc:b,rimDistanceLoc:x,baseDistanceLoc:y,cornerBoostLoc:R,rippleEffectLoc:w,tintOpacityLoc:S,imageLoc:C,positionBuffer:i,texcoordBuffer:o};t.viewport(0,0,this.canvas.width,this.canvas.height);t.clearColor(0,0,0,0);t.bindBuffer(t.ARRAY_BUFFER,i);t.enableVertexAttribArray(r);t.vertexAttribPointer(r,2,t.FLOAT,!1,0,0);t.bindBuffer(t.ARRAY_BUFFER,o);t.enableVertexAttribArray(s);t.vertexAttribPointer(s,2,t.FLOAT,!1,0,0);t.uniform2f(a,this.canvas.width,this.canvas.height);t.uniform2f(l,e.width,e.height);t.uniform1f(f,window.glassControls?.blurRadius||5);t.uniform1f(h,this.borderRadius);t.uniform1f(p,this.warp?1:0);t.uniform1f(g,window.glassControls?.edgeIntensity||.01);t.uniform1f(v,window.glassControls?.rimIntensity||.05);t.uniform1f(_,window.glassControls?.baseIntensity||.01);t.uniform1f(b,window.glassControls?.edgeDistance||.15);t.uniform1f(x,window.glassControls?.rimDistance||.8);t.uniform1f(y,window.glassControls?.baseDistance||.1);t.uniform1f(R,window.glassControls?.cornerBoost||.02);t.uniform1f(w,window.glassControls?.rippleEffect||.1);t.uniform1f(S,this.tintOpacity);const E=this.getPosition();t.uniform2f(m,E.x,E.y);const T=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight),D=window.innerHeight;t.uniform1f(u,T);t.uniform1f(d,D);t.activeTexture(t.TEXTURE0);t.bindTexture(t.TEXTURE_2D,L);t.uniform1i(C,0);this.startRenderLoop()}startRenderLoop(){const e=()=>{if(!this.gl_refs.gl)return;const e=this.gl_refs.gl;e.clear(e.COLOR_BUFFER_BIT);const t=window.pageYOffset||document.documentElement.scrollTop;e.uniform1f(this.gl_refs.scrollYLoc,t);const n=this.getPosition();e.uniform2f(this.gl_refs.containerPositionLoc,n.x,n.y);e.drawArrays(e.TRIANGLES,0,6)};e();window.addEventListener("scroll",()=>e(),{passive:!0});this.render=e}createProgram(e,t,n){const i=this.compileShader(e,e.VERTEX_SHADER,t),o=this.compileShader(e,e.FRAGMENT_SHADER,n);if(!i||!o)return null;const r=e.createProgram();e.attachShader(r,i);e.attachShader(r,o);e.linkProgram(r);if(!e.getProgramParameter(r,e.LINK_STATUS)){console.error("Program link error:",e.getProgramInfoLog(r));return null}return r}compileShader(e,t,n){const i=e.createShader(t);e.shaderSource(i,n);e.compileShader(i);if(!e.getShaderParameter(i,e.COMPILE_STATUS)){console.error("Shader compile error:",e.getShaderInfoLog(i));return null}return i}}if("undefined"!=typeof window)window.Container=e;