@nkanish/liquidglass-ui 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -77,8 +77,9 @@ __export(index_exports, {
   ToastProvider: () => ToastProvider,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
-  clamp: () => clamp,
+  clamp: () => clamp2,
   cleanupFilters: () => cleanupFilters,
+  clearGlisseCache: () => clearGlisseCache,
   cn: () => cn,
   createLensFilter: () => createLensFilter,
   createRefractionFilter: () => createRefractionFilter,
@@ -95,12 +96,14 @@ __export(index_exports, {
   throttle: () => throttle,
   useControllable: () => useControllable,
   useGlass: () => useGlass,
+  useGlisseEffect: () => useGlisseEffect,
   useId: () => useId,
   useMounted: () => useMounted,
   usePointerPosition: () => usePointerPosition,
   usePressedState: () => usePressedState,
   useReducedMotion: () => useReducedMotion,
   useReducedTransparency: () => useReducedTransparency,
+  useRefraction: () => useRefraction,
   useSidebar: () => useSidebar,
   useTheme: () => useTheme,
   useToast: () => useToast
@@ -110,6 +113,13 @@ module.exports = __toCommonJS(index_exports);
 // src/components/GlassProvider.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_REFRACTION = {
+  enabled: true,
+  depth: 8,
+  dome: 4,
+  shine: 0.3,
+  lightAngle: 225
+};
 var GlassContext = (0, import_react.createContext)(null);
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
@@ -131,6 +141,10 @@ function GlassProvider({
     return theme;
   });
   const [config, setConfigState] = (0, import_react.useState)(initialConfig);
+  const refraction = {
+    ...DEFAULT_REFRACTION,
+    ...config.refraction
+  };
   const setTheme = (newTheme) => {
     setThemeState(newTheme);
     if (typeof window !== "undefined") {
@@ -178,7 +192,8 @@ function GlassProvider({
         resolvedTheme,
         setTheme,
         config,
-        setConfig
+        setConfig,
+        refraction
       },
       children
     }
@@ -195,9 +210,16 @@ function useTheme() {
   const { theme, resolvedTheme, setTheme } = useGlass();
   return { theme, resolvedTheme, setTheme };
 }
+function useRefraction() {
+  const context = (0, import_react.useContext)(GlassContext);
+  if (!context) {
+    return DEFAULT_REFRACTION;
+  }
+  return context.refraction;
+}
 
 // src/components/Glass.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -281,34 +303,482 @@ function useReducedMotion() {
   return reducedMotion;
 }
 
-// src/core/svg-filters.ts
+// src/hooks/use-glisse-effect.ts
+var import_react4 = require("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] = (0, import_react4.useState)(null);
+  const [isReady, setIsReady] = (0, import_react4.useState)(false);
+  const filterRef = (0, import_react4.useRef)(null);
+  const currentFilterId = (0, import_react4.useRef)(null);
+  const lastDimensions = (0, import_react4.useRef)(null);
+  const rafRef = (0, import_react4.useRef)(null);
+  const supportsRef = (0, import_react4.useRef)(null);
+  const cleanup = (0, import_react4.useCallback)(() => {
+    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 = (0, import_react4.useCallback)((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]);
+  (0, import_react4.useEffect)(() => {
+    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));
   }
@@ -555,9 +1025,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;
 }
@@ -568,14 +1038,20 @@ 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
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Glass = (0, import_react4.forwardRef)(
+var Glass = (0, import_react5.forwardRef)(
   ({
     className,
     style,
@@ -585,14 +1061,31 @@ var Glass = (0, import_react4.forwardRef)(
     tint,
     interactive = false,
     rimLight = false,
-    bendStrength = 0.3,
+    refraction,
+    refractionDepth,
+    refractionDome,
+    shine,
+    lightAngle,
     children,
     ...props
   }, ref) => {
-    const localRef = (0, import_react4.useRef)(null);
+    const localRef = (0, import_react5.useRef)(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
     };
@@ -605,8 +1098,13 @@ var Glass = (0, import_react4.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}%`;
@@ -625,6 +1123,7 @@ var Glass = (0, import_react4.forwardRef)(
         className: cn(variantClasses[variant], className),
         style: customStyles,
         "data-hover": interactive && pointerPosition.isInside ? "" : void 0,
+        "data-rim": shouldRefract && isReady ? "" : void 0,
         ...props,
         children
       }
@@ -634,7 +1133,7 @@ var Glass = (0, import_react4.forwardRef)(
 Glass.displayName = "Glass";
 
 // src/components/GlassCard.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var paddingMap = {
   none: "0",
@@ -643,13 +1142,13 @@ 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 = (0, import_react5.forwardRef)(
+var GlassCard = (0, import_react6.forwardRef)(
   ({
     className,
     style,
@@ -657,14 +1156,25 @@ var GlassCard = (0, import_react5.forwardRef)(
     padding = "md",
     radius = "lg",
     hoverable = false,
+    disableRefraction = false,
     children,
     ...props
   }, ref) => {
+    const localRef = (0, import_react6.useRef)(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",
@@ -672,61 +1182,61 @@ var GlassCard = (0, import_react5.forwardRef)(
       hoverable && "transition-transform hover:scale-[1.02] hover:shadow-lg cursor-pointer",
       className
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: baseClasses, style: customStyles, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: combinedRef, className: baseClasses, style: customStyles, ...props, children });
   }
 );
 GlassCard.displayName = "GlassCard";
 
 // src/components/Button.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/use-pressed-state.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function usePressedState(options = {}) {
   const { disabled = false, onPressStart, onPressEnd } = options;
-  const [isPressed, setIsPressed] = (0, import_react6.useState)(false);
-  const pointerIdRef = (0, import_react6.useRef)(null);
-  const handlePressStart = (0, import_react6.useCallback)(() => {
+  const [isPressed, setIsPressed] = (0, import_react7.useState)(false);
+  const pointerIdRef = (0, import_react7.useRef)(null);
+  const handlePressStart = (0, import_react7.useCallback)(() => {
     if (disabled) return;
     setIsPressed(true);
     onPressStart?.();
   }, [disabled, onPressStart]);
-  const handlePressEnd = (0, import_react6.useCallback)(() => {
+  const handlePressEnd = (0, import_react7.useCallback)(() => {
     setIsPressed(false);
     onPressEnd?.();
   }, [onPressEnd]);
-  const onPointerDown = (0, import_react6.useCallback)((e) => {
+  const onPointerDown = (0, import_react7.useCallback)((e) => {
     if (disabled || pointerIdRef.current !== null) return;
     pointerIdRef.current = e.pointerId;
     handlePressStart();
     e.target.setPointerCapture?.(e.pointerId);
   }, [disabled, handlePressStart]);
-  const onPointerUp = (0, import_react6.useCallback)((e) => {
+  const onPointerUp = (0, import_react7.useCallback)((e) => {
     if (pointerIdRef.current !== e.pointerId) return;
     pointerIdRef.current = null;
     handlePressEnd();
   }, [handlePressEnd]);
-  const onPointerCancel = (0, import_react6.useCallback)((e) => {
+  const onPointerCancel = (0, import_react7.useCallback)((e) => {
     if (pointerIdRef.current !== e.pointerId) return;
     pointerIdRef.current = null;
     handlePressEnd();
   }, [handlePressEnd]);
-  const onPointerLeave = (0, import_react6.useCallback)((e) => {
+  const onPointerLeave = (0, import_react7.useCallback)((e) => {
     if (pointerIdRef.current !== e.pointerId) return;
   }, []);
-  const onKeyDown = (0, import_react6.useCallback)((e) => {
+  const onKeyDown = (0, import_react7.useCallback)((e) => {
     if (disabled) return;
     if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       handlePressStart();
     }
   }, [disabled, handlePressStart]);
-  const onKeyUp = (0, import_react6.useCallback)((e) => {
+  const onKeyUp = (0, import_react7.useCallback)((e) => {
     if (e.key === " " || e.key === "Enter") {
       handlePressEnd();
     }
   }, [handlePressEnd]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       pointerIdRef.current = null;
     };
@@ -772,7 +1282,7 @@ var sizeStyles = {
     gap: "10px"
   }
 };
-var Button = (0, import_react7.forwardRef)(
+var Button = (0, import_react8.forwardRef)(
   ({
     className,
     style,
@@ -785,23 +1295,38 @@ var Button = (0, import_react7.forwardRef)(
     loading = false,
     fullWidth = false,
     disabled,
+    disableRefraction = false,
     children,
     ...props
   }, ref) => {
+    const localRef = (0, import_react8.useRef)(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",
@@ -827,7 +1352,7 @@ var Button = (0, import_react7.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
-        ref,
+        ref: combinedRef,
         className: baseClasses,
         style: { ...customStyles, ...variantStyles2 },
         disabled: disabled || loading,
@@ -842,8 +1367,8 @@ var Button = (0, import_react7.forwardRef)(
           {
             className: "animate-spin",
             style: {
-              width: sizeConfig15.iconSize,
-              height: sizeConfig15.iconSize,
+              width: sizeConfig14.iconSize,
+              height: sizeConfig14.iconSize,
               border: "2px solid currentColor",
               borderTopColor: "transparent",
               borderRadius: "50%"
@@ -854,7 +1379,7 @@ var Button = (0, import_react7.forwardRef)(
             "span",
             {
               className: "flex items-center justify-center",
-              style: { width: sizeConfig15.iconSize, height: sizeConfig15.iconSize },
+              style: { width: sizeConfig14.iconSize, height: sizeConfig14.iconSize },
               children: icon
             }
           ),
@@ -863,7 +1388,7 @@ var Button = (0, import_react7.forwardRef)(
             "span",
             {
               className: "flex items-center justify-center",
-              style: { width: sizeConfig15.iconSize, height: sizeConfig15.iconSize },
+              style: { width: sizeConfig14.iconSize, height: sizeConfig14.iconSize },
               children: icon
             }
           )
@@ -875,14 +1400,14 @@ var Button = (0, import_react7.forwardRef)(
 Button.displayName = "Button";
 
 // src/components/IconButton.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var sizeStyles2 = {
   sm: { size: "32px", iconSize: "16px" },
   md: { size: "40px", iconSize: "20px" },
   lg: { size: "48px", iconSize: "24px" }
 };
-var IconButton = (0, import_react8.forwardRef)(
+var IconButton = (0, import_react9.forwardRef)(
   ({
     className,
     style,
@@ -896,10 +1421,10 @@ var IconButton = (0, import_react8.forwardRef)(
     ...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
     };
@@ -936,8 +1461,8 @@ var IconButton = (0, import_react8.forwardRef)(
           {
             className: "animate-spin",
             style: {
-              width: sizeConfig15.iconSize,
-              height: sizeConfig15.iconSize,
+              width: sizeConfig14.iconSize,
+              height: sizeConfig14.iconSize,
               border: "2px solid currentColor",
               borderTopColor: "transparent",
               borderRadius: "50%"
@@ -947,7 +1472,7 @@ var IconButton = (0, import_react8.forwardRef)(
           "span",
           {
             className: "flex items-center justify-center",
-            style: { width: sizeConfig15.iconSize, height: sizeConfig15.iconSize },
+            style: { width: sizeConfig14.iconSize, height: sizeConfig14.iconSize },
             children: icon
           }
         )
@@ -958,16 +1483,16 @@ var IconButton = (0, import_react8.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/Toggle.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/hooks/use-controllable.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useControllable(options) {
   const { value: controlledValue, defaultValue, onChange } = options;
   const isControlled = controlledValue !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react9.useState)(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react10.useState)(defaultValue);
   const value = isControlled ? controlledValue : uncontrolledValue;
-  const setValue = (0, import_react9.useCallback)((newValue) => {
+  const setValue = (0, import_react10.useCallback)((newValue) => {
     if (!isControlled) {
       setUncontrolledValue(newValue);
     }
@@ -978,9 +1503,9 @@ function useControllable(options) {
 function useControllableBoolean(options) {
   const { checked, defaultChecked = false, onCheckedChange } = options;
   const isControlled = checked !== void 0;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react9.useState)(defaultChecked);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react10.useState)(defaultChecked);
   const value = isControlled ? checked : uncontrolledValue;
-  const setValue = (0, import_react9.useCallback)((newValue) => {
+  const setValue = (0, import_react10.useCallback)((newValue) => {
     if (!isControlled) {
       setUncontrolledValue(newValue);
     }
@@ -996,7 +1521,7 @@ var sizeConfig = {
   md: { size: 40, padding: "0 12px", fontSize: 14, iconSize: 20 },
   lg: { size: 48, padding: "0 16px", fontSize: 16, iconSize: 24 }
 };
-var Toggle = (0, import_react10.forwardRef)(
+var Toggle = (0, import_react11.forwardRef)(
   ({
     className,
     style,
@@ -1074,14 +1599,14 @@ var Toggle = (0, import_react10.forwardRef)(
 Toggle.displayName = "Toggle";
 
 // src/components/Input.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var sizeConfig2 = {
   sm: { height: 32, padding: "0 10px", fontSize: 13, iconSize: 14, borderRadius: 16 },
   md: { height: 40, padding: "0 14px", fontSize: 14, iconSize: 16, borderRadius: 20 },
   lg: { height: 48, padding: "0 18px", fontSize: 16, iconSize: 18, borderRadius: 24 }
 };
-var Input = (0, import_react11.forwardRef)(
+var Input = (0, import_react12.forwardRef)(
   ({
     className,
     style,
@@ -1102,7 +1627,7 @@ var Input = (0, import_react11.forwardRef)(
       defaultValue,
       onChange: onValueChange
     });
-    const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react12.useState)(false);
     const config = sizeConfig2[size];
     const handleChange = (e) => {
       setValue(e.target.value);
@@ -1189,9 +1714,9 @@ var Input = (0, import_react11.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/Textarea.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Textarea = (0, import_react12.forwardRef)(
+var Textarea = (0, import_react13.forwardRef)(
   ({
     className,
     style,
@@ -1209,7 +1734,7 @@ var Textarea = (0, import_react12.forwardRef)(
       defaultValue,
       onChange: onValueChange
     });
-    const [isFocused, setIsFocused] = (0, import_react12.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react13.useState)(false);
     const handleChange = (e) => {
       setValue(e.target.value);
     };
@@ -1262,13 +1787,13 @@ var Textarea = (0, import_react12.forwardRef)(
 Textarea.displayName = "Textarea";
 
 // src/components/SearchField.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m21 21-4.35-4.35" })
 ] });
-var SearchField = (0, import_react13.forwardRef)(
+var SearchField = (0, import_react14.forwardRef)(
   ({ placeholder = "Search", clearable = true, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Input,
@@ -1286,14 +1811,14 @@ var SearchField = (0, import_react13.forwardRef)(
 SearchField.displayName = "SearchField";
 
 // src/components/Select.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/hooks/use-id.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var idCounter = 0;
 function useId(providedId) {
-  const reactId = (0, import_react14.useId)();
+  const reactId = (0, import_react15.useId)();
   if (providedId) {
     return providedId;
   }
@@ -1307,7 +1832,7 @@ var sizeConfig3 = {
   md: { height: 40, padding: "0 14px", fontSize: 14, borderRadius: 20 },
   lg: { height: 48, padding: "0 18px", fontSize: 16, borderRadius: 24 }
 };
-var Select = (0, import_react15.forwardRef)(
+var Select = (0, import_react16.forwardRef)(
   ({
     className,
     style,
@@ -1327,23 +1852,23 @@ var Select = (0, import_react15.forwardRef)(
       defaultValue,
       onChange: onValueChange
     });
-    const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
-    const [focusedIndex, setFocusedIndex] = (0, import_react15.useState)(-1);
-    const triggerRef = (0, import_react15.useRef)(null);
-    const menuRef = (0, import_react15.useRef)(null);
+    const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+    const [focusedIndex, setFocusedIndex] = (0, import_react16.useState)(-1);
+    const triggerRef = (0, import_react16.useRef)(null);
+    const menuRef = (0, import_react16.useRef)(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 = (0, import_react15.useCallback)(() => {
+    const updateMenuPosition = (0, import_react16.useCallback)(() => {
       if (!triggerRef.current || !menuRef.current) return;
       const rect = triggerRef.current.getBoundingClientRect();
       menuRef.current.style.top = `${rect.bottom + window.scrollY + 4}px`;
       menuRef.current.style.left = `${rect.left + window.scrollX}px`;
       menuRef.current.style.width = `${rect.width}px`;
     }, []);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (isOpen) {
         updateMenuPosition();
         window.addEventListener("scroll", updateMenuPosition, true);
@@ -1354,7 +1879,7 @@ var Select = (0, import_react15.forwardRef)(
         window.removeEventListener("resize", updateMenuPosition);
       };
     }, [isOpen, updateMenuPosition]);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (!isOpen) return;
       const handleClickOutside = (e) => {
         if (triggerRef.current?.contains(e.target) || menuRef.current?.contains(e.target)) {
@@ -1515,14 +2040,14 @@ var Select = (0, import_react15.forwardRef)(
 Select.displayName = "Select";
 
 // src/components/Checkbox.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var sizeConfig4 = {
   sm: { size: 16, iconSize: 10, borderRadius: 4 },
   md: { size: 20, iconSize: 12, borderRadius: 5 },
   lg: { size: 24, iconSize: 14, borderRadius: 6 }
 };
-var Checkbox = (0, import_react16.forwardRef)(
+var Checkbox = (0, import_react17.forwardRef)(
   ({
     className,
     style,
@@ -1609,9 +2134,9 @@ var Checkbox = (0, import_react16.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Radio.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react17.createContext)(null);
+var RadioGroupContext = (0, import_react18.createContext)(null);
 function RadioGroup({
   children,
   name,
@@ -1658,7 +2183,7 @@ var sizeConfig5 = {
   md: { size: 20, dotSize: 8 },
   lg: { size: 24, dotSize: 10 }
 };
-var Radio = (0, import_react17.forwardRef)(
+var Radio = (0, import_react18.forwardRef)(
   ({
     className,
     style,
@@ -1668,7 +2193,7 @@ var Radio = (0, import_react17.forwardRef)(
     disabled: disabledProp,
     ...props
   }, ref) => {
-    const group = (0, import_react17.useContext)(RadioGroupContext);
+    const group = (0, import_react18.useContext)(RadioGroupContext);
     const size = sizeProp ?? group?.size ?? "md";
     const disabled = disabledProp ?? group?.disabled;
     const isChecked = group ? group.value === value : false;
@@ -1737,14 +2262,21 @@ var Radio = (0, import_react17.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Switch.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime13 = require("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 Switch = (0, import_react18.forwardRef)(
+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 = (0, import_react19.forwardRef)(
   ({
     className,
     style,
@@ -1754,93 +2286,152 @@ var Switch = (0, import_react18.forwardRef)(
     size = "md",
     disabled,
     ...props
-  }, ref) => {
+  }, forwardedRef) => {
     const [checked, setChecked] = useControllableBoolean({
       checked: controlledChecked,
       defaultChecked,
       onCheckedChange
     });
-    const [lift, setLift] = (0, import_react18.useState)(0);
+    const [lift, setLift] = (0, import_react19.useState)(0);
     const reducedMotion = useReducedMotion();
-    const config = sizeConfig6[size];
-    const { isPressed, pressHandlers } = usePressedState({
-      disabled,
-      onPressStart: () => !reducedMotion && setLift(1),
-      onPressEnd: () => setLift(0)
+    const rootRef = (0, import_react19.useRef)(null);
+    const thumbRef = (0, import_react19.useRef)(null);
+    const gestureRef = (0, import_react19.useRef)(null);
+    (0, import_react19.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__ */ (0, import_jsx_runtime13.jsxs)(
       "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__ */ (0, import_jsx_runtime13.jsx)(
             "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__ */ (0, import_jsx_runtime13.jsx)(
-            "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__ */ (0, import_jsx_runtime13.jsx)(
                 "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__ */ (0, import_jsx_runtime13.jsx)(
+                    "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__ */ (0, import_jsx_runtime13.jsx)("span", { ref: thumbRef, "aria-hidden": true, style: thumbStyles, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "inherit",
+                backgroundColor: "#fff",
+                opacity: 1 - lift * 0.85
+              }
+            }
+          ) })
         ]
       }
     );
@@ -1849,10 +2440,10 @@ var Switch = (0, import_react18.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Slider.tsx
-var import_react19 = require("react");
+var import_react20 = require("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) {
@@ -1889,7 +2480,14 @@ function isBrowser() {
 
 // src/components/Slider.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Slider = (0, import_react19.forwardRef)(
+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 = (0, import_react20.forwardRef)(
   ({
     className,
     style,
@@ -1909,19 +2507,30 @@ var Slider = (0, import_react19.forwardRef)(
       defaultValue,
       onChange: onValueChange
     });
-    const [lift, setLift] = (0, import_react19.useState)(0);
-    const [isDragging, setIsDragging] = (0, import_react19.useState)(false);
+    const [lift, setLift] = (0, import_react20.useState)(0);
+    const [isDragging, setIsDragging] = (0, import_react20.useState)(false);
     const reducedMotion = useReducedMotion();
-    const trackRef = (0, import_react19.useRef)(null);
+    const thumbRef = (0, import_react20.useRef)(null);
     const currentValue = value ?? defaultValue;
     const progress = mapRange(currentValue, min, max, 0, 1);
-    const handlePointerDown = (0, import_react19.useCallback)((e) => {
-      if (disabled) return;
-      setIsDragging(true);
-      if (!reducedMotion) setLift(1);
-      e.target.setPointerCapture(e.pointerId);
-    }, [disabled, reducedMotion]);
-    const handlePointerUp = (0, import_react19.useCallback)(() => {
+    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 = (0, import_react20.useCallback)(
+      (e) => {
+        if (disabled) return;
+        setIsDragging(true);
+        if (!reducedMotion) setLift(1);
+        e.target.setPointerCapture(e.pointerId);
+      },
+      [disabled, reducedMotion]
+    );
+    const handlePointerUp = (0, import_react20.useCallback)(() => {
       setIsDragging(false);
       setLift(0);
     }, []);
@@ -1929,75 +2538,64 @@ var Slider = (0, import_react19.forwardRef)(
       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__ */ (0, import_jsx_runtime14.jsxs)(
       "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__ */ (0, import_jsx_runtime14.jsx)(
             "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__ */ (0, import_jsx_runtime14.jsx)(
-            "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__ */ (0, import_jsx_runtime14.jsx)(
-            "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__ */ (0, import_jsx_runtime14.jsx)(
                 "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__ */ (0, import_jsx_runtime14.jsx)("div", { ref: thumbRef, "aria-hidden": true, style: thumbStyles, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "inherit",
+                backgroundColor: "#fff",
+                opacity: 1 - lift * 0.85
+              }
+            }
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
@@ -2024,7 +2622,7 @@ var Slider = (0, import_react19.forwardRef)(
           showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "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,
@@ -2042,9 +2640,9 @@ var Slider = (0, import_react19.forwardRef)(
 Slider.displayName = "Slider";
 
 // src/components/TabBar.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var TabBar = (0, import_react20.forwardRef)(
+var TabBar = (0, import_react21.forwardRef)(
   ({
     className,
     style,
@@ -2062,13 +2660,31 @@ var TabBar = (0, import_react20.forwardRef)(
       defaultValue: defaultValue ?? items[0]?.value ?? null,
       onChange: onValueChange
     });
-    const [lift, setLift] = (0, import_react20.useState)(0);
+    const [lift, setLift] = (0, import_react21.useState)(0);
     const reducedMotion = useReducedMotion();
+    const containerRef = (0, import_react21.useRef)(null);
+    const lensRef = (0, import_react21.useRef)(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);
     };
@@ -2078,45 +2694,47 @@ var TabBar = (0, import_react20.forwardRef)(
     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__ */ (0, import_jsx_runtime15.jsxs)(
       "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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "lg-glass", style: lensStyles }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative flex z-10", children: items.map((item) => {
+          selectedIndex >= 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: lensRef, "aria-hidden": true, style: lensStyles }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative flex z-[1]", children: items.map((item) => {
             const isSelected = item.value === value;
             const TabElement = item.href && LinkComponent ? LinkComponent : "button";
             return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -2125,6 +2743,7 @@ var TabBar = (0, import_react20.forwardRef)(
                 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",
@@ -2153,14 +2772,14 @@ var TabBar = (0, import_react20.forwardRef)(
 TabBar.displayName = "TabBar";
 
 // src/components/SegmentedControl.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime16 = require("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 }
 };
-var SegmentedControl = (0, import_react21.forwardRef)(
+var SegmentedControl = (0, import_react22.forwardRef)(
   ({
     className,
     style,
@@ -2177,9 +2796,9 @@ var SegmentedControl = (0, import_react21.forwardRef)(
       defaultValue: defaultValue ?? items[0]?.value ?? null,
       onChange: onValueChange
     });
-    const [lift, setLift] = (0, import_react21.useState)(0);
+    const [lift, setLift] = (0, import_react22.useState)(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;
@@ -2268,10 +2887,10 @@ var SegmentedControl = (0, import_react21.forwardRef)(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/Tabs.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsContext = (0, import_react22.createContext)(null);
-var Tabs = (0, import_react22.forwardRef)(
+var TabsContext = (0, import_react23.createContext)(null);
+var Tabs = (0, import_react23.forwardRef)(
   ({
     className,
     value: controlledValue,
@@ -2302,7 +2921,7 @@ var Tabs = (0, import_react22.forwardRef)(
   }
 );
 Tabs.displayName = "Tabs";
-var TabsList = (0, import_react22.forwardRef)(
+var TabsList = (0, import_react23.forwardRef)(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
@@ -2320,9 +2939,9 @@ var TabsList = (0, import_react22.forwardRef)(
   }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = (0, import_react22.forwardRef)(
+var TabsTrigger = (0, import_react23.forwardRef)(
   ({ className, value, disabled = false, children, ...props }, ref) => {
-    const context = (0, import_react22.useContext)(TabsContext);
+    const context = (0, import_react23.useContext)(TabsContext);
     if (!context) throw new Error("TabsTrigger must be used within Tabs");
     const { value: selectedValue, onChange, baseId } = context;
     const isSelected = selectedValue === value;
@@ -2356,9 +2975,9 @@ var TabsTrigger = (0, import_react22.forwardRef)(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = (0, import_react22.forwardRef)(
+var TabsContent = (0, import_react23.forwardRef)(
   ({ className, value, children, ...props }, ref) => {
-    const context = (0, import_react22.useContext)(TabsContext);
+    const context = (0, import_react23.useContext)(TabsContext);
     if (!context) throw new Error("TabsContent must be used within Tabs");
     const { value: selectedValue, baseId } = context;
     const isSelected = selectedValue === value;
@@ -2386,9 +3005,9 @@ var TabsContent = (0, import_react22.forwardRef)(
 TabsContent.displayName = "TabsContent";
 
 // src/components/Navbar.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Navbar = (0, import_react23.forwardRef)(
+var Navbar = (0, import_react24.forwardRef)(
   ({
     className,
     style,
@@ -2423,7 +3042,7 @@ var Navbar = (0, import_react23.forwardRef)(
   }
 );
 Navbar.displayName = "Navbar";
-var NavbarLink = (0, import_react23.forwardRef)(
+var NavbarLink = (0, import_react24.forwardRef)(
   ({ className, href, active = false, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "a",
@@ -2446,24 +3065,24 @@ var NavbarLink = (0, import_react23.forwardRef)(
 NavbarLink.displayName = "NavbarLink";
 
 // src/components/Sidebar.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react24.createContext)(null);
+var SidebarContext = (0, import_react25.createContext)(null);
 function useSidebar() {
-  const context = (0, import_react24.useContext)(SidebarContext);
+  const context = (0, import_react25.useContext)(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider");
   }
   return context;
 }
 function SidebarProvider({ children, defaultCollapsed = false }) {
-  const [isCollapsed, setCollapsed] = (0, import_react24.useState)(defaultCollapsed);
-  const toggleCollapsed = (0, import_react24.useCallback)(() => {
+  const [isCollapsed, setCollapsed] = (0, import_react25.useState)(defaultCollapsed);
+  const toggleCollapsed = (0, import_react25.useCallback)(() => {
     setCollapsed((prev) => !prev);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SidebarContext.Provider, { value: { isCollapsed, toggleCollapsed, setCollapsed }, children });
 }
-var Sidebar = (0, import_react24.forwardRef)(
+var Sidebar = (0, import_react25.forwardRef)(
   ({
     className,
     style,
@@ -2496,7 +3115,7 @@ var Sidebar = (0, import_react24.forwardRef)(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = (0, import_react24.forwardRef)(
+var SidebarHeader = (0, import_react25.forwardRef)(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
@@ -2514,7 +3133,7 @@ var SidebarHeader = (0, import_react24.forwardRef)(
   }
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = (0, import_react24.forwardRef)(
+var SidebarContent = (0, import_react25.forwardRef)(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
@@ -2528,7 +3147,7 @@ var SidebarContent = (0, import_react24.forwardRef)(
   }
 );
 SidebarContent.displayName = "SidebarContent";
-var SidebarItem = (0, import_react24.forwardRef)(
+var SidebarItem = (0, import_react25.forwardRef)(
   ({ className, icon, label, active = false, href, onClick, ...props }, ref) => {
     const { isCollapsed } = useSidebar();
     const sharedProps = {
@@ -2553,7 +3172,7 @@ var SidebarItem = (0, import_react24.forwardRef)(
   }
 );
 SidebarItem.displayName = "SidebarItem";
-var SidebarGroup = (0, import_react24.forwardRef)(
+var SidebarGroup = (0, import_react25.forwardRef)(
   ({ className, title, children, ...props }, ref) => {
     const { isCollapsed } = useSidebar();
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref, className: cn("mb-4", className), ...props, children: [
@@ -2565,20 +3184,20 @@ var SidebarGroup = (0, import_react24.forwardRef)(
 SidebarGroup.displayName = "SidebarGroup";
 
 // src/components/Dock.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Dock = (0, import_react25.forwardRef)(
+var Dock = (0, import_react26.forwardRef)(
   ({
     className,
     style,
     items,
     magnification = 1.5,
-    distance = 100,
+    distance: distance2 = 100,
     direction = "bottom",
     ...props
   }, ref) => {
-    const [mouseX, setMouseX] = (0, import_react25.useState)(null);
-    const containerRef = (0, import_react25.useRef)(null);
+    const [mouseX, setMouseX] = (0, import_react26.useState)(null);
+    const containerRef = (0, import_react26.useRef)(null);
     const reducedMotion = useReducedMotion();
     const handleMouseMove = (e) => {
       if (reducedMotion) return;
@@ -2598,8 +3217,8 @@ var Dock = (0, import_react25.forwardRef)(
       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";
@@ -2674,17 +3293,17 @@ var Dock = (0, import_react25.forwardRef)(
 Dock.displayName = "Dock";
 
 // src/components/Modal.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var sizeConfig8 = {
+var sizeConfig7 = {
   sm: { maxWidth: 400 },
   md: { maxWidth: 500 },
   lg: { maxWidth: 640 },
   xl: { maxWidth: 800 },
   full: { maxWidth: "90vw" }
 };
-var Modal = (0, import_react26.forwardRef)(
+var Modal = (0, import_react27.forwardRef)(
   ({
     className,
     style,
@@ -2697,12 +3316,17 @@ var Modal = (0, import_react26.forwardRef)(
     closeOnOverlayClick = true,
     closeOnEscape = true,
     showCloseButton = true,
+    disableRefraction = false,
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const modalRef = (0, import_react26.useRef)(null);
-    const config = sizeConfig8[size];
-    const handleClose = (0, import_react26.useCallback)(() => {
+    const localRef = (0, import_react27.useRef)(null);
+    const combinedRef = ref || localRef;
+    const config = sizeConfig7[size];
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(combinedRef, {
+      enabled: open && !disableRefraction && !reducedMotion
+    });
+    const handleClose = (0, import_react27.useCallback)(() => {
       onOpenChange(false);
     }, [onOpenChange]);
     const handleOverlayClick = (e) => {
@@ -2710,23 +3334,32 @@ var Modal = (0, import_react26.forwardRef)(
         handleClose();
       }
     };
-    const handleKeyDown = (0, import_react26.useCallback)((e) => {
+    const handleKeyDown = (0, import_react27.useCallback)((e) => {
       if (closeOnEscape && e.key === "Escape") {
         handleClose();
       }
     }, [closeOnEscape, handleClose]);
-    (0, import_react26.useEffect)(() => {
+    (0, import_react27.useEffect)(() => {
       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__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
@@ -2743,7 +3376,7 @@ var Modal = (0, import_react26.forwardRef)(
         children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
-            ref: ref || modalRef,
+            ref: combinedRef,
             tabIndex: -1,
             className: cn(
               "lg-glass lg-glass-elevated lg-text",
@@ -2751,11 +3384,7 @@ var Modal = (0, import_react26.forwardRef)(
               !reducedMotion && "animate-[lg-scale-in_200ms_var(--lg-ease-spring)]",
               className
             ),
-            style: {
-              maxWidth: config.maxWidth,
-              borderRadius: 24,
-              ...style
-            },
+            style: modalStyles,
             ...props,
             children: [
               showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -2804,7 +3433,7 @@ var Modal = (0, import_react26.forwardRef)(
   }
 );
 Modal.displayName = "Modal";
-var ModalFooter = (0, import_react26.forwardRef)(
+var ModalFooter = (0, import_react27.forwardRef)(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
@@ -2822,16 +3451,16 @@ var ModalFooter = (0, import_react26.forwardRef)(
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/Sheet.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var sizeConfig9 = {
+var sizeConfig8 = {
   sm: { width: 320, height: 300 },
   md: { width: 400, height: 400 },
   lg: { width: 500, height: 500 },
   full: { width: "100%", height: "85vh" }
 };
-var Sheet = (0, import_react27.forwardRef)(
+var Sheet = (0, import_react28.forwardRef)(
   ({
     className,
     style,
@@ -2841,12 +3470,17 @@ var Sheet = (0, import_react27.forwardRef)(
     side = "bottom",
     size = "md",
     showHandle = true,
+    disableRefraction = false,
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const sheetRef = (0, import_react27.useRef)(null);
-    const config = sizeConfig9[size];
-    const handleClose = (0, import_react27.useCallback)(() => {
+    const localRef = (0, import_react28.useRef)(null);
+    const combinedRef = ref || localRef;
+    const config = sizeConfig8[size];
+    const { filterUrl, rimGradient, isReady } = useGlisseEffect(combinedRef, {
+      enabled: open && !disableRefraction && !reducedMotion
+    });
+    const handleClose = (0, import_react28.useCallback)(() => {
       onOpenChange(false);
     }, [onOpenChange]);
     const handleOverlayClick = (e) => {
@@ -2854,12 +3488,12 @@ var Sheet = (0, import_react27.forwardRef)(
         handleClose();
       }
     };
-    const handleKeyDown = (0, import_react27.useCallback)((e) => {
+    const handleKeyDown = (0, import_react28.useCallback)((e) => {
       if (e.key === "Escape") {
         handleClose();
       }
     }, [handleClose]);
-    (0, import_react27.useEffect)(() => {
+    (0, import_react28.useEffect)(() => {
       if (open) {
         document.addEventListener("keydown", handleKeyDown);
         document.body.style.overflow = "hidden";
@@ -2870,7 +3504,6 @@ var Sheet = (0, import_react27.forwardRef)(
       };
     }, [open, handleKeyDown]);
     if (!open) return null;
-    const isHorizontal = side === "left" || side === "right";
     const sheetStyles = {
       position: "fixed",
       zIndex: 50,
@@ -2912,6 +3545,10 @@ var Sheet = (0, import_react27.forwardRef)(
       },
       ...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)]",
@@ -2932,7 +3569,7 @@ var Sheet = (0, import_react27.forwardRef)(
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
-            ref: ref || sheetRef,
+            ref: combinedRef,
             className: cn(
               "lg-glass lg-glass-elevated lg-text",
               "overflow-auto",
@@ -2960,10 +3597,10 @@ var Sheet = (0, import_react27.forwardRef)(
 Sheet.displayName = "Sheet";
 
 // src/components/Menu.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_dom4 = require("react-dom");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Menu = (0, import_react28.forwardRef)(
+var Menu = (0, import_react29.forwardRef)(
   ({
     className,
     items,
@@ -2972,10 +3609,10 @@ var Menu = (0, import_react28.forwardRef)(
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
-    const [position, setPosition] = (0, import_react28.useState)({ top: 0, left: 0 });
-    const triggerRef = (0, import_react28.useRef)(null);
-    const menuRef = (0, import_react28.useRef)(null);
+    const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
+    const [position, setPosition] = (0, import_react29.useState)({ top: 0, left: 0 });
+    const triggerRef = (0, import_react29.useRef)(null);
+    const menuRef = (0, import_react29.useRef)(null);
     const reducedMotion = useReducedMotion();
     const updatePosition = () => {
       if (!triggerRef.current || !menuRef.current) return;
@@ -2991,7 +3628,7 @@ var Menu = (0, import_react28.forwardRef)(
         left: left + window.scrollX
       });
     };
-    (0, import_react28.useEffect)(() => {
+    (0, import_react29.useEffect)(() => {
       if (isOpen) {
         updatePosition();
         const handleClickOutside = (e) => {
@@ -3094,7 +3731,7 @@ var Menu = (0, import_react28.forwardRef)(
 Menu.displayName = "Menu";
 
 // src/components/Tooltip.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_dom5 = require("react-dom");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function Tooltip({
@@ -3105,11 +3742,11 @@ function Tooltip({
   delay = 200,
   disabled = false
 }) {
-  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
-  const [position, setPosition] = (0, import_react29.useState)({ top: 0, left: 0 });
-  const triggerRef = (0, import_react29.useRef)(null);
-  const tooltipRef = (0, import_react29.useRef)(null);
-  const timeoutRef = (0, import_react29.useRef)();
+  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
+  const [position, setPosition] = (0, import_react30.useState)({ top: 0, left: 0 });
+  const triggerRef = (0, import_react30.useRef)(null);
+  const tooltipRef = (0, import_react30.useRef)(null);
+  const timeoutRef = (0, import_react30.useRef)();
   const reducedMotion = useReducedMotion();
   const updatePosition = () => {
     if (!triggerRef.current || !tooltipRef.current) return;
@@ -3149,7 +3786,7 @@ function Tooltip({
     }
     setPosition({ top: top + window.scrollY, left: left + window.scrollX });
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (isOpen) {
       updatePosition();
       window.addEventListener("scroll", updatePosition, true);
@@ -3168,8 +3805,8 @@ function Tooltip({
     clearTimeout(timeoutRef.current);
     setIsOpen(false);
   };
-  const child = (0, import_react29.isValidElement)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children });
-  const trigger = (0, import_react29.cloneElement)(child, {
+  const child = (0, import_react30.isValidElement)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children });
+  const trigger = (0, import_react30.cloneElement)(child, {
     ref: triggerRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -3204,7 +3841,7 @@ function Tooltip({
 }
 
 // src/components/Toast.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var variantIcons = {
@@ -3229,7 +3866,7 @@ var variantIcons = {
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] })
 };
-var Toast = (0, import_react30.forwardRef)(
+var Toast = (0, import_react31.forwardRef)(
   ({
     className,
     style,
@@ -3244,8 +3881,8 @@ var Toast = (0, import_react30.forwardRef)(
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const [isLeaving, setIsLeaving] = (0, import_react30.useState)(false);
-    (0, import_react30.useEffect)(() => {
+    const [isLeaving, setIsLeaving] = (0, import_react31.useState)(false);
+    (0, import_react31.useEffect)(() => {
       if (duration > 0) {
         const timer = setTimeout(() => {
           setIsLeaving(true);
@@ -3304,19 +3941,19 @@ var Toast = (0, import_react30.forwardRef)(
   }
 );
 Toast.displayName = "Toast";
-var ToastContext = (0, import_react30.createContext)(null);
+var ToastContext = (0, import_react31.createContext)(null);
 var toastId = 0;
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = (0, import_react30.useState)([]);
-  const toast = (0, import_react30.useCallback)((props) => {
+  const [toasts, setToasts] = (0, import_react31.useState)([]);
+  const toast = (0, import_react31.useCallback)((props) => {
     const id = `toast-${++toastId}`;
     setToasts((prev) => [...prev, { ...props, id }]);
     return id;
   }, []);
-  const dismiss = (0, import_react30.useCallback)((id) => {
+  const dismiss = (0, import_react31.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const dismissAll = (0, import_react30.useCallback)(() => {
+  const dismissAll = (0, import_react31.useCallback)(() => {
     setToasts([]);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ToastContext.Provider, { value: { toasts, toast, dismiss, dismissAll }, children: [
@@ -3328,7 +3965,7 @@ function ToastProvider({ children }) {
   ] });
 }
 function useToast() {
-  const context = (0, import_react30.useContext)(ToastContext);
+  const context = (0, import_react31.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -3337,7 +3974,7 @@ function useToast() {
 }
 
 // src/components/Alert.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var variantConfig = {
   default: {
@@ -3376,7 +4013,7 @@ var variantConfig = {
     borderColor: "var(--lg-destructive)"
   }
 };
-var Alert = (0, import_react31.forwardRef)(
+var Alert = (0, import_react32.forwardRef)(
   ({
     className,
     style,
@@ -3437,7 +4074,7 @@ var Alert = (0, import_react31.forwardRef)(
 Alert.displayName = "Alert";
 
 // src/components/Progress.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var linearSizeConfig = {
   sm: { height: 4, borderRadius: 2 },
@@ -3449,7 +4086,7 @@ var circularSizeConfig = {
   md: { size: 40, strokeWidth: 4 },
   lg: { size: 56, strokeWidth: 5 }
 };
-var Progress = (0, import_react32.forwardRef)(
+var Progress = (0, import_react33.forwardRef)(
   ({
     className,
     style,
@@ -3462,7 +4099,7 @@ var Progress = (0, import_react32.forwardRef)(
     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];
@@ -3594,14 +4231,14 @@ var Progress = (0, import_react32.forwardRef)(
 Progress.displayName = "Progress";
 
 // src/components/Spinner.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var sizeMap = {
   sm: 16,
   md: 24,
   lg: 32
 };
-var Spinner = (0, import_react33.forwardRef)(
+var Spinner = (0, import_react34.forwardRef)(
   ({
     className,
     style,
@@ -3668,7 +4305,7 @@ var Spinner = (0, import_react33.forwardRef)(
 Spinner.displayName = "Spinner";
 
 // src/components/Badge.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var variantStyles = {
   default: {
@@ -3698,12 +4335,12 @@ 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 }
 };
-var Badge = (0, import_react34.forwardRef)(
+var Badge = (0, import_react35.forwardRef)(
   ({
     className,
     style,
@@ -3714,7 +4351,7 @@ var Badge = (0, import_react34.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const config = sizeConfig10[size];
+    const config = sizeConfig9[size];
     const variantStyle = variantStyles[variant];
     if (dot) {
       return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -3762,9 +4399,9 @@ var Badge = (0, import_react34.forwardRef)(
 Badge.displayName = "Badge";
 
 // src/components/Avatar.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime30 = require("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 },
@@ -3780,7 +4417,7 @@ var statusColors = {
 function getInitials(name) {
   return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
 }
-var Avatar = (0, import_react35.forwardRef)(
+var Avatar = (0, import_react36.forwardRef)(
   ({
     className,
     style,
@@ -3792,8 +4429,8 @@ var Avatar = (0, import_react35.forwardRef)(
     status,
     ...props
   }, ref) => {
-    const [imageError, setImageError] = (0, import_react35.useState)(false);
-    const config = sizeConfig11[size];
+    const [imageError, setImageError] = (0, import_react36.useState)(false);
+    const config = sizeConfig10[size];
     const showFallback = !src || imageError;
     const avatarStyles = {
       width: config.size,
@@ -3848,14 +4485,14 @@ var Avatar = (0, import_react35.forwardRef)(
 Avatar.displayName = "Avatar";
 
 // src/components/Chip.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime31 = require("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 }
 };
-var Chip = (0, import_react36.forwardRef)(
+var Chip = (0, import_react37.forwardRef)(
   ({
     className,
     style,
@@ -3870,7 +4507,7 @@ var Chip = (0, import_react36.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const config = sizeConfig12[size];
+    const config = sizeConfig11[size];
     const isClickable = !!onClick;
     const chipStyles = {
       height: config.height,
@@ -3947,10 +4584,10 @@ var Chip = (0, import_react36.forwardRef)(
 Chip.displayName = "Chip";
 
 // src/components/Accordion.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var AccordionContext = (0, import_react37.createContext)(null);
-var Accordion = (0, import_react37.forwardRef)(
+var AccordionContext = (0, import_react38.createContext)(null);
+var Accordion = (0, import_react38.forwardRef)(
   ({
     className,
     type = "single",
@@ -3959,13 +4596,13 @@ var Accordion = (0, import_react37.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const [expandedItems, setExpandedItems] = (0, import_react37.useState)(() => {
+    const [expandedItems, setExpandedItems] = (0, import_react38.useState)(() => {
       if (defaultValue) {
         return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
       }
       return [];
     });
-    const toggleItem = (0, import_react37.useCallback)((value) => {
+    const toggleItem = (0, import_react38.useCallback)((value) => {
       setExpandedItems((prev) => {
         const isExpanded = prev.includes(value);
         if (type === "single") {
@@ -3991,10 +4628,10 @@ var Accordion = (0, import_react37.forwardRef)(
   }
 );
 Accordion.displayName = "Accordion";
-var AccordionItemContext = (0, import_react37.createContext)(null);
-var AccordionItem = (0, import_react37.forwardRef)(
+var AccordionItemContext = (0, import_react38.createContext)(null);
+var AccordionItem = (0, import_react38.forwardRef)(
   ({ className, value, disabled = false, children, ...props }, ref) => {
-    const context = (0, import_react37.useContext)(AccordionContext);
+    const context = (0, import_react38.useContext)(AccordionContext);
     if (!context) throw new Error("AccordionItem must be used within Accordion");
     const isExpanded = context.expandedItems.includes(value);
     const id = useId();
@@ -4018,10 +4655,10 @@ var AccordionItem = (0, import_react37.forwardRef)(
   }
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = (0, import_react37.forwardRef)(
+var AccordionTrigger = (0, import_react38.forwardRef)(
   ({ className, children, ...props }, ref) => {
-    const accordionContext = (0, import_react37.useContext)(AccordionContext);
-    const itemContext = (0, import_react37.useContext)(AccordionItemContext);
+    const accordionContext = (0, import_react38.useContext)(AccordionContext);
+    const itemContext = (0, import_react38.useContext)(AccordionItemContext);
     const reducedMotion = useReducedMotion();
     if (!accordionContext || !itemContext) {
       throw new Error("AccordionTrigger must be used within AccordionItem");
@@ -4073,9 +4710,9 @@ var AccordionTrigger = (0, import_react37.forwardRef)(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = (0, import_react37.forwardRef)(
+var AccordionContent = (0, import_react38.forwardRef)(
   ({ className, children, ...props }, ref) => {
-    const itemContext = (0, import_react37.useContext)(AccordionItemContext);
+    const itemContext = (0, import_react38.useContext)(AccordionItemContext);
     const reducedMotion = useReducedMotion();
     if (!itemContext) {
       throw new Error("AccordionContent must be used within AccordionItem");
@@ -4104,9 +4741,9 @@ var AccordionContent = (0, import_react37.forwardRef)(
 AccordionContent.displayName = "AccordionContent";
 
 // src/components/Separator.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Separator = (0, import_react38.forwardRef)(
+var Separator = (0, import_react39.forwardRef)(
   ({
     className,
     orientation = "horizontal",
@@ -4132,9 +4769,9 @@ var Separator = (0, import_react38.forwardRef)(
 Separator.displayName = "Separator";
 
 // src/components/Skeleton.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Skeleton = (0, import_react39.forwardRef)(
+var Skeleton = (0, import_react40.forwardRef)(
   ({
     className,
     style,
@@ -4178,16 +4815,16 @@ var Skeleton = (0, import_react39.forwardRef)(
 Skeleton.displayName = "Skeleton";
 
 // src/components/Drawer.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_react_dom7 = require("react-dom");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var sizeConfig13 = {
+var sizeConfig12 = {
   sm: 280,
   md: 320,
   lg: 400,
   xl: 500
 };
-var Drawer = (0, import_react40.forwardRef)(
+var Drawer = (0, import_react41.forwardRef)(
   ({
     className,
     style,
@@ -4204,11 +4841,11 @@ var Drawer = (0, import_react40.forwardRef)(
     ...props
   }, ref) => {
     const reducedMotion = useReducedMotion();
-    const drawerRef = (0, import_react40.useRef)(null);
+    const drawerRef = (0, import_react41.useRef)(null);
     const titleId = useId();
     const descId = useId();
-    const width = sizeConfig13[size];
-    const handleClose = (0, import_react40.useCallback)(() => {
+    const width = sizeConfig12[size];
+    const handleClose = (0, import_react41.useCallback)(() => {
       onOpenChange(false);
     }, [onOpenChange]);
     const handleOverlayClick = (e) => {
@@ -4216,12 +4853,12 @@ var Drawer = (0, import_react40.forwardRef)(
         handleClose();
       }
     };
-    const handleKeyDown = (0, import_react40.useCallback)((e) => {
+    const handleKeyDown = (0, import_react41.useCallback)((e) => {
       if (closeOnEscape && e.key === "Escape") {
         handleClose();
       }
     }, [closeOnEscape, handleClose]);
-    (0, import_react40.useEffect)(() => {
+    (0, import_react41.useEffect)(() => {
       if (open) {
         document.addEventListener("keydown", handleKeyDown);
         document.body.style.overflow = "hidden";
@@ -4318,7 +4955,7 @@ var Drawer = (0, import_react40.forwardRef)(
 Drawer.displayName = "Drawer";
 
 // src/components/Popover.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function Popover({
@@ -4334,15 +4971,15 @@ function Popover({
   closeOnEscape = true,
   trigger = "click"
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react41.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react42.useState)(defaultOpen);
   const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
   const setOpen = controlledOpen !== void 0 ? onOpenChange : setInternalOpen;
-  const [position, setPosition] = (0, import_react41.useState)({ top: 0, left: 0 });
-  const triggerRef = (0, import_react41.useRef)(null);
-  const popoverRef = (0, import_react41.useRef)(null);
+  const [position, setPosition] = (0, import_react42.useState)({ top: 0, left: 0 });
+  const triggerRef = (0, import_react42.useRef)(null);
+  const popoverRef = (0, import_react42.useRef)(null);
   const reducedMotion = useReducedMotion();
   const popoverId = useId();
-  const updatePosition = (0, import_react41.useCallback)(() => {
+  const updatePosition = (0, import_react42.useCallback)(() => {
     if (!triggerRef.current || !popoverRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popoverRect = popoverRef.current.getBoundingClientRect();
@@ -4381,7 +5018,7 @@ function Popover({
     top = Math.max(8, Math.min(top, window.innerHeight - popoverRect.height - 8));
     setPosition({ top: top + window.scrollY, left: left + window.scrollX });
   }, [side, align, sideOffset]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (open) {
       updatePosition();
       window.addEventListener("scroll", updatePosition, true);
@@ -4392,7 +5029,7 @@ function Popover({
       window.removeEventListener("resize", updatePosition);
     };
   }, [open, updatePosition]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       if (closeOnClickOutside && !triggerRef.current?.contains(e.target) && !popoverRef.current?.contains(e.target)) {
@@ -4433,8 +5070,8 @@ function Popover({
       setOpen(false);
     }
   };
-  const child = (0, import_react41.isValidElement)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children });
-  const triggerElement = (0, import_react41.cloneElement)(child, {
+  const child = (0, import_react42.isValidElement)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children });
+  const triggerElement = (0, import_react42.cloneElement)(child, {
     ref: triggerRef,
     onClick: handleTriggerClick,
     onKeyDown: handleTriggerKeyDown,
@@ -4476,7 +5113,7 @@ function Popover({
 }
 
 // src/components/ContextMenu.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_react_dom9 = require("react-dom");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function ContextMenu({
@@ -4485,14 +5122,14 @@ function ContextMenu({
   disabled = false,
   onOpenChange
 }) {
-  const [open, setOpen] = (0, import_react42.useState)(false);
-  const [position, setPosition] = (0, import_react42.useState)({ x: 0, y: 0 });
-  const [focusedIndex, setFocusedIndex] = (0, import_react42.useState)(-1);
-  const menuRef = (0, import_react42.useRef)(null);
-  const triggerRef = (0, import_react42.useRef)(null);
+  const [open, setOpen] = (0, import_react43.useState)(false);
+  const [position, setPosition] = (0, import_react43.useState)({ x: 0, y: 0 });
+  const [focusedIndex, setFocusedIndex] = (0, import_react43.useState)(-1);
+  const menuRef = (0, import_react43.useRef)(null);
+  const triggerRef = (0, import_react43.useRef)(null);
   const reducedMotion = useReducedMotion();
   const menuId = useId();
-  const handleOpenChange = (0, import_react42.useCallback)((isOpen) => {
+  const handleOpenChange = (0, import_react43.useCallback)((isOpen) => {
     setOpen(isOpen);
     onOpenChange?.(isOpen);
     if (!isOpen) {
@@ -4520,7 +5157,7 @@ function ContextMenu({
     item.onSelect?.();
     handleOpenChange(false);
   };
-  const handleKeyDown = (0, import_react42.useCallback)((e) => {
+  const handleKeyDown = (0, import_react43.useCallback)((e) => {
     if (!open) return;
     const selectableItems = items.filter((item) => item !== "separator" && !item.disabled);
     switch (e.key) {
@@ -4551,7 +5188,7 @@ function ContextMenu({
         break;
     }
   }, [open, items, focusedIndex, handleOpenChange]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (open) {
       document.addEventListener("keydown", handleKeyDown);
       const handleClickOutside = (e) => {
@@ -4567,8 +5204,8 @@ function ContextMenu({
       };
     }
   }, [open, handleKeyDown, handleOpenChange]);
-  const child = (0, import_react42.isValidElement)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children });
-  const triggerElement = (0, import_react42.cloneElement)(child, {
+  const child = (0, import_react43.isValidElement)(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children });
+  const triggerElement = (0, import_react43.cloneElement)(child, {
     ref: triggerRef,
     onContextMenu: handleContextMenu
   });
@@ -4648,7 +5285,7 @@ function ContextMenu({
 }
 
 // src/components/CommandPalette.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_react_dom10 = require("react-dom");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function CommandPalette({
@@ -4659,14 +5296,14 @@ function CommandPalette({
   emptyMessage = "No results found.",
   groups = {}
 }) {
-  const [query, setQuery] = (0, import_react43.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react43.useState)(0);
-  const inputRef = (0, import_react43.useRef)(null);
-  const listRef = (0, import_react43.useRef)(null);
+  const [query, setQuery] = (0, import_react44.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_react44.useState)(0);
+  const inputRef = (0, import_react44.useRef)(null);
+  const listRef = (0, import_react44.useRef)(null);
   const reducedMotion = useReducedMotion();
   const dialogId = useId();
   const listboxId = useId();
-  const filteredItems = (0, import_react43.useMemo)(() => {
+  const filteredItems = (0, import_react44.useMemo)(() => {
     if (!query.trim()) return items.filter((item) => !item.disabled);
     const lowerQuery = query.toLowerCase();
     return items.filter((item) => {
@@ -4677,7 +5314,7 @@ function CommandPalette({
       return matchLabel || matchDesc || matchKeywords;
     });
   }, [items, query]);
-  const groupedItems = (0, import_react43.useMemo)(() => {
+  const groupedItems = (0, import_react44.useMemo)(() => {
     const grouped = {};
     filteredItems.forEach((item) => {
       const group = item.group || "_default";
@@ -4686,19 +5323,19 @@ function CommandPalette({
     });
     return grouped;
   }, [filteredItems]);
-  const flattenedItems = (0, import_react43.useMemo)(() => {
+  const flattenedItems = (0, import_react44.useMemo)(() => {
     return Object.values(groupedItems).flat();
   }, [groupedItems]);
-  const handleClose = (0, import_react43.useCallback)(() => {
+  const handleClose = (0, import_react44.useCallback)(() => {
     onOpenChange(false);
     setQuery("");
     setSelectedIndex(0);
   }, [onOpenChange]);
-  const handleSelect = (0, import_react43.useCallback)((item) => {
+  const handleSelect = (0, import_react44.useCallback)((item) => {
     item.onSelect();
     handleClose();
   }, [handleClose]);
-  const handleKeyDown = (0, import_react43.useCallback)((e) => {
+  const handleKeyDown = (0, import_react44.useCallback)((e) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
@@ -4724,7 +5361,7 @@ function CommandPalette({
         break;
     }
   }, [flattenedItems, selectedIndex, handleSelect, handleClose]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (open) {
       inputRef.current?.focus();
       const handleGlobalKeyDown = (e) => {
@@ -4740,10 +5377,10 @@ function CommandPalette({
       };
     }
   }, [open, handleClose]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     setSelectedIndex(0);
   }, [query]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const selectedElement = listRef.current?.querySelector('[data-selected="true"]');
     selectedElement?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
@@ -4752,7 +5389,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]"
       ),
@@ -4765,13 +5403,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__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-[var(--lg-separator)]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "var(--lg-muted)", strokeWidth: "2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "var(--lg-muted)", strokeWidth: "2", "aria-hidden": true, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "m21 21-4.35-4.35" })
               ] }),
@@ -4779,7 +5418,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,
@@ -4789,13 +5432,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__ */ (0, import_jsx_runtime38.jsx)("kbd", { className: "px-2 py-0.5 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)]", children: "ESC" })
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                "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__ */ (0, import_jsx_runtime38.jsx)(
+                    "kbd",
+                    {
+                      className: "px-2 py-1 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)] pointer-events-none",
+                      children: "ESC"
+                    }
+                  )
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "div",
@@ -4803,7 +5462,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__ */ (0, import_jsx_runtime38.jsx)("div", { className: "px-4 py-8 text-center text-sm text-[var(--lg-muted)]", children: emptyMessage }) : Object.entries(groupedItems).map(([group, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
                   group !== "_default" && groups[group] && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "px-3 py-2 text-xs font-medium text-[var(--lg-muted)] uppercase tracking-wider", children: groups[group] }),
                   groupItems.map((item) => {
@@ -4818,18 +5478,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__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex-shrink-0 w-5 h-5 text-[var(--lg-muted)]", children: item.icon }),
                           /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex-1 min-w-0", children: [
                             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-sm font-medium", style: { color: "var(--lg-foreground)" }, children: item.label }),
                             item.description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-xs text-[var(--lg-muted)] truncate", children: item.description })
                           ] }),
-                          item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("kbd", { className: "px-2 py-0.5 text-xs rounded bg-[var(--lg-glass)] text-[var(--lg-muted)]", children: item.shortcut })
+                          item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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
@@ -4847,9 +5508,9 @@ function CommandPalette({
 }
 
 // src/components/Carousel.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Carousel = (0, import_react44.forwardRef)(
+var Carousel = (0, import_react45.forwardRef)(
   ({
     className,
     style,
@@ -4863,15 +5524,15 @@ var Carousel = (0, import_react44.forwardRef)(
     gap = 16,
     ...props
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = (0, import_react44.useState)(0);
-    const [isHovered, setIsHovered] = (0, import_react44.useState)(false);
-    const containerRef = (0, import_react44.useRef)(null);
+    const [currentIndex, setCurrentIndex] = (0, import_react45.useState)(0);
+    const [isHovered, setIsHovered] = (0, import_react45.useState)(false);
+    const containerRef = (0, import_react45.useRef)(null);
     const reducedMotion = useReducedMotion();
     const carouselId = useId();
-    const slides = import_react44.Children.toArray(children);
+    const slides = import_react45.Children.toArray(children);
     const totalSlides = slides.length;
     const maxIndex = Math.max(0, totalSlides - slidesToShow);
-    const goToSlide = (0, import_react44.useCallback)((index) => {
+    const goToSlide = (0, import_react45.useCallback)((index) => {
       if (loop) {
         if (index < 0) index = maxIndex;
         if (index > maxIndex) index = 0;
@@ -4880,13 +5541,13 @@ var Carousel = (0, import_react44.forwardRef)(
       }
       setCurrentIndex(index);
     }, [loop, maxIndex]);
-    const goToPrevious = (0, import_react44.useCallback)(() => {
+    const goToPrevious = (0, import_react45.useCallback)(() => {
       goToSlide(currentIndex - 1);
     }, [currentIndex, goToSlide]);
-    const goToNext = (0, import_react44.useCallback)(() => {
+    const goToNext = (0, import_react45.useCallback)(() => {
       goToSlide(currentIndex + 1);
     }, [currentIndex, goToSlide]);
-    (0, import_react44.useEffect)(() => {
+    (0, import_react45.useEffect)(() => {
       if (autoPlay && !isHovered && !reducedMotion) {
         const timer = setInterval(goToNext, autoPlayInterval);
         return () => clearInterval(timer);
@@ -5029,9 +5690,9 @@ var Carousel = (0, import_react44.forwardRef)(
 Carousel.displayName = "Carousel";
 
 // src/components/FloatingActionButton.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var sizeConfig14 = {
+var sizeConfig13 = {
   sm: { size: 40, iconSize: 20 },
   md: { size: 56, iconSize: 24 },
   lg: { size: 72, iconSize: 32 }
@@ -5043,7 +5704,7 @@ var positionStyles = {
   "top-right": { top: 24, right: 24 },
   "top-left": { top: 24, left: 24 }
 };
-var FloatingActionButton = (0, import_react45.forwardRef)(
+var FloatingActionButton = (0, import_react46.forwardRef)(
   ({
     className,
     style,
@@ -5056,10 +5717,10 @@ var FloatingActionButton = (0, import_react45.forwardRef)(
     disabled,
     ...props
   }, ref) => {
-    const [isHovered, setIsHovered] = (0, import_react45.useState)(false);
+    const [isHovered, setIsHovered] = (0, import_react46.useState)(false);
     const { isPressed, pressHandlers } = usePressedState({ disabled });
     const reducedMotion = useReducedMotion();
-    const config = sizeConfig14[size];
+    const config = sizeConfig13[size];
     const fabStyles = {
       position: "fixed",
       zIndex: 40,
@@ -5118,7 +5779,7 @@ var FloatingActionButton = (0, import_react45.forwardRef)(
 FloatingActionButton.displayName = "FloatingActionButton";
 
 // src/components/DatePicker.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_react_dom11 = require("react-dom");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -5138,7 +5799,7 @@ function isDateDisabled(date, minDate, maxDate) {
   if (maxDate && date > maxDate) return true;
   return false;
 }
-var DatePicker = (0, import_react46.forwardRef)(
+var DatePicker = (0, import_react47.forwardRef)(
   ({
     className,
     style,
@@ -5153,17 +5814,17 @@ var DatePicker = (0, import_react46.forwardRef)(
     formatDate = (date) => date.toLocaleDateString(locale, { year: "numeric", month: "long", day: "numeric" }),
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = (0, import_react46.useState)(defaultValue || null);
+    const [internalValue, setInternalValue] = (0, import_react47.useState)(defaultValue || null);
     const value = controlledValue !== void 0 ? controlledValue : internalValue;
-    const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
-    const [viewDate, setViewDate] = (0, import_react46.useState)(() => value || /* @__PURE__ */ new Date());
-    const [focusedDate, setFocusedDate] = (0, import_react46.useState)(null);
-    const triggerRef = (0, import_react46.useRef)(null);
-    const calendarRef = (0, import_react46.useRef)(null);
+    const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
+    const [viewDate, setViewDate] = (0, import_react47.useState)(() => value || /* @__PURE__ */ new Date());
+    const [focusedDate, setFocusedDate] = (0, import_react47.useState)(null);
+    const triggerRef = (0, import_react47.useRef)(null);
+    const calendarRef = (0, import_react47.useRef)(null);
     const reducedMotion = useReducedMotion();
     const inputId = useId();
     const calendarId = useId();
-    const setValue = (0, import_react46.useCallback)((date) => {
+    const setValue = (0, import_react47.useCallback)((date) => {
       if (controlledValue === void 0) {
         setInternalValue(date);
       }
@@ -5181,7 +5842,7 @@ var DatePicker = (0, import_react46.forwardRef)(
     const handleNextMonth = () => {
       setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
     };
-    (0, import_react46.useEffect)(() => {
+    (0, import_react47.useEffect)(() => {
       if (!isOpen) return;
       const handleKeyDown = (e) => {
         if (e.key === "Escape") {
@@ -5240,14 +5901,14 @@ var DatePicker = (0, import_react46.forwardRef)(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [isOpen, value]);
-    (0, import_react46.useEffect)(() => {
+    (0, import_react47.useEffect)(() => {
       if (isOpen && triggerRef.current && calendarRef.current) {
         const rect = triggerRef.current.getBoundingClientRect();
         calendarRef.current.style.top = `${rect.bottom + window.scrollY + 8}px`;
         calendarRef.current.style.left = `${rect.left + window.scrollX}px`;
       }
     }, [isOpen]);
-    const days = (0, import_react46.useMemo)(() => {
+    const days = (0, import_react47.useMemo)(() => {
       const year = viewDate.getFullYear();
       const month = viewDate.getMonth();
       const daysInMonth = getDaysInMonth(year, month);
@@ -5414,15 +6075,15 @@ var DatePicker = (0, import_react46.forwardRef)(
 DatePicker.displayName = "DatePicker";
 
 // src/hooks/use-reduced-transparency.ts
-var import_react47 = require("react");
+var import_react48 = require("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] = (0, import_react47.useState)(getInitialState2);
-  (0, import_react47.useEffect)(() => {
+  const [reducedTransparency, setReducedTransparency] = (0, import_react48.useState)(getInitialState2);
+  (0, import_react48.useEffect)(() => {
     const mediaQuery = window.matchMedia(QUERY2);
     const handler = (event) => {
       setReducedTransparency(event.matches);
@@ -5437,10 +6098,10 @@ function useReducedTransparency() {
 }
 
 // src/hooks/use-mounted.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 function useMounted() {
-  const [mounted, setMounted] = (0, import_react48.useState)(false);
-  (0, import_react48.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     setMounted(true);
   }, []);
   return mounted;
@@ -5506,6 +6167,7 @@ function useMounted() {
   Tooltip,
   clamp,
   cleanupFilters,
+  clearGlisseCache,
   cn,
   createLensFilter,
   createRefractionFilter,
@@ -5522,12 +6184,14 @@ function useMounted() {
   throttle,
   useControllable,
   useGlass,
+  useGlisseEffect,
   useId,
   useMounted,
   usePointerPosition,
   usePressedState,
   useReducedMotion,
   useReducedTransparency,
+  useRefraction,
   useSidebar,
   useTheme,
   useToast