51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1da5,"use client"; import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react"; import { cn } from "../../utils"; import { uid } from "../../internals/use-id"; import "./liquid-glass.css"; /** * LiquidGlass - glass-like refraction built on an SVG displacement filter * * The element measures itself with a ResizeObserver, paints a displacement map * as an inline SVG data URI at that exact size, and points `backdrop-filter` at * a filter that displaces the red, green and blue channels by slightly * different amounts, which is what produces the chromatic edge. */ export interface LiquidGlassProps { /** Border radius in px */ radius?: number; /** Border thickness factor */ border?: number; /** HSL lightness of fill */ lightness?: number; /** Gaussian blur std deviation */ displace?: number; /** SVG blend mode */ blend?: string; /** X displacement channel */ xChannel?: "R" | "G" | "B"; /** Y displacement channel */ yChannel?: "R" | "G" | "B"; /** Fill opacity */ alpha?: number; /** Inner blur */ blur?: number; /** Red channel offset */ rOffset?: number; /** Green channel offset */ gOffset?: number; /** Blue channel offset */ bOffset?: number; /** Displacement scale */ scale?: number; /** Frosted overlay opacity */ frost?: number; /** Backdrop blur in pixels for the Safari fallback */ fallbackBlur?: number; /** Backdrop saturation percentage for the Safari fallback */ fallbackSaturation?: number; /** CSS classes for the inner container */ className?: string; /** CSS classes for the outer container */ containerClass?: string; children?: ReactNode; } export function LiquidGlass({ radius = 16, border: borderProp = 0.07, lightness = 50, displace, blend = "difference", xChannel = "R", yChannel = "B", alpha = 0.93, blur = 11, rOffset = 0, gOffset = 10, bOffset = 20, scale = -180, frost = 0.05, fallbackBlur = 20, fallbackSaturation = 180, className = "", containerClass = "", children, }: LiquidGlassProps) { const liquidGlassRoot = useRef(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const [filterId, setFilterId] = useState(""); // Built once per input change, and not at all while the filter is absent — // the same caching and laziness the Svelte source gets from `$derived.by` // read only inside its `{#if filterId}` block. Every input is a primitive, // so the comparison is cheap and the kilobyte string plus its URI encoding // no longer run on renders that a parent alone caused. const displacementDataUri = useMemo(() => { if (!filterId) return ""; const brd = Math.min(dimensions.width, dimensions.height) * (borderProp * 0.5); const displacementImage = ``; return `data:image/svg+xml,${encodeURIComponent(displacementImage)}`; }, [ dimensions.width, dimensions.height, borderProp, radius, blend, lightness, alpha, blur, filterId, ]); // Same declaration order as the Svelte source's style string, and the same // two shapes: `backdrop-filter` only appears once the filter it points at does. const backdropStyle = { "--frost": frost, borderRadius: `${radius}px`, ...(filterId ? { backdropFilter: `url(#displacementFilter-${filterId})` } : null), "--lg-fallback-blur": `${fallbackBlur}px`, "--lg-fallback-saturation": `${fallbackSaturation}%`, } as CSSProperties; useEffect(() => { // The filter id is minted here, after mount, exactly where the Svelte // source mints it in `onMount`. It is what keeps two instances on one page // from sharing a filter, and it must never reach the server HTML — an id // the client alone ever sees cannot disagree with a server render. `uid()` // is the counter kept for exactly that case (it throws when called on the // server), so no seed prop is needed and no two instances can collide. setFilterId(uid("lg")); const node = liquidGlassRoot.current; if (!node) return; const observer = new ResizeObserver((entries) => { const entry = entries[0]; if (!entry) return; let width = 0; let height = 0; if (entry.borderBoxSize && entry.borderBoxSize.length) { width = entry.borderBoxSize[0]!.inlineSize; height = entry.borderBoxSize[0]!.blockSize; } else if (entry.contentRect) { width = entry.contentRect.width; height = entry.contentRect.height; } setDimensions({ width, height }); }); observer.observe(node); return () => observer.disconnect(); // Mount-only, mirroring `onMount`: the root element is unconditional, so // it is already attached by the time this runs and never changes identity. }, []); return (

{children}

{filterId ? ( ) : null}

); } 54:T626,.liquid-glass-effect { position: relative; display: block; opacity: 1; border-radius: inherit; background: light-dark(hsl(0 0% 100% / var(--frost, 0)), hsl(0 0% 0% / var(--frost, 0))); box-shadow: 0 0 2px 1px light-dark( color-mix(in oklch, canvasText, #0000 85%), color-mix(in oklch, canvasText, #0000 90%) ) inset, 0 0 10px 4px light-dark( color-mix(in oklch, canvasText, #0000 90%), color-mix(in oklch, canvasText, #0000 95%) ) inset, 0px 4px 16px rgba(17, 17, 26, 0.05), 0px 8px 24px rgba(17, 17, 26, 0.05), 0px 16px 56px rgba(17, 17, 26, 0.05), 0px 4px 16px rgba(17, 17, 26, 0.05) inset, 0px 8px 24px rgba(17, 17, 26, 0.05) inset, 0px 16px 56px rgba(17, 17, 26, 0.05) inset; } /* Safari cannot resolve SVG url() references inside backdrop-filter, so it needs a plain-blur fallback. -webkit-named-image is a WebKit-only feature query (Chromium and Firefox return false), so this never overrides Chromium's working SVG filter. Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */ @supports (background: -webkit-named-image(i)) { .liquid-glass-effect { -webkit-backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important; backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important; } } .liquid-glass-slot { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .liquid-glass-filter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"react/src/components/liquid-glass/LiquidGlass.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/liquid-glass/LiquidGlass.tsx"},{"path":"react/src/components/liquid-glass/index.ts","content":"\"use client\";\n\nexport { LiquidGlass } from \"./LiquidGlass\";\nexport type { LiquidGlassProps } from \"./LiquidGlass\";\n","type":"registry:ui","target":"@ui/fancy/components/liquid-glass/index.ts"},{"path":"react/src/components/liquid-glass/liquid-glass.css","content":"$54","type":"registry:ui","target":"@ui/fancy/components/liquid-glass/liquid-glass.css"}],"className":"h-[70svh] min-h-80"}]]}]