@aberhamm/liquid-glass-react 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -1,1320 +1,3370 @@
-import { useState as C, useEffect as N, useRef as te, useId as vt, forwardRef as be, isValidElement as jt, Children as Wt, cloneElement as zt, useMemo as Qt, useCallback as tt, useLayoutEffect as Kt } from "react";
-import { jsxs as $, jsx as d, Fragment as nt } from "react/jsx-runtime";
-const Zt = {
-  supportsBackdropFilter: !1,
-  isChromium: !1,
-  supportsSvgBackdropDisplacement: !1,
-  isFirefox: !1,
-  prefersReducedMotion: !1,
-  prefersReducedTransparency: !1,
-  prefersContrastMore: !1,
-  canRefract: !1
-};
-function xt() {
-  return { ...Zt };
-}
-function Jt() {
-  return typeof window < "u" && typeof document < "u" && typeof navigator < "u";
-}
-function en() {
-  return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("backdrop-filter", "blur(1px)") || CSS.supports("-webkit-backdrop-filter", "blur(1px)");
-}
-function tn(n) {
-  return /Firefox/i.test(n);
-}
-function nn(n, t) {
-  return t ? !1 : /Chrome|Chromium|Edg|OPR/i.test(n);
-}
-function rn() {
-  return typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function sn() {
-  return typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-transparency: reduce)").matches;
-}
-function on() {
-  return typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-contrast: more)").matches;
-}
-function an() {
-  if (!Jt())
-    return xt();
-  const n = navigator.userAgent ?? "", t = en(), e = tn(n), r = nn(n, e), s = r, o = rn(), a = sn(), i = on();
+"use client";
+import Vt, { useMemo as ft, useRef as o, useState as Ke, useEffect as oe, useId as jt, useLayoutEffect as qe, useCallback as Rt, forwardRef as vr, useSyncExternalStore as Br } from "react";
+import { jsx as a, jsxs as te, Fragment as ot } from "react/jsx-runtime";
+var Jt = {
+  lensW: 95,
+  lensH: 95,
+  borderRadius: 95,
+  mapSize: 512,
+  clipToShape: !0,
+  softEdge: !0,
+  strength: 0.06,
+  depth: 0.65,
+  curvature: 0.6,
+  splay: 0,
+  dispersion: 0.5,
+  bend: 0,
+  bendWidth: 0.16,
+  frost: 0.5,
+  brightness: 0.1,
+  specular: 1,
+  sheenAngle: 45,
+  sheenDark: !1,
+  sheen: 0.3,
+  sheenWidth: 3,
+  sheenFalloff: 1.5,
+  glow: 0.12,
+  glowSpread: 1,
+  glowFalloff: 0.5
+}, wr = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=", ht = 0.22, Gr = Math.sqrt(Math.PI), Pr = (t) => Math.tanh(Gr * t), cr = (t, e) => e > 0 ? (t - Math.sqrt(t * t - e * e)) / e : 0, Ur = (t, e, s) => {
+  const n = Math.max(0.01, Math.min(t, Math.min(e, s) - 1)), r = (e * e + n * n) / (2 * n), u = (s * s + n * n) / (2 * n), h = cr(r, e), f = cr(u, s);
   return {
-    supportsBackdropFilter: t,
-    isChromium: r,
-    supportsSvgBackdropDisplacement: s,
-    isFirefox: e,
-    prefersReducedMotion: o,
-    prefersReducedTransparency: a,
-    prefersContrastMore: i,
-    canRefract: t && s
+    Rx: r,
+    Ry: u,
+    scaleX: h > 0 ? 0.5 / h : 1,
+    scaleY: f > 0 ? 0.5 / f : 1
   };
-}
-function cn() {
-  const [n, t] = C(
-    xt
+}, Or = (t, e, s) => {
+  const n = Math.min(t, e * 0.999);
+  return n / Math.sqrt(e * e - n * n) * s;
+}, Qt = (t, e) => `${t} 0 0 0 ${0.5 * (1 - t)}  0 ${e} 0 0 ${0.5 * (1 - e)}  0 0 1 0 0  0 0 0 1 0`, lr = /* @__PURE__ */ new Map(), xr = (t, e, s) => {
+  const n = Math.max(1, Math.round(t)), r = Math.max(1, Math.round(e)), u = Math.max(
+    0,
+    Math.min(Math.round(s), Math.min(n, r) / 2)
+  ), h = `rr·${n}·${r}·${u}`, f = lr.get(h);
+  if (f) return { uri: f, key: h };
+  const l = 0.5, i = Math.max(0, n - 2 * l), k = Math.max(0, r - 2 * l), I = Math.max(0, u - l), m = `<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 ${n} ${r}'><rect fill='black' rx='${I}' ry='${I}' x='${l}' y='${l}' width='${i}' height='${k}'/></svg>`, d = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(m)}`;
+  return lr.set(h, d), { uri: d, key: h };
+}, Nr = (t, e, s) => {
+  const n = Math.max(1, Math.round(t)), r = Math.max(1, Math.round(e)), u = Math.max(
+    0,
+    Math.min(Math.round(s), Math.floor(Math.min(n, r) / 2))
   );
-  return N(() => {
-    t(an());
-  }, []), n;
-}
-function ue(n, t, e, r, s) {
-  const o = e / 2, a = r / 2, i = Math.max(0, Math.min(s, Math.min(o, a))), c = Math.abs(n) - (o - i), u = Math.abs(t) - (a - i), g = Math.max(c, 0), b = Math.max(u, 0), h = Math.sqrt(g * g + b * b), f = Math.min(Math.max(c, u), 0);
-  return h + f - i;
-}
-function de(n, t, e) {
-  if (n === t) return e < n ? 0 : 1;
-  const r = Math.max(0, Math.min(1, (e - n) / (t - n)));
-  return r * r * (3 - 2 * r);
-}
-function rt(n) {
-  const t = Math.round(128 + n * 127);
-  return t < 0 ? 0 : t > 255 ? 255 : t;
-}
-function ln(n, t, e) {
-  const r = new Uint8ClampedArray(t * e * 4), s = t / 2, o = e / 2, a = Math.min(t, e) * 0.35;
-  for (let i = 0; i < e; i++)
-    for (let c = 0; c < t; c++) {
-      const u = c + 0.5 - s, g = i + 0.5 - o;
-      let b = 0, h = 0;
-      if (n === "polar") {
-        const l = Math.sqrt(u * u + g * g), m = ue(u, g, t, e, a), p = de(-Math.min(t, e) * 0.5, 0, m), R = l === 0 ? 0 : u / l, S = l === 0 ? 0 : g / l;
-        b = R * p * 0.9, h = S * p * 0.9;
-      } else {
-        let l, m, p;
-        n === "standard" ? (l = -Math.min(t, e) * 0.18, m = 0, p = 0.7) : n === "prominent" ? (l = -Math.min(t, e) * 0.4, m = 0, p = 1) : (l = -Math.min(t, e) * 0.1, m = Math.min(t, e) * 0.04, p = 0.85);
-        const R = ue(u - 1, g, t, e, a), S = ue(u + 1, g, t, e, a), T = ue(u, g - 1, t, e, a), v = ue(u, g + 1, t, e, a), E = de(l, m, R), ne = de(l, m, S), re = de(l, m, T), G = de(l, m, v);
-        b = (ne - E) * 0.5 * p, h = (G - re) * 0.5 * p;
+  return xr(n, r, u);
+}, Xt = (t) => (0.5 + t) * 255 + 0.5 | 0, ur = (t) => 127 * t + 128 + 0.5 | 0, Zt = (t) => {
+  let e = null, s = null, n = null, r = null, u = -1 / 0, h = -1 / 0, f = -1 / 0, l = 0, i = !0, k = null;
+  return {
+    generate(I) {
+      e || (e = document.createElement("canvas"), e.width = t, e.height = t, s = e.getContext("2d"), n = s.createImageData(t, t));
+      const {
+        lensHalfWidth: m,
+        lensHalfHeight: d,
+        borderRadius: R,
+        depth: G,
+        clipToShape: $,
+        softEdge: F,
+        sheenAngle: Y = 45,
+        glow: H = 0,
+        glowSpread: x = 1,
+        glowFalloff: K = 1.5,
+        sheen: O = 0,
+        sheenWidth: S = 3,
+        sheenFalloff: E = 1.5,
+        curvature: y = 0,
+        splay: X = 0,
+        bend: C = 0,
+        bendWidth: N = 0.16
+      } = I, _ = n.data, W = t >> 1, B = Math.min(R, Math.min(m, d)), c = Math.min(m, d), V = Math.min(G * c, c - 1), J = Math.max(0, m - V), M = Math.max(0, d - V), T = Math.max(
+        0,
+        Math.min(R, Math.min(J, M))
+      ), q = V > 0 ? Math.SQRT1_2 / V : 1e6, re = H > 0 || O > 0, ue = Y * Math.PI / 180, ne = Math.cos(ue), ee = Math.sin(ue), ge = S > 0 ? 1 / S : 0, me = 1 / Math.max(2, x * Math.min(m, d)), ye = 2 * m / t, D = 2 * d / t, j = 1 / m, g = 1 / d, Q = y > 0, se = y * Math.min(m, d), A = X > 0, De = C > 0, ve = 1 / Math.max(2, N * Math.min(m, d)), P = (he, de) => he > 0 || de > 0 ? Math.sqrt(he * he + de * de) : 0;
+      if (Q && ((!k || Math.abs(se - u) > 0.5 || Math.abs(m - h) > 1 || Math.abs(d - f) > 1) && (k = Ur(se, m, d), u = se, h = m, f = d, i = !0), l !== W && (r = new Float32Array(W), l = W, i = !0), i)) {
+        const he = r, de = k, Te = de.Rx * de.Rx, Ge = de.Rx * (1 - 1e-3);
+        for (let b = 0; b < W; b += 1) {
+          const Ae = -((b + 0.5) * ye - m), Xe = Ae < Ge ? Ae : Ge;
+          he[b] = Xe / Math.sqrt(Te - Xe * Xe) * de.scaleX;
+        }
+        i = !1;
       }
-      const f = (i * t + c) * 4;
-      r[f] = rt(b), r[f + 1] = 0, r[f + 2] = rt(h), r[f + 3] = 255;
+      const Z = Q ? r : null, Re = 0.5 * Math.min(m, d), Ne = Re > 0 ? 1 / Re : 0, Ve = Math.SQRT1_2;
+      for (let he = 0; he < W; he += 1) {
+        const de = t - 1 - he, Te = -((he + 0.5) * D - d), Ge = Te - d + B, b = F ? Te - M + T : 0, Ae = Q && Z ? Or(Te, k.Ry, k.scaleY) : Te * g > 1 ? 1 : Te * g, Xe = Te * g > 1 ? 1 : Te * g, $e = A ? Math.max(0, 1 - (d - Te) * Ne) : 0, _e = he * t, nt = de * t;
+        for (let Ue = 0; Ue < W; Ue += 1) {
+          const et = t - 1 - Ue, He = -((Ue + 0.5) * ye - m), ke = He - m + B, v = P(ke > 0 ? ke : 0, Ge > 0 ? Ge : 0) + (ke > Ge ? ke > 0 ? 0 : ke : Ge > 0 ? 0 : Ge) - B, fe = (_e + Ue) * 4, pe = (_e + et) * 4, we = (nt + Ue) * 4, je = (nt + et) * 4;
+          if ($ && v >= 0) {
+            for (const ce of [fe, pe, we, je])
+              _[ce] = 128, _[ce + 1] = 128, _[ce + 2] = 128, _[ce + 3] = 255;
+            continue;
+          }
+          let w = Z ? Z[Ue] : He * j > 1 ? 1 : He * j, z = Ae;
+          if (A) {
+            const ce = $e * X, Ce = Math.max(0, 1 - (m - He) * Ne) * X;
+            if (ce > 1e-3 || Ce > 1e-3) {
+              const st = w, Be = z;
+              w = st * (1 - ce), z = Be * (1 - Ce);
+              const it = Math.sqrt(st * st + Be * Be), gt = Math.sqrt(w * w + z * z);
+              if (gt > 1e-3) {
+                const Ct = it / gt;
+                w *= Ct, z *= Ct;
+              }
+            }
+          }
+          let ae = 1;
+          if (F) {
+            const ce = He - J + T, Ce = P(ce > 0 ? ce : 0, b > 0 ? b : 0) + (ce > b ? ce > 0 ? 0 : ce : b > 0 ? 0 : b) - T;
+            ae = 0.5 * (1 + Pr(Ce * q));
+          }
+          let Ie = 0.5 * w * ae, We = 0.5 * z * ae;
+          if (De) {
+            const ce = v < 0 ? Math.max(0, 1 + v * ve) : 0;
+            if (ce > 0) {
+              const Ce = Math.sqrt(w * w + z * z);
+              if (Ce > 1e-4) {
+                const st = 6.75 * ce * ce * (1 - ce), Be = 0.5 * C * st * ae / Ce;
+                Ie += w * Be, We += z * Be;
+              }
+            }
+          }
+          let Fe = 0, Le = 0;
+          if (re) {
+            const ce = He * j > 1 ? 1 : He * j, Ce = Math.min(
+              1,
+              Math.abs(ce * ne + Xe * ee) * Ve
+            ), st = Math.min(
+              1,
+              Math.abs(ce * ne - Xe * ee) * Ve
+            );
+            if (O > 0) {
+              const Be = v < 0 ? Math.max(0, 1 + v * ge) : 0, it = O * Math.pow(Be, E);
+              Fe += it * (0.16 + 0.84 * Math.pow(Ce, 1.6)), Le += it * (0.16 + 0.84 * Math.pow(st, 1.6));
+            }
+            if (H > 0) {
+              const it = 1 - (v < 0 ? Math.min(1, -v * me) : 1), gt = H * Math.pow(it * it * (3 - 2 * it), K) * ae;
+              Fe += gt * (0.6 + 0.4 * Ce), Le += gt * (0.6 + 0.4 * st);
+            }
+            Fe > 1 ? Fe = 1 : Fe < -1 && (Fe = -1), Le > 1 ? Le = 1 : Le < -1 && (Le = -1);
+          }
+          const ze = Xt(Ie), pt = Xt(-Ie), Oe = Xt(We), wt = Xt(-We), tt = ur(Fe), at = ur(Le);
+          _[fe] = ze, _[fe + 1] = Oe, _[fe + 2] = tt, _[fe + 3] = 255, _[pe] = pt, _[pe + 1] = Oe, _[pe + 2] = at, _[pe + 3] = 255, _[we] = ze, _[we + 1] = wt, _[we + 2] = at, _[we + 3] = 255, _[je] = pt, _[je + 1] = wt, _[je + 2] = tt, _[je + 3] = 255;
+        }
+      }
+      return s.putImageData(n, 0, 0), e.toDataURL();
+    },
+    dispose() {
+      e && (e.width = 0, e.height = 0, e = null), s = null, n = null, r = null, k = null, u = -1 / 0, h = -1 / 0, f = -1 / 0, l = 0, i = !0;
     }
-  return r;
-}
-const un = (() => {
-  const n = new Uint32Array(256);
-  for (let t = 0; t < 256; t++) {
-    let e = t;
-    for (let r = 0; r < 8; r++)
-      e = e & 1 ? 3988292384 ^ e >>> 1 : e >>> 1;
-    n[t] = e >>> 0;
-  }
-  return n;
-})();
-function dn(n) {
-  let t = 4294967295;
-  for (let e = 0; e < n.length; e++)
-    t = un[(t ^ n[e]) & 255] ^ t >>> 8;
-  return (t ^ 4294967295) >>> 0;
-}
-function fn(n) {
-  let t = 1, e = 0;
-  const r = 65521;
-  for (let s = 0; s < n.length; s++)
-    t = (t + n[s]) % r, e = (e + t) % r;
-  return (e << 16 | t) >>> 0;
-}
-function mn(n) {
-  const e = Math.max(1, Math.ceil(n.length / 65535)), r = new Uint8Array(2 + e * 5 + n.length + 4);
-  let s = 0;
-  r[s++] = 120, r[s++] = 1;
-  let o = 0;
-  do {
-    const i = Math.min(n.length - o, 65535), c = o + i >= n.length;
-    r[s++] = c ? 1 : 0, r[s++] = i & 255, r[s++] = i >>> 8 & 255;
-    const u = ~i & 65535;
-    r[s++] = u & 255, r[s++] = u >>> 8 & 255, r.set(n.subarray(o, o + i), s), s += i, o += i;
-  } while (o < n.length);
-  const a = fn(n);
-  return r[s++] = a >>> 24 & 255, r[s++] = a >>> 16 & 255, r[s++] = a >>> 8 & 255, r[s++] = a & 255, r;
-}
-function Ie(n, t) {
-  const e = t.length, r = new Uint8Array(12 + e);
-  r[0] = e >>> 24 & 255, r[1] = e >>> 16 & 255, r[2] = e >>> 8 & 255, r[3] = e & 255, r[4] = n.charCodeAt(0), r[5] = n.charCodeAt(1), r[6] = n.charCodeAt(2), r[7] = n.charCodeAt(3), r.set(t, 8);
-  const s = dn(r.subarray(4, 8 + e));
-  return r[8 + e] = s >>> 24 & 255, r[9 + e] = s >>> 16 & 255, r[10 + e] = s >>> 8 & 255, r[11 + e] = s & 255, r;
-}
-function At(n, t, e) {
-  const r = t * 4, s = new Uint8Array(e * (r + 1));
-  for (let l = 0; l < e; l++) {
-    const m = l * (r + 1);
-    s[m] = 0, s.set(n.subarray(l * r, l * r + r), m + 1);
+  };
+}, xe = (t) => typeof t == "object" && t !== null && "get" in t && "on" in t, Pe = (t) => xe(t) ? t.get() : t, $r = class {
+  constructor(t) {
+    this.subscribers = [], this.current = t;
   }
-  const o = mn(s), a = new Uint8Array(13);
-  a[0] = t >>> 24 & 255, a[1] = t >>> 16 & 255, a[2] = t >>> 8 & 255, a[3] = t & 255, a[4] = e >>> 24 & 255, a[5] = e >>> 16 & 255, a[6] = e >>> 8 & 255, a[7] = e & 255, a[8] = 8, a[9] = 6, a[10] = 0, a[11] = 0, a[12] = 0;
-  const i = Uint8Array.from([137, 80, 78, 71, 13, 10, 26, 10]), c = Ie("IHDR", a), u = Ie("IDAT", o), g = Ie("IEND", new Uint8Array(0)), b = i.length + c.length + u.length + g.length, h = new Uint8Array(b);
-  let f = 0;
-  for (const l of [i, c, u, g])
-    h.set(l, f), f += l.length;
-  return h;
-}
-const D = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-function Ct(n) {
-  let t = "", e = 0;
-  for (; e + 2 < n.length; e += 3) {
-    const s = n[e] << 16 | n[e + 1] << 8 | n[e + 2];
-    t += D.charAt(s >>> 18 & 63) + D.charAt(s >>> 12 & 63) + D.charAt(s >>> 6 & 63) + D.charAt(s & 63);
+  get() {
+    return this.current;
   }
-  const r = n.length - e;
-  if (r === 1) {
-    const s = n[e] << 16;
-    t += `${D.charAt(s >>> 18 & 63)}${D.charAt(s >>> 12 & 63)}==`;
-  } else if (r === 2) {
-    const s = n[e] << 16 | n[e + 1] << 8;
-    t += `${D.charAt(s >>> 18 & 63)}${D.charAt(s >>> 12 & 63)}${D.charAt(s >>> 6 & 63)}=`;
+  set(t) {
+    if (t !== this.current) {
+      this.current = t;
+      for (const e of this.subscribers.slice()) e(t);
+    }
   }
-  return t;
-}
-function pn() {
-  const n = new Uint8ClampedArray([0, 0, 0, 0]);
-  return `data:image/png;base64,${Ct(At(n, 1, 1))}`;
-}
-const gn = 32, ke = 16, q = /* @__PURE__ */ new Map();
-function st(n) {
-  return Math.max(ke, Math.round(n / ke) * ke);
-}
-function hn(n, t, e) {
-  if (!Number.isFinite(t) || !Number.isFinite(e) || t <= 0 || e <= 0)
-    return pn();
-  const r = st(t), s = st(e), o = `${n}:${r}x${s}`, a = q.get(o);
-  if (a !== void 0)
-    return q.delete(o), q.set(o, a), a;
-  const i = ln(n, r, s), c = `data:image/png;base64,${Ct(At(i, r, s))}`;
-  if (q.set(o, c), q.size > gn) {
-    const u = q.keys().next().value;
-    u !== void 0 && q.delete(u);
+  on(t, e) {
+    return this.subscribers.push(e), () => {
+      const s = this.subscribers.indexOf(e);
+      s !== -1 && this.subscribers.splice(s, 1);
+    };
   }
-  return c;
-}
-const bn = [
-  "inset 0 1px 1px 0 rgba(255, 255, 255, 0.75)",
-  "inset 1px 0 1px 0 rgba(255, 255, 255, 0.4)",
-  "inset 0 -1px 2px 0 rgba(0, 0, 0, 0.18)",
-  "inset -1px 0 2px 0 rgba(0, 0, 0, 0.12)",
-  "inset 0 0 0 1px rgba(255, 255, 255, 0.22)"
-].join(", "), yn = [
-  "inset 0 1px 1px 0 rgba(255, 255, 255, 0.35)",
-  "inset 1px 0 1px 0 rgba(255, 255, 255, 0.18)",
-  "inset 0 -1px 2px 0 rgba(0, 0, 0, 0.55)",
-  "inset -1px 0 2px 0 rgba(0, 0, 0, 0.45)",
-  "inset 0 0 0 1px rgba(255, 255, 255, 0.1)"
-].join(", ");
-function ye(n) {
-  return n === "dark" ? yn : bn;
-}
-const Rn = 200, Sn = 300, ot = 0.3, at = 0.15, it = 0.8, ct = 0.1;
-function De(n, t, e) {
-  return Math.min(e, Math.max(t, n));
-}
-function Et(n) {
-  return Number.isFinite(n) ? De(1 - n / Rn, 0, 1) : 0;
-}
-function vn(n, t, e, r, s) {
-  if (!(s > 0))
-    return { scaleX: 1, scaleY: 1 };
-  const o = n - e, a = t - r, i = Math.hypot(o, a);
-  if (i === 0 || !Number.isFinite(i))
-    return { scaleX: 1, scaleY: 1 };
-  const c = Et(i);
-  if (c === 0)
-    return { scaleX: 1, scaleY: 1 };
-  const u = o / i, g = a / i, b = Math.abs(u), h = Math.abs(g), f = Math.min(i / Sn, 1) * s * c, l = De(
-    1 + b * f * ot - h * f * at,
-    it,
-    Number.POSITIVE_INFINITY
-  ), m = De(
-    1 + h * f * ot - b * f * at,
-    it,
-    Number.POSITIVE_INFINITY
-  );
-  return { scaleX: l, scaleY: m };
-}
-function xn(n, t, e, r, s) {
-  if (!(s > 0))
-    return { x: 0, y: 0 };
-  const o = n - e, a = t - r, i = Math.hypot(o, a);
-  if (i === 0 || !Number.isFinite(i))
-    return { x: 0, y: 0 };
-  const c = Et(i);
-  return c === 0 ? { x: 0, y: 0 } : {
-    x: o * s * ct * c,
-    y: a * s * ct * c
+}, be = (t) => new $r(t), dt = (t, e) => {
+  const s = be(e()), n = () => s.set(e());
+  for (const r of t) r.on("change", n);
+  return s;
+}, Lt = (t, e, s, n) => {
+  const r = 3 * t, u = 3 * (s - t) - r, h = 1 - r - u, f = 3 * e, l = 3 * (n - e) - f, i = 1 - f - l, k = (R) => ((h * R + u) * R + r) * R, I = (R) => ((i * R + l) * R + f) * R, m = (R) => (3 * h * R + 2 * u) * R + r, d = (R) => {
+    let G = R;
+    for (let Y = 0; Y < 8; Y += 1) {
+      const H = k(G) - R;
+      if (Math.abs(H) < 1e-6) return G;
+      const x = m(G);
+      if (Math.abs(x) < 1e-6) break;
+      G -= H / x;
+    }
+    let $ = 0, F = 1;
+    for (G = R; $ < F; ) {
+      const Y = k(G);
+      if (Math.abs(Y - R) < 1e-6 || (Y < R ? $ = G : F = G, F - $ < 1e-7)) break;
+      G = ($ + F) / 2;
+    }
+    return G;
   };
-}
-const O = {
-  displacementScale: 70,
-  blurAmount: 0.0625,
-  saturation: 140,
-  aberrationIntensity: 2,
-  cornerRadius: 999,
-  mode: "standard",
-  padding: "24px 32px",
-  elasticity: 0.15
-}, An = 16, Cn = {
-  light: "rgba(255, 255, 255, 0.75)",
-  dark: "rgba(30, 30, 35, 0.75)"
-}, En = {
-  light: "rgba(255, 255, 255, 0.92)",
-  dark: "rgba(30, 30, 35, 0.92)"
-}, wn = {
-  light: "rgba(0, 0, 0, 0.92)",
-  dark: "rgba(255, 255, 255, 0.92)"
-}, Mn = 2, Nn = {
-  light: "rgba(255, 255, 255, 0.92)",
-  dark: "rgba(22, 22, 26, 0.92)"
-}, Tn = 100, he = {
-  light: "rgba(255, 255, 255, 0.96)",
-  dark: "rgba(17, 17, 20, 0.96)"
-}, lt = "50%", ut = "0%", dt = { rest: 0.55, hover: 0.85 }, In = "70%", ft = 0.5, kn = "60%", mt = {
-  /** Conservative fallback: byte-for-byte the existing static shadow. */
-  static: 1,
-  /** Dark/dense backdrop ⇒ deeper, darker shadow. */
-  dark: 1.35,
-  /** Light/solid backdrop ⇒ shallower, lighter shadow. */
-  light: 0.7
-}, pt = {
-  rest: [
-    { y: 8, blur: 24, alpha: 0.22 },
-    { y: 1, blur: 4, alpha: 0.14 }
-  ],
-  hover: [
-    { y: 12, blur: 32, alpha: 0.28 },
-    { y: 2, blur: 8, alpha: 0.18 }
-  ]
-}, Ln = {
-  regular: {
-    /** Multiplier on the requested `saturation` (1 = unchanged). */
-    saturationFactor: 1,
-    /** Force the adaptive-tint path off regardless of `adaptiveTint`. */
-    forceNonAdaptive: !1,
-    /** Scheme-aware dimming-scrim color behind the content, or `null` for none. */
-    scrim: null
-  },
-  clear: {
-    // Reduce the tint/vibrancy so the material reads as clearer (more of the
-    // backdrop shows through), per the Clear aesthetic.
-    saturationFactor: 0.7,
-    // Clear has NO adaptive behavior by definition — it never samples.
-    forceNonAdaptive: !0,
-    // A subtle scheme-aware scrim so foreground labels stay readable over busy
-    // media even though the surface itself is more transparent.
-    scrim: {
-      light: "rgba(0, 0, 0, 0.18)",
-      dark: "rgba(0, 0, 0, 0.28)"
+  return (R) => R <= 0 ? 0 : R >= 1 ? 1 : I(d(R));
+}, Hr = Lt(0.34, 1.36, 0.42, 1), It = /* @__PURE__ */ new WeakMap(), zr = (t, e, {
+  duration: s = 0.3,
+  ease: n = Hr,
+  onComplete: r
+} = {}) => {
+  var I;
+  (I = It.get(t)) == null || I.stop();
+  const u = t.get();
+  if (u === e || s <= 0)
+    return t.set(e), r == null || r(), { stop() {
+    } };
+  const h = s * 1e3;
+  let f = 0, l = 0;
+  const i = (m) => {
+    l === 0 && (l = m);
+    const d = (m - l) / h;
+    if (d >= 1) {
+      t.set(e), It.delete(t), r == null || r();
+      return;
     }
-  }
-}, Fn = "rgba(255, 255, 255, 0.1)", gt = {
-  /** Inset ring color (translucent white). */
-  color: "rgba(255, 255, 255, 0.5)",
-  /** Ring width in px (hairline). */
-  width: 1
-}, B = {
-  luminance: null,
-  scheme: null,
-  sampled: !1
-}, _n = 0.5;
-function Le(n) {
-  const t = n / 255;
-  return t <= 0.03928 ? t / 12.92 : ((t + 0.055) / 1.055) ** 2.4;
-}
-function Dn(n, t, e) {
-  const r = Le(n), s = Le(t), o = Le(e);
-  return 0.2126 * r + 0.7152 * s + 0.0722 * o;
-}
-function $n(n) {
-  return n >= _n ? "light" : "dark";
-}
-function wt(n) {
-  const t = Dn(n.r, n.g, n.b);
-  return {
-    luminance: t,
-    scheme: $n(t),
-    sampled: !0
+    t.set(u + (e - u) * n(d)), f = requestAnimationFrame(i);
   };
-}
-function On(n) {
-  if (!n)
-    return { r: 0, g: 0, b: 0, a: 0 };
-  const t = n.trim().toLowerCase();
-  if (t === "transparent" || t === "none")
-    return { r: 0, g: 0, b: 0, a: 0 };
-  const e = t.match(/rgba?\(([^)]+)\)/);
-  if (!(e != null && e[1]))
-    return { r: 0, g: 0, b: 0, a: 0 };
-  const r = e[1].split(/[\s,/]+/).filter(Boolean);
-  if (r.length < 3)
-    return { r: 0, g: 0, b: 0, a: 0 };
-  const s = Fe(Number.parseFloat(r[0])), o = Fe(Number.parseFloat(r[1])), a = Fe(Number.parseFloat(r[2]));
-  let i = 1;
-  const c = r[3];
-  return c !== void 0 && (i = c.endsWith("%") ? Number.parseFloat(c) / 100 : Number.parseFloat(c), Number.isFinite(i) || (i = 1)), { r: s, g: o, b: a, a: Bn(i) };
-}
-function Fe(n) {
-  return Number.isFinite(n) ? Math.max(0, Math.min(255, Math.round(n))) : 0;
-}
-function Bn(n) {
-  return Math.max(0, Math.min(1, n));
-}
-function Gn(n, t) {
-  const e = n.a;
-  return {
-    r: n.r * e + t.r * (1 - e),
-    g: n.g * e + t.g * (1 - e),
-    b: n.b * e + t.b * (1 - e)
+  f = requestAnimationFrame(i);
+  const k = {
+    stop() {
+      cancelAnimationFrame(f), It.delete(t);
+    }
   };
+  return It.set(t, k), k;
+}, Ht = `#version 300 es
+in vec2 a_pos;
+out vec2 v_uv;
+void main() {
+  // a_pos is a -1..1 fullscreen quad; v_uv is bottom-left-origin 0..1, which
+  // (with UNPACK_FLIP_Y on the textures) samples the source upright. The lens
+  // descriptor is supplied in this same bottom-left space by the component.
+  v_uv = a_pos * 0.5 + 0.5;
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}`, Yr = `#version 300 es
+precision highp float;
+in vec2 v_uv;
+out vec4 o;
+uniform sampler2D u_src;
+void main() { o = texture(u_src, v_uv); }`, qr = `#version 300 es
+precision highp float;
+in vec2 v_uv;
+out vec4 o;
+uniform sampler2D u_src;
+uniform vec2 u_step;
+void main() {
+  vec4 c = texture(u_src, v_uv) * 0.1857;
+  c += (texture(u_src, v_uv + u_step)       + texture(u_src, v_uv - u_step))       * 0.1671;
+  c += (texture(u_src, v_uv + 2.0 * u_step) + texture(u_src, v_uv - 2.0 * u_step)) * 0.1227;
+  c += (texture(u_src, v_uv + 3.0 * u_step) + texture(u_src, v_uv - 3.0 * u_step)) * 0.0768;
+  c += (texture(u_src, v_uv + 4.0 * u_step) + texture(u_src, v_uv - 4.0 * u_step)) * 0.0414;
+  o = c;
+}`, Kr = `#version 300 es
+precision highp float;
+in vec2 v_uv;
+out vec4 o;
+uniform sampler2D u_src;
+uniform sampler2D u_blur;
+uniform sampler2D u_disp;
+uniform vec2 u_origin;
+uniform vec2 u_size;
+uniform vec2 u_scale;
+uniform vec2 u_lenspx;   // lens box size in device px (for an aspect-correct SDF)
+uniform float u_radiuspx; // corner radius in device px
+uniform float u_dispersion;
+uniform float u_sheen;
+uniform float u_frost;    // 0 = sharp; >0 = blend toward the pre-blurred copy
+uniform float u_opacity;  // enter/exit fade (multiplies coverage)
+uniform float u_brightness; // white(>0)/black(<0) veil over the lens
+// Signed distance to a rounded rectangle (negative inside). Computed in pixel
+// space so the corner radius stays circular on non-square lenses. NB: the half-
+// extent arg must NOT be named \`half\` — that's a reserved word in GLSL ES and
+// Safari's (stricter) WebGL2 compiler rejects it, throwing at renderer init.
+float sdRoundRect(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
 }
-function Pn(n, t) {
-  try {
-    return n(t);
-  } catch {
-    return B;
-  }
+// Source sample, blended toward the frosted (pre-blurred) copy by mixAmt. The
+// frost is what makes the glass read as liquid rather than a clear lens.
+vec3 frosted(vec2 p, float mixAmt) {
+  vec3 raw = texture(u_src, p).rgb;
+  return mixAmt > 0.0 ? mix(raw, texture(u_blur, p).rgb, mixAmt) : raw;
 }
-function Un(n, t) {
-  if (typeof document > "u" || typeof document.elementsFromPoint != "function" || typeof getComputedStyle != "function")
-    return B;
-  const e = document.elementsFromPoint(n.x, n.y);
-  if (!e || e.length === 0)
-    return B;
-  let r = { r: 255, g: 255, b: 255 };
-  const s = [];
-  for (const o of e) {
-    if (t && (o === t || t.contains(o)))
-      continue;
-    const a = getComputedStyle(o), i = a.backgroundImage && a.backgroundImage !== "none", c = On(a.backgroundColor);
-    if (i) {
-      s.push({ r: 128, g: 128, b: 128, a: 1 });
-      break;
+void main() {
+  vec2 lensUV = (v_uv - u_origin) / u_size;
+  // Rounded-rect coverage. The SDF is in device px and a true distance field
+  // (gradient ~1), so a fixed ~1px feather anti-aliases the edge without fwidth
+  // (derivatives are handled inconsistently across WebGL2 backends).
+  vec2 p = (lensUV - 0.5) * u_lenspx;
+  float sdf = sdRoundRect(p, u_lenspx * 0.5, min(u_radiuspx, min(u_lenspx.x, u_lenspx.y) * 0.5));
+  float coverage = (1.0 - smoothstep(-1.0, 1.0, sdf)) * u_opacity;
+  if (coverage <= 0.0) discard;
+  vec4 d = texture(u_disp, clamp(lensUV, 0.0, 1.0));
+  vec2 disp = (d.rg - 0.5) * u_scale;            // feDisplacementMap equivalent
+  // RGB split — red bent DISPERSION_SPREAD more than blue, green half that (keep
+  // in sync with DISPERSION_SPREAD in displacement.ts so DOM + WebGL match).
+  vec2 uvR = v_uv + disp * (1.0 + u_dispersion * 0.22);
+  vec2 uvG = v_uv + disp * (1.0 + u_dispersion * 0.11);
+  vec2 uvB = v_uv + disp;
+  vec3 lensCol = vec3(frosted(uvR, u_frost).r, frosted(uvG, u_frost).g, frosted(uvB, u_frost).b);
+  // Specular lift from B. The map encodes spec as B = 127·s + 128, so (B/255 − 0.5)
+  // = 0.498·s; this matches the DOM path's gain exactly (feColorMatrix 1× alpha
+  // then feComposite k2=specular → 0.498·specular·s). (NOT ×2 — that double-lifted it.)
+  lensCol += u_sheen * max(0.0, d.b - 0.5);
+  // Brightness veil (alpha-blend toward white/black, like the DOM path).
+  if (u_brightness > 0.0) lensCol = mix(lensCol, vec3(1.0), clamp(u_brightness, 0.0, 1.0));
+  else if (u_brightness < 0.0) lensCol = mix(lensCol, vec3(0.0), clamp(-u_brightness, 0.0, 1.0));
+  // Mix over the untouched backdrop by the coverage → an AA'd, frosted-clipping
+  // silhouette. Canvas stays fully opaque, so straight/premultiplied alpha is moot.
+  vec3 backdrop = texture(u_src, v_uv).rgb;
+  o = vec4(mix(backdrop, lensCol, coverage), 1.0);
+}`, hr = (t, e, s) => {
+  const n = t.createShader(e);
+  if (t.shaderSource(n, s), t.compileShader(n), !t.getShaderParameter(n, t.COMPILE_STATUS)) {
+    const r = t.getShaderInfoLog(n);
+    throw t.deleteShader(n), new Error(`glass-webgl shader: ${r}`);
+  }
+  return n;
+}, zt = (t, e, s) => {
+  const n = t.createProgram(), r = hr(t, t.VERTEX_SHADER, e), u = hr(t, t.FRAGMENT_SHADER, s);
+  if (t.attachShader(n, r), t.attachShader(n, u), t.bindAttribLocation(n, 0, "a_pos"), t.linkProgram(n), t.deleteShader(r), t.deleteShader(u), !t.getProgramParameter(n, t.LINK_STATUS)) {
+    const h = t.getProgramInfoLog(n);
+    throw t.deleteProgram(n), new Error(`glass-webgl link: ${h}`);
+  }
+  return n;
+}, Vr = class {
+  constructor(t) {
+    this.dispCache = /* @__PURE__ */ new Map(), this.blurW = 0, this.blurH = 0, this.srcW = 0, this.srcH = 0, this.disposed = !1;
+    const e = t.getContext("webgl2", {
+      premultipliedAlpha: !1,
+      alpha: !0,
+      antialias: !1,
+      preserveDrawingBuffer: !1
+    });
+    if (!e) throw new Error("webgl2 unavailable");
+    this.gl = e, this.blit = zt(e, Ht, Yr), this.lens = zt(e, Ht, Kr), this.blur = zt(e, Ht, qr), this.quad = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.quad), e.bufferData(
+      e.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      e.STATIC_DRAW
+    );
+    const s = () => {
+      const n = e.createTexture();
+      return e.bindTexture(e.TEXTURE_2D, n), 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), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), n;
+    };
+    this.srcTex = s(), this.dispTex = s(), this.blurTex = [s(), s()], this.fbo = [e.createFramebuffer(), e.createFramebuffer()], e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !1), e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, !0), this.uBlitSrc = e.getUniformLocation(this.blit, "u_src"), this.uBlur = {
+      src: e.getUniformLocation(this.blur, "u_src"),
+      step: e.getUniformLocation(this.blur, "u_step")
+    }, this.uLens = {
+      src: e.getUniformLocation(this.lens, "u_src"),
+      blur: e.getUniformLocation(this.lens, "u_blur"),
+      disp: e.getUniformLocation(this.lens, "u_disp"),
+      origin: e.getUniformLocation(this.lens, "u_origin"),
+      size: e.getUniformLocation(this.lens, "u_size"),
+      scale: e.getUniformLocation(this.lens, "u_scale"),
+      lenspx: e.getUniformLocation(this.lens, "u_lenspx"),
+      radiuspx: e.getUniformLocation(this.lens, "u_radiuspx"),
+      dispersion: e.getUniformLocation(this.lens, "u_dispersion"),
+      specular: e.getUniformLocation(this.lens, "u_sheen"),
+      frost: e.getUniformLocation(this.lens, "u_frost"),
+      opacity: e.getUniformLocation(this.lens, "u_opacity"),
+      brightness: e.getUniformLocation(this.lens, "u_brightness")
+    };
+  }
+  /** (Re)allocate the ping-pong frost targets to the source size. */
+  ensureBlurTargets(t, e) {
+    if (t === this.blurW && e === this.blurH) return;
+    const s = this.gl;
+    for (let n = 0; n < 2; n += 1)
+      s.bindTexture(s.TEXTURE_2D, this.blurTex[n]), s.texImage2D(
+        s.TEXTURE_2D,
+        0,
+        s.RGBA,
+        t,
+        e,
+        0,
+        s.RGBA,
+        s.UNSIGNED_BYTE,
+        null
+      ), s.bindFramebuffer(s.FRAMEBUFFER, this.fbo[n]), s.framebufferTexture2D(
+        s.FRAMEBUFFER,
+        s.COLOR_ATTACHMENT0,
+        s.TEXTURE_2D,
+        this.blurTex[n],
+        0
+      );
+    s.bindFramebuffer(s.FRAMEBUFFER, null), this.blurW = t, this.blurH = e;
+  }
+  /** Two-pass separable blur of the current source texture into blurTex[1]. */
+  renderFrost(t) {
+    const e = this.gl;
+    this.ensureBlurTargets(this.srcW, this.srcH), e.useProgram(this.blur), e.viewport(0, 0, this.srcW, this.srcH), e.activeTexture(e.TEXTURE0), e.uniform1i(this.uBlur.src, 0), e.bindFramebuffer(e.FRAMEBUFFER, this.fbo[0]), e.bindTexture(e.TEXTURE_2D, this.srcTex), e.uniform2f(this.uBlur.step, t / this.srcW, 0), e.drawArrays(e.TRIANGLE_STRIP, 0, 4), e.bindFramebuffer(e.FRAMEBUFFER, this.fbo[1]), e.bindTexture(e.TEXTURE_2D, this.blurTex[0]), e.uniform2f(this.uBlur.step, 0, t / this.srcH), e.drawArrays(e.TRIANGLE_STRIP, 0, 4), e.bindFramebuffer(e.FRAMEBUFFER, null);
+  }
+  /** Upload the displacement-map image (call only when the lens SHAPE changes). */
+  setDisplacementMap(t) {
+    if (this.disposed) return;
+    const e = this.gl;
+    e.bindTexture(e.TEXTURE_2D, this.dispTex), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, t);
+  }
+  /** Texture for a per-lens displacement map, uploaded once and cached by the
+   *  image identity (a lens of a different shape supplies its own map). */
+  dispTexFor(t) {
+    const e = this.gl;
+    let s = this.dispCache.get(t);
+    return s || (s = e.createTexture(), e.bindTexture(e.TEXTURE_2D, s), 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), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, t), this.dispCache.set(t, s)), s;
+  }
+  /** Free a per-lens map texture (its shape is no longer used) so the cache
+   *  can't grow unbounded as a responsive lens re-keys. */
+  releaseDispMap(t) {
+    const e = this.dispCache.get(t);
+    e && (this.gl.deleteTexture(e), this.dispCache.delete(t));
+  }
+  /** Size the drawing buffer (CSS px × dpr). */
+  resize(t, e) {
+    const s = this.gl.canvas;
+    (s.width !== t || s.height !== e) && (s.width = t, s.height = e);
+  }
+  uploadSource(t, e, s) {
+    const n = this.gl;
+    n.bindTexture(n.TEXTURE_2D, this.srcTex), e !== this.srcW || s !== this.srcH ? (n.texImage2D(n.TEXTURE_2D, 0, n.RGBA, n.RGBA, n.UNSIGNED_BYTE, t), this.srcW = e, this.srcH = s) : n.texSubImage2D(n.TEXTURE_2D, 0, 0, 0, n.RGBA, n.UNSIGNED_BYTE, t);
+  }
+  /** Upload `source` once and draw every lens over it. */
+  render(t, e, s, n) {
+    if (this.disposed || e === 0 || s === 0) return;
+    const r = this.gl;
+    this.uploadSource(t, e, s), r.bindBuffer(r.ARRAY_BUFFER, this.quad), r.enableVertexAttribArray(0), r.vertexAttribPointer(0, 2, r.FLOAT, !1, 0, 0), r.disable(r.BLEND);
+    const u = n.reduce((l, i) => Math.max(l, i.blur), 0);
+    u > 0 && this.renderFrost(u);
+    const h = r.canvas.width, f = r.canvas.height;
+    r.viewport(0, 0, h, f), r.useProgram(this.blit), r.activeTexture(r.TEXTURE0), r.bindTexture(r.TEXTURE_2D, this.srcTex), r.uniform1i(this.uBlitSrc, 0), r.drawArrays(r.TRIANGLE_STRIP, 0, 4), r.useProgram(this.lens), r.activeTexture(r.TEXTURE0), r.bindTexture(r.TEXTURE_2D, this.srcTex), r.uniform1i(this.uLens.src, 0), r.activeTexture(r.TEXTURE1), r.bindTexture(r.TEXTURE_2D, this.dispTex), r.uniform1i(this.uLens.disp, 1), r.activeTexture(r.TEXTURE2), r.bindTexture(r.TEXTURE_2D, this.blurTex[1]), r.uniform1i(this.uLens.blur, 2);
+    for (const l of n) {
+      const i = l.opacity ?? 1;
+      i <= 0 || (r.activeTexture(r.TEXTURE1), r.bindTexture(
+        r.TEXTURE_2D,
+        l.dispMap ? this.dispTexFor(l.dispMap) : this.dispTex
+      ), r.uniform2f(this.uLens.origin, l.originX, l.originY), r.uniform2f(this.uLens.size, l.sizeX, l.sizeY), r.uniform2f(this.uLens.scale, l.scaleX, l.scaleY), r.uniform2f(this.uLens.lenspx, l.sizeX * h, l.sizeY * f), r.uniform1f(this.uLens.radiuspx, (l.cornerRadius ?? 0) * h), r.uniform1f(this.uLens.dispersion, l.dispersion), r.uniform1f(this.uLens.specular, l.specular), r.uniform1f(this.uLens.frost, l.blur > 0 ? Math.min(1, l.blur / 8) : 0), r.uniform1f(this.uLens.opacity, i), r.uniform1f(this.uLens.brightness, l.brightness ?? 0), r.drawArrays(r.TRIANGLE_STRIP, 0, 4));
     }
-    if (c.a > 0 && (s.push(c), c.a >= 1))
-      break;
   }
-  for (let o = s.length - 1; o >= 0; o--) {
-    const a = s[o];
-    a && (r = Gn(a, r));
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = !0;
+    const t = this.gl;
+    t.deleteProgram(this.blit), t.deleteProgram(this.lens), t.deleteProgram(this.blur), t.deleteTexture(this.srcTex), t.deleteTexture(this.dispTex), this.dispCache.forEach((s) => t.deleteTexture(s)), this.dispCache.clear(), t.deleteTexture(this.blurTex[0]), t.deleteTexture(this.blurTex[1]), t.deleteFramebuffer(this.fbo[0]), t.deleteFramebuffer(this.fbo[1]), t.deleteBuffer(this.quad);
+    const e = t.getExtension("WEBGL_lose_context");
+    e == null || e.loseContext();
   }
-  return wt(r);
-}
-function Yn(n, t = {}) {
-  const { strategy: e, ignore: r } = t;
-  return Pn(e ?? ((o) => Un(o, r)), n);
-}
-function br(n, t = 8) {
-  return () => {
-    if (typeof document > "u" || typeof document.createElement != "function")
-      return B;
-    const e = document.createElement("canvas");
-    e.width = t, e.height = t;
-    const r = e.getContext("2d");
-    if (!r)
-      return B;
-    n(r, t, t);
-    const { data: s } = r.getImageData(0, 0, t, t);
-    let o = 0, a = 0, i = 0, c = 0;
-    for (let u = 0; u < s.length; u += 4)
-      o += s[u] ?? 0, a += s[u + 1] ?? 0, i += s[u + 2] ?? 0, c++;
-    return c === 0 ? B : wt({ r: o / c, g: a / c, b: i / c });
-  };
-}
-function Mt(n, t = {}) {
-  const { strategy: e, resampleOnScroll: r = !0, resampleOnResize: s = !0, disabled: o = !1 } = t, [a, i] = C(B), c = te(e);
-  return c.current = e, N(() => {
-    if (o) {
-      i((f) => f.sampled ? B : f);
+}, jr = () => typeof window < "u" && window.devicePixelRatio || 1, Jr = (t) => ({
+  merged: { ...Jt, ...t.lens },
+  lensW: t.lensW,
+  lensH: t.lensH,
+  radius: t.borderRadius,
+  x: t.x,
+  y: t.y,
+  scale: t.scale ?? 1,
+  opacity: t.opacity ?? 1
+}), Qr = (t, e, s, n, r, u) => {
+  const [h, f] = Ke(!1), l = o(null), i = o(null), k = n[0], I = o(n);
+  I.current = n;
+  const m = n.some(
+    (S) => xe(S.x) || xe(S.y) || xe(S.lensW) || xe(S.lensH) || S.radius != null && xe(S.radius)
+  );
+  qe(() => {
+    const S = t.current, E = e.current;
+    if (!S || !E) return;
+    let y;
+    try {
+      y = new Vr(S);
+    } catch (_) {
+      typeof console < "u" && console.warn(
+        "[liquid-glass] WebGL renderer unavailable, falling back:",
+        _
+      ), f(!0);
       return;
     }
-    if (typeof window > "u" || typeof document > "u")
-      return;
-    let u = 0, g = !1;
-    const b = () => {
-      const f = n.current;
-      if (!f)
-        return;
-      const l = f.getBoundingClientRect(), m = {
-        x: l.left + l.width / 2,
-        y: l.top + l.height / 2
-      }, p = Yn(m, {
-        strategy: c.current,
-        ignore: f
-      });
-      g || i(
-        (R) => R.sampled === p.sampled && R.luminance === p.luminance && R.scheme === p.scheme ? R : p
-      );
-    }, h = () => {
-      u || (u = requestAnimationFrame(() => {
-        u = 0, b();
-      }));
+    l.current = y;
+    const X = Math.min(jr(), r), C = () => {
+      const _ = E.clientWidth, W = E.clientHeight;
+      S.style.width = `${_}px`, S.style.height = `${W}px`, y.resize(Math.round(_ * X), Math.round(W * X));
     };
-    return h(), r && window.addEventListener("scroll", h, { passive: !0, capture: !0 }), s && window.addEventListener("resize", h, { passive: !0 }), () => {
-      g = !0, u && cancelAnimationFrame(u), r && window.removeEventListener("scroll", h, { capture: !0 }), s && window.removeEventListener("resize", h);
+    C();
+    const N = new ResizeObserver(C);
+    return N.observe(E), () => {
+      N.disconnect(), y.dispose(), l.current = null;
     };
-  }, [n, o, r, s]), a;
-}
-function Oe(n) {
-  const [t, e] = C(!1);
-  return N(() => {
-    if (typeof window > "u" || typeof window.matchMedia != "function")
-      return;
-    const r = window.matchMedia(n);
-    e(r.matches);
-    const s = (o) => {
-      e(o.matches);
+  }, [t, e, r]);
+  const d = k.merged, R = Pe(k.lensW), G = Pe(k.lensH), $ = k.radius != null ? Pe(k.radius) : Math.min(R, G), F = JSON.stringify([
+    d.mapSize,
+    R,
+    G,
+    $,
+    d.depth,
+    d.clipToShape,
+    d.softEdge,
+    d.curvature,
+    d.splay,
+    d.glow,
+    d.glowSpread,
+    d.glowFalloff,
+    d.sheen,
+    d.sheenWidth,
+    d.sheenFalloff,
+    d.sheenAngle,
+    d.bend,
+    d.bendWidth
+  ]);
+  oe(() => {
+    if (!l.current) return;
+    i.current || (i.current = Zt(d.mapSize));
+    const E = i.current.generate({
+      lensHalfWidth: R,
+      lensHalfHeight: G,
+      borderRadius: $,
+      depth: d.depth,
+      clipToShape: d.clipToShape,
+      softEdge: d.softEdge,
+      sheenAngle: d.sheenAngle,
+      glow: d.glow,
+      glowSpread: d.glowSpread,
+      glowFalloff: d.glowFalloff,
+      sheen: d.sheen,
+      sheenWidth: d.sheenWidth,
+      sheenFalloff: d.sheenFalloff,
+      curvature: d.curvature,
+      splay: d.splay,
+      bend: d.bend,
+      bendWidth: d.bendWidth
+    });
+    let y = !1;
+    const X = new Image();
+    return X.onload = () => {
+      var C;
+      y || (C = l.current) == null || C.setDisplacementMap(X);
+    }, X.src = E, () => {
+      y = !0;
     };
-    return typeof r.addEventListener == "function" ? (r.addEventListener("change", s), () => r.removeEventListener("change", s)) : (r.addListener(s), () => r.removeListener(s));
-  }, [n]), t;
-}
-const Xn = "(prefers-reduced-motion: reduce)";
-function Be() {
-  return Oe(Xn);
-}
-const $e = { x: 0, y: 0 }, ht = {
-  mousePos: $e,
-  offset: $e,
-  isActive: !1
-};
-function bt(n) {
-  return n ? n instanceof HTMLElement ? n : n.current ?? null : null;
-}
-function Hn() {
-  return typeof window > "u" ? !1 : "ontouchstart" in window || ((navigator == null ? void 0 : navigator.maxTouchPoints) ?? 0) > 0;
-}
-function qn(n = {}) {
-  const { container: t, globalMousePos: e, mouseOffset: r, elementRef: s } = n, o = Be(), [a, i] = C(!1), [c, u] = C(ht), g = te({ container: t, elementRef: s });
-  g.current = { container: t, elementRef: s }, N(() => {
-    i(Hn());
-  }, []);
-  const b = o || a, h = e !== void 0;
-  if (N(() => {
-    if (h || b || typeof window > "u" || typeof document > "u")
-      return;
-    const f = (l) => {
-      const { container: m, elementRef: p } = g.current, R = bt(m) ?? (p == null ? void 0 : p.current) ?? null;
-      if (!R)
+  }, [F, h]);
+  const Y = (S) => {
+    const E = S.merged, y = Pe(S.lensW), X = Pe(S.lensH), C = S.radius != null ? Pe(S.radius) : Math.min(y, X);
+    return JSON.stringify([
+      E.mapSize,
+      y,
+      X,
+      C,
+      E.depth,
+      E.clipToShape,
+      E.softEdge,
+      E.curvature,
+      E.splay,
+      E.glow,
+      E.glowSpread,
+      E.glowFalloff,
+      E.sheen,
+      E.sheenWidth,
+      E.sheenFalloff,
+      E.sheenAngle,
+      E.bend,
+      E.bendWidth
+    ]);
+  }, H = n.map(Y), x = o(H);
+  x.current = H;
+  const K = o(/* @__PURE__ */ new Map()), O = H.join("|");
+  return oe(() => {
+    const S = i.current;
+    if (!S) return;
+    const E = new Set(x.current);
+    K.current.forEach((N, _) => {
+      var W;
+      E.has(_) || (K.current.delete(_), (W = l.current) == null || W.releaseDispMap(N));
+    });
+    const y = x.current[0], X = [], C = /* @__PURE__ */ new Set();
+    return n.forEach((N, _) => {
+      const W = x.current[_];
+      if (W === y || C.has(W) || K.current.has(W))
         return;
-      const S = R.getBoundingClientRect(), T = S.left + S.width / 2, v = S.top + S.height / 2;
-      u({
-        mousePos: { x: l.clientX, y: l.clientY },
-        offset: { x: l.clientX - T, y: l.clientY - v },
-        isActive: !0
+      C.add(W);
+      const B = N.merged, c = Pe(N.lensW), V = Pe(N.lensH), J = N.radius != null ? Pe(N.radius) : Math.min(c, V), M = S.generate({
+        lensHalfWidth: c,
+        lensHalfHeight: V,
+        borderRadius: J,
+        depth: B.depth,
+        clipToShape: B.clipToShape,
+        softEdge: B.softEdge,
+        sheenAngle: B.sheenAngle,
+        glow: B.glow,
+        glowSpread: B.glowSpread,
+        glowFalloff: B.glowFalloff,
+        sheen: B.sheen,
+        sheenWidth: B.sheenWidth,
+        sheenFalloff: B.sheenFalloff,
+        curvature: B.curvature,
+        splay: B.splay,
+        bend: B.bend,
+        bendWidth: B.bendWidth
+      });
+      let T = !1;
+      const q = new Image();
+      q.onload = () => {
+        T || K.current.set(W, q);
+      }, q.src = M, X.push(() => {
+        T = !0;
       });
+    }), () => X.forEach((N) => N());
+  }, [O, h]), oe(
+    () => () => {
+      var S;
+      (S = i.current) == null || S.dispose(), i.current = null;
+    },
+    []
+  ), oe(() => {
+    if (h) return;
+    let S = 0, E = 0;
+    const y = u, X = !!y && !m && typeof y.requestVideoFrameCallback == "function", C = () => {
+      const N = l.current, _ = e.current;
+      if (!N || !_) return;
+      const W = s();
+      if (W && W.w > 0 && W.h > 0) {
+        const B = _.clientWidth, c = _.clientHeight, V = Math.sqrt((B * B + c * c) / 2), J = x.current, M = I.current.map((T, q) => {
+          const re = Pe(T.lensW), ue = Pe(T.lensH), ne = T.radius != null ? Pe(T.radius) : Math.min(re, ue), ee = Pe(T.x), ge = Pe(T.y), me = re * T.scale, ye = ue * T.scale, D = q > 0 && J[q] !== J[0], j = D ? K.current.get(J[q]) : void 0, g = D && !j;
+          return {
+            originX: (ee * B - me) / B,
+            originY: 1 - (ge * c + ye) / c,
+            sizeX: 2 * me / B,
+            sizeY: 2 * ye / c,
+            scaleX: g ? 0 : (T.merged.scaleX ?? T.merged.strength) * V / B,
+            scaleY: g ? 0 : (T.merged.scaleY ?? T.merged.strength) * V / c,
+            dispersion: T.merged.dispersion,
+            specular: T.merged.specular,
+            blur: T.merged.frost,
+            cornerRadius: ne * T.scale / B,
+            opacity: T.opacity,
+            brightness: T.merged.brightness,
+            dispMap: j
+          };
+        });
+        N.render(W.source, W.w, W.h, M);
+      }
+      X ? E = y.requestVideoFrameCallback(C) : S = requestAnimationFrame(C);
     };
-    return document.addEventListener("mousemove", f), () => document.removeEventListener("mousemove", f);
-  }, [h, b]), b)
-    return ht;
-  if (h) {
-    const f = e;
-    let l = r;
-    if (l === void 0) {
-      const m = bt(t) ?? (s == null ? void 0 : s.current) ?? null;
-      if (m) {
-        const p = m.getBoundingClientRect();
-        l = {
-          x: f.x - (p.left + p.width / 2),
-          y: f.y - (p.top + p.height / 2)
-        };
-      } else
-        l = $e;
+    return X ? E = y.requestVideoFrameCallback(C) : S = requestAnimationFrame(C), () => {
+      var N;
+      cancelAnimationFrame(S), X && E && ((N = y.cancelVideoFrameCallback) == null || N.call(y, E));
+    };
+  }, [h, s, e, u, m]), h;
+}, Zr = ({
+  src: t,
+  draw: e,
+  poster: s,
+  loop: n = !0,
+  muted: r = !0,
+  autoPlay: u = !0,
+  crossOrigin: h,
+  paused: f,
+  videoRef: l,
+  lenses: i,
+  width: k,
+  height: I,
+  lens: m,
+  lensW: d = 90,
+  lensH: R = 90,
+  borderRadius: G,
+  x: $ = 0.5,
+  y: F = 0.5,
+  maxDpr: Y = 1.5,
+  className: H,
+  style: x,
+  children: K
+}) => {
+  const O = t != null, S = o(null), E = o(null), y = o(null), [X, C] = Ke(null), N = Vt.useCallback(
+    (M) => {
+      y.current = M, typeof l == "function" ? l(M) : l && (l.current = M);
+    },
+    [l]
+  ), _ = o(null), W = o(e);
+  W.current = e;
+  const B = o(0);
+  !O && !_.current && typeof document < "u" && (_.current = document.createElement("canvas"));
+  const c = (i && i.length ? i.map((M) => ({
+    // Per-lens optics override the shared look (runtime knobs only — the
+    // shared MAP shape comes from lens 0; see GlassSurfaceLens.optics).
+    lens: M.optics ? { ...m, ...M.optics } : m,
+    lensW: M.w / 2,
+    lensH: M.h / 2,
+    borderRadius: M.radius,
+    x: M.x,
+    y: M.y,
+    scale: M.scale,
+    opacity: M.opacity
+  })) : [{ lens: m, lensW: d, lensH: R, borderRadius: G, x: $, y: F }]).map(Jr);
+  oe(() => {
+    O && C(y.current);
+  }, [O]), oe(() => {
+    const M = y.current;
+    !O || !M || f === void 0 || (f ? M.pause() : M.play().catch(() => {
+    }));
+  }, [O, f]);
+  const V = Vt.useCallback(() => {
+    if (O) {
+      const ne = y.current;
+      return !ne || ne.readyState < 2 ? null : { source: ne, w: ne.videoWidth, h: ne.videoHeight };
     }
-    return { mousePos: f, offset: l, isActive: !0 };
-  }
-  return c;
-}
-const Vn = "(prefers-contrast: more)";
-function jn() {
-  return Oe(Vn);
-}
-const Wn = "(prefers-reduced-transparency: reduce)";
-function zn() {
-  return Oe(Wn);
-}
-const _e = 16, Qn = 0.015;
-function Kn(n, t) {
-  return (n ? pt.hover : pt.rest).map((r) => {
-    const s = Math.round(r.y * t * 100) / 100, o = Math.round(r.blur * t * 100) / 100, a = Math.round(Math.min(r.alpha * t, 0.6) * 1e3) / 1e3;
-    return `0 ${s}px ${o}px rgba(0, 0, 0, ${a})`;
-  }).join(", ");
-}
-function yt(n) {
-  return Math.max(_e, Math.round(n / _e) * _e);
-}
-function Zn() {
-  const [n, t] = C(!1);
-  return N(() => {
-    if (typeof window > "u" || typeof window.matchMedia != "function")
-      return;
-    const e = window.matchMedia("(prefers-color-scheme: dark)");
-    t(e.matches);
-    const r = (s) => t(s.matches);
-    return typeof e.addEventListener == "function" ? (e.addEventListener("change", r), () => e.removeEventListener("change", r)) : (e.addListener(r), () => e.removeListener(r));
-  }, []), n;
-}
-function Rt(n) {
-  return typeof n == "number" ? `${n}px` : n;
-}
-function Jn(n, t, e) {
-  return e || `blur(${n}px) saturate(${t}%)`;
-}
-function St({
-  filterId: n,
-  mode: t,
-  width: e,
-  height: r,
-  effectiveScale: s,
-  aberrationIntensity: o,
-  blurStdDeviation: a,
-  saturation: i
-}) {
-  const c = t === "turbulence", u = s + o, g = s, b = s - o, h = c ? /* @__PURE__ */ $(nt, { children: [
-    /* @__PURE__ */ d(
-      "feTurbulence",
+    const M = _.current, T = S.current;
+    if (!M || !T || !W.current) return null;
+    const q = k ?? Math.round(T.clientWidth), re = I ?? Math.round(T.clientHeight);
+    if (q === 0 || re === 0) return null;
+    (M.width !== q || M.height !== re) && (M.width = q, M.height = re);
+    const ue = M.getContext("2d");
+    return ue ? (B.current === 0 && (B.current = performance.now()), W.current(ue, performance.now() - B.current), { source: M, w: q, h: re }) : null;
+  }, [O, k, I]), J = Qr(
+    E,
+    S,
+    V,
+    c,
+    Y,
+    O ? X : null
+  );
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      ref: S,
+      className: H,
+      style: { position: "relative", overflow: "hidden", ...x },
+      children: [
+        O && /* @__PURE__ */ a(
+          "video",
+          {
+            ref: N,
+            src: t,
+            poster: s,
+            loop: n,
+            muted: r,
+            autoPlay: u,
+            playsInline: !0,
+            crossOrigin: h,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              // Hidden behind the (opaque) output canvas when WebGL works; shown as
+              // the graceful fallback when it doesn't.
+              visibility: J ? "visible" : "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "canvas",
+          {
+            ref: E,
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              display: J ? "none" : "block"
+            }
+          }
+        ),
+        !O && J && /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              placeItems: "center",
+              color: "#888",
+              font: "13px system-ui"
+            },
+            children: "WebGL unavailable"
+          }
+        ),
+        K != null && /* @__PURE__ */ a("div", { style: { position: "absolute", inset: 0 }, children: K })
+      ]
+    }
+  );
+}, en = () => {
+  const [t, e] = Ke(!1);
+  return oe(() => {
+    if (typeof navigator > "u") return;
+    const s = navigator.userAgent, r = navigator.userAgentData != null || /\b(?:Chrome|Chromium|Edg)\//.test(s) && !/\b(?:CriOS|EdgiOS|FxiOS|OPiOS)\b/.test(s) && !/iPhone|iPad|iPod/.test(s);
+    e(r);
+  }, []), t;
+}, tn = {
+  strength: 0.05,
+  depth: 0.5,
+  curvature: 0.3,
+  bend: 0.45,
+  bendWidth: 0.16,
+  dispersion: 0.32,
+  frost: 6,
+  saturate: 1.15,
+  sheen: 0.32,
+  sheenWidth: 3,
+  sheenFalloff: 1.5,
+  glow: 0.1,
+  glowSpread: 1,
+  glowFalloff: 0.5,
+  specular: 1,
+  sheenAngle: 45,
+  brightness: 0
+}, rn = ({
+  dispScale: t,
+  dispersion: e,
+  specular: s,
+  hasSpecular: n,
+  mapMatrix: r,
+  width: u,
+  height: h,
+  mapUrl: f,
+  feImageRef: l
+}) => {
+  const i = r ? "scaledMap" : "map";
+  return /* @__PURE__ */ te(ot, { children: [
+    /* @__PURE__ */ a("feFlood", { floodColor: "rgb(128,128,128)", floodOpacity: "1", result: "mapBg" }),
+    /* @__PURE__ */ a(
+      "feImage",
       {
-        type: "fractalNoise",
-        baseFrequency: Qn,
-        numOctaves: 2,
-        seed: 1,
-        result: "noise"
+        ref: l,
+        href: f || void 0,
+        x: 0,
+        y: 0,
+        width: u,
+        height: h,
+        preserveAspectRatio: "none",
+        result: "rawMap"
       }
     ),
-    /* @__PURE__ */ d("feGaussianBlur", { in: "noise", stdDeviation: 1.5, result: "dispSource" })
-  ] }) : /* @__PURE__ */ d(
-    "feImage",
-    {
-      href: hn(t, e, r),
-      x: "0",
-      y: "0",
-      width: e,
-      height: r,
-      preserveAspectRatio: "none",
-      result: "dispSource"
-    }
-  ), f = (S, T, v) => {
-    const E = T === "R" ? "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" : T === "G" ? "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" : "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0";
-    return /* @__PURE__ */ $(nt, { children: [
-      /* @__PURE__ */ d(
+    /* @__PURE__ */ a("feComposite", { in: "rawMap", in2: "mapBg", operator: "over", result: "map" }),
+    r && /* @__PURE__ */ a(
+      "feColorMatrix",
+      {
+        in: "map",
+        type: "matrix",
+        values: r,
+        result: "scaledMap"
+      }
+    ),
+    e > 0 ? /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feDisplacementMap",
+        {
+          in: "SourceGraphic",
+          in2: i,
+          scale: t * (1 + ht * e),
+          xChannelSelector: "R",
+          yChannelSelector: "G"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          type: "matrix",
+          values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0",
+          result: "refractR"
+        }
+      ),
+      /* @__PURE__ */ a(
         "feDisplacementMap",
         {
           in: "SourceGraphic",
-          in2: "dispSource",
-          scale: S,
+          in2: i,
+          scale: t * (1 + ht * 0.5 * e),
           xChannelSelector: "R",
-          yChannelSelector: "B",
-          result: `${v}_disp`
+          yChannelSelector: "G"
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ a(
         "feColorMatrix",
         {
-          in: `${v}_disp`,
           type: "matrix",
-          values: E,
-          result: v
+          values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0",
+          result: "refractG"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feDisplacementMap",
+        {
+          in: "SourceGraphic",
+          in2: i,
+          scale: t,
+          xChannelSelector: "R",
+          yChannelSelector: "G"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          type: "matrix",
+          values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0",
+          result: "refractB"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "refractR",
+          in2: "refractG",
+          operator: "arithmetic",
+          k1: "0",
+          k2: "1",
+          k3: "1",
+          k4: "0",
+          result: "refractRG"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "refractRG",
+          in2: "refractB",
+          operator: "arithmetic",
+          k1: "0",
+          k2: "1",
+          k3: "1",
+          k4: "0",
+          result: "lensOut"
         }
       )
-    ] });
-  }, l = Math.min(e, r) * 0.5, m = Math.min(Math.max(a, 0), l), p = e * 0.5 + m * 3, R = r * 0.5 + m * 3;
-  return /* @__PURE__ */ d(
-    "svg",
-    {
-      "aria-hidden": "true",
-      width: "0",
-      height: "0",
-      style: { position: "absolute", width: 0, height: 0, overflow: "hidden" },
-      children: /* @__PURE__ */ d("defs", { children: /* @__PURE__ */ $(
-        "filter",
+    ] }) : /* @__PURE__ */ a(
+      "feDisplacementMap",
+      {
+        in: "SourceGraphic",
+        in2: i,
+        scale: t,
+        xChannelSelector: "R",
+        yChannelSelector: "G",
+        result: "lensOut"
+      }
+    ),
+    n && /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feColorMatrix",
         {
-          id: n,
-          primitiveUnits: "userSpaceOnUse",
-          x: -p,
-          y: -R,
-          width: e + p * 2,
-          height: r + R * 2,
-          filterUnits: "userSpaceOnUse",
-          colorInterpolationFilters: "sRGB",
-          children: [
-            h,
-            f(u, "R", "chanR"),
-            f(g, "G", "chanG"),
-            f(b, "B", "chanB"),
-            /* @__PURE__ */ d(
-              "feComposite",
-              {
-                in: "chanR",
-                in2: "chanG",
-                operator: "arithmetic",
-                k1: "0",
-                k2: "1",
-                k3: "1",
-                k4: "0",
-                result: "chanRG"
-              }
-            ),
-            /* @__PURE__ */ d(
-              "feComposite",
-              {
-                in: "chanRG",
-                in2: "chanB",
-                operator: "arithmetic",
-                k1: "0",
-                k2: "1",
-                k3: "1",
-                k4: "0",
-                result: "aberrated"
-              }
-            ),
-            /* @__PURE__ */ d("feGaussianBlur", { in: "aberrated", stdDeviation: 0.5, result: "softened" }),
-            /* @__PURE__ */ $("radialGradient", { id: `${n}-edge`, cx: "50%", cy: "50%", r: "50%", children: [
-              /* @__PURE__ */ d("stop", { offset: "0%", stopColor: "#000000", stopOpacity: "0" }),
-              /* @__PURE__ */ d("stop", { offset: "70%", stopColor: "#000000", stopOpacity: "0" }),
-              /* @__PURE__ */ d("stop", { offset: "100%", stopColor: "#ffffff", stopOpacity: "1" })
-            ] }),
-            /* @__PURE__ */ d(
-              "feImage",
+          in: "map",
+          type: "matrix",
+          values: `0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 1 0 ${-128 / 255}`,
+          result: "sheenMask"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "sheenMask",
+          in2: "lensOut",
+          operator: "arithmetic",
+          k1: "0",
+          k2: s,
+          k3: "1",
+          k4: "0"
+        }
+      )
+    ] })
+  ] });
+}, Yt = (t) => t == null ? void 0 : xe(t) ? Pe(t) : t, nn = ({
+  children: t,
+  optics: e,
+  radius: s,
+  width: n,
+  height: r,
+  className: u,
+  style: h,
+  ...f
+}) => {
+  const l = en(), i = ft(
+    () => ({ ...Jt, ...tn, ...e }),
+    [e]
+  ), k = jt().replace(/:/g, ""), I = o(null), m = o(null), d = o(null), R = o(
+    null
+  ), G = o(""), $ = o(0), [F, Y] = Ke({
+    w: 0,
+    h: 0,
+    r: 0,
+    appliedR: void 0
+  }), [H, x] = Ke(!1), K = F.w > 0 && F.h > 0, O = Yt(s), S = Yt(n), E = Yt(r), y = (h == null ? void 0 : h.borderRadius) != null, X = o(!1);
+  qe(() => {
+    X.current = !1;
+  }, [O, y, u]), qe(() => {
+    const D = I.current;
+    if (!D) return;
+    const j = () => {
+      const Q = D.getBoundingClientRect(), se = typeof getComputedStyle < "u", A = se ? getComputedStyle(D) : null, De = A && parseFloat(A.borderTopLeftRadius) || 0;
+      if (A) {
+        const Z = A.position;
+        x(
+          (Re) => Z === "static" ? !0 : Z === "relative" ? Re : !1
+        );
+      }
+      let ve, P;
+      if (O != null)
+        ve = O, P = O;
+      else if (y || De > 0 && !X.current)
+        ve = De, P = void 0;
+      else {
+        let Z = D.firstElementChild;
+        for (; Z && Z.hasAttribute("data-lg-layer"); )
+          Z = Z.nextElementSibling;
+        const Re = Z && se && parseFloat(getComputedStyle(Z).borderTopLeftRadius) || 0;
+        ve = Re, P = Re, X.current = !0;
+      }
+      Y(
+        (Z) => Z.w === Q.width && Z.h === Q.height && Z.r === ve && Z.appliedR === P ? Z : { w: Q.width, h: Q.height, r: ve, appliedR: P }
+      );
+    };
+    j();
+    const g = new ResizeObserver(j);
+    return g.observe(D), window.addEventListener("resize", j), () => {
+      g.disconnect(), window.removeEventListener("resize", j);
+    };
+  }, [O, y, u]);
+  const C = JSON.stringify([
+    F.w,
+    F.h,
+    F.r,
+    i.mapSize,
+    i.clipToShape,
+    i.softEdge,
+    i.depth,
+    i.curvature,
+    i.splay,
+    i.bend,
+    i.bendWidth,
+    i.sheen,
+    i.sheenWidth,
+    i.sheenFalloff,
+    i.sheenAngle,
+    i.glow,
+    i.glowSpread,
+    i.glowFalloff
+  ]), N = i.scaleX ?? i.strength, _ = i.scaleY ?? i.strength, W = Math.max(N, _), B = K ? Math.sqrt((F.w * F.w + F.h * F.h) / 2) : 0, c = W * B, V = K ? Math.ceil(c * (i.dispersion > 0 ? 1.2 : 1) * 0.5 + 28) : 0, J = W > 0 ? N / W : 1, M = W > 0 ? _ / W : 1, T = J === 1 && M === 1 ? null : Qt(J, M), q = i.glow > 0 || i.sheen > 0;
+  qe(() => {
+    var g, Q;
+    if (!K) return;
+    const D = i.mapSize;
+    (!R.current || R.current.size !== D) && ((g = R.current) == null || g.gen.dispose(), R.current = {
+      gen: Zt(D),
+      size: D
+    });
+    const j = R.current.gen.generate({
+      lensHalfWidth: F.w / 2,
+      lensHalfHeight: F.h / 2,
+      borderRadius: F.r,
+      depth: i.depth,
+      clipToShape: i.clipToShape,
+      softEdge: i.softEdge,
+      sheenAngle: i.sheenAngle,
+      glow: i.glow,
+      glowSpread: i.glowSpread,
+      glowFalloff: i.glowFalloff,
+      sheen: i.sheen,
+      sheenWidth: i.sheenWidth,
+      sheenFalloff: i.sheenFalloff,
+      curvature: i.curvature,
+      splay: i.splay,
+      bend: i.bend,
+      bendWidth: i.bendWidth
+    });
+    G.current = j, (Q = d.current) == null || Q.setAttribute("href", j), re();
+  }, [K, C]);
+  const re = ft(
+    () => () => {
+      const D = I.current, j = m.current;
+      if (!D) return;
+      const g = Math.max(0, i.frost), Q = i.saturate ?? 1, se = [
+        g > 0 ? `blur(${g}px)` : "",
+        Q !== 1 ? `saturate(${Q})` : ""
+      ].filter(Boolean).join(" ");
+      let A = se || "none";
+      l && j && G.current && ($.current += 1, j.id = `lg-mat-${k}-v${$.current}`, A = `${se ? se + " " : ""}url(#${j.id})`), D.style.backdropFilter = A, D.style.setProperty("-webkit-backdrop-filter", A);
+    },
+    [i.frost, i.saturate, l, k]
+  );
+  oe(() => {
+    K && re();
+  }, [
+    K,
+    re,
+    i.dispersion,
+    i.strength,
+    i.scaleX,
+    i.scaleY,
+    i.specular
+  ]), oe(
+    () => () => {
+      var D;
+      (D = R.current) == null || D.gen.dispose(), R.current = null;
+    },
+    []
+  );
+  const ue = o(!1);
+  oe(() => {
+    if (ue.current || !K || typeof getComputedStyle > "u" || typeof document > "u")
+      return;
+    const D = I.current;
+    if (!D) return;
+    const j = getComputedStyle(D).backgroundColor;
+    let g = !1;
+    try {
+      const Q = document.createElement("canvas");
+      Q.width = Q.height = 1;
+      const se = Q.getContext("2d");
+      se && (se.clearRect(0, 0, 1, 1), se.fillStyle = j, se.fillRect(0, 0, 1, 1), g = se.getImageData(0, 0, 1, 1).data[3] === 255);
+    } catch {
+      g = !1;
+    }
+    g && typeof console < "u" && (console.warn(
+      "[liquid-glass] <Glass>: the wrapper's background is fully opaque, so it hides the refraction (no glass shows through). Give it an alpha (e.g. `bg-red-400/40` / `rgba(...,0.4)`). (An opaque `background-image` — a solid gradient or photo — hides it the same way.)"
+    ), ue.current = !0);
+  }, [K]);
+  const ne = ft(() => {
+    const D = Math.max(0, Math.min(1.5, i.specular));
+    return [
+      `inset 0 1px 0 rgba(255,255,255,${(0.55 * D).toFixed(3)})`,
+      `inset 0 0 0 1px rgba(255,255,255,${(0.12 * D).toFixed(3)})`
+    ].join(", ");
+  }, [i.specular]), ee = h == null ? void 0 : h.position, me = ee != null && ee !== "static" && ee !== "unset" && ee !== "initial" ? ee : H ? "relative" : void 0, ye = i.brightness !== 0 ? /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": !0,
+      "data-lg-layer": "",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        borderRadius: "inherit",
+        background: i.brightness > 0 ? "#fff" : "#000",
+        opacity: Math.min(1, Math.abs(i.brightness))
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      ref: I,
+      "data-liquid-glass": "material",
+      className: u,
+      style: {
+        // Shrink-wrap the content by default (a button-sized pill, matching the
+        // acceptance examples) yet still honour a className/style/Tailwind width:
+        // an inline-block box sizes to its content but obeys an explicit width
+        // (unlike `width: fit-content`, which an inline style would pin past a
+        // className). `style` / the `width`/`height` props win over all of it.
+        display: "inline-block",
+        ...h,
+        // Conditional so an `undefined` (className positions it) never strips the
+        // user's own `style.position`.
+        ...me != null ? { position: me } : null,
+        ...S != null ? { width: S } : null,
+        ...E != null ? { height: E } : null,
+        // Round the wrapper from the prop / adopted child radius (when the user
+        // gave the box none); a className/style radius is left to the user's CSS.
+        ...F.appliedR != null ? { borderRadius: F.appliedR } : null
+      },
+      ...f,
+      children: [
+        ye,
+        t,
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-lg-layer": "",
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              borderRadius: "inherit",
+              boxShadow: ne
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "svg",
+          {
+            "aria-hidden": !0,
+            "data-lg-layer": "",
+            width: 0,
+            height: 0,
+            style: { position: "absolute", width: 0, height: 0 },
+            children: /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a(
+              "filter",
               {
-                href: `#${n}-edge`,
-                x: "0",
-                y: "0",
-                width: e,
-                height: r,
-                preserveAspectRatio: "none",
-                result: "edgeMask"
+                ref: m,
+                id: `lg-mat-${k}-v0`,
+                filterUnits: "userSpaceOnUse",
+                primitiveUnits: "userSpaceOnUse",
+                colorInterpolationFilters: "sRGB",
+                x: -V,
+                y: -V,
+                width: F.w + 2 * V,
+                height: F.h + 2 * V,
+                children: K && /* @__PURE__ */ a(
+                  rn,
+                  {
+                    dispScale: c,
+                    dispersion: i.dispersion,
+                    specular: i.specular,
+                    hasSpecular: q,
+                    mapMatrix: T,
+                    width: F.w,
+                    height: F.h,
+                    mapUrl: G.current || "",
+                    feImageRef: d
+                  }
+                )
               }
-            ),
-            /* @__PURE__ */ d("feComposite", { in: "softened", in2: "edgeMask", operator: "in", result: "edgeOnly" }),
-            /* @__PURE__ */ d("feComposite", { in: "edgeOnly", in2: "SourceGraphic", operator: "over", result: "refracted" }),
-            /* @__PURE__ */ d("feGaussianBlur", { in: "refracted", stdDeviation: m, result: "blurred" }),
-            /* @__PURE__ */ d("feColorMatrix", { in: "blurred", type: "saturate", values: `${i / 100}` })
-          ]
-        }
-      ) })
+            ) })
+          }
+        )
+      ]
     }
   );
-}
-function er({ targetRef: n, onScheme: t }) {
-  const { sampled: e, scheme: r } = Mt(n);
-  return N(() => {
-    t(e ? r : null);
-  }, [e, r, t]), null;
-}
-function tr({ targetRef: n, onScheme: t }) {
-  const { sampled: e, scheme: r } = Mt(n);
-  return N(() => {
-    t(e ? r : null);
-  }, [e, r, t]), null;
-}
-function Ge({
-  children: n,
-  displacement: t = !1,
-  displacementScale: e = O.displacementScale,
-  blurAmount: r = O.blurAmount,
-  saturation: s = O.saturation,
-  aberrationIntensity: o = O.aberrationIntensity,
-  elasticity: a = O.elasticity,
-  cornerRadius: i = O.cornerRadius,
-  padding: c = O.padding,
-  overLight: u,
-  adaptiveTint: g = !1,
-  scrollAwareShadow: b = !1,
-  variant: h = "regular",
-  mode: f = O.mode,
-  refract: l,
-  size: m,
-  center: p,
-  behind: R,
+}, sn = () => {
+  const [t, e] = Ke(!1);
+  return oe(() => {
+    e(
+      typeof navigator < "u" && /^((?!chrome|chromium|android).)*safari/i.test(navigator.userAgent)
+    );
+  }, []), t;
+}, on = ({
+  lens: t,
+  mapHref: e,
+  feImageRef: s,
+  mapMatrixRef: n,
+  blurStdDeviation: r,
+  specularFromRawMap: u,
+  brightnessInFilter: h,
+  filterW: f,
+  filterH: l,
+  clipShapeRef: i
+}) => {
+  const k = t.scaleX ?? t.strength, I = t.scaleY ?? t.strength, m = Math.max(k, I), d = f && l ? Math.sqrt((f * f + l * l) / 2) : 1, R = m * d, G = m > 0 ? k / m : 0, $ = m > 0 ? I / m : 0, F = !(G === 1 && $ === 1), Y = F ? "scaledMap" : "map", H = t.frost > 0 && !!r, x = H ? "blurred" : "SourceGraphic", K = t.glow > 0 || t.sheen > 0, O = t.specular, S = h && t.brightness !== 0, E = H || S;
+  return /* @__PURE__ */ te(ot, { children: [
+    /* @__PURE__ */ a("feFlood", { floodColor: "rgb(128,128,128)", floodOpacity: "1", result: "mapBg" }),
+    /* @__PURE__ */ a(
+      "feImage",
+      {
+        ref: s,
+        "data-lens": "",
+        href: e,
+        preserveAspectRatio: "none",
+        result: "rawMap"
+      }
+    ),
+    /* @__PURE__ */ a("feComposite", { in: "rawMap", in2: "mapBg", operator: "over", result: "map" }),
+    F && /* @__PURE__ */ a(
+      "feColorMatrix",
+      {
+        ref: n,
+        in: "map",
+        type: "matrix",
+        values: Qt(G, $),
+        result: "scaledMap"
+      }
+    ),
+    H && /* @__PURE__ */ a(
+      "feGaussianBlur",
+      {
+        in: "SourceGraphic",
+        stdDeviation: r,
+        result: "blurred"
+      }
+    ),
+    E && /* @__PURE__ */ a(
+      "feImage",
+      {
+        ref: i,
+        "data-lens": "",
+        href: wr,
+        preserveAspectRatio: "none",
+        result: "lensShape"
+      }
+    ),
+    t.dispersion > 0 ? /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feDisplacementMap",
+        {
+          "data-lens": "",
+          in: x,
+          in2: Y,
+          scale: R * (1 + ht * 0.5 * t.dispersion),
+          xChannelSelector: "R",
+          yChannelSelector: "G"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          type: "matrix",
+          values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0",
+          result: "refractR"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feDisplacementMap",
+        {
+          "data-lens": "",
+          in: x,
+          in2: Y,
+          scale: R,
+          xChannelSelector: "R",
+          yChannelSelector: "G"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          type: "matrix",
+          values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0",
+          result: "refractG"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feDisplacementMap",
+        {
+          "data-lens": "",
+          in: x,
+          in2: Y,
+          scale: R * (1 - ht * 0.5 * t.dispersion),
+          xChannelSelector: "R",
+          yChannelSelector: "G"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          type: "matrix",
+          values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0",
+          result: "refractB"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "refractR",
+          in2: "refractG",
+          operator: "arithmetic",
+          k1: "0",
+          k2: "1",
+          k3: "1",
+          k4: "0",
+          result: "refractRG"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "refractRG",
+          in2: "refractB",
+          operator: "arithmetic",
+          k1: "0",
+          k2: "1",
+          k3: "1",
+          k4: "0",
+          result: "lensOut"
+        }
+      )
+    ] }) : /* @__PURE__ */ a(
+      "feDisplacementMap",
+      {
+        "data-lens": "",
+        in: x,
+        in2: Y,
+        scale: R,
+        xChannelSelector: "R",
+        yChannelSelector: "G",
+        result: "lensOut"
+      }
+    ),
+    K && (t.sheenDark ? /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          in: u ? "rawMap" : "map",
+          type: "matrix",
+          values: `0 0 ${-O} 0 ${1 + 128 * O / 255}  0 0 ${-O} 0 ${1 + 128 * O / 255}  0 0 ${-O} 0 ${1 + 128 * O / 255}  0 0 0 0 1`,
+          result: "sheenMask"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "sheenMask",
+          in2: "lensOut",
+          operator: "arithmetic",
+          k1: "1",
+          k2: "0",
+          k3: "0",
+          k4: "0",
+          result: "lensOut"
+        }
+      )
+    ] }) : /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feColorMatrix",
+        {
+          in: u ? "rawMap" : "map",
+          type: "matrix",
+          values: `0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 1 0 ${-128 / 255}`,
+          result: "sheenMask"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "sheenMask",
+          in2: "lensOut",
+          operator: "arithmetic",
+          k1: "0",
+          k2: O,
+          k3: "1",
+          k4: "0",
+          result: "lensOut"
+        }
+      )
+    ] })),
+    S && /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feFlood",
+        {
+          "data-lens": "",
+          floodColor: t.brightness > 0 ? "white" : "black",
+          floodOpacity: Math.abs(t.brightness),
+          result: "brightnessFlood"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "brightnessFlood",
+          in2: "lensShape",
+          operator: "in",
+          result: "brightnessVeil"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "brightnessVeil",
+          in2: "lensOut",
+          operator: "over",
+          result: "lensOut"
+        }
+      )
+    ] }),
+    E ? (
+      // Shape-clipped composite: clip the lens result to the lens-shape alpha
+      // (`lensShape`, declared above) and hole the SourceGraphic with the same
+      // shape, so the lens follows the rounded silhouette instead of
+      // the rectangular filter subregion. Used by the frosted blur and the
+      // in-filter brightness veil.
+      /* @__PURE__ */ te(ot, { children: [
+        /* @__PURE__ */ a(
+          "feComposite",
+          {
+            in: "lensOut",
+            in2: "lensShape",
+            operator: "in",
+            result: "lensOut"
+          }
+        ),
+        /* @__PURE__ */ a(
+          "feComposite",
+          {
+            in: "SourceGraphic",
+            in2: "lensShape",
+            operator: "out",
+            result: "cutoutSrc"
+          }
+        ),
+        /* @__PURE__ */ a("feComposite", { in: "lensOut", in2: "cutoutSrc", operator: "over" })
+      ] })
+    ) : /* @__PURE__ */ te(ot, { children: [
+      /* @__PURE__ */ a(
+        "feFlood",
+        {
+          "data-lens": "",
+          floodColor: "black",
+          floodOpacity: "1",
+          result: "lensMask"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "feComposite",
+        {
+          in: "SourceGraphic",
+          in2: "lensMask",
+          operator: "out",
+          result: "cutoutSrc"
+        }
+      ),
+      /* @__PURE__ */ a("feComposite", { in: "lensOut", in2: "cutoutSrc", operator: "over" })
+    ] })
+  ] });
+}, an = ({
+  children: t,
+  lens: e,
+  x: s = 0.5,
+  y: n = 0.5,
+  lensW: r,
+  lensH: u,
+  borderRadius: h,
+  refractionTarget: f,
+  refractionBackground: l = "transparent",
+  overlay: i,
+  tintColor: k,
+  tintOpacity: I,
+  tintBlur: m,
+  shadowOpacity: d,
+  restShadowOpacity: R,
+  edgeBias: G,
+  depth: $,
+  scale: F,
+  filterResolution: Y = 1,
+  brightnessInFilter: H = !1,
+  pixelUnits: x = !1,
+  live: K = !1,
+  onLensMapChange: O,
   className: S,
-  style: T,
-  onClick: v,
-  globalMousePos: E,
-  mouseOffset: ne,
-  mouseContainer: re
-}) {
-  const { canRefract: G, supportsBackdropFilter: P } = cn(), k = te(null), [w, V] = C(null), U = Be(), j = zn(), I = jn(), se = Zn(), [W, oe] = C(!1), [fe, ae] = C(!1), [z, y] = C(null), [x, M] = C(null), { offset: A, isActive: ie } = qn({
-    container: re,
-    globalMousePos: E,
-    mouseOffset: ne,
-    elementRef: k
-  }), Y = `lg-${vt().replace(/:/g, "")}`;
-  N(() => {
-    const ce = k.current;
-    if (!ce) return;
-    let H = 0;
-    const le = () => {
-      const ee = ce.getBoundingClientRect();
-      if (!Number.isFinite(ee.width) || !Number.isFinite(ee.height) || ee.width <= 0 || ee.height <= 0)
-        return;
-      const Je = yt(ee.width), et = yt(ee.height);
-      V(
-        (ge) => ge && ge.width === Je && ge.height === et ? ge : { width: Je, height: et }
+  style: E,
+  ...y
+}) => {
+  const X = sn(), C = o(X);
+  C.current = X;
+  const N = o(H);
+  N.current = H;
+  const _ = o(x);
+  _.current = x;
+  const W = o(K);
+  W.current = K;
+  const B = o(Y);
+  B.current = Y;
+  const c = ft(
+    () => ({
+      ...Jt,
+      ...e
+    }),
+    [e]
+  ), V = o(c);
+  V.current = c;
+  const J = jt().replace(/:/g, ""), M = o(null), T = o(null), q = o(null), re = o(null), ue = o(null), ne = o(null), ee = o(null), ge = o(null), me = o(null), ye = o(null), D = o(null), j = o(null), g = o(null), Q = o([]), se = o([]), [A, De] = Ke({ w: 0, h: 0 }), ve = o(A);
+  ve.current = A;
+  const P = A.w > 0 && A.h > 0, Z = f != null, [Re, Ne] = Ke(null);
+  qe(() => {
+    var L, ie;
+    if (!Z || l !== "transparent") {
+      Ne(null);
+      return;
+    }
+    if (typeof window > "u") return;
+    let U = ((L = M.current) == null ? void 0 : L.parentElement) ?? null, p = null;
+    for (; U; ) {
+      const Je = getComputedStyle(U).backgroundColor, Se = (ie = Je.match(/rgba?\(([^)]+)\)/)) == null ? void 0 : ie[1].split(",");
+      if ((Se && Se[3] != null ? parseFloat(Se[3]) : 1) > 0.95) {
+        p = Je;
+        break;
+      }
+      U = U.parentElement;
+    }
+    Ne(p);
+  }, [Z, l]);
+  const Ve = l !== "transparent" ? l : Re ?? "transparent", he = o(0.5), de = o(0.5), Te = o(c.lensW), Ge = o(c.lensH), b = o(c.borderRadius), Ae = o(r !== void 0);
+  Ae.current = r !== void 0;
+  const Xe = o(u !== void 0);
+  Xe.current = u !== void 0;
+  const $e = o(h !== void 0);
+  $e.current = h !== void 0;
+  const _e = o(0), nt = o(c.depth), Ue = o(c.scaleX ?? c.strength), et = o(c.scaleY ?? c.strength), He = o(1), ke = o(0), v = o(1), fe = o(0), pe = o(0.5), we = o(NaN), je = o(NaN), w = o(NaN), z = o(1), ae = o(0), Ie = o(""), We = o(!1), Fe = o(null), Le = o(null), ze = o(
+    null
+  ), pt = o(k);
+  pt.current = k;
+  const Oe = o(O);
+  Oe.current = O;
+  const wt = A.w > 0 && A.h > 0 ? Math.sqrt((A.w * A.w + A.h * A.h) / 2) : 0;
+  let tt = Math.max(
+    c.scaleX ?? c.strength,
+    c.scaleY ?? c.strength
+  );
+  if (wt > 0) {
+    const U = typeof r == "number" ? r * 2 : A.w, p = typeof u == "number" ? u * 2 : A.h, L = 1 + ht * c.dispersion;
+    tt = Math.min(
+      tt,
+      Math.max(U, p) * 0.6 / (wt * L)
+    );
+  }
+  const at = x && f != null && A.w > 0 && A.h > 0 ? Math.ceil(
+    tt * wt * (1 + ht * c.dispersion) * 0.5 + c.depth + 28
+  ) + 16 : 0, ce = o(at);
+  ce.current = at, qe(() => {
+    const U = M.current;
+    if (!U) return;
+    const p = () => {
+      var Je;
+      const ie = U.getBoundingClientRect();
+      if (!$e.current && typeof getComputedStyle < "u") {
+        let Se = parseFloat(getComputedStyle(U).borderTopLeftRadius) || 0;
+        const Me = (Je = T.current) == null ? void 0 : Je.firstElementChild;
+        !Se && Me && (Se = parseFloat(getComputedStyle(Me).borderTopLeftRadius) || 0), _e.current = Se;
+      }
+      De(
+        (Se) => Se.w === ie.width && Se.h === ie.height ? Se : { w: ie.width, h: ie.height }
       );
     };
-    if (le(), typeof ResizeObserver > "u")
-      return;
-    const pe = new ResizeObserver(() => {
-      H || (H = requestAnimationFrame(() => {
-        H = 0, le();
-      }));
-    });
-    return pe.observe(ce), () => {
-      H && cancelAnimationFrame(H), pe.disconnect();
+    p();
+    const L = new ResizeObserver(p);
+    return L.observe(U), window.addEventListener("resize", p), () => {
+      L.disconnect(), window.removeEventListener("resize", p);
     };
   }, []);
-  const L = Ln[h], F = g && !L.forceNonAdaptive, Re = u ?? (F && z ? z === "light" : !1), Ue = Re ? e / 2 : e, Se = I ? Tn : s * L.saturationFactor, Ye = I ? 0 : o, Q = w !== null && w.width > 0 && w.height > 0, ve = t && G && Q && !j, Tt = ve ? `url(#${Y})` : null, It = l !== void 0 || m !== void 0 || p !== void 0, xe = (m == null ? void 0 : m.width) ?? (Q ? w.width : 0), Ae = (m == null ? void 0 : m.height) ?? (Q ? w.height : 0), Xe = It && !j && Number.isFinite(xe) && Number.isFinite(Ae) && xe > 0 && Ae > 0, He = `${Y}-copy`, kt = l !== void 0 ? l : n, Lt = `${(((p == null ? void 0 : p.x) ?? 0.5) * 100).toFixed(2)}% ${(((p == null ? void 0 : p.y) ?? 0.5) * 100).toFixed(2)}%`, qe = P && !ve && !j && !I, Ce = r * An * (Re ? 1.5 : 1), Ee = P ? Jn(Ce, Se, Tt) : void 0, _ = Rt(i), K = ie && !U, Ve = K ? vn(A.x, A.y, 0, 0, a) : { scaleX: 1, scaleY: 1 }, je = K ? xn(A.x, A.y, 0, 0, a) : { x: 0, y: 0 }, We = typeof v == "function" && fe ? 0.96 : 1, X = `translate(${je.x.toFixed(2)}px, ${je.y.toFixed(
-    2
-  )}px) scale(${(Ve.scaleX * We).toFixed(4)}, ${(Ve.scaleY * We).toFixed(4)})`, Ft = 135 + (K ? A.x * 0.15 : 0);
-  let we = lt, Me = ut;
-  if (K && Q) {
-    const ce = 50 + A.x / (w.width / 2) * 50, H = 50 + A.y / (w.height / 2) * 50, le = (pe) => Math.max(-20, Math.min(120, pe));
-    we = `${le(ce).toFixed(2)}%`, Me = `${le(H).toFixed(2)}%`;
-  }
-  const _t = fe, Dt = K && Q ? we : "50%", $t = K && Q ? Me : "50%", Ne = ye(se ? "dark" : "light");
-  let Te = Ne;
-  I ? Te = `inset 0 0 0 ${Mn}px ${wn[se ? "dark" : "light"]}, ${Ne}` : qe && (Te = `inset 0 0 0 ${gt.width}px ${gt.color}, ${Ne}`);
-  const ze = W ? dt.hover : dt.rest, Qe = W ? 0.55 : 0.35, Ot = {
-    position: "relative",
-    display: "inline-block",
-    padding: Rt(c),
-    borderRadius: _,
-    ...T
-  }, Bt = b ? mt[x ?? "static"] : mt.static, Gt = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    transform: X,
-    // Scroll-aware + reduced motion: drop the box-shadow transition so the depth
-    // SNAPS between scroll-aware states instead of animating. Only applies on the
-    // opt-in path under reduced motion, so the default render (and the default
-    // reduced-motion render) keeps the existing transition byte-for-byte. The
-    // transform transition always stays (already reduced-motion-neutral via
-    // surfaceTransform).
-    transition: b && U ? "transform 120ms ease-out" : "box-shadow 200ms ease, transform 120ms ease-out",
-    boxShadow: Kn(W, Bt),
-    zIndex: -1,
-    pointerEvents: "none"
-  }, Z = se ? "dark" : "light";
-  let J;
-  I ? J = Nn[Z] : j ? J = P ? Cn[Z] : En[Z] : P ? qe && (J = Fn) : J = Z === "dark" ? "rgba(30, 30, 35, 0.55)" : "rgba(255, 255, 255, 0.55)";
-  const Pt = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    overflow: "hidden",
-    // Tiers 1/2 carry the frosted backdrop (with -webkit- prefix); tier 3 omits
-    // the filter entirely (no orphaned/unsupported declaration). The `background`
-    // is unset by default on tiers 1/2 (the backdrop carries the look), the ~0.55
-    // solid on tier 3, and a more-opaque frosting fill on EVERY tier when
-    // reduced-transparency is active (layered over the retained blur on 1/2).
-    ...Ee ? { backdropFilter: Ee, WebkitBackdropFilter: Ee } : {},
-    ...J ? { background: J } : {},
-    // Pure-CSS beveled rim — renders in every browser, independent of canRefract.
-    // Under increased contrast a solid inset border ring is prepended (geometry
-    // unchanged); otherwise this is exactly the bevel.
-    boxShadow: Te,
-    transform: X,
-    transition: "transform 120ms ease-out",
-    // Keep the surface strictly behind the content layer.
-    zIndex: 0,
-    pointerEvents: "none"
-  }, Ut = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    transform: X,
-    transition: U ? "transform 120ms ease-out" : "transform 120ms ease-out, background-position 120ms ease-out",
-    mixBlendMode: "screen",
-    // Custom props expose the tracked center; the gradient consumes them so a
-    // re-render (pointer move) only changes the variables, not the layer markup.
-    "--lg-spec-x": we,
-    "--lg-spec-y": Me,
-    background: `radial-gradient(circle ${In} at var(--lg-spec-x, ${lt}) var(--lg-spec-y, ${ut}), rgba(255,255,255,${ze}) 0%, rgba(255,255,255,${(ze * 0.4).toFixed(3)}) 30%, rgba(255,255,255,0) 65%)`,
-    zIndex: 0,
-    pointerEvents: "none"
-  }, Yt = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    transform: X,
-    mixBlendMode: "screen",
-    "--lg-spec-x": Dt,
-    "--lg-spec-y": $t,
-    background: `radial-gradient(circle ${kn} at var(--lg-spec-x, 50%) var(--lg-spec-y, 50%), rgba(255,255,255,${ft}) 0%, rgba(255,255,255,${(ft * 0.5).toFixed(3)}) 25%, rgba(255,255,255,0) 55%)`,
-    opacity: _t ? 1 : 0,
-    transition: U ? "transform 120ms ease-out" : "transform 120ms ease-out, opacity 360ms ease-out",
-    zIndex: 0,
-    pointerEvents: "none"
-  }, Xt = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    transform: X,
-    transition: "transform 120ms ease-out",
-    mixBlendMode: "overlay",
-    padding: "1px",
-    background: `linear-gradient(${Ft}deg, rgba(255,255,255,${Qe}) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,${Qe * 0.6}) 100%)`,
-    zIndex: 0,
-    pointerEvents: "none"
-  };
-  let me;
-  F && I ? me = Z === "light" ? he.dark : he.light : F && z && (me = Re ? he.dark : he.light);
-  const Ht = {
-    position: "relative",
-    zIndex: 1,
-    // Carry the surface's rounded shape so children using `border-radius: inherit`
-    // (the GlassButton shell + its press-shine ::after, the GlassCard) actually
-    // pick up the glass corners instead of resolving to 0 (a rectangle). Purely
-    // for inheritance — there is no `overflow`, so this clips nothing and is
-    // visually inert on its own.
-    borderRadius: _,
-    ...me ? { color: me } : {}
-  }, qt = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    overflow: "hidden",
-    transform: X,
-    transition: "transform 120ms ease-out",
-    zIndex: 0,
-    pointerEvents: "none"
-  }, Vt = {
-    position: "absolute",
-    inset: 0,
-    filter: Xe ? `url(#${He})` : void 0,
-    transformOrigin: Lt,
-    ...R ? { background: R } : {}
-  }, Ke = L.scrim ? L.scrim[Z] : null, Ze = Ke ? {
-    position: "absolute",
-    inset: 0,
-    borderRadius: _,
-    transform: X,
-    transition: "transform 120ms ease-out",
-    background: Ke,
-    // Above the surface/highlight/border layers (all zIndex 0) but strictly
-    // BELOW the content layer (zIndex 1), so it dims the backdrop for the
-    // content without veiling the content itself.
-    zIndex: 0,
-    pointerEvents: "none"
-  } : null;
-  return (
-    // onClick is a pass-through forwarded from the public API; the wrapper is a
-    // non-semantic presentational container, and consumers supply their own
-    // interactive (and keyboard-accessible) elements as children. Forcing
-    // keyboard handlers here would invent semantics the consumer didn't request.
-    // biome-ignore lint/a11y/useKeyWithClickEvents: presentational pass-through; children own interactivity
-    /* @__PURE__ */ $(
-      "div",
-      {
-        ref: k,
-        className: S,
-        style: Ot,
-        onClick: v,
-        onMouseEnter: () => oe(!0),
-        onMouseLeave: () => {
-          oe(!1), ae(!1);
-        },
-        onMouseDown: () => ae(!0),
-        onMouseUp: () => ae(!1),
-        children: [
-          /* @__PURE__ */ d("div", { "data-lg-shadow": "", style: Gt, "aria-hidden": "true" }),
-          /* @__PURE__ */ d("div", { "data-lg-surface": "", style: Pt, children: ve ? /* @__PURE__ */ d(
-            St,
+  const Ce = Rt(() => {
+    const U = M.current;
+    if (!U) return;
+    let p = ve.current.w, L = ve.current.h;
+    if (!(p > 0 && L > 0)) {
+      const le = U.getBoundingClientRect();
+      p = le.width, L = le.height;
+    }
+    if (!(p > 0 && L > 0)) return;
+    const ie = V.current, Je = Ue.current, Se = et.current;
+    let Me = Math.max(Je, Se);
+    const xt = ie.dispersion, St = Ae.current ? Te.current : p / 2, Mt = Xe.current ? Ge.current : L / 2, mt = $e.current ? b.current : _e.current;
+    let Ot = he.current * p, Nt = de.current * L;
+    _.current && q.current && (Ot = Math.max(St, Math.min(p - St, Ot)), Nt = Math.max(Mt, Math.min(L - Mt, Nt)));
+    const Qe = Ot - St, Ze = Nt - Mt, lt = 2 * St, ut = 2 * Mt;
+    if (_.current) {
+      const le = Math.sqrt((p * p + L * L) / 2), Ee = 1 + ht * xt, Et = Math.max(lt, ut) * 0.6;
+      le > 0 && (Me = Math.min(Me, Et / (le * Ee)));
+    }
+    const sr = B.current, rt = sr !== 1 && !C.current ? sr : 1, bt = C.current ? rt * z.current : rt, Fr = Qe !== we.current || Ze !== je.current, ir = Me !== w.current;
+    if (we.current = Qe, je.current = Ze, w.current = Me, Fr || ir || W.current) {
+      const le = pe.current, Ee = _.current, Et = Math.sqrt((p * p + L * L) / 2), Lr = Me * Et * (1 + ht * xt) * 0.5, or = Math.ceil(Lr + nt.current + 28), yt = Ee && q.current ? ce.current : 0, Cr = String(Ee ? (Qe + yt + le) * bt : (Qe + le) / p), Dr = String(Ee ? (Ze + yt + le) * bt : (Ze + le) / L), Xr = String(
+        Ee ? Math.max(0, lt - 2 * le) * bt : Math.max(0, lt - 2 * le) / p
+      ), Ir = String(
+        Ee ? Math.max(0, ut - 2 * le) * bt : Math.max(0, ut - 2 * le) / L
+      );
+      for (const Ye of Q.current)
+        Ye.setAttribute("x", Cr), Ye.setAttribute("y", Dr), Ye.setAttribute("width", Xr), Ye.setAttribute("height", Ir);
+      if (ir) {
+        const Ye = Ee ? Me * Et * bt : Me, Wr = xt > 0 ? [
+          Ye * (1 + ht * 0.5 * xt),
+          Ye,
+          Ye * (1 - ht * 0.5 * xt)
+        ] : [Ye], ar = se.current;
+        for (let Dt = 0; Dt < ar.length; Dt += 1)
+          ar[Dt].setAttribute("scale", String(Wr[Dt] ?? 0));
+      }
+      const vt = ye.current;
+      if (vt) {
+        Ee && (vt.setAttribute("x", "0"), vt.setAttribute("y", "0"), q.current ? (vt.setAttribute(
+          "width",
+          String((Qe + yt + lt + or) * bt)
+        ), vt.setAttribute(
+          "height",
+          String((Ze + yt + ut + or) * bt)
+        )) : (vt.setAttribute("width", String(p * bt)), vt.setAttribute("height", String(L * bt)))), ae.current += 1, vt.id = `lg-${J}-v${ae.current}`;
+        const Ye = Fe.current ? `url(#${vt.id})` : "";
+        q.current ? (q.current.style.filter !== Ye && (q.current.style.filter = Ye), q.current.style.clipPath = `inset(${Math.max(0, Ze + yt) * rt}px ${Math.max(0, p + yt - (Qe + lt)) * rt}px ${Math.max(0, L + yt - (Ze + ut)) * rt}px ${Math.max(0, Qe + yt) * rt}px round ${mt * rt}px)`, T.current && !re.current && (T.current.style.filter = "")) : T.current && T.current.style.filter !== Ye && (T.current.style.filter = Ye);
+      }
+    }
+    re.current && (re.current.style.clipPath = `inset(${Math.max(0, Ze) * rt}px ${Math.max(0, p - (Qe + lt)) * rt}px ${Math.max(0, L - (Ze + ut)) * rt}px ${Math.max(0, Qe) * rt}px round ${mt * rt}px)`), ue.current && !re.current && (ue.current.style.clipPath = `inset(${Math.max(0, Ze)}px ${Math.max(0, p - (Qe + lt))}px ${Math.max(0, L - (Ze + ut))}px ${Math.max(0, Qe)}px round ${mt}px)`);
+    const $t = (le, Ee) => {
+      le.style.transform = `translate(${Qe}px, ${Ze}px)`, le.style.width = `${lt}px`, le.style.height = `${ut}px`, le.style.borderRadius = `${mt}px`, Ee !== void 0 && (le.style.opacity = String(Ee));
+    };
+    if (ge.current && $t(ge.current, v.current), me.current && $t(me.current, fe.current), ee.current) {
+      ee.current.style.transform = `translate3d(${Qe}px, ${Ze}px, 0)`, ee.current.style.width = `${lt}px`, ee.current.style.height = `${ut}px`, ee.current.style.borderRadius = `${mt}px`;
+      const { uri: le, key: Ee } = xr(lt, ut, mt);
+      if (Ie.current !== Ee) {
+        const Et = `url("${le}")`;
+        ee.current.style.maskImage = Et, ee.current.style.setProperty("-webkit-mask-image", Et), ee.current.style.maskSize = "100% 100%", ee.current.style.setProperty("-webkit-mask-size", "100% 100%"), Ie.current = Ee;
+      }
+    }
+    if (ne.current) {
+      $t(ne.current);
+      const le = pt.current ?? "white";
+      ne.current.style.background = `color-mix(in srgb, ${le} ${100 * He.current}%, transparent)`, ne.current.style.opacity = "1";
+      const Ee = ke.current > 0 ? `blur(${ke.current}px)` : "none";
+      ne.current.style.backdropFilter = Ee, ne.current.style.setProperty("-webkit-backdrop-filter", Ee);
+    }
+    if (g.current) {
+      const le = Me > 0 ? Je / Me : 0, Ee = Me > 0 ? Se / Me : 0;
+      g.current.setAttribute("values", Qt(le, Ee));
+    }
+  }, [J]), st = Rt(() => {
+    We.current || (We.current = !0, queueMicrotask(() => {
+      We.current = !1, Ce();
+    }));
+  }, [Ce]), Be = Rt(() => {
+    we.current = NaN, w.current = NaN, Ce();
+  }, [Ce]);
+  oe(() => {
+    const U = () => {
+      const L = window.innerWidth, ie = L > 0 ? window.outerWidth / L : 1;
+      return ie > 0.2 && ie < 12 ? Math.abs(ie - 1) < 0.04 ? 1 : ie : 1;
+    }, p = () => {
+      const L = U();
+      Math.abs(L - z.current) > 2e-3 && (z.current = L, Be());
+    };
+    return p(), window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
+  }, [Be]);
+  const it = Rt(() => {
+    var Me, xt, St, Mt;
+    const U = V.current.mapSize;
+    (!ze.current || ze.current.size !== U) && ((Me = ze.current) == null || Me.gen.dispose(), ze.current = {
+      gen: Zt(U),
+      size: U
+    });
+    const p = V.current, L = Ae.current ? Te.current : ve.current.w / 2, ie = Xe.current ? Ge.current : ve.current.h / 2, Je = $e.current ? b.current : _e.current, Se = ze.current.gen.generate({
+      lensHalfWidth: L,
+      lensHalfHeight: ie,
+      borderRadius: Je,
+      depth: nt.current,
+      clipToShape: p.clipToShape,
+      softEdge: p.softEdge,
+      sheenAngle: p.sheenAngle,
+      glow: p.glow,
+      glowSpread: p.glowSpread,
+      glowFalloff: p.glowFalloff,
+      sheen: p.sheen,
+      sheenWidth: p.sheenWidth,
+      sheenFalloff: p.sheenFalloff,
+      curvature: p.curvature,
+      splay: p.splay,
+      bend: p.bend,
+      bendWidth: p.bendWidth
+    });
+    if (Fe.current = Se, (xt = D.current) == null || xt.setAttribute("href", Se), p.frost > 0 || N.current && p.brightness !== 0) {
+      const mt = Nr(2 * L, 2 * ie, Je);
+      Le.current = mt.uri, (St = j.current) == null || St.setAttribute("href", mt.uri);
+    }
+    (Mt = Oe.current) == null || Mt.call(Oe, Se), Be();
+  }, [Be]), gt = o(it);
+  gt.current = it;
+  const Ct = JSON.stringify([
+    c.mapSize,
+    c.clipToShape,
+    c.softEdge,
+    c.sheenAngle,
+    c.glow,
+    c.glowSpread,
+    c.glowFalloff,
+    c.sheen,
+    c.sheenWidth,
+    c.sheenFalloff,
+    c.curvature,
+    c.splay,
+    c.bend,
+    c.bendWidth,
+    // Auto-fit: when a geometry prop is omitted the effective extent is the
+    // measured box, so fold the measured size into the shape key (regen on resize).
+    xe(r) ? "mv" : r ?? (A.w / 2 || c.lensW),
+    xe(u) ? "mv" : u ?? (A.h / 2 || c.lensH),
+    xe(h) ? "mv" : h ?? _e.current,
+    xe($) ? "mv" : $ ?? c.depth,
+    H && c.brightness !== 0
+  ]);
+  qe(() => {
+    const U = [], p = (L, ie, Je, Se = () => {
+      W.current || st();
+    }) => {
+      if (L === void 0) {
+        ie.current = Je;
+        return;
+      }
+      xe(L) ? (ie.current = L.get(), U.push(
+        L.on("change", (Me) => {
+          ie.current = Me, Se();
+        })
+      )) : ie.current = L;
+    };
+    return p(s, he, 0.5), p(n, de, 0.5), p(r ?? c.lensW, Te, c.lensW), p(u ?? c.lensH, Ge, c.lensH), p(h ?? c.borderRadius, b, c.borderRadius), p($ ?? c.depth, nt, c.depth), p(
+      F ?? c.scaleX ?? c.strength,
+      Ue,
+      c.scaleX ?? c.strength
+    ), p(
+      F ?? c.scaleY ?? c.strength,
+      et,
+      c.scaleY ?? c.strength
+    ), p(I, He, 1), p(m, ke, 0), p(d, v, 1), p(R, fe, 0), p(G, pe, 0.5), Ce(), () => U.forEach((L) => L());
+  }, [
+    s,
+    n,
+    r,
+    u,
+    h,
+    $,
+    F,
+    I,
+    m,
+    d,
+    R,
+    G,
+    c,
+    st,
+    Ce
+  ]);
+  const Tr = c.dispersion > 0, Pt = c.frost > 0, Ar = c.glow > 0 || c.sheen > 0;
+  qe(() => {
+    const U = ye.current;
+    Q.current = U ? Array.from(U.querySelectorAll("[data-lens]")) : [], se.current = U ? Array.from(U.querySelectorAll("feDisplacementMap")) : [], D.current && Fe.current && D.current.setAttribute("href", Fe.current), j.current && Le.current && j.current.setAttribute("href", Le.current), Be();
+  }, [
+    P,
+    Tr,
+    Pt,
+    Ar,
+    c.sheenDark,
+    c.scaleX,
+    c.scaleY,
+    c.strength,
+    c.brightness,
+    H,
+    x,
+    X,
+    f != null,
+    i != null,
+    Be
+  ]), qe(() => {
+    P && Be();
+  }, [A.w, A.h, at, Be]), qe(() => {
+    P && gt.current();
+  }, [P, Ct]), oe(() => {
+    const U = [];
+    let p;
+    const L = () => {
+      clearTimeout(p), p = setTimeout(() => gt.current(), 90);
+    };
+    for (const ie of [r, u, h, $])
+      xe(ie) && U.push(ie.on("change", L));
+    return () => {
+      U.forEach((ie) => ie()), clearTimeout(p);
+    };
+  }, [r, u, h, $]), oe(
+    () => () => {
+      var U, p;
+      (U = ze.current) == null || U.gen.dispose(), ze.current = null, (p = Oe.current) == null || p.call(Oe, null);
+    },
+    []
+  ), oe(() => {
+    if (!K || !P) return;
+    let U = 0;
+    const p = () => {
+      U = requestAnimationFrame(p), Ce();
+    };
+    return U = requestAnimationFrame(p), () => cancelAnimationFrame(U);
+  }, [K, P, Ce]);
+  const _r = Y !== 1 && !X ? Y : 1, kr = Pt && P ? x ? `${c.frost * _r}` : `${c.frost / A.w} ${c.frost / A.h}` : void 0, ct = Y !== 1 && !X ? Y : 1, Ut = ct > 1 && i == null && f == null && P, er = i == null && f == null && !Ut && r === void 0, tr = (U, p, L) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: U,
+      style: {
+        ...L,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: A.w * ct,
+        height: A.h * ct,
+        transform: `scale(${1 / ct})`,
+        transformOrigin: "top left"
+      },
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          style: {
+            transform: `scale(${ct})`,
+            transformOrigin: "top left",
+            width: A.w,
+            height: A.h
+          },
+          children: p
+        }
+      )
+    }
+  ), rr = c.brightness !== 0 && !H ? /* @__PURE__ */ a(
+    "div",
+    {
+      ref: ue,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        background: c.brightness > 0 ? "white" : "black",
+        opacity: Math.abs(c.brightness)
+      }
+    }
+  ) : null, nr = (U, p, L) => p || L ? /* @__PURE__ */ a(
+    "div",
+    {
+      ref: U,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        willChange: "transform",
+        boxSizing: "border-box",
+        boxShadow: [p, L ? `inset ${L}` : null].filter(Boolean).join(", ")
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      ref: M,
+      "data-liquid-glass": "",
+      className: S,
+      style: {
+        contain: "layout",
+        position: "relative",
+        overflow: "visible",
+        // Sizing: in auto-fit wrap mode the box shrinks to the wrapped element.
+        // Otherwise impose NO width, so you can size <Glass> with CSS / className /
+        // style (a block is 100% wide by default; the lens fits whatever size the
+        // box ends up). `style` still wins over everything. Height is never forced,
+        // so it's CSS-controllable too.
+        ...er ? { width: "fit-content" } : null,
+        // children-mode supersampling makes the source absolute; reserve height
+        ...Ut ? { minHeight: A.h } : null,
+        ...E
+      },
+      ...y,
+      children: [
+        Ut ? tr(T, t, { willChange: "filter" }) : i == null && f == null ? (
+          // Wrap mode: the children ARE the refracted source. Two sizings:
+          //
+          // • AUTO-FIT (no explicit lens size): render in NORMAL FLOW so the
+          //   wrapped element dictates the container's intrinsic size and the lens
+          //   fits it. An absolute source would contribute no height → the
+          //   container collapses and the filter never engages.
+          //
+          // • EXPLICIT lens size (a "scene"/stage the consumer sizes with CSS):
+          //   FILL the container (absolute inset:0) and CLIP overflow. The obb bend
+          //   is normalized to the SOURCE's box, while the disc geometry uses the
+          //   measured CONTAINER box — if the source is left to size itself from the
+          //   content, free-flowing content (an unsized <img>, reflowing text)
+          //   makes those two boxes diverge, so the bend ovals and detaches from the
+          //   disc. Filling+clipping pins source box === container box, so the lens
+          //   stays round and locked to the disc no matter what content goes in.
+          //
+          // `will-change:filter` makes this the containing block for full-bleed
+          // absolute children; the lens filter is applied imperatively (updateGeometry).
+          /* @__PURE__ */ a(
+            "div",
             {
-              filterId: Y,
-              mode: f,
-              width: w.width,
-              height: w.height,
-              effectiveScale: Ue,
-              aberrationIntensity: Ye,
-              blurStdDeviation: Ce,
-              saturation: Se
+              ref: T,
+              style: er ? { willChange: "filter" } : {
+                // Pin the source box to the MEASURED container size so the obb
+                // bend (normalized to the source) can't diverge from the disc
+                // (normalized to the container). If the source is left to size
+                // itself, free content — an unsized <img>, reflowing text —
+                // makes the two boxes diverge: the bend ovals and the veil
+                // detaches from the disc (this was the "breaks with custom
+                // content" bug). With the box pinned, oversized content simply
+                // OVERFLOWS and is CLIPPED to the stage (so a full-res <img>
+                // covers it instead of leaving a gap).
+                //
+                // Explicit PX height (not `100%`/`minHeight:100%`): WebKit won't
+                // resolve a percentage height against a container whose height
+                // comes from `inset`/abs-positioning rather than an explicit
+                // `height`, so the percentage no-op'd in Safari and the source
+                // stayed content-sized → oval+detached there (round in Blink).
+                // The measured px value is unambiguous in every engine; `auto`
+                // until measured so a content-sized container can't collapse.
+                // `overflow:hidden` + `contain:paint` hard-clip overflow to that
+                // box AND keep the filter's reference box at the stage size in
+                // WebKit (so a huge <img> rasterizes at stage size, not its own).
+                willChange: "filter",
+                position: "relative",
+                height: P ? A.h : void 0,
+                overflow: "hidden",
+                contain: "paint"
+              },
+              children: t
             }
-          ) : null }),
-          Xe ? /* @__PURE__ */ $(
+          )
+        ) : i == null && x ? (
+          // refractionTarget + pixelUnits (hero): the base layer is the crisp,
+          // unfiltered content and must fill the container so full-bleed
+          // absolute children resolve against it. (No will-change:filter — the
+          // refraction copy carries the filter; an empty will-change:filter
+          // wrapper would establish a 0-height containing block and collapse
+          // absolute children.) `isolation:isolate` makes this a stacking
+          // context so a positive `z-index` on the user's refracted content
+          // can't leak out and paint OVER the refraction layer (which is the
+          // next sibling, z-index:auto) — i.e. it guarantees the lens always
+          // renders above the crisp content it refracts.
+          /* @__PURE__ */ a(
             "div",
             {
-              "data-lg-refraction": "",
-              style: qt,
-              "aria-hidden": "true",
-              inert: "true",
-              children: [
-                /* @__PURE__ */ d(
-                  St,
-                  {
-                    filterId: He,
-                    mode: f,
-                    width: xe,
-                    height: Ae,
-                    effectiveScale: Ue,
-                    aberrationIntensity: Ye,
-                    blurStdDeviation: Ce,
-                    saturation: Se
-                  }
-                ),
-                /* @__PURE__ */ d("div", { "data-lg-refraction-copy": "", style: Vt, children: kt })
-              ]
+              ref: T,
+              style: { position: "absolute", inset: 0, isolation: "isolate" },
+              children: t
             }
-          ) : null,
-          /* @__PURE__ */ d("span", { "data-lg-highlight": "", style: Ut, "aria-hidden": "true" }),
-          /* @__PURE__ */ d("span", { "data-lg-press-glow": "", style: Yt, "aria-hidden": "true" }),
-          /* @__PURE__ */ d("span", { "data-lg-border": "", style: Xt, "aria-hidden": "true" }),
-          Ze ? /* @__PURE__ */ d("span", { "data-lg-scrim": "", style: Ze, "aria-hidden": "true" }) : null,
-          F ? /* @__PURE__ */ d(er, { targetRef: k, onScheme: y }) : null,
-          b ? /* @__PURE__ */ d(tr, { targetRef: k, onScheme: M }) : null,
-          /* @__PURE__ */ d("div", { "data-lg-content": "", style: Ht, children: n })
-        ]
-      }
-    )
+          )
+        ) : /* @__PURE__ */ a(
+          "div",
+          {
+            ref: i != null ? void 0 : T,
+            style: i != null ? void 0 : { willChange: "filter" },
+            children: t
+          }
+        ),
+        f != null && // A normal, untransformed copy of the content (never transformed or
+        // repositioned per frame — real Safari drops the filter on a transformed
+        // element; the lens moves only via the filter subregion). The region is
+        // pinned at the copy origin and clip-path trims it to the lens silhouette.
+        (x ? (
+          // Bleed the copy `bleed` px beyond the surface, filled with the page
+          // background, with the content offset back (inset:bleed) to stay aligned
+          // with the base. So a lens near any edge still refracts solid source
+          // instead of warping. Static offset — no per-frame transform.
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ref: q,
+              style: {
+                position: "absolute",
+                inset: -at,
+                pointerEvents: "none",
+                willChange: "filter, clip-path",
+                background: Ve
+              },
+              children: /* @__PURE__ */ a("div", { style: { position: "absolute", inset: at }, children: f })
+            }
+          )
+        ) : ct > 1 ? tr(q, f, {
+          pointerEvents: "none",
+          willChange: "filter, clip-path",
+          background: Ve
+        }) : /* @__PURE__ */ a(
+          "div",
+          {
+            ref: q,
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              willChange: "filter, clip-path",
+              background: Ve
+            },
+            children: f
+          }
+        )),
+        i != null && /* @__PURE__ */ te(
+          "div",
+          {
+            ref: re,
+            style: { position: "absolute", inset: 0, pointerEvents: "none" },
+            children: [
+              /* @__PURE__ */ a("div", { ref: T, style: { willChange: "filter" }, children: i }),
+              rr
+            ]
+          }
+        ),
+        /* @__PURE__ */ te("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [
+          /* @__PURE__ */ a(
+            "svg",
+            {
+              viewBox: `0 0 ${A.w} ${A.h}`,
+              width: "100%",
+              height: "100%",
+              style: { display: "block" },
+              children: /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a(
+                "filter",
+                {
+                  ref: ye,
+                  id: `lg-${J}-v0`,
+                  filterUnits: x ? "userSpaceOnUse" : "objectBoundingBox",
+                  primitiveUnits: x ? "userSpaceOnUse" : "objectBoundingBox",
+                  colorInterpolationFilters: "sRGB",
+                  x: 0,
+                  y: 0,
+                  width: x ? A.w * ct : 1,
+                  height: x ? A.h * ct : 1,
+                  children: P && /* @__PURE__ */ a(
+                    on,
+                    {
+                      lens: {
+                        ...c,
+                        scaleX: F !== void 0 ? Pe(F) : c.scaleX ?? c.strength,
+                        scaleY: F !== void 0 ? Pe(F) : c.scaleY ?? c.strength
+                      },
+                      mapHref: wr,
+                      feImageRef: D,
+                      mapMatrixRef: g,
+                      blurStdDeviation: kr,
+                      specularFromRawMap: X,
+                      brightnessInFilter: H,
+                      filterW: x ? A.w * ct : void 0,
+                      filterH: x ? A.h * ct : void 0,
+                      clipShapeRef: j
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          i == null && rr,
+          k !== void 0 && /* @__PURE__ */ a(
+            "div",
+            {
+              ref: ne,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                pointerEvents: "none",
+                overflow: "hidden",
+                willChange: "transform"
+              }
+            }
+          )
+        ] }),
+        Pt && t == null && f == null && i == null && /* @__PURE__ */ a(
+          "div",
+          {
+            ref: ee,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              willChange: "backdrop-filter, transform",
+              backdropFilter: `blur(${c.frost}px)`,
+              WebkitBackdropFilter: `blur(${c.frost}px)`
+            }
+          }
+        ),
+        nr(ge, c.edgeShadow, c.edgeInsetShadow),
+        nr(
+          me,
+          c.restEdgeShadow,
+          c.restEdgeInsetShadow
+        )
+      ]
+    }
   );
-}
-function nr(...n) {
-  return (t) => {
-    for (const e of n)
-      e && (typeof e == "function" ? e(t) : e.current = t);
-  };
-}
-function rr(n, t) {
-  return n ? t ? (...e) => {
-    n(...e);
-    const r = e[0];
-    (!r || !r.defaultPrevented) && t(...e);
-  } : n : t;
-}
-function sr(n, t) {
-  const e = { ...t };
-  for (const r in n) {
-    const s = n[r], o = t[r];
-    r === "className" ? e.className = [o, s].filter(Boolean).join(" ") : r === "style" ? e.style = { ...o, ...s } : /^on[A-Z]/.test(r) ? e[r] = rr(
-      o,
-      s
-    ) : s !== void 0 && (e[r] = s);
-  }
-  return e;
-}
-const Nt = be(function(t, e) {
-  const { children: r, ...s } = t;
-  if (!jt(r) || Wt.count(r) !== 1)
-    throw new Error(
-      'Slot (asChild) expects exactly one valid React element child. Pass a single element, e.g. <GlassButton asChild><a href="…">Link</a></GlassButton>.'
+}, dr = (t) => ft(
+  () => t == null ? void 0 : xe(t) ? dt([t], () => t.get() / 2) : t / 2,
+  [t]
+), _t = (t) => {
+  const {
+    children: e,
+    width: s,
+    height: n,
+    size: r,
+    radius: u,
+    center: h,
+    optics: f,
+    refract: l,
+    behind: i,
+    src: k,
+    draw: I,
+    lenses: m,
+    videoRef: d,
+    paused: R,
+    poster: G,
+    loop: $,
+    muted: F,
+    autoPlay: Y,
+    crossOrigin: H,
+    maxDpr: x,
+    unstable_lens: K,
+    ...O
+  } = t, S = { ...O, ...K ?? {} }, E = h == null ? void 0 : h.x, y = h == null ? void 0 : h.y, [X, C] = Array.isArray(r) ? r : r != null ? [r, r] : [void 0, void 0], N = dr(s ?? X), _ = dr(n ?? C);
+  if (k != null || I != null)
+    return /* @__PURE__ */ a(
+      Zr,
+      {
+        src: k,
+        draw: I,
+        lens: f,
+        lenses: m,
+        videoRef: d,
+        paused: R,
+        poster: G,
+        loop: $,
+        muted: F,
+        autoPlay: Y,
+        crossOrigin: H,
+        maxDpr: x,
+        lensW: N,
+        lensH: _,
+        borderRadius: u,
+        x: E,
+        y,
+        className: t.className,
+        style: t.style,
+        children: e
+      }
     );
-  const o = r, a = o.props, i = o.ref ?? a.ref, c = sr(s, a);
-  return c.ref = nr(e, i), zt(o, c);
-});
-function or(...n) {
-  return n.filter(Boolean).join(" ");
-}
-function Pe(n) {
-  const { base: t, variants: e, defaultVariants: r } = n;
-  return (s = {}) => {
-    var a;
-    const o = [t];
-    for (const i in e) {
-      const c = s[i] ?? (r == null ? void 0 : r[i]);
-      c !== void 0 && o.push((a = e[i]) == null ? void 0 : a[c]);
-    }
-    return o.push(s.className), or(...o);
-  };
-}
-const ar = {
-  primary: { displacementScale: 80, blurAmount: 0.0625, saturation: 160 },
-  secondary: { displacementScale: 60, blurAmount: 0.0625, saturation: 140 },
-  subtle: { displacementScale: 40, blurAmount: 0.05, saturation: 120 }
-}, ir = {
-  sm: { cornerRadius: 999, padding: 0 },
-  md: { cornerRadius: 999, padding: 0 },
-  lg: { cornerRadius: 999, padding: 0 },
-  icon: { cornerRadius: 999, padding: 0 }
-}, cr = Pe({
-  base: "lg-button",
-  variants: {
-    variant: {
-      primary: "lg-button--primary",
-      secondary: "lg-button--secondary",
-      subtle: "lg-button--subtle"
-    },
-    size: {
-      sm: "lg-button--sm",
-      md: "lg-button--md",
-      lg: "lg-button--lg",
-      icon: "lg-button--icon"
-    }
-  },
-  defaultVariants: { variant: "primary", size: "md" }
-}), yr = be(function({
-  variant: t = "primary",
-  size: e = "md",
-  asChild: r = !1,
-  shine: s = !0,
-  contentClassName: o,
-  glassProps: a,
-  className: i,
-  children: c,
-  style: u,
-  type: g,
-  disabled: b,
-  ...h
-}, f) {
-  const l = cr({ variant: t, size: e, className: i }), m = {
-    "--lg-edge-shadow": ye("light"),
-    ...u
-  }, p = /* @__PURE__ */ d("span", { className: ["lg-content", o].filter(Boolean).join(" "), children: c }), R = r ? /* @__PURE__ */ d(
-    Nt,
+  const {
+    overlay: W,
+    tintColor: B,
+    tintOpacity: c,
+    tintBlur: V,
+    shadowOpacity: J,
+    restShadowOpacity: M,
+    edgeBias: T,
+    brightnessInFilter: q,
+    depth: re,
+    scale: ue,
+    filterResolution: ne,
+    pixelUnits: ee,
+    live: ge,
+    onLensMapChange: me,
+    ...ye
+  } = S, D = xe(s) || xe(n) || xe(u) || xe(X) || xe(C) || xe(E) || xe(y);
+  return e != null && l == null && k == null && I == null && m == null && W == null && !ee && B == null && c == null && V == null && J == null && M == null && T == null && !q && ne == null && !ge && re == null && ue == null && me == null && E == null && y == null && !D ? /* @__PURE__ */ a(
+    nn,
     {
-      ref: f,
-      className: l,
-      style: m,
-      "data-shine": s ? "true" : "false",
-      ...h,
-      children: c
+      ...ye,
+      optics: f,
+      radius: u,
+      width: s ?? X,
+      height: n ?? C,
+      children: e
     }
-  ) : /* @__PURE__ */ d(
-    "button",
+  ) : /* @__PURE__ */ a(
+    an,
     {
-      ref: f,
-      type: g ?? "button",
-      disabled: b,
-      className: l,
-      style: m,
-      "data-shine": s ? "true" : "false",
-      ...h,
-      children: p
+      ...S,
+      lensW: N,
+      lensH: _,
+      borderRadius: u,
+      x: E,
+      y,
+      lens: f,
+      refractionTarget: l,
+      refractionBackground: i,
+      children: e
     }
-  ), S = {
-    ...ar[t],
-    ...ir[e]
-  };
-  return /* @__PURE__ */ d(Ge, { ...S, ...a, children: R });
-}), lr = Pe({
-  base: "lg-card",
-  variants: {
-    elevation: {
-      flat: "lg-card--flat",
-      raised: "lg-card--raised",
-      floating: "lg-card--floating"
-    }
-  },
-  defaultVariants: { elevation: "raised" }
-}), ur = {
-  cornerRadius: 28,
-  padding: "24px 28px",
-  displacementScale: 50
-}, Rr = be(function({
-  elevation: t = "raised",
-  asChild: e = !1,
-  contentClassName: r,
-  glassProps: s,
-  className: o,
-  children: a,
-  style: i,
-  ...c
-}, u) {
-  const g = lr({ elevation: t, className: o }), b = {
-    "--lg-edge-shadow": ye("light"),
-    ...i
-  }, h = /* @__PURE__ */ d("div", { className: ["lg-content", r].filter(Boolean).join(" "), children: a }), f = e ? /* @__PURE__ */ d(
-    Nt,
+  );
+}, cn = 176, ln = 13.6, Wt = 0.34, un = 0.75, hn = 84, fr = 0.033, pr = 8e-3, gr = 0.03, dn = (t, e, s, n) => {
+  oe(() => {
+    let r = 0, u = 0, h = 0, f = 0, l = t.get(), i = !1;
+    const k = (G) => {
+      const $ = Math.pow(G, un) / hn, F = $ < Wt ? $ : Wt, Y = s.current, H = F > Y ? F : Y;
+      return H < Wt ? H : Wt;
+    }, I = (G) => Math.abs(u) < 6e-4 && Math.abs(h) < 6e-3 && G < 6e-3 && s.current === 0, m = (G) => {
+      const $ = (G - f) / 1e3, F = $ < fr ? $ : fr;
+      f = G;
+      const Y = t.get(), H = $ < pr ? pr : $ > gr ? gr : $, x = Math.abs((Y - l) / H);
+      l = Y;
+      const K = k(x), O = cn * (K - u) - ln * h;
+      if (h += O * F, u += h * F, e.set(u), I(x)) {
+        i = !1, e.set(0);
+        return;
+      }
+      r = requestAnimationFrame(m);
+    }, d = () => {
+      i || (i = !0, f = performance.now(), l = t.get(), r = requestAnimationFrame(m));
+    };
+    n.current = d;
+    const R = t.on("change", d);
+    return () => {
+      R(), cancelAnimationFrame(r), n.current = () => {
+      };
+    };
+  }, [t, e, s, n]);
+}, Gt = (t, e, s) => {
+  const n = t < s ? t / s : 1;
+  return e * n * (3 + n * (n - 3));
+}, Ft = Vt.forwardRef(({ x: t, scaleX: e, scaleY: s, style: n, children: r, ...u }, h) => {
+  const f = o(null);
+  return oe(() => {
+    const l = f.current;
+    if (!l) return;
+    const i = [t, e, s].filter(
+      (m) => m != null
+    ), k = () => {
+      let m = "";
+      if (t && (m = `translateX(${t.get()}px)`), e || s) {
+        const d = e ? e.get() : 1, R = s ? s.get() : 1;
+        m += `${m ? " " : ""}scale(${d}, ${R})`;
+      }
+      l.style.transform = m;
+    };
+    k();
+    const I = i.map((m) => m.on("change", k));
+    return () => I.forEach((m) => m());
+  }, [t, e, s]), /* @__PURE__ */ a(
+    "div",
     {
-      ref: u,
-      className: g,
-      style: b,
-      "data-elevation": t,
-      ...c,
-      children: a
+      ref: (l) => {
+        f.current = l, typeof h == "function" ? h(l) : h && (h.current = l);
+      },
+      style: n,
+      ...u,
+      children: r
     }
-  ) : /* @__PURE__ */ d(
+  );
+});
+Ft.displayName = "GlassDiv";
+const Gn = vr(function({
+  variant: e = "primary",
+  size: s = "md",
+  glassProps: n,
+  contentClassName: r,
+  className: u = "",
+  type: h = "button",
+  children: f,
+  ...l
+}, i) {
+  return /* @__PURE__ */ te("span", { className: `matui-glass-button-shell matui-glass-button--${e}`, children: [
+    /* @__PURE__ */ a(
+      _t,
+      {
+        ...n,
+        "aria-hidden": !0,
+        style: {
+          ...n == null ? void 0 : n.style,
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          borderRadius: "inherit",
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ a("span", {})
+      }
+    ),
+    /* @__PURE__ */ a(
+      "button",
+      {
+        ...l,
+        ref: i,
+        type: h,
+        className: `matui-glass-button matui-glass-button--${s} ${u}`,
+        children: /* @__PURE__ */ a("span", { className: r, children: f })
+      }
+    )
+  ] });
+}), Pn = vr(function({ elevation: e = "raised", glassProps: s, className: n = "", children: r, ...u }, h) {
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: u,
-      className: g,
-      style: b,
-      "data-elevation": t,
-      ...c,
-      children: h
+      ...u,
+      ref: h,
+      className: `matui-glass-card matui-glass-card--${e} ${n}`,
+      children: /* @__PURE__ */ a(
+        _t,
+        {
+          ...s,
+          style: { width: "100%", padding: 28, borderRadius: "inherit", ...s == null ? void 0 : s.style },
+          children: r
+        }
+      )
     }
   );
-  return /* @__PURE__ */ d(Ge, { ...ur, ...s, children: f });
-}), dr = typeof window < "u" ? Kt : N, fr = {
-  sm: { displacementScale: 40, blurAmount: 0.05, saturation: 130 },
-  md: { displacementScale: 56, blurAmount: 0.0625, saturation: 140 },
-  lg: { displacementScale: 72, blurAmount: 0.0625, saturation: 150 }
-}, mr = Pe({
-  base: "lg-segmented",
-  variants: {
-    size: {
-      sm: "lg-segmented--sm",
-      md: "lg-segmented--md",
-      lg: "lg-segmented--lg"
-    }
-  },
-  defaultVariants: { size: "md" }
-}), Sr = be(
-  function({
-    options: t,
-    value: e,
-    defaultValue: r,
-    onValueChange: s,
-    size: o = "md",
-    label: a,
-    "aria-label": i,
-    showLabel: c = !1,
-    className: u,
-    style: g,
-    name: b,
-    glassProps: h
-  }, f) {
-    var z;
-    const l = vt(), m = b ?? `lg-seg-${l.replace(/:/g, "")}`, p = (z = t[0]) == null ? void 0 : z.value, R = e !== void 0, [S, T] = C(
-      r ?? p
-    ), v = R ? e : S, E = Qt(() => {
-      const y = t.findIndex((x) => x.value === v);
-      return y < 0 ? 0 : y;
-    }, [t, v]), ne = t.length || 1, re = Be(), G = te(null), P = te([]), [k, w] = C(null), V = tt(() => {
-      const y = G.current, x = P.current[E];
-      if (!y || !x) return;
-      const M = y.getBoundingClientRect(), A = x.getBoundingClientRect();
-      if (!Number.isFinite(M.width) || M.width <= 0) return;
-      const ie = Number.parseFloat(getComputedStyle(y).paddingLeft) || 0, Y = A.left - M.left - ie, L = A.width;
-      !Number.isFinite(Y) || !Number.isFinite(L) || L <= 0 || w(
-        (F) => F && F.left === Y && F.width === L ? F : { left: Y, width: L }
+});
+function Un({
+  label: t,
+  options: e,
+  value: s,
+  defaultValue: n,
+  onValueChange: r,
+  name: u,
+  disabled: h,
+  className: f = ""
+}) {
+  var m;
+  const l = jt(), [i, k] = Ke(
+    n ?? ((m = e.find((d) => !d.disabled)) == null ? void 0 : m.value) ?? ""
+  ), I = s ?? i;
+  return /* @__PURE__ */ te("fieldset", { disabled: h, className: `matui-glass-segmented ${f}`, children: [
+    /* @__PURE__ */ a("legend", { className: "matui-glass-sr-only", children: t }),
+    e.map((d) => /* @__PURE__ */ te("div", { className: "matui-glass-segment", children: [
+      I === d.value && /* @__PURE__ */ a(
+        _t,
+        {
+          "aria-hidden": !0,
+          className: "matui-glass-segment-lens",
+          style: {
+            position: "absolute",
+            inset: 0,
+            borderRadius: 18,
+            width: "100%",
+            height: "100%",
+            background: "#ffffff44",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ a("span", {})
+        }
+      ),
+      /* @__PURE__ */ te("label", { children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "radio",
+            name: u ?? l,
+            value: d.value,
+            checked: I === d.value,
+            disabled: d.disabled,
+            onChange: () => {
+              s === void 0 && k(d.value), r == null || r(d.value);
+            }
+          }
+        ),
+        /* @__PURE__ */ a("span", { children: d.label })
+      ] })
+    ] }, d.value))
+  ] });
+}
+const yr = "(prefers-reduced-motion: reduce)", fn = (t) => {
+  const e = window.matchMedia(yr);
+  return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+}, pn = () => window.matchMedia(yr).matches, gn = () => !1;
+function Rr() {
+  return Br(fn, pn, gn);
+}
+function Sr() {
+  const t = Rr();
+  return Rt(
+    (...[e, s, n]) => zr(e, s, t ? { ...n, duration: 0 } : n),
+    [t]
+  );
+}
+function Mr(...[t, e, s, n]) {
+  const r = Rr(), u = ft(() => be(0), []), h = o(0), f = o(() => {
+  });
+  dn(
+    r ? u : t,
+    e,
+    r ? h : s,
+    r ? f : n
+  ), oe(() => {
+    r && (e.set(0), n.current = () => {
+    });
+  }, [r, e, n]);
+}
+const Er = Lt(0.34, 1.36, 0.42, 1), mn = Lt(0.36, 0, 0.18, 1), Tt = { ease: Er, duration: 0.52 }, kt = { ease: Er, duration: 0.26 }, At = { ease: mn, duration: 0.46 }, bn = {
+  mapSize: 256,
+  // depth/curvature are 0..1 fractions of the thumb's expanded half-extent (~16.5px):
+  // a gentle depth keeps a refractive rim, not a magnifying body dome; the glassy
+  // character is the rim refraction + specular + bloom (raise depth toward 1 for a
+  // true body dome).
+  depth: 0.2,
+  dispersion: 0.65,
+  strength: 0.19,
+  clipToShape: !0,
+  softEdge: !0,
+  curvature: 0.3,
+  splay: 0.6,
+  bend: 0.1,
+  bendWidth: 0.06,
+  frost: 0,
+  brightness: 0.05,
+  specular: 1.2,
+  sheenAngle: 45,
+  sheenDark: !1,
+  glow: 0.05,
+  glowSpread: 0.5,
+  glowFalloff: 1.5,
+  sheen: 0.45,
+  sheenWidth: 2,
+  sheenFalloff: 1.5,
+  edgeShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
+  edgeInsetShadow: "0 -4px 10px rgba(0, 0, 0, 0.12)",
+  // Resting puck drop-shadow (the floating white thumb sits ABOVE the track) —
+  // a tight contact shadow + a soft ambient one. Fades out as it expands into
+  // the lens (which has its own `edgeShadow`).
+  restEdgeShadow: "0 1px 3px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.14)"
+}, vn = {
+  brightness: 0.12,
+  glow: 0.4,
+  sheen: 0.5
+}, wn = {
+  brightness: -0.02,
+  sheenAngle: 30,
+  specular: 1.5,
+  glow: 0.4,
+  glowSpread: 0.5,
+  glowFalloff: 2,
+  sheen: 1,
+  sheenWidth: 1.5,
+  sheenFalloff: 1
+}, mr = "color-mix(in srgb, var(--glass-track), var(--glass-active) calc(var(--switch-progress, 0) * 100%))", On = ({
+  checked: t,
+  defaultChecked: e = !1,
+  onCheckedChange: s,
+  disabled: n,
+  name: r,
+  value: u,
+  ariaLabel: h,
+  width: f = 74,
+  height: l = 28,
+  lens: i,
+  tintBlur: k,
+  rubberOvershoot: I = 0.15,
+  rubberDampening: m = 10,
+  filterResolution: d = 2,
+  forceExpanded: R = !1,
+  onLensMapChange: G,
+  scheme: $ = "light",
+  trackColor: F,
+  activeColor: Y,
+  surface: H
+}) => {
+  const x = Sr(), [K, O] = Ke(e), S = t ?? K, E = $ === "dark", y = Math.round(0.6 * f), X = l - 6, C = f - y - 6, N = f * I, _ = N * m, W = l / 2, B = X / 2, c = y / 2, V = X / 2, J = Math.round(0.75 * l), M = Math.ceil(0.5 * Math.max(c, V) + N) + 2, T = f + 2 * M, q = l + 2 * M, re = o(C), ue = o(y), ne = o(T), ee = o(M), ge = o(c), me = o(V), ye = o(B), D = o(k ?? 0);
+  qe(() => {
+    re.current = C, ue.current = y, ne.current = T, ee.current = M, ge.current = c, me.current = V, ye.current = B, D.current = k ?? 0;
+  });
+  const j = o(S), g = ft(() => {
+    const v = be(j.current ? re.current : 0), fe = dt(
+      [v],
+      () => (ee.current + 3 + ue.current / 2 + v.get()) / ne.current
+    ), pe = be(ge.current), we = be(me.current), je = be(ye.current), w = be(1), z = be(0.85), ae = be(0.525), Ie = be(D.current), We = be(0), Fe = dt([We], () => 1 - We.get()), Le = be(0), ze = dt([pe, Le], () => pe.get() * (1 - 0.2 * Le.get()) * 2), pt = dt([we, Le], () => we.get() * (1 + 0.4 * Le.get()) * 2), Oe = dt([w], () => 0.5 * w.get());
+    return {
+      thumbX: v,
+      lensX: fe,
+      halfW: pe,
+      halfH: we,
+      radius: je,
+      tintOpacity: w,
+      trackScaleX: z,
+      trackScaleY: ae,
+      blur: Ie,
+      shadowOpacity: We,
+      restShadowOpacity: Fe,
+      stretch: Le,
+      lensW: ze,
+      lensH: pt,
+      edgeBias: Oe
+    };
+  }, []), Q = o(0), se = o(() => {
+  });
+  Mr(g.thumbX, g.stretch, Q, se);
+  const A = (v) => {
+    x(g.halfW, 1.5 * ge.current, v), x(g.halfH, 1.5 * me.current, v), x(g.radius, 1.5 * ye.current, v), x(g.tintOpacity, 0, v), x(g.blur, 0, v), x(g.trackScaleX, 0.95, v), x(g.trackScaleY, 0.975, v), x(g.shadowOpacity, 1, v);
+  }, De = (v) => {
+    x(g.halfW, ge.current, v), x(g.halfH, me.current, v), x(g.radius, ye.current, v), x(g.tintOpacity, 1, v), x(g.blur, D.current, v), x(g.trackScaleX, 0.85, v), x(g.trackScaleY, 0.525, v), x(g.shadowOpacity, 0, v);
+  }, ve = o(!1);
+  oe(() => {
+    R !== ve.current && (ve.current = R, R ? (A(kt), Q.current = 0.175, se.current()) : (De(At), Q.current = 0));
+  }, [R]);
+  const P = o("idle"), Z = o(void 0), Re = o(void 0), Ne = o(!0), [Ve, he] = Ke(!1), de = o(!1), Te = o(null), Ge = o(null), b = o(null), Ae = o(0), Xe = o(0), $e = o(!1), _e = o(null);
+  oe(() => {
+    Ne.current = !0;
+    const v = Ge.current;
+    return () => {
+      if (Ne.current = !1, clearTimeout(Z.current), clearTimeout(Re.current), b.current !== null && v) {
+        try {
+          v.releasePointerCapture(b.current);
+        } catch {
+        }
+        b.current = null;
+      }
+    };
+  }, []), oe(() => {
+    Ve || P.current === "tap" || (_e.current = x(g.thumbX, S ? C : 0, Tt));
+  }, [S, Ve, g.thumbX, C, x]), qe(() => {
+    const v = (fe) => {
+      var we;
+      const pe = re.current;
+      (we = Te.current) == null || we.style.setProperty(
+        "--switch-progress",
+        String(pe > 0 ? Math.max(0, Math.min(1, fe / pe)) : 0)
       );
-    }, [E]), U = te(V);
-    U.current = V, dr(() => {
-      V();
-    }, [V]), N(() => {
-      const y = G.current;
-      if (!y || typeof ResizeObserver > "u") return;
-      let x = 0;
-      const M = new ResizeObserver(() => {
-        x || (x = requestAnimationFrame(() => {
-          x = 0, U.current();
-        }));
-      });
-      return M.observe(y), () => {
-        x && cancelAnimationFrame(x), M.disconnect();
-      };
-    }, []);
-    const j = tt(
-      (y) => {
-        R || T(y), s == null || s(y);
-      },
-      [R, s]
-    ), I = fr[o], se = ye("light"), W = k !== null, oe = W ? {
-      width: `${k.width}px`,
-      transform: `translateX(${k.left}px)`
-    } : {
-      width: `${100 / ne}%`,
-      transform: `translateX(${E * 100}%)`
     };
-    oe.transition = re ? "none" : "transform 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1)";
-    const fe = {
-      "--lg-edge-shadow": se,
-      ...g
-    }, ae = /* @__PURE__ */ d(
-      "legend",
-      {
-        className: c ? "lg-segmented-legend lg-segmented-legend--visible" : "lg-segmented-legend",
-        children: a ?? i ?? "Options"
+    return v(g.thumbX.get()), g.thumbX.on("change", v);
+  }, [g.thumbX]);
+  const nt = ft(
+    () => ({
+      ...bn,
+      ...E ? vn : wn,
+      ...i,
+      sheenDark: !E
+    }),
+    [E, i]
+  ), Ue = (v) => {
+    de.current || n || (t === void 0 && O(v), s == null || s(v), P.current === "idle" && (P.current = "tap", A(kt), clearTimeout(Re.current), Re.current = setTimeout(() => {
+      De(At);
+    }, 290), _e.current = x(g.thumbX, v ? C : 0, {
+      ...Tt,
+      onComplete: () => {
+        Ne.current && P.current === "tap" && (P.current = "idle");
       }
-    );
-    return /* @__PURE__ */ $(
-      "fieldset",
-      {
-        ref: f,
-        className: mr({ size: o, className: u }),
-        style: fe,
-        "aria-label": i,
-        "data-selected-index": E,
-        "data-measured": W ? "true" : "false",
-        children: [
-          ae,
-          /* @__PURE__ */ $("div", { className: "lg-segmented-track", ref: G, children: [
-            /* @__PURE__ */ d(
+    })));
+  }, et = H ?? (E ? "#1f1f24" : "#ffffff");
+  return /* @__PURE__ */ te(
+    "label",
+    {
+      ref: Te,
+      className: "matui-glass-control",
+      style: {
+        flexShrink: 0,
+        width: f,
+        height: l,
+        overflow: "visible",
+        cursor: n ? "not-allowed" : "pointer",
+        opacity: n ? 0.4 : void 0,
+        borderRadius: 999,
+        display: "block",
+        position: "relative",
+        "--glass-track": F ?? (E ? "#2a2828" : "#e1dfdf"),
+        "--glass-active": Y ?? "#0a84ff"
+      },
+      children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            "aria-checked": S,
+            checked: S ?? !1,
+            onChange: (v) => Ue(v.target.checked),
+            onClick: (v) => {
+              de.current && v.preventDefault();
+            },
+            onKeyDown: (v) => {
+              v.key === "Enter" && (v.preventDefault(), Ue(!S));
+            },
+            disabled: n,
+            name: r,
+            value: u,
+            "aria-label": h,
+            style: {
+              whiteSpace: "nowrap",
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              pointerEvents: "none",
+              border: 0,
+              width: 1,
+              height: 1,
+              margin: -1,
+              padding: 0,
+              position: "absolute",
+              overflow: "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          _t,
+          {
+            optics: nt,
+            center: { x: g.lensX, y: 0.5 },
+            size: [g.lensW, g.lensH],
+            radius: g.radius,
+            unstable_lens: {
+              tintColor: "white",
+              tintOpacity: g.tintOpacity,
+              tintBlur: g.blur,
+              shadowOpacity: g.shadowOpacity,
+              restShadowOpacity: g.restShadowOpacity,
+              edgeBias: g.edgeBias
+            },
+            filterResolution: d,
+            onLensMapChange: G,
+            behind: et,
+            style: {
+              width: T,
+              height: q,
+              overflow: "visible",
+              margin: -M
+            },
+            refract: /* @__PURE__ */ a(
               "div",
               {
-                className: "lg-segmented-indicator",
-                style: oe,
-                "data-selected-index": E,
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ d(
-                  Ge,
+                style: {
+                  padding: M,
+                  height: l,
+                  display: "flex",
+                  alignItems: "center",
+                  boxSizing: "content-box"
+                },
+                children: /* @__PURE__ */ a(
+                  Ft,
                   {
-                    cornerRadius: "inherit",
-                    padding: 0,
-                    displacementScale: I.displacementScale,
-                    blurAmount: I.blurAmount,
-                    saturation: I.saturation,
-                    ...h,
-                    className: "lg-segmented-glass",
-                    style: { width: "100%", height: "100%", display: "block" },
-                    children: /* @__PURE__ */ d("span", { "aria-hidden": "true", className: "lg-segmented-glass-fill" })
+                    scaleX: g.trackScaleX,
+                    scaleY: g.trackScaleY,
+                    style: {
+                      width: f,
+                      height: J,
+                      borderRadius: J / 2,
+                      background: mr
+                    }
                   }
                 )
               }
             ),
-            t.map((y, x) => {
-              const M = y.value === v, A = `${m}-${y.value}`;
-              return /* @__PURE__ */ $(
-                "label",
+            children: /* @__PURE__ */ a("div", { style: { padding: M }, children: /* @__PURE__ */ a(
+              "div",
+              {
+                "aria-hidden": !0,
+                style: {
+                  width: f,
+                  height: l,
+                  borderRadius: W,
+                  background: mr,
+                  display: "block",
+                  position: "relative",
+                  overflow: "visible"
+                },
+                children: /* @__PURE__ */ a(
+                  Ft,
+                  {
+                    ref: Ge,
+                    x: g.thumbX,
+                    style: {
+                      position: "absolute",
+                      willChange: "transform",
+                      userSelect: "none",
+                      WebkitUserSelect: "none",
+                      width: y,
+                      height: X,
+                      top: 3,
+                      left: 3,
+                      touchAction: "none"
+                    },
+                    onPointerDown: (v) => {
+                      b.current !== null || n || (b.current = v.pointerId, v.currentTarget.setPointerCapture(v.pointerId), Ae.current = v.clientX, Xe.current = g.thumbX.get(), $e.current = !1, he(!0), de.current = !0, clearTimeout(Z.current), clearTimeout(Re.current), P.current = "pending", Z.current = setTimeout(() => {
+                        var fe;
+                        P.current === "pending" && (P.current = "hold", (fe = _e.current) == null || fe.stop(), A(kt), Q.current = 0.175, se.current());
+                      }, 170));
+                    },
+                    onPointerMove: (v) => {
+                      var we;
+                      if (v.pointerId !== b.current) return;
+                      const fe = v.clientX - Ae.current;
+                      if (!$e.current) {
+                        if (Math.abs(fe) < 3) return;
+                        $e.current = !0, (we = _e.current) == null || we.stop(), Xe.current = g.thumbX.get(), Ae.current = v.clientX, clearTimeout(Z.current), Q.current = 0, P.current !== "hold" && (P.current = "hold", A(kt));
+                      }
+                      let pe = Xe.current + (v.clientX - Ae.current);
+                      pe < 0 ? pe = -Gt(-pe, N, _) : pe > C && (pe = C + Gt(pe - C, N, _)), g.thumbX.set(pe);
+                    },
+                    onPointerUp: (v) => {
+                      if (v.pointerId === b.current)
+                        if (b.current = null, clearTimeout(Z.current), $e.current) {
+                          he(!1), P.current = "idle", De(At);
+                          const fe = Math.max(0, Math.min(C, g.thumbX.get())) > C / 2;
+                          _e.current = x(
+                            g.thumbX,
+                            fe ? C : 0,
+                            Tt
+                          ), fe !== S && (s == null || s(fe)), requestAnimationFrame(() => {
+                            de.current = !1;
+                          });
+                        } else if (P.current === "pending" || P.current === "tap") {
+                          P.current = "tap", de.current = !1, he(!1), A(kt), clearTimeout(Re.current), Re.current = setTimeout(() => {
+                            De(At);
+                          }, 290);
+                          const fe = S ? 0 : C;
+                          _e.current = x(g.thumbX, fe, {
+                            ...Tt,
+                            onComplete: () => {
+                              Ne.current && P.current === "tap" && (P.current = "idle");
+                            }
+                          });
+                        } else P.current === "hold" ? (P.current = "idle", he(!1), Q.current = 0, De(At), _e.current = x(
+                          g.thumbX,
+                          S ? C : 0,
+                          Tt
+                        ), requestAnimationFrame(() => {
+                          de.current = !1;
+                        })) : (he(!1), de.current = !1);
+                    },
+                    onPointerCancel: (v) => {
+                      v.pointerId === b.current && (b.current = null, clearTimeout(Z.current), Q.current = 0, he(!1), P.current = "idle", De(At), _e.current = x(
+                        g.thumbX,
+                        S ? C : 0,
+                        Tt
+                      ), requestAnimationFrame(() => {
+                        de.current = !1;
+                      }));
+                    },
+                    onDragStart: (v) => v.preventDefault()
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}, br = { ease: Lt(0.34, 1.36, 0.42, 1), duration: 0.27 }, qt = { ease: Lt(0.36, 0, 0.18, 1), duration: 0.46 }, xn = {
+  mapSize: 256,
+  // depth/curvature are 0..1 fractions of the thumb's expanded half-extent (~16.5px):
+  // depth ≈ 0.12 is a ~1.3–2px refractive rim; curvature ≈ 0.30 shapes the rim BEND
+  // (strongest on the short vertical axis). At this depth the thumb body stays
+  // near-neutral, so the bleed is the two-tone track (blue fill / grey track) showing
+  // through a glassy-rimmed thumb — NOT a magnifying body dome. Per-axis scaleX/scaleY
+  // (vs the switch's single `strength`): a wide thumb over a thin horizontal track
+  // wants more vertical than horizontal bend (Safari more still — see SLIDER_SAFARI).
+  depth: 0.2,
+  dispersion: 0.5,
+  scaleX: 0.06,
+  scaleY: 0.06,
+  clipToShape: !0,
+  softEdge: !0,
+  curvature: 0.55,
+  splay: 0.5,
+  bend: 0.1,
+  bendWidth: 0.05,
+  frost: 0,
+  brightness: 0.06,
+  specular: 1.5,
+  sheenAngle: 45,
+  sheenDark: !1,
+  glow: 0.4,
+  glowSpread: 0.5,
+  glowFalloff: 1.5,
+  sheen: 0,
+  sheenWidth: 3,
+  sheenFalloff: 1.5,
+  edgeShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
+  edgeInsetShadow: "0 -4px 10px rgba(0, 0, 0, 0.12)"
+  // restEdgeShadow (the floating resting-puck shadow, fades out as the thumb
+  // blooms) is themed per scheme — see SLIDER_DARK / SLIDER_LIGHT below.
+}, yn = {
+  restEdgeShadow: "0 1.333px 5.333px rgba(0, 0, 0, 0.5)",
+  scaleX: 0.133,
+  scaleY: 0.135,
+  brightness: 0.12,
+  sheenAngle: 45,
+  glowFalloff: 1.5,
+  sheen: 0.5,
+  sheenWidth: 1,
+  sheenFalloff: 1.5
+}, Rn = {
+  restEdgeShadow: "0 1.333px 5.333px rgba(46, 15, 15, 0.12)",
+  scaleX: 0.1,
+  scaleY: 0.1,
+  brightness: -0.02,
+  sheenAngle: 30,
+  glowFalloff: 2,
+  sheen: 1,
+  sheenWidth: 1,
+  sheenFalloff: 1
+}, Sn = { scaleY: 0.25 }, Mn = () => {
+  const [t, e] = Ke(!1);
+  return oe(() => {
+    e(
+      typeof navigator < "u" && /^((?!chrome|chromium|android).)*safari/i.test(navigator.userAgent)
+    );
+  }, []), t;
+}, Nn = ({
+  value: t,
+  defaultValue: e = 50,
+  onValueChange: s,
+  min: n = 0,
+  max: r = 100,
+  step: u = 1,
+  disabled: h,
+  width: f = 240,
+  thumbHeight: l = 22,
+  thumbWidth: i,
+  height: k = 6,
+  rubberOvershoot: I = 0.05,
+  rubberDampening: m = 30,
+  refractionTrackHeight: d,
+  lens: R,
+  tintBlur: G,
+  filterResolution: $ = 2,
+  name: F,
+  ariaLabel: Y,
+  forceExpanded: H = !1,
+  onLensMapChange: x,
+  scheme: K = "light",
+  trackColor: O,
+  activeColor: S,
+  surface: E
+}) => {
+  const y = Sr(), X = K === "dark", C = Mn(), N = t !== void 0, [_, W] = Ke(e), B = N ? t : _, c = Rt(
+    (w) => {
+      const z = u > 0 ? Math.round((w - n) / u) * u + n : w, ae = Math.max(n, Math.min(r, z));
+      N || W(ae), s == null || s(ae);
+    },
+    [n, r, u, N, s]
+  ), V = i ?? Math.round(2 * l), J = f - V, M = V / 2, T = l / 2, q = l / 2, re = k / 2, ue = f * I, ne = ue * m, ee = d ?? Math.round(0.75 * l), ge = Math.ceil(0.5 * Math.max(M, T) + ue) + 2, me = f + 2 * ge, ye = l + 2 * ge, D = o(J), j = o(V), g = o(me), Q = o(ge), se = o(M), A = o(T), De = o(q), ve = o(!1), P = o(0), Z = o(0), Re = o(ue), Ne = o(ne), Ve = o(G ?? 0);
+  qe(() => {
+    D.current = J, j.current = V, g.current = me, Q.current = ge, se.current = M, A.current = T, De.current = q, Re.current = ue, Ne.current = ne, Ve.current = G ?? 0;
+  });
+  const he = Rt(
+    (w) => r > n ? (w - n) / (r - n) * J : 0,
+    [n, r, J]
+  ), de = Rt(
+    (w) => {
+      const z = Math.max(0, Math.min(J, w)), ae = J > 0 ? n + z / J * (r - n) : n;
+      return Math.max(
+        n,
+        Math.min(r, u > 0 ? Math.round((ae - n) / u) * u + n : ae)
+      );
+    },
+    [n, r, J, u]
+  ), Te = o(he), Ge = o(B), b = ft(() => {
+    const w = be(Te.current(Ge.current)), z = dt(
+      [w],
+      () => (Q.current + j.current / 2 + w.get()) / g.current
+    ), ae = be(se.current), Ie = be(A.current), We = be(De.current), Fe = be(1), Le = be(0.85), ze = be(0.525), pt = be(Ve.current), Oe = be(0), wt = dt([Oe], () => 1 - Oe.get()), tt = be(0), at = dt([ae, tt], () => ae.get() * (1 - 0.2 * tt.get()) * 2), ce = dt([Ie, tt], () => Ie.get() * (1 + 0.4 * tt.get()) * 2);
+    return {
+      thumbX: w,
+      lensX: z,
+      halfW: ae,
+      halfH: Ie,
+      radius: We,
+      tintOpacity: Fe,
+      trackScaleX: Le,
+      trackScaleY: ze,
+      blur: pt,
+      shadowOpacity: Oe,
+      restShadowOpacity: wt,
+      stretch: tt,
+      lensW: at,
+      lensH: ce
+    };
+  }, []);
+  oe(() => {
+    ve.current || (b.halfW.set(M), b.halfH.set(T), b.radius.set(q));
+  }, [M, T, q, b]);
+  const Ae = o(0), Xe = o(() => {
+  });
+  Mr(b.thumbX, b.stretch, Ae, Xe);
+  const $e = (w) => {
+    y(b.halfW, 1.5 * se.current, w), y(b.halfH, 1.5 * A.current, w), y(b.radius, 1.5 * De.current, w), y(b.tintOpacity, 0, w), y(b.blur, 0, w), y(b.trackScaleX, 0.95, w), y(b.trackScaleY, 0.975, w), y(b.shadowOpacity, 1, w);
+  }, _e = (w) => {
+    y(b.halfW, se.current, w), y(b.halfH, A.current, w), y(b.radius, De.current, w), y(b.tintOpacity, 1, w), y(b.blur, Ve.current, w), y(b.trackScaleX, 0.85, w), y(b.trackScaleY, 0.525, w), y(b.shadowOpacity, 0, w);
+  }, nt = o(!1);
+  oe(() => {
+    H !== nt.current && (nt.current = H, H ? ($e(br), Ae.current = 0.175, Xe.current()) : (_e(qt), Ae.current = 0));
+  }, [H]);
+  const Ue = o(null), et = o(null), He = o(null), ke = o(null);
+  oe(
+    () => () => {
+      if (ke.current !== null && et.current) {
+        try {
+          et.current.releasePointerCapture(ke.current);
+        } catch {
+        }
+        ke.current = null;
+      }
+    },
+    []
+  ), oe(() => {
+    ve.current || b.thumbX.set(he(B));
+  }, [B, he, b.thumbX]), oe(() => {
+    const w = (z) => {
+      const ae = Ue.current;
+      if (!ae) return;
+      const Ie = j.current / 2 + z, We = D.current > 0 ? z / D.current : 0;
+      ae.style.setProperty("--slider-fill", `${Ie}px`), ae.style.setProperty("--slider-progress", String(Math.max(0, Math.min(1, We))));
+    };
+    return w(b.thumbX.get()), b.thumbX.on("change", w);
+  }, [b.thumbX]);
+  const v = ft(() => ({
+    ...xn,
+    ...X ? yn : Rn,
+    ...C ? Sn : null,
+    ...R,
+    sheenDark: !X
+  }), [X, C, R]), fe = E ?? (X ? "#1f1f24" : "#ffffff"), pe = O ?? (X ? "#2a2828" : "#e1dfdf"), we = S ?? "#0a84ff", je = (w) => {
+    if (w.pointerId !== ke.current) return;
+    ke.current = null, ve.current = !1, Ae.current = 0;
+    const z = Math.max(0, Math.min(D.current, b.thumbX.get()));
+    y(b.thumbX, z, qt), _e(qt);
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: Ue,
+      className: "matui-glass-control",
+      style: {
+        flexShrink: 0,
+        width: f,
+        height: l,
+        overflow: "visible",
+        borderRadius: 999,
+        position: "relative",
+        opacity: h ? 0.4 : void 0,
+        cursor: h ? "not-allowed" : void 0,
+        "--glass-track": pe,
+        "--glass-active": we
+      },
+      children: /* @__PURE__ */ a(
+        _t,
+        {
+          optics: v,
+          center: { x: b.lensX, y: 0.5 },
+          size: [b.lensW, b.lensH],
+          radius: b.radius,
+          unstable_lens: {
+            tintColor: "white",
+            tintOpacity: b.tintOpacity,
+            tintBlur: b.blur,
+            shadowOpacity: b.shadowOpacity,
+            restShadowOpacity: b.restShadowOpacity
+          },
+          filterResolution: $,
+          onLensMapChange: x,
+          behind: fe,
+          style: {
+            width: me,
+            height: ye,
+            overflow: "visible",
+            margin: -ge
+          },
+          refract: /* @__PURE__ */ a(
+            "div",
+            {
+              style: {
+                padding: ge,
+                height: l,
+                display: "flex",
+                alignItems: "center",
+                boxSizing: "content-box"
+              },
+              children: /* @__PURE__ */ te(
+                Ft,
                 {
-                  htmlFor: A,
-                  className: "lg-segmented-option",
-                  "data-active": M ? "true" : "false",
-                  "data-icon-only": y.icon != null && y.label == null ? "true" : "false",
-                  ref: (ie) => {
-                    P.current[x] = ie;
+                  scaleX: b.trackScaleX,
+                  scaleY: b.trackScaleY,
+                  style: {
+                    position: "relative",
+                    width: f,
+                    height: ee,
+                    borderRadius: ee / 2,
+                    overflow: "hidden"
                   },
                   children: [
-                    /* @__PURE__ */ d(
-                      "input",
+                    /* @__PURE__ */ a(
+                      "div",
                       {
-                        id: A,
-                        className: "lg-segmented-input",
-                        type: "radio",
-                        name: m,
-                        value: y.value,
-                        checked: M,
-                        disabled: y.disabled,
-                        onChange: () => j(y.value)
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          background: "var(--glass-track)"
+                        }
                       }
                     ),
-                    y.icon != null ? /* @__PURE__ */ d("span", { className: "lg-segmented-icon", "aria-hidden": "true", children: y.icon }) : null,
-                    y.label != null ? /* @__PURE__ */ d("span", { className: "lg-segmented-label", children: y.label }) : null
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          background: "var(--glass-active)",
+                          borderRadius: "inherit",
+                          transform: "translateX(calc((var(--slider-progress, 0) - 1) * 100%))"
+                        }
+                      }
+                    )
                   ]
+                }
+              )
+            }
+          ),
+          children: /* @__PURE__ */ te("div", { style: { padding: ge }, children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: He,
+                type: "range",
+                min: n,
+                max: r,
+                step: u,
+                value: B,
+                disabled: h,
+                name: F,
+                "aria-label": Y,
+                onChange: (w) => c(Number(w.target.value)),
+                style: {
+                  whiteSpace: "nowrap",
+                  clip: "rect(0 0 0 0)",
+                  clipPath: "inset(50%)",
+                  pointerEvents: "none",
+                  border: 0,
+                  width: 1,
+                  height: 1,
+                  margin: -1,
+                  padding: 0,
+                  position: "absolute",
+                  overflow: "hidden"
+                }
+              }
+            ),
+            /* @__PURE__ */ te(
+              "div",
+              {
+                ref: et,
+                "aria-hidden": !0,
+                style: {
+                  width: f,
+                  height: l,
+                  cursor: h ? "not-allowed" : "pointer",
+                  touchAction: "none",
+                  userSelect: "none",
+                  WebkitUserSelect: "none",
+                  alignItems: "center",
+                  display: "flex",
+                  position: "relative",
+                  overflow: "visible"
                 },
-                y.value
-              );
-            })
+                onPointerDown: (w) => {
+                  var We, Fe;
+                  if (h || ke.current !== null) return;
+                  ke.current = w.pointerId, w.currentTarget.setPointerCapture(w.pointerId), ve.current = !0, (We = He.current) == null || We.focus({ preventScroll: !0 });
+                  const z = (Fe = et.current) == null ? void 0 : Fe.getBoundingClientRect(), ae = z ? w.clientX - z.left - j.current / 2 : 0, Ie = Math.max(0, Math.min(D.current, ae));
+                  b.thumbX.set(Ie), c(de(Ie)), P.current = w.clientX, Z.current = Ie, $e(br), Ae.current = 0.175, Xe.current();
+                },
+                onPointerMove: (w) => {
+                  if (w.pointerId !== ke.current) return;
+                  let z = Z.current + (w.clientX - P.current);
+                  z < 0 ? z = -Gt(-z, Re.current, Ne.current) : z > D.current && (z = D.current + Gt(z - D.current, Re.current, Ne.current)), b.thumbX.set(z), c(de(Math.max(0, Math.min(D.current, z))));
+                },
+                onPointerUp: je,
+                onPointerCancel: je,
+                onDragStart: (w) => w.preventDefault(),
+                children: [
+                  /* @__PURE__ */ te(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        position: "relative",
+                        overflow: "hidden",
+                        height: k,
+                        borderRadius: re
+                      },
+                      children: [
+                        /* @__PURE__ */ a(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              inset: 0,
+                              background: "var(--glass-track)",
+                              borderRadius: "inherit"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ a(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              bottom: 0,
+                              width: "var(--slider-fill)",
+                              background: "var(--glass-active)",
+                              borderRadius: re
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    Ft,
+                    {
+                      x: b.thumbX,
+                      style: {
+                        willChange: "transform",
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: V,
+                        height: l
+                      }
+                    }
+                  )
+                ]
+              }
+            )
           ] })
-        ]
-      }
-    );
+        }
+      )
+    }
+  );
+}, En = "-apple-system, 'SF Pro Text', ui-sans-serif, system-ui, sans-serif", Tn = {
+  mapSize: 256,
+  clipToShape: !0,
+  softEdge: !0,
+  depth: 1,
+  curvature: 0.5,
+  dispersion: 0.6,
+  strength: 0.17,
+  bend: 0.7,
+  bendWidth: 0.12,
+  // Light frost so the bend + chroma stay visible (a heavy blur washes the
+  // refraction out), with a soft veil + sheen for the glassy edge. Legibility comes
+  // from the card overlay's top-lit white gradient, not a heavy lens veil.
+  frost: 3,
+  brightness: 0.22,
+  specular: 1.3,
+  sheenAngle: 50,
+  glow: 0.32,
+  glowSpread: 1,
+  glowFalloff: 1,
+  sheen: 1.3,
+  sheenWidth: 3
+}, An = "#1c1c1e", _n = "rgba(0,0,0,0.5)", kn = "rgba(0,0,0,0.74)", Fn = "radial-gradient(120% 120% at 12% 18%, #ff9d4d 0%, transparent 46%),radial-gradient(120% 120% at 82% 14%, #4dc3ff 0%, transparent 44%),radial-gradient(130% 130% at 78% 88%, #ff5d8f 0%, transparent 50%),radial-gradient(140% 140% at 22% 86%, #7a5cff 0%, transparent 52%),linear-gradient(135deg, #b24bd8, #f0793b)", Ln = ({ bg: t }) => /* @__PURE__ */ a(
+  "div",
+  {
+    "aria-hidden": !0,
+    style: {
+      position: "absolute",
+      inset: 0,
+      background: t,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    }
   }
-), vr = "0.0.0";
+), Cn = 420, Dn = 48, Bt = 84, Kt = 20, Xn = () => {
+  const t = o(null), [e, s] = Ke({ w: 0, h: 0 });
+  return qe(() => {
+    const n = t.current;
+    if (!n) return;
+    const r = () => s({ w: n.clientWidth, h: n.clientHeight });
+    r();
+    const u = new ResizeObserver(r);
+    return u.observe(n), () => u.disconnect();
+  }, []), [t, e];
+}, $n = ({
+  title: t = "Priya Raman",
+  time: e = "now",
+  body: s = "Just landed — grabbing a cab. Save me a seat and order the usual?",
+  avatar: n = "PR",
+  wallpaper: r = Fn,
+  lens: u
+}) => {
+  const [h, { w: f, h: l }] = Xn(), i = Math.round(Math.min(f - Dn, Cn)), k = f > 0 && l > 0 && i > 0, I = Math.round((f - i) / 2), m = Math.round((l - Bt) / 2);
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      ref: h,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        fontFamily: En,
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ a(Ln, { bg: r }),
+        k && /* @__PURE__ */ te(ot, { children: [
+          /* @__PURE__ */ a(
+            _t,
+            {
+              optics: { ...Tn, ...u },
+              brightnessInFilter: !0,
+              width: i,
+              height: Bt,
+              radius: Kt,
+              refract: /* @__PURE__ */ a(
+                "div",
+                {
+                  "aria-hidden": !0,
+                  style: {
+                    position: "absolute",
+                    left: -I,
+                    top: -m,
+                    width: f,
+                    height: l,
+                    background: r,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center"
+                  }
+                }
+              ),
+              behind: "#c8569f",
+              style: {
+                position: "absolute",
+                left: I,
+                top: m,
+                width: i,
+                height: Bt,
+                borderRadius: Kt
+              }
+            }
+          ),
+          /* @__PURE__ */ te(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: I,
+                top: m,
+                width: i,
+                height: Bt,
+                borderRadius: Kt,
+                // A top-lit white gradient brightens the frosted glass (so it reads
+                // light, not dark over a dark wallpaper) and gives it dimension —
+                // the refraction still shows through the lower-opacity lower half.
+                background: "linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.16) 100%)",
+                // Edge stack: a bright top sheen, a 1px white inner highlight, a soft
+                // inner glow blooming in from the rim, the dark hairline, + float shadow.
+                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 0 24px rgba(255,255,255,0.55), 0 0 0 0.5px rgba(0,0,0,0.18), 0 14px 36px rgba(0,0,0,0.22), 0 2px 5px rgba(0,0,0,0.14)",
+                display: "flex",
+                alignItems: "center",
+                gap: 14,
+                padding: "0 18px",
+                boxSizing: "border-box",
+                color: An
+              },
+              children: [
+                /* @__PURE__ */ a(
+                  "div",
+                  {
+                    "aria-hidden": !0,
+                    style: {
+                      flexShrink: 0,
+                      width: 40,
+                      height: 40,
+                      borderRadius: "50%",
+                      display: "grid",
+                      placeItems: "center",
+                      background: "linear-gradient(160deg, #2e9bff 0%, #0a6cff 100%)",
+                      color: "#fff",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      letterSpacing: 0.3,
+                      boxShadow: "inset 0 1px 1px rgba(255,255,255,0.4)"
+                    },
+                    children: n
+                  }
+                ),
+                /* @__PURE__ */ te("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ te("div", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
+                    /* @__PURE__ */ a("span", { style: { fontSize: 14.5, fontWeight: 600 }, children: t }),
+                    /* @__PURE__ */ a(
+                      "span",
+                      {
+                        style: {
+                          marginLeft: "auto",
+                          fontSize: 12,
+                          color: _n,
+                          whiteSpace: "nowrap"
+                        },
+                        children: e
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ a(
+                    "div",
+                    {
+                      style: {
+                        marginTop: 3,
+                        fontSize: 13.5,
+                        lineHeight: 1.35,
+                        color: kn,
+                        display: "-webkit-box",
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: s
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, Hn = "0.3.0";
 export {
-  yn as GLASS_EDGE_DARK,
-  bn as GLASS_EDGE_LIGHT,
-  yr as GlassButton,
-  Rr as GlassCard,
-  Sr as GlassSegmentedControl,
-  _n as LIGHT_DARK_THRESHOLD,
-  Ge as LiquidGlass,
-  B as UNSAMPLED,
-  vr as VERSION,
-  wt as averageColorToSample,
-  vn as calculateDirectionalScale,
-  xn as calculateElasticTranslation,
-  br as createCanvasSnapshotStrategy,
-  an as detectGlassCapabilities,
-  Un as domBackgroundStrategy,
-  xt as getConservativeGlassCapabilities,
-  hn as getDisplacementMap,
-  ye as getGlassEdgeShadow,
-  $n as luminanceToScheme,
-  On as parseCssColor,
-  Dn as relativeLuminance,
-  ue as roundedRectSDF,
-  Pn as safeSample,
-  Yn as sampleBackdropLuminance,
-  de as smoothStep,
-  Mt as useBackdropLuminance,
-  cn as useGlassCapabilities,
-  qn as useMousePosition,
-  jn as usePrefersContrast,
-  Be as useReducedMotion,
-  zn as useReducedTransparency
+  _t as Glass,
+  Gn as GlassButton,
+  Pn as GlassCard,
+  $n as GlassNotification,
+  Un as GlassSegmentedControl,
+  Nn as GlassSlider,
+  On as GlassSwitch,
+  _t as LiquidGlass,
+  Hn as VERSION
 };