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:T1062,"use client"; import { useEffect, useState } from "react"; import type { CSSProperties, ReactNode } from "react"; import { cn } from "../../utils"; import { uid } from "../../internals/use-id"; import "./frosted-glass.css"; /** * FrostedGlass - frosted glass surface with an organic, wavy refraction of * whatever sits behind it. * * Four layers stack inside a rounded container: * * 1. Filter layer - `backdrop-filter: blur(0)` pulls the backdrop into this * element's own rendering, then `filter: url(#...)` pointing at the inline * SVG filter distorts it (`feTurbulence` -> `feGaussianBlur` -> * `feDisplacementMap`). * 2. Overlay - translucent tint (`tint`). * 3. Specular - inset highlights simulating a lit glass rim (`highlight`). * 4. Content - the children. * * An optional conic-gradient border (`border`) frames the container. */ export interface FrostedGlassProps { /** Border radius in pixels */ radius?: number; /** Turbulence noise frequency (lower = wider waves) */ baseFrequency?: number; /** Turbulence octaves (detail of the noise) */ numOctaves?: number; /** Turbulence random seed */ seed?: number; /** Gaussian blur softening the noise before displacement */ noiseBlur?: number; /** Displacement intensity */ scale?: number; /** Overlay tint color */ tint?: string; /** Specular rim highlight color */ highlight?: string; /** Show the conic-gradient glass border */ border?: boolean; /** Backdrop blur (px) for the WebKit fallback */ fallbackBlur?: number; /** Backdrop saturation (%) for the WebKit fallback */ fallbackSaturation?: number; /** CSS classes for the content layer */ className?: string; /** CSS classes for the outer container */ containerClass?: string; /** Content rendered on top of the glass */ children?: ReactNode; } export function FrostedGlass({ radius = 24, baseFrequency = 0.008, numOctaves = 2, seed = 92, noiseBlur = 2, scale = 70, tint = "hsla(0, 0%, 100%, 0.25)", highlight = "hsla(0, 0%, 100%, 0.75)", border = true, fallbackBlur = 20, fallbackSaturation = 180, className = "", containerClass = "", children, }: FrostedGlassProps) { // The filter id is minted after mount, exactly as the Svelte source does: // the SVG filter and the layer referencing it are absent from the server // HTML and appear on the first client effect. `uid()` replaces the source's // `Math.random()` suffix - a monotonic counter cannot collide, and it keeps // the id ASCII-clean for the `url(#...)` reference below. const [filterId, setFilterId] = useState(""); useEffect(() => { setFilterId(uid("fg-dist")); }, []); const containerStyle = { borderRadius: `${radius}px`, "--fg-tint": tint, "--fg-highlight": highlight, "--fg-fallback-blur": `${fallbackBlur}px`, "--fg-fallback-saturation": `${fallbackSaturation}%`, } as CSSProperties; return (

{filterId ? ( <>

) : null}

{children}

); } 54:Tc37,/* Anchored on the root class: the Svelte compiler scoped these rules, plain CSS would leak them into every consumer element sharing the class name. The rule ORDER below is the source order - the fallback block's overlay override is deliberately left where the source puts it (see the note on it). */ .frosted-glass { position: relative; display: flex; background: transparent; overflow: hidden; contain: layout paint; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.05); } .frosted-glass.frosted-glass-border::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; background: conic-gradient( from -75deg at 50% 50%, rgba(20, 60, 120, 0.5), rgba(150, 200, 255, 0.1) 5% 40%, rgba(20, 60, 120, 0.5) 50%, rgba(150, 200, 255, 0.1) 60% 95%, rgba(20, 60, 120, 0.5) ), linear-gradient(180deg, rgba(220, 240, 255, 0.5), rgba(240, 250, 255, 0.5)); box-shadow: inset 0 0 0 0.5px rgba(220, 240, 255, 0.5); pointer-events: none; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* backdrop-filter: blur(0) pulls the backdrop into this layer so the SVG displacement filter can distort it */ .frosted-glass .frosted-glass-filter { position: absolute; inset: 0; z-index: 0; backdrop-filter: blur(0); isolation: isolate; transform: translateZ(0); will-change: filter; } @media (prefers-reduced-motion: no-preference) { .frosted-glass-filter { animation: frosted-glass-settle 0.22s ease-out; } } @keyframes frosted-glass-settle { 0% { opacity: 0; } } /* Safari can't combine filter:url() with backdrop-filter, so it needs a plain-blur fallback. -webkit-named-image is a WebKit-only feature query (Chromium and Firefox return false). Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */ @supports (background: -webkit-named-image(i)) { .frosted-glass .frosted-glass-filter { filter: none !important; -webkit-backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation)); backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation)); } /* Same specificity as the unconditional `.frosted-glass-overlay` rule further down, which therefore wins on source order and leaves this one inert. Kept verbatim, in place: the Svelte source has the same dead override and the port copies behaviour, bugs included. */ .frosted-glass .frosted-glass-overlay { background: hsla(0, 0%, 100%, 0.5); } } .frosted-glass .frosted-glass-defs { position: absolute; width: 0; height: 0; } .frosted-glass .frosted-glass-overlay { position: absolute; inset: 0; z-index: 1; background: var(--fg-tint); } .frosted-glass .frosted-glass-specular { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; box-shadow: inset 1px 1px 0 var(--fg-highlight), inset 0 0 5px var(--fg-highlight); } .frosted-glass .frosted-glass-content { position: relative; z-index: 3; display: flex; align-items: center; width: 100%; } 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/frosted-glass/FrostedGlass.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/frosted-glass/FrostedGlass.tsx"},{"path":"react/src/components/frosted-glass/frosted-glass.css","content":"$54","type":"registry:ui","target":"@ui/fancy/components/frosted-glass/frosted-glass.css"},{"path":"react/src/components/frosted-glass/index.ts","content":"\"use client\";\n\nexport { FrostedGlass } from \"./FrostedGlass\";\nexport type { FrostedGlassProps } from \"./FrostedGlass\";\n","type":"registry:ui","target":"@ui/fancy/components/frosted-glass/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]