52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:Tcc9,import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore, type ReactNode, } from 'react'; import { useColorScheme } from 'react-native'; import { readSystemAccessibility, subscribeToSystemAccessibility, type GlassyUiPreferences, type GlassyUiTheme, } from './lib/preferences'; import { GLASS_COLORS } from './lib/tokens'; type PreferenceState = Required; type PreferenceContextValue = { preferences: PreferenceState; setPreferences: (prefs: Partial) => void; }; const PreferencesContext = createContext(null); function ignorePreferences() {} /** The device's appearance and accessibility settings, as glass preferences. */ function useSystemPreferences(): PreferenceState { const scheme = useColorScheme(); const accessibility = useSyncExternalStore( subscribeToSystemAccessibility, readSystemAccessibility, readSystemAccessibility, ); return useMemo( () => ({ theme: scheme === 'light' ? 'light' : 'dark', mode: 'clear', reduceMotion: accessibility.reduceMotion, reduceTransparency: accessibility.reduceTransparency, }), [accessibility, scheme], ); } /** * Holds the glass preferences every component follows. It starts from the device's appearance, * Reduce Motion and Reduce Transparency settings; `defaultTheme` overrides the appearance until * the app sets a theme. Choices made with `setPreferences` last while the provider is mounted; * persist them in your app's own storage if they should survive a restart. */ export function GlassProvider({ children, defaultTheme, }: { children: ReactNode; defaultTheme?: GlassyUiTheme; }) { const system = useSystemPreferences(); const [explicit, setExplicit] = useState({}); const preferences = useMemo(() => { const merged: PreferenceState = { ...system, ...explicit }; if (defaultTheme && explicit.theme === undefined) merged.theme = defaultTheme; return merged; }, [defaultTheme, explicit, system]); const setPreferences = useCallback((next: Partial) => { setExplicit((previous) => ({ ...previous, ...next })); }, []); const value = useMemo(() => ({ preferences, setPreferences }), [preferences, setPreferences]); return {children}; } export const PreferencesProvider = GlassProvider; /** The provider's preferences, or the device's own settings when no provider is mounted. */ export function useOptionalPreferences(): PreferenceContextValue { const context = useContext(PreferencesContext); const system = useSystemPreferences(); return context ?? { preferences: system, setPreferences: ignorePreferences }; } export function usePreferences() { const context = useContext(PreferencesContext); if (!context) { throw new Error('usePreferences must be used within GlassProvider'); } return context; } /** The colours for the current theme, with the preferences they came from. */ export function useGlassTheme() { const { preferences } = useOptionalPreferences(); return { colors: GLASS_COLORS[preferences.theme], preferences }; } 54:Taee,import { AccessibilityInfo, Platform } from 'react-native'; export type GlassyUiMode = 'clear' | 'tinted'; export type GlassyUiTheme = 'light' | 'dark'; export interface GlassyUiPreferences { theme?: GlassyUiTheme; /** Clear glass shows more of what lies behind it; tinted glass holds a denser frost. */ mode?: GlassyUiMode; reduceTransparency?: boolean; reduceMotion?: boolean; } export type SystemAccessibility = { reduceMotion: boolean; reduceTransparency: boolean; }; type Subscription = { remove: () => void }; // The system's accessibility settings, read once and shared by every glass component. let snapshot: SystemAccessibility = { reduceMotion: false, reduceTransparency: false }; const listeners = new Set<() => void>(); let subscriptions: Subscription[] = []; function update(next: Partial) { const merged = { ...snapshot, ...next }; if ( merged.reduceMotion === snapshot.reduceMotion && merged.reduceTransparency === snapshot.reduceTransparency ) { return; } snapshot = merged; listeners.forEach((listener) => listener()); } function warnReadFailure(cause: Error) { console.warn('Glassy UI could not read an accessibility setting', cause); } function startListening() { AccessibilityInfo.isReduceMotionEnabled() .then((reduceMotion) => update({ reduceMotion })) .catch(warnReadFailure); subscriptions.push( AccessibilityInfo.addEventListener('reduceMotionChanged', (reduceMotion) => update({ reduceMotion }), ), ); if (Platform.OS === 'ios') { AccessibilityInfo.isReduceTransparencyEnabled() .then((reduceTransparency) => update({ reduceTransparency })) .catch(warnReadFailure); subscriptions.push( AccessibilityInfo.addEventListener('reduceTransparencyChanged', (reduceTransparency) => update({ reduceTransparency }), ), ); } // React Native for Web has no reduce-transparency event; the browser reports it directly. if (Platform.OS === 'web' && window.matchMedia) { const query = window.matchMedia('(prefers-reduced-transparency: reduce)'); const handleChange = () => update({ reduceTransparency: query.matches }); update({ reduceTransparency: query.matches }); query.addEventListener('change', handleChange); subscriptions.push({ remove: () => query.removeEventListener('change', handleChange) }); } } export function subscribeToSystemAccessibility(listener: () => void) { listeners.add(listener); if (listeners.size === 1) startListening(); return () => { listeners.delete(listener); if (listeners.size > 0) return; subscriptions.forEach((subscription) => subscription.remove()); subscriptions = []; }; } export function readSystemAccessibility() { return snapshot; } 55:Tddf,import { Platform } from 'react-native'; import type { GlassyUiTheme } from './preferences'; export type GlassTone = 'neutral' | 'blue' | 'green' | 'orange' | 'red' | 'purple'; export type GlassColors = { /** Selection, active controls and the prominent button. */ accent: string; accentForeground: string; border: string; /** The resting fill of fields and unselected controls. */ controlSurface: string; focusRing: string; foreground: string; /** Extra frost over blurred glass, for clear and tinted glass. */ glassFill: Record<'clear' | 'tinted', string>; invalid: string; knob: string; mutedForeground: string; /** Where glass cannot be drawn: Reduce Transparency. */ opaqueSurface: string; /** Floating layers that must hold 4.5:1 text over any backdrop. */ overlaySurface: string; /** The hairline round a glass edge, and the light it catches along the top. */ rim: string; rimHighlight: string; scrim: string; shadow: string; shadowRaised: string; tones: Record; track: string; }; /** Glass stays neutral. Blue marks actions and selection; the tones mark status. */ export const GLASS_COLORS = { dark: { accent: '#0067d9', accentForeground: '#ffffff', border: 'rgba(245, 245, 247, 0.22)', controlSurface: 'rgba(245, 245, 247, 0.08)', focusRing: '#b8b8be', foreground: '#f5f5f7', glassFill: { clear: 'rgba(255, 255, 255, 0.04)', tinted: 'rgba(28, 28, 30, 0.45)' }, invalid: '#ff7a8e', knob: '#ffffff', mutedForeground: '#d1d1d6', opaqueSurface: '#2c2c2e', overlaySurface: 'rgba(44, 44, 46, 0.78)', rim: 'rgba(255, 255, 255, 0.16)', rimHighlight: 'rgba(255, 255, 255, 0.34)', scrim: 'rgba(0, 0, 0, 0.45)', shadow: '0px 1px 2px rgba(0, 0, 0, 0.18), 0px 8px 24px -4px rgba(0, 0, 0, 0.28)', shadowRaised: '0px 2px 6px rgba(0, 0, 0, 0.2), 0px 30px 60px -18px rgba(0, 0, 0, 0.55)', tones: { neutral: '#8e8e93', blue: '#78b7ff', green: '#33d69f', orange: '#ffbd38', red: '#ff5c7a', purple: '#9b80ff', }, track: 'rgba(118, 118, 128, 0.36)', }, light: { accent: '#0067d9', accentForeground: '#ffffff', border: 'rgba(0, 0, 0, 0.14)', controlSurface: 'rgba(255, 255, 255, 0.72)', focusRing: '#66666a', foreground: '#222224', glassFill: { clear: 'rgba(255, 255, 255, 0.18)', tinted: 'rgba(255, 255, 255, 0.55)' }, invalid: '#c4153f', knob: '#ffffff', mutedForeground: '#505055', opaqueSurface: '#ffffff', overlaySurface: 'rgba(255, 255, 255, 0.82)', rim: 'rgba(255, 255, 255, 0.55)', rimHighlight: 'rgba(255, 255, 255, 0.9)', scrim: 'rgba(0, 0, 0, 0.16)', shadow: '0px 1px 2px rgba(0, 0, 0, 0.06), 0px 8px 24px -6px rgba(0, 0, 0, 0.14)', shadowRaised: '0px 2px 6px rgba(0, 0, 0, 0.06), 0px 28px 56px -18px rgba(0, 0, 0, 0.26)', tones: { neutral: '#8e8e93', blue: '#005ec6', green: '#14a874', orange: '#e8960c', red: '#e8345a', purple: '#6a4cf0', }, track: 'rgba(118, 118, 128, 0.2)', }, } as const satisfies Record; export const GLASS_RADIUS = { md: 16, lg: 24, capsule: 999 } as const; /** Arrivals ease out; physical responses spring and settle. Exits run shorter than arrivals. */ export const GLASS_MOTION = { duration: 200, /** React Native for Web has no native driver and warns when asked for one. */ nativeDriver: Platform.OS !== 'web', spring: { damping: 18, mass: 1, stiffness: 260 }, } as const; 56:T183c,import { forwardRef, useCallback, useEffect, useState, type ReactNode } from 'react'; import { Animated, Easing, I18nManager, StyleSheet, Text, View, type LayoutChangeEvent, type ViewProps, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { plainTextOf, wrapPlainText } from './lib/plain-text'; import { GLASS_MOTION, GLASS_RADIUS } from './lib/tokens'; import { useLoop } from './lib/use-loop'; export type GlassProgressSize = 'sm' | 'md' | 'lg'; export type GlassProgressProps = Omit & { /** Text above the bar. It also names the bar for assistive technology. */ label?: ReactNode; /** The value that means done. Defaults to 100. */ max?: number; /** Shows the percentage beside the label. */ showValue?: boolean; size?: GlassProgressSize; /** How far along. Leave it out, or pass null, when the length is unknown. */ value?: number | null; }; const TRACK_HEIGHT = { sm: 4, md: 8, lg: 12 } as const; // The web's ease-out curve, for the fill sliding to a new value. const EASE_OUT = Easing.bezier(0.32, 0.72, 0, 1); const SLIDE_MS = 640; // Without a value, a segment 40% as wide as the track sweeps across it and starts again. const SEGMENT = 0.4; const SWEEP_MS = 1600; /** * A track with a fill that slides to its value. Without a value a segment sweeps along it, for * work of unknown length; Reduce Motion holds the segment still in the middle. */ export const GlassProgress = forwardRef( ( { accessibilityLabel, label, max = 100, showValue = false, size = 'md', style, value, ...rest }, ref, ) => { const { colors, preferences } = useGlassTheme(); const [width, setWidth] = useState(0); const known = value !== null && value !== undefined && Number.isFinite(value); const clamped = known ? Math.min(Math.max(value, 0), max) : 0; const fraction = known && max > 0 ? clamped / max : 0; const percent = Math.round(fraction * 100); const [fill] = useState(() => new Animated.Value(fraction)); const sweep = useLoop(SWEEP_MS, !known && !preferences.reduceMotion); // Translation is physical, so a right-to-left layout fills from the right. const direction = I18nManager.isRTL ? -1 : 1; const segment = SEGMENT * width; useEffect(() => { if (preferences.reduceMotion) { fill.setValue(fraction); return; } const animation = Animated.timing(fill, { duration: SLIDE_MS, easing: EASE_OUT, toValue: fraction, useNativeDriver: GLASS_MOTION.nativeDriver, }); animation.start(); return () => animation.stop(); }, [fill, fraction, preferences.reduceMotion]); const measure = useCallback((event: LayoutChangeEvent) => { setWidth(event.nativeEvent.layout.width); }, []); const fillColors = { backgroundColor: colors.accent }; return ( {label || (showValue && known) ? ( {wrapPlainText(label, (text) => ( {text} ))} {showValue && known ? ( {percent}% ) : null} ) : null} {width > 0 && known ? ( // The whole pill slides in from the start, so its leading end stays round. ) : null} {width > 0 && !known ? ( ) : null} ); }, ); GlassProgress.displayName = 'GlassProgress'; const styles = StyleSheet.create({ fill: { borderCurve: 'continuous', borderRadius: GLASS_RADIUS.capsule, boxShadow: 'inset 0px 1px 0px rgba(255, 255, 255, 0.4)', experimental_backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 60%)', }, header: { alignItems: 'baseline', flexDirection: 'row', gap: 16 }, label: { flexShrink: 1, fontSize: 14, lineHeight: 20 }, root: { gap: 8, width: '100%' }, segment: { bottom: 0, pointerEvents: 'none', position: 'absolute', start: 0, top: 0, width: `${SEGMENT * 100}%`, }, track: { borderCurve: 'continuous', borderRadius: GLASS_RADIUS.capsule, boxShadow: 'inset 0px 1px 2px rgba(0, 0, 0, 0.18)', overflow: 'hidden', }, value: { fontSize: 14, fontVariant: ['tabular-nums'], lineHeight: 20, marginStart: 'auto', }, }); 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/glassyui-native/glass-provider.tsx","content":"$53","type":"registry:ui","target":"components/glassyui/glass-provider.tsx"},{"path":"registry/glassyui-native/lib/preferences.ts","content":"$54","type":"registry:lib","target":"components/glassyui/lib/preferences.ts"},{"path":"registry/glassyui-native/lib/tokens.ts","content":"$55","type":"registry:lib","target":"components/glassyui/lib/tokens.ts"},{"path":"registry/glassyui-native/lib/use-controllable-state.ts","content":"import { useCallback, useState } from 'react';\n\n/**\n * State a component owns until its parent passes `value`; then the parent owns it. Either way\n * `onChange` hears every change the component makes.\n */\nexport function useControllableState(\n value: T | undefined,\n defaultValue: T,\n onChange?: (next: T) => void,\n) {\n const [uncontrolled, setUncontrolled] = useState(defaultValue);\n const controlled = value !== undefined;\n const current = controlled ? value : uncontrolled;\n\n const setValue = useCallback(\n (next: T) => {\n if (!controlled) setUncontrolled(next);\n\n onChange?.(next);\n },\n [controlled, onChange],\n );\n\n return [current, setValue] as const;\n}\n","type":"registry:lib","target":"components/glassyui/lib/use-controllable-state.ts"},{"path":"registry/glassyui-native/glass-progress.tsx","content":"$56","type":"registry:ui","target":"components/glassyui/glass-progress.tsx"},{"path":"registry/glassyui-native/lib/plain-text.ts","content":"import { Children, isValidElement, type ReactNode } from 'react';\n\n/**\n * Sets plain text inside a Text, which React Native needs to render it. Content that is all text\n * becomes one Text; beside elements such as icons, each run of text gets its own.\n */\nexport function wrapPlainText(node: ReactNode, render: (text: ReactNode) => ReactNode) {\n const parts = Children.toArray(node);\n\n if (parts.length === 0) return null;\n\n if (parts.every((part) => !isValidElement(part))) return render(node);\n\n return Children.map(node, (part) => (isValidElement(part) ? part : render(part)));\n}\n\n/** The words in `node` when it is only text, to name a control for assistive technology. */\nexport function plainTextOf(node: ReactNode) {\n const parts = Children.toArray(node);\n\n return parts.length > 0 && parts.every((part) => !isValidElement(part))\n ? parts.join('')\n : undefined;\n}\n","type":"registry:lib","target":"components/glassyui/lib/plain-text.ts"},{"path":"registry/glassyui-native/lib/use-loop.ts","content":"import { useEffect, useState } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { GLASS_MOTION } from './tokens';\n\n/**\n * A value that runs from 0 to 1 over `duration`, then starts again, for the library's only loops:\n * progress, spinners and skeletons. It rests at 0 while `running` is false and stops on unmount.\n */\nexport function useLoop(duration: number, running: boolean) {\n // State, not a ref, holds the value: render reads it, and it never changes identity.\n const [progress] = useState(() => new Animated.Value(0));\n\n useEffect(() => {\n progress.setValue(0);\n\n if (!running) return;\n\n const loop = Animated.loop(\n Animated.timing(progress, {\n duration,\n easing: Easing.linear,\n toValue: 1,\n useNativeDriver: GLASS_MOTION.nativeDriver,\n }),\n );\n\n loop.start();\n\n return () => loop.stop();\n }, [duration, progress, running]);\n\n return progress;\n}\n","type":"registry:lib","target":"components/glassyui/lib/use-loop.ts"}],"className":"h-[70svh] min-h-80"}]]}]