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:T2555,import { forwardRef, useCallback, useEffect, useState, type ReactNode } from 'react'; import { Animated, Easing, Pressable, StyleSheet, Text, View, type GestureResponderEvent, type MouseEvent, type NativeSyntheticEvent, type PressableProps, type StyleProp, type TargetedEvent, type ViewProps, type ViewStyle, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { GlassSurface } from './glass-surface'; import { wrapPlainText } from './lib/plain-text'; import { GLASS_MOTION } from './lib/tokens'; export type GlassDockProps = ViewProps; export type GlassDockItemProps = Omit & { /** Shows the running indicator under the icon. */ active?: boolean; /** The icon. Full app artwork can fill the item; a small glyph sits in its middle. */ children?: ReactNode; /** Names the item for assistive technology, and shows above it while it is held. */ label: string; style?: StyleProp; }; export type GlassDockSeparatorProps = ViewProps; const ITEM = 48; const GAP = 8; const PAD = 10; // The web's ease-out curve for arrivals; exits ease in and run shorter. const EASE_OUT = Easing.bezier(0.32, 0.72, 0, 1); const EASE_IN = Easing.bezier(0.42, 0, 1, 1); type DockLabelProps = { /** True once nothing holds the label up; it shrinks back into its item, then `onLeft` runs. */ leaving: boolean; onLeft: () => void; text: string; }; // The label is glass, so it grows out of its item instead of fading in. function DockLabel({ leaving, onLeft, text }: DockLabelProps) { const { colors, preferences } = useGlassTheme(); const [grow] = useState(() => new Animated.Value(preferences.reduceMotion ? 1 : 0)); useEffect(() => { if (preferences.reduceMotion) { grow.setValue(leaving ? 0 : 1); if (leaving) onLeft(); return; } const animation = Animated.timing(grow, { duration: leaving ? 150 : 220, easing: leaving ? EASE_IN : EASE_OUT, toValue: leaving ? 0 : 1, useNativeDriver: GLASS_MOTION.nativeDriver, }); animation.start(({ finished }) => { if (finished && leaving) onLeft(); }); return () => animation.stop(); }, [grow, leaving, onLeft, preferences.reduceMotion]); return ( {text} ); } /** * A row of app icons on a quiet glass shelf. Holding an icon shows its label; nothing a finger * does resizes an icon or its neighbours. */ export const GlassDock = forwardRef(({ children, style, ...rest }, ref) => ( {children} )); GlassDock.displayName = 'GlassDock'; /** * An icon in the dock. A long press shows its label above it, as a pointer's hover and keyboard * focus do; a dot beneath marks it active. */ export const GlassDockItem = forwardRef( ( { active = false, children, disabled, label, onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPressOut, style, ...rest }, ref, ) => { const { colors, preferences } = useGlassTheme(); const [held, setHeld] = useState(false); const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); const [labelShown, setLabelShown] = useState(false); const [dot] = useState(() => new Animated.Value(active ? 1 : 0)); useEffect(() => { if (preferences.reduceMotion) { dot.setValue(active ? 1 : 0); return; } const animation = Animated.timing(dot, { duration: 200, toValue: active ? 1 : 0, useNativeDriver: GLASS_MOTION.nativeDriver, }); animation.start(); return () => animation.stop(); }, [active, dot, preferences.reduceMotion]); const handleLongPress = useCallback( (event: GestureResponderEvent) => { onLongPress?.(event); setHeld(true); setLabelShown(true); }, [onLongPress], ); const handlePressOut = useCallback( (event: GestureResponderEvent) => { onPressOut?.(event); setHeld(false); }, [onPressOut], ); const handleHoverIn = useCallback( (event: MouseEvent) => { onHoverIn?.(event); setHovered(true); setLabelShown(true); }, [onHoverIn], ); const handleHoverOut = useCallback( (event: MouseEvent) => { onHoverOut?.(event); setHovered(false); }, [onHoverOut], ); const handleFocus = useCallback( (event: NativeSyntheticEvent) => { onFocus?.(event); setFocused(true); setLabelShown(true); }, [onFocus], ); const handleBlur = useCallback( (event: NativeSyntheticEvent) => { onBlur?.(event); setFocused(false); }, [onBlur], ); const hideLabel = useCallback(() => setLabelShown(false), []); return ( [ styles.item, (pressed || hovered || focused) && { backgroundColor: colors.controlSurface }, focused && { outlineColor: colors.focusRing }, focused && styles.focused, disabled && styles.disabled, style, ]} {...rest} > {wrapPlainText(children, (text) => ( {text} ))} {labelShown ? ( ) : null} ); }, ); GlassDockItem.displayName = 'GlassDockItem'; /** A thin upright line between groups of dock icons. */ export const GlassDockSeparator = forwardRef( ({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ( ); }, ); GlassDockSeparator.displayName = 'GlassDockSeparator'; const styles = StyleSheet.create({ disabled: { opacity: 0.45 }, // The shelf hugs its icons, like the web's inline dock; pass alignSelf to place it. dock: { alignItems: 'center', alignSelf: 'flex-start', flexDirection: 'row', gap: GAP, height: ITEM + PAD * 2, paddingHorizontal: PAD + 2, paddingVertical: PAD, }, dot: { borderRadius: 2, height: 4, width: 4 }, // The indicator sits in the shelf's padding, under the icon. dotRow: { alignItems: 'center', bottom: -(PAD - 3), left: 0, pointerEvents: 'none', position: 'absolute', right: 0, }, focused: { outlineOffset: 3, outlineStyle: 'solid', outlineWidth: 2 }, glyph: { fontSize: 28 }, // The same generous target holds full artwork or a small glyph, and never changes size. item: { alignItems: 'center', borderCurve: 'continuous', borderRadius: ITEM * 0.225, height: ITEM, justifyContent: 'center', width: ITEM, }, label: { borderRadius: 10, paddingHorizontal: 10, paddingVertical: 6 }, labelOrigin: { transformOrigin: 'bottom' }, // Wide enough to centre any label over the icon; it takes no touches. labelRow: { alignItems: 'center', bottom: '100%', left: -200, marginBottom: 10, pointerEvents: 'none', position: 'absolute', right: -200, }, labelText: { fontSize: 13, fontWeight: '500', lineHeight: 18 }, separator: { alignSelf: 'stretch', marginHorizontal: 4, marginVertical: 6, width: 1 }, shelf: { borderRadius: ITEM * 0.24 + PAD, pointerEvents: 'none' }, }); 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","expo-blur",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/expo-blur","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"expo-blur"}]]}]}],["$","li","expo-glass-effect",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/expo-glass-effect","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"expo-glass-effect"}]]}]}]]}],["$","$L52",null,{"namespace":"@glassyui-native","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/glassyui-native/glass-provider.tsx","content":"$54","type":"registry:ui","target":"components/glassyui/glass-provider.tsx"},{"path":"registry/glassyui-native/lib/preferences.ts","content":"$55","type":"registry:lib","target":"components/glassyui/lib/preferences.ts"},{"path":"registry/glassyui-native/lib/tokens.ts","content":"$56","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-surface.tsx","content":"$57","type":"registry:ui","target":"components/glassyui/glass-surface.tsx"},{"path":"registry/glassyui-native/glass-backdrop.tsx","content":"$58","type":"registry:ui","target":"components/glassyui/glass-backdrop.tsx"},{"path":"registry/glassyui-native/lib/material.ts","content":"import { isGlassEffectAPIAvailable, isLiquidGlassAvailable } from 'expo-glass-effect';\n\n/**\n * How glass is drawn: the system's own glass on iOS 26 and later, a blur of what lies\n * behind on earlier iOS, Android and the web, or an opaque fill under Reduce Transparency.\n */\nexport type GlassMaterial = 'liquid' | 'blur' | 'solid';\n\n// Both checks return false off iOS. The second guards early iOS 26 builds that lack the API.\nconst systemGlass = isLiquidGlassAvailable() && isGlassEffectAPIAvailable();\n\nexport function resolveGlassMaterial(reduceTransparency: boolean): GlassMaterial {\n if (reduceTransparency) return 'solid';\n\n return systemGlass ? 'liquid' : 'blur';\n}\n","type":"registry:lib","target":"components/glassyui/lib/material.ts"},{"path":"registry/glassyui-native/android/SharedBlurView.java","content":"$59","type":"registry:file","target":"components/glassyui/android/SharedBlurView.java"},{"path":"registry/glassyui-native/android/SharedBlurController.java","content":"$5a","type":"registry:file","target":"components/glassyui/android/SharedBlurController.java"},{"path":"registry/glassyui-native/android/with-glassy-blur.cjs","content":"$5b","type":"registry:file","target":"components/glassyui/android/with-glassy-blur.cjs"},{"path":"registry/glassyui-native/glass-dock.tsx","content":"$5c","type":"registry:ui","target":"components/glassyui/glass-dock.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"}]]}]