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:T39d1,import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { Animated, I18nManager, PanResponder, StyleSheet, View, type AccessibilityActionEvent, type LayoutChangeEvent, type ViewProps, } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { GlassSurface } from './glass-surface'; import { GLASS_MOTION, GLASS_RADIUS } from './lib/tokens'; import { useControllableState } from './lib/use-controllable-state'; export type GlassSliderProps = Omit & { defaultValue?: number[]; disabled?: boolean; max?: number; min?: number; onValueChange?: (value: number[]) => void; /** Hears the values once a drag ends, or after a screen reader moves a thumb. */ onValueCommit?: (value: number[]) => void; step?: number; /** Names each thumb in value order. Defaults to the slider's accessibilityLabel. */ thumbLabels?: string[]; value?: number[]; }; const THUMB = { height: 24, width: 38 } as const; // The 24-point slider and its thumbs answer a touch up to 10 points above or below: 44 in all. const HIT_SLOP = { bottom: 10, top: 10 } as const; const THUMB_HIT_SLOP = { bottom: 10, left: 3, right: 3, top: 10 } as const; const KNOB_SHADOW = '0px 2px 6px rgba(28, 28, 30, 0.16), 0px 1px 2px rgba(28, 28, 30, 0.1)'; const ADJUST_ACTIONS = [{ name: 'increment' }, { name: 'decrement' }]; function clamp(value: number, low: number, high: number) { return Math.min(high, Math.max(low, value)); } // Rounds to the step's own decimals, so steps of 0.1 do not drift, as Radix does. function snapToStep(value: number, min: number, step: number) { const decimals = (String(step).split('.')[1] ?? '').length; return Number((Math.round((value - min) / step) * step + min).toFixed(decimals)); } // The thumb nearest a value; the first of several stacked on one value. function nearestThumb(values: readonly number[], target: number) { let nearest = 0; values.forEach((value, index) => { if (Math.abs(value - target) < Math.abs(values[nearest] - target)) nearest = index; }); return nearest; } // Moves one thumb, stopped by its neighbours so thumbs never cross. function moveThumb(values: readonly number[], index: number, target: number) { const low = index > 0 ? values[index - 1] : Number.NEGATIVE_INFINITY; const high = index < values.length - 1 ? values[index + 1] : Number.POSITIVE_INFINITY; const next = [...values]; next[index] = clamp(target, low, high); return next; } function thumbName( index: number, count: number, sliderLabel: string | undefined, thumbLabels: string[] | undefined, ) { const own = thumbLabels?.[index]; if (own !== undefined || count === 1) return own ?? sliderLabel; const position = count === 2 ? (index === 0 ? 'minimum' : 'maximum') : `${index + 1} of ${count}`; return sliderLabel === undefined ? position : `${sliderLabel}, ${position}`; } /** How a touch drives the slider. Every method reads the slider's latest props. */ type SliderGesture = { /** Moves the grabbed thumb with the finger, `dx` points from where the touch began. */ drag: (dx: number) => void; drop: () => void; enabled: () => boolean; /** A touch on a thumb takes it from where it is. */ grabThumb: (index: number) => void; /** A touch on the track takes the nearest thumb and puts it under the finger. */ grabTrack: (x: number) => void; }; type Drag = { before: readonly number[]; /** Whether the drag has picked its thumb from any stacked on one value. */ decided: boolean; index: number; origin: number; values: readonly number[]; }; // How far a finger moves before the slider reads which way it is going. const SLOP = 6; /** * A responder that takes a touch only once it slides sideways, so a vertical swipe that starts * on the slider still scrolls the page. A touch that lifts without moving runs `onTap`. */ function createSlideResponder( gesture: SliderGesture, grab: (originX: number) => void, onTap?: (originX: number) => void, ) { let sliding = false; let originX = 0; return PanResponder.create({ onPanResponderGrant: (event) => { sliding = false; originX = event.nativeEvent.locationX; }, onPanResponderMove: (_event, state) => { if (!sliding) { if (Math.abs(state.dx) < SLOP || Math.abs(state.dx) < Math.abs(state.dy)) return; sliding = true; grab(originX); } gesture.drag(state.dx); }, onPanResponderRelease: (_event, state) => { if (!sliding && Math.abs(state.dx) < SLOP && Math.abs(state.dy) < SLOP) onTap?.(originX); gesture.drop(); }, onPanResponderTerminate: gesture.drop, // Until the touch slides, a scroll view may take it. onPanResponderTerminationRequest: () => !sliding, // Otherwise Android keeps the touch from the scroll view around the slider. onShouldBlockNativeResponder: () => false, onStartShouldSetPanResponder: gesture.enabled, }); } type SliderThumbProps = { active: boolean; disabled: boolean; gesture: SliderGesture; index: number; label: string | undefined; max: number; min: number; onAdjust: (index: number, direction: 1 | -1) => void; /** Where the thumb sits, from 0 at the track's start to 1 at its end. */ position: number; value: number; }; // A white knob that turns to clear glass while a finger drags it, as GlassSwitch's does. function SliderThumb({ active, disabled, gesture, index, label, max, min, onAdjust, position, value, }: SliderThumbProps) { const { colors, preferences } = useGlassTheme(); const [pressed] = useState(() => new Animated.Value(0)); const [responder] = useState(() => createSlideResponder(gesture, () => gesture.grabThumb(index))); useEffect(() => { Animated.timing(pressed, { duration: active ? 120 : 260, toValue: active ? 1 : 0, useNativeDriver: GLASS_MOTION.nativeDriver, }).start(); }, [active, pressed]); const handleAction = useCallback( (event: AccessibilityActionEvent) => { if (event.nativeEvent.actionName === 'increment') onAdjust(index, 1); if (event.nativeEvent.actionName === 'decrement') onAdjust(index, -1); }, [index, onAdjust], ); return ( {disabled ? null : ( )} ); } /** * A slider with one thumb or several. A tap or a sideways drag on the track takes the nearest * thumb; a vertical swipe scrolls past. Thumbs stop at each other and never cross, and each white * knob turns to clear glass while it is dragged. */ export const GlassSlider = forwardRef( ( { accessibilityLabel, defaultValue, disabled = false, max = 100, min = 0, onLayout, onValueChange, onValueCommit, step = 1, style, thumbLabels, value, ...rest }, ref, ) => { const { colors } = useGlassTheme(); const [values, setValues] = useControllableState(value, defaultValue ?? [min], onValueChange); const [active, setActive] = useState(null); const width = useRef(0); const drag = useRef(null); const latest = useRef({ disabled, max, min, onValueCommit, setValues, step, values }); // The gesture handlers live as long as the slider, so they read its props from here. useLayoutEffect(() => { latest.current = { disabled, max, min, onValueCommit, setValues, step, values }; }); const [gesture] = useState(() => { const travel = () => Math.max(width.current - THUMB.width, 0); // A thumb's centre, in points from the slider's left edge. const centreOf = (thumb: number) => { const { max: high, min: low } = latest.current; const along = high > low ? clamp((thumb - low) / (high - low), 0, 1) : 0; return THUMB.width / 2 + (I18nManager.isRTL ? 1 - along : along) * travel(); }; // The value whose thumb centre sits at `x`. const valueAt = (x: number) => { const { max: high, min: low, step: increment } = latest.current; const across = clamp((x - THUMB.width / 2) / Math.max(travel(), 1), 0, 1); const along = I18nManager.isRTL ? 1 - across : across; return clamp(snapToStep(low + along * (high - low), low, increment), low, high); }; const begin = (index: number, origin: number) => { const current = latest.current.values; drag.current = { before: current, decided: false, index, origin, values: current }; setActive(index); }; const move = (dx: number) => { const current = drag.current; if (!current) return; const target = valueAt(current.origin + dx); const held = current.values[current.index]; const decides = !current.decided && target !== held; let index = current.index; // Thumbs stacked on one value hand the drag, once, to whichever can follow the finger. // After that the thumb stops at its neighbour, so a drag never passes one thumb through // another. if (decides) { while (index > 0 && target < held && current.values[index - 1] === held) index -= 1; while ( index < current.values.length - 1 && target > held && current.values[index + 1] === held ) { index += 1; } } const next = moveThumb(current.values, index, target); if (index !== current.index) setActive(index); drag.current = { ...current, decided: current.decided || decides, index, values: next }; if (next[index] !== current.values[index]) latest.current.setValues(next); }; return { drag: move, drop: () => { const current = drag.current; if (!current) return; drag.current = null; setActive(null); if (current.values.some((thumb, index) => thumb !== current.before[index])) { latest.current.onValueCommit?.([...current.values]); } }, enabled: () => !latest.current.disabled, grabThumb: (index) => begin(index, centreOf(latest.current.values[index])), grabTrack: (x) => { begin(nearestThumb(latest.current.values, valueAt(x)), x); move(0); }, }; }); // A tap on the track puts the nearest thumb under the finger; a slide drags it from there. const [responder] = useState(() => createSlideResponder(gesture, gesture.grabTrack, gesture.grabTrack), ); const handleLayout = useCallback( (event: LayoutChangeEvent) => { width.current = event.nativeEvent.layout.width; onLayout?.(event); }, [onLayout], ); const adjust = useCallback( (index: number, direction: 1 | -1) => { if (disabled) return; const target = clamp(snapToStep(values[index] + direction * step, min, step), min, max); const next = moveThumb(values, index, target); if (next[index] === values[index]) return; setValues(next); onValueCommit?.(next); }, [disabled, max, min, onValueCommit, setValues, step, values], ); const positionOf = (thumb: number) => max > min ? clamp((thumb - min) / (max - min), 0, 1) : 0; const rangeStart = values.length > 1 ? positionOf(values[0]) : 0; const rangeEnd = positionOf(values[values.length - 1] ?? min); return ( {values.map((thumb, index) => ( ))} ); }, ); GlassSlider.displayName = 'GlassSlider'; const styles = StyleSheet.create({ disabled: { opacity: 0.45 }, range: { borderRadius: GLASS_RADIUS.capsule, bottom: 0, position: 'absolute', top: 0 }, root: { alignSelf: 'stretch', height: THUMB.height, justifyContent: 'center' }, round: { borderCurve: 'continuous', borderRadius: GLASS_RADIUS.capsule }, thumb: { borderCurve: 'continuous', borderRadius: GLASS_RADIUS.capsule, height: THUMB.height, position: 'absolute', top: 0, width: THUMB.width, }, track: { borderRadius: GLASS_RADIUS.capsule, height: 6, overflow: 'hidden', 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-slider.tsx","content":"$5c","type":"registry:ui","target":"components/glassyui/glass-slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]