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:T29d4,import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useMemo, useState, type ReactNode, } from 'react'; import { Animated, Easing, StyleSheet, Text, View, type ImageSourcePropType, type ViewProps, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { wrapPlainText } from './lib/plain-text'; import { GLASS_MOTION, type GlassTone } from './lib/tokens'; export type GlassAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export type GlassAvatarStatus = 'online' | 'away' | 'busy' | 'offline'; export type GlassAvatarProps = Omit & { /** Describes the image. Defaults to `name`. */ alt?: string; /** Shown when there is no image or it fails to load. Defaults to the initials of `name`. */ fallback?: ReactNode; /** Names the person. Its initials fill in for a missing image and pick the colour. */ name?: string; size?: GlassAvatarSize; /** A bundled image, as `require('./photo.jpg')` gives it. Use `src` for an address. */ source?: ImageSourcePropType; /** The image's address. */ src?: string; /** A presence dot on the corner. */ status?: GlassAvatarStatus; }; const SIZE = { xs: { diameter: 24, dot: 7 }, sm: { diameter: 32, dot: 8 }, md: { diameter: 40, dot: 10 }, lg: { diameter: 56, dot: 14 }, xl: { diameter: 80, dot: 18 }, } as const; // Initials sit on one of these gradients, picked by the name so a person keeps their colour. const TONES = [ ['#2d6de9', '#1a4fc7'], ['#b93f24', '#882c1a'], ['#707075', '#56565b'], ['#d0386f', '#a82458'], ['#b9540f', '#9c4308'], ['#1f8150', '#146c3c'], ['#0e7d8b', '#0a6674'], ['#747479', '#535359'], ] as const; // A face without a name is plain gray. const NAMELESS = ['#747479', '#535359'] as const; // The face's hairline rim and the light along its top. const RIM = { dark: 'inset 0px 0px 0px 1px rgba(255, 255, 255, 0.18), inset 0px 1px 0px rgba(255, 255, 255, 0.22)', light: 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.3)', } as const; // The "+N" counter is a step brighter than a resting control. const MORE_FILL = { dark: 'rgba(245, 245, 247, 0.14)', light: 'rgba(255, 255, 255, 0.95)', } as const; const STATUS_TONE = { away: 'orange', busy: 'red', offline: 'neutral', online: 'green', } as const satisfies Record; // The web cuts the face away around the dot and under the next avatar. React Native has no masks, // so a ring in the surface colour draws that gap instead. const GAP = 2; const EASE_OUT = Easing.bezier(0.32, 0.72, 0, 1); const GroupSizeContext = createContext(null); function initialsOf(name: string) { const words = name.trim().split(/\s+/).filter(Boolean); if (words.length === 0) return ''; const first = Array.from(words[0])[0] ?? ''; const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] ?? '') : ''; return `${first}${last}`.toUpperCase(); } // The same name always gets the same colour. function toneOf(name: string) { let hash = 0; for (const character of name) hash = (hash * 31 + (character.codePointAt(0) ?? 0)) >>> 0; return TONES[hash % TONES.length]; } type FaceProps = { fallback: ReactNode; source: ImageSourcePropType | undefined; tone: readonly [string, string]; }; /** The image once it loads, over the fallback until then or for good if it fails. */ function Face({ fallback, source, tone }: FaceProps) { const { preferences } = useGlassTheme(); const [status, setStatus] = useState<'loading' | 'loaded' | 'failed'>('loading'); const [arrival] = useState(() => new Animated.Value(0)); const handleLoad = useCallback(() => { setStatus('loaded'); if (preferences.reduceMotion) { arrival.setValue(1); return; } Animated.timing(arrival, { duration: 260, easing: EASE_OUT, toValue: 1, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); }, [arrival, preferences.reduceMotion]); const handleError = useCallback(() => setStatus('failed'), []); return ( <> {status === 'loaded' ? null : ( {fallback} )} {source && status !== 'failed' ? ( ) : null} ); } /** A round photo that falls back to coloured initials, with an optional presence dot. */ export const GlassAvatar = forwardRef( ({ alt, fallback, name, size = 'md', source, src, status, style, ...rest }, ref) => { const { colors, preferences } = useGlassTheme(); const groupSize = useContext(GroupSizeContext); const { diameter, dot } = SIZE[groupSize ?? size]; const image = useMemo(() => source ?? (src ? { uri: src } : undefined), [source, src]); // A new image starts over, showing the fallback until it loads. const imageKey = image ? JSON.stringify(image) : 'none'; const described = [alt ?? name, status].filter(Boolean).join(', '); // The dot's centre sits on the circle's edge, at its lower trailing corner. const center = diameter * 0.8536; const content = wrapPlainText(fallback ?? (name ? initialsOf(name) : null), (text) => ( {text} )); return ( 0} style={[{ height: diameter, width: diameter }, style]} {...rest} > {status ? ( ) : null} ); }, ); GlassAvatar.displayName = 'GlassAvatar'; export type GlassAvatarGroupProps = ViewProps & { /** Shows this many avatars, then a "+N" for the rest. */ max?: number; /** Sizes every avatar in the group. */ size?: GlassAvatarSize; }; /** Avatars stacked edge to edge, each overlapping the one before it, then a "+N" for the rest. */ export const GlassAvatarGroup = forwardRef( ({ children, max, size = 'md', style, ...rest }, ref) => { const { colors, preferences } = useGlassTheme(); const items = Children.toArray(children); const shown = max === undefined ? items : items.slice(0, Math.max(0, max)); const hidden = items.length - shown.length; const { diameter } = SIZE[size]; // Each avatar wears the gap ring outside its own outline, so the ring takes no room. const ring = { borderColor: colors.opaqueSurface, borderRadius: diameter / 2 + GAP, borderWidth: GAP, margin: -GAP, }; const overlap = { marginStart: -diameter * 0.2 - GAP }; return ( {shown.map((child, index) => ( 0 && overlap]} > {child} ))} {hidden > 0 ? ( 0 && overlap]} > +{hidden} ) : null} ); }, ); GlassAvatarGroup.displayName = 'GlassAvatarGroup'; const styles = StyleSheet.create({ center: { alignItems: 'center', justifyContent: 'center' }, dot: { borderWidth: GAP, pointerEvents: 'none', position: 'absolute' }, face: { height: '100%', overflow: 'hidden', width: '100%' }, group: { alignItems: 'center', flexDirection: 'row' }, initials: { color: '#ffffff', fontWeight: '600', textShadowColor: 'rgba(0, 0, 0, 0.22)', textShadowOffset: { height: 1, width: 0 }, textShadowRadius: 1, }, more: { fontWeight: '600' }, rim: { pointerEvents: 'none' }, }); 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-avatar.tsx","content":"$56","type":"registry:ui","target":"components/glassyui/glass-avatar.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"}],"className":"h-[70svh] min-h-80"}]]}]