lumiglass 1.1.1 → 1.2.0

package/js/glass-liquid-engine.js

@@ -1,673 +1,652 @@
-var LiquidGlassEngine = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
-  };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-    }
-    return to;
+/* ============================================================
+   Lumi Glass · glass-liquid-engine.js  (自研实现)
+   ------------------------------------------------------------
+   本文件为完全自研的 WebGL 液态玻璃渲染引擎，不包含任何第三方代码。
+   对外契约：
+     window.LiquidGlassEngine = { LiquidGlass, default }
+     new LiquidGlass(canvas, opts)
+       opts: { refraction, dispersion, frost, bezel, mergeK, rim, mode, liquid }
+     实例: .failed / .scan(root) / .set(opts) / .setSource(src,{live}) / .destroy()
+     静态: LiquidGlass.PRESETS
+   DOM 契约（与 glass-webgl.js 的标记约定一致）：
+     [data-glass=preset] [data-frost] [data-tint] [data-layer] [data-grow] [data-merge]
+     [data-glass-solid]（v2 仅收集不动样式，solid 仍由 DOM 自绘）
+   渲染思路（自研）：
+     1. 壁纸 canvas 作为纹理上传；CPU 侧 drawImage+filter 生成 1/4 分辨率模糊图
+     2. 片元着色器对每个玻璃形状求圆角矩形 SDF，min / 平滑并集合成场
+     3. 场梯度作折射法线：近边缘按指数衰减位移采样背景，RGB 三通道位移量
+        不同产生色散；霜化 = 锐利图与模糊图按形状 frost 插值
+     4. 边缘高光：SDF 等值带 × (法线·光向)，暗色模式换冷色并减半
+     5. 两层合成：layer0（面板）先压在壁纸上，layer1（控件）再压在其上
+     6. 滚动帧零 DOM 读取：元素位置缓存文档坐标，滚动帧纯算术平移
+   已知限制（相对 v1）：
+     - data-glass-solid 不入 shader 折射，仍由 DOM 自绘（视觉差异极小）
+     - 无按压弹簧/形变动画（liquid 参数暂未消费）
+   ============================================================ */
+(function () {
+  'use strict';
+
+  var MAXG = 48;
+
+  /* 形状预设。键名与 data-glass 值对应，数值为自研调校。 */
+  var PRESETS = {
+    button: { grow: 0.14, frost: 0.15, tint: 0, merge: 0, layer: 0 },
+    bar:    { grow: 0.03, frost: 0.45, tint: 0, merge: 0, layer: 0 },
+    card:   { grow: 0,    frost: 1,    tint: 0.2, merge: 0, layer: 0 },
+    sheet:  { grow: 0,    frost: 1,    tint: 0.28, merge: 1, layer: 0 },
+    knob:   { grow: 0.22, frost: 0.06, tint: 0, merge: 0, layer: 1 },
+    blob:   { grow: 0.1,  frost: 0.1,  tint: 0, merge: 1, layer: 0 }
   };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-  // engine.ts
-  var engine_exports = {};
-  __export(engine_exports, {
-    LiquidGlass: () => LiquidGlass,
-    default: () => engine_default
-  });
-
-  // budget.ts
-  function selectShapes(cands, max) {
-    const byId = new Map(cands.map((c) => [c.id, c]));
-    const depth = (c) => {
-      let d = 0;
-      for (let p = c.parent; p !== null && byId.has(p); p = byId.get(p).parent) d++;
-      return d;
-    };
-    const enriched = cands.map((c) => ({ c, d: depth(c) })).filter((x) => x.d <= 1);
-    const out = /* @__PURE__ */ new Map();
-    const reserveChild = Math.min(14, Math.floor(max * 0.45));
-    const cap0 = Math.max(6, max - reserveChild);
-    const d0 = enriched.filter((x) => x.d === 0).sort((a, b) => (b.c.knob || 0) - (a.c.knob || 0) || b.c.area - a.c.area);
-    for (const { c, d } of d0) {
-      if (out.size >= cap0) break;
-      out.set(c.id, d);
-    }
-    const d1 = enriched.filter((x) => x.d === 1 && out.has(x.c.parent)).sort((a, b) => (b.c.knob || 0) - (a.c.knob || 0) || b.c.area - a.c.area);
-    for (const { c, d } of d1) {
-      if (out.size >= max) break;
-      out.set(c.id, d);
-    }
-    for (const { c, d } of d0) {
-      if (out.size >= max) break;
-      if (out.has(c.id)) continue;
-      out.set(c.id, d);
-    }
-    return out;
+
+  var VS =
+    'attribute vec2 p;varying vec2 vUv;' +
+    'void main(){vUv=vec2(p.x*.5+.5,.5-p.y*.5);gl_Position=vec4(p,0.,1.);}';
+
+  var FS = [
+    'precision highp float;',
+    '#define MAXG ' + MAXG,
+    'varying vec2 vUv;',
+    'uniform sampler2D uTex;',   // 壁纸原图
+    'uniform sampler2D uBlur;',  // 壁纸模糊图
+    'uniform vec2 uRes;',        // 画布 CSS 尺寸
+    'uniform vec4 uFit;',        // 纹理 UV = vUv * uFit.xy + uFit.zw
+    'uniform vec4 uG[' + MAXG + '];', // cx, cy, hw, hh（px，y 向下）
+    'uniform vec4 uA[' + MAXG + '];', // radius, layer, frost, tintAmt
+    'uniform vec4 uB[' + MAXG + '];', // merge, tintR, tintG, tintB
+    'uniform int uGN;',
+    'uniform float uBezel;',
+    'uniform float uStrength;',
+    'uniform float uDisp;',
+    'uniform float uMergeK;',
+    'uniform float uDark;',
+    'uniform float uRim;',
+    'uniform vec2 uPtr;',      // 指针位置（画布 px）
+    'uniform float uPtrOn;',   // 指针是否在页面上
+
+    /* 圆角矩形 SDF（经典公式，公有数学） */
+    'float sdRR(vec2 p, vec2 h, float r){',
+    '  r = min(r, min(h.x, h.y));',
+    '  vec2 q = abs(p) - h + r;',
+    '  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;',
+    '}',
+
+    /* SDF 解析梯度：指向最近表面的单位向量 */
+    'vec2 sdGrad(vec2 pw, vec2 h, float r){',
+    '  r = min(r, min(h.x, h.y));',
+    '  vec2 q = abs(pw) - h + r;',
+    '  vec2 s = vec2(pw.x >= 0.0 ? 1.0 : -1.0, pw.y >= 0.0 ? 1.0 : -1.0);',
+    '  if (q.x > 0.0 && q.y > 0.0) return normalize(max(q, 0.0) * s);',
+    '  if (q.x > 0.0) return vec2(s.x, 0.0);',
+    '  if (q.y > 0.0) return vec2(0.0, s.y);',
+    '  return (q.x > q.y) ? vec2(s.x, 0.0) : vec2(0.0, s.y);',
+    '}',
+
+    /* 多项式平滑并集（公有数学） */
+    'float smin(float a, float b, float k){',
+    '  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);',
+    '  return mix(b, a, h) - k * h * (1.0 - h);',
+    '}',
+
+    /* 场求值：返回带符号距离；带出最近形状的 frost/tint 与法线。
+       merge 形状彼此平滑并集（距离小于 uMergeK 时），其余取硬 min。
+       同时带出指针在该形状边框上的最近点 ptrPt 与该形状的指针接近度 ptrK，
+       供 surf() 在边框上画跟随光。 */
+    'float field(vec2 p, float layer, out vec2 grad, out float frost, out vec3 tintC, out float tintA,',
+    '            out vec2 ptrPt, out float ptrK, out float ptrR){',
+    '  float dHard = 1e4; float dMerge = 1e4;',
+    '  vec2 gHard = vec2(0.0); vec2 gMerge = vec2(0.0);',
+    '  float fH = 0.5; vec3 tH = vec3(0.5); float aH = 0.0;',
+    '  float fM = 0.5; vec3 tM = vec3(0.5); float aM = 0.0;',
+    '  vec4 gH = vec4(0.0); vec4 gM = vec4(0.0);',
+    '  float rH = 0.0; float rM = 0.0;',
+    '  vec4 gS = vec4(0.0); float rS = 0.0; float dS = 1e4;',
+    '  ptrPt = p; ptrK = 0.0; ptrR = 90.0;',
+    '  for (int i = 0; i < MAXG; i++){',
+    '    if (i >= uGN) break;',
+    '    if (abs(uA[i].y - layer) > 0.5) continue;',
+    '    vec2 pw = p - uG[i].xy;',
+    '    float di = sdRR(pw, uG[i].zw, uA[i].x);',
+    '    vec2  gi = sdGrad(pw, uG[i].zw, uA[i].x);',
+    '    if (uB[i].x > 0.5) {',
+    '      if (dMerge > 9e3) {',
+    '        dMerge = di; gMerge = gi; fM = uA[i].z; tM = uB[i].yzw; aM = uA[i].w;',
+    '        gM = uG[i]; rM = uA[i].x;',
+    '      } else if (di < uMergeK) {',
+    '        float h = clamp(0.5 + 0.5 * (di - dMerge) / uMergeK, 0.0, 1.0);',
+    '        gMerge = mix(gMerge, gi, h);',
+    '        dMerge = mix(dMerge, di, h) - uMergeK * h * (1.0 - h);',
+    '        fM = mix(fM, uA[i].z, h); tM = mix(tM, uB[i].yzw, h); aM = mix(aM, uA[i].w, h);',
+    '      } else if (di < dHard) {',
+    '        dHard = di; gHard = gi; fH = uA[i].z; tH = uB[i].yzw; aH = uA[i].w;',
+    '        gH = uG[i]; rH = uA[i].x;',
+    '      }',
+    '    } else if (di < dHard) {',
+    '      dHard = di; gHard = gi; fH = uA[i].z; tH = uB[i].yzw; aH = uA[i].w;',
+    '      gH = uG[i]; rH = uA[i].x;',
+    '    }',
+    '  }',
+    '  if (dMerge < dHard) { grad = gMerge; frost = fM; tintC = tM; tintA = aM; dS = dMerge; gS = gM; rS = rM; }',
+    '  else { grad = gHard; frost = fH; tintC = tH; tintA = aH; dS = dHard; gS = gH; rS = rH; }',
+    /* 指针 → 该形状边框最近点：沿指针处法线走 |d| 即落在框上。
+       光斑半径随元素短边缩放：小按钮局部亮，大面板亮一段弧 */
+    '  if (uPtrOn > 0.5 && dS < 9e3) {',
+    '    vec2 pl = uPtr - gS.xy;',
+    '    float dp = sdRR(pl, gS.zw, rS);',
+    '    vec2 gp = sdGrad(pl, gS.zw, rS);',
+    '    ptrPt = uPtr - gp * dp;',
+    '    ptrR = clamp(min(gS.z, gS.w) * 2.4, 40.0, 300.0);',
+    '    float reach = clamp(min(gS.z, gS.w) * 1.6, 72.0, 280.0);',
+    '    ptrK = 1.0 - smoothstep(reach, reach * 2.5, max(dp, 0.0));',
+    '  }',
+    '  return dS;',
+    '}',
+
+    /* 单层玻璃面：输入该像素的场参数，输出 premultiplied 前的 (rgb, a)
+       px2uv: 屏幕 px → 源图 UV 的换算（cover 映射下 = uFit.xy / uRes） */
+    'vec4 surf(float d, vec2 n, float fr, vec3 tc, float ta, vec2 uv, vec2 suv,',
+    '          vec2 p, vec2 ptrPt, float ptrK, float ptrR){',
+    '  float hot = 0.0;',
+    '  float a = 1.0 - smoothstep(-0.75, 0.0, d);',
+    /* 折射：边缘位移最大，向内部指数衰减；RGB 位移不同 → 色散 */
+    '  float k = exp(d / max(uBezel, 1.0));',
+    '  float str = k * uStrength;',
+    '  vec2 px2uv = vec2(uFit.x / uRes.x, uFit.y / uRes.y);',
+    '  vec2 offR = n * str * (1.0 + uDisp) * px2uv;',
+    '  vec2 offG = n * str * px2uv;',
+    '  vec2 offB = n * str * (1.0 - uDisp) * px2uv;',
+    '  vec3 sharp;',
+    '  sharp.r = texture2D(uTex, clamp(uv + offR, 0.001, 0.999)).r;',
+    '  sharp.g = texture2D(uTex, clamp(uv + offG, 0.001, 0.999)).g;',
+    '  sharp.b = texture2D(uTex, clamp(uv + offB, 0.001, 0.999)).b;',
+    /* 模糊图与屏幕 1:1 对应，位移按屏幕 UV 计 */
+    '  vec3 bl = texture2D(uBlur, clamp(suv + n * str / uRes, 0.001, 0.999)).rgb;',
+    '  vec3 col = mix(sharp, bl, clamp(fr, 0.0, 1.0));',
+    /* 调色：增饱和 → 暗/亮模式各自的亮度曲线 → 着色 */
+    '  float lum = dot(col, vec3(0.299, 0.587, 0.114));',
+    '  col = mix(vec3(lum), col, 1.2);',
+    '  col = mix(col * 1.02 + 0.03, col * 0.78 + 0.015, uDark);',
+    '  col = mix(col, tc, clamp(ta, 0.0, 1.0));',
+    /* 边缘高光：等值带 × 光向（左上来光）。亮色主题底色已亮，
+       高光减半防止粗白边；暗色保持全强度冷光 */
+    '  float band = exp(-abs(d) / max(uBezel * 0.25, 1.0));',
+    '  vec2 L = normalize(vec2(-0.55, -0.83));',
+    '  float lit = clamp(dot(n, L) * 0.5 + 0.5, 0.0, 1.0);',
+    '  vec3 rimCol = mix(vec3(1.0), vec3(0.75, 0.85, 1.0), uDark);',
+    /* 指针跟光：指针投影到本形状边框上的那个点，周围一段边框被点亮。
+       只加到边框带 band / 轮廓线 line 上，玻璃内部不铺光。 */
+    '  if (uPtrOn > 0.5 && ptrK > 0.001) {',
+    '    float dd = length(p - ptrPt) / ptrR;',
+    '    hot = exp(-dd * dd * 1.8) * ptrK;',
+    '    band = max(band, hot * 0.95 * exp(-abs(d) / 2.2));',
+    '  }',
+    '  float rimI = uRim * mix(0.45, 1.0, uDark) * (1.0 + 2.6 * hot);',
+    '  col += rimCol * (rimI * band * (0.22 + 0.55 * lit));',
+    '  col -= rimCol * (rimI * 0.25 * band * (1.0 - lit));',
+    /* 外沿 1px 亮线，托出轮廓；靠近指针处一起变亮 */
+    '  float line = 1.0 - smoothstep(0.0, 1.2, abs(d + 0.6));',
+    '  col += rimCol * line * mix(0.05, 0.12, uDark) * (1.0 + 2.0 * hot);',
+    '  return vec4(col, a);',
+    '}',
+
+    'void main(){',
+    '  vec2 p = vUv * uRes;',
+    '  vec2 uv = vUv * uFit.xy + uFit.zw;',
+    '  vec3 col = texture2D(uTex, uv).rgb;',   // 底：壁纸
+    '  float d0; vec2 n0; float fr0; vec3 tc0; float ta0; vec2 pt0; float pk0; float pr0;',
+    '  d0 = field(p, 0.0, n0, fr0, tc0, ta0, pt0, pk0, pr0);',
+    '  float d1; vec2 n1; float fr1; vec3 tc1; float ta1; vec2 pt1; float pk1; float pr1;',
+    '  d1 = field(p, 1.0, n1, fr1, tc1, ta1, pt1, pk1, pr1);',
+    '  if (d0 < 0.0) { vec4 s = surf(d0, n0, fr0, tc0, ta0, uv, vUv, p, pt0, pk0, pr0); col = mix(col, s.rgb, s.a); }',
+    '  if (d1 < 0.0) { vec4 s = surf(d1, n1, fr1, tc1, ta1, uv, vUv, p, pt1, pk1, pr1); col = mix(col, s.rgb, s.a); }',
+    '  gl_FragColor = vec4(col, 1.0);',
+    '}'
+  ].join('\n');
+
+  function clamp(v, a, b) { return v < a ? a : v > b ? b : v; }
+
+  function parseRadius(cs) {
+    var v = cs.borderTopLeftRadius || '0';
+    var m = String(v).match(/([\d.]+)/);
+    return m ? parseFloat(m[1]) : 0;
   }
 
-  // occlusion.ts
-  var MIN_ALPHA = 0.05;
-  function alpha(color) {
-    if (!color || color === "transparent") return 0;
-    const slash = color.match(/\/\s*([\d.]+)(%?)\s*\)$/);
-    if (slash) return parseFloat(slash[1]) / (slash[2] ? 100 : 1);
-    const rgba = color.match(/^rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\s*\)$/);
-    if (rgba) return parseFloat(rgba[1]);
+  function alphaOf(color) {
+    if (!color || color === 'transparent') return 0;
+    var m = String(color).match(/rgba?\([^)]*,\s*([\d.]+)\s*\)$/);
+    if (m) return parseFloat(m[1]);
+    if (String(color).indexOf('#') === 0 && color.length >= 8) {
+      return parseInt(color.slice(7, 9), 16) / 255;
+    }
     return 1;
   }
-  function paintsOverBackdrop(s) {
-    return s.backdropFilter !== "" && s.backdropFilter !== "none" || s.backgroundImage !== "" && s.backgroundImage !== "none" || alpha(s.backgroundColor) > MIN_ALPHA;
-  }
-  function effectiveOpacity(el) {
-    let o = 1;
-    for (let p = el; p && p !== document.body && o > 0; p = p.parentElement) {
-      const v = parseFloat(getComputedStyle(p).opacity);
-      if (!Number.isNaN(v)) o *= v;
+
+  /* 遮挡判定：祖先有不透明底 / 背景图 / 自带磨砂 → 该玻璃不渲染 */
+  function blockedByAncestor(el) {
+    var p = el.parentElement;
+    while (p && p !== document.body) {
+      var cs = getComputedStyle(p);
+      var bf = cs.backdropFilter || cs.webkitBackdropFilter;
+      if ((bf && bf !== 'none') ||
+          (cs.backgroundImage && cs.backgroundImage !== 'none') ||
+          alphaOf(cs.backgroundColor) > 0.05) return true;
+      p = p.parentElement;
     }
-    return o;
+    return false;
   }
 
-  // engine.ts
-  var MAXG = 32;
-  var MAXS = 16;
-  var PRESETS = {
-    button: { grow: 0.14, squash: 1, frost: 0.15, tint: 0, merge: 0, layer: 0 },
-    bar: { grow: 0.03, squash: 0.4, frost: 0.45, tint: 0, merge: 0, layer: 0 },
-    card: { grow: 0, squash: 0, frost: 1, tint: 0.2, merge: 0, layer: 0 },
-    sheet: { grow: 0, squash: 0, frost: 1, tint: 0.28, merge: 1, layer: 0 },
-    knob: { grow: 0.22, squash: 0.6, frost: 0.06, tint: 0, tintPressed: 0.06, tintColor: [1, 1, 1], merge: 0, layer: 1 },
-    blob: { grow: 0.1, squash: 1.6, frost: 0.1, tint: 0, merge: 1, layer: 0 }
-  };
-  var VS = "attribute vec2 p;varying vec2 vUv;void main(){vUv=p*.5+.5;vUv.y=1.-vUv.y;gl_Position=vec4(p,0.,1.);}";
-  var FS = `precision highp float;
-#define MAXG ${MAXG}
-#define MAXS ${MAXS}
-varying vec2 vUv;
-uniform sampler2D uTex;uniform sampler2D uBlur;uniform vec2 uRes;uniform vec4 uFit;
-uniform vec4 uG[MAXG];uniform vec4 uGP[MAXG];uniform vec4 uGT[MAXG];uniform int uGN;
-uniform vec4 uS[MAXS];uniform vec4 uSC[MAXS];uniform vec4 uSP[MAXS];uniform int uSN;
-uniform float uBezel;uniform float uStrength;uniform float uDisp;uniform float uMergeK;uniform float uDark;uniform float uRim;uniform vec2 uPtr;
-float sdRR(vec2 p,vec2 b,float r){r=min(r,min(b.x,b.y));vec2 q=abs(p)-b+r;return length(max(q,0.))+min(max(q.x,q.y),0.)-r;}
-float smin(float a,float b,float k){float h=max(k-abs(a-b),0.)/k;return min(a,b)-h*h*k*.25;}
-float lay(vec4 q){return q.y>1.5?1.:0.;}
-float field(vec2 p,float L){
- float dm=1e4;float dh=1e4;
- for(int i=0;i<MAXG;i++){if(i>=uGN)break;
-if(uGT[i].w<.002||abs(lay(uGP[i])-L)>.5)continue;
-float d=sdRR(p-uG[i].xy,uG[i].zw,uGP[i].x);
-if(uGP[i].y>.5&&uGP[i].y<1.5)dm=smin(dm,d,uMergeK);else dh=min(dh,d);}
- return min(dm,dh);}
-void nearest(vec2 p,float L,out vec4 P,out vec4 T,out float hm){
- float best=1e4;P=vec4(0.);T=vec4(0.);hm=1.;
- for(int i=0;i<MAXG;i++){if(i>=uGN)break;
-if(uGT[i].w<.002||abs(lay(uGP[i])-L)>.5)continue;
-float d=sdRR(p-uG[i].xy,uG[i].zw,uGP[i].x);
-if(d<best){best=d;P=uGP[i];T=uGT[i];hm=min(uG[i].z,uG[i].w);}}}
-vec3 bg(vec2 px,float fr){vec2 u=clamp(px/uRes,0.,1.);vec3 c=texture2D(uTex,u*uFit.xy+uFit.zw).rgb;
- if(fr>.001)c=mix(c,texture2D(uBlur,u).rgb,fr);return c;}
-vec3 solids(vec2 px,vec3 c,float L){
- for(int i=0;i<MAXS;i++){if(i>=uSN)break;if(abs(uSP[i].y-L)>.5)continue;
-float d=sdRR(px-uS[i].xy,uS[i].zw,uSP[i].x);c=mix(c,uSC[i].rgb,clamp(.5-d,0.,1.)*uSC[i].a);}
- return c;}
-vec3 scene(vec2 px,float fr){return solids(px,bg(px,fr),0.);}
-vec3 finish(vec3 col,vec2 px,vec2 g,float x,float inside,vec4 P,vec4 T){
- float l=dot(col,vec3(.299,.587,.114));col=mix(vec3(l),col,1.2);
- col=uDark>.5?col*.78+.015:col*1.02+.03;
- col=mix(col,T.rgb,P.z);
- vec2 Ld=normalize(uPtr-px+vec2(.001));float fc=dot(g,Ld);float rim=pow(1.-x,6.);
- float hi=rim*(max(fc,0.)*.85+max(-fc,0.)*.3)+(1.-smoothstep(0.,1.5,inside))*.22;
- return col+vec3(hi*(uDark>.5?.6:1.)*uRim);}
-float shadow(vec2 px,float L){return 1.-smoothstep(-16.,34.,field(px-vec2(0.,10.),L));}
-vec3 shade0(vec2 px){
- float d=field(px,0.);vec3 base=scene(px,0.);
- if(d<60.)base*=1.-shadow(px,0.)*(uDark>.5?.32:.16)*smoothstep(0.,2.,d);
- if(d>=.5)return base;
- vec4 P;vec4 T;float hm;nearest(px,0.,P,T,hm);
- float bez=min(uBezel,hm*.85);float inside=max(-d,0.);float x=clamp(inside/bez,0.,1.);
- vec2 e=vec2(.75,0.);
- vec2 g=vec2(field(px+e.xy,0.)-field(px-e.xy,0.),field(px+e.yx,0.)-field(px-e.yx,0.));g/=max(length(g),1e-4);
- vec2 off=-g*uStrength*min(1.,hm/40.)*pow(1.-x,2.2);
- float fr=P.w;vec3 col;
- col.r=scene(px+off*(1.+uDisp),fr).r;col.g=scene(px+off,fr).g;col.b=scene(px+off*(1.-uDisp),fr).b;
- col=finish(col,px,g,x,inside,P,T);
- return mix(base,col,clamp(.5-d,0.,1.)*T.w);}
-vec3 top0(vec2 px){return solids(px,shade0(px),1.);}
-void main(){
- vec2 px=vUv*uRes;float d=field(px,1.);vec3 base=top0(px);
- if(d<60.)base*=1.-shadow(px,1.)*(uDark>.5?.3:.14)*smoothstep(0.,2.,d);
- if(d>=.5){gl_FragColor=vec4(base,1.);return;}
- vec4 P;vec4 T;float hm;nearest(px,1.,P,T,hm);
- float bez=min(uBezel,hm*.85);float inside=max(-d,0.);float x=clamp(inside/bez,0.,1.);
- vec2 e=vec2(.75,0.);
- vec2 g=vec2(field(px+e.xy,1.)-field(px-e.xy,1.),field(px+e.yx,1.)-field(px-e.yx,1.));g/=max(length(g),1e-4);
- vec2 off=-g*uStrength*min(1.,hm/40.)*pow(1.-x,2.2);
- vec3 col;col.r=top0(px+off*(1.+uDisp)).r;col.g=top0(px+off).g;col.b=top0(px+off*(1.-uDisp)).b;
- col=finish(col,px,g,x,inside,P,T);
- gl_FragColor=vec4(mix(base,col,clamp(.5-d,0.,1.)*T.w),1.);}`;
-  var colorCache = /* @__PURE__ */ new Map();
-  var colorCtx = null;
-  function parseColor(s) {
-    const hit = colorCache.get(s);
-    if (hit) return hit;
-    let out = [0, 0, 0, 0];
-    if (s && s !== "transparent") {
-      colorCtx != null ? colorCtx : colorCtx = Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: true });
-      if (colorCtx) {
-        colorCtx.clearRect(0, 0, 1, 1);
-        colorCtx.fillStyle = s;
-        colorCtx.fillRect(0, 0, 1, 1);
-        const [r, g, b, a] = colorCtx.getImageData(0, 0, 1, 1).data;
-        out = a ? [r / 255, g / 255, b / 255, a / 255] : [0, 0, 0, 0];
+  function hexToRgb(hex) {
+    var m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(hex || '').trim());
+    if (!m) return null;
+    var s = m[1];
+    if (s.length === 3) s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
+    return [parseInt(s.slice(0, 2), 16) / 255,
+            parseInt(s.slice(2, 4), 16) / 255,
+            parseInt(s.slice(4, 6), 16) / 255];
+  }
+
+  function cssColorToRgb(v) {
+    if (!v || v === 'none') return null;
+    var m = String(v).match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+    if (m) return [+m[1] / 255, +m[2] / 255, +m[3] / 255];
+    return hexToRgb(v);
+  }
+
+  function LiquidGlass(canvas, opts) {
+    opts = opts || {};
+    this.canvas = canvas;
+    this.o = {
+      refraction: opts.refraction != null ? opts.refraction : 18,
+      dispersion: opts.dispersion != null ? opts.dispersion : 0.05,
+      frost: opts.frost != null ? opts.frost : 12,
+      bezel: opts.bezel != null ? opts.bezel : 14,
+      mergeK: opts.mergeK != null ? opts.mergeK : 30,
+      rim: opts.rim != null ? opts.rim : 0.55,
+      mode: opts.mode || 'light',
+      liquid: !!opts.liquid
+    };
+    this.items = [];
+    this.solids = [];
+    this.src = null;
+    this.live = false;
+    this.dirty = true;
+    this.ready = false;
+    this.failed = false;
+    this.size = { w: 0, h: 0 };
+    this._sx = 0; this._sy = 0; this._fc = 0;
+    this._fit = [1, 1, 0, 0];
+    /* 指针：ptr = 目标位置，ptrS = 平滑后位置（制造跟随的拖尾感） */
+    this.ptr = { x: -9999, y: -9999, on: false };
+    this.ptrS = { x: -9999, y: -9999, on: false };
+    this._rc = null; this._rct = 0;
+    this.u = {};
+    this._gBuf = new Float32Array(MAXG * 4);
+    this._aBuf = new Float32Array(MAXG * 4);
+    this._bBuf = new Float32Array(MAXG * 4);
+
+    var gl = canvas.getContext('webgl', { alpha: false, antialias: false, depth: false, stencil: false })
+          || canvas.getContext('experimental-webgl', { alpha: false });
+    if (!gl) { this.failed = true; return; }
+    this.gl = gl;
+
+    var pr = gl.createProgram();
+    var mk = function (type, srcText) {
+      var sh = gl.createShader(type);
+      gl.shaderSource(sh, srcText);
+      gl.compileShader(sh);
+      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+        console.warn('LiquidGlassNext shader:', gl.getShaderInfoLog(sh));
+        return null;
       }
+      return sh;
+    };
+    var vs = mk(gl.VERTEX_SHADER, VS), fs = mk(gl.FRAGMENT_SHADER, FS);
+    if (!vs || !fs) { this.failed = true; return; }
+    gl.attachShader(pr, vs); gl.attachShader(pr, fs);
+    gl.linkProgram(pr);
+    if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) {
+      console.warn('LiquidGlassNext link:', gl.getProgramInfoLog(pr));
+      this.failed = true; return;
     }
-    if (colorCache.size > 256) colorCache.clear();
-    colorCache.set(s, out);
-    return out;
+    this.program = pr;
+    gl.useProgram(pr);
+
+    var b = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, b);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+    var loc = gl.getAttribLocation(pr, 'p');
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+    var self = this;
+    ['uTex', 'uBlur', 'uRes', 'uFit', 'uGN', 'uBezel', 'uStrength', 'uDisp', 'uMergeK', 'uDark', 'uRim', 'uPtr', 'uPtrOn']
+      .forEach(function (n) { self.u[n] = gl.getUniformLocation(pr, n); });
+    ['uG', 'uA', 'uB'].forEach(function (n) { self.u[n] = gl.getUniformLocation(pr, n + '[0]'); });
+
+    /* ---- 指针监听：只登记坐标，重活留到渲染帧，不在事件里读布局 ---- */
+    this._onMove = function (e) {
+      var t = (window.performance && performance.now) ? performance.now() : Date.now();
+      if (!self._rc || t - self._rct > 300) {
+        self._rc = canvas.getBoundingClientRect(); self._rct = t;
+      }
+      self.ptr.x = e.clientX - self._rc.left;
+      self.ptr.y = e.clientY - self._rc.top;
+      self.ptr.on = true;
+    };
+    this._onLeave = function () { self.ptr.on = false; };
+    this._onUp = function (e) {
+      if (e && e.pointerType && e.pointerType !== 'mouse') self.ptr.on = false;
+    };
+    window.addEventListener('pointermove', this._onMove, { passive: true });
+    window.addEventListener('pointerdown', this._onMove, { passive: true });
+    window.addEventListener('pointerup', this._onUp, { passive: true });
+    document.addEventListener('pointerleave', this._onLeave);
+    window.addEventListener('blur', this._onLeave);
+
+    this.tex = this._tex(0);
+    this.blurTex = this._tex(1);
+    gl.uniform1i(this.u.uTex, 0);
+    gl.uniform1i(this.u.uBlur, 1);
+
+    this.blurC = document.createElement('canvas');
+
+    this._raf = requestAnimationFrame(function loop() {
+      if (!self._dead) { self._frame(); self._raf = requestAnimationFrame(loop); }
+    });
   }
-  var len = (v, ref) => !v ? 0 : v.trim().endsWith("%") ? parseFloat(v) / 100 * ref : parseFloat(v) || 0;
-  /* 最近的「可滚动祖先」：内部滚动区（侧栏/表格/手机屏幕）滚动时 window.scrollY 不变，
-     靠它把滚动量也纳入缓存平移，否则这类容器只能逐帧重读布局 */
-  var scrollParentOf = (el) => {
-    for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
-      const s = getComputedStyle(p);
-      const scrollable = /^(auto|scroll)$/.test(s.overflowY) || /^(auto|scroll)$/.test(s.overflowX);
-      if (scrollable && (p.scrollHeight > p.clientHeight + 1 || p.scrollWidth > p.clientWidth + 1)) return p;
+
+  LiquidGlass.prototype._tex = function (unit) {
+    var gl = this.gl, t = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, t);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
+      new Uint8Array([128, 128, 128, 255]));
+    return t;
+  };
+
+  LiquidGlass.prototype.set = function (o) {
+    for (var k in (o || {})) this.o[k] = o[k];
+    this.dirty = true;
+  };
+
+  LiquidGlass.prototype.setSource = function (src, opt) {
+    opt = opt || {};
+    this.src = src;
+    this.live = opt.live != null ? !!opt.live
+      : (typeof HTMLVideoElement !== 'undefined' && src instanceof HTMLVideoElement);
+    this.dirty = true;
+  };
+
+  LiquidGlass.prototype.invalidate = function () { this.dirty = true; };
+
+  LiquidGlass.prototype.add = function (el, opts) {
+    for (var i = 0; i < this.items.length; i++) if (this.items[i].el === el) return this.items[i];
+    var d = el.dataset, pre = PRESETS[(opts && opts.preset) || d.glass] || PRESETS.bar;
+    var it = {
+      el: el,
+      grow: pre.grow, frost: pre.frost, tint: pre.tint, merge: pre.merge, layer: pre.layer,
+      dl: 0, dt: 0, dw: 0, dh: 0, rad: 0,
+      tintC: [1, 1, 1], hidden: false, blocked: false, parent: null, live: false
+    };
+    this.items.push(it);
+    return it;
+  };
+
+  LiquidGlass.prototype.remove = function (el) {
+    el.removeAttribute('data-glass-live');
+    this.items = this.items.filter(function (i) { return i.el !== el; });
+    this.solids = this.solids.filter(function (s) { return s.el !== el; });
+  };
+
+  /* 每帧打标：shader 本帧实际绘制的元素才挂 data-glass-live，
+     其余退回 CSS 自绘玻璃（backdrop-filter 直接糊引擎画布） */
+  LiquidGlass.prototype._syncLive = function () {
+    var items = this.items;
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i], want = !it.blocked && !it.hidden && it._drawn === true;
+      if (it.live === want) continue;
+      it.live = want;
+      if (want) it.el.setAttribute('data-glass-live', '');
+      else it.el.removeAttribute('data-glass-live');
     }
-    return null;
   };
-  var LiquidGlass = class {
-    constructor(canvas, opts = {}) {
-      __publicField(this, "canvas");
-      __publicField(this, "failed", false);
-      __publicField(this, "o");
-      __publicField(this, "gl");
-      __publicField(this, "program");
-      __publicField(this, "buffer");
-      __publicField(this, "u", {});
-      __publicField(this, "tex");
-      __publicField(this, "blurTex");
-      __publicField(this, "blurC");
-      __publicField(this, "items", []);
-      __publicField(this, "solids", []);
-      __publicField(this, "ptr", null);
-      __publicField(this, "tilt", null);
-      __publicField(this, "lastPtr", 0);
-      __publicField(this, "light", { x: -400, y: -600 });
-      __publicField(this, "fit", [1, 1, 0, 0]);
-      __publicField(this, "size", { w: 0, h: 0 });
-      __publicField(this, "src", null);
-      __publicField(this, "live", false);
-      __publicField(this, "dirty", false);
-      __publicField(this, "ready", false);
-      __publicField(this, "raf", 0);
-      __publicField(this, "frames", 0);
-      __publicField(this, "nextId", 1);
-      __publicField(this, "bG", new Float32Array(MAXG * 4));
-      __publicField(this, "bGP", new Float32Array(MAXG * 4));
-      __publicField(this, "bGT", new Float32Array(MAXG * 4));
-      __publicField(this, "bS", new Float32Array(MAXS * 4));
-      __publicField(this, "bSC", new Float32Array(MAXS * 4));
-      __publicField(this, "bSP", new Float32Array(MAXS * 4));
-      __publicField(this, "_onPtr", (e) => {
-        this.ptr = { x: e.clientX, y: e.clientY };
-        this.lastPtr = performance.now();
-      });
-      __publicField(this, "_onUp", () => this.items.forEach((i) => {
-        if (!i.held) i.pressed = false;
-      }));
-      __publicField(this, "_onTilt", (e) => {
-        if (e.gamma != null && e.beta != null && performance.now() - this.lastPtr > 3e3) {
-          this.tilt = { g: e.gamma, b: e.beta };
-          this.ptr = null;
+
+    LiquidGlass.prototype.scan = function (root) {
+    root = root || document;
+    var self = this;
+    var seen = [];
+    Array.prototype.forEach.call(root.querySelectorAll('[data-glass]'), function (el) {
+      seen.push(el);
+      for (var i = 0; i < self.items.length; i++) if (self.items[i].el === el) return;
+      self.add(el);
+    });
+    /* 父子关系：最近的带 data-glass 祖先。子元素画在 layer 1，叠在父层玻璃之上 */
+    this.items.forEach(function (it) {
+      var p = it.el.parentElement, found = null;
+      while (p && p !== document.body) {
+        if (p.hasAttribute && p.hasAttribute('data-glass')) {
+          for (var k = 0; k < self.items.length; k++) if (self.items[k].el === p) { found = self.items[k]; break; }
+          if (found) break;
         }
-      });
-      __publicField(this, "_loop", () => {
-        /* 页面不可见时不绘制（纯省电，不影响观感） */
-        if (document.hidden) { this.raf = requestAnimationFrame(this._loop); return; }
-        this._frame();
-        this.raf = requestAnimationFrame(this._loop);
-      });
-      this.canvas = canvas;
-      this.o = { refraction: 28, dispersion: 0.1, frost: 14, bezel: 26, mergeK: 40, rim: 0.75, mode: "light", liquid: true, ...opts };
-      const gl = canvas.getContext("webgl", { antialias: false });
-      if (!gl || gl.isContextLost()) {
-        this.failed = true;
-        console.warn("LiquidGlass: WebGL unavailable");
-        return;
+        p = p.parentElement;
       }
-      this.gl = gl;
-      const sh = (t, s) => {
-        const o = gl.createShader(t);
-        gl.shaderSource(o, s);
-        gl.compileShader(o);
-        if (!gl.getShaderParameter(o, gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(o));
-        return o;
-      };
-      const pr = gl.createProgram();
-      const vs = sh(gl.VERTEX_SHADER, VS), fs = sh(gl.FRAGMENT_SHADER, FS);
-      gl.attachShader(pr, vs);
-      gl.attachShader(pr, fs);
-      gl.linkProgram(pr);
-      gl.deleteShader(vs);
-      gl.deleteShader(fs);
-      if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) {
-        console.error("LiquidGlass:", gl.getProgramInfoLog(pr));
-        gl.deleteProgram(pr);
-        this.failed = true;
-        return;
-      }
-      gl.useProgram(pr);
-      this.program = pr;
-      const b = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, b);
-      this.buffer = b;
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-      const loc = gl.getAttribLocation(pr, "p");
-      gl.enableVertexAttribArray(loc);
-      gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
-      ["uTex", "uBlur", "uRes", "uFit", "uGN", "uSN", "uBezel", "uStrength", "uDisp", "uMergeK", "uDark", "uRim", "uPtr"].forEach((n) => this.u[n] = gl.getUniformLocation(pr, n));
-      ["uG", "uGP", "uGT", "uS", "uSC", "uSP"].forEach((n) => this.u[n] = gl.getUniformLocation(pr, n + "[0]"));
-      this.tex = this._tex(0);
-      this.blurTex = this._tex(1);
-      gl.uniform1i(this.u.uTex, 0);
-      gl.uniform1i(this.u.uBlur, 1);
-      this.blurC = document.createElement("canvas");
-      window.addEventListener("pointermove", this._onPtr);
-      window.addEventListener("pointerup", this._onUp);
-      window.addEventListener("pointercancel", this._onUp);
-      window.addEventListener("deviceorientation", this._onTilt);
-      this.raf = requestAnimationFrame(this._loop);
-    }
-    _tex(unit) {
-      const gl = this.gl, t = gl.createTexture();
-      gl.activeTexture(gl.TEXTURE0 + unit);
-      gl.bindTexture(gl.TEXTURE_2D, t);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-      return t;
-    }
-    set(o) {
-      const f = this.o.frost;
-      Object.assign(this.o, o);
-      if (o.frost !== void 0 && o.frost !== f) this.dirty = true;
-    }
-    setSource(src, { live } = {}) {
-      this.src = src;
-      this.live = live != null ? live : typeof HTMLVideoElement !== "undefined" && src instanceof HTMLVideoElement;
-      this.dirty = true;
-    }
-    invalidate() {
-      this.dirty = true;
+      it.parent = found;
+    });
+    this.items = this.items.filter(function (i) {
+      if (i.el.isConnected && seen.indexOf(i.el) >= 0) return true;
+      i.el.removeAttribute('data-glass-live');
+      return false;
+    });
+    this.solids = this.solids.filter(function (s) {
+      return s.el.isConnected && s.el.hasAttribute('data-glass-solid');
+    });
+    Array.prototype.forEach.call(root.querySelectorAll('[data-glass-solid]'), function (el) {
+      for (var i = 0; i < self.solids.length; i++) if (self.solids[i].el === el) return;
+      self.solids.push({ el: el, layer: parseFloat(el.dataset.layer || '0') });
+    });
+    this._occl();
+    this.dirty = true;
+  };
+
+  LiquidGlass.prototype._occl = function () {
+    this.items.forEach(function (it) {
+      it.blocked = it.el.isConnected ? blockedByAncestor(it.el) : true;
+    });
+  };
+
+  LiquidGlass.prototype.destroy = function () {
+    this._dead = true;
+    if (this._raf) cancelAnimationFrame(this._raf);
+    if (this._onMove) {
+      window.removeEventListener('pointermove', this._onMove);
+      window.removeEventListener('pointerdown', this._onMove);
+      window.removeEventListener('pointerup', this._onUp);
+      document.removeEventListener('pointerleave', this._onLeave);
+      window.removeEventListener('blur', this._onLeave);
     }
-    scan(rootEl) {
-      const keep = (el, attr) => el.isConnected && el.hasAttribute(attr);
-      this.items.filter((i) => !keep(i.el, "data-glass")).forEach((i) => this._detach(i));
-      this.items = this.items.filter((i) => keep(i.el, "data-glass"));
-      this.solids.filter((s) => s.live && !keep(s.el, "data-glass-solid")).forEach((s) => {
-        s.el.style.opacity = s.opacity;
-      });
-      this.solids = this.solids.filter((s) => keep(s.el, "data-glass-solid"));
-      rootEl.querySelectorAll("[data-glass]").forEach((el) => this.add(el));
-      rootEl.querySelectorAll("[data-glass-solid]").forEach((el) => this.addSolid(el));
-      this.refreshOcclusion();
+    document.documentElement.classList.remove('lg-ready');
+    this.items.forEach(function (i) { i.el.removeAttribute('data-glass-live'); });
+    var gl = this.gl;
+    if (gl) {
+      if (this.tex) gl.deleteTexture(this.tex);
+      if (this.blurTex) gl.deleteTexture(this.blurTex);
+      if (this.program) gl.deleteProgram(this.program);
     }
-    /** Links each item to its closest glass ancestor (nested glass is drawn on the top layer) and
-        blocks items under any other ancestor that paints: the canvas is behind it. Backgrounds
-        change with state and theme, so the frame loop calls this periodically too. */
-    refreshOcclusion() {
-      const byEl = new Map(this.items.map((i) => [i.el, i]));
-      const link = (x) => {
-        var _a;
-        x.parent = null;
-        x.blocked = false;
-        for (let p = x.el.parentElement; p && p !== document.body; p = p.parentElement) {
-          const g = byEl.get(p);
-          if (g) {
-            (_a = x.parent) != null ? _a : x.parent = g;
-            continue;
-          }
-          if (paintsOverBackdrop(getComputedStyle(p))) {
-            x.blocked = true;
-            break;
-          }
-        }
-      };
-      this.items.forEach(link);
-      this.solids.forEach(link);
-      this.solids.forEach((s) => {
-        if (s.el.closest(".slider, .lg-slider")) {
-          s.blocked = false;
-          s.parent = null;
+  };
+
+  LiquidGlass.prototype._frame = function () {
+    var gl = this.gl, cv = this.canvas;
+    var W = cv.clientWidth, H = cv.clientHeight;
+    if (!W || !H || document.hidden) return;
+
+    /* ---- 滚动帧零 DOM 读取：位置 = 文档坐标缓存 − scroll ---- */
+    var sx = window.scrollX, sy = window.scrollY;
+    var scrolling = sx !== this._sx || sy !== this._sy;
+    this._sx = sx; this._sy = sy;
+
+    var dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+    var bw = Math.round(W * dpr), bh = Math.round(H * dpr);
+    if (cv.width !== bw || cv.height !== bh) { cv.width = bw; cv.height = bh; this.dirty = true; }
+    gl.viewport(0, 0, bw, bh);
+    if (W !== this.size.w || H !== this.size.h) { this.size = { w: W, h: H }; this.dirty = true; }
+
+    /* ---- 采集几何 → uniform 缓冲 ---- */
+    var gN = 0;
+    var gB = this._gBuf, aB = this._aBuf, bB = this._bBuf;
+    var items = this.items;
+    for (var i = 0; i < items.length; i++) items[i]._drawn = false;
+
+    /* solid 件（滑块轨道/进度条）不进 shader：引擎画布位于页面最底层，
+       任何带自身背景的容器都会遮住它。纯色件一律交回 DOM 自绘。 */
+
+    for (var i = 0; i < items.length && gN < MAXG; i++) {
+      var it = items[i], el = it.el;
+      if (!scrolling) it.blocked = blockedByAncestor(el);
+      if (it.blocked) continue;
+      if (!scrolling || !it.dw) {
+        var cs = getComputedStyle(el);
+        if (cs.display === 'none' || cs.visibility === 'hidden' || parseFloat(cs.opacity) < 0.05) {
+          it.hidden = true; continue;
         }
-      });
-      this.items.forEach((it) => {
-        const el = it.el;
-        if (el.dataset.glass === "knob" && el.closest(".slider, .lg-slider, .sw")) {
-          it.blocked = false;
-          it.parent = null;
+        it.hidden = false;
+        var r = el.getBoundingClientRect();
+        if (r.width < 2 || r.height < 2) { it.hidden = true; continue; }
+        it.dl = r.left + sx; it.dt = r.top + sy;
+        it.dw = r.width; it.dh = r.height;
+        it.rad = parseRadius(cs);
+        /* data-* 覆盖每帧重读（glass-webgl 可能在 scan 后打标/改标） */
+        var dset = el.dataset;
+        ['tint', 'frost', 'layer', 'merge', 'grow'].forEach(function (k) {
+          if (dset[k] !== undefined) { var v = parseFloat(dset[k]); if (!isNaN(v)) it[k] = v; }
+        });
+        /* 着色解析：保留 CSS 颜色的 alpha（transparent → 不着色，由 DOM wash 兜底） */
+        var dark = this.o.mode === 'dark';
+        var tv = cs.getPropertyValue('--lg-tint').trim();
+        var tc = null, taMul = 0;
+        if (tv && tv !== 'transparent' && tv !== 'none') {
+          tc = cssColorToRgb(tv);
+          if (tc) taMul = alphaOf(tv);
         }
-      });
-    }
-    add(el, opts = {}) {
-      const existing = this.items.find((i) => i.el === el);
-      if (existing) return existing;
-      const d = el.dataset, pre = PRESETS[opts.preset || d.glass] || PRESETS.bar;
-      const ov = {};
-      ["tint", "frost", "layer", "merge", "grow", "squash"].forEach((k) => {
-        if (d[k] !== void 0) ov[k] = parseFloat(d[k]);
-      });
-      const it = {
-        ...pre,
-        ...ov,
-        ...opts,
-        el,
-        sx: 1,
-        sy: 1,
-        vx: 0,
-        vy: 0,
-        v: { x: 0, y: 0 },
-        last: null,
-        pressed: false,
-        held: false,
-        scs: "",
-        t: 0,
-        id: this.nextId++,
-        parent: null,
-        blocked: false,
-        live: false,
-        down: () => {
-          it.pressed = true;
+        if (!tc) {
+          var bgv = cs.backgroundColor;
+          tc = cssColorToRgb(bgv);
+          if (tc) taMul = alphaOf(bgv);
         }
-      };
-      it.t = it.tint;
-      el.addEventListener("pointerdown", it.down);
-      this.items.push(it);
-      return it;
-    }
-    addSolid(el) {
-      if (this.solids.some((s) => s.el === el)) return;
-      this.solids.push({ el, layer: parseFloat(el.dataset.layer || "0"), opacity: el.style.opacity, live: false, parent: null, blocked: false });
-    }
-    press(el, on) {
-      const it = this.items.find((i) => i.el === el);
-      if (it) {
-        it.pressed = on;
-        it.held = on;
+        if (!tc) tc = dark ? [0.09, 0.09, 0.11] : [1, 1, 1];
+        it.tintC = tc;
+        it.tintA = taMul;
       }
-    }
-    remove(el) {
-      const it = this.items.find((i) => i.el === el);
-      if (it) this._detach(it);
-      const s = this.solids.find((s2) => s2.el === el);
-      if (s == null ? void 0 : s.live) el.style.opacity = s.opacity;
-      this.items = this.items.filter((i) => i.el !== el);
-      this.solids = this.solids.filter((s2) => s2.el !== el);
-    }
-    /** Stops rendering and releases GL resources. The canvas stays usable, so a remount
-        (React strict mode, HMR) can create a new engine on the same element. */
-    destroy() {
-      cancelAnimationFrame(this.raf);
-      document.documentElement.classList.remove("lg-ready");
-      window.removeEventListener("pointermove", this._onPtr);
-      window.removeEventListener("pointerup", this._onUp);
-      window.removeEventListener("pointercancel", this._onUp);
-      window.removeEventListener("deviceorientation", this._onTilt);
-      this.items.forEach((i) => this._detach(i));
-      this.solids.forEach((s) => {
-        if (s.live) s.el.style.opacity = s.opacity;
-      });
-      this.items = [];
-      this.solids = [];
-      const gl = this.gl;
-      if (gl && !this.failed) {
-        gl.deleteTexture(this.tex);
-        gl.deleteTexture(this.blurTex);
-        gl.deleteBuffer(this.buffer);
-        gl.deleteProgram(this.program);
-        gl.clearColor(0, 0, 0, 0);
-        gl.clear(gl.COLOR_BUFFER_BIT);
+      if (it.hidden) continue;
+
+      var hw = it.dw / 2, hh = it.dh / 2;
+      var grow = it.grow || 0;
+      if (grow > 0) {
+        var pad = grow * Math.min(hw, hh);
+        hw += pad; hh += pad;
       }
+      /* 中心永远取元素几何中心：grow 只向外扩边，不得移动中心
+         （否则玻璃整体向右下偏 pad px，表现为"内容不居中/外圈偏"） */
+      var x = it.dl - sx + it.dw / 2, y = it.dt - sy + it.dh / 2;
+      if (x + hw < 0 || x - hw > W || y + hh < 0 || y - hh > H) continue;
+
+      var o4 = gN * 4;
+      /* 嵌套深度：子元素（父链上有其他玻璃）画在 layer 1，叠在父层之上 */
+      var depth = 0, anc = it.parent;
+      while (anc) { depth++; anc = anc.parent; }
+      if (depth > 1) continue;
+      gB[o4] = x; gB[o4 + 1] = y; gB[o4 + 2] = hw; gB[o4 + 3] = hh;
+      aB[o4] = Math.min(it.rad, Math.min(hw, hh));
+      aB[o4 + 1] = (depth >= 1 || it.layer >= 1) ? 1 : 0;
+      aB[o4 + 2] = clamp(it.frost, 0, 1);
+      aB[o4 + 3] = clamp(it.tint * (it.tintA != null ? it.tintA : 1), 0, 1);
+      bB[o4] = it.merge ? 1 : 0;
+      bB[o4 + 1] = it.tintC[0]; bB[o4 + 2] = it.tintC[1]; bB[o4 + 3] = it.tintC[2];
+      it._drawn = true;
+      gN++;
     }
-    _detach(it) {
-      it.el.removeEventListener("pointerdown", it.down);
-      this._setLive(it, false);
-    }
-    /* data-glass-live marks elements the shader draws this frame; only those drop their CSS glass. */
-    _setLive(it, live) {
-      if (it.live === live) return;
-      it.live = live;
-      if (live) it.el.setAttribute("data-glass-live", "");
+    this._syncLive();
+
+    /* ---- 纹理上传（live 隔帧；脏时必传） ---- */
+    if (this.src && (this.dirty || (this.live && (this._fc % 2 === 0)))) this._upload();
+
+    gl.useProgram(this.program);
+    var f = this._fit;
+    gl.uniform4f(this.u.uFit, f[0], f[1], f[2], f[3]);
+    gl.uniform2f(this.u.uRes, W, H);
+    gl.uniform1i(this.u.uGN, gN);
+    gl.uniform1f(this.u.uBezel, this.o.bezel);
+    gl.uniform1f(this.u.uStrength, this.o.refraction);
+    gl.uniform1f(this.u.uDisp, this.o.dispersion);
+    gl.uniform1f(this.u.uMergeK, this.o.mergeK);
+    gl.uniform1f(this.u.uDark, this.o.mode === 'dark' ? 1 : 0);
+    gl.uniform1f(this.u.uRim, this.o.rim);
+
+    /* 指针平滑：进入页面时直接就位，移动时带一点跟手延迟 → 光沿边框滑动 */
+    var tp = this.ptr, sp = this.ptrS;
+    if (tp.on) {
+      if (!sp.on) { sp.x = tp.x; sp.y = tp.y; sp.on = true; }
       else {
-        it.el.removeAttribute("data-glass-live");
-        it.el.style.scale = "";
-        it.scs = "";
-        it.sx = it.sy = 1;
-        it.vx = it.vy = 0;
+        sp.x += (tp.x - sp.x) * 0.22;
+        sp.y += (tp.y - sp.y) * 0.22;
+        if (Math.abs(tp.x - sp.x) < 0.4 && Math.abs(tp.y - sp.y) < 0.4) { sp.x = tp.x; sp.y = tp.y; }
       }
+    } else {
+      sp.on = false;
     }
-    _upload(W, H) {
-      const gl = this.gl, s = this.src;
-      if (s instanceof HTMLVideoElement && s.readyState < 2) return;
-      const sw = s.videoWidth || s.naturalWidth || s.width;
-      const sh = s.videoHeight || s.naturalHeight || s.height;
-      if (!sw || !sh) return;
-      const A = W / H, B = sw / sh;
-      let fx = 1, fy = 1, ox = 0, oy = 0;
-      if (B > A) {
-        fx = A / B;
-        ox = (1 - fx) / 2;
-      } else {
-        fy = B / A;
-        oy = (1 - fy) / 2;
-      }
-      this.fit = [fx, fy, ox, oy];
-      try {
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.tex);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, s);
-        const bc = this.blurC, bw = Math.max(2, Math.round(W / 4)), bh = Math.max(2, Math.round(H / 4));
-        if (bc.width !== bw) bc.width = bw;
-        if (bc.height !== bh) bc.height = bh;
-        const x = bc.getContext("2d"), br = Math.max(this.o.frost / 4, 0.01), pad = br * 3;
-        x.filter = `blur(${br}px)`;
-        x.drawImage(s, ox * sw, oy * sh, fx * sw, fy * sh, -pad, -pad, bw + 2 * pad, bh + 2 * pad);
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, this.blurTex);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bc);
-        this.ready = true;
-        document.documentElement.classList.add("lg-ready");
-      } catch (e) {
-        console.warn("LiquidGlass: source not usable (CORS?)", e);
-      }
-      this.dirty = false;
+    gl.uniform2f(this.u.uPtr, sp.x, sp.y);
+    gl.uniform1f(this.u.uPtrOn, sp.on ? 1 : 0);
+    if (gN) {
+      gl.uniform4fv(this.u.uG, gB);
+      gl.uniform4fv(this.u.uA, aB);
+      gl.uniform4fv(this.u.uB, bB);
     }
-    _frame() {
-      var _a, _b;
-      const gl = this.gl, cv = this.canvas;
-      const W = cv.clientWidth, H = cv.clientHeight;
-      if (!W || !H) return;
-      /* 滚动帧零布局读取：整页滚动时元素视口位置 = 文档坐标缓存 − scroll，
-         纯算术平移完全精确；非滚动帧（指针/动画）才读真实 DOM 并回写缓存。
-         内部滚动容器场景 scrollX/Y 不变 → 自动退回逐帧读取，行为同旧版 */
-      const sx = window.scrollX, sy = window.scrollY;
-      const scrolling = sx !== this._sx || sy !== this._sy;
-      this._sx = sx; this._sy = sy;
-      const cr = scrolling && this._cr ? this._cr : (this._cr = cv.getBoundingClientRect()), k = W / cr.width;
-      /* 大片视口按 1× 渲染：这层本来就是模糊的折射/磨砂，放大后肉眼看不出，
-         但 DPR1.5 意味着 2.25 倍像素 —— 视网膜屏上这是最大的单项开销 */
-      const dpr = Math.min(window.devicePixelRatio || 1, 1.5), bw = Math.round(W * dpr), bh = Math.round(H * dpr);
-      if (cv.width !== bw || cv.height !== bh) {
-        cv.width = bw;
-        cv.height = bh;
-      }
-      gl.viewport(0, 0, bw, bh);
-      if (W !== this.size.w || H !== this.size.h) {
-        this.size = { w: W, h: H };
-        this.dirty = true;
-      }
-      /* 滚动期间冻结壁纸纹理：纹理喂的是 fixed 壁纸，不随页面/容器滚动移动，
-         冻结不改变画面；省掉滚动中每帧的「全屏 2D blur + 全尺寸纹理上传」——这是滚动掉帧的主因。
-         非滚动帧仍隔帧更新（壁纸缓慢漂移，30fps 更新肉眼无差） */
-      let anyScroll = scrolling;
-      if (!anyScroll) {
-        for (const it of this.items) {
-          if (it.sco && it.dl !== void 0 && (it.sco.scrollTop !== it.sTop || it.sco.scrollLeft !== it.sLeft)) { anyScroll = true; break; }
-        }
-      }
-      if (this.src && (this.dirty || (!anyScroll && this.live && this.frames % 2 === 0))) this._upload(W, H);
-      if (!this.ready) return;
-      if (++this.frames % 30 === 0) this.refreshOcclusion();
-      let tx = -W * 0.2, ty = -H * 0.6;
-      if (this.ptr) {
-        tx = (this.ptr.x - cr.left) * k;
-        ty = (this.ptr.y - cr.top) * k;
-      } else if (this.tilt) {
-        tx = W / 2 + this.tilt.g / 30 * W;
-        ty = H / 2 + (this.tilt.b - 45) / 30 * H;
-      }
-      this.light.x += (tx - this.light.x) * 0.12;
-      this.light.y += (ty - this.light.y) * 0.12;
-      const dark = this.o.mode === "dark", liquid = this.o.liquid;
-      const vis = /* @__PURE__ */ new Map();
-      const cands = [];
-      for (const it of this.items) {
-        const el = it.el;
-        if (!el.isConnected || it.blocked) continue;
-        let r;
-        if (it.sco === void 0) it.sco = scrollParentOf(el);
-        const sdY = it.sco ? it.sco.scrollTop - it.sTop : 0;
-        const sdX = it.sco ? it.sco.scrollLeft - it.sLeft : 0;
-        if (it.dl !== void 0 && (scrolling || sdY || sdX)) {
-          r = { left: it.dl - sx - sdX, top: it.dt - sy - sdY, right: it.dl - sx - sdX + it.dw, bottom: it.dt - sy - sdY + it.dh, width: it.dw, height: it.dh };
-        } else {
-          r = el.getBoundingClientRect();
-          it.dl = r.left + sx; it.dt = r.top + sy; it.dw = r.width; it.dh = r.height;
-          if (it.sco) { it.sTop = it.sco.scrollTop; it.sLeft = it.sco.scrollLeft; }
-          it.ow = el.offsetWidth || r.width;
-          const cs0 = getComputedStyle(el);
-          it.vis = cs0.visibility === "hidden";
-          it.rad0 = len(cs0.borderTopLeftRadius, it.ow);
-          it.tv = cs0.getPropertyValue("--lg-tint").trim();
-          it.op = effectiveOpacity(el);
-        }
-        if (r.width < 1 || r.height < 1) continue;
-        if (r.bottom < cr.top - 40 || r.top > cr.bottom + 40 || r.right < cr.left - 40 || r.left > cr.right + 40) continue;
-        if (it.vis) continue;
-        vis.set(it.id, { it, r });
-        cands.push({ id: it.id, parent: (_b = (_a = it.parent) == null ? void 0 : _a.id) != null ? _b : null, area: r.width * r.height, knob: it.el.dataset.glass === "knob" ? 1 : 0 });
-      }
-      const chosen = selectShapes(cands, MAXG);
-      for (const it of this.items) this._setLive(it, chosen.has(it.id));
-      let n = 0;
-      for (const [id, depth] of chosen) {
-        const { it, r } = vis.get(id);
-        const el = it.el;
-        const op = it.op;
-        const cx = (r.left + r.width / 2 - cr.left) * k, cy = (r.top + r.height / 2 - cr.top) * k;
-        const hx = r.width / 2 * k / it.sx, hy = r.height / 2 * k / it.sy;
-        if (it.last) {
-          it.v.x = it.v.x * 0.6 + (cx - it.last.x) * 0.4;
-          it.v.y = it.v.y * 0.6 + (cy - it.last.y) * 0.4;
-        }
-        it.last = { x: cx, y: cy };
-        const g = it.pressed && liquid ? 1 + it.grow : 1, sq = liquid ? it.squash : 0;
-        const ax = Math.abs(it.v.x), ay = Math.abs(it.v.y);
-        const tX = g * (1 + Math.min(ax * 0.018 * sq, 0.35) - Math.min(ay * 9e-3 * sq, 0.18));
-        const tY = g * (1 + Math.min(ay * 0.018 * sq, 0.35) - Math.min(ax * 9e-3 * sq, 0.18));
-        if (liquid) {
-          it.vx = (it.vx + (tX - it.sx) * 0.22) * 0.7;
-          it.sx += it.vx;
-          it.vy = (it.vy + (tY - it.sy) * 0.22) * 0.7;
-          it.sy += it.vy;
-        } else {
-          it.sx = tX;
-          it.sy = tY;
-          it.vx = it.vy = 0;
-        }
-        const scs = Math.abs(it.sx - 1) < 2e-3 && Math.abs(it.sy - 1) < 2e-3 ? "" : `${it.sx.toFixed(4)} ${it.sy.toFixed(4)}`;
-        if (scs !== it.scs) {
-          el.style.scale = scs;
-          it.scs = scs;
-        }
-        const Hx = hx * it.sx, Hy = hy * it.sy, ow = it.ow || r.width;
-        const rad = Math.min(it.rad0 * (hx * 2 / ow) * Math.min(it.sx, it.sy), Hx, Hy);
-        const ds = el.dataset;
-        if (ds.tint !== void 0) it.tint = parseFloat(ds.tint);
-        if (ds.grow !== void 0) it.grow = parseFloat(ds.grow);
-        const tt = it.pressed && it.tintPressed !== void 0 ? it.tintPressed : it.tint;
-        it.t += (tt - it.t) * 0.2;
-        const tv = it.tv;
-        const custom = tv && tv !== "transparent" ? parseColor(tv) : null;
-        const tc = it.tintColor || (custom ? [custom[0], custom[1], custom[2]] : dark ? [0.07, 0.07, 0.09] : [1, 1, 1]);
-        const layer = Math.max(depth, it.layer >= 1 ? 1 : 0);
-        this.bG.set([cx, cy, Hx, Hy], n * 4);
-        this.bGP.set([rad, layer >= 1 ? 2 : it.merge ? 1 : 0, it.t, it.frost], n * 4);
-        this.bGT.set([tc[0], tc[1], tc[2], op], n * 4);
-        n++;
-      }
-      let m = 0;
-      for (const s of this.solids) {
-        const el = s.el;
-        let r;
-        if (scrolling && s.dl !== void 0) {
-          r = { left: s.dl - sx, top: s.dt - sy, width: s.dw, height: s.dh };
-        } else if (el.isConnected) {
-          r = el.getBoundingClientRect();
-          s.dl = r.left + sx; s.dt = r.top + sy; s.dw = r.width; s.dh = r.height;
-          s.ow = el.offsetWidth || r.width;
-          const cs0 = getComputedStyle(el);
-          s.solidSrc = el.dataset.solidColor || cs0.getPropertyValue("--lg-solid").trim() || cs0.backgroundColor;
-          s.rad0 = len(cs0.borderTopLeftRadius, s.ow);
-        } else {
-          r = null;
-        }
-        const draw = m < MAXS && !s.blocked && (!s.parent || s.parent.live) && !!r && r.width >= 1 && r.height >= 1;
-        if (draw !== s.live) {
-          s.live = draw;
-          el.style.opacity = draw ? "0" : s.opacity;
-        }
-        if (!draw) continue;
-        const hx = r.width / 2 * k, hy = r.height / 2 * k;
-        this.bS.set([(r.left + r.width / 2 - cr.left) * k, (r.top + r.height / 2 - cr.top) * k, hx, hy], m * 4);
-        this.bSC.set(parseColor(s.solidSrc), m * 4);
-        this.bSP.set([Math.min(s.rad0 * (hx * 2 / s.ow), hx, hy), s.layer, 0, 0], m * 4);
-        m++;
-      }
-      const u = this.u, o = this.o;
-      gl.uniform2f(u.uRes, W, H);
-      gl.uniform4fv(u.uFit, this.fit);
-      gl.uniform4fv(u.uG, this.bG);
-      gl.uniform4fv(u.uGP, this.bGP);
-      gl.uniform4fv(u.uGT, this.bGT);
-      gl.uniform1i(u.uGN, n);
-      gl.uniform4fv(u.uS, this.bS);
-      gl.uniform4fv(u.uSC, this.bSC);
-      gl.uniform4fv(u.uSP, this.bSP);
-      gl.uniform1i(u.uSN, m);
-      gl.uniform1f(u.uBezel, o.bezel);
-      gl.uniform1f(u.uStrength, o.refraction);
-      gl.uniform1f(u.uDisp, o.dispersion);
-      gl.uniform1f(u.uMergeK, Math.max(o.mergeK, 1e-3));
-      gl.uniform1f(u.uDark, dark ? 1 : 0);
-      gl.uniform1f(u.uRim, o.rim != null ? o.rim : 0.75);
-      gl.uniform2f(u.uPtr, this.light.x, this.light.y);
-      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    this._fc++;
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    this.dirty = false;
+  };
+
+  /* 上传壁纸原图 + CPU 模糊图（cover 铺满，uFit 记录屏幕→纹理映射） */
+  LiquidGlass.prototype._upload = function () {
+    var gl = this.gl, s = this.src;
+    try {
+      /* 源尺寸用位图尺寸（纹理 0-1 UV 对应位图；CSS 尺寸由 uFit 换算承担） */
+      var sw = s.videoWidth || s.width, sh = s.videoHeight || s.height;
+      if (!sw || !sh) return;
+      var W = this.size.w, H = this.size.h;
+      var sc = Math.max(W / sw, H / sh);
+      var dw = sw * sc, dh = sh * sc;
+      var dx = (W - dw) / 2, dy = (H - dh) / 2;
+
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, this.tex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, s);
+
+      /* 壁纸 1/4 分辨率 + CPU blur —— 玻璃霜化只看这张 */
+      var bc = this.blurC, bw = Math.max(2, Math.round(W / 4)), bh = Math.max(2, Math.round(H / 4));
+      if (bc.width !== bw) bc.width = bw;
+      if (bc.height !== bh) bc.height = bh;
+      var x = bc.getContext('2d');
+      x.filter = 'blur(' + Math.max(this.o.frost / 4, 0.5).toFixed(2) + 'px)';
+      x.clearRect(0, 0, bw, bh);
+      x.drawImage(s, 0, 0, sw, sh, dx / 4, dy / 4, dw / 4, dh / 4);
+
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, this.blurTex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bc);
+
+      this._fit = [W / dw, H / dh, -dx / dw, -dy / dh];
+      this.ready = true;
+      document.documentElement.classList.add('lg-ready');
+    } catch (e) {
+      console.warn('LiquidGlassNext: source upload failed', e);
     }
+    this.dirty = false;
   };
-  __publicField(LiquidGlass, "PRESETS", PRESETS);
-  var engine_default = LiquidGlass;
-  return __toCommonJS(engine_exports);
+
+  LiquidGlass.PRESETS = PRESETS;
+  window.LiquidGlassEngine = { LiquidGlass: LiquidGlass, default: LiquidGlass };
 })();