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:T205d,import { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from 'react'; import { Animated, Easing, Pressable, StyleSheet, Text, View, type LayoutChangeEvent, type ViewProps, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { GlassSurface } from './glass-surface'; import { GlassIcon } from './lib/icons'; import { wrapPlainText } from './lib/plain-text'; import { GLASS_MOTION, GLASS_RADIUS } from './lib/tokens'; export type GlassAlertTone = 'info' | 'success' | 'warning' | 'danger'; export type GlassAlertProps = ViewProps & { /** Names the close button. Defaults to "Dismiss". */ dismissLabel?: string; /** Replaces the tone's icon. Pass `false` for none. */ icon?: ReactNode | false; /** * Shows a close button. The alert folds away, then this runs: remove the alert here, and give * each alert a stable `key` so a later one never inherits the fold. */ onDismiss?: () => void; title?: ReactNode; tone?: GlassAlertTone; }; // The alert's own palette: the badge's tones, tinting the glass. Each keeps 4.5:1 text over a // white or black backdrop in both themes. const TONES = { dark: { info: { fill: 'rgb(13, 44, 82)', ink: '#b2d6ff', tint: '0, 103, 217' }, success: { fill: 'rgb(22, 60, 48)', ink: '#7cebc0', tint: '51, 214, 159' }, warning: { fill: 'rgb(70, 54, 22)', ink: '#ffd27a', tint: '255, 189, 56' }, danger: { fill: 'rgb(76, 30, 44)', ink: '#ffa6b7', tint: '255, 92, 122' }, }, light: { info: { fill: 'rgb(229, 241, 255)', ink: '#0054b3', tint: '0, 103, 217' }, success: { fill: 'rgb(224, 247, 238)', ink: '#08603f', tint: '20, 168, 116' }, warning: { fill: 'rgb(255, 243, 219)', ink: '#824c00', tint: '232, 150, 12' }, danger: { fill: 'rgb(255, 229, 236)', ink: '#a8113a', tint: '232, 52, 90' }, }, } as const; const HIGHLIGHT = { dark: 'rgba(255, 255, 255, 0.12)', light: 'rgba(255, 255, 255, 0.9)' } as const; // The close button lights under a finger, as it does under the web's pointer. const CLOSE_PRESSED = { dark: 'rgba(255, 255, 255, 0.14)', light: 'rgba(0, 0, 0, 0.07)' } as const; const RADIUS = 18; // The row folds on the web's ease-out curve while the content fades out faster, easing in. const EASE_OUT = Easing.bezier(0.32, 0.72, 0, 1); const EASE_IN = Easing.bezier(0.42, 0, 1, 1); const FOLD_MS = 240; const FADE_MS = 160; /** * A short message set in tinted glass. On Android, warnings and errors interrupt the screen reader; * the other tones wait their turn. */ export const GlassAlert = forwardRef( ( { children, dismissLabel = 'Dismiss', icon, onDismiss, style, testID, title, tone = 'info', ...rest }, ref, ) => { const { colors, preferences } = useGlassTheme(); const palette = TONES[preferences.theme][tone]; const radius = StyleSheet.flatten(style)?.borderRadius ?? RADIUS; const [height, setHeight] = useState(0); const [folding, setFolding] = useState(false); const [fold] = useState(() => new Animated.Value(1)); const [fade] = useState(() => new Animated.Value(1)); // The fold ends in the handler the caller has now, not the one they had at the press, and it // ends once. const dismissed = useRef(onDismiss); const finished = useRef(false); useEffect(() => { dismissed.current = onDismiss; }, [onDismiss]); // Unmounting stops the fold, so a caller who removed the alert first is not told about it. useEffect( () => () => { fade.stopAnimation(); fold.stopAnimation(); }, [fade, fold], ); const measure = useCallback( (event: LayoutChangeEvent) => { if (!folding) setHeight(event.nativeEvent.layout.height); }, [folding], ); const dismiss = useCallback(() => { if (folding) return; if (preferences.reduceMotion) { onDismiss?.(); return; } setFolding(true); // The glass keeps its backdrop, so only the content fades; the glass folds with the row. Animated.timing(fade, { duration: FADE_MS, easing: EASE_IN, toValue: 0, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); // The row shrinks to nothing, so what is below the alert slides up instead of jumping. Animated.timing(fold, { duration: FOLD_MS, easing: EASE_OUT, toValue: 0, // Height is layout, which only the JavaScript driver can animate. useNativeDriver: false, }).start(({ finished: done }) => { if (!done || finished.current) return; finished.current = true; dismissed.current?.(); }); }, [fade, fold, folding, onDismiss, preferences.reduceMotion]); return ( {icon === false ? null : ( {icon ?? } )} {title ? wrapPlainText(title, (text) => ( {text} )) : null} {children ? wrapPlainText(children, (text) => ( {text} )) : null} {onDismiss ? ( [ styles.close, pressed && { backgroundColor: CLOSE_PRESSED[preferences.theme], opacity: 1 }, ]} testID={testID ? `${testID}-dismiss` : undefined} > ) : null} ); }, ); GlassAlert.displayName = 'GlassAlert'; const styles = StyleSheet.create({ alert: { borderCurve: 'continuous', borderRadius: RADIUS, paddingHorizontal: 16, paddingVertical: 14, width: '100%', }, body: { flex: 1, gap: 2, minWidth: 0 }, // A 28-point circle that still answers a 44-point touch, set into the first line's height. close: { alignItems: 'center', borderRadius: GLASS_RADIUS.capsule, height: 28, justifyContent: 'center', marginEnd: -6, marginVertical: -4, opacity: 0.7, width: 28, }, icon: { height: 20, marginTop: 1, width: 20 }, ring: { borderCurve: 'continuous', pointerEvents: 'none' }, row: { alignItems: 'flex-start', flexDirection: 'row', gap: 12 }, text: { fontSize: 15, lineHeight: 21 }, title: { fontSize: 15, fontWeight: '600', lineHeight: 21 }, }); 5d: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