52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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"] 54: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 }; } 55: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; } 56: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; 57:T15fc,import { BlurView } from 'expo-blur'; import { GlassView } from 'expo-glass-effect'; import { Children, forwardRef } from 'react'; import { Platform, StyleSheet, Text, View, type ViewProps } from 'react-native'; import { useGlassBackdrop } from './glass-backdrop'; import { useGlassTheme } from './glass-provider'; import { resolveGlassMaterial } from './lib/material'; import { GLASS_RADIUS } from './lib/tokens'; export type SurfacePreset = 'subtle' | 'standard' | 'prominent' | 'control' | 'overlay'; export type SurfaceElevation = 'none' | 'base' | 'raised'; export type GlassSurfaceProps = ViewProps & { /** Floating glass casts a shadow; glass set into a layout does not. Defaults to base. */ elevation?: SurfaceElevation; /** * How much frost: subtle shows the most of what lies behind, prominent the least. Overlay is * for floating layers such as dialogs and menus: its denser tint keeps text at 4.5:1 over any * backdrop. */ preset?: SurfacePreset; /** * Colours the glass, as the prominent button's blue does. Use an opaque colour. Where the glass * is a blur, the tint covers 92% of it, so white text on a tint that holds 4.5:1 alone still * does over a white backdrop. */ tint?: string; }; // How strongly each preset blurs where the system's glass is unavailable. On the web these // land on the same blur radii as the CSS glass. const BLUR_INTENSITY: Record = { subtle: 40, control: 50, standard: 70, prominent: 90, overlay: 90, }; let warnedAboutAndroidBackdrop = false; /** * The glass material on its own. iOS 26 and later draw the system's own glass; earlier iOS, * Android and the web blur what lies behind and light the rim; Reduce Transparency turns the * glass opaque. Text children are set in the theme's ink. */ export const GlassSurface = forwardRef( ({ children, elevation = 'base', preset = 'standard', style, tint, ...rest }, ref) => { const { colors, preferences } = useGlassTheme(); const backdrop = useGlassBackdrop(); const material = resolveGlassMaterial(preferences.reduceTransparency); const radius = StyleSheet.flatten(style)?.borderRadius ?? GLASS_RADIUS.md; const corners = { borderRadius: radius, borderCurve: 'continuous' } as const; const blurTarget = backdrop?.target ?? undefined; if ( Platform.OS === 'android' && material === 'blur' && !backdrop && !warnedAboutAndroidBackdrop ) { warnedAboutAndroidBackdrop = true; console.warn( 'Glassy UI: Android blurs only what sits inside a GlassBackdrop. Glass outside one is a translucent tint.', ); } return ( {material === 'liquid' ? ( ) : null} {material === 'blur' ? ( ) : null} {material === 'solid' ? ( ) : null} {Children.map(children, (child) => // Children.map yields null, elements or text; only text needs a Text to render in. child === null || child instanceof Object ? ( child ) : ( {child} ), )} ); }, ); GlassSurface.displayName = 'GlassSurface'; const styles = StyleSheet.create({ clip: { overflow: 'hidden' }, layer: { pointerEvents: 'none' }, }); 58:T6ee,import { BlurTargetView } from 'expo-blur'; import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode, type RefObject, } from 'react'; import { StyleSheet, View, type ViewProps } from 'react-native'; type BackdropTarget = { /** The view Android blurs, once it has mounted. */ target: RefObject | null; }; const BackdropContext = createContext(null); /** The nearest GlassBackdrop, or null when glass sits outside one. */ export function useGlassBackdrop() { return useContext(BackdropContext); } export type GlassBackdropProps = ViewProps & { /** What the glass sits over: a wallpaper, a photo or the screen's own content. */ backdrop: ReactNode; }; /** * Lays its children over `backdrop`. iOS and the web blur whatever lies behind glass; Android can * only blur a view marked for it, so glass in the children blurs this backdrop there. Glass * outside any GlassBackdrop shows on Android as a translucent tint without blur. */ export function GlassBackdrop({ backdrop, children, ...rest }: GlassBackdropProps) { const targetRef = useRef(null); const [target, setTarget] = useState | null>(null); // Android's blur reads its target when it mounts or when the target object changes, so the // glass gets a fresh object once the backdrop exists. useEffect(() => { setTarget({ current: targetRef.current }); }, []); const value = useMemo(() => ({ target }), [target]); return ( {backdrop} {children} ); } 59:T5ee,package eightbitlab.com.blurview; import android.content.Context; import android.graphics.Color; import android.os.Build; /** Keeps Expo's BlurView API while sharing its Android 12+ backdrop filters. */ public final class SharedBlurView extends BlurView { private int sharedOverlayColor = Color.TRANSPARENT; public SharedBlurView(Context context) { super(context); } @Override public BlurViewFacade setupWith( BlurTarget target, BlurAlgorithm algorithm, float scaleFactor, boolean applyNoise) { if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) { return super.setupWith(target, algorithm, scaleFactor, applyNoise); } blurController.destroy(); blurController = new SharedBlurController( this, target, sharedOverlayColor, scaleFactor, applyNoise); return blurController; } @Override public BlurViewFacade setOverlayColor(int color) { sharedOverlayColor = color; return super.setOverlayColor(color); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); if (blurController instanceof SharedBlurController) { ((SharedBlurController) blurController).attach(); } } @Override protected void onDetachedFromWindow() { if (blurController instanceof SharedBlurController) { ((SharedBlurController) blurController).detach(); } super.onDetachedFromWindow(); } } 5a:T41b7,package eightbitlab.com.blurview; import android.graphics.BlendMode; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.ColorFilter; import android.graphics.Paint; import android.graphics.RecordingCanvas; import android.graphics.Rect; import android.graphics.RenderEffect; import android.graphics.RenderNode; import android.graphics.Shader; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; import android.os.Build; import android.view.View; import android.view.ViewTreeObserver; import java.lang.ref.WeakReference; import java.util.HashMap; import java.util.Map; import java.util.WeakHashMap; /** Shares only the filtered backdrop; each surface retains its own material and transform. */ final class SharedBlurController extends RenderNodeBlurController { private final BlurView view; private final BlurTarget target; private final float scaleFactor; private final boolean applyNoise; private final Pool pool; private final RenderNode wrapper = new RenderNode("Glassy UI surface"); private final int[] targetLocation = new int[2]; private final int[] viewLocation = new int[2]; private final ViewTreeObserver.OnPreDrawListener positionListener = () -> { updateWrapper(); return true; }; private ViewTreeObserver positionObserver; private Entry entry; private Drawable clearDrawable; private float radius = 1f; private int overlayColor; private boolean enabled = true; private boolean autoUpdate = true; private boolean attached; private boolean destroyed; private boolean wrapperDirty = true; private int wrapperWidth = -1; private int wrapperHeight = -1; SharedBlurController( BlurView view, BlurTarget target, int overlayColor, float scaleFactor, boolean applyNoise) { super(view, target, overlayColor, scaleFactor, applyNoise); // The superclass remains the software-canvas renderer, without a second position listener. super.setBlurAutoUpdate(false); this.view = view; this.target = target; this.overlayColor = overlayColor; this.scaleFactor = scaleFactor; this.applyNoise = applyNoise; pool = Pool.forTarget(target); attached = view.isAttachedToWindow(); if (attached) { acquireEntry(); observePosition(); } } @Override public boolean draw(Canvas canvas) { // Detached hardware captures keep the original per-view RenderNode owner and lifetime. if (!canvas.isHardwareAccelerated() || !attached) { return super.draw(canvas); } if (!enabled || destroyed) { return true; } acquireEntry(); if (!target.renderNode.hasDisplayList()) { // A dialog window can draw before the target's first frame. view.invalidate(); } if (autoUpdate) { entry.ensureRecorded(); } else { // Stock still refreshes on an explicit draw with automatic updates stopped. entry.record(); } updateWrapper(); canvas.drawRenderNode(wrapper); if (applyNoise) { Noise.apply(canvas, view.getContext(), view.getWidth(), view.getHeight()); } if (overlayColor != Color.TRANSPARENT) { canvas.drawColor(overlayColor); } return true; } void attach() { if (destroyed) { return; } attached = true; if (enabled) { acquireEntry(); } observePosition(); } void detach() { attached = false; stopObservingPosition(); releaseEntry(); } @Override public void destroy() { if (!destroyed) { detach(); destroyed = true; super.destroy(); } } @Override public void updateBlurViewSize() { super.updateBlurViewSize(); wrapperDirty = true; updateWrapper(); } @Override public BlurViewFacade setBlurRadius(float radius) { super.setBlurRadius(radius); if (Float.floatToIntBits(this.radius) != Float.floatToIntBits(radius)) { this.radius = radius; replaceEntry(); } return this; } @Override public BlurViewFacade setFrameClearDrawable(Drawable drawable) { super.setFrameClearDrawable(drawable); if (clearDrawable != drawable) { clearDrawable = drawable; replaceEntry(); } return this; } @Override public BlurViewFacade setOverlayColor(int color) { overlayColor = color; super.setOverlayColor(color); return this; } @Override public BlurViewFacade setBlurEnabled(boolean enabled) { super.setBlurEnabled(enabled); this.enabled = enabled; if (enabled && attached) { acquireEntry(); } else if (!enabled) { releaseEntry(); } observePosition(); return this; } @Override public BlurViewFacade setBlurAutoUpdate(boolean enabled) { super.setBlurAutoUpdate(false); if (autoUpdate != enabled && entry != null) { pool.setAutoUpdate(enabled); } autoUpdate = enabled; observePosition(); return this; } @Override void updateRotation(float rotation) { super.updateRotation(rotation); wrapper.setRotationZ(-rotation); } @Override public void updateScaleX(float scaleX) { super.updateScaleX(scaleX); wrapper.setScaleX(1f / scaleX); } @Override public void updateScaleY(float scaleY) { super.updateScaleY(scaleY); wrapper.setScaleY(1f / scaleY); } private void replaceEntry() { releaseEntry(); if (enabled && attached && !destroyed) { acquireEntry(); } view.invalidate(); } private void acquireEntry() { if (entry == null && !destroyed) { entry = pool.acquire(radius * scaleFactor, clearDrawable, autoUpdate); wrapperDirty = true; } } private void releaseEntry() { wrapper.discardDisplayList(); wrapperDirty = true; if (entry != null) { pool.release(entry, autoUpdate); entry = null; } } private void updateWrapper() { if (entry == null || destroyed) { return; } int width = target.getWidth(); int height = target.getHeight(); if (wrapperWidth != width || wrapperHeight != height) { wrapperWidth = width; wrapperHeight = height; wrapper.setPosition(0, 0, width, height); wrapperDirty = true; } if (wrapperDirty || !wrapper.hasDisplayList()) { RecordingCanvas recording = wrapper.beginRecording(); recording.drawRenderNode(entry.node); wrapper.endRecording(); wrapperDirty = false; } // Match BlurView 3.1's sampling and transform hooks exactly. target.getLocationOnScreen(targetLocation); view.getLocationOnScreen(viewLocation); float translationX = targetLocation[0] - viewLocation[0]; float translationY = targetLocation[1] - viewLocation[1]; wrapper.setPivotX(view.getWidth() / 2f - translationX); wrapper.setPivotY(view.getHeight() / 2f - translationY); wrapper.setTranslationX(translationX); wrapper.setTranslationY(translationY); } private void observePosition() { stopObservingPosition(); if (!destroyed && attached && enabled && autoUpdate) { positionObserver = view.getViewTreeObserver(); positionObserver.addOnPreDrawListener(positionListener); } } private void stopObservingPosition() { if (positionObserver != null) { ViewTreeObserver observer = positionObserver.isAlive() ? positionObserver : view.getViewTreeObserver(); if (observer.isAlive()) { observer.removeOnPreDrawListener(positionListener); } positionObserver = null; } } private static final class Key { final int radiusBits; final Drawable clearDrawable; Key(float radius, Drawable clearDrawable) { radiusBits = Float.floatToIntBits(radius); this.clearDrawable = clearDrawable; } @Override public boolean equals(Object other) { if (!(other instanceof Key)) { return false; } Key key = (Key) other; return radiusBits == key.radiusBits && clearDrawable == key.clearDrawable; } @Override public int hashCode() { return 31 * radiusBits + System.identityHashCode(clearDrawable); } } private static final class Entry { final Key key; final BlurTarget target; final RenderNode node = new RenderNode("Glassy UI shared backdrop"); final ClearColorProbe clearColor = new ClearColorProbe(); int users; Entry(Key key, BlurTarget target) { this.key = key; this.target = target; applyEffect(); } void applyEffect() { float radius = Float.intBitsToFloat(key.radiusBits); node.setRenderEffect( RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP)); } void ensureRecorded() { if (!node.hasDisplayList() || node.getWidth() != target.getWidth() || node.getHeight() != target.getHeight()) { record(); } } boolean clearChanged() { if (key.clearDrawable == null) { return false; } // Exact ColorDrawable drawing includes its private tint filter. Public color // getters alone miss tint changes. Other drawables keep their existing refresh. if (key.clearDrawable.getClass() != ColorDrawable.class || key.clearDrawable.getColorFilter() != null) { return true; } return clearColor.changed((ColorDrawable) key.clearDrawable); } void record() { if (!target.renderNode.hasDisplayList()) { return; } node.setPosition(0, 0, target.getWidth(), target.getHeight()); RecordingCanvas recording = node.beginRecording(); if (key.clearDrawable != null) { key.clearDrawable.draw(recording); } recording.drawRenderNode(target.renderNode); node.endRecording(); // Android 12 needs an explicit effect refresh when its filtered output changes. // The shared node itself never receives a surface's rotation, scale or translation. if (Build.VERSION.SDK_INT == Build.VERSION_CODES.S) { applyEffect(); } } } /** Observes a solid drawable's effective draw command without rasterizing or changing it. */ private static final class ClearColorProbe extends Canvas { private boolean known; private int draws; private boolean changed; private int color; private ColorFilter filter; private BlendMode blendMode; private final Rect bounds = new Rect(); boolean changed(ColorDrawable drawable) { draws = 0; changed = !known; drawable.draw(this); // An unobserved command stays on the original refresh path, including a fully // transparent drawable. Only one recognized solid rectangle can be reused. known = draws == 1; return changed || !known; } @Override public void drawRect(Rect rectangle, Paint paint) { draws++; int nextColor = paint.getColor(); ColorFilter nextFilter = paint.getColorFilter(); BlendMode nextBlendMode = paint.getBlendMode(); changed |= draws != 1 || color != nextColor || filter != nextFilter || blendMode != nextBlendMode || !bounds.equals(rectangle); color = nextColor; filter = nextFilter; blendMode = nextBlendMode; bounds.set(rectangle); } } private static final class Pool implements View.OnAttachStateChangeListener { private static final WeakHashMap> POOLS = new WeakHashMap<>(); final BlurTarget target; final Map entries = new HashMap<>(); final ViewTreeObserver.OnPreDrawListener sourceListener = () -> { boolean sourceChanged = sourceIsDirty(); for (Entry entry : entries.values()) { // Foreground-only frames reuse the filtered source. Independently changing // clear input still refreshes, including resolved solid-color tint changes. if (sourceChanged || entry.clearChanged()) { entry.record(); } else { entry.ensureRecorded(); } } return true; }; ViewTreeObserver sourceObserver; int updatingUsers; static Pool forTarget(BlurTarget target) { WeakReference reference = POOLS.get(target); Pool pool = reference == null ? null : reference.get(); if (pool == null) { pool = new Pool(target); POOLS.put(target, new WeakReference<>(pool)); } return pool; } Pool(BlurTarget target) { this.target = target; } private boolean sourceIsDirty() { // Keep Android 12's explicit refresh: its filtered child cache can stay stale. return Build.VERSION.SDK_INT == Build.VERSION_CODES.S || target.isDirty(); } Entry acquire(float radius, Drawable clearDrawable, boolean autoUpdate) { Key key = new Key(radius, clearDrawable); Entry entry = entries.get(key); if (entry == null) { entry = new Entry(key, target); entries.put(key, entry); } entry.users++; if (autoUpdate) { updatingUsers++; } if (entries.size() == 1 && entry.users == 1) { target.addOnAttachStateChangeListener(this); observeSource(); } else if (autoUpdate && updatingUsers == 1) { observeSource(); } return entry; } void release(Entry entry, boolean autoUpdate) { entry.users--; if (autoUpdate) { updatingUsers--; } if (entry.users == 0) { entries.remove(entry.key); entry.node.discardDisplayList(); } if (entries.isEmpty()) { stopObservingSource(); target.removeOnAttachStateChangeListener(this); } else if (updatingUsers == 0) { stopObservingSource(); } } void setAutoUpdate(boolean enabled) { updatingUsers += enabled ? 1 : -1; if (updatingUsers == 0) { stopObservingSource(); } else if (enabled && updatingUsers == 1) { observeSource(); } } private void observeSource() { stopObservingSource(); if (target.isAttachedToWindow() && updatingUsers > 0) { sourceObserver = target.getViewTreeObserver(); sourceObserver.addOnPreDrawListener(sourceListener); } } private void stopObservingSource() { if (sourceObserver != null) { ViewTreeObserver observer = sourceObserver.isAlive() ? sourceObserver : target.getViewTreeObserver(); if (observer.isAlive()) { observer.removeOnPreDrawListener(sourceListener); } sourceObserver = null; } } @Override public void onViewAttachedToWindow(View view) { observeSource(); } @Override public void onViewDetachedFromWindow(View view) { stopObservingSource(); } } } 5b:Tafd,/* eslint-disable @typescript-eslint/no-require-imports -- Expo loads this config plugin through CommonJS, including in ESM apps. */ const fs = require('node:fs'); const path = require('node:path'); const { withDangerousMod } = require('expo/config-plugins'); const originalImport = 'import eightbitlab.com.blurview.BlurView'; const sharedImport = 'import eightbitlab.com.blurview.SharedBlurView as BlurView'; function withGlassyBlur(config) { return withDangerousMod(config, [ 'android', async (mod) => { const root = mod.modRequest.projectRoot; const manifest = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')); const autolinking = manifest.expo?.autolinking; const sourcePackages = autolinking?.android?.buildFromSource ?? autolinking?.buildFromSource; if (!Array.isArray(sourcePackages) || !sourcePackages.includes('expo-blur')) { throw new Error( 'Glassy UI: add "expo": { "autolinking": { "android": { "buildFromSource": ["expo-blur"] } } } to package.json, then rebuild Android. A prebuilt expo-blur cannot include shared glass.', ); } const blurRoot = path.dirname(require.resolve('expo-blur/package.json', { paths: [root] })); const blurManifest = JSON.parse(fs.readFileSync(path.join(blurRoot, 'package.json'), 'utf8')); const android = path.join(blurRoot, 'android'); const gradle = fs.readFileSync(path.join(android, 'build.gradle'), 'utf8'); const viewFile = path.join(android, 'src/main/java/expo/modules/blur/ExpoBlurView.kt'); const source = fs.readFileSync(viewFile, 'utf8'); const imports = source .split('\n') .filter((line) => line === originalImport || line === sharedImport); if ( blurManifest.version !== '57.0.3' || !gradle.includes("implementation 'com.github.Dimezis:BlurView:version-3.1.0'") || imports.length !== 1 || !source.includes('private val blurView = BlurView(context)') || !source.includes('blurView.setupWith(dimezisBlurTarget)') ) { throw new Error( 'Glassy UI shared Android blur requires expo-blur 57.0.3 with BlurView 3.1.0. The installed native contract changed; verify it before enabling this plugin.', ); } const destination = path.join(android, 'src/main/java/eightbitlab/com/blurview'); fs.mkdirSync(destination, { recursive: true }); for (const name of ['SharedBlurView.java', 'SharedBlurController.java']) { fs.copyFileSync(path.join(__dirname, name), path.join(destination, name)); } if (imports[0] === originalImport) { fs.writeFileSync(viewFile, source.replace(originalImport, sharedImport)); } return mod; }, ]); } module.exports = withGlassyBlur; 5c:T4dc,import { forwardRef } from 'react'; import type { View } from 'react-native'; import { GlassSurface, type GlassSurfaceProps } from './glass-surface'; import { GLASS_RADIUS } from './lib/tokens'; type PanelVariant = 'panel' | 'card' | 'pill'; type PanelElevation = 'base' | 'raised'; export type GlassPanelProps = Omit & { variant?: PanelVariant; elevation?: PanelElevation; }; // Shape and spacing come first, so a consumer's style always wins. const VARIANT_STYLE = { panel: { borderRadius: GLASS_RADIUS.lg, padding: 24 }, card: { borderRadius: GLASS_RADIUS.md, padding: 20 }, pill: { borderRadius: GLASS_RADIUS.capsule, paddingHorizontal: 20, paddingVertical: 12 }, } as const; /** Glass cards, panels and pills for anything that floats above your content. */ export const GlassPanel = forwardRef( ( { elevation = 'base', variant = 'panel', preset = variant === 'pill' ? 'control' : 'standard', style, ...rest }, ref, ) => ( ), ); GlassPanel.displayName = 'GlassPanel'; 5d:T4a27,import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useEffectEvent, useId, useMemo, useState, type ForwardedRef, type ReactElement, type ReactNode, } from 'react'; import { AccessibilityInfo, Animated, PanResponder, Platform, Pressable, StyleSheet, Text, useWindowDimensions, View, type GestureResponderEvent, type LayoutChangeEvent, type PanResponderGestureState, type PressableProps, type StyleProp, type TextProps, type TextStyle, type ViewProps, type ViewStyle, } from 'react-native'; import { GlassPanel } from './glass-panel'; import { useGlassTheme } from './glass-provider'; import { GlassIcon } from './lib/icons'; import { CONTROL_SURFACE_PRESSED, LAYER_EASING, useLayerPresence, useSafeInsets, } from './lib/modal-layer'; import { GLASS_MOTION } from './lib/tokens'; import { useControllableState } from './lib/use-controllable-state'; type ToastEntry = { element: ReactElement; id: string }; type ToastRegistry = { duration: number; remove: (id: string) => void; swipeThreshold: number; upsert: (id: string, element: ReactElement) => void; }; const ToastRegistryContext = createContext(null); const ToastEntriesContext = createContext(null); // Dismisses the toast that a close or action control sits in. const ToastDismissContext = createContext<(() => void) | null>(null); // A flick up faster than this, in points per millisecond, dismisses a toast however short. const FLING_VELOCITY = 0.5; // Where a swipe ended: its distance and its speed, in points per millisecond. type GestureRelease = { dy: number; vy: number }; // The dismiss button's fill under a finger, from liquid.css. const CLOSE_PRESSED = { dark: 'rgba(255, 255, 255, 0.14)', light: 'rgba(0, 0, 0, 0.07)' } as const; export type GlassToastProviderProps = { children?: ReactNode; /** How long a toast stays, in milliseconds. Infinity keeps it until dismissed. Defaults to 5000. */ duration?: number; /** How far a swipe up must travel to dismiss a toast, in points. Defaults to 50. */ swipeThreshold?: number; }; /** Collects the toasts declared anywhere beneath it for GlassToastViewport to show. */ export function GlassToastProvider({ children, duration = 5000, swipeThreshold = 50, }: GlassToastProviderProps) { const [entries, setEntries] = useState([]); const upsert = useCallback((id: string, element: ReactElement) => { setEntries((current) => current.some((entry) => entry.id === id) ? current.map((entry) => (entry.id === id ? { element, id } : entry)) : [...current, { element, id }], ); }, []); const remove = useCallback((id: string) => { setEntries((current) => current.filter((entry) => entry.id !== id)); }, []); const registry = useMemo( () => ({ duration, remove, swipeThreshold, upsert }), [duration, remove, swipeThreshold, upsert], ); return ( {children} ); } function useToastRegistry() { const registry = useContext(ToastRegistryContext); if (!registry) throw new Error('GlassToast must be used within GlassToastProvider'); return registry; } function useToastEntries() { const entries = useContext(ToastEntriesContext); if (!entries) throw new Error('GlassToastViewport must be used within GlassToastProvider'); return entries; } function useToastDismiss(component: string) { const dismiss = useContext(ToastDismissContext); if (!dismiss) throw new Error(`${component} must be used within GlassToast`); return dismiss; } /** Shows the provider's toasts at the top of the screen. Place it once, near the app root. */ export const GlassToastViewport = forwardRef(({ style, ...rest }, ref) => { const entries = useToastEntries(); const insets = useSafeInsets(); return ( {entries.map((entry) => entry.element)} ); }); GlassToastViewport.displayName = 'GlassToastViewport'; export type GlassToastProps = ViewProps & { children?: ReactNode; /** Whether it shows when it mounts, unless `open` is set. Defaults to true, as on the web. */ defaultOpen?: boolean; /** Overrides the provider's duration for this toast. */ duration?: number; onOpenChange?: (open: boolean) => void; open?: boolean; }; type ToastTextSource = { altText?: string; children?: ReactNode }; // What a screen reader hears when a toast appears: its words, with an action's altText in place // of the button, as on the web. function toastText(node: ReactNode): string { const words: string[] = []; for (const child of Children.toArray(node)) { if (!isValidElement(child)) { words.push(String(child)); } else if (child.type === GlassToastAction) { words.push(child.props.altText ?? ''); } else if (child.type !== GlassToastClose) { words.push(toastText(child.props.children)); } } return words.filter(Boolean).join(' '); } /** A glass notification, shown in the viewport, that leaves after its duration or a swipe up. */ export const GlassToast = forwardRef( ({ children, defaultOpen = true, duration, onOpenChange, open, ...rest }, ref) => { const registry = useToastRegistry(); const id = useId(); const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange); const { remove, upsert } = registry; const element = ( {children} ); // React Native has no portals: every render hands the viewport this toast's latest props. useEffect(() => { upsert(id, element); }); useEffect(() => () => remove(id), [id, remove]); return null; }, ); GlassToast.displayName = 'GlassToast'; type ToastCardProps = ViewProps & { announcement: string; children?: ReactNode; duration: number; onOpenChange: (open: boolean) => void; open: boolean; panelRef: ForwardedRef; swipeThreshold: number; }; // Keeps a closing toast in the viewport until it has slid away. function ToastCard({ open, ...props }: ToastCardProps) { const { preferences } = useGlassTheme(); const [present, hide] = useLayerPresence(open, preferences.reduceMotion); return present ? : null; } type ToastLayerProps = ToastCardProps & { onHidden: () => void }; // Mounted while the toast is on screen, so each showing measures the toast afresh. function ToastLayer({ announcement, children, duration, onHidden, onOpenChange, open, panelRef, style, swipeThreshold, ...rest }: ToastLayerProps) { const { colors, preferences } = useGlassTheme(); const { height } = useWindowDimensions(); const [progress] = useState(() => new Animated.Value(0)); const [swipe] = useState(() => new Animated.Value(0)); // How far the toast's lower edge sits below the viewport's top, once it has been laid out. const [reach, setReach] = useState(null); // A finger is on the toast, so its timer waits. const [held, setHeld] = useState(false); const [released, setReleased] = useState(null); const reduceMotion = preferences.reduceMotion; const measured = reach !== null; // Until the toast has measured itself, a whole screen up keeps it out of sight. const travel = (reach ?? height) + 16; const dismiss = useCallback(() => onOpenChange(false), [onOpenChange]); const expire = useEffectEvent(() => onOpenChange(false)); useEffect(() => { if (reduceMotion) { progress.setValue(1); swipe.setValue(0); return; } if (!measured) { // Closed before it was laid out, so there is nothing on screen to slide away. if (!open) onHidden(); return; } const slide = Animated.timing(progress, { duration: open ? 420 : 220, easing: open ? LAYER_EASING.out : LAYER_EASING.in, toValue: open ? 1 : 0, useNativeDriver: GLASS_MOTION.nativeDriver, }); // Shown again after a fling, the toast comes back from where it flew. A new swipe stops only // that return, not the slide. const animation = open ? Animated.parallel( [ slide, Animated.timing(swipe, { duration: 420, easing: LAYER_EASING.out, toValue: 0, useNativeDriver: GLASS_MOTION.nativeDriver, }), ], { stopTogether: false }, ) : slide; animation.start(({ finished }) => { if (finished && !open) onHidden(); }); return () => animation.stop(); }, [measured, onHidden, open, progress, reduceMotion, swipe]); useEffect(() => { if (!open || held || !Number.isFinite(duration) || duration <= 0) return; const timer = setTimeout(() => expire(), duration); return () => clearTimeout(timer); }, [duration, held, open]); // Android reads the toast through its polite live region; iOS has no live regions, so the // toast announces itself there. Doing both would read it twice on Android. useEffect(() => { if (Platform.OS !== 'android' && open && announcement) { AccessibilityInfo.announceForAccessibility(announcement); } }, [announcement, open]); // The responder is built once, so a re-render mid-swipe cannot reset the gesture. It hands each // release to an effect, which reads the latest props. const [swiper] = useState(() => { const release = (_event: GestureResponderEvent, gesture: PanResponderGestureState) => { setHeld(false); setReleased({ dy: gesture.dy, vy: gesture.vy }); }; return PanResponder.create({ // Only a swipe up moves the toast, so taps reach its buttons. onMoveShouldSetPanResponder: (_event, gesture) => gesture.dy < -8 && Math.abs(gesture.dy) > Math.abs(gesture.dx), onPanResponderGrant: () => { swipe.stopAnimation(); setHeld(true); }, onPanResponderMove: (_event, gesture) => swipe.setValue(Math.min(0, gesture.dy)), onPanResponderRelease: release, onPanResponderTerminate: release, onPanResponderTerminationRequest: () => false, }); }); const settle = useEffectEvent(({ dy, vy }: GestureRelease) => { if (-dy > swipeThreshold || vy < -FLING_VELOCITY) { if (reduceMotion) { dismiss(); return; } Animated.timing(swipe, { duration: 160, easing: LAYER_EASING.out, toValue: -travel, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(({ finished }) => { if (finished) dismiss(); }); return; } if (reduceMotion) { swipe.setValue(0); return; } Animated.spring(swipe, { ...GLASS_MOTION.spring, toValue: 0, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); }); useEffect(() => { if (released) settle(released); }, [released]); const handleLayout = (event: LayoutChangeEvent) => { const { height: toastHeight, y } = event.nativeEvent.layout; setReach(y + toastHeight); }; // The dismiss button stands beside the words, not under them. const message: ReactNode[] = []; const closers: ReactNode[] = []; for (const child of Children.toArray(children)) { if (isValidElement(child) && child.type === GlassToastClose) { closers.push(child); } else { message.push(child); } } return ( {setInText(message, [styles.messageText, { color: colors.foreground }])} {closers} ); } // React Native renders a bare string only inside Text. function setInText(children: ReactNode, style: StyleProp) { return Children.map(children, (child) => child === null || child instanceof Object ? child : {child}, ); } /** The toast's headline. */ export const GlassToastTitle = forwardRef(({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ; }); GlassToastTitle.displayName = 'GlassToastTitle'; /** The toast's supporting text. */ export const GlassToastDescription = forwardRef(({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ( ); }); GlassToastDescription.displayName = 'GlassToastDescription'; export type GlassToastActionProps = Omit & { /** * How to do the same without the button, for screen-reader users who may not reach it before * the toast leaves. It is announced with the toast and read as the button's hint. */ altText: string; children?: ReactNode; style?: StyleProp; }; /** A pill under the message, such as Undo. Pressing it runs `onPress` and dismisses the toast. */ export const GlassToastAction = forwardRef( ({ altText, children, onPress, onPressIn, onPressOut, style, ...rest }, ref) => { const dismiss = useToastDismiss('GlassToastAction'); const { colors, preferences } = useGlassTheme(); const [scale] = useState(() => new Animated.Value(1)); const settle = (toValue: number) => { if (preferences.reduceMotion) return; Animated.spring(scale, { ...GLASS_MOTION.spring, toValue, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); }; return ( { onPress?.(event); dismiss(); }} onPressIn={(event) => { onPressIn?.(event); settle(0.94); }} onPressOut={(event) => { onPressOut?.(event); settle(1); }} style={[styles.actionRoot, style]} {...rest} > {children} ); }, ); GlassToastAction.displayName = 'GlassToastAction'; export type GlassToastCloseProps = Omit & { /** Replaces the drawn ×; its text then names the button. */ children?: ReactNode; style?: StyleProp; }; /** A round button that dismisses the toast. It draws its own × and is named "Dismiss". */ export const GlassToastClose = forwardRef( ({ accessibilityLabel, children, onPress, style, ...rest }, ref) => { const dismiss = useToastDismiss('GlassToastClose'); const { colors, preferences } = useGlassTheme(); const drawn = children === undefined; return ( { onPress?.(event); dismiss(); }} style={({ pressed }) => [ styles.close, !drawn && styles.closeWithText, pressed && { backgroundColor: CLOSE_PRESSED[preferences.theme] }, style, ]} {...rest} > {({ pressed }) => drawn ? ( ) : ( setInText(children, [ styles.closeLabel, { color: pressed ? colors.foreground : colors.mutedForeground }, ]) ) } ); }, ); GlassToastClose.displayName = 'GlassToastClose'; const styles = StyleSheet.create({ action: { alignItems: 'center', borderCurve: 'continuous', borderRadius: 999, height: 30, justifyContent: 'center', paddingHorizontal: 14, }, actionLabel: { fontSize: 13, fontWeight: '600' }, // A 30-point pill answers a 44-point touch. actionRoot: { alignSelf: 'flex-start', marginTop: 10 }, close: { alignItems: 'center', borderCurve: 'continuous', borderRadius: 999, height: 28, justifyContent: 'center', marginEnd: -6, marginStart: 12, marginTop: -4, minWidth: 28, }, closeLabel: { fontSize: 13, fontWeight: '600' }, closeWithText: { paddingHorizontal: 8 }, description: { fontSize: 14, lineHeight: 20, marginTop: 4 }, message: { flex: 1 }, messageText: { fontSize: 14, lineHeight: 20 }, slot: { maxWidth: 352, width: '100%' }, title: { fontSize: 16, fontWeight: '600', lineHeight: 24 }, toast: { alignItems: 'flex-start', flexDirection: 'row' }, viewport: { alignItems: 'center', gap: 12, left: 0, position: 'absolute', right: 0, top: 0, zIndex: 100, }, }); 5e:T714,import { View } from 'react-native'; import Svg, { Path } from 'react-native-svg'; export type GlassIconName = | 'check' | 'chevron-down' | 'chevron-right' | 'close' | 'dash' | 'danger' | 'info' | 'success' | 'warning'; // The web components' own strokes, drawn on a 20-point grid. const PATHS = { check: ['M4.5 10.5 8.25 14.25 15.5 6.25'], 'chevron-down': ['M5 7.5l5 5 5-5'], 'chevron-right': ['M7.5 4.4 13.1 10l-5.6 5.6'], close: ['M5.5 5.5l9 9m0-9l-9 9'], dash: ['M5 10h10'], danger: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M7.6 7.6l4.8 4.8', 'M12.4 7.6l-4.8 4.8'], info: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M10 9.2v4.1', 'M10 6.7h.01'], success: ['M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z', 'M6.9 10.2l2.2 2.2 4-4.4'], warning: ['M10 3.6 17 16H3L10 3.6Z', 'M10 8.4v3.4', 'M10 14h.01'], } as const satisfies Record; export type GlassIconProps = { color: string; name: GlassIconName; size?: number; strokeWidth?: number; }; /** A stroked glyph from the library's small icon set. Decorative; label its control instead. */ export function GlassIcon({ color, name, size = 20, strokeWidth = 1.8 }: GlassIconProps) { // The hiding lives on a View: on the web, Svg passes its props to a bare