5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:T213f,"use client"; import { type AnimationPlaybackControls, animate, type MotionValue, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type PointerEvent as ReactPointerEvent, type RefObject, useCallback, useEffect, useRef, useState, } from "react"; import { CLOSE, DEFAULT_LIQUID, DRAG_SLOP, DWELL, OPEN, rubberBand, TRAVEL, } from "./motion"; import { MAX_SPREAD, MAX_STRETCH, squashed, useSquish } from "./use-squish"; const INSET_RATIO = 0.107; const OVERSHOOT = 0.12; const OPEN_HEIGHT = 1.45; const OPEN_ASPECT = 1.5; export type GlassSwitchGeometry = { width: number; height: number; inset: number; thumbWidth: number; thumbHeight: number; travel: number; margin: number; containerWidth: number; containerHeight: number; }; export type UseGlassSwitchOptions = { checked: boolean; onCheckedChange?: (checked: boolean) => void; width?: number; height?: number; disabled?: boolean; draggable?: boolean; liquid?: number; }; export type UseGlassSwitchResult = { geometry: GlassSwitchGeometry; rootStyle: Record; lensProps: { width: number; height: number; x: MotionValue; y: number; lensWidth: MotionValue; lensHeight: MotionValue; lensRadius: MotionValue; shadowOpacity: MotionValue; tintOpacity: MotionValue; edgeBias: MotionValue; lag?: MotionValue; }; thumbProps: { style: { x: MotionValue }; onPointerDown: (event: ReactPointerEvent) => void; onPointerMove: (event: ReactPointerEvent) => void; onPointerUp: (event: ReactPointerEvent) => void; onPointerCancel: () => void; }; rootRef: RefObject; trackRef: RefObject; flash: () => void; consumeDragGuard: () => boolean; }; export function useGlassSwitch({ checked, onCheckedChange, width = 74, height = 28, disabled, draggable = true, liquid = DEFAULT_LIQUID, }: UseGlassSwitchOptions): UseGlassSwitchResult { const reduceMotion = useReducedMotion() ?? false; const inset = Math.round(height * INSET_RATIO); const thumbHeight = height - inset * 2; const thumbWidth = Math.round(thumbHeight * 2); const travel = width - thumbWidth - inset * 2; const overshoot = width * OVERSHOOT; const restHalfWidth = thumbWidth / 2; const restHalfHeight = thumbHeight / 2; const openHalfHeight = (height * OPEN_HEIGHT) / 2; const openHalfWidth = openHalfHeight * OPEN_ASPECT; const margin = Math.ceil( Math.max( openHalfWidth * MAX_SPREAD - restHalfWidth + overshoot, openHalfHeight * MAX_STRETCH - height / 2, ), ) + 2; const x = useMotionValue(checked ? travel : 0); const lensHalfWidth = useMotionValue(restHalfWidth); const lensHalfHeight = useMotionValue(restHalfHeight); const restProgress = useMotionValue(1); const shadowOpacity = useMotionValue(0); const { squish, lag, kick } = useSquish(x, !reduceMotion, liquid); const lensWidth = useTransform( [lensHalfWidth, squish], ([half, amount]: number[]) => squashed(half * 2, amount, true), ); const lensHeight = useTransform( [lensHalfHeight, squish], ([half, amount]: number[]) => squashed(half * 2, amount, false), ); const lensRadius = useTransform( [lensWidth, lensHeight], ([across, tall]: number[]) => Math.min(across, tall) / 2, ); const lensX = useTransform(x, (at) => margin + inset + thumbWidth / 2 + at); const edgeBias = useTransform(restProgress, (at) => at * 0.5); const rootRef = useRef(null); const trackRef = useRef(null); const pointer = useRef(null); const startX = useRef(0); const startOffset = useRef(0); const dragged = useRef(false); const dragGuard = useRef(false); const isOpen = useRef(false); const closeTimer = useRef | undefined>( undefined, ); const travelAnimation = useRef( undefined, ); const setShape = useCallback( (open: boolean) => { isOpen.current = open; const options = open ? OPEN : CLOSE; const targets: Array<[typeof lensHalfWidth, number]> = [ [lensHalfWidth, open ? openHalfWidth : restHalfWidth], [lensHalfHeight, open ? openHalfHeight : restHalfHeight], [restProgress, open ? 0 : 1], [shadowOpacity, open ? 1 : 0], ]; for (const [value, target] of targets) { if (reduceMotion) value.set(target); else animate(value, target, options); } kick(open ? 1 : -1); }, [ kick, lensHalfHeight, lensHalfWidth, openHalfHeight, openHalfWidth, reduceMotion, restHalfHeight, restHalfWidth, restProgress, shadowOpacity, ], ); const open = useCallback(() => { clearTimeout(closeTimer.current); if (!isOpen.current) setShape(true); }, [setShape]); const closeAfterDwell = useCallback(() => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setShape(false), DWELL); }, [setShape]); const moveTo = useCallback( (target: number) => { travelAnimation.current?.stop(); if (reduceMotion) x.set(target); else travelAnimation.current = animate(x, target, TRAVEL); }, [reduceMotion, x], ); const [rootStyle] = useState(() => ({ "--switch-progress": String(checked ? 1 : 0), })); useEffect(() => { const apply = (value: number) => { const progress = travel > 0 ? Math.min(1, Math.max(0, value / travel)) : 0; rootRef.current?.style.setProperty("--switch-progress", String(progress)); }; apply(x.get()); return x.on("change", apply); }, [travel, x]); useEffect(() => { if (pointer.current !== null) return; moveTo(checked ? travel : 0); }, [checked, moveTo, travel]); useEffect( () => () => { clearTimeout(closeTimer.current); travelAnimation.current?.stop(); }, [], ); const pointerScale = () => { const box = trackRef.current?.getBoundingClientRect(); return box && box.width > 0 ? box.width / width : 1; }; const onPointerDown = (event: ReactPointerEvent) => { if (disabled || pointer.current !== null || reduceMotion) return; pointer.current = event.pointerId; if (draggable) event.currentTarget.setPointerCapture(event.pointerId); startX.current = event.clientX; startOffset.current = x.get(); dragged.current = false; dragGuard.current = false; travelAnimation.current?.stop(); open(); if (!draggable) closeAfterDwell(); }; const onPointerMove = (event: ReactPointerEvent) => { if (!draggable || event.pointerId !== pointer.current) return; const scale = pointerScale(); const moved = (event.clientX - startX.current) / scale; if (!dragged.current) { if (Math.abs(moved) < DRAG_SLOP) return; dragged.current = true; dragGuard.current = true; startOffset.current = x.get(); startX.current = event.clientX; } let next = startOffset.current + (event.clientX - startX.current) / scale; if (next < 0) next = -rubberBand(-next, overshoot); else if (next > travel) next = travel + rubberBand(next - travel, overshoot); x.set(next); }; const onPointerUp = (event: ReactPointerEvent) => { if (event.pointerId !== pointer.current) return; pointer.current = null; closeAfterDwell(); if (!dragged.current) return; dragged.current = false; const next = Math.max(0, Math.min(travel, x.get())) > travel / 2; moveTo(next ? travel : 0); if (next !== checked) onCheckedChange?.(next); }; const onPointerCancel = () => { pointer.current = null; dragged.current = false; dragGuard.current = false; setShape(false); moveTo(checked ? travel : 0); }; const flash = useCallback(() => { open(); closeAfterDwell(); }, [closeAfterDwell, open]); const consumeDragGuard = useCallback(() => { if (!dragGuard.current) return false; dragGuard.current = false; return true; }, []); return { rootStyle, geometry: { width, height, inset, thumbWidth, thumbHeight, travel, margin, containerWidth: width + margin * 2, containerHeight: height + margin * 2, }, lensProps: { width: width + margin * 2, height: height + margin * 2, x: lensX, y: margin + height / 2, lensWidth, lensHeight, lensRadius, shadowOpacity, tintOpacity: restProgress, edgeBias, lag, }, thumbProps: { style: { x }, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, }, rootRef, trackRef, flash, consumeDragGuard, }; } 62:T822,export { supportsBackdropRefraction } from "./backdrop"; export { Glass, type GlassProps } from "./glass"; export { type GlassLanding, GlassPane, type GlassPaneProps, type GlassPaneReach, type GlassPaneShape, type GlassPaneVariant, type GlassRefraction, hideGlass, landGlass, } from "./glass-pane"; export { GlassSegmented, type GlassSegmentedOption, type GlassSegmentedProps, } from "./glass-segmented"; export { GlassSegmentedSurface, type GlassSegmentedSurfaceProps, } from "./glass-segmented-surface"; export { GlassSlider, type GlassSliderProps } from "./glass-slider"; export { GlassSliderSurface, type GlassSliderSurfaceProps, } from "./glass-slider-surface"; export { GlassSwitch, type GlassSwitchProps } from "./glass-switch"; export { GlassSwitchSurface, type GlassSwitchSurfaceProps, } from "./glass-switch-surface"; export { GlassToggleGroup, type GlassToggleGroupProps, type GlassToggleItem, } from "./glass-toggle-group"; export { CLOSE, DEFAULT_LIQUID, DRAG_SLOP, DWELL, OPEN, PRESS_SCALE, rubberBand, TRAVEL, useDerived, } from "./motion"; export { decodeMap, generateLensMap, isMapDecoded, type LensMap, type LensProfile, type LensShape, profileKey, snapShape, } from "./optics"; export { darkLens, defaultLens, type GlassTheme, paneLens, sliderLens, switchLens, toggleLens, useLens, } from "./presets"; export { GlassScope, type GlassScopeProps, type GlassScopeRefraction, } from "./scope"; export { GlassThemeProvider, type GlassThemeProviderProps, useGlassTheme, } from "./theme"; export { type OptionBounds, type SegmentPress, type SegmentRun, type UseGlassSegmentedOptions, type UseGlassSegmentedResult, useGlassSegmented, useSegmentLens, } from "./use-glass-segmented"; export { type GlassSliderGeometry, type UseGlassSliderOptions, type UseGlassSliderResult, useGlassSlider, } from "./use-glass-slider"; export { type GlassSwitchGeometry, type UseGlassSwitchOptions, type UseGlassSwitchResult, useGlassSwitch, } from "./use-glass-switch"; export { squashed, useSquish } from "./use-squish"; 63:Tc02,"use client"; import { useId, useRef, useState } from "react"; import { type GlassSegmentedOption, GlassSegmentedSurface, type GlassSegmentedSurfaceProps, } from "./glass-segmented-surface"; import "./glass-segmented.css"; import type { LensProfile } from "./optics"; import type { GlassTheme } from "./presets"; import { useGlassTheme } from "./theme"; import type { UseGlassSegmentedResult } from "./use-glass-segmented"; export type { GlassSegmentedOption }; export type GlassSegmentedProps = { options: ReadonlyArray; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; name?: string; height?: number; lens?: Partial; theme?: GlassTheme; disabled?: boolean; className?: string; "aria-label"?: string; surfaceProps?: Partial; }; function normalise( option: string | GlassSegmentedOption, ): GlassSegmentedOption { return typeof option === "string" ? { value: option, label: option } : option; } export function GlassSegmented({ options, value, defaultValue, onValueChange, name, height = 36, lens, theme: themeProp, disabled, className, "aria-label": ariaLabel, surfaceProps, }: GlassSegmentedProps) { const theme = useGlassTheme(themeProp); const generatedId = useId(); const groupName = name ?? `glass-toggle-${generatedId.replaceAll(":", "")}`; const items = options.map(normalise); const isControlled = value !== undefined; const [uncontrolled, setUncontrolled] = useState( defaultValue ?? items[0]?.value, ); const current = isControlled ? value : uncontrolled; const selectedIndex = Math.max( 0, items.findIndex((item) => item.value === current), ); const controls = useRef(null); const select = (next: string) => { if (!isControlled) setUncontrolled(next); onValueChange?.(next); controls.current?.flash(); }; return (

{ const item = items[index]; if (item && item.value !== current) select(item.value); }} controlsRef={controls} items={(bounds) => items.map((item, index) => ( select(item.value)} /> {item.label} )) } />

); } 64:T338c,"use client"; import { type AnimationPlaybackControls, animate, type MotionValue, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type PointerEvent as ReactPointerEvent, type RefObject, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { CLOSE, DEFAULT_LIQUID, DRAG_SLOP, OPEN, PRESS_SCALE, rubberBand, TRAVEL, useDerived, } from "./motion"; import { MAX_SPREAD, MAX_STRETCH, squashed, useSquish } from "./use-squish"; const INSET_RATIO = 0.107; const PRESS_HEIGHT = PRESS_SCALE; const SETTLE = 340; const OVERDRAG = 0.35; const SPEED_STRETCH = -0.25; export type OptionBounds = { left: number; width: number }; export type SegmentRun = { start: number; end: number; left: number; width: number; }; export type SegmentPress = { stretch: MotionValue; shadowOpacity: MotionValue; rest: MotionValue; held: MotionValue; drag: MotionValue; dragWidth: MotionValue; }; export type UseGlassSegmentedOptions = { selected: readonly number[]; optionCount: number; height?: number; inset?: number; pressScale?: number; disabled?: boolean; onDragSelect?: (index: number) => void; }; export type UseGlassSegmentedResult = { geometry: { height: number; inset: number; indicatorHeight: number; margin: number; trackWidth: number; containerWidth: number; containerHeight: number; }; runs: SegmentRun[]; dividers: number[]; bounds: OptionBounds[]; attachRow: (element: HTMLElement | null) => void; attachOption: (index: number) => (element: HTMLElement | null) => void; rootRef: RefObject; rootProps: { onPointerDown: (event: ReactPointerEvent) => void; onPointerMove: (event: ReactPointerEvent) => void; onPointerUp: (event: ReactPointerEvent) => void; onPointerCancel: (event: ReactPointerEvent) => void; }; press: SegmentPress; flash: () => void; setPressed: (pressed: boolean) => void; }; function runsOf( selected: readonly number[], bounds: OptionBounds[], ): SegmentRun[] { const sorted = [...new Set(selected)] .filter((index) => index >= 0 && bounds[index] !== undefined) .sort((a, b) => a - b); const runs: SegmentRun[] = []; for (const index of sorted) { const open = runs.at(-1); if (open && index === open.end + 1) { open.end = index; continue; } runs.push({ start: index, end: index, left: 0, width: 0 }); } return runs.map((run) => { const first = bounds[run.start]; const last = bounds[run.end]; return { ...run, left: first.left, width: last.left + last.width - first.left, }; }); } const centreOf = (bound: OptionBounds) => bound.left + bound.width / 2; function capsuleAt(bounds: OptionBounds[], centre: number) { const first = bounds[0]; const last = bounds.at(-1); if (!first || !last) return { centre, width: 0 }; if (centre <= centreOf(first)) return { centre, width: first.width }; if (centre >= centreOf(last)) return { centre, width: last.width }; for (let index = 0; index < bounds.length - 1; index += 1) { const from = bounds[index]; const to = bounds[index + 1]; if (centre > centreOf(to)) continue; const t = (centre - centreOf(from)) / (centreOf(to) - centreOf(from)); return { centre, width: from.width + (to.width - from.width) * t }; } return { centre, width: last.width }; } function nearestTo(bounds: OptionBounds[], centre: number) { let best = 0; for (let index = 1; index < bounds.length; index += 1) { const distance = Math.abs(centreOf(bounds[index]) - centre); if (distance < Math.abs(centreOf(bounds[best]) - centre)) best = index; } return best; } export function useGlassSegmented({ selected, optionCount, height = 36, inset: insetOption, pressScale = PRESS_HEIGHT, disabled, onDragSelect, }: UseGlassSegmentedOptions): UseGlassSegmentedResult { const reduceMotion = useReducedMotion() ?? false; const inset = insetOption ?? Math.round(height * INSET_RATIO); const indicatorHeight = height - inset * 2; const margin = Math.ceil( Math.max( ((indicatorHeight * pressScale) / 2) * MAX_STRETCH - height / 2, (indicatorHeight * (pressScale - 1)) / 2 + indicatorHeight * (MAX_SPREAD - 1), ), ) + 2; const [bounds, setBounds] = useState([]); const [trackWidth, setTrackWidth] = useState(0); const rootRef = useRef(null); const optionRefs = useRef>([]); const observer = useRef(undefined); const attachRow = useCallback((element: HTMLElement | null) => { observer.current?.disconnect(); observer.current = undefined; if (!element) return; const measure = () => { const origin = element.offsetLeft; setTrackWidth(element.offsetWidth); setBounds( optionRefs.current.map((option) => ({ left: (option?.offsetLeft ?? 0) - origin, width: option?.offsetWidth ?? 0, })), ); }; measure(); if (typeof ResizeObserver === "undefined") return; const watcher = new ResizeObserver(measure); watcher.observe(element); for (const option of optionRefs.current) { if (option) watcher.observe(option); } observer.current = watcher; }, []); const attachOption = useCallback( (index: number) => (element: HTMLElement | null) => { optionRefs.current[index] = element; }, [], ); useEffect(() => { optionRefs.current.length = optionCount; return () => observer.current?.disconnect(); }, [optionCount]); const runs = runsOf(selected, bounds); const dividers = runs.flatMap((run) => { const lines: number[] = []; for (let index = run.start; index < run.end; index++) { const edge = bounds[index]; if (edge) lines.push(edge.left + edge.width); } return lines; }); const stretch = useMotionValue(1); const shadowOpacity = useMotionValue(0); const rest = useMotionValue(1); const held = useMotionValue(0); const drag = useMotionValue(Number.NaN); const dragWidth = useMotionValue(0); const isOpen = useRef(false); const closeTimer = useRef | undefined>( undefined, ); const setPressed = useCallback( (pressed: boolean) => { isOpen.current = pressed; const options = pressed ? OPEN : CLOSE; const targets: Array<[MotionValue, number]> = [ [stretch, pressed ? pressScale : 1], [shadowOpacity, pressed ? 1 : 0], [rest, pressed ? 0 : 1], ]; for (const [value, next] of targets) { if (reduceMotion) value.set(next); else animate(value, next, options); } held.set(pressed && !reduceMotion ? 1 : 0); }, [held, pressScale, reduceMotion, rest, shadowOpacity, stretch], ); const open = useCallback(() => { clearTimeout(closeTimer.current); if (!isOpen.current) setPressed(true); }, [setPressed]); const settle = useCallback(() => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setPressed(false), SETTLE); }, [setPressed]); const flash = useCallback(() => { if (reduceMotion) return; open(); settle(); }, [open, reduceMotion, settle]); useEffect(() => () => clearTimeout(closeTimer.current), []); const pointer = useRef(null); const startX = useRef(0); const startCentre = useRef(Number.NaN); const dragging = useRef(false); const latest = useRef({ bounds, runs, onDragSelect }); latest.current = { bounds, runs, onDragSelect }; const localX = (clientX: number) => { const root = rootRef.current; if (!root) return clientX; const box = root.getBoundingClientRect(); const scale = root.offsetWidth > 0 ? box.width / root.offsetWidth : 1; return (clientX - box.left) / scale; }; const onPointerDown = (event: ReactPointerEvent) => { if (disabled || reduceMotion || pointer.current !== null) return; if (event.pointerType === "mouse" && event.button !== 0) return; pointer.current = event.pointerId; startX.current = event.clientX; dragging.current = false; startCentre.current = Number.NaN; const { runs: chosen, onDragSelect: pick } = latest.current; const only = chosen.length === 1 && chosen[0].start === chosen[0].end; if (pick && only) { const at = localX(event.clientX); const run = chosen[0]; if (at >= run.left && at <= run.left + run.width) { startCentre.current = run.left + run.width / 2; } } open(); }; const onPointerMove = (event: ReactPointerEvent) => { if (event.pointerId !== pointer.current) return; if (Number.isNaN(startCentre.current)) return; const root = rootRef.current; const scale = root && root.offsetWidth > 0 ? root.getBoundingClientRect().width / root.offsetWidth : 1; const moved = (event.clientX - startX.current) / scale; if (!dragging.current) { if (Math.abs(moved) < DRAG_SLOP) return; dragging.current = true; event.currentTarget.setPointerCapture(event.pointerId); } const options = latest.current.bounds; const first = options[0]; const last = options.at(-1); if (!first || !last) return; const low = centreOf(first); const high = centreOf(last); const limit = indicatorHeight * OVERDRAG; let centre = startCentre.current + moved; if (centre < low) centre = low - rubberBand(low - centre, limit); else if (centre > high) centre = high + rubberBand(centre - high, limit); const capsule = capsuleAt(options, centre); dragWidth.set(capsule.width); drag.set(capsule.centre); }; const endPointer = (event: ReactPointerEvent) => { if (event.pointerId !== pointer.current) return; pointer.current = null; if (dragging.current) { dragging.current = false; const index = nearestTo(latest.current.bounds, drag.get()); latest.current.onDragSelect?.(index); drag.set(Number.NaN); } settle(); }; useEffect(() => { const apply = (value: number) => rootRef.current?.style.setProperty("--segment-rest", String(value)); apply(rest.get()); return rest.on("change", apply); }, [rest]); const press = useMemo( () => ({ stretch, shadowOpacity, rest, held, drag, dragWidth }), [drag, dragWidth, held, rest, shadowOpacity, stretch], ); return { geometry: { height, inset, indicatorHeight, margin, trackWidth, containerWidth: trackWidth + margin * 2, containerHeight: height + margin * 2, }, runs, dividers, bounds, attachRow, attachOption, rootRef, rootProps: { onPointerDown, onPointerMove, onPointerUp: endPointer, onPointerCancel: endPointer, }, press, flash, setPressed, }; } export function useSegmentLens({ run, indicatorHeight, margin, press, liquid = DEFAULT_LIQUID, }: { run: SegmentRun; indicatorHeight: number; margin: number; press: SegmentPress; liquid?: number; }) { const reduceMotion = useReducedMotion() ?? false; const centre = run.left + run.width / 2; const x = useMotionValue(centre); const span = useMotionValue(run.width); const { squish, kick } = useSquish(x, !reduceMotion, liquid, SPEED_STRETCH); const lensWidth = useDerived( [span, press.stretch, squish], ([width, factor, amount]) => squashed(width + indicatorHeight * (factor - 1), amount, true), ); const lensHeight = useDerived([press.stretch, squish], ([factor, amount]) => squashed(indicatorHeight * factor, amount, false), ); const lensRadius = useDerived( [lensWidth, lensHeight], ([across, tall]) => Math.min(across, tall) / 2, ); const lensX = useTransform(x, (at) => margin + at); const edgeBias = useTransform(press.rest, (at) => at * 0.5); const settled = useRef(false); const moves = useRef([]); const target = useRef({ centre, width: run.width }); target.current = { centre, width: run.width }; const glide = useCallback( (to: { centre: number; width: number }) => { for (const move of moves.current) move.stop(); moves.current = [ animate(x, to.centre, TRAVEL), animate(span, to.width, TRAVEL), ]; }, [span, x], ); useEffect(() => { if (!Number.isNaN(press.drag.get())) return; if (reduceMotion || !settled.current) { for (const move of moves.current) move.stop(); x.set(centre); span.set(run.width); settled.current = true; return; } glide({ centre, width: run.width }); }, [centre, glide, press.drag, reduceMotion, run.width, span, x]); useEffect( () => () => { for (const move of moves.current) move.stop(); }, [], ); useEffect(() => { const follow = (at: number) => { if (Number.isNaN(at)) { glide(target.current); return; } for (const move of moves.current) move.stop(); moves.current = []; span.set(press.dragWidth.get()); x.set(at); }; return press.drag.on("change", follow); }, [glide, press.drag, press.dragWidth, span, x]); useEffect(() => { let wasHeld = press.held.get() > 0.5; return press.held.on("change", (value) => { const holding = value > 0.5; if (holding !== wasHeld) kick(holding ? 1 : -1); wasHeld = holding; }); }, [kick, press.held]); return { x: lensX, lensWidth, lensHeight, lensRadius, shadowOpacity: press.shadowOpacity, tintOpacity: press.rest, edgeBias, }; } 65:T95f,.glass-slider { --glass-slider-track: color(display-p3 0.882 0.875 0.875); --glass-slider-fill: var( --glass-accent-fill, color(display-p3 0.596 0.588 1) ); --glass-slider-focus: var(--glass-accent, #7774ff); display: inline-flex; flex-direction: column; gap: 10px; width: fit-content; cursor: pointer; -webkit-tap-highlight-color: transparent; } .glass-slider__box { position: relative; display: flow-root; flex: none; --glass-slider-track: color(display-p3 0.882 0.875 0.875); --glass-slider-fill: var( --glass-accent-fill, color(display-p3 0.596 0.588 1) ); --slider-fill: 0%; --slider-progress: 0; --glass-body: #fff; } /* A slider that fills its container draws its resting handle in CSS until it has measured itself, so a server-rendered page shows it at the right size. */ .glass-slider__rest { position: absolute; top: 0; left: calc(var(--slider-progress) * (100% - var(--slider-thumb-width))); width: var(--slider-thumb-width); height: 100%; /* The glass body itself is white in both themes, like iOS's knobs. */ background: #fff; border-radius: 999px; } .glass-slider__box[data-theme="dark"] { --glass-slider-track: color(display-p3 0.26 0.26 0.28); --glass-body: #1b1b1f; } .glass-slider__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .glass-slider__glass { pointer-events: none; } .glass-slider__row { position: relative; display: flex; align-items: center; } .glass-slider__hit { touch-action: none; pointer-events: auto; } .glass-slider__track { position: relative; width: 100%; overflow: hidden; background: var(--glass-slider-track); } .glass-slider__track-fill { position: absolute; inset: 0; background: var(--glass-slider-fill); border-radius: inherit; transform: translateX(calc(var(--slider-fill) - 100%)); } .glass-slider__label { font: 600 13px / 1.25 var(--font-sans, inherit); color: currentColor; -webkit-user-select: none; user-select: none; } .glass-slider__input:focus-visible + .glass-slider__box .glass-slider__track { outline: 2px solid var(--glass-slider-focus); outline-offset: 4px; } .glass-slider[data-disabled] { cursor: not-allowed; opacity: 0.48; } .glass-slider[data-theme="dark"] { --glass-slider-track: color(display-p3 0.26 0.26 0.28); --glass-body: #1b1b1f; } 66:T7c9,const overlays = new Map>(); const ready = new Map(); const OVERLAY_LIMIT = 64; export function readyOverlay(light: string) { return ready.get(light); } // A light map is blended hard-light over the glass, which is the same as // painting white (above mid-grey) or black (below) at |2L - 1|. Baking that // into a transparent image lets plain CSS draw the light with no filter. export function lightOverlay(light: string) { const known = overlays.get(light); if (known) return known; const made = new Promise((resolve) => { if (typeof Image === "undefined") { resolve(undefined); return; } const image = new Image(); image.src = light; // WebKit can fire load before a canvas is able to read the pixels. image.decode().then( () => { const canvas = document.createElement("canvas"); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; const context = canvas.getContext("2d", { willReadFrequently: true }); if (!context || canvas.width === 0 || canvas.height === 0) { resolve(undefined); return; } context.drawImage(image, 0, 0); const pixels = context.getImageData(0, 0, canvas.width, canvas.height); const data = pixels.data; for (let offset = 0; offset < data.length; offset += 4) { const level = data[offset] / 255; const value = level >= 0.5 ? 255 : 0; data[offset] = value; data[offset + 1] = value; data[offset + 2] = value; data[offset + 3] = Math.round(Math.abs(2 * level - 1) * 255); } context.putImageData(pixels, 0, 0); const url = canvas.toDataURL("image/png"); ready.set(light, url); resolve(url); }, () => resolve(undefined), ); }); overlays.set(light, made); if (overlays.size > OVERLAY_LIMIT) { const oldest = overlays.keys().next().value; if (oldest !== undefined) { overlays.delete(oldest); ready.delete(oldest); } } return made; } 67:T701,.glass-switch { --glass-switch-off: color(display-p3 0.882 0.875 0.875); --glass-switch-on: var(--glass-accent-fill, color(display-p3 0.596 0.588 1)); --glass-switch-focus: var(--glass-accent, #7774ff); --switch-progress: 0; --glass-body: #fff; display: inline-flex; align-items: center; gap: 12px; width: fit-content; cursor: pointer; -webkit-tap-highlight-color: transparent; } .glass-switch__box { position: relative; display: flow-root; flex: none; --glass-switch-off: color(display-p3 0.882 0.875 0.875); --glass-switch-on: var(--glass-accent-fill, color(display-p3 0.596 0.588 1)); --switch-progress: 0; --glass-body: #fff; } .glass-switch__box[data-theme="dark"] { --glass-switch-off: color(display-p3 0.26 0.26 0.28); --glass-body: #1b1b1f; } .glass-switch__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .glass-switch__glass { pointer-events: none; } .glass-switch__track { position: relative; background: color-mix( in srgb, var(--glass-switch-off), var(--glass-switch-on) calc(var(--switch-progress) * 100%) ); } .glass-switch__thumb-area { position: absolute; display: block; touch-action: none; pointer-events: auto; cursor: inherit; } .glass-switch__label { font: 600 15px / 1.25 var(--font-sans, inherit); color: currentColor; -webkit-user-select: none; user-select: none; } .glass-switch__input:focus-visible + .glass-switch__box .glass-switch__track { outline: 2px solid var(--glass-switch-focus); outline-offset: 3px; } .glass-switch[data-disabled] { cursor: not-allowed; opacity: 0.48; } .glass-switch[data-theme="dark"] { --glass-switch-off: color(display-p3 0.26 0.26 0.28); --glass-body: #1b1b1f; } 68:T754,let backdropSupport: boolean | undefined; export function supportsBackdropRefraction() { if (backdropSupport !== undefined) return backdropSupport; if (typeof navigator === "undefined" || typeof CSS === "undefined") { return false; } const brands = ( navigator as Navigator & { userAgentData?: { brands?: Array<{ brand: string }> }; } ).userAgentData?.brands; backdropSupport = Boolean(brands?.some(({ brand }) => brand === "Chromium")) && CSS.supports("backdrop-filter", "url(#glass)"); return backdropSupport; } const ROOT_KEYFRAMES = [ "opacity", "filter", "backdropFilter", "clipPath", "mask", "maskImage", ]; // A backdrop filter reads only up to the nearest backdrop root: an ancestor // with opacity, a filter, a backdrop filter, a mask, a clip-path or a blend // mode. Under one it sees that ancestor's own see-through paint over nothing, // and Chromium draws the box dark. An animation that ever touched opacity or a // filter keeps the root while it fills, even once it has settled on 1. export function underBackdropRoot(element: Element) { const top = element.ownerDocument.documentElement; for ( let node = element.parentElement; node && node !== top; node = node.parentElement ) { const style = getComputedStyle(node); if ( Number(style.opacity) < 1 || style.filter !== "none" || style.backdropFilter !== "none" || style.clipPath !== "none" || style.maskImage !== "none" || style.mixBlendMode !== "normal" || /opacity|filter|mask|clip-path|mix-blend-mode/.test(style.willChange) ) { return true; } for (const animation of node.getAnimations?.() ?? []) { const effect = animation.effect; if ( effect instanceof KeyframeEffect && effect .getKeyframes() .some((frame) => ROOT_KEYFRAMES.some((key) => key in frame)) ) { return true; } } } return false; } 69:T1417,"use client"; import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, useImperativeHandle, } from "react"; import { Glass } from "./glass"; import "./glass-segmented.css"; import type { LensProfile } from "./optics"; import { type GlassTheme, toggleLens, useLens } from "./presets"; import { useGlassTheme } from "./theme"; import { type OptionBounds, type SegmentPress, type SegmentRun, type UseGlassSegmentedResult, useGlassSegmented, useSegmentLens, } from "./use-glass-segmented"; export type GlassSegmentedOption = { value: string; label: ReactNode; }; export type GlassSegmentedSurfaceProps = Omit< HTMLAttributes, "children" > & { options: ReadonlyArray; selected: readonly number[]; height?: number; inset?: number; pressScale?: number; disabled?: boolean; lens?: Partial; theme?: GlassTheme; liquid?: number; onDragSelect?: (index: number) => void; ref?: Ref; controlsRef?: Ref; items?: (bounds: OptionBounds[]) => ReactNode; }; export function GlassSegmentedSurface({ options, selected, height = 36, inset, pressScale, disabled, lens: lensOverrides, theme: themeProp, liquid, onDragSelect, className, style, ref, controlsRef, items, ...rest }: GlassSegmentedSurfaceProps) { const theme = useGlassTheme(themeProp); const lens = useLens(theme, lensOverrides, toggleLens); const controls = useGlassSegmented({ selected, optionCount: options.length, height, inset, pressScale, disabled, onDragSelect, }); const { geometry, runs, dividers, bounds, attachRow, attachOption, rootRef, rootProps, press, } = controls; useImperativeHandle(controlsRef, () => controls, [controls]); const { margin, trackWidth, containerWidth, containerHeight } = geometry; const chosen = new Set(selected); const row = (highlighted: boolean, copy = false) => ( ); return ( { rest.onPointerDown?.(event); rootProps.onPointerDown(event); }} onPointerMove={(event) => { rest.onPointerMove?.(event); rootProps.onPointerMove(event); }} onPointerUp={(event) => { rest.onPointerUp?.(event); rootProps.onPointerUp(event); }} onPointerCancel={(event) => { rest.onPointerCancel?.(event); rootProps.onPointerCancel(event); }} ref={(element) => { rootRef.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; }} className={["glass-segmented__box", className].filter(Boolean).join(" ")} data-theme={theme} data-disabled={disabled ? "" : undefined} data-measured={trackWidth > 0 ? "" : undefined} style={ { ...style, "--toggle-height": `${height}px`, "--segment-pill": `${geometry.indicatorHeight}px`, "--segment-shadow": lens.restEdgeShadow, "--segment-rest": "1", } as CSSProperties } > {row(false)} {trackWidth > 0 ? runs.map((run, position) => ( )) : null} {items?.(bounds)} ); } function SegmentCapsule({ run, indicatorHeight, margin, trackHeight, containerWidth, containerHeight, press, liquid, lens, plain, face, }: { run: SegmentRun; indicatorHeight: number; margin: number; trackHeight: number; containerWidth: number; containerHeight: number; press: SegmentPress; liquid?: number; lens: LensProfile; plain: ReactNode; face: ReactNode; }) { const lensProps = useSegmentLens({ run, indicatorHeight, margin, press, liquid, }); return ( {plain}} face={

{face}

} /> ); } 6a:T111e,"use client"; import { type ReactNode, useCallback, useRef, useState } from "react"; import { GlassSegmentedSurface, type GlassSegmentedSurfaceProps, } from "./glass-segmented-surface"; import "./glass-segmented.css"; import type { LensProfile } from "./optics"; import type { GlassTheme } from "./presets"; import { useGlassTheme } from "./theme"; import type { UseGlassSegmentedResult } from "./use-glass-segmented"; export type GlassToggleItem = { value: string; label: ReactNode; disabled?: boolean; }; type Common = { options: ReadonlyArray; height?: number; lens?: Partial; theme?: GlassTheme; disabled?: boolean; className?: string; "aria-label"?: string; surfaceProps?: Partial; }; export type GlassToggleGroupProps = Common & ( | { type?: "single"; value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; } | { type: "multiple"; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; } ); function normalise(option: string | GlassToggleItem): GlassToggleItem { return typeof option === "string" ? { value: option, label: option } : option; } export function GlassToggleGroup(props: GlassToggleGroupProps) { const { options, height = 36, lens, theme: themeProp, disabled, className, "aria-label": ariaLabel, surfaceProps, } = props; const theme = useGlassTheme(themeProp); const items = options.map(normalise); const multiple = props.type === "multiple"; const controls = useRef(null); const [uncontrolledSingle, setUncontrolledSingle] = useState( !multiple ? (props.defaultValue ?? null) : null, ); const [uncontrolledMany, setUncontrolledMany] = useState( multiple ? ((props.defaultValue as string[]) ?? []) : [], ); const pressedValues = multiple ? ((props.value as string[] | undefined) ?? uncontrolledMany) : [ (props.value as string | null | undefined) ?? uncontrolledSingle ?? "", ].filter(Boolean); const setPressed = useCallback( (value: string, next: boolean) => { if (props.type === "multiple") { const current = props.value ?? uncontrolledMany; const updated = next ? items .map((item) => item.value) .filter((entry) => entry === value ? true : current.includes(entry), ) : current.filter((entry) => entry !== value); if (props.value === undefined) setUncontrolledMany(updated); props.onValueChange?.(updated); return; } const updated = next ? value : null; if (props.value === undefined) setUncontrolledSingle(updated); props.onValueChange?.(updated); }, [items, props, uncontrolledMany], ); const pressedFlags = items.map((item) => pressedValues.includes(item.value)); const selected = pressedFlags.reduce((all, on, index) => { if (on) all.push(index); return all; }, []); return ( // biome-ignore lint/a11y/useSemanticElements: a group of toggle buttons, not a fieldset

{ const item = items[index]; if (item && !item.disabled && !pressedFlags[index]) { setPressed(item.value, true); } } } controlsRef={controls} items={(bounds) => items.map((item, index) => ( )) } />

); } 6b:T2434,"use client"; import { type AnimationPlaybackControls, animate, type MotionValue, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type PointerEvent as ReactPointerEvent, type RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { CLOSE, DEFAULT_LIQUID, OPEN, PRESS_SCALE, rubberBand, TRAVEL, } from "./motion"; import { MAX_SPREAD, squashed, useSquish } from "./use-squish"; const OVERSHOOT = 0.06; export function clamp(value: number, low: number, high: number) { return value < low ? low : value > high ? high : value; } function quantise(value: number, min: number, max: number, step: number) { if (step <= 0) return clamp(value, min, max); return clamp(min + Math.round((value - min) / step) * step, min, max); } function tidy(value: number, step: number) { const decimals = (String(step).split(".")[1] ?? "").length; return decimals > 0 ? Number(value.toFixed(decimals)) : value; } export type GlassSliderGeometry = { width: number; trackHeight: number; thumbWidth: number; thumbHeight: number; travel: number; margin: number; containerWidth: number; containerHeight: number; }; export type UseGlassSliderOptions = { value: number; onValueChange?: (value: number) => void; min?: number; max?: number; step?: number; width?: number; trackHeight?: number; thumbHeight?: number; thumbWidth?: number; disabled?: boolean; interactive?: boolean; liquid?: number; }; export type UseGlassSliderResult = { geometry: GlassSliderGeometry; rootStyle: Record; lensProps: { width: number; height: number; x: MotionValue; y: number; lensWidth: MotionValue; lensHeight: MotionValue; lensRadius: MotionValue; shadowOpacity: MotionValue; tintOpacity: MotionValue; edgeBias: MotionValue; lag?: MotionValue; }; trackProps: { onPointerDown: (event: ReactPointerEvent) => void; onPointerMove: (event: ReactPointerEvent) => void; onPointerUp: (event: ReactPointerEvent) => void; onPointerCancel: (event: ReactPointerEvent) => void; }; rootRef: RefObject; hitRef: RefObject; setPressed: (pressed: boolean) => void; }; export function useGlassSlider({ value, onValueChange, min = 0, max = 100, step = 1, width = 240, trackHeight = 6, thumbHeight = 22, thumbWidth: thumbWidthProp, disabled, interactive = true, liquid = DEFAULT_LIQUID, }: UseGlassSliderOptions): UseGlassSliderResult { const reduceMotion = useReducedMotion() ?? false; const thumbWidth = thumbWidthProp ?? Math.round(2 * thumbHeight); const travel = width - thumbWidth; const overshoot = width * OVERSHOOT; const restHalfWidth = thumbWidth / 2; const restHalfHeight = thumbHeight / 2; const margin = Math.ceil( Math.max( restHalfWidth * (PRESS_SCALE * MAX_SPREAD - 1), restHalfHeight * (PRESS_SCALE - 1), ) + overshoot, ) + 2; const span = max - min || 1; const offsetFor = useCallback( (next: number) => ((clamp(next, min, max) - min) / span) * travel, [max, min, span, travel], ); const x = useMotionValue(offsetFor(value)); const lensHalfWidth = useMotionValue(restHalfWidth); const lensHalfHeight = useMotionValue(restHalfHeight); const restProgress = useMotionValue(1); const shadowOpacity = useMotionValue(0); const { squish, lag, setHeld, kick, jumped } = useSquish( x, !reduceMotion, liquid, ); const lensWidth = useTransform( [lensHalfWidth, squish], ([half, amount]: number[]) => squashed(half * 2, amount, true), ); const lensHeight = useTransform( [lensHalfHeight, squish], ([half, amount]: number[]) => squashed(half * 2, amount, false), ); const lensRadius = useTransform( [lensWidth, lensHeight], ([across, tall]: number[]) => Math.min(across, tall) / 2, ); const lensX = useTransform(x, (at) => margin + thumbWidth / 2 + at); const edgeBias = useTransform(restProgress, (at) => at * 0.5); const rootRef = useRef(null); const hitRef = useRef(null); const pointer = useRef(null); const dragging = useRef(false); const moveAnimation = useRef( undefined, ); const setShape = useCallback( (open: boolean) => { const factor = open ? PRESS_SCALE : 1; const options = open ? OPEN : CLOSE; const targets: Array<[typeof lensHalfWidth, number]> = [ [lensHalfWidth, restHalfWidth * factor], [lensHalfHeight, restHalfHeight * factor], [restProgress, open ? 0 : 1], [shadowOpacity, open ? 1 : 0], ]; for (const [motionValue, target] of targets) { if (reduceMotion) motionValue.set(target); else animate(motionValue, target, options); } setHeld(open && !reduceMotion); if (open) kick(1); }, [ kick, lensHalfHeight, lensHalfWidth, reduceMotion, restHalfHeight, restHalfWidth, restProgress, setHeld, shadowOpacity, ], ); // The fill is a share of the track, so it is right at any width, including // before a slider that fills its container has measured it. const [rootStyle] = useState(() => { const progress = travel > 0 ? clamp(x.get() / travel, 0, 1) : 0; return { "--slider-fill": `${progress * 100}%`, "--slider-progress": String(progress), }; }); useEffect(() => { const apply = (at: number) => { const root = rootRef.current; if (!root) return; const progress = travel > 0 ? clamp(at / travel, 0, 1) : 0; root.style.setProperty("--slider-fill", `${progress * 100}%`); root.style.setProperty("--slider-progress", String(progress)); }; apply(x.get()); return x.on("change", apply); }, [travel, x]); // A new width moves the handle to where its value now sits, at once: a spring // would slide it across the track every time the container resized. const lastTravel = useRef(travel); useLayoutEffect(() => { if (lastTravel.current === travel) return; lastTravel.current = travel; if (dragging.current) return; moveAnimation.current?.stop(); // jump, not set: set would record the move as velocity, and the spring // that follows a value change would carry it past the new spot and back. x.jump(offsetFor(value)); jumped(); }, [jumped, offsetFor, travel, value, x]); useEffect(() => { if (dragging.current) return; const target = offsetFor(value); moveAnimation.current?.stop(); if (reduceMotion) x.set(target); else moveAnimation.current = animate(x, target, TRAVEL); }, [offsetFor, reduceMotion, value, x]); useEffect( () => () => { moveAnimation.current?.stop(); }, [], ); const offsetAt = useCallback( (clientX: number) => { const hit = hitRef.current; if (!hit) return x.get(); const box = hit.getBoundingClientRect(); const scale = box.width > 0 ? box.width / width : 1; return (clientX - box.left) / scale - thumbWidth / 2; }, [thumbWidth, width, x], ); const valueAt = useCallback( (offset: number) => { const at = clamp(offset, 0, travel); const raw = min + (travel > 0 ? at / travel : 0) * span; return tidy(quantise(raw, min, max, step), step); }, [max, min, span, step, travel], ); const onPointerDown = (event: ReactPointerEvent) => { if (disabled || pointer.current !== null) return; pointer.current = event.pointerId; setShape(true); if (!interactive) return; event.currentTarget.setPointerCapture(event.pointerId); dragging.current = true; moveAnimation.current?.stop(); const offset = offsetAt(event.clientX); x.set(clamp(offset, 0, travel)); const next = valueAt(offset); if (next !== value) onValueChange?.(next); }; const onPointerMove = (event: ReactPointerEvent) => { if (event.pointerId !== pointer.current || !interactive) return; const offset = offsetAt(event.clientX); let position = offset; if (position < 0) position = -rubberBand(-position, overshoot); else if (position > travel) { position = travel + rubberBand(position - travel, overshoot); } x.set(position); const next = valueAt(offset); if (next !== value) onValueChange?.(next); }; const endPointer = (event: ReactPointerEvent) => { if (event.pointerId !== pointer.current) return; pointer.current = null; dragging.current = false; setShape(false); if (!interactive) return; const settled = offsetFor(valueAt(clamp(x.get(), 0, travel))); moveAnimation.current?.stop(); if (reduceMotion) x.set(settled); else moveAnimation.current = animate(x, settled, TRAVEL); }; return { rootStyle, geometry: { width, trackHeight, thumbWidth, thumbHeight, travel, margin, containerWidth: width + margin * 2, containerHeight: thumbHeight + margin * 2, }, lensProps: { width: width + margin * 2, height: thumbHeight + margin * 2, x: lensX, y: margin + thumbHeight / 2, lensWidth, lensHeight, lensRadius, shadowOpacity, tintOpacity: restProgress, edgeBias, lag, }, trackProps: { onPointerDown, onPointerMove, onPointerUp: endPointer, onPointerCancel: endPointer, }, rootRef, hitRef, setPressed: setShape, }; } 6c:T3775,"use client"; import { animate, type MotionValue, useMotionValue, useReducedMotion, } from "motion/react"; import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { supportsBackdropRefraction } from "./backdrop"; import { Glass } from "./glass"; import "./glass-pane.css"; import { DEFAULT_LIQUID, useDerived } from "./motion"; import type { LensProfile, LensShape } from "./optics"; import { type GlassTheme, paneLens, useLens } from "./presets"; import { LensPoolProvider, useGlassBackdrop, useGlassScope, useLensPool, } from "./scope"; import { afterScroll, useInView } from "./settle"; import { useGlassTheme } from "./theme"; import { squashed, useSquish } from "./use-squish"; export type GlassPaneVariant = "regular" | "clear"; export type GlassRefraction = "interactive" | "always"; const MATERIAL: Record< GlassPaneVariant, { tint: number; blur: number; saturate: number } > = { regular: { tint: 0.5, blur: 14, saturate: 1.8 }, clear: { tint: 0.12, blur: 0, saturate: 1 }, }; const PRESS_GROW = 0.1; const EDGE_BIAS = 0.5; const LIVE_FROM = 0.3; const LIVE_SETTLE_MS = 900; const WARM_PRESS = [0.35, 1] as const; const VIEW_MARGIN = "120px"; const NESTED_MARGIN = 48; const NESTED_FEATHER = 8; const PRESS_LIGHT = 0.18; const BARE_TINT = 0.35; const LAND_EVENT = "glass-pane:land"; const HIDE_EVENT = "glass-pane:hide"; const LAND = { type: "spring", stiffness: 300, damping: 15 } as const; const LAND_SPEED = 2.4; export type GlassLanding = { x: number; y: number }; function paneOf(element: Element) { return element.classList.contains("glass-pane") ? element : element.querySelector(".glass-pane"); } export function hideGlass( element: Element | null | undefined, hidden: boolean, ) { if (!element) return; paneOf(element)?.dispatchEvent( new CustomEvent(HIDE_EVENT, { detail: hidden }), ); } export function landGlass( element: Element | null | undefined, direction: GlassLanding = { x: 0, y: 1 }, ) { if (!element) return; paneOf(element)?.dispatchEvent( new CustomEvent(LAND_EVENT, { detail: direction }), ); } const ROOM = 24; export type GlassPaneShape = { x: MotionValue; y: MotionValue; width: MotionValue; height: MotionValue; radius: MotionValue; }; export type GlassPaneReach = { top: number; right: number; bottom: number; left: number; }; export type GlassPaneProps = HTMLAttributes & { radius?: number | "capsule"; variant?: GlassPaneVariant; tint?: string; tintOpacity?: number; lens?: Partial; theme?: GlassTheme; refraction?: GlassRefraction; press?: MotionValue; liquid?: number; frost?: MotionValue; shape?: GlassPaneShape; reach?: GlassPaneReach; ref?: Ref; children?: ReactNode; }; const NO_REACH: GlassPaneReach = { top: 0, right: 0, bottom: 0, left: 0 }; export function GlassPane({ radius = "capsule", variant = "regular", tint, tintOpacity, lens: lensOverrides, theme: themeProp, refraction = "interactive", press, liquid = DEFAULT_LIQUID, frost, shape, reach = NO_REACH, className, style, ref, children, ...rest }: GlassPaneProps) { const theme = useGlassTheme(themeProp); const lens = useLens(theme, lensOverrides, paneLens); const reduceMotion = useReducedMotion() ?? false; const material = MATERIAL[variant]; const bodyOpacity = tintOpacity ?? material.tint; const rootRef = useRef(null); const contentRef = useRef(null); const [size, setSize] = useState({ width: 0, height: 0 }); const [hidden, setHidden] = useState(false); const paneWidth = useMotionValue(0); const paneHeight = useMotionValue(0); useLayoutEffect(() => { const root = rootRef.current; if (!root) return; const measure = () => { paneWidth.set(root.offsetWidth); paneHeight.set(root.offsetHeight); setSize((current) => current.width === root.offsetWidth && current.height === root.offsetHeight ? current : { width: root.offsetWidth, height: root.offsetHeight }, ); }; measure(); if (typeof ResizeObserver === "undefined") return; let frame = 0; const observer = new ResizeObserver(() => { paneWidth.set(root.offsetWidth); paneHeight.set(root.offsetHeight); cancelAnimationFrame(frame); frame = requestAnimationFrame(measure); }); observer.observe(root); return () => { observer.disconnect(); cancelAnimationFrame(frame); }; }, [paneHeight, paneWidth]); const { width, height } = size; const drawn = width > 0 && height > 0; const cornerFor = (tall: number) => radius === "capsule" ? tall / 2 : Math.min(radius, tall / 2); const idle = useMotionValue(0); const pressed = press ?? idle; const still = useMotionValue(0); const { squish, kick } = useSquish(still, !reduceMotion, liquid); useEffect(() => { let down = pressed.get() > 0.5; return pressed.on("change", (value) => { const now = value > 0.5; if (now !== down) kick(now ? 1 : -1); down = now; }); }, [kick, pressed]); const restable = refraction === "always"; const [deferred, setDeferred] = useState(false); useLayoutEffect(() => setDeferred(!supportsBackdropRefraction()), []); // Safari and Firefox draw filters on the CPU and redraw them as they scroll // back into view, so resting glass there only starts bending on screen, once // the page has stopped scrolling. const inView = useInView(rootRef, VIEW_MARGIN, restable && deferred); const [resting, setResting] = useState(false); useEffect(() => { if (!restable || (deferred && !inView)) { setResting(false); return; } if (!deferred) { setResting(true); return; } return afterScroll(() => setResting(true)); }, [deferred, inView, restable]); const [live, setLive] = useState(false); useEffect(() => { let timer: ReturnType | undefined; // Shapes are derived during render, so their changes can arrive mid-render. const wake = () => { clearTimeout(timer); timer = undefined; queueMicrotask(() => setLive(true)); }; const settle = () => { if (timer !== undefined) return; timer = setTimeout(() => { timer = undefined; setLive(false); }, LIVE_SETTLE_MS); }; const follow = (value: number) => (value > LIVE_FROM ? wake() : settle()); follow(pressed.get()); const stops = [pressed.on("change", follow)]; if (shape) { const moved = () => { wake(); settle(); }; for (const value of [shape.x, shape.y, shape.width, shape.height]) { stops.push(value.on("change", moved)); } } return () => { clearTimeout(timer); for (const stop of stops) stop(); }; }, [pressed, shape]); useEffect(() => { const root = rootRef.current; if (!root) return; const hide = (event: Event) => setHidden(Boolean((event as CustomEvent).detail)); root.addEventListener(HIDE_EVENT, hide); return () => root.removeEventListener(HIDE_EVENT, hide); }, []); const nudgeX = useMotionValue(0); const nudgeY = useMotionValue(0); useEffect(() => { const root = rootRef.current; if (!root || reduceMotion) return; const land = (event: Event) => { const way = (event as CustomEvent).detail ?? { x: 0, y: 1 }; const speed = LAND_SPEED * paneHeight.get(); animate(nudgeX, 0, { ...LAND, velocity: way.x * speed }); animate(nudgeY, 0, { ...LAND, velocity: way.y * speed }); }; root.addEventListener(LAND_EVENT, land); return () => root.removeEventListener(LAND_EVENT, land); }, [nudgeX, nudgeY, paneHeight, reduceMotion]); useEffect(() => { const move = () => { const content = contentRef.current; if (!content) return; const x = nudgeX.get(); const y = nudgeY.get(); content.style.transform = x === 0 && y === 0 ? "" : `translate(${x}px, ${y}px)`; }; const stops = [nudgeX.on("change", move), nudgeY.on("change", move)]; return () => { for (const stop of stops) stop(); }; }, [nudgeX, nudgeY]); const boxX = useDerived([paneWidth], ([w]) => w / 2); const boxY = useDerived([paneHeight], ([h]) => h / 2); const centreX = shape?.x ?? boxX; const centreY = shape?.y ?? boxY; const baseWidth = shape?.width ?? paneWidth; const baseHeight = shape?.height ?? paneHeight; const baseRadius = useDerived( shape ? [shape.radius] : [paneHeight], ([value]) => (shape ? value : cornerFor(value)), ); const grow = useDerived([pressed, paneHeight], ([amount, tall]) => shape ? 0 : tall * PRESS_GROW * amount, ); const lensWidth = useDerived( [baseWidth, grow, squish], ([value, extra, amount]) => squashed(value + extra * 2, amount, true), ); const lensHeight = useDerived( [baseHeight, grow, squish], ([value, extra, amount]) => squashed(value + extra * 2, amount, false), ); const lensRadius = useDerived( [baseRadius, grow, lensWidth, lensHeight], ([value, extra, across, tall]) => radius === "capsule" && !shape ? Math.min(across, tall) / 2 : Math.min(value + extra, across / 2, tall / 2), ); const originX = ROOM + reach.left; const originY = ROOM + reach.top; const lensX = useDerived([centreX, nudgeX], ([at, by]) => originX + at + by); const warm = useMemo(() => { if (shape || !drawn) return undefined; return WARM_PRESS.map((amount) => { const extra = height * PRESS_GROW * amount; const across = width + extra * 2; const tall = height + extra * 2; const corner = radius === "capsule" ? Math.min(across, tall) / 2 : Math.min( Math.min(radius, height / 2) + extra, across / 2, tall / 2, ); const innerWidth = across - EDGE_BIAS * 2; const innerHeight = tall - EDGE_BIAS * 2; return { halfWidth: innerWidth / 2, halfHeight: innerHeight / 2, borderRadius: Math.max( 0, Math.min(corner - EDGE_BIAS, innerWidth / 2, innerHeight / 2), ), }; }); }, [drawn, height, radius, shape, width]); const lensY = useDerived([centreY, nudgeY], ([at, by]) => originY + at + by); const solid = useMotionValue(1); const frosted = frost ?? solid; const blur = useDerived([frosted], ([amount]) => material.blur * amount); const body = useDerived([pressed, frosted], ([amount, frostAmount]) => Math.min( 1, bodyOpacity * (BARE_TINT + (1 - BARE_TINT) * frostAmount) + PRESS_LIGHT * amount, ), ); // Glass on this pane bends a copy of the backdrop dressed as this pane: // blurred and tinted the same, drawn above the pane and below its content. const outer = useGlassScope(); const backdropNode = useGlassBackdrop(); const lensesRef = useRef(null); const [hosting, setHosting] = useState(false); useLayoutEffect(() => { const root = rootRef.current; setHosting( Boolean( outer && backdropNode && root?.closest("[data-glass-nested]") && contentRef.current?.querySelector("[data-glass]"), ), ); }, [outer, backdropNode]); const nested = useLensPool({ nested: true, enabled: hosting, element: () => lensesRef.current, backdrop: () => outer?.backdrop() ?? null, margin: NESTED_MARGIN, feather: NESTED_FEATHER, dress: ({ box, frost: layer }) => { const amount = material.blur * frosted.get(); layer.style.filter = amount > 0 ? `blur(${amount}px) saturate(${material.saturate})` : ""; const tintLayer = rootRef.current?.querySelector( ":scope > .glass-pane__glass > .glass__tint", ); if (!tintLayer) return; const style = getComputedStyle(tintLayer); box.style.setProperty("--lens-tint", style.backgroundColor); box.style.setProperty("--lens-tint-opacity", style.opacity); }, }); useEffect(() => { if (!shape) return; const content = contentRef.current; if (!content) return; const clip = () => { const w = lensWidth.get(); const h = lensHeight.get(); const left = centreX.get() - w / 2; const top = centreY.get() - h / 2; content.style.clipPath = `inset(${top}px ${width - left - w}px ${height - top - h}px ${left}px round ${lensRadius.get()}px)`; }; clip(); const stops = [centreX, centreY, lensWidth, lensHeight, lensRadius].map( (value) => value.on("change", clip), ); return () => { for (const stop of stops) stop(); }; }, [ centreX, centreY, height, lensHeight, lensRadius, lensWidth, shape, width, ]); return (

{ rootRef.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; }} className={["glass-pane", className].filter(Boolean).join(" ")} data-theme={theme} data-variant={variant} data-drawn={drawn ? "" : undefined} data-shaped={shape ? "" : undefined} style={ { "--glass-pane-fill": tint ?? "var(--glass-pane-tint)", "--glass-pane-fill-opacity": String(bodyOpacity), "--glass-pane-frost": material.blur ? `blur(${material.blur}px) saturate(${material.saturate})` : "none", "--glass-pane-shadow": lens.edgeShadow, ...style, borderRadius: drawn ? cornerFor(height) : radius === "capsule" ? 9999 : radius, } as CSSProperties } > {drawn ? (

); } 6d:T9c4,"use client"; import { type InputHTMLAttributes, useCallback, useId, useState } from "react"; import { GlassSliderSurface, type GlassSliderSurfaceProps, } from "./glass-slider-surface"; import "./glass-slider.css"; import type { LensProfile } from "./optics"; import type { GlassTheme } from "./presets"; import { useGlassTheme } from "./theme"; import { clamp } from "./use-glass-slider"; type NativeProps = Omit< InputHTMLAttributes, "type" | "onChange" | "value" | "defaultValue" | "width" | "height" | "size" >; export type GlassSliderProps = NativeProps & { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; min?: number; max?: number; step?: number; label?: string; width?: number; trackHeight?: number; thumbHeight?: number; thumbWidth?: number; lens?: Partial; theme?: GlassTheme; surfaceProps?: Partial; }; export function GlassSlider({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, label, width = 240, trackHeight = 6, thumbHeight = 22, thumbWidth, lens, theme: themeProp, disabled, className, id, surfaceProps, ...inputProps }: GlassSliderProps) { const theme = useGlassTheme(themeProp); const generatedId = useId(); const inputId = id ?? generatedId; const isControlled = value !== undefined; const [uncontrolled, setUncontrolled] = useState(defaultValue); const current = clamp(isControlled ? value : uncontrolled, min, max); const commit = useCallback( (next: number) => { if (!isControlled) setUncontrolled(next); onValueChange?.(next); }, [isControlled, onValueChange], ); return ( {label ? {label} : null} commit(Number(event.currentTarget.value))} /> ); } 6e:T3352,"use client"; import { createContext, type HTMLAttributes, type ReactNode, type Ref, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; export type GlassLens = { index: number; box: HTMLDivElement; frost: HTMLDivElement; copy: HTMLDivElement; margin: number; feather: number; }; export type LensPool = { nested: boolean; element: () => HTMLElement | null; backdrop: () => HTMLElement | null; lease: () => GlassLens | null; release: (lens: GlassLens) => void; onChange: (listener: () => void) => () => void; // Content scopes: the filtered layer, and the filter each glass in use hands it. inPlace?: boolean; applyFilter?: (key: string, filter: SVGFilterElement | null) => void; }; const PoolContext = createContext(null); const BackdropContext = createContext(null); export const LensPoolProvider = PoolContext.Provider; export function useGlassScope() { return useContext(PoolContext); } export function useGlassBackdrop() { return useContext(BackdropContext); } export function offsetWithin(element: Element, scope: HTMLElement) { const inner = element.getBoundingClientRect(); const outer = scope.getBoundingClientRect(); const scale = scope.offsetWidth > 0 && outer.width > 0 ? outer.width / scope.offsetWidth : 1; return { x: (inner.left - outer.left) / scale - scope.clientLeft, y: (inner.top - outer.top) / scale - scope.clientTop, width: outer.width / scale - scope.clientLeft * 2, height: outer.height / scale - scope.clientTop * 2, }; } const BACKGROUND = [ "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundOrigin", "backgroundClip", ] as const; // The copy covers the backdrop rather than adding to it, so it starts from the // scope's own background: a translucent backdrop would otherwise draw twice. function underlay(copy: HTMLElement, scope: HTMLElement | null) { if (!scope) return; const style = getComputedStyle(scope); for (const name of BACKGROUND) copy.style[name] = style[name]; } function idle(box: HTMLElement) { box.style.width = ""; box.style.height = ""; box.style.filter = ""; } export function useLensPool({ nested, enabled, element, backdrop, margin = 0, feather = 0, dress, }: { nested: boolean; enabled: boolean; element: () => HTMLElement | null; backdrop: () => HTMLElement | null; margin?: number; feather?: number; dress?: (lens: GlassLens) => void; }) { const boxes = useRef>([]); const frosts = useRef>([]); const copies = useRef>([]); const taken = useRef(new Set()); const listeners = useRef(new Set<() => void>()); const latest = useRef({ element, backdrop, margin, feather, dress }); latest.current = { element, backdrop, margin, feather, dress }; const [count, setCount] = useState(0); useLayoutEffect(() => { if (enabled) setCount((current) => Math.max(current, 1)); }, [enabled]); // biome-ignore lint/correctness/useExhaustiveDependencies: waiting lenses retry whenever the pool grows useLayoutEffect(() => { for (const listener of listeners.current) listener(); }, [count]); const pool = useMemo( () => ({ nested, element: () => latest.current.element(), backdrop: () => latest.current.backdrop(), lease: () => { for (let index = 0; index < boxes.current.length; index++) { const box = boxes.current[index]; const frost = frosts.current[index]; const copy = copies.current[index]; if (box && frost && copy && !taken.current.has(index)) { taken.current.add(index); const lens = { index, box, frost, copy, margin: latest.current.margin, feather: latest.current.feather, }; underlay(copy, latest.current.backdrop()); latest.current.dress?.(lens); return lens; } } setCount((current) => Math.max(current, taken.current.size + 1)); return null; }, release: (lens) => { taken.current.delete(lens.index); idle(lens.box); }, onChange: (listener) => { listeners.current.add(listener); return () => listeners.current.delete(listener); }, }), [nested], ); const render = (content: ReactNode) => Array.from({ length: count }, (_, index) => ( )); return { pool, render }; } export type GlassScopeRefraction = "content" | "backdrop"; const SVG_NS = "http://www.w3.org/2000/svg"; const SHARED_INPUTS = new Set([ "SourceGraphic", "SourceAlpha", "BackgroundImage", "BackgroundAlpha", "FillPaint", "StrokePaint", ]); const REFERENCE_ATTRIBUTES = new Set(["result", "in", "in2"]); type MergedLens = { source: SVGFilterElement; clones: Element[]; output: string; outline: string; }; // Alpha of a computed colour: rgba() or a `/ alpha` suffix. function alphaOf(color: string) { const slash = color.lastIndexOf("/"); if (slash >= 0) return Number.parseFloat(color.slice(slash + 1)) || 0; const parts = color.replace(/^[a-z]+$|$$/g, "").split(","); return parts.length >= 4 ? Number.parseFloat(parts[3]) || 0 : 1; } function reference(key: string, name: string, value: string) { return REFERENCE_ATTRIBUTES.has(name) && !SHARED_INPUTS.has(value) ? `${key}-${value}` : value; } // Keeps a clone in step with its source, its results prefixed by lens. function follow(key: string, source: Element, clone: Element) { for (const { name, value } of Array.from(source.attributes)) { const next = reference(key, name, value); if (clone.getAttribute(name) !== next) clone.setAttribute(name, next); } for (const { name } of Array.from(clone.attributes)) { if (!source.hasAttribute(name)) clone.removeAttribute(name); } const sourceChildren = Array.from(source.children); const cloneChildren = Array.from(clone.children); sourceChildren.forEach((child, index) => { const twin = cloneChildren[index]; if (twin) follow(key, child, twin); }); } // A lens's primitives without the ending it uses on its own. function lensPrimitives(filter: SVGFilterElement) { const children = Array.from(filter.children); const output = filter.dataset.result; if (output) { return { primitives: children.filter( (child) => !child.hasAttribute("data-standalone"), ), output, outline: filter.dataset.outline ?? "", }; } const last = children[children.length - 1]; if (last && !last.hasAttribute("result")) { return { primitives: children.slice(0, -1), output: last.getAttribute("in") ?? "", outline: "", }; } return { primitives: children, output: last?.getAttribute("result") ?? "", outline: "", }; } export type GlassScopeProps = HTMLAttributes & { backdrop?: ReactNode; // `content` bends the scope's own content, with one filter over the whole // scope. `backdrop` bends a lens-sized copy of `backdrop` and nothing else. refraction?: GlassScopeRefraction; // With `content`, how far past the scope's edge a lens still bends, in px. bleed?: number; ref?: Ref; children?: ReactNode; }; const DEFAULT_BLEED = 40; export function GlassScope({ backdrop, refraction = "content", bleed = DEFAULT_BLEED, className, ref, children, ...props }: GlassScopeProps) { const rootRef = useRef(null); const contentRef = useRef(null); const sharedId = `glass-scope-${useId().replaceAll(":", "")}`; const inPlace = refraction === "content"; const copied = backdrop !== undefined && backdrop !== null; const { pool, render } = useLensPool({ nested: false, enabled: copied && !inPlace, element: () => rootRef.current, backdrop: () => rootRef.current, }); // One filter for every lens: two url() filters on one element leave one // unrendered in Chromium and WebKit, and WebKit drops a filter around a filtered layer. const sharedRef = useRef(null); const merged = useRef(new Map()); const version = useRef(0); const inPlacePool = useMemo( () => ({ nested: false, inPlace: true, element: () => contentRef.current, backdrop: () => contentRef.current, lease: () => null, release: () => {}, onChange: () => () => {}, applyFilter: (key, filter) => { const shared = sharedRef.current; const content = contentRef.current; if (!shared || !content) return; const lenses = merged.current; if (filter === null) { const lens = lenses.get(key); if (!lens) return; lenses.delete(key); for (const clone of lens.clones) clone.remove(); } else { const { primitives, output, outline } = lensPrimitives(filter); let lens = lenses.get(key); if (!lens || lens.source !== filter) { if (lens) for (const clone of lens.clones) clone.remove(); lens = { source: filter, clones: primitives.map( (primitive) => primitive.cloneNode(true) as Element, ), output: "", outline: "", }; lenses.set(key, lens); } lens.output = reference(key, "in", output); lens.outline = outline ? reference(key, "in", outline) : ""; primitives.forEach((primitive, index) => { const clone = lens.clones[index]; if (clone) follow(key, primitive, clone); }); } if (lenses.size === 0) { content.style.filter = ""; shared.replaceChildren(); return; } // A see-through layer gets the outlines cut out first, or translucent // pixels under a lens draw twice. One merged cut: every pass costs in Safari. const make = (name: string) => shared.ownerDocument.createElementNS(SVG_NS, name); const node = (input: string) => { const element = make("feMergeNode"); element.setAttribute("in", input); return element; }; const merge = make("feMerge"); const nodes: Element[] = []; const outlines: string[] = []; for (const lens of lenses.values()) { nodes.push(...lens.clones); if (lens.outline) outlines.push(lens.outline); merge.append(node(lens.output)); } const seeThrough = alphaOf(getComputedStyle(content).backgroundColor) < 1; let rest = "SourceGraphic"; if (seeThrough && outlines.length) { const all = make("feMerge"); for (const outline of outlines) all.append(node(outline)); all.setAttribute("result", "outlines"); const hole = make("feComposite"); hole.setAttribute("in", "SourceGraphic"); hole.setAttribute("in2", "outlines"); hole.setAttribute("operator", "out"); hole.setAttribute("result", "rest"); nodes.push(all, hole); rest = "rest"; } merge.prepend(node(rest)); shared.replaceChildren(...nodes, merge); // Safari caches filter output by id, so every update takes a fresh one. version.current += 1; shared.id = `${sharedId}-v${version.current}`; content.style.filter = `url(#${shared.id})`; }, }), [sharedId], ); return (

{ rootRef.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; }} className={[ "glass-scope", inPlace ? "glass-scope--in-place" : undefined, className, ] .filter(Boolean) .join(" ")} > {inPlace ? ( <>

{copied ? ( ) : null} {children}

) : ( <> {copied ? ( ) : null} {copied ? render(backdrop) : null} {children} )}

); } 6f:Tb3d,.glass { position: relative; display: block; overflow: visible; } :where(.glass-scope) { transform: translate(0); } .glass-scope__backdrop, .glass-scope__lens { position: absolute; z-index: -1; pointer-events: none; } .glass-scope__backdrop { inset: 0; } /* The filtered layer of a content scope, padded by the bleed. WebKit measures a filter from the nearest transformed element. */ .glass-scope__content { position: relative; box-sizing: content-box; height: 100%; transform: translate(0); /* Inherited so a recolour follows at once; painted inside the bleed only. */ background: inherit; background-clip: content-box; background-origin: content-box; pointer-events: none; } /* Or the layer's negative margin collapses through the scope. */ .glass-scope--in-place { contain: layout; } /* The scope's own box, isolated so the backdrop's z-index -1 stays above the layer's background. */ .glass-scope__inner { position: relative; height: 100%; isolation: isolate; pointer-events: auto; } .glass-scope__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* Safari paints a partial repaint of a filtered layer black, so the lens keeps a layer of its own. WebKit measures a filter from the nearest transformed element, so it carries an identity transform too. */ .glass-scope__lens { top: 0; left: 0; width: 0; height: 0; overflow: hidden; transform: translate(0); will-change: transform; } .glass-scope__frost, .glass-scope__copy { position: absolute; } .glass-scope__frost { inset: 0; } .glass__target { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: left top; will-change: filter, clip-path; } .glass__target-inner { transform-origin: left top; } .glass__backdrop { position: absolute; inset: 0; pointer-events: none; } .glass__defs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .glass__rim { position: absolute; top: 0; left: 0; box-sizing: border-box; pointer-events: none; will-change: transform, opacity; } .glass__tint { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; will-change: transform, opacity; } .glass__frost { position: absolute; top: 0; left: 0; pointer-events: none; will-change: transform, backdrop-filter; } .glass__face { position: absolute; top: 0; left: 0; pointer-events: none; } .glass__light { position: absolute; top: 0; left: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; will-change: transform; } /* Overlays in a filtered layer must not be composited. */ .glass[data-flat] .glass__rim, .glass[data-flat] .glass__tint, .glass[data-flat] .glass__frost, .glass[data-flat] .glass__light { will-change: auto; } .glass-theme { display: contents; } 70:T4d9,"use client"; import { type MotionValue, motionValue } from "motion/react"; import { useLayoutEffect, useState } from "react"; export const TRAVEL = { type: "spring", stiffness: 320, damping: 30, mass: 1, } as const; export const OPEN = { type: "spring", stiffness: 520, damping: 34, mass: 0.7, } as const; export const CLOSE = { type: "spring", stiffness: 260, damping: 30, mass: 1, } as const; export const DWELL = 260; export const DEFAULT_LIQUID = 0.6; export const DRAG_SLOP = 3; export const PRESS_SCALE = 1.4; export function rubberBand(distance: number, limit: number) { if (distance <= 0 || limit <= 0) return 0; return (1 - 1 / (distance / limit + 1)) * limit; } export function useDerived( inputs: readonly MotionValue[], compute: (values: number[]) => T, ): MotionValue { const [value] = useState(() => motionValue(compute(inputs.map((input) => input.get()))), ); value.set(compute(inputs.map((input) => input.get()))); useLayoutEffect(() => { const update = () => value.set(compute(inputs.map((input) => input.get()))); update(); const stops = inputs.map((input) => input.on("change", update)); return () => { for (const stop of stops) stop(); }; }); return value; } 71:T8c5,"use client"; import { useMemo } from "react"; import type { LensProfile } from "./optics"; export type GlassTheme = "light" | "dark"; export const defaultLens: LensProfile = { mapSize: 1024, ior: 1.52, dispersion: 0.04, thickness: 8.5, base: 0, bevel: 4, bevelProfile: 2, maxSlope: 6, magnification: 1.1, domeLength: 1, softness: 1, environment: 1.4, rimLight: 0.55, rimShadow: 0.12, roughness: 0.28, specularStrength: 0.8, backLight: 0.45, lightAngle: 115, lightElevation: 30, shadingStrength: 0.9, openTint: 0, edgeShadow: "0 2px 6px rgba(0, 0, 0, 0.16)", edgeInsetShadow: "none", restEdgeShadow: "0 1.5px 4px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.06)", }; export const switchLens: LensProfile = { ...defaultLens, thickness: 14, bevel: 8, bevelProfile: 3, dispersion: 0.2, magnification: 0.78, }; export const sliderLens: LensProfile = { ...defaultLens, thickness: 6, base: 32, bevel: 10, bevelProfile: 4, maxSlope: 4, magnification: 1, dispersion: 0, openTint: 0.1, edgeShadow: "0 3px 14px rgba(0, 0, 0, 0.1)", restEdgeShadow: "0 1.333px 5.333px rgba(0, 0, 0, 0.18)", }; export const toggleLens: LensProfile = { ...defaultLens, thickness: 6.4, base: 14, bevel: 10.7, bevelProfile: 4, maxSlope: 4, magnification: 1, dispersion: 0, openTint: 0.1, edgeShadow: "0 3px 14px rgba(0, 0, 0, 0.1)", restEdgeShadow: "0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04)", }; export const paneLens: LensProfile = { ...defaultLens, thickness: 5, base: 8, bevel: 7, bevelProfile: 4, maxSlope: 4, magnification: 1, dispersion: 0, rimLight: 0.8, edgeShadow: "0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08)", edgeInsetShadow: "none", restEdgeShadow: "none", }; export const darkLens: Partial = { environment: 1.2, specularStrength: 1.1, shadingStrength: 1.1, edgeShadow: "0 2px 6px rgba(0, 0, 0, 0.36)", edgeInsetShadow: "none", }; export function useLens( theme: GlassTheme = "light", overrides?: Partial, base: LensProfile = defaultLens, ): LensProfile { return useMemo( () => ({ ...base, ...(theme === "dark" ? darkLens : undefined), ...overrides, }), [base, theme, overrides], ); } 72:T13c2,"use client"; import { type MotionValue, useMotionValue } from "motion/react"; import { useCallback, useEffect, useRef } from "react"; const MAX_SQUASH = 0.3; const MAX_WOBBLE = 0.08; export const MAX_STRETCH = 1 / (1 - MAX_SQUASH - MAX_WOBBLE); export const MAX_SPREAD = 1 + MAX_WOBBLE; const KNEE_SPEED = 900; const HELD_SQUASH = 0.16; const STIFFNESS = 240; const DAMPING = 17; const WOBBLE_FREQUENCY = 3.5; const WOBBLE_DAMPING = 0.4; const WOBBLE_KICK = 2.2; const WOBBLE_FROM_STOP = 0.5; const LAG_PIXELS = 3; const LAG_KNEE_SPEED = 900; const LAG_FREQUENCY = 4; const LAG_DAMPING = 0.5; const SUBSTEPS = 4; export function useSquish( position: MotionValue, enabled = true, liquid = 0, speedSquash = 1, ) { const squish = useMotionValue(0); const lag = useMotionValue(0); const held = useRef(0); const start = useRef<() => void>(() => {}); const rebase = useRef<() => void>(() => {}); const pending = useRef(0); const amount = enabled ? Math.max(0, liquid) : 0; useEffect(() => { if (!enabled) return; let frame = 0; let offset = 0; let velocity = 0; let wobble = 0; let wobbleVelocity = 0; let trail = 0; let trailVelocity = 0; let last = 0; let previous = position.get(); let running = false; const wobbleRate = 2 * Math.PI * WOBBLE_FREQUENCY; const lagRate = 2 * Math.PI * LAG_FREQUENCY; const step = (now: number) => { const elapsed = (now - last) / 1000; const delta = Math.min(elapsed, 0.033); last = now; const current = position.get(); const speed = (current - previous) / Math.min(Math.max(elapsed, 0.008), 0.03); previous = current; const magnitude = Math.abs(speed); const fromSpeed = MAX_SQUASH * speedSquash * (1 - Math.exp(-magnitude / KNEE_SPEED)); const target = held.current > 0 ? Math.max(fromSpeed, held.current) : fromSpeed; const acceleration = -STIFFNESS * (offset - target) - DAMPING * velocity; velocity += acceleration * delta; offset += velocity * delta; if (Math.abs(offset - target) < 2e-3 && Math.abs(velocity) < 2e-2) { offset = target; velocity = 0; } if (amount > 0) { wobbleVelocity += pending.current; pending.current = 0; const trailTarget = -LAG_PIXELS * amount * Math.tanh(speed / LAG_KNEE_SPEED); const collapsing = offset > 0 ? velocity < 0 : velocity > 0; const thrown = collapsing ? WOBBLE_FROM_STOP * amount * velocity : 0; const slice = delta / SUBSTEPS; for (let index = 0; index < SUBSTEPS; index += 1) { wobbleVelocity += (-wobbleRate * wobbleRate * wobble - 2 * WOBBLE_DAMPING * wobbleRate * wobbleVelocity + thrown * wobbleRate) * slice; wobble += wobbleVelocity * slice; trailVelocity += (-lagRate * lagRate * (trail - trailTarget) - 2 * LAG_DAMPING * lagRate * trailVelocity) * slice; trail += trailVelocity * slice; } wobble = Math.max(-MAX_WOBBLE, Math.min(MAX_WOBBLE, wobble)); if (Math.abs(wobble) < 5e-4 && Math.abs(wobbleVelocity) < 5e-3) { wobble = 0; wobbleVelocity = 0; } if ( Math.abs(trail - trailTarget) < 0.02 && Math.abs(trailVelocity) < 0.2 ) { trail = trailTarget; trailVelocity = 0; } } const shaped = speedSquash < 0 ? Math.min(0, offset) : Math.max(0, offset); squish.set(shaped + wobble); lag.set(Math.round(trail * 100) / 100); const settled = Math.abs(offset) < 5e-4 && Math.abs(velocity) < 5e-3 && magnitude < 5e-3 && held.current === 0 && wobble === 0 && pending.current === 0 && Math.abs(trail) < 0.01 && trailVelocity === 0; if (settled) { running = false; squish.set(0); lag.set(0); return; } frame = requestAnimationFrame(step); }; start.current = () => { if (running) return; running = true; last = performance.now(); previous = position.get(); frame = requestAnimationFrame(step); }; rebase.current = () => { previous = position.get(); }; const unsubscribe = position.on("change", () => start.current()); return () => { unsubscribe(); cancelAnimationFrame(frame); start.current = () => {}; rebase.current = () => {}; }; }, [amount, enabled, lag, position, speedSquash, squish]); // A move that was a jump, such as a track resizing under its handle, is not // speed: the next frame measures from where the jump landed. const jumped = useCallback(() => rebase.current(), []); const setHeld = useCallback((value: boolean) => { held.current = value ? HELD_SQUASH : 0; if (value) start.current(); }, []); const kick = useCallback( (direction: 1 | -1) => { if (amount <= 0) return; pending.current += direction * WOBBLE_KICK * amount; start.current(); }, [amount], ); return { squish, lag: amount > 0 ? lag : undefined, setHeld, kick, jumped }; } export function squashed(base: number, amount: number, across: boolean) { const factor = 1 - Math.min(0.6, Math.max(-MAX_WOBBLE, amount)); return across ? base * factor : base / factor; } 73:T43aa,export type LensShape = { halfWidth: number; halfHeight: number; borderRadius: number; }; export type LensMap = { id: number; url: string; light: string; slices?: LensSlices; displacement: number; chroma: [number, number, number]; reach: number; rimReach: number; shadingStrength: number; }; export type LensSlices = { width: number; height: number; cut?: LensCut; map: string[]; light: string[]; }; export type LensCut = { axis: "x" | "y"; start: number; end: number; }; export type LensProfile = { mapSize: number; ior: number; dispersion: number; thickness: number; base: number; bevel: number; bevelProfile: number; maxSlope: number; magnification: number; domeLength: number; softness: number; environment: number; rimLight: number; rimShadow: number; roughness: number; specularStrength: number; backLight: number; lightAngle: number; lightElevation: number; shadingStrength: number; openTint: number; edgeShadow: string; edgeInsetShadow: string; restEdgeShadow: string; }; const PROFILE_SAMPLES = 512; const DOME_HANDOVER = 0.5; const SHAPE_STEP = 0.5; const MIN_DENSITY = 2; const MAX_DENSITY = 8; export function snapShape(shape: LensShape): LensShape { const snap = (value: number) => Math.round(value / SHAPE_STEP) * SHAPE_STEP; return { halfWidth: snap(shape.halfWidth), halfHeight: snap(shape.halfHeight), borderRadius: snap(shape.borderRadius), }; } const decodedMaps = new Set(); const decodingMaps = new Map>(); export function isMapDecoded(url: string) { return decodedMaps.has(url); } export function decodeMap(url: string): Promise { if (decodedMaps.has(url)) return Promise.resolve(); const pending = decodingMaps.get(url); if (pending) return pending; const task = new Promise((resolve) => { if (typeof Image === "undefined") { resolve(); return; } const image = new Image(); const settle = () => { decodedMaps.add(url); decodingMaps.delete(url); resolve(); }; image.src = url; if (typeof image.decode === "function") { image.decode().then(settle, settle); } else { image.onload = settle; image.onerror = settle; } }); decodingMaps.set(url, task); return task; } function clamp(value: number, low: number, high: number) { return value < low ? low : value > high ? high : value; } function toByte(value: number) { const rounded = Math.round(value); return rounded < 0 ? 0 : rounded > 255 ? 255 : rounded; } function surface( inward: number, thickness: number, bevel: number, shape: number, maxSlope: number, base: number, ) { if (inward >= 1) return { height: base + thickness, slope: 0 }; const outward = 1 - inward; const raised = 1 - outward ** shape; const height = base + thickness * raised ** (1 / shape); const rise = raised > 1e-6 ? thickness * outward ** (shape - 1) * raised ** (1 / shape - 1) : thickness * 1e6; return { height, slope: Math.min(rise / bevel, maxSlope) }; } type Profile = { magnitude: Float32Array; tangent: Float32Array; upward: Float32Array; fresnel: Float32Array; peak: number; }; function buildProfile(profile: LensProfile, bevel: number): Profile { const magnitude = new Float32Array(PROFILE_SAMPLES); const tangent = new Float32Array(PROFILE_SAMPLES); const upward = new Float32Array(PROFILE_SAMPLES); const fresnel = new Float32Array(PROFILE_SAMPLES); const eta = 1 / profile.ior; const f0 = ((profile.ior - 1) / (profile.ior + 1)) ** 2; let peak = 0; for (let index = 0; index < PROFILE_SAMPLES; index += 1) { const inward = index / (PROFILE_SAMPLES - 1); const { height, slope } = surface( inward, profile.thickness, bevel, profile.bevelProfile, profile.maxSlope, profile.base, ); const length = Math.hypot(slope, 1); const normalZ = 1 / length; const normalXY = slope / length; let reach = 0; const k = 1 - eta * eta * (1 - normalZ * normalZ); if (k >= 0) { const bend = eta * normalZ - Math.sqrt(k); const downward = -eta + bend * normalZ; if (downward < 0) reach = (bend * normalXY * height) / -downward; } magnitude[index] = reach; tangent[index] = normalXY; upward[index] = normalZ; fresnel[index] = (1 - f0) * (1 - normalZ) ** 5; const size = Math.abs(reach); if (size > peak) peak = size; } return { magnitude, tangent, upward, fresnel, peak }; } let sharedCanvas: HTMLCanvasElement | undefined; const mapCache = new Map(); const MAP_CACHE_LIMIT = 24; let lastMapId = 0; let encodeCanvas: HTMLCanvasElement | undefined; function encodeImage(image: ImageData) { encodeCanvas ??= document.createElement("canvas"); encodeCanvas.width = image.width; encodeCanvas.height = image.height; encodeCanvas .getContext("2d", { willReadFrequently: true }) ?.putImageData(image, 0, 0); return encodeCanvas.toDataURL("image/png"); } function cornerReach(reach: number, step: number) { return Math.ceil(reach / step - 0.5) + 1; } function cropImage( image: ImageData, x0: number, x1: number, y0: number, y1: number, ) { const piece = new ImageData(x1 - x0, y1 - y0); for (let y = y0; y < y1; y += 1) { const from = (y * image.width + x0) * 4; piece.data.set( image.data.subarray(from, from + (x1 - x0) * 4), (y - y0) * piece.width * 4, ); } return encodeImage(piece); } function planCut( width: number, height: number, reach: { x: number; y: number }, ) { const axis = width >= height ? "x" : "y"; const length = axis === "x" ? width : height; const ends = axis === "x" ? reach.x : reach.y; return ends * 2 < length ? ({ axis, start: ends, end: ends } satisfies LensCut) : undefined; } function beyondStretch( cut: LensCut | undefined, row: number, column: number, width: number, height: number, ) { if (!cut) return false; return cut.axis === "x" ? column > cut.start && column < width - cut.end : row > cut.start && row < height - cut.end; } function slicePieces(image: ImageData, cut: LensCut) { const { width, height } = image; const length = cut.axis === "x" ? width : height; return [ [0, cut.start], [cut.start, cut.start + 1], [length - cut.end, length], ].map(([from, to]) => cut.axis === "x" ? cropImage(image, from, to, 0, height) : cropImage(image, 0, width, from, to), ); } function unslice(image: ImageData, cut: LensCut) { const { width, height, data } = image; const whole = new ImageData(new Uint8ClampedArray(data), width, height); for (let row = 0; row < height; row += 1) { for (let column = 0; column < width; column += 1) { if (!beyondStretch(cut, row, column, width, height)) continue; const from = (cut.axis === "x" ? row * width + cut.start : cut.start * width + column) * 4; whole.data.copyWithin((row * width + column) * 4, from, from + 4); } } return whole; } export function profileKey(profile: LensProfile) { return [ profile.ior, profile.dispersion, profile.thickness, profile.base, profile.bevel, profile.bevelProfile, profile.maxSlope, profile.magnification, profile.domeLength, profile.environment, profile.rimLight, profile.rimShadow, profile.roughness, profile.specularStrength, profile.backLight, profile.lightAngle, profile.lightElevation, ].join(":"); } function cacheKey( shape: LensShape, profile: LensProfile, width: number, height: number, ) { return [ shape.halfWidth, shape.halfHeight, shape.borderRadius, width, height, profileKey(profile), ].join(":"); } function resolutionFor(shape: LensShape, ceiling: number, scale: number) { const width = shape.halfWidth * 2; const height = shape.halfHeight * 2; let density = clamp(scale, MIN_DENSITY, MAX_DENSITY); density = Math.min(density, ceiling / Math.max(width, height)); return { width: Math.max(4, Math.round(width * density)), height: Math.max(4, Math.round(height * density)), }; } function halfVector(azimuth: number, elevation: number) { const lightX = Math.cos(azimuth) * Math.cos(elevation); const lightY = -Math.sin(azimuth) * Math.cos(elevation); const lightZ = Math.sin(elevation); const length = Math.hypot(lightX, lightY, lightZ + 1) || 1; return { x: lightX / length, y: lightY / length, z: (lightZ + 1) / length, }; } export function generateLensMap( shape: LensShape, profile: LensProfile, scale = 1, ): LensMap | undefined { if (typeof document === "undefined") return undefined; if (shape.halfWidth <= 0 || shape.halfHeight <= 0) return undefined; const snapped = snapShape(shape); const size = resolutionFor(snapped, profile.mapSize, scale); const key = cacheKey(snapped, profile, size.width, size.height); const cached = mapCache.get(key); if (cached) return cached; if ( !sharedCanvas || sharedCanvas.width !== size.width || sharedCanvas.height !== size.height ) { sharedCanvas = document.createElement("canvas"); sharedCanvas.width = size.width; sharedCanvas.height = size.height; } const context = sharedCanvas.getContext("2d", { willReadFrequently: true }); if (!context) return undefined; const { halfWidth, halfHeight } = snapped; const inradius = Math.min(halfWidth, halfHeight); const radius = clamp(snapped.borderRadius, 0, inradius); const bevel = clamp(profile.bevel, 0.5, inradius); const { magnitude, tangent, upward, fresnel } = buildProfile(profile, bevel); const pull = 1 - 1 / Math.max(profile.magnification, 0.01); const dished = Math.abs(pull) > 1e-4; const handover = bevel * DOME_HANDOVER; const lastSample = PROFILE_SAMPLES - 1; const perUnit = lastSample / bevel; const length = clamp(profile.domeLength, 0, 1); const coreX = Math.max(0, halfWidth - halfHeight) * length; const coreY = Math.max(0, halfHeight - halfWidth) * length; const azimuth = (profile.lightAngle * Math.PI) / 180; const elevation = (profile.lightElevation * Math.PI) / 180; const keyHalf = halfVector(azimuth, elevation); const echoHalf = halfVector(azimuth + Math.PI, elevation); const shininess = 2 / Math.max(1e-4, profile.roughness ** 4) - 2; const lobeFloor = (1 / 512) ** (1 / shininess); const { width, height } = size; const stepX = (2 * halfWidth) / width; const stepY = (2 * halfHeight) / height; const halfStep = (stepX + stepY) / 4; const innerX = halfWidth - radius; const innerY = halfHeight - radius; const cut = dished ? undefined : planCut(width, height, { x: cornerReach(Math.max(radius, bevel), stepX), y: cornerReach(Math.max(radius, bevel), stepY), }); const keep = (side: "x" | "y", size: number): Array<[number, number]> => cut?.axis === side ? [ [0, cut.start + 1], [size - cut.end, size], ] : [[0, size]]; const keptRows = keep("y", height); const keptColumns = keep("x", width); const eachKept = (visit: (index: number) => void) => { for (const [firstRow, lastRow] of keptRows) { for (let row = firstRow; row < lastRow; row += 1) { for (const [firstColumn, lastColumn] of keptColumns) { for (let column = firstColumn; column < lastColumn; column += 1) { visit(row * width + column); } } } } }; const count = width * height; const rimX = new Float32Array(count); const rimY = new Float32Array(count); const dishX = new Float32Array(count); const dishY = new Float32Array(count); const shades = new Float32Array(count); const covered = new Uint8ClampedArray(count); let reach = 0; let rimReach = 0; for (const [firstRow, lastRow] of keptRows) for (let row = firstRow; row < lastRow; row += 1) { const y = (row + 0.5) * stepY - halfHeight; const absY = Math.abs(y); const signY = y < 0 ? -1 : 1; const cornerY = absY - innerY; const axialY = y - clamp(y, -coreY, coreY); for (const [firstColumn, lastColumn] of keptColumns) for (let column = firstColumn; column < lastColumn; column += 1) { const index = row * width + column; const x = (column + 0.5) * stepX - halfWidth; const absX = Math.abs(x); const cornerX = absX - innerX; let distance: number; if (cornerX > 0 && cornerY > 0) { distance = Math.hypot(cornerX, cornerY) - radius; } else { distance = Math.max(cornerX, cornerY) - radius; } if (distance >= halfStep) continue; const coverage = clamp(0.5 - distance / (halfStep * 2), 0, 1); covered[index] = Math.round(coverage * 255); const depth = Math.max(0, -distance); if (dished) { const t = handover > 0 ? clamp(depth / handover, 0, 1) : 1; const fade = t * t * (3 - 2 * t) * coverage; const domeX = -pull * (x - clamp(x, -coreX, coreX)) * fade; const domeY = -pull * axialY * fade; dishX[index] = domeX; dishY[index] = domeY; const outside = Math.max( Math.abs(x + domeX) - halfWidth, Math.abs(y + domeY) - halfHeight, ); if (outside > reach) reach = outside; } if (depth >= bevel) continue; let gradientX: number; let gradientY: number; if (cornerX > 0 && cornerY > 0) { const length = Math.hypot(cornerX, cornerY) || 1e-6; gradientX = (cornerX / length) * (x < 0 ? -1 : 1); gradientY = (cornerY / length) * signY; } else if (cornerX > cornerY) { gradientX = x < 0 ? -1 : 1; gradientY = 0; } else { gradientX = 0; gradientY = signY; } const at = depth * perUnit; const low = at | 0; const high = low >= lastSample ? lastSample : low + 1; const blend = at - low; const bend = magnitude[low] + (magnitude[high] - magnitude[low]) * blend; const lateral = tangent[low] + (tangent[high] - tangent[low]) * blend; const vertical = upward[low] + (upward[high] - upward[low]) * blend; const reflectance = fresnel[low] + (fresnel[high] - fresnel[low]) * blend; const normalX = lateral * gradientX; const normalY = lateral * gradientY; const facing = -normalY * profile.environment; let shade = reflectance * (profile.rimLight + (facing > 0 ? facing : facing * profile.rimShadow)); const lobe = normalX * keyHalf.x + normalY * keyHalf.y + vertical * keyHalf.z; if (lobe > lobeFloor) { shade += lobe ** shininess * profile.specularStrength; } const echo = normalX * echoHalf.x + normalY * echoHalf.y + vertical * echoHalf.z; if (echo > lobeFloor && profile.backLight > 0) { shade += echo ** shininess * profile.specularStrength * profile.backLight; } rimX[index] = bend * gradientX * coverage; rimY[index] = bend * gradientY * coverage; shades[index] = clamp(shade, -1, 1) * coverage; const beyond = Math.max( Math.abs(x + rimX[index] + dishX[index]) - halfWidth, Math.abs(y + rimY[index] + dishY[index]) - halfHeight, ); if (beyond > rimReach) rimReach = beyond; } } let combinedPeak = 0; eachKept((index) => { rimX[index] += dishX[index]; rimY[index] += dishY[index]; const amount = Math.max(Math.abs(rimX[index]), Math.abs(rimY[index])); if (amount > combinedPeak) combinedPeak = amount; }); const bendScale = combinedPeak > 1e-6 ? 127.5 / combinedPeak : 0; const image = context.createImageData(width, height); const pixels = image.data; const lightImage = context.createImageData(width, height); const lightPixels = lightImage.data; const shading = profile.shadingStrength; eachKept((index) => { const offset = index * 4; const red = toByte(127.5 + rimX[index] * bendScale); const green = toByte(127.5 + rimY[index] * bendScale); const blue = toByte(127.5 + 127.5 * shades[index]); const coverage = covered[index] / 255; const ground = 128 * (1 - coverage); pixels[offset] = Math.round(red * coverage + ground); pixels[offset + 1] = Math.round(green * coverage + ground); pixels[offset + 2] = covered[index]; pixels[offset + 3] = 255; const lit = (blue * coverage + ground) / 255; const grey = toByte(255 * (0.5 + shading * (lit - 0.5))); lightPixels[offset] = grey; lightPixels[offset + 1] = grey; lightPixels[offset + 2] = grey; lightPixels[offset + 3] = 255; }); const slices: LensSlices | undefined = dished ? undefined : cut ? { width, height, cut, map: slicePieces(image, cut), light: slicePieces(lightImage, cut), } : { width, height, map: [encodeImage(image)], light: [encodeImage(lightImage)], }; let url: string | undefined; let light: string | undefined; if (!slices) { context.putImageData(image, 0, 0); url = sharedCanvas.toDataURL("image/png"); light = encodeImage(lightImage); } const half = profile.dispersion * 0.5; lastMapId += 1; const result: LensMap = { id: lastMapId, get url() { if (url === undefined) url = encodeImage(cut ? unslice(image, cut) : image); return url; }, get light() { if (light === undefined) { light = encodeImage(cut ? unslice(lightImage, cut) : lightImage); } return light; }, slices, displacement: 2 * combinedPeak, chroma: [1 - half, 1, 1 + half], reach, rimReach: Math.max(rimReach, reach), shadingStrength: profile.shadingStrength, }; if (mapCache.size >= MAP_CACHE_LIMIT) { const oldest = mapCache.keys().next().value; if (oldest !== undefined) mapCache.delete(oldest); } mapCache.set(key, result); return result; } 74:T9429,"use client"; import { cancelFrame, frame as frameLoop, type MotionValue, useMotionValue, } from "motion/react"; import { type CSSProperties, type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { supportsBackdropRefraction, underBackdropRoot } from "./backdrop"; import { displacementIsSmooth } from "./engine"; import "./glass.css"; import { lightOverlay, readyOverlay } from "./light"; import { decodeMap, generateLensMap, isMapDecoded, type LensMap, type LensProfile, type LensShape, profileKey, snapShape, } from "./optics"; import { type GlassLens, offsetWithin, useGlassScope } from "./scope"; export type Animatable = MotionValue | number; function read(value: Animatable) { return typeof value === "number" ? value : value.get(); } function lensBox( x: Animatable, y: Animatable, lensWidth: Animatable, lensHeight: Animatable, lensRadius: Animatable, bias: Animatable, ) { const inset = read(bias); const innerWidth = Math.max(1, read(lensWidth) - inset * 2); const innerHeight = Math.max(1, read(lensHeight) - inset * 2); const radius = Math.max( 0, Math.min(read(lensRadius) - inset, Math.min(innerWidth, innerHeight) / 2), ); return { left: read(x) - innerWidth / 2, top: read(y) - innerHeight / 2, innerWidth, innerHeight, radius, }; } function subscribe(value: Animatable, listener: () => void) { return typeof value === "number" ? undefined : value.on("change", listener); } type Mode = "backdrop" | "copy" | "lens" | "inplace" | "none"; type Place = { x: number; y: number; originX: number; originY: number; width: number; height: number; }; type Held = { shape: LensShape; key: string; scale: number; result: LensMap }; const STRETCH_LIMIT = 0.12; const SETTLE_MS = 90; const PINCH_SETTLE_MS = 160; const MAX_PINCH = 4; const BODY_OPAQUE = 0.995; const RELAX_FROM = 0.35; const WARM_TIMEOUT_MS = 2000; function withinStretch(shape: LensShape, drawn: LensShape) { const near = (value: number, reference: number) => reference > 0 ? Math.abs(value / reference - 1) <= STRETCH_LIMIT : value === reference; return ( near(shape.halfWidth, drawn.halfWidth) && near(shape.halfHeight, drawn.halfHeight) && near(shape.borderRadius, drawn.borderRadius) ); } function mapImages(map: LensMap, sliced: boolean) { if (!sliced) return [map.url, map.light]; return map.slices ? [...map.slices.map, ...map.slices.light] : []; } function mapReady(map: LensMap, sliced: boolean) { return mapImages(map, sliced).every(isMapDecoded); } function decodeLensMap(map: LensMap, sliced: boolean) { return Promise.all(mapImages(map, sliced).map(decodeMap)); } function sameShape(a: LensShape, b: LensShape) { return ( a.halfWidth === b.halfWidth && a.halfHeight === b.halfHeight && a.borderRadius === b.borderRadius ); } function drawn(value: string | undefined) { return value && value !== "none" ? value : undefined; } function whenIdle(task: () => void) { if (typeof requestIdleCallback === "function") { const handle = requestIdleCallback(task, { timeout: WARM_TIMEOUT_MS }); return () => cancelIdleCallback(handle); } const handle = setTimeout(task, WARM_TIMEOUT_MS / 4); return () => clearTimeout(handle); } const IDENTITY_KERNEL = "0 0 0 0 1 0 0 0 0"; // The lens outline is the map's blue channel (coverage) moved to alpha. On a // wide-gamut screen Chromium converts the map into the display's colour space // first, so blue reads about 0.15 outside the lens and 0.96 inside it, and the // unbent page leaks through a faint box around the lens. Coverage 0.25 → 0 and // 0.9 → 1, clamped, gives back a clean 0 and 1 in any colour space. const OUTLINE_MATRIX = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5385 0 -0.3846"; function smoothingKernel(amount: number) { const s = clamp01(amount); if (s === 0) return IDENTITY_KERNEL; const corner = s / 16; const side = (2 * s) / 16; const centre = 1 - s + (4 * s) / 16; return [corner, side, corner, side, centre, side, corner, side, corner] .map((value) => value.toFixed(5)) .join(" "); } function smoothstep(from: number, to: number, value: number) { const k = clamp01((value - from) / (to - from)); return k * k * (3 - 2 * k); } function clamp01(value: number) { return value < 0 ? 0 : value > 1 ? 1 : value; } export type GlassProps = { width: number; height: number; x: Animatable; y: Animatable; lensWidth: Animatable; lensHeight: Animatable; lensRadius: Animatable; lens: LensProfile; refractionTarget?: ReactNode; refract?: boolean; light?: boolean; warm?: LensShape[]; shadowOpacity?: Animatable; tintColor?: string; tintOpacity?: Animatable; face?: ReactNode; tintBlur?: Animatable; tintSaturate?: number; edgeBias?: Animatable; lag?: Animatable; resolution?: number; hidden?: boolean; relax?: boolean; className?: string; style?: CSSProperties; children?: ReactNode; }; export function Glass({ width, height, x, y, lensWidth, lensHeight, lensRadius, lens, refractionTarget, refract = true, light = false, warm, shadowOpacity, tintColor = "white", tintOpacity, face, tintBlur, tintSaturate = 1, edgeBias, lag, resolution = 2, hidden = false, relax = false, className, style, children, }: GlassProps) { const softness = lens.softness; const openTint = clamp01(lens.openTint); const rawId = useId(); const baseId = `glass-${rawId.replaceAll(":", "")}`; const scope = useGlassScope(); const rootRef = useRef(null); const layerRef = useRef(null); const filterRef = useRef(null); const rimImageRef = useRef(null); const lightImageRef = useRef(null); const mapSliceRefs = useRef([]); const lightSliceRefs = useRef([]); const lagPassRef = useRef(null); const frostPassRef = useRef(null); const saturatePassRef = useRef(null); const softenRefs = useRef([]); const tintRef = useRef(null); const frostRef = useRef(null); const faceRef = useRef(null); const lightRef = useRef(null); const shadowRef = useRef(null); const restShadowRef = useRef(null); const lensRegionRefs = useRef([]); const reachRegionRefs = useRef([]); const rimRegionRefs = useRef([]); const rimPassRefs = useRef([]); const version = useRef(0); const dished = Math.abs(1 - 1 / Math.max(lens.magnification, 0.01)) > 1e-4; const sliced = !dished; const lastMap = useRef(undefined); const lastSignature = useRef(""); const heldMap = useRef(undefined); const warmed = useRef([]); const readyMap = useRef(undefined); const leased = useRef(null); const offset = useRef(null); const shownLight = useRef(undefined); const settleTimer = useRef | undefined>( undefined, ); const screenScale = useRef(1); const forceNext = useRef(false); const frame = useRef(0); const pending = useRef<(() => void) | null>(null); const alive = useRef(true); const hiddenRef = useRef(hidden); hiddenRef.current = hidden; const refractRef = useRef(refract); refractRef.current = refract; const scheduleRef = useRef<() => void>(() => {}); const targeted = refractionTarget !== undefined; const [mode, setMode] = useState(targeted ? "copy" : "none"); const frostInFilter = mode === "backdrop" && tintBlur !== undefined; useLayoutEffect(() => { const chromium = supportsBackdropRefraction(); const root = rootRef.current; // Chromium drops an SVG backdrop filter with other glass behind it, and // glass bent under other glass is lost under its frost anyway. const outside = targeted ? root : root?.closest(".glass-pane")?.parentElement; const nested = Boolean(outside?.closest(".glass-pane")); const scoped = Boolean(scope && root?.closest(".glass-scope")); // Only a pane's rim bends, so its content stays as it is behind its padding. const inPlace = scoped && Boolean(scope?.inPlace); // WebKit paints a frosted card's content above the frost, out of a scope // filter's reach, so glass on glass bends in place only in Chromium and Firefox. const liveNested = chromium || displacementIsSmooth(); setMode( inPlace && (!nested || liveNested) ? "inplace" : nested ? scope?.nested ? "lens" : targeted ? "copy" : "none" : targeted && chromium ? "backdrop" : scoped ? "lens" : chromium ? "backdrop" : targeted ? "copy" : "none", ); }, [scope, targeted]); const zero = useMotionValue(0); const one = useMotionValue(1); const shadow = shadowOpacity ?? zero; const tint = tintOpacity ?? one; const blur = tintBlur ?? zero; const bias = edgeBias ?? zero; const trail = lag ?? zero; const mapFor = useCallback( (shape: LensShape) => { const key = profileKey(lens); const scale = screenScale.current; const snapped = snapShape(shape); const candidates = [heldMap.current, ...warmed.current].filter( (entry): entry is Held => entry !== undefined && entry.key === key && entry.scale === scale, ); const exact = candidates.find((entry) => sameShape(snapped, entry.shape)); if (exact) { heldMap.current = exact; return exact.result; } const near = candidates.find((entry) => withinStretch(snapped, entry.shape), ); if (near) { heldMap.current = near; clearTimeout(settleTimer.current); settleTimer.current = setTimeout(() => { if (!alive.current) return; heldMap.current = undefined; scheduleRef.current(); }, SETTLE_MS); return near.result; } const result = generateLensMap(shape, lens, scale); heldMap.current = result ? { shape: snapped, key, scale, result } : undefined; return result; }, [lens], ); const measurePlace = useCallback(() => { const root = rootRef.current; const element = scope?.element(); const backdrop = scope?.backdrop(); if (!root || !element || !backdrop) { offset.current = null; return; } const at = offsetWithin(root, element); const origin = element === backdrop ? at : offsetWithin(element, backdrop); const size = offsetWithin(backdrop, backdrop); offset.current = { x: at.x, y: at.y, originX: element === backdrop ? 0 : origin.x, originY: element === backdrop ? 0 : origin.y, width: size.width, height: size.height, }; }, [scope]); const release = useCallback(() => { const held = leased.current; if (!held) return; leased.current = null; scope?.release(held); lastSignature.current = ""; }, [scope]); const sync = useCallback(() => { frame.current = 0; const filter = filterRef.current; const layer = layerRef.current; if (!filter) return; const { left, top, innerWidth, innerHeight, radius } = lensBox( x, y, lensWidth, lensHeight, lensRadius, bias, ); // Overlays inside the filtered layer must not be composited: WebKit leaves // them out of a software filter and promotes what overlaps them. const flat = mode === "inplace"; const placeOnLens = (element: HTMLDivElement | null) => { if (!element) return; element.style.transform = flat ? `translate(${left}px, ${top}px)` : `translate3d(${left}px, ${top}px, 0)`; element.style.width = `${innerWidth}px`; element.style.height = `${innerHeight}px`; element.style.borderRadius = `${radius}px`; }; const shadowAmount = clamp01(read(shadow)); const rim = shadowRef.current; placeOnLens(rim); if (rim) rim.style.opacity = String(shadowAmount); const restRim = restShadowRef.current; placeOnLens(restRim); if (restRim) restRim.style.opacity = String(1 - shadowAmount); const bodyOpacity = clamp01(read(tint)); const body = tintRef.current; placeOnLens(body); if (body) { body.style.opacity = String(openTint + (1 - openTint) * bodyOpacity); } const refracting = refractRef.current && !hiddenRef.current && mode !== "none" && bodyOpacity < BODY_OPAQUE; const frost = frostRef.current; if (frost && frostInFilter && refracting) { frost.style.display = "none"; } else if (frost) { const amount = read(blur); placeOnLens(frost); const backdropBlur = amount > 0 ? `blur(${amount}px)${tintSaturate !== 1 ? ` saturate(${tintSaturate})` : ""}` : "none"; frost.style.display = amount > 0 ? "" : "none"; frost.style.backdropFilter = backdropBlur; frost.style.setProperty("-webkit-backdrop-filter", backdropBlur); } const faceLayer = faceRef.current; if (faceLayer) { faceLayer.style.opacity = String(bodyOpacity); faceLayer.style.clipPath = `inset(${top}px ${width - left - innerWidth}px ${height - top - innerHeight}px ${left}px round ${radius}px)`; } // A copy on a see-through layer gives the filter's light nothing to land // on, so it takes the baked light instead, as the lens opens. const lensLit = targeted && mode === "copy" && refracting; const lit = (light || lensLit) && !hiddenRef.current; const shape = { halfWidth: innerWidth / 2, halfHeight: innerHeight / 2, borderRadius: radius, }; const drawnMap = lit || refracting ? mapFor(shape) : undefined; const lightLayer = lightRef.current; if (lightLayer) { lightLayer.style.display = lit ? "" : "none"; if (lit) { placeOnLens(lightLayer); lightLayer.style.opacity = light ? "" : String(1 - bodyOpacity); const overlay = drawnMap ? readyOverlay(drawnMap.light) : undefined; if (drawnMap && !overlay) { lightOverlay(drawnMap.light).then(() => { if (alive.current) scheduleRef.current(); }); } const next = overlay ?? shownLight.current; if (next !== shownLight.current) { shownLight.current = next; lightLayer.style.backgroundImage = next ? `url("${next}")` : ""; } } } if (layer) { const hide = !refracting; if (hide !== (layer.style.visibility === "hidden")) { layer.style.visibility = hide ? "hidden" : ""; if (!hide) forceNext.current = true; } } if (!refracting) { if (mode === "backdrop" && layer && layer.style.backdropFilter) { layer.style.backdropFilter = ""; lastSignature.current = ""; } if (mode === "inplace") { scope?.applyFilter?.(baseId, null); lastSignature.current = ""; } release(); return; } // Checked as the glass opens, since a card or a fade can turn into a // backdrop root after the glass mounts. if ( mode === "backdrop" && layer && !layer.style.backdropFilter && underBackdropRoot(layer) ) { const scoped = Boolean(scope && rootRef.current?.closest(".glass-scope")); setMode(targeted ? (scoped ? "lens" : "copy") : "none"); return; } const factor = mode === "copy" ? resolution : 1; const scaled = (value: number) => value * factor; const grid = screenScale.current / factor; const snap = (value: number) => Math.round(value * grid) / grid; if (mode === "copy" && layer) { const regionWidth = scaled(width); const regionHeight = scaled(height); layer.style.clipPath = `inset(${scaled(top)}px ${regionWidth - scaled(left + innerWidth)}px ${regionHeight - scaled(top + innerHeight)}px ${scaled(left)}px round ${scaled(radius)}px)`; } let result = drawnMap; if (drawnMap && !mapReady(drawnMap, sliced)) { decodeLensMap(drawnMap, sliced).then(() => { if (!alive.current) return; forceNext.current = true; scheduleRef.current(); }); if (readyMap.current) result = readyMap.current; } else if (drawnMap) { readyMap.current = drawnMap; } const pieces = sliced ? result?.slices : undefined; if (sliced && !pieces) result = undefined; // WebKit blanks a layer under a filter whose images have not arrived. if (mode === "inplace" && !result) return; const settled = relax ? 1 - smoothstep(RELAX_FROM, BODY_OPAQUE, bodyOpacity) : 1; const unit = result ? scaled(result.displacement) * settled : 0; const scales = result ? ([ unit * result.chroma[0], unit * result.chroma[1], unit * result.chroma[2], ] as const) : ([0, 0, 0] as const); const soften = dished && !displacementIsSmooth() ? smoothingKernel(softness) : IDENTITY_KERNEL; const shift = snap(scaled(read(trail))); const frostAmount = frostInFilter ? Math.round(scaled(read(blur)) * 100) / 100 : 0; const outward = (distance: number | undefined) => distance ? Math.ceil((scaled(distance * 1.15) + factor) * grid) / grid : 0; const rimReach = outward(result?.rimReach); const reach = Math.max(outward(result?.reach), rimReach); let originX = 0; let originY = 0; if (mode === "inplace") { if (!offset.current) measurePlace(); const at = offset.current; if (!at) return; originX = at.x; originY = at.y; } if (mode === "lens") { if (!leased.current) { leased.current = scope?.lease() ?? null; if (!leased.current) return; forceNext.current = true; } if (!offset.current) measurePlace(); const at = offset.current; if (!at) return; const pull = Math.max( reach, Math.abs(shift), ...scales.map((s) => Math.abs(s) / 2), ) + 2 + leased.current.feather; const bounds = { left: Math.floor(at.x + left - pull), top: Math.floor(at.y + top - pull), right: Math.ceil(at.x + left + innerWidth + pull), bottom: Math.ceil(at.y + top + innerHeight + pull), }; originX = at.x - bounds.left; originY = at.y - bounds.top; const { box, frost, copy, margin } = leased.current; const boxWidth = bounds.right - bounds.left; const boxHeight = bounds.bottom - bounds.top; box.style.left = `${bounds.left}px`; box.style.top = `${bounds.top}px`; box.style.width = `${boxWidth}px`; box.style.height = `${boxHeight}px`; frost.style.left = `${-margin}px`; frost.style.top = `${-margin}px`; frost.style.width = `${boxWidth + margin * 2}px`; frost.style.height = `${boxHeight + margin * 2}px`; copy.style.left = `${margin - bounds.left - at.originX}px`; copy.style.top = `${margin - bounds.top - at.originY}px`; copy.style.width = `${at.width}px`; copy.style.height = `${at.height}px`; } const edge = factor / 2; const regionX = snap(originX + scaled(left) + edge); const regionY = snap(originY + scaled(top) + edge); const regionInnerWidth = snap(originX + scaled(left + innerWidth) - edge) - regionX; const regionInnerHeight = snap(originY + scaled(top + innerHeight) - edge) - regionY; const signature = `${regionX}|${regionY}|${regionInnerWidth}|${regionInnerHeight}|${reach}|${rimReach}|${scales.join(",")}|${soften}|${shift}|${frostAmount}|${result?.id ?? ""}`; if (!forceNext.current && signature === lastSignature.current) return; lastSignature.current = signature; forceNext.current = false; for (const element of lensRegionRefs.current) { element.setAttribute("x", String(regionX)); element.setAttribute("y", String(regionY)); element.setAttribute("width", String(regionInnerWidth)); element.setAttribute("height", String(regionInnerHeight)); } const grow = (elements: Element[], by: number) => { for (const element of elements) { element.setAttribute("x", String(regionX - by)); element.setAttribute("y", String(regionY - by)); element.setAttribute("width", String(regionInnerWidth + by * 2)); element.setAttribute("height", String(regionInnerHeight + by * 2)); } }; grow(reachRegionRefs.current, reach); grow(rimRegionRefs.current, rimReach); if (pieces) { const { cut } = pieces; const alongX = cut?.axis !== "y"; const from = alongX ? regionX : regionY; const size = alongX ? regionInnerWidth : regionInnerHeight; const length = alongX ? pieces.width : pieces.height; const pixel = 1 / grid; const spans = cut ? [ [from, from + (cut.start * size) / length], [ Math.max(from, from + (cut.start * size) / length - pixel), Math.min( from + size, from + ((length - cut.end) * size) / length + pixel, ), ], [from + ((length - cut.end) * size) / length, from + size], ] : [[from, from + size]]; const place = (element: Element, index: number) => { const [lead, tail] = spans[index] ?? spans[0]; const span = String(tail - lead); element.setAttribute("x", String(alongX ? lead : regionX)); element.setAttribute("y", String(alongX ? regionY : lead)); element.setAttribute("width", alongX ? span : String(regionInnerWidth)); element.setAttribute( "height", alongX ? String(regionInnerHeight) : span, ); }; mapSliceRefs.current.forEach(place); lightSliceRefs.current.forEach(place); } if (result && result.id !== lastMap.current) { lastMap.current = result.id; if (pieces) { // An feImage without an image drops the whole filter in WebKit. const show = (elements: Element[], urls: string[]) => { elements.forEach((element, index) => { element.setAttribute("href", urls[index] ?? urls[0]); }); }; show(mapSliceRefs.current, pieces.map); show(lightSliceRefs.current, pieces.light); } else { rimImageRef.current?.setAttribute("href", result.url); lightImageRef.current?.setAttribute("href", result.light); } } lagPassRef.current?.setAttribute("dx", String(shift)); frostPassRef.current?.setAttribute("stdDeviation", String(frostAmount)); saturatePassRef.current?.setAttribute( "values", String(frostAmount > 0 ? tintSaturate : 1), ); for (const element of softenRefs.current) { element.setAttribute("kernelMatrix", soften); } rimPassRefs.current.forEach((element, index) => { element.setAttribute("scale", String(scales[index] ?? 0)); }); // Safari caches filter output by id, so every update takes a fresh one. version.current += 1; const id = `${baseId}-v${version.current}`; filter.id = id; if (mode === "lens" && leased.current) { leased.current.box.style.filter = `url(#${id})`; } else if (mode === "backdrop" && layer) { layer.style.backdropFilter = `url(#${id})`; } else if (mode === "inplace") { scope?.applyFilter?.(baseId, filter); } else if (layer) { layer.style.filter = `url(#${id})`; } if (result && !mapReady(result, sliced)) { const shown = result.id; decodeLensMap(result, sliced).then(() => { if (!alive.current || lastMap.current !== shown) return; forceNext.current = true; scheduleRef.current(); }); } }, [ baseId, bias, blur, dished, frostInFilter, height, light, openTint, softness, mapFor, measurePlace, mode, lensHeight, lensRadius, lensWidth, relax, release, resolution, scope, shadow, sliced, targeted, tint, tintSaturate, trail, width, x, y, ]); const schedule = useCallback(() => { if (frame.current) return; frame.current = 1; pending.current = sync; frameLoop.render(sync); }, [sync]); scheduleRef.current = schedule; useLayoutEffect(() => { const filter = filterRef.current; lensRegionRefs.current = filter ? Array.from(filter.querySelectorAll("[data-lens]")) : []; reachRegionRefs.current = filter ? Array.from(filter.querySelectorAll("[data-reach]")) : []; rimRegionRefs.current = filter ? Array.from(filter.querySelectorAll("[data-rim]")) : []; rimPassRefs.current = filter ? Array.from(filter.querySelectorAll('[data-pass="rim"]')) : []; lagPassRef.current = filter?.querySelector('[data-pass="lag"]') ?? null; frostPassRef.current = filter?.querySelector('[data-pass="frost"]') ?? null; saturatePassRef.current = filter?.querySelector('[data-pass="saturate"]') ?? null; softenRefs.current = filter ? Array.from(filter.querySelectorAll("[data-soften]")) : []; rimImageRef.current = filter?.querySelector('[data-map="rim"]') ?? null; lightImageRef.current = filter?.querySelector('[data-map="light"]') ?? null; mapSliceRefs.current = filter ? Array.from(filter.querySelectorAll('[data-slice="map"]')) : []; lightSliceRefs.current = filter ? Array.from(filter.querySelectorAll('[data-slice="light"]')) : []; lastMap.current = undefined; lastSignature.current = ""; alive.current = true; const measure = () => { const node = rootRef.current; if (!node || width <= 0) return; if (scope) { measurePlace(); forceNext.current = true; } const ratio = (node.getBoundingClientRect().width / width) * (window.devicePixelRatio || 1) * Math.min(window.visualViewport?.scale ?? 1, MAX_PINCH); if (!Number.isFinite(ratio) || ratio <= 0) return; if (Math.abs(ratio - screenScale.current) < 0.01 && !scope) return; screenScale.current = ratio; forceNext.current = true; sync(); }; measure(); sync(); let moved = 0; const scopeElement = scope?.backdrop(); const layout = scopeElement && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => { if (moved) return; moved = requestAnimationFrame(() => { moved = 0; measure(); }); }) : undefined; if (layout && scopeElement) { let node = rootRef.current?.parentElement ?? null; while (node && node !== scopeElement) { layout.observe(node); node = node.parentElement; } layout.observe(scopeElement); } const stopScope = scope?.onChange(() => { forceNext.current = true; scheduleRef.current(); }); let pinched: ReturnType | undefined; const settle = () => { clearTimeout(pinched); pinched = setTimeout(measure, PINCH_SETTLE_MS); }; window.addEventListener("resize", measure); window.visualViewport?.addEventListener("resize", settle); return () => { window.removeEventListener("resize", measure); window.visualViewport?.removeEventListener("resize", settle); clearTimeout(pinched); layout?.disconnect(); stopScope?.(); cancelAnimationFrame(moved); clearTimeout(settleTimer.current); release(); scope?.applyFilter?.(baseId, null); alive.current = false; }; }, [baseId, measurePlace, release, scope, sync, width]); useEffect(() => { const unsubscribes = [ x, y, lensWidth, lensHeight, lensRadius, shadow, tint, blur, bias, trail, ].map((value) => subscribe(value, schedule)); return () => { if (pending.current) cancelFrame(pending.current); pending.current = null; frame.current = 0; for (const unsubscribe of unsubscribes) unsubscribe?.(); }; }, [ bias, blur, lensHeight, lensRadius, lensWidth, schedule, shadow, tint, trail, x, y, ]); // biome-ignore lint/correctness/useExhaustiveDependencies: a flip of either only needs a fresh sync useEffect(() => { forceNext.current = true; scheduleRef.current(); }, [hidden, refract]); const warmKey = warm ?.map((shape) => { const snapped = snapShape(shape); return `${snapped.halfWidth}x${snapped.halfHeight}r${snapped.borderRadius}`; }) .join("|"); // biome-ignore lint/correctness/useExhaustiveDependencies: warmKey stands in for the shapes useEffect(() => { if (!warm?.length || mode === "none") return; return whenIdle(() => { const key = profileKey(lens); const scale = screenScale.current; warmed.current = warm.flatMap((shape) => { const result = generateLensMap(shape, lens, scale); if (!result) return []; decodeLensMap(result, sliced); if (light) lightOverlay(result.light); return [{ shape: snapShape(shape), key, scale, result }]; }); }); }, [lens, light, mode, sliced, warmKey]); const region = width * resolution; const regionHeight = height * resolution; const insetShadow = drawn(lens.edgeInsetShadow); const [first] = useState(() => { const box = lensBox(x, y, lensWidth, lensHeight, lensRadius, edgeBias ?? 0); const place = { transform: `translate3d(${box.left}px, ${box.top}px, 0)`, width: box.innerWidth, height: box.innerHeight, borderRadius: box.radius, }; const shadowAmount = clamp01(read(shadowOpacity ?? 0)); const bodyOpacity = clamp01(read(tintOpacity ?? 1)); const r = resolution; const copy = { visibility: "hidden" as const, clipPath: `inset(${box.top * r}px ${(width - box.left - box.innerWidth) * r}px ${(height - box.top - box.innerHeight) * r}px ${box.left * r}px round ${box.radius * r}px)`, }; return { place, copy, shadow: shadowAmount, body: openTint + (1 - openTint) * bodyOpacity, face: { opacity: bodyOpacity, clipPath: `inset(${box.top}px ${width - box.left - box.innerWidth}px ${height - box.top - box.innerHeight}px ${box.left}px round ${box.radius}px)`, }, }; }); return (

{children}

{mode === "backdrop" ? (

) : mode === "copy" && refractionTarget ? (

{refractionTarget}

) : null}

{face ? (

{face}

) : null} {light || targeted ? (

) : null} {drawn(lens.restEdgeShadow) ? (

) : null}

); } const SLICES = [0, 1, 2] as const; function SliceImages({ name }: { name: "map" | "light" }) { return SLICES.map((index) => ( )); } function OnGround({ ground, name, pieces, result, }: { ground: string; name: "map" | "light"; pieces: number; result: string; }) { return ( {SLICES.slice(0, pieces).map((index) => ( ))} ); } function LensPrimitives({ dished, sliced, frosted, lagged, split, shaded, clear, hole, }: { dished: boolean; sliced: boolean; frosted: boolean; lagged: boolean; split: boolean; shaded: boolean; clear: boolean; // Cut out of the source and laid into the hole: laid over a see-through // layer, the lens would double every translucent pixel. hole: boolean; }) { const source = lagged ? "lagged" : "SourceGraphic"; const rimSource = frosted ? "frosted" : source; const bent = dished ? "bent" : "refracted"; // Over a see-through source a channel bent past the content reads black, // so it falls back to the content below. Region-limited, or it runs over the whole layer. const filled = (name: string) => (clear ? `${name}Filled` : name); const fill = (name: string) => clear ? ( ) : null; return ( <> {lagged ? ( ) : null} {sliced ? ( ) : ( )} {hole ? ( ) : null} {frosted ? ( <> ) : null} {split ? ( <> {fill("bentR")} {fill("bentB")} ) : ( )} {dished ? ( ) : null} {shaded ? ( <> {sliced ? ( ) : ( )} {/* A blend over transparent pixels returns the light itself, so the light is kept to what the lens bent. */} ) : null} {/* Kept even over opaque content: without it Chromium's GPU cost balloons while scrolling. */} {hole ? ( <> ) : ( )} ); } 75:Ta1f,"use client"; import { type InputHTMLAttributes, useCallback, useEffect, useId, useRef, useState, } from "react"; import { GlassSwitchSurface, type GlassSwitchSurfaceProps, } from "./glass-switch-surface"; import type { LensProfile } from "./optics"; import type { GlassTheme } from "./presets"; import { useGlassTheme } from "./theme"; import type { UseGlassSwitchResult } from "./use-glass-switch"; type NativeProps = Omit< InputHTMLAttributes, "type" | "onChange" | "size" | "width" | "height" >; export type GlassSwitchProps = NativeProps & { onCheckedChange?: (checked: boolean) => void; label?: string; width?: number; height?: number; lens?: Partial; theme?: GlassTheme; surfaceProps?: Partial; }; export function GlassSwitch({ checked, defaultChecked = false, onCheckedChange, label, width = 74, height = 28, lens, theme: themeProp, disabled, className, id, surfaceProps, ...inputProps }: GlassSwitchProps) { const theme = useGlassTheme(themeProp); const generatedId = useId(); const inputId = id ?? generatedId; const isControlled = checked !== undefined; const [uncontrolled, setUncontrolled] = useState(defaultChecked); const isChecked = Boolean(isControlled ? checked : uncontrolled); const controls = useRef(null); const committed = useRef(isChecked); useEffect(() => { committed.current = isChecked; }, [isChecked]); const commit = useCallback( (next: boolean) => { committed.current = next; if (!isControlled) setUncontrolled(next); onCheckedChange?.(next); }, [isControlled, onCheckedChange], ); return ( { if (controls.current?.consumeDragGuard()) { event.currentTarget.checked = committed.current; return; } commit(event.currentTarget.checked); controls.current?.flash(); }} /> {label ? {label} : null} ); } 76:Td0b,.glass-segmented { display: inline-block; -webkit-tap-highlight-color: transparent; } .glass-segmented__box { position: relative; display: inline-block; touch-action: pan-y; -webkit-user-select: none; user-select: none; --toggle-track: color(display-p3 0.93 0.928 0.932); --toggle-label: rgb(0 0 0 / 0.55); --toggle-selected: rgb(0 0 0 / 0.92); --toggle-divider: rgb(0 0 0 / 0.12); --toggle-focus: var(--glass-accent, #7774ff); --glass-body: #fff; } .glass-segmented__box[data-theme="dark"] { --toggle-track: color(display-p3 0.19 0.19 0.21); --toggle-label: rgb(255 255 255 / 0.6); --toggle-divider: rgb(255 255 255 / 0.16); --toggle-selected: rgb(255 255 255 / 0.95); --glass-body: #1b1b1f; } .glass-segmented__row { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; box-sizing: border-box; align-items: center; width: fit-content; background: var(--toggle-track); border-radius: calc(var(--toggle-height) / 2); } .glass-segmented__option { padding: 0 18px; font: 600 13px / 1 var(--font-sans, inherit); color: var(--toggle-label); text-align: center; white-space: nowrap; -webkit-user-select: none; user-select: none; } .glass-segmented__row:not([data-highlighted]) .glass-segmented__option[data-selected] { opacity: calc(1 - var(--segment-rest, 0)); } .glass-segmented__box:not([data-measured]) .glass-segmented__option[data-selected] { position: relative; z-index: 0; color: var(--toggle-selected); opacity: 1; } .glass-segmented__box:not([data-measured]) .glass-segmented__option[data-selected]::before { position: absolute; top: 50%; right: 0; left: 0; z-index: -1; height: var(--segment-pill); content: ""; background: var(--glass-body); border-radius: 999px; box-shadow: var(--segment-shadow); transform: translateY(-50%); } .glass-segmented__row[data-highlighted] { background: transparent; } .glass-segmented__row[data-highlighted] .glass-segmented__option { color: var(--toggle-selected); } .glass-segmented__divider { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--toggle-divider); transform: translateX(-0.5px); } .glass-segmented__glass { position: absolute; top: 0; left: 0; pointer-events: none; } .glass-segmented__hit { position: absolute; top: 0; z-index: 1; height: 100%; padding: 0; background: none; border: 0; cursor: pointer; } .glass-segmented__input, .glass-segmented__hit-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .glass-segmented__input:focus-visible ~ .glass-segmented__hit-label { position: absolute; inset: 0; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; color: transparent; border-radius: calc(var(--toggle-height) / 2); outline: 2px solid var(--toggle-focus); outline-offset: 2px; } .glass-segmented__hit:focus-visible { border-radius: calc(var(--toggle-height) / 2); outline: 2px solid var(--toggle-focus); outline-offset: 2px; } .glass-segmented__hit:disabled { cursor: not-allowed; opacity: 0.5; } .glass-segmented[data-disabled], .glass-segmented__box[data-disabled] { cursor: not-allowed; opacity: 0.48; } .glass-segmented[data-disabled] .glass-segmented__hit { cursor: not-allowed; } 77:T81d,.glass-pane { position: relative; display: inline-block; isolation: isolate; color: var(--glass-pane-ink); } /* The defaults weigh nothing, so an app's own tint wins whichever stylesheet loads first. */ :where(.glass-pane) { --glass-pane-tint: #fff; --glass-pane-ink: rgb(0 0 0 / 0.88); } :where(.glass-pane[data-theme="dark"]) { --glass-pane-tint: #2a2a2e; --glass-pane-ink: rgb(255 255 255 / 0.92); } .glass-pane__glass { position: absolute; pointer-events: none; } .glass-pane__content { position: relative; } .glass-pane:not([data-drawn])::before, .glass-pane:not([data-drawn])::after { position: absolute; inset: 0; z-index: -1; content: ""; border-radius: inherit; pointer-events: none; } .glass-pane:not([data-drawn])::before { -webkit-backdrop-filter: var(--glass-pane-frost); backdrop-filter: var(--glass-pane-frost); box-shadow: var(--glass-pane-shadow); } .glass-pane:not([data-drawn])::after { background: var(--glass-pane-fill); opacity: var(--glass-pane-fill-opacity); } .glass-pane[data-shaped]:not([data-drawn])::before, .glass-pane[data-shaped]:not([data-drawn])::after { content: none; } .glass-pane__lenses { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } /* The copy only approximates the pane, so its edges fade into it. */ .glass-pane__lenses .glass-scope__lens { z-index: auto; -webkit-mask: linear-gradient( to right, transparent, #000 8px, #000 calc(100% - 8px), transparent ), linear-gradient( to bottom, transparent, #000 8px, #000 calc(100% - 8px), transparent ); -webkit-mask-composite: source-in; mask: linear-gradient( to right, transparent, #000 8px, #000 calc(100% - 8px), transparent ), linear-gradient( to bottom, transparent, #000 8px, #000 calc(100% - 8px), transparent ); mask-composite: intersect; } .glass-pane__lenses .glass-scope__lens::after { position: absolute; inset: 0; content: ""; background: var(--lens-tint); opacity: var(--lens-tint-opacity, 0); } 78:Tae0,"use client"; import { motion } from "motion/react"; import { type CSSProperties, type HTMLAttributes, type Ref, useImperativeHandle, } from "react"; import { Glass } from "./glass"; import "./glass-switch.css"; import type { LensProfile } from "./optics"; import { type GlassTheme, switchLens, useLens } from "./presets"; import { useGlassTheme } from "./theme"; import { type UseGlassSwitchResult, useGlassSwitch } from "./use-glass-switch"; export type GlassSwitchSurfaceProps = Omit< HTMLAttributes, "onChange" | "children" > & { checked: boolean; onCheckedChange?: (checked: boolean) => void; width?: number; height?: number; disabled?: boolean; draggable?: boolean; liquid?: number; lens?: Partial; theme?: GlassTheme; ref?: Ref; controlsRef?: Ref; }; export function GlassSwitchSurface({ checked, onCheckedChange, width = 74, height = 28, disabled, draggable, liquid, lens: lensOverrides, theme: themeProp, className, style, ref, controlsRef, ...rest }: GlassSwitchSurfaceProps) { const theme = useGlassTheme(themeProp); const lens = useLens(theme, lensOverrides, switchLens); const controls = useGlassSwitch({ checked, onCheckedChange, width, height, disabled, draggable, liquid, }); const { geometry, lensProps, thumbProps, rootRef, trackRef, rootStyle } = controls; useImperativeHandle(controlsRef, () => controls, [controls]); return ( { rootRef.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; }} className={["glass-switch__box", className].filter(Boolean).join(" ")} data-theme={theme} data-disabled={disabled ? "" : undefined} style={{ ...rootStyle, ...style, width, height } as CSSProperties} >

} >

{ trackRef.current = element; }} className="glass-switch__track" aria-hidden="true" style={{ width, height, borderRadius: height / 2 }} >

); } 79:T567,import { type RefObject, useEffect, useState } from "react"; const SCROLL_SETTLE_MS = 160; let scrolling = false; let listening = false; let timer: ReturnType | undefined; const waiting = new Set<() => void>(); function onScroll() { scrolling = true; clearTimeout(timer); timer = setTimeout(() => { scrolling = false; requestAnimationFrame(drain); }, SCROLL_SETTLE_MS); } function drain() { if (scrolling) return; const [task] = waiting; if (!task) return; waiting.delete(task); task(); requestAnimationFrame(drain); } export function afterScroll(task: () => void) { if (!listening) { listening = true; window.addEventListener("scroll", onScroll, { capture: true, passive: true, }); } if (!scrolling) { task(); return () => {}; } waiting.add(task); return () => { waiting.delete(task); }; } export function useInView( ref: RefObject, margin: string, enabled: boolean, ) { const [inView, setInView] = useState(false); useEffect(() => { const element = ref.current; if (!enabled || !element || typeof IntersectionObserver === "undefined") { return; } const observer = new IntersectionObserver( ([entry]) => setInView(entry.isIntersecting), { rootMargin: margin }, ); observer.observe(element); return () => observer.disconnect(); }, [enabled, margin, ref]); return inView; } 7a:Tecd,"use client"; import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, useImperativeHandle, useLayoutEffect, useState, } from "react"; import { Glass } from "./glass"; import "./glass-slider.css"; import type { LensProfile } from "./optics"; import { type GlassTheme, sliderLens, useLens } from "./presets"; import { useGlassTheme } from "./theme"; import { type UseGlassSliderOptions, type UseGlassSliderResult, useGlassSlider, } from "./use-glass-slider"; export type GlassSliderSurfaceProps = Omit< HTMLAttributes, "onChange" | "children" | "defaultValue" > & UseGlassSliderOptions & { lens?: Partial; theme?: GlassTheme; ref?: Ref; overlay?: ReactNode; controlsRef?: Ref; }; // What a slider with no width is laid out at before it has measured itself. const FALLBACK_WIDTH = 240; export function GlassSliderSurface({ lens: lensOverrides, theme: themeProp, className, style, ref, overlay, controlsRef, ...options }: GlassSliderSurfaceProps) { const theme = useGlassTheme(themeProp); const lens = useLens(theme, lensOverrides, sliderLens); // With no width the slider fills its container, at the width it measures. const fluid = options.width === undefined; const [measured, setMeasured] = useState(null); const controls = useGlassSlider({ ...options, width: options.width ?? measured ?? FALLBACK_WIDTH, }); const { geometry, lensProps, trackProps, rootRef, hitRef, rootStyle } = controls; useImperativeHandle(controlsRef, () => controls, [controls]); const { width, thumbWidth, thumbHeight, trackHeight, margin } = geometry; useLayoutEffect(() => { const box = rootRef.current; if (!fluid || !box) return; // Layout width, so a scaled ancestor, such as a popup growing in, is // measured at its real size. const measure = () => { if (box.offsetWidth > 0) setMeasured(box.offsetWidth); }; measure(); const observer = new ResizeObserver(measure); observer.observe(box); return () => observer.disconnect(); }, [fluid, rootRef]); const track = (

); return ( { rootRef.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; }} className={["glass-slider__box", className].filter(Boolean).join(" ")} data-theme={theme} data-disabled={options.disabled ? "" : undefined} style={ { ...rootStyle, ...style, width: fluid ? undefined : width, height: thumbHeight, "--slider-thumb-width": `${thumbWidth}px`, } as CSSProperties } > {fluid && measured === null ? ( <>

{track}

) : (

{track}

} >

{ hitRef.current = element; }} className="glass-slider__row glass-slider__hit" aria-hidden="true" style={{ width, height: thumbHeight }} {...trackProps} > {track}

)} {overlay} ); } 5e:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@^13.4.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^13.4.4"}]]}]}]]}],["$","$L5f",null,{"namespace":"@liquikit","registryDependencies":[]}]]}],null]}],["$","$L60",null,{"files":[{"path":"src/glass/use-glass-switch.ts","content":"$61","type":"registry:lib","target":"@components/liquikit/glass/use-glass-switch.ts"},{"path":"src/glass/index.ts","content":"$62","type":"registry:lib","target":"@components/liquikit/glass/index.ts"},{"path":"src/glass/glass-segmented.tsx","content":"$63","type":"registry:lib","target":"@components/liquikit/glass/glass-segmented.tsx"},{"path":"src/glass/use-glass-segmented.ts","content":"$64","type":"registry:lib","target":"@components/liquikit/glass/use-glass-segmented.ts"},{"path":"src/glass/glass-slider.css","content":"$65","type":"registry:file","target":"@components/liquikit/glass/glass-slider.css"},{"path":"src/glass/light.ts","content":"$66","type":"registry:lib","target":"@components/liquikit/glass/light.ts"},{"path":"src/glass/glass-switch.css","content":"$67","type":"registry:file","target":"@components/liquikit/glass/glass-switch.css"},{"path":"src/glass/backdrop.ts","content":"$68","type":"registry:lib","target":"@components/liquikit/glass/backdrop.ts"},{"path":"src/glass/glass-segmented-surface.tsx","content":"$69","type":"registry:lib","target":"@components/liquikit/glass/glass-segmented-surface.tsx"},{"path":"src/glass/engine.ts","content":"let smoothDisplacement: boolean | undefined;\n\nexport function displacementIsSmooth() {\n\tif (smoothDisplacement === undefined) {\n\t\tsmoothDisplacement =\n\t\t\ttypeof navigator !== \"undefined\" &&\n\t\t\t/\\bGecko\\/\\d/.test(navigator.userAgent);\n\t}\n\treturn smoothDisplacement;\n}\n","type":"registry:lib","target":"@components/liquikit/glass/engine.ts"},{"path":"src/glass/glass-toggle-group.tsx","content":"$6a","type":"registry:lib","target":"@components/liquikit/glass/glass-toggle-group.tsx"},{"path":"src/glass/use-glass-slider.ts","content":"$6b","type":"registry:lib","target":"@components/liquikit/glass/use-glass-slider.ts"},{"path":"src/glass/glass-pane.tsx","content":"$6c","type":"registry:lib","target":"@components/liquikit/glass/glass-pane.tsx"},{"path":"src/glass/glass-slider.tsx","content":"$6d","type":"registry:lib","target":"@components/liquikit/glass/glass-slider.tsx"},{"path":"src/glass/scope.tsx","content":"$6e","type":"registry:lib","target":"@components/liquikit/glass/scope.tsx"},{"path":"src/glass/glass.css","content":"$6f","type":"registry:file","target":"@components/liquikit/glass/glass.css"},{"path":"src/glass/motion.ts","content":"$70","type":"registry:lib","target":"@components/liquikit/glass/motion.ts"},{"path":"src/glass/presets.ts","content":"$71","type":"registry:lib","target":"@components/liquikit/glass/presets.ts"},{"path":"src/glass/theme.tsx","content":"\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\nimport type { GlassTheme } from \"./presets\";\nimport \"./glass.css\";\n\nconst GlassThemeContext = createContext(\"light\");\n\nexport function useGlassTheme(theme?: GlassTheme): GlassTheme {\n\tconst inherited = useContext(GlassThemeContext);\n\treturn theme ?? inherited;\n}\n\nexport type GlassThemeProviderProps = {\n\ttheme: GlassTheme;\n\tchildren?: ReactNode;\n};\n\nexport function GlassThemeProvider({\n\ttheme,\n\tchildren,\n}: GlassThemeProviderProps) {\n\treturn (\n\t\t\n\t\t\t

\n\t\t\t\t{children}\n\t\t\t

\n\t\t\n\t);\n}\n","type":"registry:lib","target":"@components/liquikit/glass/theme.tsx"},{"path":"src/glass/use-squish.ts","content":"$72","type":"registry:lib","target":"@components/liquikit/glass/use-squish.ts"},{"path":"src/glass/optics.ts","content":"$73","type":"registry:lib","target":"@components/liquikit/glass/optics.ts"},{"path":"src/glass/glass.tsx","content":"$74","type":"registry:lib","target":"@components/liquikit/glass/glass.tsx"},{"path":"src/glass/glass-switch.tsx","content":"$75","type":"registry:lib","target":"@components/liquikit/glass/glass-switch.tsx"},{"path":"src/glass/glass-segmented.css","content":"$76","type":"registry:file","target":"@components/liquikit/glass/glass-segmented.css"},{"path":"src/glass/glass-pane.css","content":"$77","type":"registry:file","target":"@components/liquikit/glass/glass-pane.css"},{"path":"src/glass/glass-switch-surface.tsx","content":"$78","type":"registry:lib","target":"@components/liquikit/glass/glass-switch-surface.tsx"},{"path":"src/glass/settle.ts","content":"$79","type":"registry:lib","target":"@components/liquikit/glass/settle.ts"},{"path":"src/glass/glass-slider-surface.tsx","content":"$7a","type":"registry:lib","target":"@components/liquikit/glass/glass-slider-surface.tsx"}],"className":"h-[70svh] min-h-80"}]]}]