@nkanish/liquidglass-ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,6 +1,13 @@
 // src/components/GlassProvider.tsx
 import { createContext, useContext, useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
+var DEFAULT_REFRACTION = {
+  enabled: true,
+  depth: 8,
+  dome: 4,
+  shine: 0.3,
+  lightAngle: 225
+};
 var GlassContext = createContext(null);
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
@@ -22,6 +29,10 @@ function GlassProvider({
     return theme;
   });
   const [config, setConfigState] = useState(initialConfig);
+  const refraction = {
+    ...DEFAULT_REFRACTION,
+    ...config.refraction
+  };
   const setTheme = (newTheme) => {
     setThemeState(newTheme);
     if (typeof window !== "undefined") {
@@ -69,7 +80,8 @@ function GlassProvider({
         resolvedTheme,
         setTheme,
         config,
-        setConfig
+        setConfig,
+        refraction
       },
       children
     }
@@ -86,9 +98,16 @@ function useTheme() {
   const { theme, resolvedTheme, setTheme } = useGlass();
   return { theme, resolvedTheme, setTheme };
 }
+function useRefraction() {
+  const context = useContext(GlassContext);
+  if (!context) {
+    return DEFAULT_REFRACTION;
+  }
+  return context.refraction;
+}
 
 // src/components/Glass.tsx
-import { forwardRef, useRef } from "react";
+import { forwardRef, useRef as useRef2 } from "react";
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -172,34 +191,482 @@ function useReducedMotion() {
   return reducedMotion;
 }
 
-// src/core/svg-filters.ts
+// src/hooks/use-glisse-effect.ts
+import { useEffect as useEffect4, useRef, useState as useState4, useCallback as useCallback2 } from "react";
 var SVG_NS = "http://www.w3.org/2000/svg";
+var DEFAULT_LIGHT = {
+  angle: 225,
+  glow: 0.4,
+  spread: 0.5,
+  glowPower: 2,
+  edge: 0.5,
+  edgeWidth: 1.5,
+  edgePower: 1
+};
+var DEFAULT_LENS = {
+  depth: 8,
+  dome: 4,
+  splay: 0.85,
+  relative: false
+};
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var erf = (x) => Math.tanh(1.7724538509 * x);
+function distance(x, y, halfWidth, halfHeight, radius) {
+  const qx = Math.abs(x) - halfWidth + radius;
+  const qy = Math.abs(y) - halfHeight + radius;
+  return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - radius;
+}
+function arc(sag, half) {
+  const r = (half * half + sag * sag) / (2 * sag);
+  let sum = 0;
+  for (let i = 0; i <= 200; i++) {
+    const x = i / 200 * half;
+    const s = x / Math.sqrt(r * r - x * x);
+    sum += i === 0 || i === 200 ? s / 2 : s;
+  }
+  const mean = sum / 200;
+  return { radius: r, scale: mean > 0 ? 0.5 / mean : 1 };
+}
+function slopeAt(x, curve) {
+  const inside = Math.min(x, 0.999 * curve.radius);
+  return inside / Math.sqrt(curve.radius * curve.radius - inside * inside) * curve.scale;
+}
+function grey(data, i, value, alpha = 255) {
+  data[i] = data[i + 1] = data[i + 2] = value;
+  data[i + 3] = alpha;
+}
+function lensMap(shape, options, light, density) {
+  const { width, height } = shape;
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+  const radius = clamp(shape.radius, 0, Math.min(halfWidth, halfHeight));
+  const columns = Math.max(1, Math.round(width * density));
+  const rows = Math.max(1, Math.round(height * density));
+  const pullAcross = new Uint8ClampedArray(columns * rows * 4);
+  const pullDown = new Uint8ClampedArray(columns * rows * 4);
+  const caught = new Uint8ClampedArray(columns * rows * 4);
+  const share = options.relative ? Math.min(width, height) : 1;
+  const depth = options.depth * share;
+  const dome = options.dome * share;
+  const { splay } = options;
+  const innerWidth = Math.max(0, halfWidth - depth);
+  const innerHeight = Math.max(0, halfHeight - depth);
+  const innerRadius = clamp(radius, 0, Math.min(innerWidth, innerHeight));
+  const ramp = depth > 0 ? 1 / (depth * Math.SQRT2) : 1e6;
+  const sag = Math.max(0.01, Math.min(dome, Math.min(halfWidth, halfHeight) - 1));
+  const across = dome > 0 ? arc(sag, halfWidth) : null;
+  const down = dome > 0 ? arc(sag, halfHeight) : null;
+  const reach = 0.5 * Math.min(halfWidth, halfHeight);
+  const cos = Math.cos(light.angle * Math.PI / 180);
+  const sin = Math.sin(light.angle * Math.PI / 180);
+  const glowStart = (1 - light.spread) * Math.SQRT2;
+  const glowRange = light.spread * Math.SQRT2;
+  for (let row = 0; row < rows; row++) {
+    for (let column = 0; column < columns; column++) {
+      const i = (row * columns + column) * 4;
+      const x = (column + 0.5) / columns * width - halfWidth;
+      const y = (row + 0.5) / rows * height - halfHeight;
+      const edge = distance(x, y, halfWidth, halfHeight, radius);
+      if (edge >= 0) {
+        grey(pullAcross, i, 128);
+        grey(pullDown, i, 128);
+        grey(caught, i, 128, 0);
+        continue;
+      }
+      const ax = Math.abs(x);
+      const ay = Math.abs(y);
+      let dx = across ? Math.sign(x) * slopeAt(ax, across) : clamp(x / halfWidth, -1, 1);
+      let dy = down ? Math.sign(y) * slopeAt(ay, down) : clamp(y / halfHeight, -1, 1);
+      if (splay < 1 && reach > 0) {
+        const keepX = Math.max(0, 1 - (halfHeight - ay) / reach) * (1 - splay);
+        const keepY = Math.max(0, 1 - (halfWidth - ax) / reach) * (1 - splay);
+        if (keepX > 1e-3 || keepY > 1e-3) {
+          const before = Math.hypot(dx, dy);
+          dx *= 1 - keepX;
+          dy *= 1 - keepY;
+          const after = Math.hypot(dx, dy);
+          if (after > 1e-3) {
+            dx *= before / after;
+            dy *= before / after;
+          }
+        }
+      }
+      const falloff = 0.5 * (1 + erf(distance(x, y, innerWidth, innerHeight, innerRadius) * ramp));
+      grey(pullAcross, i, Math.round((0.5 - 0.5 * dx * falloff) * 255));
+      grey(pullDown, i, Math.round((0.5 - 0.5 * dy * falloff) * 255));
+      const facing = Math.abs(clamp(x / halfWidth, -1, 1) * cos + clamp(y / halfHeight, -1, 1) * sin);
+      const glow = glowRange > 1e-3 ? light.glow * Math.pow(clamp((facing - glowStart) / glowRange, 0, 1), light.glowPower) * falloff : 0;
+      const rim = light.edge * Math.max(0, 1 + edge / light.edgeWidth) * Math.pow(facing, light.edgePower);
+      const amount = Math.min(1, glow + rim);
+      const bends = Math.min(1, falloff * 20, -edge);
+      grey(caught, i, Math.round(127 * amount + 128), Math.round(255 * bends));
+    }
+  }
+  return { columns, rows, across: pullAcross, down: pullDown, light: caught };
+}
+var encodedCache = /* @__PURE__ */ new Map();
+function encode(key, draw) {
+  const cached = encodedCache.get(key);
+  if (cached) return cached;
+  const map = draw();
+  const canvas = document.createElement("canvas");
+  canvas.width = map.columns;
+  canvas.height = map.rows;
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  const image = context.createImageData(map.columns, map.rows);
+  const png = (data) => {
+    image.data.set(data);
+    context.putImageData(image, 0, 0);
+    return canvas.toDataURL();
+  };
+  const result = {
+    across: png(map.across),
+    down: png(map.down),
+    light: png(map.light)
+  };
+  encodedCache.set(key, result);
+  return result;
+}
+function svg(tag, attrs = {}) {
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+  return el;
+}
+var CHANNELS = [
+  "1 0 0 0 0  0 0 0 0 0  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  0 0 0 0 0  0 0 1 0 0"
+];
+function isWebKit() {
+  if (typeof navigator === "undefined") return false;
+  return /AppleWebKit\//.test(navigator.userAgent) && !/Chrom(?:e|ium)\//.test(navigator.userAgent);
+}
+function supportsDisplacementMap() {
+  if (typeof document === "undefined") return false;
+  try {
+    const el = document.createElementNS(SVG_NS, "feDisplacementMap");
+    return !!el && el.namespaceURI === SVG_NS && "scale" in el;
+  } catch {
+    return false;
+  }
+}
+function buildFilter(lenses, box) {
+  const unit = box ? "objectBoundingBox" : "userSpaceOnUse";
+  const filter = svg("filter", {
+    filterUnits: unit,
+    primitiveUnits: unit,
+    "color-interpolation-filters": "sRGB"
+  });
+  if (box) {
+    filter.setAttribute("x", "0");
+    filter.setAttribute("y", "0");
+    filter.setAttribute("width", "1");
+    filter.setAttribute("height", "1");
+  }
+  const single = lenses.length === 1;
+  lenses.forEach(({ maps, shine }, k) => {
+    const merged = (name) => single ? name : `${name}-${k}`;
+    const image = (href, result) => svg("feImage", { href, preserveAspectRatio: "none", result });
+    filter.append(
+      image(maps.across, `across-${k}`),
+      image(maps.down, `down-${k}`),
+      image(maps.light, merged("raw")),
+      svg("feFlood", { "flood-color": "rgb(128, 128, 128)", result: `neutral-${k}` })
+    );
+    for (const pull of ["across", "down"]) {
+      const half = svg("feComponentTransfer", {
+        in: `${pull}-grey-${k}`,
+        result: `${pull}-pull-${k}`
+      });
+      half.append(svg("feFuncA", { type: "linear", slope: 0, intercept: 0.5 }));
+      filter.append(
+        svg("feComposite", {
+          in: `${pull}-${k}`,
+          in2: `neutral-${k}`,
+          operator: "over",
+          result: `${pull}-grey-${k}`
+        }),
+        half
+      );
+    }
+    CHANNELS.forEach((_, i) => {
+      filter.append(
+        svg("feDisplacementMap", {
+          in: "SourceGraphic",
+          in2: `across-pull-${k}`,
+          xChannelSelector: "R",
+          yChannelSelector: "A",
+          result: `across-${k}-${i}`
+        }),
+        svg("feDisplacementMap", {
+          in: `across-${k}-${i}`,
+          in2: `down-pull-${k}`,
+          xChannelSelector: "A",
+          yChannelSelector: "R",
+          result: `ray-${k}-${i}`
+        })
+      );
+    });
+    CHANNELS.forEach((channel, i) => {
+      filter.append(
+        svg("feColorMatrix", {
+          in: `ray-${k}-${i}`,
+          type: "matrix",
+          values: `${channel}  0 0 0 0.3333 0`,
+          result: `light-${k}-${i}`
+        })
+      );
+    });
+    filter.append(
+      svg("feComposite", {
+        in: `light-${k}-0`,
+        in2: `light-${k}-1`,
+        operator: "arithmetic",
+        k2: 1,
+        k3: 1,
+        result: `light-${k}-01`
+      }),
+      svg("feComposite", {
+        in: `light-${k}-01`,
+        in2: `light-${k}-2`,
+        operator: "arithmetic",
+        k2: 1,
+        k3: 1,
+        result: `spread-${k}`
+      }),
+      svg("feColorMatrix", {
+        in: `spread-${k}`,
+        type: "matrix",
+        values: "3 0 0 0 0  0 3 0 0 0  0 0 3 0 0  0 0 0 1 0",
+        result: `bent-${k}`
+      })
+    );
+    const bent = `bent-${k}`;
+    let lit = bent;
+    if (shine > 0) {
+      const white = `0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 1 0 ${-128 / 255}`;
+      filter.append(
+        svg("feColorMatrix", {
+          in: merged("raw"),
+          type: "matrix",
+          values: white,
+          result: `glint-${k}`
+        }),
+        svg("feComposite", {
+          in: `glint-${k}`,
+          in2: bent,
+          operator: "arithmetic",
+          k2: shine,
+          k3: 1,
+          result: `lit-${k}`
+        })
+      );
+      lit = `lit-${k}`;
+    } else if (shine < 0) {
+      const row = `0 0 ${shine} 0 ${1 - 128 * shine / 255}`;
+      filter.append(
+        svg("feColorMatrix", {
+          in: merged("raw"),
+          type: "matrix",
+          values: `${row}  ${row}  ${row}  0 0 0 0 1`,
+          result: `shade-${k}`
+        }),
+        svg("feComposite", {
+          in: `shade-${k}`,
+          in2: bent,
+          operator: "arithmetic",
+          k1: 1,
+          result: `lit-${k}`
+        })
+      );
+      lit = `lit-${k}`;
+    }
+    filter.append(
+      svg("feComposite", {
+        in: lit,
+        in2: merged("raw"),
+        operator: "in",
+        result: merged("inside")
+      })
+    );
+  });
+  filter.append(
+    svg("feComposite", {
+      in: "SourceGraphic",
+      in2: "raw",
+      operator: "out",
+      result: "outside"
+    }),
+    svg("feComposite", {
+      in: "inside",
+      in2: "outside",
+      operator: "arithmetic",
+      k2: 1,
+      k3: 1,
+      result: "seen"
+    })
+  );
+  return filter;
+}
+var filterIdCounter = 0;
 var filterContainer = null;
-var filterCounter = 0;
 function getFilterContainer() {
-  if (filterContainer && document.body.contains(filterContainer)) {
+  if (filterContainer && filterContainer.isConnected) {
     return filterContainer;
   }
-  filterContainer = document.createElementNS(SVG_NS, "svg");
-  filterContainer.setAttribute("aria-hidden", "true");
-  filterContainer.style.cssText = `
+  let container = document.getElementById("lg-glisse-filters");
+  if (!container) {
+    container = document.createElement("div");
+    container.id = "lg-glisse-filters";
+    container.innerHTML = '<svg aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none"><defs></defs></svg>';
+    document.body.appendChild(container);
+  }
+  filterContainer = container;
+  return container;
+}
+function useGlisseEffect(ref, options = {}) {
+  const {
+    enabled = true,
+    depth = DEFAULT_LENS.depth,
+    dome = DEFAULT_LENS.dome,
+    splay = DEFAULT_LENS.splay,
+    shine = 0.3,
+    density = 0.5,
+    lightAngle = DEFAULT_LIGHT.angle
+  } = options;
+  const [filterUrl, setFilterUrl] = useState4(null);
+  const [isReady, setIsReady] = useState4(false);
+  const filterRef = useRef(null);
+  const currentFilterId = useRef(null);
+  const lastDimensions = useRef(null);
+  const rafRef = useRef(null);
+  const supportsRef = useRef(null);
+  const cleanup = useCallback2(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    if (filterRef.current) {
+      filterRef.current.remove();
+      filterRef.current = null;
+    }
+    currentFilterId.current = null;
+    setFilterUrl(null);
+    setIsReady(false);
+  }, []);
+  const updateFilter = useCallback2((el) => {
+    if (!enabled || typeof document === "undefined") {
+      cleanup();
+      return;
+    }
+    if (supportsRef.current === null) {
+      supportsRef.current = supportsDisplacementMap();
+    }
+    if (!supportsRef.current) {
+      setFilterUrl(null);
+      setIsReady(true);
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width));
+    const height = Math.max(1, Math.round(rect.height));
+    const computedStyle = getComputedStyle(el);
+    const radius = parseFloat(computedStyle.borderRadius) || 0;
+    if (lastDimensions.current) {
+      const { width: lw, height: lh, radius: lr } = lastDimensions.current;
+      if (Math.abs(width - lw) < 2 && Math.abs(height - lh) < 2 && Math.abs(radius - lr) < 1) {
+        return;
+      }
+    }
+    lastDimensions.current = { width, height, radius };
+    const shape = { width, height, radius };
+    const lensOpts = { depth, dome, splay, relative: false };
+    const lightOpts = { ...DEFAULT_LIGHT, angle: lightAngle };
+    const cacheKey = `${width}:${height}:${radius}:${depth}:${dome}:${splay}:${lightAngle}:${density}`;
+    const maps = encode(cacheKey, () => lensMap(shape, lensOpts, lightOpts, density));
+    if (!maps) {
+      cleanup();
+      return;
+    }
+    const lensConfig = { maps, shine };
+    const webKit = isWebKit();
+    const filter = buildFilter([lensConfig], webKit);
+    const filterId = `lg-glisse-${++filterIdCounter}`;
+    filter.id = filterId;
+    const container = getFilterContainer();
+    const defs = container.querySelector("defs");
+    if (filterRef.current) {
+      filterRef.current.remove();
+    }
+    defs.appendChild(filter);
+    filterRef.current = filter;
+    currentFilterId.current = filterId;
+    setFilterUrl(`url(#${filterId})`);
+    setIsReady(true);
+  }, [enabled, depth, dome, splay, shine, density, lightAngle, cleanup]);
+  useEffect4(() => {
+    if (!enabled || typeof document === "undefined" || typeof ResizeObserver === "undefined") {
+      cleanup();
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    updateFilter(el);
+    const observer = new ResizeObserver(() => {
+      if (rafRef.current != null) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        if (ref.current) updateFilter(ref.current);
+      });
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      cleanup();
+    };
+  }, [ref, enabled, updateFilter, cleanup]);
+  const rimGradient = `linear-gradient(${lightAngle + 90}deg, 
+    rgba(255,255,255,0.12) 0%, 
+    rgba(255,255,255,0.06) 30%, 
+    transparent 50%, 
+    rgba(0,0,0,0.04) 100%)`;
+  return { filterUrl, rimGradient, isReady };
+}
+function clearGlisseCache() {
+  encodedCache.clear();
+}
+
+// src/core/svg-filters.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+var filterContainer2 = null;
+var filterCounter = 0;
+function getFilterContainer2() {
+  if (filterContainer2 && document.body.contains(filterContainer2)) {
+    return filterContainer2;
+  }
+  filterContainer2 = document.createElementNS(SVG_NS2, "svg");
+  filterContainer2.setAttribute("aria-hidden", "true");
+  filterContainer2.style.cssText = `
     position: absolute;
     width: 0;
     height: 0;
     overflow: hidden;
     pointer-events: none;
   `;
-  const defs = document.createElementNS(SVG_NS, "defs");
-  filterContainer.appendChild(defs);
-  document.body.appendChild(filterContainer);
-  return filterContainer;
+  const defs = document.createElementNS(SVG_NS2, "defs");
+  filterContainer2.appendChild(defs);
+  document.body.appendChild(filterContainer2);
+  return filterContainer2;
 }
 function getDefs() {
-  const container = getFilterContainer();
+  const container = getFilterContainer2();
   return container.querySelector("defs");
 }
 function createSVGElement(tag, attrs = {}) {
-  const el = document.createElementNS(SVG_NS, tag);
+  const el = document.createElementNS(SVG_NS2, tag);
   for (const [key, value] of Object.entries(attrs)) {
     el.setAttribute(key, String(value));
   }
@@ -446,9 +913,9 @@ function createSpecularHighlight(x, y, radius = 200, intensity = 0.08) {
   )`;
 }
 function cleanupFilters() {
-  if (filterContainer) {
-    filterContainer.remove();
-    filterContainer = null;
+  if (filterContainer2) {
+    filterContainer2.remove();
+    filterContainer2 = null;
   }
   filterCounter = 0;
 }
@@ -459,9 +926,15 @@ function supportsBackdropFilter() {
   return CSS.supports("backdrop-filter", "blur(1px)") || CSS.supports("-webkit-backdrop-filter", "blur(1px)");
 }
 function supportsSVGFilters() {
-  if (typeof document === "undefined") return false;
-  const svg = document.createElementNS(SVG_NS, "svg");
-  return "getComputedStyle" in window && svg instanceof SVGElement;
+  if (typeof document === "undefined" || typeof window === "undefined") return false;
+  try {
+    const svg2 = document.createElementNS(SVG_NS2, "svg");
+    if (!(svg2 instanceof SVGElement)) return false;
+    const displace = document.createElementNS(SVG_NS2, "feDisplacementMap");
+    return !!displace && displace.namespaceURI === SVG_NS2 && "scale" in displace;
+  } catch {
+    return false;
+  }
 }
 
 // src/components/Glass.tsx
@@ -476,14 +949,31 @@ var Glass = forwardRef(
     tint,
     interactive = false,
     rimLight = false,
-    bendStrength = 0.3,
+    refraction,
+    refractionDepth,
+    refractionDome,
+    shine,
+    lightAngle,
     children,
     ...props
   }, ref) => {
-    const localRef = useRef(null);
+    const localRef = useRef2(null);
     const combinedRef = ref || localRef;
     const reducedMotion = useReducedMotion();
     const pointerPosition = usePointerPosition(combinedRef, { enabled: interactive && !reducedMotion });
+    const globalRefraction = useRefraction();
+    const shouldRefract = refraction ?? globalRefraction.enabled;
+    const depth = refractionDepth ?? globalRefraction.depth;
+    const dome = refractionDome ?? globalRefraction.dome;
+    const shineValue = shine ?? globalRefraction.shine;
+    const angle = lightAngle ?? globalRefraction.lightAngle;
+    const { filterUrl, rimGradient: glisseRim, isReady } = useGlisseEffect(combinedRef, {
+      enabled: shouldRefract && !reducedMotion,
+      depth,
+      dome,
+      shine: shineValue,
+      lightAngle: angle
+    });
     const customStyles = {
       ...style
     };
@@ -496,8 +986,13 @@ var Glass = forwardRef(
     if (tint) {
       customStyles.backgroundColor = tint;
     }
-    if (rimLight) {
-      customStyles.backgroundImage = createRimLightGradient({ intensity: 0.2 });
+    if (shouldRefract && isReady) {
+      customStyles.backgroundImage = glisseRim;
+    } else if (rimLight) {
+      customStyles.backgroundImage = createRimLightGradient({ intensity: 0.15, angle });
+    }
+    if (shouldRefract && filterUrl && isReady) {
+      customStyles.filter = filterUrl;
     }
     if (interactive && pointerPosition.isInside) {
       customStyles["--lg-pointer-x"] = `${pointerPosition.percentX}%`;
@@ -516,6 +1011,7 @@ var Glass = forwardRef(
         className: cn(variantClasses[variant], className),
         style: customStyles,
         "data-hover": interactive && pointerPosition.isInside ? "" : void 0,
+        "data-rim": shouldRefract && isReady ? "" : void 0,
         ...props,
         children
       }
@@ -525,7 +1021,7 @@ var Glass = forwardRef(
 Glass.displayName = "Glass";
 
 // src/components/GlassCard.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef2, useRef as useRef3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var paddingMap = {
   none: "0",
@@ -534,11 +1030,11 @@ var paddingMap = {
   lg: "24px"
 };
 var radiusMap = {
-  sm: "var(--lg-radius-sm)",
-  md: "var(--lg-radius)",
-  lg: "var(--lg-radius-lg)",
-  xl: "var(--lg-radius-xl)",
-  full: "var(--lg-radius-full)"
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "20px",
+  full: "9999px"
 };
 var GlassCard = forwardRef2(
   ({
@@ -548,14 +1044,25 @@ var GlassCard = forwardRef2(
     padding = "md",
     radius = "lg",
     hoverable = false,
+    disableRefraction = false,
     children,
     ...props
   }, ref) => {
+    const localRef = useRef3(null);
+    const combinedRef = ref || localRef;
+    const reducedMotion = useReducedMotion();
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(combinedRef, {
+      enabled: !disableRefraction && !reducedMotion
+    });
     const customStyles = {
       padding: paddingMap[padding],
       borderRadius: radiusMap[radius],
       ...style
     };
+    if (isReady && filterUrl) {
+      customStyles.filter = filterUrl;
+      customStyles.backgroundImage = rimGradient;
+    }
     const baseClasses = cn(
       "lg-glass",
       variant === "elevated" && "lg-glass-elevated",
@@ -563,56 +1070,56 @@ var GlassCard = forwardRef2(
       hoverable && "transition-transform hover:scale-[1.02] hover:shadow-lg cursor-pointer",
       className
     );
-    return /* @__PURE__ */ jsx3("div", { ref, className: baseClasses, style: customStyles, ...props, children });
+    return /* @__PURE__ */ jsx3("div", { ref: combinedRef, className: baseClasses, style: customStyles, ...props, children });
   }
 );
 GlassCard.displayName = "GlassCard";
 
 // src/components/Button.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef3, useRef as useRef5 } from "react";
 
 // src/hooks/use-pressed-state.ts
-import { useState as useState4, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { useState as useState5, useCallback as useCallback3, useRef as useRef4, useEffect as useEffect5 } from "react";
 function usePressedState(options = {}) {
   const { disabled = false, onPressStart, onPressEnd } = options;
-  const [isPressed, setIsPressed] = useState4(false);
-  const pointerIdRef = useRef2(null);
-  const handlePressStart = useCallback2(() => {
+  const [isPressed, setIsPressed] = useState5(false);
+  const pointerIdRef = useRef4(null);
+  const handlePressStart = useCallback3(() => {
     if (disabled) return;
     setIsPressed(true);
     onPressStart?.();
   }, [disabled, onPressStart]);
-  const handlePressEnd = useCallback2(() => {
+  const handlePressEnd = useCallback3(() => {
     setIsPressed(false);
     onPressEnd?.();
   }, [onPressEnd]);
-  const onPointerDown = useCallback2((e) => {
+  const onPointerDown = useCallback3((e) => {
     if (disabled || pointerIdRef.current !== null) return;
     pointerIdRef.current = e.pointerId;
     handlePressStart();
     e.target.setPointerCapture?.(e.pointerId);
   }, [disabled, handlePressStart]);
-  const onPointerUp = useCallback2((e) => {
+  const onPointerUp = useCallback3((e) => {
     if (pointerIdRef.current !== e.pointerId) return;
     pointerIdRef.current = null;
     handlePressEnd();
   }, [handlePressEnd]);
-  const onPointerCancel = useCallback2((e) => {
+  const onPointerCancel = useCallback3((e) => {
     if (pointerIdRef.current !== e.pointerId) return;
     pointerIdRef.current = null;
     handlePressEnd();
   }, [handlePressEnd]);
-  const onPointerLeave = useCallback2((e) => {
+  const onPointerLeave = useCallback3((e) => {
     if (pointerIdRef.current !== e.pointerId) return;
   }, []);
-  const onKeyDown = useCallback2((e) => {
+  const onKeyDown = useCallback3((e) => {
     if (disabled) return;
     if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       handlePressStart();
     }
   }, [disabled, handlePressStart]);
-  const onKeyUp = useCallback2((e) => {
+  const onKeyUp = useCallback3((e) => {
     if (e.key === " " || e.key === "Enter") {
       handlePressEnd();
     }
@@ -676,23 +1183,38 @@ var Button = forwardRef3(
     loading = false,
     fullWidth = false,
     disabled,
+    disableRefraction = false,
     children,
     ...props
   }, ref) => {
+    const localRef = useRef5(null);
+    const combinedRef = ref || localRef;
     const { isPressed, pressHandlers } = usePressedState({ disabled: disabled || loading });
-    const sizeConfig15 = sizeStyles[size];
+    const reducedMotion = useReducedMotion();
+    const sizeConfig14 = sizeStyles[size];
+    const shouldRefract = variant === "glass" && !disableRefraction && !reducedMotion;
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(combinedRef, {
+      enabled: shouldRefract,
+      depth: 6,
+      dome: 3,
+      shine: 0.25
+    });
     const customStyles = {
-      height: sizeConfig15.height,
-      padding: icon && !children ? "0" : sizeConfig15.padding,
-      fontSize: sizeConfig15.fontSize,
-      borderRadius: sizeConfig15.borderRadius,
-      gap: sizeConfig15.gap,
-      width: icon && !children ? sizeConfig15.height : fullWidth ? "100%" : void 0,
+      height: sizeConfig14.height,
+      padding: icon && !children ? "0" : sizeConfig14.padding,
+      fontSize: sizeConfig14.fontSize,
+      borderRadius: sizeConfig14.borderRadius,
+      gap: sizeConfig14.gap,
+      width: icon && !children ? sizeConfig14.height : fullWidth ? "100%" : void 0,
       ...style
     };
     if (tint && !destructive) {
       customStyles["--lg-tint"] = tint;
     }
+    if (shouldRefract && isReady && filterUrl) {
+      customStyles.filter = filterUrl;
+      customStyles.backgroundImage = rimGradient;
+    }
     const baseClasses = cn(
       "lg-glass lg-interactive lg-focus-ring",
       "inline-flex items-center justify-center",
@@ -718,7 +1240,7 @@ var Button = forwardRef3(
     return /* @__PURE__ */ jsx4(
       "button",
       {
-        ref,
+        ref: combinedRef,
         className: baseClasses,
         style: { ...customStyles, ...variantStyles2 },
         disabled: disabled || loading,
@@ -733,8 +1255,8 @@ var Button = forwardRef3(
           {
             className: "animate-spin",
             style: {
-              width: sizeConfig15.iconSize,
-              height: sizeConfig15.iconSize,
+              width: sizeConfig14.iconSize,
+              height: sizeConfig14.iconSize,
               border: "2px solid currentColor",
               borderTopColor: "transparent",
               borderRadius: "50%"
@@ -745,7 +1267,7 @@ var Button = forwardRef3(
             "span",
             {
               className: "flex items-center justify-center",
-              style: { width: sizeConfig15.iconSize, height: sizeConfig15.iconSize },
+              style: { width: sizeConfig14.iconSize, height: sizeConfig14.iconSize },
               children: icon
             }
           ),
@@ -754,7 +1276,7 @@ var Button = forwardRef3(
             "span",
             {
               className: "flex items-center justify-center",
-              style: { width: sizeConfig15.iconSize, height: sizeConfig15.iconSize },
+              style: { width: sizeConfig14.iconSize, height: sizeConfig14.iconSize },
               children: icon
             }
           )
@@ -787,10 +1309,10 @@ var IconButton = forwardRef4(
     ...props
   }, ref) => {
     const { isPressed, pressHandlers } = usePressedState({ disabled: disabled || loading });
-    const sizeConfig15 = sizeStyles2[size];
+    const sizeConfig14 = sizeStyles2[size];
     const customStyles = {
-      width: sizeConfig15.size,
-      height: sizeConfig15.size,
+      width: sizeConfig14.size,
+      height: sizeConfig14.size,
       borderRadius: "50%",
       ...style
     };
@@ -827,8 +1349,8 @@ var IconButton = forwardRef4(
           {
             className: "animate-spin",
             style: {
-              width: sizeConfig15.iconSize,
-              height: sizeConfig15.iconSize,
+              width: sizeConfig14.iconSize,
+              height: sizeConfig14.iconSize,
               border: "2px solid currentColor",
               borderTopColor: "transparent",
               borderRadius: "50%"
@@ -838,7 +1360,7 @@ var IconButton = forwardRef4(
           "span",
           {
             className: "flex items-center justify-center",
-            style: { width: sizeConfig15.iconSize, height: sizeConfig15.iconSize },
+            style: { width: sizeConfig14.iconSize, height: sizeConfig14.iconSize },
             children: icon
           }
         )
@@ -852,13 +1374,13 @@ IconButton.displayName = "IconButton";
 import { forwardRef as forwardRef5 } from "react";
 
 // src/hooks/use-controllable.ts
-import { useState as useState5, useCallback as useCallback3 } from "react";
+import { useState as useState6, useCallback as useCallback4 } from "react";
 function useControllable(options) {
   const { value: controlledValue, defaultValue, onChange } = options;
   const isControlled = controlledValue !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
   const value = isControlled ? controlledValue : uncontrolledValue;
-  const setValue = useCallback3((newValue) => {
+  const setValue = useCallback4((newValue) => {
     if (!isControlled) {
       setUncontrolledValue(newValue);
     }
@@ -869,9 +1391,9 @@ function useControllable(options) {
 function useControllableBoolean(options) {
   const { checked, defaultChecked = false, onCheckedChange } = options;
   const isControlled = checked !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultChecked);
+  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultChecked);
   const value = isControlled ? checked : uncontrolledValue;
-  const setValue = useCallback3((newValue) => {
+  const setValue = useCallback4((newValue) => {
     if (!isControlled) {
       setUncontrolledValue(newValue);
     }
@@ -965,7 +1487,7 @@ var Toggle = forwardRef5(
 Toggle.displayName = "Toggle";
 
 // src/components/Input.tsx
-import { forwardRef as forwardRef6, useState as useState6 } from "react";
+import { forwardRef as forwardRef6, useState as useState7 } from "react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var sizeConfig2 = {
   sm: { height: 32, padding: "0 10px", fontSize: 13, iconSize: 14, borderRadius: 16 },
@@ -993,7 +1515,7 @@ var Input = forwardRef6(
       defaultValue,
       onChange: onValueChange
     });
-    const [isFocused, setIsFocused] = useState6(false);
+    const [isFocused, setIsFocused] = useState7(false);
     const config = sizeConfig2[size];
     const handleChange = (e) => {
       setValue(e.target.value);
@@ -1080,7 +1602,7 @@ var Input = forwardRef6(
 Input.displayName = "Input";
 
 // src/components/Textarea.tsx
-import { forwardRef as forwardRef7, useState as useState7 } from "react";
+import { forwardRef as forwardRef7, useState as useState8 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Textarea = forwardRef7(
   ({
@@ -1100,7 +1622,7 @@ var Textarea = forwardRef7(
       defaultValue,
       onChange: onValueChange
     });
-    const [isFocused, setIsFocused] = useState7(false);
+    const [isFocused, setIsFocused] = useState8(false);
     const handleChange = (e) => {
       setValue(e.target.value);
     };
@@ -1177,7 +1699,7 @@ var SearchField = forwardRef8(
 SearchField.displayName = "SearchField";
 
 // src/components/Select.tsx
-import { forwardRef as forwardRef9, useState as useState8, useRef as useRef4, useEffect as useEffect7, useCallback as useCallback4 } from "react";
+import { forwardRef as forwardRef9, useState as useState9, useRef as useRef7, useEffect as useEffect7, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
 
 // src/hooks/use-id.ts
@@ -1218,16 +1740,16 @@ var Select = forwardRef9(
       defaultValue,
       onChange: onValueChange
     });
-    const [isOpen, setIsOpen] = useState8(false);
-    const [focusedIndex, setFocusedIndex] = useState8(-1);
-    const triggerRef = useRef4(null);
-    const menuRef = useRef4(null);
+    const [isOpen, setIsOpen] = useState9(false);
+    const [focusedIndex, setFocusedIndex] = useState9(-1);
+    const triggerRef = useRef7(null);
+    const menuRef = useRef7(null);
     const reducedMotion = useReducedMotion();
     const id = useId(providedId);
     const menuId = `${id}-menu`;
     const config = sizeConfig3[size];
     const selectedOption = options.find((opt) => opt.value === value);
-    const updateMenuPosition = useCallback4(() => {
+    const updateMenuPosition = useCallback5(() => {
       if (!triggerRef.current || !menuRef.current) return;
       const rect = triggerRef.current.getBoundingClientRect();
       menuRef.current.style.top = `${rect.bottom + window.scrollY + 4}px`;
@@ -1628,13 +2150,25 @@ var Radio = forwardRef11(
 Radio.displayName = "Radio";
 
 // src/components/Switch.tsx
-import { forwardRef as forwardRef12, useState as useState9 } from "react";
+import {
+  forwardRef as forwardRef12,
+  useRef as useRef8,
+  useState as useState10,
+  useImperativeHandle
+} from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var sizeConfig6 = {
-  sm: { width: 44, height: 24, thumbSize: 20, travel: 20 },
-  md: { width: 51, height: 31, thumbSize: 27, travel: 20 },
-  lg: { width: 60, height: 36, thumbSize: 32, travel: 24 }
+var SCALE_BY_SIZE = {
+  sm: 0.3,
+  md: 0.375,
+  lg: 0.5
 };
+var THUMB_SHADOW = `
+  0 6px 24px rgba(0,0,0,0.2),
+  inset 0 0 0 1.5px rgba(255,255,255,0.5),
+  inset 0 2px 1px rgba(255,255,255,0.45),
+  inset 2px 7px 24px rgba(0,0,0,0.09),
+  inset -2px -7px 24px rgba(255,255,255,0.16)
+`;
 var Switch = forwardRef12(
   ({
     className,
@@ -1645,93 +2179,152 @@ var Switch = forwardRef12(
     size = "md",
     disabled,
     ...props
-  }, ref) => {
+  }, forwardedRef) => {
     const [checked, setChecked] = useControllableBoolean({
       checked: controlledChecked,
       defaultChecked,
       onCheckedChange
     });
-    const [lift, setLift] = useState9(0);
+    const [lift, setLift] = useState10(0);
     const reducedMotion = useReducedMotion();
-    const config = sizeConfig6[size];
-    const { isPressed, pressHandlers } = usePressedState({
-      disabled,
-      onPressStart: () => !reducedMotion && setLift(1),
-      onPressEnd: () => setLift(0)
+    const rootRef = useRef8(null);
+    const thumbRef = useRef8(null);
+    const gestureRef = useRef8(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const scale = SCALE_BY_SIZE[size];
+    const travel = 57.9 * scale;
+    const width = 160 * scale;
+    const height = 67 * scale;
+    const thumbWidth = 146 * scale;
+    const thumbHeight = 92 * scale;
+    const thumbScale = 0.65 + lift * 0.25;
+    const thumbX = checked ? travel : 0;
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(thumbRef, {
+      enabled: !reducedMotion,
+      depth: 2,
+      dome: 6,
+      splay: 0.4,
+      shine: 0.3
     });
     const handleClick = () => {
-      if (!disabled) {
+      if (!disabled && !gestureRef.current) {
         setChecked(!checked);
       }
     };
-    const customStyles = {
-      width: config.width,
-      height: config.height,
+    const handlePointerDown = (e) => {
+      if (disabled || e.button !== 0) return;
+      e.preventDefault();
+      gestureRef.current = {
+        id: e.pointerId,
+        x: e.clientX,
+        from: checked ? 1 : 0
+      };
+      rootRef.current?.setPointerCapture(e.pointerId);
+      if (!reducedMotion) setLift(1);
+    };
+    const handlePointerUp = (e) => {
+      if (gestureRef.current?.id !== e.pointerId) return;
+      const gesture = gestureRef.current;
+      gestureRef.current = null;
+      setLift(0);
+      const dx = e.clientX - gesture.x;
+      if (Math.abs(dx) > 4) {
+        const value = gesture.from + dx / travel;
+        setChecked(value > 0.5);
+      } else {
+        setChecked(!checked);
+      }
+    };
+    const handlePointerCancel = () => {
+      gestureRef.current = null;
+      setLift(0);
+    };
+    const rootStyles = {
+      width,
+      height,
       ...style
     };
     const thumbStyles = {
-      "--lg-lift": lift,
-      width: config.thumbSize + lift * 8,
-      height: config.thumbSize + lift * 4,
-      transform: `translateX(${checked ? config.travel : 0}px) scale(${1 - lift * 0.05})`,
-      transition: reducedMotion ? "none" : "transform 200ms var(--lg-ease-spring), width 150ms var(--lg-ease), height 150ms var(--lg-ease)"
+      position: "absolute",
+      top: "50%",
+      left: -21.95 * scale,
+      width: thumbWidth,
+      height: thumbHeight,
+      transform: `translate(${thumbX}px, -50%) scale(${thumbScale})`,
+      transition: reducedMotion ? "none" : "transform 200ms cubic-bezier(.25,.1,.25,1)",
+      borderRadius: 9999,
+      backdropFilter: `blur(${2 * (1 - lift) + 0.5 * lift}px) brightness(${1 + 0.15 * (1 - lift)}) saturate(1.5)`,
+      WebkitBackdropFilter: `blur(${2 * (1 - lift) + 0.5 * lift}px) brightness(${1 + 0.15 * (1 - lift)}) saturate(1.5)`,
+      boxShadow: THUMB_SHADOW,
+      pointerEvents: "none",
+      ...isReady && filterUrl ? { filter: filterUrl, backgroundImage: rimGradient } : {}
     };
     return /* @__PURE__ */ jsxs8(
       "button",
       {
-        ref,
+        ref: rootRef,
+        type: "button",
         role: "switch",
         "aria-checked": checked,
         className: cn(
-          "lg-interactive lg-focus-ring",
-          "relative inline-flex items-center",
-          "p-0 border-0 rounded-full cursor-pointer",
+          "lg-focus-ring relative inline-flex items-center shrink-0",
+          "p-0 border-0 rounded-full cursor-pointer touch-pan-y",
+          "bg-transparent",
           disabled && "opacity-35 cursor-default",
           className
         ),
-        style: customStyles,
+        style: rootStyles,
         disabled,
         onClick: handleClick,
-        ...pressHandlers,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
         ...props,
         children: [
           /* @__PURE__ */ jsx13(
             "span",
             {
-              className: "absolute inset-0 rounded-full transition-colors",
-              style: {
-                backgroundColor: checked ? "var(--lg-on)" : "var(--lg-track)",
-                transition: reducedMotion ? "none" : "background-color 200ms var(--lg-ease)"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx13(
-            "span",
-            {
-              className: "absolute rounded-full",
-              style: {
-                ...thumbStyles,
-                left: 2,
-                top: "50%",
-                marginTop: -(config.thumbSize + lift * 4) / 2,
-                backdropFilter: `blur(${2 * (1 - lift) + 0.5 * lift}px) brightness(${1 + 0.15 * (1 - lift)}) saturate(1.5)`,
-                boxShadow: `
-              0 6px 24px rgb(0 0 0 / 0.2),
-              inset 0 0 0 1.5px rgb(255 255 255 / 0.5),
-              inset 0 2px 1px rgb(255 255 255 / 0.45)
-            `
-              },
+              "aria-hidden": true,
+              style: { position: "absolute", inset: "-6px -12px", pointerEvents: "none" },
               children: /* @__PURE__ */ jsx13(
                 "span",
                 {
-                  className: "absolute inset-0 rounded-full bg-white",
                   style: {
-                    opacity: 1 - lift * 0.3
-                  }
+                    position: "absolute",
+                    inset: "6px 12px",
+                    borderRadius: 9999,
+                    backgroundColor: "var(--lg-track)"
+                  },
+                  children: /* @__PURE__ */ jsx13(
+                    "span",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        borderRadius: 9999,
+                        backgroundColor: "var(--lg-on)",
+                        opacity: checked ? 1 : 0,
+                        transition: reducedMotion ? "none" : "opacity 200ms cubic-bezier(.25,.1,.25,1)"
+                      }
+                    }
+                  )
                 }
               )
             }
-          )
+          ),
+          /* @__PURE__ */ jsx13("span", { ref: thumbRef, "aria-hidden": true, style: thumbStyles, children: /* @__PURE__ */ jsx13(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "inherit",
+                backgroundColor: "#fff",
+                opacity: 1 - lift * 0.85
+              }
+            }
+          ) })
         ]
       }
     );
@@ -1740,10 +2333,15 @@ var Switch = forwardRef12(
 Switch.displayName = "Switch";
 
 // src/components/Slider.tsx
-import { forwardRef as forwardRef13, useState as useState10, useRef as useRef6, useCallback as useCallback5 } from "react";
+import {
+  forwardRef as forwardRef13,
+  useState as useState11,
+  useRef as useRef9,
+  useCallback as useCallback6
+} from "react";
 
 // src/utils/index.ts
-function clamp(value, min, max) {
+function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function lerp(start, end, t) {
@@ -1780,6 +2378,13 @@ function isBrowser() {
 
 // src/components/Slider.tsx
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var THUMB_SHADOW2 = `
+  0 6px 24px rgba(0,0,0,0.2),
+  inset 0 0 0 1.5px rgba(255,255,255,0.5),
+  inset 0 2px 1px rgba(255,255,255,0.45),
+  inset 2px 7px 24px rgba(0,0,0,0.09),
+  inset -2px -7px 24px rgba(255,255,255,0.16)
+`;
 var Slider = forwardRef13(
   ({
     className,
@@ -1800,19 +2405,30 @@ var Slider = forwardRef13(
       defaultValue,
       onChange: onValueChange
     });
-    const [lift, setLift] = useState10(0);
-    const [isDragging, setIsDragging] = useState10(false);
+    const [lift, setLift] = useState11(0);
+    const [isDragging, setIsDragging] = useState11(false);
     const reducedMotion = useReducedMotion();
-    const trackRef = useRef6(null);
+    const thumbRef = useRef9(null);
     const currentValue = value ?? defaultValue;
     const progress = mapRange(currentValue, min, max, 0, 1);
-    const handlePointerDown = useCallback5((e) => {
-      if (disabled) return;
-      setIsDragging(true);
-      if (!reducedMotion) setLift(1);
-      e.target.setPointerCapture(e.pointerId);
-    }, [disabled, reducedMotion]);
-    const handlePointerUp = useCallback5(() => {
+    const thumbScale = 0.6 + lift * 0.4;
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(thumbRef, {
+      enabled: !reducedMotion,
+      depth: 2,
+      dome: 6,
+      splay: 0.4,
+      shine: 0.3
+    });
+    const handlePointerDown = useCallback6(
+      (e) => {
+        if (disabled) return;
+        setIsDragging(true);
+        if (!reducedMotion) setLift(1);
+        e.target.setPointerCapture(e.pointerId);
+      },
+      [disabled, reducedMotion]
+    );
+    const handlePointerUp = useCallback6(() => {
       setIsDragging(false);
       setLift(0);
     }, []);
@@ -1820,75 +2436,64 @@ var Slider = forwardRef13(
       setValue(parseFloat(e.target.value));
     };
     const thumbStyles = {
-      "--lg-lift": lift,
-      "--lg-progress": progress,
-      left: `calc(${progress * 100}% - 18px)`,
-      width: 36 + lift * 24,
-      height: 36 + lift * 4,
-      transform: `scale(${0.6 + lift * 0.15})`,
-      transition: reducedMotion || isDragging ? "none" : "transform 150ms var(--lg-ease), width 150ms var(--lg-ease), height 150ms var(--lg-ease)"
+      position: "absolute",
+      top: 0,
+      left: `calc((100% - 36px) * ${progress} - 12px)`,
+      width: 60,
+      height: 40,
+      transform: `scale(${thumbScale})`,
+      transformOrigin: "center center",
+      transition: reducedMotion || isDragging ? "none" : "transform 150ms cubic-bezier(.25,.1,.25,1), left 50ms linear",
+      borderRadius: 9999,
+      backdropFilter: `blur(${2 * (1 - lift) + 0.5 * lift}px) brightness(${1 + 0.15 * (1 - lift)}) saturate(1.5)`,
+      WebkitBackdropFilter: `blur(${2 * (1 - lift) + 0.5 * lift}px) brightness(${1 + 0.15 * (1 - lift)}) saturate(1.5)`,
+      boxShadow: THUMB_SHADOW2,
+      pointerEvents: "none",
+      ...isReady && filterUrl ? { filter: filterUrl, backgroundImage: rimGradient } : {}
     };
     return /* @__PURE__ */ jsxs9(
       "div",
       {
-        ref: trackRef,
-        className: cn(
-          "relative w-full h-10",
-          disabled && "opacity-35",
-          className
-        ),
+        className: cn("relative w-full h-10", disabled && "opacity-35", className),
         style,
         children: [
           /* @__PURE__ */ jsx14(
             "div",
             {
-              className: "absolute rounded-full",
+              className: "absolute rounded-[3px] pointer-events-none",
               style: {
                 top: 17,
                 left: 0,
                 right: 0,
                 height: 6,
                 backgroundColor: "var(--lg-rail)"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx14(
-            "div",
-            {
-              className: "absolute rounded-full",
-              style: {
-                top: 17,
-                left: 0,
-                width: `calc(${progress * 100}%)`,
-                height: 6,
-                backgroundColor: "var(--lg-fill)",
-                transition: isDragging ? "none" : "width 50ms linear"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx14(
-            "div",
-            {
-              className: "absolute rounded-full pointer-events-none",
-              style: {
-                ...thumbStyles,
-                top: 2,
-                backdropFilter: `blur(${2 * (1 - lift) + 0.5 * lift}px) brightness(${1 + 0.15 * (1 - lift)}) saturate(1.5)`,
-                boxShadow: `
-              0 6px 24px rgb(0 0 0 / 0.2),
-              inset 0 0 0 1.5px rgb(255 255 255 / 0.5),
-              inset 0 2px 1px rgb(255 255 255 / 0.45)
-            `
               },
               children: /* @__PURE__ */ jsx14(
                 "span",
                 {
-                  className: "absolute inset-0 rounded-full bg-white",
-                  style: { opacity: 1 - lift * 0.3 }
+                  className: "block h-full rounded-[inherit]",
+                  style: {
+                    width: `calc((100% - 36px) * ${progress} + 18px)`,
+                    backgroundColor: "var(--lg-fill)",
+                    transition: isDragging ? "none" : "width 50ms linear"
+                  }
                 }
               )
             }
           ),
+          /* @__PURE__ */ jsx14("div", { ref: thumbRef, "aria-hidden": true, style: thumbStyles, children: /* @__PURE__ */ jsx14(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "inherit",
+                backgroundColor: "#fff",
+                opacity: 1 - lift * 0.85
+              }
+            }
+          ) }),
           /* @__PURE__ */ jsx14(
             "input",
             {
@@ -1915,7 +2520,7 @@ var Slider = forwardRef13(
           showValue && /* @__PURE__ */ jsx14(
             "div",
             {
-              className: "absolute text-xs font-medium text-center",
+              className: "absolute text-xs font-medium text-center pointer-events-none",
               style: {
                 left: `${progress * 100}%`,
                 top: -20,
@@ -1933,7 +2538,11 @@ var Slider = forwardRef13(
 Slider.displayName = "Slider";
 
 // src/components/TabBar.tsx
-import { forwardRef as forwardRef14, useState as useState11 } from "react";
+import {
+  forwardRef as forwardRef14,
+  useState as useState12,
+  useRef as useRef10
+} from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var TabBar = forwardRef14(
   ({
@@ -1953,13 +2562,31 @@ var TabBar = forwardRef14(
       defaultValue: defaultValue ?? items[0]?.value ?? null,
       onChange: onValueChange
     });
-    const [lift, setLift] = useState11(0);
+    const [lift, setLift] = useState12(0);
     const reducedMotion = useReducedMotion();
+    const containerRef = useRef10(null);
+    const lensRef = useRef10(null);
     const selectedIndex = items.findIndex((item) => item.value === value);
     const hasIcons = items.some((item) => item.icon);
     const tabWidth = hasIcons ? 72 : 84;
     const tabHeight = hasIcons ? 52 : 32;
     const inset = 4;
+    const lensGrowX = hasIcons ? 24 : 27;
+    const lensGrowY = hasIcons ? 16 : 20;
+    const { filterUrl: containerFilter, rimGradient: containerRim, isReady: containerReady } = useGlisseEffect(containerRef, {
+      enabled: !reducedMotion,
+      depth: 6,
+      dome: 3
+    });
+    const { filterUrl: lensFilter, rimGradient: lensRim, isReady: lensReady } = useGlisseEffect(
+      lensRef,
+      {
+        enabled: !reducedMotion && lift > 0.01,
+        depth: 4,
+        dome: 3,
+        splay: 0.5
+      }
+    );
     const handleSelect = (itemValue) => {
       setValue(itemValue);
     };
@@ -1969,45 +2596,47 @@ var TabBar = forwardRef14(
     const handlePointerUp = () => {
       setLift(0);
     };
+    const setRefs = (node) => {
+      containerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
     const containerStyles = {
       padding: inset,
       borderRadius: tabHeight / 2 + inset,
+      ...containerReady && containerFilter ? { filter: containerFilter, backgroundImage: containerRim } : {},
       ...style
     };
     const lensStyles = {
-      "--lg-lift": lift,
       position: "absolute",
-      top: inset,
-      left: inset,
-      width: tabWidth + lift * 27,
-      height: tabHeight + lift * 20,
-      marginTop: -lift * 10,
-      marginLeft: -lift * 13.5,
-      borderRadius: (tabHeight + lift * 20) / 2,
-      transform: `translateX(${selectedIndex * tabWidth}px) scale(${1 + lift * 0.05})`,
-      transition: reducedMotion ? "none" : "transform 200ms var(--lg-ease-spring), width 150ms var(--lg-ease), height 150ms var(--lg-ease), margin 150ms var(--lg-ease)",
-      background: "var(--lg-selection)",
-      boxShadow: lift > 0.5 ? `0 ${7 / (1 + lift * 0.5)}px ${11 / (1 + lift * 0.5)}px var(--lg-lens-drop)` : "none"
+      top: inset - lift * lensGrowY / 2,
+      left: inset - lift * lensGrowX / 2,
+      width: tabWidth + lift * lensGrowX,
+      height: tabHeight + lift * lensGrowY,
+      borderRadius: (tabHeight + lift * lensGrowY) / 2,
+      transform: `translateX(${Math.max(0, selectedIndex) * tabWidth}px)`,
+      transition: reducedMotion ? "none" : "transform 200ms cubic-bezier(.25,.1,.25,1), width 150ms cubic-bezier(.25,.1,.25,1), height 150ms cubic-bezier(.25,.1,.25,1), top 150ms, left 150ms, background-color 140ms",
+      backgroundColor: lift > 0.5 ? "var(--lg-lens)" : "var(--lg-selection)",
+      boxShadow: lift > 0.5 ? `0 ${7 / (1 + lift * 0.5)}px ${11 / (1 + lift * 0.5)}px var(--lg-lens-drop)` : "none",
+      pointerEvents: "none",
+      zIndex: lift > 0.5 ? 2 : 0,
+      ...lensReady && lensFilter ? { filter: lensFilter, backgroundImage: lensRim } : {}
     };
     return /* @__PURE__ */ jsxs10(
       "nav",
       {
-        ref,
+        ref: setRefs,
         role: "tablist",
         "aria-label": ariaLabel,
-        className: cn(
-          "lg-glass lg-interactive",
-          "relative inline-flex",
-          className
-        ),
+        className: cn("lg-glass lg-interactive", "relative inline-flex", className),
         style: containerStyles,
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerCancel: handlePointerUp,
         ...props,
         children: [
-          selectedIndex >= 0 && /* @__PURE__ */ jsx15("div", { className: "lg-glass", style: lensStyles }),
-          /* @__PURE__ */ jsx15("div", { className: "relative flex z-10", children: items.map((item) => {
+          selectedIndex >= 0 && /* @__PURE__ */ jsx15("div", { ref: lensRef, "aria-hidden": true, style: lensStyles }),
+          /* @__PURE__ */ jsx15("div", { className: "relative flex z-[1]", children: items.map((item) => {
             const isSelected = item.value === value;
             const TabElement = item.href && LinkComponent ? LinkComponent : "button";
             return /* @__PURE__ */ jsxs10(
@@ -2016,6 +2645,7 @@ var TabBar = forwardRef14(
                 role: "tab",
                 "aria-selected": isSelected,
                 href: item.href,
+                type: TabElement === "button" ? "button" : void 0,
                 onClick: () => handleSelect(item.value),
                 className: cn(
                   "flex flex-col items-center justify-center",
@@ -2044,9 +2674,9 @@ var TabBar = forwardRef14(
 TabBar.displayName = "TabBar";
 
 // src/components/SegmentedControl.tsx
-import { forwardRef as forwardRef15, useState as useState12 } from "react";
+import { forwardRef as forwardRef15, useState as useState13 } from "react";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-var sizeConfig7 = {
+var sizeConfig6 = {
   sm: { height: 28, padding: 2, fontSize: 12, segmentWidth: 72 },
   md: { height: 32, padding: 2, fontSize: 13, segmentWidth: 84 },
   lg: { height: 40, padding: 3, fontSize: 14, segmentWidth: 100 }
@@ -2068,9 +2698,9 @@ var SegmentedControl = forwardRef15(
       defaultValue: defaultValue ?? items[0]?.value ?? null,
       onChange: onValueChange
     });
-    const [lift, setLift] = useState12(0);
+    const [lift, setLift] = useState13(0);
     const reducedMotion = useReducedMotion();
-    const config = sizeConfig7[size];
+    const config = sizeConfig6[size];
     const selectedIndex = items.findIndex((item) => item.value === value);
     const handleSelect = (itemValue, disabled) => {
       if (disabled) return;
@@ -2337,7 +2967,7 @@ var NavbarLink = forwardRef17(
 NavbarLink.displayName = "NavbarLink";
 
 // src/components/Sidebar.tsx
-import { forwardRef as forwardRef18, createContext as createContext4, useContext as useContext4, useState as useState14, useCallback as useCallback7 } from "react";
+import { forwardRef as forwardRef18, createContext as createContext4, useContext as useContext4, useState as useState15, useCallback as useCallback8 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var SidebarContext = createContext4(null);
 function useSidebar() {
@@ -2348,8 +2978,8 @@ function useSidebar() {
   return context;
 }
 function SidebarProvider({ children, defaultCollapsed = false }) {
-  const [isCollapsed, setCollapsed] = useState14(defaultCollapsed);
-  const toggleCollapsed = useCallback7(() => {
+  const [isCollapsed, setCollapsed] = useState15(defaultCollapsed);
+  const toggleCollapsed = useCallback8(() => {
     setCollapsed((prev) => !prev);
   }, []);
   return /* @__PURE__ */ jsx19(SidebarContext.Provider, { value: { isCollapsed, toggleCollapsed, setCollapsed }, children });
@@ -2456,7 +3086,7 @@ var SidebarGroup = forwardRef18(
 SidebarGroup.displayName = "SidebarGroup";
 
 // src/components/Dock.tsx
-import { forwardRef as forwardRef19, useState as useState15, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef19, useState as useState16, useRef as useRef12 } from "react";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var Dock = forwardRef19(
   ({
@@ -2464,12 +3094,12 @@ var Dock = forwardRef19(
     style,
     items,
     magnification = 1.5,
-    distance = 100,
+    distance: distance2 = 100,
     direction = "bottom",
     ...props
   }, ref) => {
-    const [mouseX, setMouseX] = useState15(null);
-    const containerRef = useRef8(null);
+    const [mouseX, setMouseX] = useState16(null);
+    const containerRef = useRef12(null);
     const reducedMotion = useReducedMotion();
     const handleMouseMove = (e) => {
       if (reducedMotion) return;
@@ -2489,8 +3119,8 @@ var Dock = forwardRef19(
       const startX = (containerRef.current?.offsetWidth || 0) / 2 - totalWidth / 2;
       const iconCenter = startX + index * (iconSize + gap) + iconSize / 2;
       const distanceFromMouse = Math.abs(mouseX - iconCenter);
-      if (distanceFromMouse > distance) return 1;
-      const scale = 1 + (magnification - 1) * (1 - distanceFromMouse / distance);
+      if (distanceFromMouse > distance2) return 1;
+      const scale = 1 + (magnification - 1) * (1 - distanceFromMouse / distance2);
       return scale;
     };
     const isHorizontal = direction === "bottom";
@@ -2565,10 +3195,10 @@ var Dock = forwardRef19(
 Dock.displayName = "Dock";
 
 // src/components/Modal.tsx
-import { forwardRef as forwardRef20, useEffect as useEffect8, useCallback as useCallback8, useRef as useRef9 } from "react";
+import { forwardRef as forwardRef20, useEffect as useEffect8, useCallback as useCallback9, useRef as useRef13 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-var sizeConfig8 = {
+var sizeConfig7 = {
   sm: { maxWidth: 400 },
   md: { maxWidth: 500 },
   lg: { maxWidth: 640 },
@@ -2588,12 +3218,17 @@ var Modal = forwardRef20(
     closeOnOverlayClick = true,
     closeOnEscape = true,
     showCloseButton = true,
+    disableRefraction = false,
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const modalRef = useRef9(null);
-    const config = sizeConfig8[size];
-    const handleClose = useCallback8(() => {
+    const localRef = useRef13(null);
+    const combinedRef = ref || localRef;
+    const config = sizeConfig7[size];
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(combinedRef, {
+      enabled: open && !disableRefraction && !reducedMotion
+    });
+    const handleClose = useCallback9(() => {
       onOpenChange(false);
     }, [onOpenChange]);
     const handleOverlayClick = (e) => {
@@ -2601,7 +3236,7 @@ var Modal = forwardRef20(
         handleClose();
       }
     };
-    const handleKeyDown = useCallback8((e) => {
+    const handleKeyDown = useCallback9((e) => {
       if (closeOnEscape && e.key === "Escape") {
         handleClose();
       }
@@ -2610,14 +3245,23 @@ var Modal = forwardRef20(
       if (open) {
         document.addEventListener("keydown", handleKeyDown);
         document.body.style.overflow = "hidden";
-        modalRef.current?.focus();
+        combinedRef.current?.focus();
       }
       return () => {
         document.removeEventListener("keydown", handleKeyDown);
         document.body.style.overflow = "";
       };
-    }, [open, handleKeyDown]);
+    }, [open, handleKeyDown, combinedRef]);
     if (!open) return null;
+    const modalStyles = {
+      maxWidth: config.maxWidth,
+      borderRadius: 24,
+      ...style
+    };
+    if (isReady && filterUrl) {
+      modalStyles.filter = filterUrl;
+      modalStyles.backgroundImage = rimGradient;
+    }
     const modalContent = /* @__PURE__ */ jsx21(
       "div",
       {
@@ -2634,7 +3278,7 @@ var Modal = forwardRef20(
         children: /* @__PURE__ */ jsxs15(
           "div",
           {
-            ref: ref || modalRef,
+            ref: combinedRef,
             tabIndex: -1,
             className: cn(
               "lg-glass lg-glass-elevated lg-text",
@@ -2642,11 +3286,7 @@ var Modal = forwardRef20(
               !reducedMotion && "animate-[lg-scale-in_200ms_var(--lg-ease-spring)]",
               className
             ),
-            style: {
-              maxWidth: config.maxWidth,
-              borderRadius: 24,
-              ...style
-            },
+            style: modalStyles,
             ...props,
             children: [
               showCloseButton && /* @__PURE__ */ jsx21(
@@ -2713,10 +3353,10 @@ var ModalFooter = forwardRef20(
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/Sheet.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect9, useCallback as useCallback9, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect9, useCallback as useCallback10, useRef as useRef14 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-var sizeConfig9 = {
+var sizeConfig8 = {
   sm: { width: 320, height: 300 },
   md: { width: 400, height: 400 },
   lg: { width: 500, height: 500 },
@@ -2732,12 +3372,17 @@ var Sheet = forwardRef21(
     side = "bottom",
     size = "md",
     showHandle = true,
+    disableRefraction = false,
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const sheetRef = useRef10(null);
-    const config = sizeConfig9[size];
-    const handleClose = useCallback9(() => {
+    const localRef = useRef14(null);
+    const combinedRef = ref || localRef;
+    const config = sizeConfig8[size];
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(combinedRef, {
+      enabled: open && !disableRefraction && !reducedMotion
+    });
+    const handleClose = useCallback10(() => {
       onOpenChange(false);
     }, [onOpenChange]);
     const handleOverlayClick = (e) => {
@@ -2745,7 +3390,7 @@ var Sheet = forwardRef21(
         handleClose();
       }
     };
-    const handleKeyDown = useCallback9((e) => {
+    const handleKeyDown = useCallback10((e) => {
       if (e.key === "Escape") {
         handleClose();
       }
@@ -2761,7 +3406,6 @@ var Sheet = forwardRef21(
       };
     }, [open, handleKeyDown]);
     if (!open) return null;
-    const isHorizontal = side === "left" || side === "right";
     const sheetStyles = {
       position: "fixed",
       zIndex: 50,
@@ -2803,6 +3447,10 @@ var Sheet = forwardRef21(
       },
       ...style
     };
+    if (isReady && filterUrl) {
+      sheetStyles.filter = filterUrl;
+      sheetStyles.backgroundImage = rimGradient;
+    }
     const animationClass = reducedMotion ? "" : {
       bottom: "animate-[lg-slide-up_300ms_var(--lg-ease-spring)]",
       top: "animate-[lg-slide-down_300ms_var(--lg-ease-spring)]",
@@ -2823,7 +3471,7 @@ var Sheet = forwardRef21(
         children: /* @__PURE__ */ jsxs16(
           "div",
           {
-            ref: ref || sheetRef,
+            ref: combinedRef,
             className: cn(
               "lg-glass lg-glass-elevated lg-text",
               "overflow-auto",
@@ -2851,7 +3499,7 @@ var Sheet = forwardRef21(
 Sheet.displayName = "Sheet";
 
 // src/components/Menu.tsx
-import { forwardRef as forwardRef22, useState as useState16, useRef as useRef11, useEffect as useEffect10 } from "react";
+import { forwardRef as forwardRef22, useState as useState17, useRef as useRef15, useEffect as useEffect10 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var Menu = forwardRef22(
@@ -2863,10 +3511,10 @@ var Menu = forwardRef22(
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const [isOpen, setIsOpen] = useState16(false);
-    const [position, setPosition] = useState16({ top: 0, left: 0 });
-    const triggerRef = useRef11(null);
-    const menuRef = useRef11(null);
+    const [isOpen, setIsOpen] = useState17(false);
+    const [position, setPosition] = useState17({ top: 0, left: 0 });
+    const triggerRef = useRef15(null);
+    const menuRef = useRef15(null);
     const reducedMotion = useReducedMotion();
     const updatePosition = () => {
       if (!triggerRef.current || !menuRef.current) return;
@@ -2985,7 +3633,7 @@ var Menu = forwardRef22(
 Menu.displayName = "Menu";
 
 // src/components/Tooltip.tsx
-import { useState as useState17, useRef as useRef12, useEffect as useEffect11, cloneElement, isValidElement } from "react";
+import { useState as useState18, useRef as useRef16, useEffect as useEffect11, cloneElement, isValidElement } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function Tooltip({
@@ -2996,11 +3644,11 @@ function Tooltip({
   delay = 200,
   disabled = false
 }) {
-  const [isOpen, setIsOpen] = useState17(false);
-  const [position, setPosition] = useState17({ top: 0, left: 0 });
-  const triggerRef = useRef12(null);
-  const tooltipRef = useRef12(null);
-  const timeoutRef = useRef12();
+  const [isOpen, setIsOpen] = useState18(false);
+  const [position, setPosition] = useState18({ top: 0, left: 0 });
+  const triggerRef = useRef16(null);
+  const tooltipRef = useRef16(null);
+  const timeoutRef = useRef16();
   const reducedMotion = useReducedMotion();
   const updatePosition = () => {
     if (!triggerRef.current || !tooltipRef.current) return;
@@ -3095,7 +3743,7 @@ function Tooltip({
 }
 
 // src/components/Toast.tsx
-import { forwardRef as forwardRef24, useState as useState18, useEffect as useEffect12, createContext as createContext5, useContext as useContext5, useCallback as useCallback10 } from "react";
+import { forwardRef as forwardRef24, useState as useState19, useEffect as useEffect12, createContext as createContext5, useContext as useContext5, useCallback as useCallback11 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var variantIcons = {
@@ -3135,7 +3783,7 @@ var Toast = forwardRef24(
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const [isLeaving, setIsLeaving] = useState18(false);
+    const [isLeaving, setIsLeaving] = useState19(false);
     useEffect12(() => {
       if (duration > 0) {
         const timer = setTimeout(() => {
@@ -3198,16 +3846,16 @@ Toast.displayName = "Toast";
 var ToastContext = createContext5(null);
 var toastId = 0;
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState18([]);
-  const toast = useCallback10((props) => {
+  const [toasts, setToasts] = useState19([]);
+  const toast = useCallback11((props) => {
     const id = `toast-${++toastId}`;
     setToasts((prev) => [...prev, { ...props, id }]);
     return id;
   }, []);
-  const dismiss = useCallback10((id) => {
+  const dismiss = useCallback11((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const dismissAll = useCallback10(() => {
+  const dismissAll = useCallback11(() => {
     setToasts([]);
   }, []);
   return /* @__PURE__ */ jsxs19(ToastContext.Provider, { value: { toasts, toast, dismiss, dismissAll }, children: [
@@ -3353,7 +4001,7 @@ var Progress = forwardRef26(
     indeterminate = false,
     ...props
   }, ref) => {
-    const percentage = clamp(value / max * 100, 0, 100);
+    const percentage = clamp2(value / max * 100, 0, 100);
     const fillColor = color || "var(--lg-fill)";
     if (variant === "circular") {
       const config2 = circularSizeConfig[size];
@@ -3589,7 +4237,7 @@ var variantStyles = {
     border: "1px solid var(--lg-edge-strong)"
   }
 };
-var sizeConfig10 = {
+var sizeConfig9 = {
   sm: { height: 18, padding: "0 6px", fontSize: 10, dotSize: 6 },
   md: { height: 22, padding: "0 8px", fontSize: 11, dotSize: 8 },
   lg: { height: 26, padding: "0 10px", fontSize: 12, dotSize: 10 }
@@ -3605,7 +4253,7 @@ var Badge = forwardRef28(
     children,
     ...props
   }, ref) => {
-    const config = sizeConfig10[size];
+    const config = sizeConfig9[size];
     const variantStyle = variantStyles[variant];
     if (dot) {
       return /* @__PURE__ */ jsx29(
@@ -3653,9 +4301,9 @@ var Badge = forwardRef28(
 Badge.displayName = "Badge";
 
 // src/components/Avatar.tsx
-import { forwardRef as forwardRef29, useState as useState19 } from "react";
+import { forwardRef as forwardRef29, useState as useState20 } from "react";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
-var sizeConfig11 = {
+var sizeConfig10 = {
   xs: { size: 24, fontSize: 10, statusSize: 6 },
   sm: { size: 32, fontSize: 12, statusSize: 8 },
   md: { size: 40, fontSize: 14, statusSize: 10 },
@@ -3683,8 +4331,8 @@ var Avatar = forwardRef29(
     status,
     ...props
   }, ref) => {
-    const [imageError, setImageError] = useState19(false);
-    const config = sizeConfig11[size];
+    const [imageError, setImageError] = useState20(false);
+    const config = sizeConfig10[size];
     const showFallback = !src || imageError;
     const avatarStyles = {
       width: config.size,
@@ -3741,7 +4389,7 @@ Avatar.displayName = "Avatar";
 // src/components/Chip.tsx
 import { forwardRef as forwardRef30 } from "react";
 import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
-var sizeConfig12 = {
+var sizeConfig11 = {
   sm: { height: 24, padding: "0 8px", fontSize: 11, iconSize: 14 },
   md: { height: 32, padding: "0 12px", fontSize: 13, iconSize: 16 },
   lg: { height: 40, padding: "0 16px", fontSize: 14, iconSize: 18 }
@@ -3761,7 +4409,7 @@ var Chip = forwardRef30(
     children,
     ...props
   }, ref) => {
-    const config = sizeConfig12[size];
+    const config = sizeConfig11[size];
     const isClickable = !!onClick;
     const chipStyles = {
       height: config.height,
@@ -3838,7 +4486,7 @@ var Chip = forwardRef30(
 Chip.displayName = "Chip";
 
 // src/components/Accordion.tsx
-import { forwardRef as forwardRef31, createContext as createContext6, useContext as useContext6, useState as useState20, useCallback as useCallback11 } from "react";
+import { forwardRef as forwardRef31, createContext as createContext6, useContext as useContext6, useState as useState21, useCallback as useCallback12 } from "react";
 import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var AccordionContext = createContext6(null);
 var Accordion = forwardRef31(
@@ -3850,13 +4498,13 @@ var Accordion = forwardRef31(
     children,
     ...props
   }, ref) => {
-    const [expandedItems, setExpandedItems] = useState20(() => {
+    const [expandedItems, setExpandedItems] = useState21(() => {
       if (defaultValue) {
         return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
       }
       return [];
     });
-    const toggleItem = useCallback11((value) => {
+    const toggleItem = useCallback12((value) => {
       setExpandedItems((prev) => {
         const isExpanded = prev.includes(value);
         if (type === "single") {
@@ -4069,10 +4717,10 @@ var Skeleton = forwardRef33(
 Skeleton.displayName = "Skeleton";
 
 // src/components/Drawer.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect13, useCallback as useCallback12, useRef as useRef13 } from "react";
+import { forwardRef as forwardRef34, useEffect as useEffect13, useCallback as useCallback13, useRef as useRef17 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
-var sizeConfig13 = {
+var sizeConfig12 = {
   sm: 280,
   md: 320,
   lg: 400,
@@ -4095,11 +4743,11 @@ var Drawer = forwardRef34(
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const drawerRef = useRef13(null);
+    const drawerRef = useRef17(null);
     const titleId = useId();
     const descId = useId();
-    const width = sizeConfig13[size];
-    const handleClose = useCallback12(() => {
+    const width = sizeConfig12[size];
+    const handleClose = useCallback13(() => {
       onOpenChange(false);
     }, [onOpenChange]);
     const handleOverlayClick = (e) => {
@@ -4107,7 +4755,7 @@ var Drawer = forwardRef34(
         handleClose();
       }
     };
-    const handleKeyDown = useCallback12((e) => {
+    const handleKeyDown = useCallback13((e) => {
       if (closeOnEscape && e.key === "Escape") {
         handleClose();
       }
@@ -4209,7 +4857,7 @@ var Drawer = forwardRef34(
 Drawer.displayName = "Drawer";
 
 // src/components/Popover.tsx
-import { useState as useState21, useRef as useRef14, useEffect as useEffect14, useCallback as useCallback13, cloneElement as cloneElement2, isValidElement as isValidElement2 } from "react";
+import { useState as useState22, useRef as useRef18, useEffect as useEffect14, useCallback as useCallback14, cloneElement as cloneElement2, isValidElement as isValidElement2 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 function Popover({
@@ -4225,15 +4873,15 @@ function Popover({
   closeOnEscape = true,
   trigger = "click"
 }) {
-  const [internalOpen, setInternalOpen] = useState21(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState22(defaultOpen);
   const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
   const setOpen = controlledOpen !== void 0 ? onOpenChange : setInternalOpen;
-  const [position, setPosition] = useState21({ top: 0, left: 0 });
-  const triggerRef = useRef14(null);
-  const popoverRef = useRef14(null);
+  const [position, setPosition] = useState22({ top: 0, left: 0 });
+  const triggerRef = useRef18(null);
+  const popoverRef = useRef18(null);
   const reducedMotion = useReducedMotion();
   const popoverId = useId();
-  const updatePosition = useCallback13(() => {
+  const updatePosition = useCallback14(() => {
     if (!triggerRef.current || !popoverRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popoverRect = popoverRef.current.getBoundingClientRect();
@@ -4367,7 +5015,7 @@ function Popover({
 }
 
 // src/components/ContextMenu.tsx
-import { useState as useState22, useRef as useRef15, useEffect as useEffect15, useCallback as useCallback14, cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
+import { useState as useState23, useRef as useRef19, useEffect as useEffect15, useCallback as useCallback15, cloneElement as cloneElement3, isValidElement as isValidElement3 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 function ContextMenu({
@@ -4376,14 +5024,14 @@ function ContextMenu({
   disabled = false,
   onOpenChange
 }) {
-  const [open, setOpen] = useState22(false);
-  const [position, setPosition] = useState22({ x: 0, y: 0 });
-  const [focusedIndex, setFocusedIndex] = useState22(-1);
-  const menuRef = useRef15(null);
-  const triggerRef = useRef15(null);
+  const [open, setOpen] = useState23(false);
+  const [position, setPosition] = useState23({ x: 0, y: 0 });
+  const [focusedIndex, setFocusedIndex] = useState23(-1);
+  const menuRef = useRef19(null);
+  const triggerRef = useRef19(null);
   const reducedMotion = useReducedMotion();
   const menuId = useId();
-  const handleOpenChange = useCallback14((isOpen) => {
+  const handleOpenChange = useCallback15((isOpen) => {
     setOpen(isOpen);
     onOpenChange?.(isOpen);
     if (!isOpen) {
@@ -4411,7 +5059,7 @@ function ContextMenu({
     item.onSelect?.();
     handleOpenChange(false);
   };
-  const handleKeyDown = useCallback14((e) => {
+  const handleKeyDown = useCallback15((e) => {
     if (!open) return;
     const selectableItems = items.filter((item) => item !== "separator" && !item.disabled);
     switch (e.key) {
@@ -4539,7 +5187,7 @@ function ContextMenu({
 }
 
 // src/components/CommandPalette.tsx
-import { useState as useState23, useRef as useRef16, useEffect as useEffect16, useCallback as useCallback15, useMemo } from "react";
+import { useState as useState24, useRef as useRef20, useEffect as useEffect16, useCallback as useCallback16, useMemo } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function CommandPalette({
@@ -4550,10 +5198,10 @@ function CommandPalette({
   emptyMessage = "No results found.",
   groups = {}
 }) {
-  const [query, setQuery] = useState23("");
-  const [selectedIndex, setSelectedIndex] = useState23(0);
-  const inputRef = useRef16(null);
-  const listRef = useRef16(null);
+  const [query, setQuery] = useState24("");
+  const [selectedIndex, setSelectedIndex] = useState24(0);
+  const inputRef = useRef20(null);
+  const listRef = useRef20(null);
   const reducedMotion = useReducedMotion();
   const dialogId = useId();
   const listboxId = useId();
@@ -4580,16 +5228,16 @@ function CommandPalette({
   const flattenedItems = useMemo(() => {
     return Object.values(groupedItems).flat();
   }, [groupedItems]);
-  const handleClose = useCallback15(() => {
+  const handleClose = useCallback16(() => {
     onOpenChange(false);
     setQuery("");
     setSelectedIndex(0);
   }, [onOpenChange]);
-  const handleSelect = useCallback15((item) => {
+  const handleSelect = useCallback16((item) => {
     item.onSelect();
     handleClose();
   }, [handleClose]);
-  const handleKeyDown = useCallback15((e) => {
+  const handleKeyDown = useCallback16((e) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
@@ -4643,7 +5291,8 @@ function CommandPalette({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+        "fixed inset-0 z-50 flex items-stretch sm:items-start justify-center",
+        "p-0 sm:p-4 sm:pt-[12vh]",
         "bg-black/40 backdrop-blur-sm",
         !reducedMotion && "animate-[lg-fade-in_150ms_ease-out]"
       ),
@@ -4656,13 +5305,14 @@ function CommandPalette({
           "aria-labelledby": dialogId,
           className: cn(
             "lg-glass lg-glass-elevated lg-text",
-            "w-full max-w-[540px] overflow-hidden",
+            "w-full sm:max-w-[540px] overflow-hidden",
+            "h-full sm:h-auto max-h-full sm:max-h-[min(80vh,640px)]",
+            "flex flex-col rounded-none sm:rounded-2xl",
             !reducedMotion && "animate-[lg-scale-in_150ms_var(--lg-ease-spring)]"
           ),
-          style: { borderRadius: 16 },
           children: [
-            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-[var(--lg-separator)]", children: [
-              /* @__PURE__ */ jsxs30("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "var(--lg-muted)", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-3 px-3 sm:px-4 min-h-[56px] border-b border-[var(--lg-separator)] shrink-0", children: [
+              /* @__PURE__ */ jsxs30("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "var(--lg-muted)", strokeWidth: "2", "aria-hidden": true, children: [
                 /* @__PURE__ */ jsx38("circle", { cx: "11", cy: "11", r: "8" }),
                 /* @__PURE__ */ jsx38("path", { d: "m21 21-4.35-4.35" })
               ] }),
@@ -4670,7 +5320,11 @@ function CommandPalette({
                 "input",
                 {
                   ref: inputRef,
-                  type: "text",
+                  type: "search",
+                  enterKeyHint: "search",
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  spellCheck: false,
                   value: query,
                   onChange: (e) => setQuery(e.target.value),
                   onKeyDown: handleKeyDown,
@@ -4680,13 +5334,29 @@ function CommandPalette({
                   "aria-controls": listboxId,
                   "aria-activedescendant": flattenedItems[selectedIndex]?.id,
                   className: cn(
-                    "flex-1 bg-transparent border-0 outline-none",
+                    "flex-1 min-w-0 bg-transparent border-0 outline-none",
                     "text-base placeholder:text-[var(--lg-muted)]"
                   ),
-                  style: { color: "var(--lg-foreground)" }
+                  style: { color: "var(--lg-foreground)", fontSize: 16 }
                 }
               ),
-              /* @__PURE__ */ jsx38("kbd", { className: "px-2 py-0.5 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)]", children: "ESC" })
+              /* @__PURE__ */ jsx38(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClose,
+                  className: "inline-flex items-center justify-center rounded-lg text-[var(--lg-muted)] border-0 bg-transparent cursor-pointer",
+                  style: { minWidth: 44, minHeight: 44 },
+                  "aria-label": "Close search",
+                  children: /* @__PURE__ */ jsx38(
+                    "kbd",
+                    {
+                      className: "px-2 py-1 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)] pointer-events-none",
+                      children: "ESC"
+                    }
+                  )
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx38(
               "div",
@@ -4694,7 +5364,8 @@ function CommandPalette({
                 ref: listRef,
                 role: "listbox",
                 id: listboxId,
-                className: "max-h-[300px] overflow-auto p-2",
+                className: "flex-1 overflow-auto overscroll-contain p-2 min-h-0",
+                style: { maxHeight: "min(70dvh, 480px)" },
                 children: flattenedItems.length === 0 ? /* @__PURE__ */ jsx38("div", { className: "px-4 py-8 text-center text-sm text-[var(--lg-muted)]", children: emptyMessage }) : Object.entries(groupedItems).map(([group, groupItems]) => /* @__PURE__ */ jsxs30("div", { children: [
                   group !== "_default" && groups[group] && /* @__PURE__ */ jsx38("div", { className: "px-3 py-2 text-xs font-medium text-[var(--lg-muted)] uppercase tracking-wider", children: groups[group] }),
                   groupItems.map((item) => {
@@ -4709,18 +5380,19 @@ function CommandPalette({
                         onClick: () => handleSelect(item),
                         onMouseEnter: () => setSelectedIndex(flattenedItems.indexOf(item)),
                         className: cn(
-                          "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg",
+                          "w-full flex items-center gap-3 px-3 rounded-lg",
                           "border-0 bg-transparent text-left cursor-pointer",
                           "transition-colors",
                           isSelected && "bg-[var(--lg-highlight)]"
                         ),
+                        style: { minHeight: 44 },
                         children: [
                           item.icon && /* @__PURE__ */ jsx38("span", { className: "flex-shrink-0 w-5 h-5 text-[var(--lg-muted)]", children: item.icon }),
                           /* @__PURE__ */ jsxs30("div", { className: "flex-1 min-w-0", children: [
                             /* @__PURE__ */ jsx38("div", { className: "text-sm font-medium", style: { color: "var(--lg-foreground)" }, children: item.label }),
                             item.description && /* @__PURE__ */ jsx38("div", { className: "text-xs text-[var(--lg-muted)] truncate", children: item.description })
                           ] }),
-                          item.shortcut && /* @__PURE__ */ jsx38("kbd", { className: "px-2 py-0.5 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)]", children: item.shortcut })
+                          item.shortcut && /* @__PURE__ */ jsx38("kbd", { className: "hidden sm:inline px-2 py-0.5 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)]", children: item.shortcut })
                         ]
                       },
                       item.id
@@ -4738,7 +5410,7 @@ function CommandPalette({
 }
 
 // src/components/Carousel.tsx
-import { forwardRef as forwardRef38, useState as useState24, useRef as useRef17, useEffect as useEffect17, useCallback as useCallback16, Children } from "react";
+import { forwardRef as forwardRef38, useState as useState25, useRef as useRef21, useEffect as useEffect17, useCallback as useCallback17, Children } from "react";
 import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var Carousel = forwardRef38(
   ({
@@ -4754,15 +5426,15 @@ var Carousel = forwardRef38(
     gap = 16,
     ...props
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = useState24(0);
-    const [isHovered, setIsHovered] = useState24(false);
-    const containerRef = useRef17(null);
+    const [currentIndex, setCurrentIndex] = useState25(0);
+    const [isHovered, setIsHovered] = useState25(false);
+    const containerRef = useRef21(null);
     const reducedMotion = useReducedMotion();
     const carouselId = useId();
     const slides = Children.toArray(children);
     const totalSlides = slides.length;
     const maxIndex = Math.max(0, totalSlides - slidesToShow);
-    const goToSlide = useCallback16((index) => {
+    const goToSlide = useCallback17((index) => {
       if (loop) {
         if (index < 0) index = maxIndex;
         if (index > maxIndex) index = 0;
@@ -4771,10 +5443,10 @@ var Carousel = forwardRef38(
       }
       setCurrentIndex(index);
     }, [loop, maxIndex]);
-    const goToPrevious = useCallback16(() => {
+    const goToPrevious = useCallback17(() => {
       goToSlide(currentIndex - 1);
     }, [currentIndex, goToSlide]);
-    const goToNext = useCallback16(() => {
+    const goToNext = useCallback17(() => {
       goToSlide(currentIndex + 1);
     }, [currentIndex, goToSlide]);
     useEffect17(() => {
@@ -4920,9 +5592,9 @@ var Carousel = forwardRef38(
 Carousel.displayName = "Carousel";
 
 // src/components/FloatingActionButton.tsx
-import { forwardRef as forwardRef39, useState as useState25 } from "react";
+import { forwardRef as forwardRef39, useState as useState26 } from "react";
 import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
-var sizeConfig14 = {
+var sizeConfig13 = {
   sm: { size: 40, iconSize: 20 },
   md: { size: 56, iconSize: 24 },
   lg: { size: 72, iconSize: 32 }
@@ -4947,10 +5619,10 @@ var FloatingActionButton = forwardRef39(
     disabled,
     ...props
   }, ref) => {
-    const [isHovered, setIsHovered] = useState25(false);
+    const [isHovered, setIsHovered] = useState26(false);
     const { isPressed, pressHandlers } = usePressedState({ disabled });
     const reducedMotion = useReducedMotion();
-    const config = sizeConfig14[size];
+    const config = sizeConfig13[size];
     const fabStyles = {
       position: "fixed",
       zIndex: 40,
@@ -5009,7 +5681,7 @@ var FloatingActionButton = forwardRef39(
 FloatingActionButton.displayName = "FloatingActionButton";
 
 // src/components/DatePicker.tsx
-import { forwardRef as forwardRef40, useState as useState26, useRef as useRef18, useEffect as useEffect18, useCallback as useCallback17, useMemo as useMemo2 } from "react";
+import { forwardRef as forwardRef40, useState as useState27, useRef as useRef22, useEffect as useEffect18, useCallback as useCallback18, useMemo as useMemo2 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -5044,17 +5716,17 @@ var DatePicker = forwardRef40(
     formatDate = (date) => date.toLocaleDateString(locale, { year: "numeric", month: "long", day: "numeric" }),
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = useState26(defaultValue || null);
+    const [internalValue, setInternalValue] = useState27(defaultValue || null);
     const value = controlledValue !== void 0 ? controlledValue : internalValue;
-    const [isOpen, setIsOpen] = useState26(false);
-    const [viewDate, setViewDate] = useState26(() => value || /* @__PURE__ */ new Date());
-    const [focusedDate, setFocusedDate] = useState26(null);
-    const triggerRef = useRef18(null);
-    const calendarRef = useRef18(null);
+    const [isOpen, setIsOpen] = useState27(false);
+    const [viewDate, setViewDate] = useState27(() => value || /* @__PURE__ */ new Date());
+    const [focusedDate, setFocusedDate] = useState27(null);
+    const triggerRef = useRef22(null);
+    const calendarRef = useRef22(null);
     const reducedMotion = useReducedMotion();
     const inputId = useId();
     const calendarId = useId();
-    const setValue = useCallback17((date) => {
+    const setValue = useCallback18((date) => {
       if (controlledValue === void 0) {
         setInternalValue(date);
       }
@@ -5305,14 +5977,14 @@ var DatePicker = forwardRef40(
 DatePicker.displayName = "DatePicker";
 
 // src/hooks/use-reduced-transparency.ts
-import { useState as useState27, useEffect as useEffect19 } from "react";
+import { useState as useState28, useEffect as useEffect19 } from "react";
 var QUERY2 = "(prefers-reduced-transparency: reduce)";
 function getInitialState2() {
   if (typeof window === "undefined") return false;
   return window.matchMedia(QUERY2).matches;
 }
 function useReducedTransparency() {
-  const [reducedTransparency, setReducedTransparency] = useState27(getInitialState2);
+  const [reducedTransparency, setReducedTransparency] = useState28(getInitialState2);
   useEffect19(() => {
     const mediaQuery = window.matchMedia(QUERY2);
     const handler = (event) => {
@@ -5328,9 +6000,9 @@ function useReducedTransparency() {
 }
 
 // src/hooks/use-mounted.ts
-import { useState as useState28, useEffect as useEffect20 } from "react";
+import { useState as useState29, useEffect as useEffect20 } from "react";
 function useMounted() {
-  const [mounted, setMounted] = useState28(false);
+  const [mounted, setMounted] = useState29(false);
   useEffect20(() => {
     setMounted(true);
   }, []);
@@ -5394,8 +6066,9 @@ export {
   ToastProvider,
   Toggle,
   Tooltip,
-  clamp,
+  clamp2 as clamp,
   cleanupFilters,
+  clearGlisseCache,
   cn,
   createLensFilter,
   createRefractionFilter,
@@ -5412,12 +6085,14 @@ export {
   throttle,
   useControllable,
   useGlass,
+  useGlisseEffect,
   useId,
   useMounted,
   usePointerPosition,
   usePressedState,
   useReducedMotion,
   useReducedTransparency,
+  useRefraction,
   useSidebar,
   useTheme,
   useToast