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:T115c,import { createContext, forwardRef, useCallback, useContext, useMemo, useState, type ReactElement, type ReactNode, } from 'react'; import { StyleSheet, Text, View, useWindowDimensions, type ViewProps } from 'react-native'; import { useGlassTheme } from './glass-provider'; import { AnchoredContent, OverlayTrigger, assignRef, type OverlayPlacementProps, type OverlayTriggerChildProps, } from './lib/anchored-overlay'; import { wrapPlainText } from './lib/plain-text'; import { GLASS_RADIUS } from './lib/tokens'; import { useControllableState } from './lib/use-controllable-state'; type PopoverContextValue = { /** A GlassPopoverAnchor's view, which the popover opens beside instead of its trigger. */ anchor: View | null; open: boolean; setAnchor: (node: View | null) => void; setOpen: (open: boolean) => void; setTrigger: (node: View | null) => void; trigger: View | null; }; const PopoverContext = createContext(null); function usePopoverContext(component: string) { const context = useContext(PopoverContext); if (!context) throw new Error(`${component} must be used within GlassPopover`); return context; } // The web's lg-popover-content: min(22rem, 100vw - 2rem) wide. const POPOVER_WIDTH = 352; const POPOVER_GUTTER = 32; export type GlassPopoverProps = { children?: ReactNode; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; open?: boolean; }; /** Holds a popover's open state for its trigger and content. */ export function GlassPopover({ children, defaultOpen = false, onOpenChange, open, }: GlassPopoverProps) { const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange); const [trigger, setTrigger] = useState(null); const [anchor, setAnchor] = useState(null); const value = useMemo( () => ({ anchor, open: isOpen, setAnchor, setOpen, setTrigger, trigger }), [anchor, isOpen, setOpen, trigger], ); return {children}; } export type GlassPopoverTriggerProps = { /** One pressable element, such as a GlassButton, that passes its ref to a view. */ children: ReactElement; }; /** Opens the popover from its one child, such as a GlassButton, and marks that child expanded. */ export function GlassPopoverTrigger({ children }: GlassPopoverTriggerProps) { const popover = usePopoverContext('GlassPopoverTrigger'); return ( {children} ); } /** Wraps a view for the popover to open beside instead of its trigger. */ export const GlassPopoverAnchor = forwardRef((props, forwardedRef) => { const { setAnchor } = usePopoverContext('GlassPopoverAnchor'); const ref = useCallback( (node: View | null) => { setAnchor(node); assignRef(forwardedRef, node); }, [forwardedRef, setAnchor], ); return ; }); GlassPopoverAnchor.displayName = 'GlassPopoverAnchor'; export type GlassPopoverContentProps = Omit & OverlayPlacementProps & { children?: ReactNode; }; /** The open popover: a glass card that grows out of its trigger. Tap outside to close it. */ export const GlassPopoverContent = forwardRef( ({ align = 'center', children, style, ...rest }, ref) => { const { colors } = useGlassTheme(); const viewport = useWindowDimensions(); const { anchor, open, setOpen, trigger } = usePopoverContext('GlassPopoverContent'); const close = useCallback(() => setOpen(false), [setOpen]); return ( {wrapPlainText(children, (text) => ( {text} ))} ); }, ); GlassPopoverContent.displayName = 'GlassPopoverContent'; const styles = StyleSheet.create({ text: { fontSize: 14, lineHeight: 20 }, }); 5d:T404d,import { cloneElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useState, type ReactElement, type ReactNode, type Ref, } from 'react'; import { Animated, I18nManager, Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions, type AccessibilityState, type GestureResponderEvent, type LayoutChangeEvent, type PressableProps, type StyleProp, type TextProps, type TextStyle, type ViewProps, type ViewStyle, } from 'react-native'; import { initialWindowMetrics, SafeAreaInsetsContext } from 'react-native-safe-area-context'; import { useGlassTheme } from '../glass-provider'; import { GlassSurface } from '../glass-surface'; import { LAYER_EASING, ModalLayerHost, useLayerPresence } from './modal-layer'; import { wrapPlainText } from './plain-text'; import { GLASS_MOTION } from './tokens'; export type OverlaySide = 'top' | 'bottom'; export type OverlayAlign = 'start' | 'center' | 'end'; export type OverlayPlacementProps = { /** The trigger edge the layer lines up with. Start and end follow the reading direction. */ align?: OverlayAlign; /** The side of the trigger the layer opens on. It flips when the other side has more room. */ side?: OverlaySide; /** The gap between the trigger and the layer, in points. Defaults to 6. */ sideOffset?: number; }; type Rect = { height: number; width: number; x: number; y: number }; type Size = { height: number; width: number }; type Bounds = { bottom: number; left: number; right: number; top: number }; type Placement = { /** The tallest the layer may be on its side; beyond that it scrolls. */ maxHeight: number; /** Where the trigger's centre falls across the layer, the point it grows from. */ originX: number; side: OverlaySide; /** The layer's left edge and top edge in window coordinates. */ x: number; y: number; }; // Layers keep this far inside the window and its safe areas. const EDGE_MARGIN = 8; const DEFAULT_SIDE_OFFSET = 6; // A layer grows out of its trigger from 94% and drifts its last few points away from it. const ENTER_SCALE = 0.94; const DRIFT = 4; // The web's lg-pop-in and lg-pop-out: arrivals ease out, exits ease in and run shorter. const ENTER = { duration: 240, easing: LAYER_EASING.out }; const EXIT = { duration: 160, easing: LAYER_EASING.in }; const MIRRORED_ALIGN = { center: 'center', end: 'start', start: 'end' } as const satisfies Record< OverlayAlign, OverlayAlign >; const NO_INSETS = { bottom: 0, left: 0, right: 0, top: 0 }; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), Math.max(min, max)); } /** Where a layer of `size` sits beside `anchor`, kept inside `bounds`. All in window points. */ function placeLayer( anchor: Rect, size: Size, bounds: Bounds, preferred: OverlaySide, align: OverlayAlign, sideOffset: number, ): Placement { const below = anchor.y + anchor.height + sideOffset; const above = anchor.y - sideOffset; const room = { bottom: bounds.bottom - below, top: above - bounds.top }; const other = preferred === 'bottom' ? 'top' : 'bottom'; const side = size.height > room[preferred] && room[other] > room[preferred] ? other : preferred; const maxHeight = Math.max(room[side], 0); const height = Math.min(size.height, maxHeight); const y = clamp(side === 'bottom' ? below : above - height, bounds.top, bounds.bottom - height); const edge = I18nManager.isRTL ? MIRRORED_ALIGN[align] : align; const offset = { center: (anchor.width - size.width) / 2, end: anchor.width - size.width, start: 0, }; const x = clamp(anchor.x + offset[edge], bounds.left, bounds.right - size.width); return { maxHeight, originX: clamp(anchor.x + anchor.width / 2 - x, 0, size.width), side, x, y, }; } /** * Puts a placed layer in position and grows it out of its trigger as `progress` runs from 0 to 1. * Yoga reads start and end by reading direction, so in right-to-left layouts end is the left edge. */ function layerMotion(placement: Placement, progress: Animated.Value) { const drift = placement.side === 'top' ? DRIFT : -DRIFT; const originY = placement.side === 'top' ? '100%' : '0px'; return [ I18nManager.isRTL ? { end: placement.x } : { start: placement.x }, { top: placement.y, transform: [ { translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [drift, 0] }) }, { scale: progress.interpolate({ inputRange: [0, 1], outputRange: [ENTER_SCALE, 1] }) }, ], // React Native reads whole points here, so the origin is rounded. transformOrigin: `${Math.round(placement.originX)}px ${originY}`, }, ]; } /** Points `ref` at `node`, whether it is a callback or an object ref. */ export function assignRef(ref: Ref | undefined, node: T | null) { if (ref instanceof Function) { ref(node); return; } if (ref) ref.current = node; } export type OverlayTriggerChildProps = { accessibilityState?: AccessibilityState; onPress?: ((event: GestureResponderEvent) => void) | null; ref?: Ref; }; type OverlayTriggerProps = { children: ReactElement; /** Receives the child's view, which the layer measures to know where to open. */ onAnchor: (node: View | null) => void; onOpenChange: (open: boolean) => void; open: boolean; }; /** * Renders its one child with a press that toggles the layer and an expanded state. The child's * own press and ref keep working; the child must pass its ref to a view, which the layer measures. */ export function OverlayTrigger({ children, onAnchor, onOpenChange, open }: OverlayTriggerProps) { const { accessibilityState, onPress, ref: forwarded } = children.props; const ref = useCallback( (node: View | null) => { onAnchor(node); assignRef(forwarded, node); }, [forwarded, onAnchor], ); const handlePress = useCallback( (event: GestureResponderEvent) => { onPress?.(event); if (!event.isDefaultPrevented()) onOpenChange(!open); }, [onOpenChange, onPress, open], ); return cloneElement(children, { accessibilityState: { ...accessibilityState, expanded: open }, onPress: handlePress, ref, }); } export type AnchoredContentProps = Omit & OverlayPlacementProps & { /** The view the layer opens beside, usually its trigger. */ anchor: View | null; children?: ReactNode; /** Keeps the children mounted in a hidden, inert view while the layer is closed. */ keepMounted?: boolean; /** The layer's narrowest width in points, or 'trigger' for at least the trigger's width. */ minWidth?: number | 'trigger'; onClose: () => void; open: boolean; /** Space between the glass edge and the content that scrolls inside it. */ padding: number; radius: number; /** Applies to the glass. */ style?: StyleProp; }; type AnchoredLayerProps = Omit & { onExited: () => void; }; const AnchoredLayer = forwardRef( ( { align = 'center', anchor, children, minWidth = 0, onClose, onExited, open, padding, radius, side = 'bottom', sideOffset = DEFAULT_SIDE_OFFSET, style, ...rest }, ref, ) => { const { preferences } = useGlassTheme(); const viewport = useWindowDimensions(); const insets = useContext(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets ?? NO_INSETS; const [progress] = useState(() => new Animated.Value(0)); const [frame, setFrame] = useState(null); const [size, setSize] = useState(null); const bounds = { bottom: viewport.height - insets.bottom - EDGE_MARGIN, left: insets.left + EDGE_MARGIN, right: viewport.width - insets.right - EDGE_MARGIN, top: insets.top + EDGE_MARGIN, }; const widest = bounds.right - bounds.left; const narrowest = Math.min(minWidth === 'trigger' ? (frame?.width ?? 0) : minWidth, widest); // Find the trigger when the layer opens, and again when the window turns or resizes. useLayoutEffect(() => { anchor?.measureInWindow((x, y, width, height) => setFrame({ height, width, x, y })); }, [anchor, viewport.height, viewport.width]); // A layer that opens with its trigger gets the trigger's view a render later, so only an // anchor still missing on the next frame is a mistake. useEffect(() => { if (anchor) return; const frameId = requestAnimationFrame(() => console.error( 'Glassy UI: a menu, select or popover opened without a trigger to anchor to. Its trigger child must pass its ref to a view.', ), ); return () => cancelAnimationFrame(frameId); }, [anchor]); const handleLayout = useCallback((event: LayoutChangeEvent) => { const { height, width } = event.nativeEvent.layout; setSize((previous) => previous?.height === height && previous.width === width ? previous : { height, width }, ); }, []); // A size measured before the trigger's width applied is stale; the next layout replaces it. const placement = frame && size && size.width >= narrowest - 0.5 ? placeLayer(frame, size, bounds, side, align, sideOffset) : null; const placed = placement !== null; useEffect(() => { if (!placed) { if (!open) onExited(); return; } if (preferences.reduceMotion) { progress.setValue(open ? 1 : 0); if (!open) onExited(); return; } const motion = open ? ENTER : EXIT; const animation = Animated.timing(progress, { duration: motion.duration, easing: motion.easing, toValue: open ? 1 : 0, useNativeDriver: GLASS_MOTION.nativeDriver, }); animation.start(({ finished }) => { if (finished && !open) onExited(); }); return () => animation.stop(); }, [onExited, open, placed, preferences.reduceMotion, progress]); return ( <> {children} ); }, ); AnchoredLayer.displayName = 'AnchoredLayer'; /** * A glass layer anchored to a trigger. It opens in a transparent modal, measures itself before it * shows, grows out of the trigger and closes on an outside tap or the Android back button. Glass * never fades: it scales and drifts, and Reduce Motion shows and hides it at once. */ export const AnchoredContent = forwardRef( ({ children, keepMounted = false, onClose, open, ...rest }, ref) => { const { preferences } = useGlassTheme(); const [present, hide] = useLayerPresence(open, preferences.reduceMotion); return ( <> {children} {keepMounted && !present ? ( {children} ) : null} ); }, ); AnchoredContent.displayName = 'AnchoredContent'; export type OverlayItemProps = Omit & { children?: ReactNode; /** A check or dot drawn in the inset at the row's start. */ indicator?: ReactNode; /** Leaves room for an indicator at the start, so labels line up. */ inset?: boolean; style?: StyleProp; textStyle?: StyleProp; tone?: 'default' | 'destructive'; }; // A pressed row lightens dark glass and darkens light glass, as .lg-menu-item[data-highlighted]. const PRESSED_ROW = { dark: 'rgba(255, 255, 255, 0.14)', light: 'rgba(0, 0, 0, 0.06)' } as const; /** A 44-point row in a menu or a select list; a press tints the row under it. */ export const OverlayItem = forwardRef( ( { children, disabled = false, indicator, inset = false, style, textStyle, tone = 'default', ...rest }, ref, ) => { const { colors, preferences } = useGlassTheme(); const ink = tone === 'destructive' ? colors.invalid : colors.foreground; return ( [ styles.item, inset && styles.inset, pressed && { backgroundColor: PRESSED_ROW[preferences.theme] }, disabled && styles.disabled, style, ]} {...rest} > {indicator ? {indicator} : null} {wrapPlainText(children, (text) => ( {text} ))} ); }, ); OverlayItem.displayName = 'OverlayItem'; /** A small muted heading over a group of rows. */ export const OverlayLabel = forwardRef(({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ( ); }); OverlayLabel.displayName = 'OverlayLabel'; /** A hairline between groups of rows. Screen readers skip it. */ export const OverlaySeparator = forwardRef(({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ( ); }); OverlaySeparator.displayName = 'OverlaySeparator'; // Rows, labels and separators copy the web's lg-menu-item, lg-menu-label and lg-menu-separator. // Rows grow from the web's 36 pixels to a 44-point touch target. const styles = StyleSheet.create({ disabled: { opacity: 0.45 }, hidden: { display: 'none' }, indicator: { alignItems: 'center', bottom: 0, justifyContent: 'center', position: 'absolute', start: 8, top: 0, width: 16, }, inset: { paddingStart: 32 }, item: { alignItems: 'center', borderCurve: 'continuous', borderRadius: 12, flexDirection: 'row', gap: 10, minHeight: 44, paddingHorizontal: 12, paddingVertical: 7, }, itemText: { flexShrink: 1, fontSize: 14, lineHeight: 20 }, label: { fontSize: 12, fontWeight: '600', lineHeight: 16, paddingBottom: 4, paddingHorizontal: 12, paddingTop: 6, }, layer: { position: 'absolute' }, // Until it is measured, a layer waits off screen so it never shows in the wrong place. measuring: { start: 0, top: -10000 }, separator: { height: 1, marginHorizontal: 10, marginVertical: 6 }, }); 5e:T212b,import { Children, cloneElement, createContext, forwardRef, useCallback, useContext, useMemo, useState, type ReactElement, type ReactNode, } from 'react'; import { Animated, Easing, I18nManager, Modal, Pressable, StyleSheet, Text, type AccessibilityState, type GestureResponderEvent, type ModalProps, type StyleProp, type TextProps, type ViewStyle, } from 'react-native'; import { initialWindowMetrics, SafeAreaInsetsContext } from 'react-native-safe-area-context'; import { useGlassTheme } from '../glass-provider'; import { GlassIcon } from './icons'; import { useControllableState } from './use-controllable-state'; /** Arrivals ease out on the library's curve (`--lg-ease-out`); exits ease in. */ export const LAYER_EASING = { in: Easing.bezier(0.42, 0, 1, 1), out: Easing.bezier(0.32, 0.72, 0, 1), }; /** The fill of a control on glass under a finger (`--lg-control-surface-hover`). */ export const CONTROL_SURFACE_PRESSED = { dark: 'rgba(245, 245, 247, 0.14)', light: 'rgba(255, 255, 255, 0.95)', } as const; // Without these, iOS turns a landscape screen back to portrait while a layer is open. const ORIENTATIONS = [ 'portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right', ] satisfies ModalProps['supportedOrientations']; /** * The screen's safe-area insets, with start and end following the layout direction. Reads the * nearest SafeAreaProvider, or the window's first measurement when there is none. */ export function useSafeInsets() { const insets = useContext(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets; const left = insets?.left ?? 0; const right = insets?.right ?? 0; return { bottom: insets?.bottom ?? 0, end: I18nManager.isRTL ? left : right, start: I18nManager.isRTL ? right : left, top: insets?.top ?? 0, }; } /** * Whether a layer is on screen. It turns true with `open` and stays true until the layer calls * `hide` at the end of its exit, so the exit can play. Under Reduce Motion it turns false at once. */ export function useLayerPresence(open: boolean, reduceMotion: boolean) { const [present, setPresent] = useState(open); if (open && !present) setPresent(true); if (!open && present && reduceMotion) setPresent(false); const hide = useCallback(() => setPresent(false), []); return [present, hide] as const; } type ModalLayerState = { open: boolean; setOpen: (open: boolean) => void; }; const ModalLayerContext = createContext(null); export type ModalLayerRootProps = { children?: ReactNode; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; open?: boolean; }; /** Holds a modal layer's open state for its trigger, content and close controls. */ export function ModalLayerRoot({ children, defaultOpen = false, onOpenChange, open, }: ModalLayerRootProps) { const [current, setOpen] = useControllableState(open, defaultOpen, onOpenChange); const value = useMemo(() => ({ open: current, setOpen }), [current, setOpen]); return {children}; } /** The nearest modal layer's state. `component` and `root` name the parts in the error. */ export function useModalLayer(component: string, root: string) { const context = useContext(ModalLayerContext); if (!context) throw new Error(`${component} must be used within ${root}`); return context; } type PressableChildProps = { accessibilityState?: AccessibilityState; onPress?: ((event: GestureResponderEvent) => void) | null; }; export type ModalLayerSlotProps = { /** One pressable element, such as a GlassButton. It keeps its own onPress. */ children: ReactElement; }; type SlotOwnerProps = ModalLayerSlotProps & { component: string; root: string; }; /** Gives its child an onPress that toggles the layer, and tells assistive tech whether it is open. */ export function ModalLayerTrigger({ children, component, root }: SlotOwnerProps) { const { open, setOpen } = useModalLayer(component, root); const child = Children.only(children); return cloneElement(child, { accessibilityState: { ...child.props.accessibilityState, expanded: open }, onPress: (event: GestureResponderEvent) => { child.props.onPress?.(event); setOpen(!open); }, }); } /** Gives its child an onPress that closes the layer. */ export function ModalLayerClose({ children, component, root }: SlotOwnerProps) { const { setOpen } = useModalLayer(component, root); const child = Children.only(children); return cloneElement(child, { onPress: (event: GestureResponderEvent) => { child.props.onPress?.(event); setOpen(false); }, }); } type ModalLayerHostProps = { children: ReactNode; /** Android's back button and the web's Escape key. */ onRequestClose: () => void; present: boolean; }; /** React Native's Modal, set up for a layer that draws its own scrim and animates itself. */ export function ModalLayerHost({ children, onRequestClose, present }: ModalLayerHostProps) { return ( {present ? children : null} ); } type ModalLayerScrimProps = { onPress: () => void; /** 0 hidden, 1 shown. */ progress: Animated.Value; }; /** The dimmed backdrop behind a modal layer. It fades with `progress`; a tap on it closes the layer. */ export function ModalLayerScrim({ onPress, progress }: ModalLayerScrimProps) { const { colors } = useGlassTheme(); return ( <> ); } type ModalLayerCloseButtonProps = { label: string; onPress: () => void; /** Places the button; it is absolutely positioned. */ style?: StyleProp; }; /** The round close button in a layer's top corner, with a 44-point target. */ export function ModalLayerCloseButton({ label, onPress, style }: ModalLayerCloseButtonProps) { const { colors, preferences } = useGlassTheme(); return ( [ styles.close, { backgroundColor: pressed ? CONTROL_SURFACE_PRESSED[preferences.theme] : colors.controlSurface, borderColor: colors.border, }, style, ]} > {({ pressed }) => ( )} ); } /** A layer's heading, announced as a header and kept clear of the close button. */ export const ModalLayerTitle = forwardRef(({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ( ); }); ModalLayerTitle.displayName = 'ModalLayerTitle'; /** A layer's supporting text, in the muted ink. */ export const ModalLayerDescription = forwardRef(({ style, ...rest }, ref) => { const { colors } = useGlassTheme(); return ( ); }); ModalLayerDescription.displayName = 'ModalLayerDescription'; const styles = StyleSheet.create({ close: { alignItems: 'center', borderCurve: 'continuous', borderRadius: 18, borderWidth: 1, height: 36, justifyContent: 'center', position: 'absolute', width: 36, }, description: { fontSize: 15, lineHeight: 21, marginTop: 6 }, // The close button sits 16 points in from the corner; the title stops 8 points short of it. title: { fontSize: 20, fontWeight: '600', letterSpacing: -0.3, lineHeight: 25, paddingEnd: 36 }, }); 5f: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