@aguacerowx/react-native 0.0.51 → 0.0.53

package/src/WeatherLayerManager.js

@@ -1,2005 +1,2045 @@
-// packages/react-native/src/WeatherLayerManager.js
-
-import {
-    AguaceroCore,
-    DICTIONARIES,
-    formatTimelineDurationValue,
-    getUnitConversionFunction,
-    parseTimelineDurationHours,
-} from '@aguacerowx/javascript-sdk';
-import { fromByteArray } from 'base64-js';
-import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { NativeModules, Platform, UIManager } from 'react-native';
-import { AguaceroContext } from './AguaceroContext';
-import { GridRenderLayer } from './GridRenderLayer';
-import NexradRadarLayer from './NexradRadarLayer';
-import SatelliteLayer from './SatelliteLayer';
-import { NexradSitesMapLayer } from './NexradSitesMapLayer';
-import { NexradAndroidController } from './nexrad/nexradAndroidController';
-import { SatelliteAndroidController } from './satellite/satelliteAndroidController';
-import NwsAlertsOverlay from './nws/NwsAlertsOverlay';
-import { mapRegistry } from './MapRegistry';
-import { satBridgeWarn } from './satelliteBridgeDiag';
-import {
-    augmentProcessFrameOptionsForDebug,
-    aguaceroDebugWarn,
-    configureAguaceroRnDebug,
-    getAguaceroAuthDiagnosticSnapshot,
-    isAguaceroRnDebugEnabled,
-} from './aguaceroRnDebug';
-import { installAguaceroCoreDebugHooks, logProcessFrameAuthMismatch } from './aguaceroCoreDebugHooks';
-
-const NEXRAD_NATIVE = Platform.OS === 'android' || Platform.OS === 'ios';
-const SATELLITE_NATIVE = Platform.OS === 'android' || Platform.OS === 'ios';
-
-satBridgeWarn('SDK fingerprint', {
-    platform: Platform.OS,
-    SATELLITE_NATIVE,
-    note: 'If you never see sat-bridge logs, the app bundle is not loading this WeatherLayerManager build.',
-});
-
-/**
- * Same filtering as {@link AguaceroCore#_getFilteredMrmsTimestampsForVariable} for older cores
- * where that helper (or {@code setMRMSDurationValue}) is missing from the prototype chain.
- */
-function getFilteredMrmsTimestampsCompat(core, variable) {
-    const raw = core.mrmsStatus?.[variable];
-    if (!raw || !raw.length) return [];
-    const hours = parseTimelineDurationHours(core.state.mrmsDurationValue);
-    let list = [...raw]
-        .map((t) => Number(t))
-        .filter((t) => !Number.isNaN(t))
-        .sort((a, b) => a - b);
-    if (hours > 0 && list.length > 0) {
-        const latest = list[list.length - 1];
-        const cutoff = latest - hours * 3600;
-        list = list.filter((t) => t >= cutoff);
-    }
-    return list;
-}
-
-/**
- * Older npm installs may resolve an {@link AguaceroCore} without {@code setMRMSDurationValue} /
- * {@code setNexradDurationValue}; mirror those methods here using the same logic as the SDK.
- */
-async function applyMrmsDurationValue(core, value) {
-    if (typeof core.setMRMSDurationValue === 'function') {
-        await core.setMRMSDurationValue(value);
-        return;
-    }
-    const v = formatTimelineDurationValue(value);
-    await core.setState({ mrmsDurationValue: v });
-    if (!core.state.isMRMS || !core.state.variable) return;
-    const filtered =
-        typeof core._getFilteredMrmsTimestampsForVariable === 'function'
-            ? core._getFilteredMrmsTimestampsForVariable(core.state.variable)
-            : getFilteredMrmsTimestampsCompat(core, core.state.variable);
-    if (!filtered || filtered.length === 0) return;
-    const curN = core.state.mrmsTimestamp == null ? null : Number(core.state.mrmsTimestamp);
-    if (curN == null || !filtered.includes(curN)) {
-        await core.setState({ mrmsTimestamp: filtered[filtered.length - 1] });
-    }
-}
-
-async function applyNexradDurationValue(core, value) {
-    if (typeof core.setNexradDurationValue === 'function') {
-        await core.setNexradDurationValue(value);
-        return;
-    }
-    const v = formatTimelineDurationValue(value);
-    await core.setState({ nexradDurationValue: v });
-    if (!core.state.isNexrad || !core.state.nexradSite) return;
-    if (typeof core.refreshNexradTimes === 'function') {
-        await core.refreshNexradTimes();
-    }
-    const nk = typeof core._nexradTimesCacheKey === 'function' ? core._nexradTimesCacheKey() : null;
-    const raw = nk ? core.nexradTimesByStation?.[nk]?.unixTimes || [] : [];
-    const filtered =
-        typeof core._getFilteredNexradTimestampsForVariable === 'function'
-            ? core._getFilteredNexradTimestampsForVariable(raw)
-            : [...raw].map((t) => Number(t)).filter((t) => !Number.isNaN(t)).sort((a, b) => a - b);
-    if (!filtered || filtered.length === 0) return;
-    const curN = core.state.nexradTimestamp == null ? null : Number(core.state.nexradTimestamp);
-    if (curN == null || !filtered.includes(curN)) {
-        await core.setState({ nexradTimestamp: filtered[filtered.length - 1] });
-    }
-}
-
-function findLatestModelRun(modelsData, modelName) {
-    const model = modelsData?.[modelName];
-    if (!model) return null;
-    const availableDates = Object.keys(model).sort((a, b) => b.localeCompare(a));
-    for (const date of availableDates) {
-        const runs = model[date];
-        if (!runs) continue;
-        const availableRuns = Object.keys(runs).sort((a, b) => b.localeCompare(a));
-        if (availableRuns.length > 0) return { date: date, run: availableRuns[0] };
-    }
-    return null;
-}
-const { WeatherFrameProcessorModule, InspectorModule } = NativeModules;
-
-/**
- * `state:change` payloads can briefly have {@code isNexrad} before {@code nexradSite} / {@code nexradTimestamp}
- * are populated; {@code core.state} is updated first. Merge so readouts match the active radar.
- *
- * @param {object | null} emitted
- * @param {object | null} coreState
- */
-function mergeNexradEmittedWithCore(emitted, coreState) {
-    if (!emitted || !coreState) return null;
-    return {
-        ...emitted,
-        nexradSite: coreState.nexradSite ?? emitted.nexradSite,
-        nexradTimestamp: coreState.nexradTimestamp ?? emitted.nexradTimestamp,
-        nexradProduct: coreState.nexradProduct ?? emitted.nexradProduct,
-        nexradTilt: coreState.nexradTilt ?? emitted.nexradTilt,
-        nexradDataSource: coreState.nexradDataSource ?? emitted.nexradDataSource,
-        nexradStormRelative: coreState.nexradStormRelative ?? emitted.nexradStormRelative,
-    };
-}
-
-/**
- * Compact timeline identity for deduping {@code state:change}: extending the NEXRAD/satellite window
- * often keeps the same selected unix — without this, {@link WeatherLayerManager} short-circuits and
- * never calls native {@code sync} / preload with the expanded frame list.
- */
-function nexradObsTimelineSig(state) {
-    const arr = [...(state?.availableNexradTimestamps || [])]
-        .map(Number)
-        .filter((t) => Number.isFinite(t))
-        .sort((a, b) => a - b);
-    if (!arr.length) return '0';
-    return `${arr.length}:${arr[0]}:${arr[arr.length - 1]}`;
-}
-
-function satelliteObsTimelineSig(state) {
-    const keys = Object.keys(state?.satelliteTimeToFileMap || {})
-        .map(Number)
-        .filter((t) => Number.isFinite(t))
-        .sort((a, b) => a - b);
-    if (!keys.length) return '0';
-    return `${keys.length}:${keys[0]}:${keys[keys.length - 1]}`;
-}
-
-/** True when {@link WeatherLayerManager} `debug` / {@link configureAguaceroRnDebug}, or legacy `__AGUACERO_WX_GRID_DEBUG__`. */
-function wxGridDebugEnabled() {
-    if (isAguaceroRnDebugEnabled()) return true;
-    try {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) return true;
-        return Boolean(typeof globalThis !== 'undefined' && globalThis.__AGUACERO_WX_GRID_DEBUG__);
-    } catch {
-        return false;
-    }
-}
-
-function wxGridVerbose(tag, detail) {
-    if (!wxGridDebugEnabled()) return;
-    if (detail !== undefined) {
-        console.log(`[AguaceroWX][grid][${tag}]`, detail);
-    } else {
-        console.log(`[AguaceroWX][grid][${tag}]`);
-    }
-}
-
-/** Always logs (Metro / device logs) — use for failures and unusual early exits. */
-function wxGridWarn(tag, detail) {
-    if (detail !== undefined) {
-        console.warn(`[AguaceroWX][grid][${tag}]`, detail);
-    } else {
-        console.warn(`[AguaceroWX][grid][${tag}]`);
-    }
-}
-
-/**
- * Native {@code processFrame} must mirror browser/AguaceroCore grid auth: encoded {@code apiKey}
- * in the query string and optional {@code Origin} / {@code Referer} (many CloudFront setups require them).
- *
- * @param {string} baseGridUrl
- * @param {string} resourcePath
- * @param {string} apiKey
- * @param {string | null | undefined} bundleId
- * @param {string | undefined} gridRequestSiteOrigin - e.g. production web origin your edge allowlists (no trailing slash)
- */
-function buildGridFrameProcessOptions(baseGridUrl, resourcePath, apiKey, bundleId, gridRequestSiteOrigin) {
-    const url = `${baseGridUrl}${resourcePath}?apiKey=${encodeURIComponent(apiKey)}`;
-    const options = { url, apiKey, bundleId };
-    if (typeof gridRequestSiteOrigin === 'string') {
-        let origin = gridRequestSiteOrigin.trim();
-        while (origin.endsWith('/')) {
-            origin = origin.slice(0, -1);
-        }
-        if (origin.length > 0) {
-            options.gridRequestSiteOrigin = origin;
-        }
-    }
-    return options;
-}
-
-/**
- * A helper function to generate the raw RGBA byte buffer for the colormap texture.
- */
-const _generateColormapBytes = (colormap) => {
-    const width = 256;
-    const data = new Uint8Array(width * 4);
-    const stops = colormap.reduce((acc, _, i) => (i % 2 === 0 ? [...acc, { value: colormap[i], color: colormap[i + 1] }] : acc), []);
-
-    if (stops.length === 0) return data;
-
-    const minVal = stops[0].value;
-    const maxVal = stops[stops.length - 1].value;
-
-    const hexToRgb = (hex) => {
-        const r = parseInt(hex.slice(1, 3), 16);
-        const g = parseInt(hex.slice(3, 5), 16);
-        const b = parseInt(hex.slice(5, 7), 16);
-        return [r, g, b];
-    };
-
-    for (let i = 0; i < width; i++) {
-        const val = minVal + (i / (width - 1)) * (maxVal - minVal);
-        let lower = stops[0];
-        let upper = stops[stops.length - 1];
-        for (let j = 0; j < stops.length - 1; j++) {
-            if (val >= stops[j].value && val <= stops[j + 1].value) {
-                lower = stops[j];
-                upper = stops[j + 1];
-                break;
-            }
-        }
-        const t = (val - lower.value) / (upper.value - lower.value || 1);
-        const lowerRgb = hexToRgb(lower.color);
-        const upperRgb = hexToRgb(upper.color);
-        const rgb = lowerRgb.map((c, idx) => c * (1 - t) + upperRgb[idx] * t);
-
-        const offset = i * 4;
-        data[offset + 0] = Math.round(rgb[0]);
-        data[offset + 1] = Math.round(rgb[1]);
-        data[offset + 2] = Math.round(rgb[2]);
-        data[offset + 3] = 255;
-    }
-    return data;
-};
-
-AguaceroCore.prototype.setMapCenter = function (center) {
-    this.emit('map:move', center);
-};
-
-export const WeatherLayerManager = forwardRef((props, ref) => {
-    const {
-        inspectorEnabled,
-        onInspect,
-        apiKey,
-        customColormaps,
-        initialMode,
-        initialVariable,
-        autoRefresh,
-        autoRefreshInterval,
-        initialModel,
-        belowID: belowIDFromProps,
-        interpolateNexradColormap = true,
-        nexradGateSmoothing = false,
-        watchesWarnings: watchesWarningsProp,
-        onNwsAlertClick,
-        /** Same semantics as mapsgl / AguaceroCore: Origin + Referer for grid CDN (required by many CloudFront rules). */
-        gridRequestSiteOrigin,
-        /** When true, logs auth/HTTP diagnostics under `[AguaceroRN][debug]` (Metro / Logcat / Xcode). */
-        debug = false,
-        ...restProps
-    } = props;
-
-    useEffect(() => {
-        configureAguaceroRnDebug({ enabled: Boolean(debug) });
-    }, [debug]);
-    const context = useContext(AguaceroContext);
-
-    // Create the core here instead of getting it from context
-    const core = useMemo(
-        () =>
-            new AguaceroCore({
-                apiKey: apiKey,
-                customColormaps: customColormaps,
-                gridRequestSiteOrigin: gridRequestSiteOrigin,
-                layerOptions: {
-                    mode: initialMode,
-                    variable: initialVariable,
-                    model: initialModel,
-                },
-                autoRefresh: false, // <-- add this
-            }),
-        [apiKey, gridRequestSiteOrigin],
-    );
-
-    useEffect(() => {
-        if (!core) return;
-        installAguaceroCoreDebugHooks(core, {
-            gridRequestSiteOriginProp: gridRequestSiteOrigin ?? null,
-            debugProp: Boolean(debug),
-        });
-        if (isAguaceroRnDebugEnabled() && !apiKey) {
-            aguaceroDebugWarn('WeatherLayerManager.missingApiKey', {
-                hint: 'apiKey prop is empty — all CDN requests will fail or return 403',
-            });
-        }
-        if (isAguaceroRnDebugEnabled() && apiKey && !gridRequestSiteOrigin) {
-            aguaceroDebugWarn('WeatherLayerManager.missingGridOrigin', {
-                hint: 'gridRequestSiteOrigin is not set — CloudFront often returns 403 without Origin/Referer on React Native',
-                snapshot: getAguaceroAuthDiagnosticSnapshot(core),
-            });
-        }
-    }, [core, debug, gridRequestSiteOrigin, apiKey]);
-
-    const [watchesWarningsOptions, setWatchesWarningsOptions] = useState(() => ({
-        alertInteractionEnabled: true,
-        ...(watchesWarningsProp ?? {}),
-    }));
-
-    useEffect(() => {
-        setWatchesWarningsOptions((prev) => ({
-            ...prev,
-            ...(watchesWarningsProp ?? {}),
-        }));
-    }, [watchesWarningsProp]);
-
-    useEffect(() => {
-        setNexradSitesMapVisible(Boolean(core.state.isNexrad && core.state.nexradShowSitesPicker !== false));
-    }, [core]);
-
-    const gridLayerRef = useRef(null);
-    const nexradLayerRef = useRef(null);
-    const nexradControllerRef = useRef(null);
-    /** Latest {@code state:change} payload (includes {@code colormap}, NEXRAD maps) — required for readouts; {@code core.state} omits those. */
-    const lastEmittedStateForInspectRef = useRef(null);
-    const satelliteLayerRef = useRef(null);
-    const satelliteControllerRef = useRef(null);
-    /** @type {React.MutableRefObject<{ cancel?: () => void } | null>} */
-    const nexradPreloadInteractionRef = useRef(null);
-    const currentGridDataRef = useRef(null);
-    const autoRefreshIntervalId = useRef(null);
-
-    const ensureNexradController = useCallback(() => {
-        if (!NEXRAD_NATIVE) return null;
-        if (!nexradControllerRef.current) {
-            nexradControllerRef.current = new NexradAndroidController(core, nexradLayerRef, {
-                interpolateNexradColormap,
-                nexradGateSmoothing,
-            });
-        }
-        return nexradControllerRef.current;
-    }, [core, interpolateNexradColormap, nexradGateSmoothing]);
-
-    /** Synchronous NEXRAD readout (mapsgl-style); no await — avoids jank on map move. */
-    const getNexradInspectPayloadAt = useCallback(
-        (lng, lat) => {
-            if (!NEXRAD_NATIVE || !core?.state?.isNexrad) return null;
-            const ctl = ensureNexradController();
-            if (!ctl) {
-                return null;
-            }
-            const emitted = lastEmittedStateForInspectRef.current;
-            if (!emitted) {
-                return null;
-            }
-            const st = mergeNexradEmittedWithCore(emitted, core.state);
-            if (!st?.nexradSite || st.nexradTimestamp == null) {
-                return null;
-            }
-            return ctl.getInspectPayload(lng, lat, st) ?? null;
-        },
-        [core, ensureNexradController],
-    );
-
-    const ensureSatelliteController = useCallback(() => {
-        if (!SATELLITE_NATIVE) return null;
-        if (!satelliteControllerRef.current) {
-            satelliteControllerRef.current = new SatelliteAndroidController(core, satelliteLayerRef);
-        }
-        return satelliteControllerRef.current;
-    }, [core]);
-
-    useEffect(() => {
-        if (!SATELLITE_NATIVE) return;
-        let gridCmdKeys = [];
-        let satCmdKeys = [];
-        try {
-            gridCmdKeys = Object.keys(UIManager.getViewManagerConfig?.('GridRenderLayer')?.Commands ?? {});
-        } catch {
-            gridCmdKeys = ['error'];
-        }
-        try {
-            satCmdKeys = Object.keys(UIManager.getViewManagerConfig?.('SatelliteLayer')?.Commands ?? {});
-        } catch {
-            satCmdKeys = ['error'];
-        }
-        satBridgeWarn('mount UIManager command registration', {
-            GridRenderLayerCommands: gridCmdKeys,
-            SatelliteLayerCommands: satCmdKeys,
-            satelliteMissing: satCmdKeys.length === 0,
-        });
-    }, []);
-
-    useEffect(() => {
-        const ctl = nexradControllerRef.current;
-        if (NEXRAD_NATIVE && ctl) {
-            ctl.updateStyleOptions({
-                interpolateNexradColormap,
-                nexradGateSmoothing,
-            });
-            if (core?.state?.isNexrad) {
-                ctl.applyStyleFromState(core.state);
-            }
-        }
-    }, [interpolateNexradColormap, nexradGateSmoothing, core]);
-
-    // Cache for preloaded grid data - stores the processed data ready for GPU upload
-    const preloadedDataCache = useRef(new Map());
-
-    // Store geometry and colormap that don't change with forecast hour
-    const cachedGeometry = useRef(null);
-    const cachedColormap = useRef(null);
-    const cachedDataRange = useRef([0, 1]);
-
-    // Track if we've done the initial load
-    const hasInitialLoad = useRef(false);
-    const hasPreloadedRef = useRef(false);
-
-    // Track the last state we processed to avoid redundant updates
-    const lastProcessedState = useRef(null);
-    const previousStateRef = useRef(null);
-
-    const [renderProps, setRenderProps] = useState({
-        opacity: 1,
-        dataRange: [0, 1]
-    });
-    /** Drives {@link NexradSitesMapLayer}; must re-render when core NEXRAD / picker flags change. */
-    const [nexradSitesMapVisible, setNexradSitesMapVisible] = useState(false);
-
-    useImperativeHandle(ref, () => {
-        const setAutoRefresh = (enabled, intervalSeconds) => {
-            if (autoRefreshIntervalId.current) {
-                clearInterval(autoRefreshIntervalId.current);
-                autoRefreshIntervalId.current = null;
-            }
-            if (enabled) {
-                const effectiveInterval = (intervalSeconds || autoRefreshInterval || 30) * 1000;
-                // Run once immediately, then start the interval
-                _checkForUpdates();
-                autoRefreshIntervalId.current = setInterval(_checkForUpdates, effectiveInterval);
-            }
-        };
-        return {
-            play: () => {
-                core.play();
-            },
-            pause: () => {
-                core.pause();
-            },
-            togglePlay: () => {
-                core.togglePlay();
-            },
-            step: (direction) => {
-                core.step(direction);
-            },
-            setPlaybackSpeed: (speed) => {
-                if (speed > 0) {
-                    core.playbackSpeed = speed;
-                    if (core.isPlaying) {
-                        core.pause();
-                        core.play();
-                    }
-                }
-            },
-            setOpacity: (opacity) => core.setOpacity(opacity),
-            setUnits: (units) => core.setUnits(units),
-            switchMode: (options) => core.switchMode(options),
-            getAvailableVariables: (model) => core.getAvailableVariables(model),
-            getVariableDisplayName: (code) => core.getVariableDisplayName(code),
-            setRun: (runString) => core.setState({ run: runString.split(':')[1] }),
-            setState: (newState) => core.setState(newState),
-            setMRMSTimestamp: (timestamp) => core.setMRMSTimestamp(timestamp),
-            setMRMSDurationValue: (value) => applyMrmsDurationValue(core, value),
-            setNexradSite: (siteId) => core.setNexradSite(siteId),
-            setNexradProduct: (product) => core.setNexradProduct(product),
-            setNexradTilt: (tilt) => core.setNexradTilt(tilt),
-            setNexradStormRelative: (enabled) => core.setNexradStormRelative(enabled),
-            setNexradTimestamp: (ts) => core.setNexradTimestamp(ts),
-            setNexradDurationValue: (value) => applyNexradDurationValue(core, value),
-            setSatelliteTimestamp: (timestamp) => core.setSatelliteTimestamp(timestamp),
-            setSatelliteDurationValue: (value) => core.setSatelliteDurationValue(value),
-            setSatelliteSelection: (opts) => core.setSatelliteSelection(opts),
-            setShaderSmoothing: async (enabled) => {
-                await core.setShaderSmoothing(enabled);
-                if (gridLayerRef.current) {
-                    gridLayerRef.current.setSmoothing(enabled);
-                }
-            },
-            setSmoothing: (enabled) => {
-                if (gridLayerRef.current) {
-                    gridLayerRef.current.setSmoothing(enabled);
-                }
-            },
-            setAutoRefresh,
-            refreshData: () => {
-                _checkForUpdates();
-            },
-            /**
-             * NWS watches/warnings (native map, iOS + Android): same options as mapsgl {@link WeatherLayerManager#configureWatchesWarnings}.
-             * @param {object} partial
-             */
-            configureWatchesWarnings: (partial) => {
-                setWatchesWarningsOptions((prev) => ({ ...prev, ...partial }));
-            },
-        };
-    }, [core, autoRefreshInterval, _checkForUpdates]);
-
-    const preloadAllFramesToDisk = async (state) => {
-        if (state.isNexrad || state.isSatellite) {
-            hasPreloadedRef.current = false;
-            wxGridVerbose('preloadSkip', { reason: 'nexrad_or_satellite' });
-            return;
-        }
-
-        if (hasPreloadedRef.current) {
-            wxGridVerbose('preloadSkip', { reason: 'hasPreloadedRef_gate', isMRMS: state.isMRMS, variable: state.variable });
-            return;
-        }
-
-        const { isMRMS, model, date, run, variable, units, availableHours, availableTimestamps, forecastHour, mrmsTimestamp } = state;
-
-        // CRITICAL: Don't start preloading if we don't have a valid current frame
-        if (isMRMS && (mrmsTimestamp == null || !availableTimestamps || availableTimestamps.length === 0)) {
-            hasPreloadedRef.current = false;
-            wxGridWarn('preloadAbort', {
-                reason: 'mrms_missing_frame_or_timestamps',
-                mrmsTimestamp,
-                timestampCount: availableTimestamps?.length ?? 0,
-                variable,
-            });
-            return;
-        }
-
-        if (!isMRMS && (forecastHour == null || !availableHours || availableHours.length === 0)) {
-            hasPreloadedRef.current = false;
-            wxGridWarn('preloadAbort', {
-                reason: 'model_missing_hour_or_hours',
-                forecastHour,
-                hourCount: availableHours?.length ?? 0,
-                model,
-                variable,
-            });
-            return;
-        }
-
-        // Only mark as "has preloaded" after validation passes
-        hasPreloadedRef.current = true;
-
-        wxGridVerbose('preloadStart', {
-            isMRMS,
-            model,
-            date,
-            run,
-            variable,
-            mrmsTimestamp: isMRMS ? mrmsTimestamp : undefined,
-            forecastHour: !isMRMS ? forecastHour : undefined,
-            baseGridUrl: core?.baseGridUrl,
-            hasApiKey: Boolean(core?.apiKey),
-            bundleId: core?.bundleId ?? null,
-            gridRequestSiteOrigin: gridRequestSiteOrigin || null,
-        });
-
-        // Fix the current forecast hour if it's invalid for this variable/model combo
-        let effectiveForecastHour = forecastHour;
-        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && forecastHour === 0) {
-            const validHours = availableHours.filter(hour => hour !== 0);
-            effectiveForecastHour = validHours.length > 0 ? validHours[0] : 0;
-        }
-
-        if (!cachedGeometry.current || !cachedColormap.current) {
-            const gridModel = isMRMS ? 'mrms' : model;
-            const { corners, gridDef } = core._getGridCornersAndDef(gridModel);
-            gridLayerRef.current.updateGeometry(corners, gridDef);
-            cachedGeometry.current = { model: gridModel, variable };
-
-            wxGridVerbose('geometryColormapInit', {
-                gridModel,
-                variable,
-                nx: gridDef?.grid_params?.nx,
-                ny: gridDef?.grid_params?.ny,
-            });
-
-            const { colormap, baseUnit } = core._getColormapForVariable(variable);
-            const toUnit = core._getTargetUnit(baseUnit, units);
-            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
-            let dataRange;
-            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
-                dataRange = isMRMS ? [5, 380] : [5, 380];
-            } else {
-                dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
-            }
-            const colormapBytes = _generateColormapBytes(finalColormap);
-            const colormapAsBase64 = fromByteArray(colormapBytes);
-
-            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
-            cachedColormap.current = { key: `${variable}-${units}` };
-            cachedDataRange.current = dataRange;
-
-            setRenderProps({ opacity: state.opacity, dataRange: dataRange });
-            hasInitialLoad.current = true;
-        }
-
-        // Apply the same filtering logic as in AguaceroCore._emitStateChange
-        let filteredHours = availableHours;
-        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && availableHours && availableHours.length > 0) {
-            filteredHours = availableHours.filter(hour => hour !== 0);
-        }
-
-        const allFrames = isMRMS ? availableTimestamps : filteredHours;
-        if (!allFrames || allFrames.length === 0) {
-            hasPreloadedRef.current = false;
-            wxGridWarn('preloadAbort', { reason: 'no_frames_after_filter', isMRMS, variable });
-            return;
-        }
-
-        const currentFrame = isMRMS ? mrmsTimestamp : effectiveForecastHour;
-
-        // Double-check currentFrame is valid
-        if (currentFrame == null) {
-            hasPreloadedRef.current = false;
-            wxGridWarn('preloadAbort', { reason: 'currentFrame_null', isMRMS, variable });
-            return;
-        }
-
-        // Reverse the frame order to load from last to first
-        const reversedFrames = [...allFrames].reverse();
-        const framesToPreload = reversedFrames.filter(frame => frame !== currentFrame);
-
-        const { corners, gridDef } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
-        const { nx, ny } = gridDef.grid_params;
-
-        // Load the current frame FIRST and WAIT for it before continuing
-        const currentCacheKey = isMRMS ? `mrms-${currentFrame}-${variable}` : `${model}-${date}-${run}-${currentFrame}-${variable}`;
-
-        if (!preloadedDataCache.current.has(currentCacheKey)) {
-            let resourcePath;
-            if (isMRMS) {
-                const frameDate = new Date(currentFrame * 1000);
-                const y = frameDate.getUTCFullYear();
-                const m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0');
-                const d = frameDate.getUTCDate().toString().padStart(2, '0');
-                resourcePath = `/grids/mrms/${y}${m}${d}/${currentFrame}/0/${variable}/0`;
-            } else {
-                resourcePath = `/grids/${model}/${date}/${run}/${currentFrame}/${variable}/0`;
-            }
-
-            const options = augmentProcessFrameOptionsForDebug(
-                buildGridFrameProcessOptions(
-                    core.baseGridUrl,
-                    resourcePath,
-                    core.apiKey,
-                    core.bundleId,
-                    gridRequestSiteOrigin,
-                ),
-                core,
-            );
-            logProcessFrameAuthMismatch(core, options, { phase: 'preloadCurrent', currentCacheKey });
-
-            try {
-                wxGridVerbose('processFrameRequest', { currentCacheKey, resourcePath, frame: currentFrame });
-                const result = await WeatherFrameProcessorModule.processFrame(options);
-
-                if (!result || !result.filePath) {
-                    hasPreloadedRef.current = false;
-                    wxGridWarn('preloadAbort', {
-                        reason: 'processFrame_empty_result',
-                        currentCacheKey,
-                        resultKeys: result ? Object.keys(result) : [],
-                    });
-                    return;
-                }
-
-                const { baseUnit } = core._getColormapForVariable(variable);
-
-                const toUnit = core._getTargetUnit(baseUnit, units);
-
-                const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
-                const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
-
-                let dataScale = result.scale;
-                let dataOffset = result.offset;
-
-                let convertedScale = dataScale;
-                let convertedOffset = dataOffset;
-
-                if (serverDataUnit !== baseUnit) {
-                    const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
-                    if (conversionFunc) {
-                        if (result.scaleType === 'sqrt') {
-                            const physicalAtOffset = dataOffset * dataOffset;
-                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                            convertedScale = newOffsetPlusScale - convertedOffset;
-                        } else {
-                            convertedOffset = conversionFunc(dataOffset);
-                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                            convertedScale = convertedOffsetPlusScale - convertedOffset;
-                        }
-                        dataScale = convertedScale;
-                        dataOffset = convertedOffset;
-                    }
-                }
-
-                if (baseUnit !== toUnit) {
-                    const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-                    if (conversionFunc) {
-                        if (result.scaleType === 'sqrt') {
-                            const physicalAtOffset = dataOffset * dataOffset;
-                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                            convertedScale = newOffsetPlusScale - convertedOffset;
-                        } else {
-                            convertedOffset = conversionFunc(dataOffset);
-                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                            convertedScale = convertedOffsetPlusScale - convertedOffset;
-                        }
-                    }
-                }
-
-                const frameData = {
-                    filePath: result.filePath,
-                    nx, ny,
-                    scale: convertedScale,
-                    offset: convertedOffset,
-                    missing: result.missing,
-                    corners,
-                    gridDef,
-                    scaleType: result.scaleType,
-                    originalScale: result.scale,
-                    originalOffset: result.offset
-                };
-
-                preloadedDataCache.current.set(currentCacheKey, frameData);
-
-                // Update the GPU with the current frame
-                gridLayerRef.current.updateDataTextureFromFile(
-                    frameData.filePath,
-                    frameData.nx, frameData.ny,
-                    frameData.scale, frameData.offset, frameData.missing,
-                    frameData.scaleType
-                );
-
-                currentGridDataRef.current = {
-                    nx: frameData.nx,
-                    ny: frameData.ny,
-                    scale: frameData.scale,
-                    offset: frameData.offset,
-                    missing: frameData.missing,
-                    gridDef: frameData.gridDef,
-                    variable: variable,
-                    units: units,
-                    scaleType: frameData.scaleType
-                };
-
-                wxGridVerbose('preloadCurrentFrameOk', {
-                    currentCacheKey,
-                    nx: frameData.nx,
-                    ny: frameData.ny,
-                    scale: frameData.scale,
-                    offset: frameData.offset,
-                    filePathSuffix: String(frameData.filePath).split('/').pop(),
-                });
-            } catch (e) {
-                const cancelled =
-                    e &&
-                    (e.code === 'E_CANCELLED' ||
-                        e?.userInfo?.code === 'E_CANCELLED' ||
-                        (typeof e?.message === 'string' && e.message.includes('superseded')));
-                if (!cancelled) {
-                    hasPreloadedRef.current = false;
-                    const errDetail = {
-                        currentCacheKey,
-                        code: e?.code,
-                        message: e?.message,
-                        userInfo: e?.userInfo,
-                    };
-                    wxGridWarn('preloadProcessFrameError', errDetail);
-                    if (isAguaceroRnDebugEnabled()) {
-                        aguaceroDebugWarn('preloadProcessFrameError', {
-                            ...errDetail,
-                            auth: getAguaceroAuthDiagnosticSnapshot(core),
-                            is403:
-                                e?.code === 'HTTP_ERROR' &&
-                                typeof e?.message === 'string' &&
-                                e.message.includes('403'),
-                        });
-                    }
-                } else {
-                    wxGridVerbose('preloadProcessFrameCancelled', { currentCacheKey });
-                }
-            }
-        }
-
-        // NOW preload the rest of the frames asynchronously
-        framesToPreload.forEach((frame) => {
-            const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
-            if (preloadedDataCache.current.has(cacheKey)) {
-                return;
-            }
-
-            let resourcePath;
-            if (isMRMS) {
-                const frameDate = new Date(frame * 1000);
-                const y = frameDate.getUTCFullYear();
-                const m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0');
-                const d = frameDate.getUTCDate().toString().padStart(2, '0');
-                resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${variable}/0`;
-            } else {
-                resourcePath = `/grids/${model}/${date}/${run}/${frame}/${variable}/0`;
-            }
-
-            const options = augmentProcessFrameOptionsForDebug(
-                buildGridFrameProcessOptions(
-                    core.baseGridUrl,
-                    resourcePath,
-                    core.apiKey,
-                    core.bundleId,
-                    gridRequestSiteOrigin,
-                ),
-                core,
-            );
-            logProcessFrameAuthMismatch(core, options, { phase: 'preloadBackground', cacheKey });
-
-            WeatherFrameProcessorModule.processFrame(options)
-                .then(result => {
-                    if (!result || !result.filePath) {
-                        return;
-                    }
-
-                    // ADD: Same two-step conversion as the current frame
-                    const { baseUnit } = core._getColormapForVariable(variable);
-                    const toUnit = core._getTargetUnit(baseUnit, units);
-                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
-                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
-
-                    let dataScale = result.scale;
-                    let dataOffset = result.offset;
-
-                    let convertedScale = dataScale;
-                    let convertedOffset = dataOffset;
-
-                    // Step 1: Convert from server unit to colormap base unit
-                    if (serverDataUnit !== baseUnit) {
-                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
-                        if (conversionFunc) {
-                            if (result.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                convertedScale = newOffsetPlusScale - convertedOffset;
-                            } else {
-                                convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                convertedScale = convertedOffsetPlusScale - convertedOffset;
-                            }
-                            dataScale = convertedScale;
-                            dataOffset = convertedOffset;
-                        }
-                    }
-
-                    // Step 2: Convert from colormap base unit to target display unit
-                    if (baseUnit !== toUnit) {
-                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-                        if (conversionFunc) {
-                            if (result.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                convertedScale = newOffsetPlusScale - convertedOffset;
-                            } else {
-                                convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                convertedScale = convertedOffsetPlusScale - convertedOffset;
-                            }
-                        }
-                    }
-
-                    const frameData = {
-                        filePath: result.filePath,
-                        nx, ny,
-                        scale: convertedScale,
-                        offset: convertedOffset,
-                        missing: result.missing,
-                        corners,
-                        gridDef,
-                        scaleType: result.scaleType,
-                        originalScale: result.scale,
-                        originalOffset: result.offset
-                    };
-
-                    preloadedDataCache.current.set(cacheKey, frameData);
-
-                    if (Platform.OS === 'ios' && gridLayerRef.current.primeGpuCache) {
-                        const frameInfoForGpu = {
-                            [cacheKey]: {
-                                filePath: frameData.filePath,
-                                nx: frameData.nx,
-                                ny: frameData.ny,
-                                scale: frameData.scale,
-                                offset: frameData.offset,
-                                missing: frameData.missing,
-                                scaleType: frameData.scaleType || 'linear',
-                                originalScale: frameData.originalScale,
-                                originalOffset: frameData.originalOffset
-                            }
-                        };
-                        gridLayerRef.current.primeGpuCache(frameInfoForGpu);
-                    }
-                })
-                .catch((e) => {
-                    const cancelled =
-                        e &&
-                        (e.code === 'E_CANCELLED' ||
-                            e?.userInfo?.code === 'E_CANCELLED' ||
-                            (typeof e?.message === 'string' && e.message.includes('superseded')));
-                    if (!cancelled) {
-                        wxGridWarn('backgroundFrameError', { cacheKey, code: e?.code, message: e?.message });
-                    }
-                });
-        });
-    };
-
-    useEffect(() => {
-        // This effect manages the auto-refresh based on props
-        if (autoRefresh) {
-            const interval = (autoRefreshInterval || 30) * 1000;
-            _checkForUpdates(); // Run immediately on enable
-            autoRefreshIntervalId.current = setInterval(_checkForUpdates, interval);
-        }
-
-        // Cleanup function: this runs when the component unmounts or props change
-        return () => {
-            if (autoRefreshIntervalId.current) {
-                clearInterval(autoRefreshIntervalId.current);
-                autoRefreshIntervalId.current = null;
-            }
-        };
-    }, [autoRefresh, autoRefreshInterval, _checkForUpdates]);
-
-    const updateGPUWithCachedData = (state) => {
-        const { model, date, run, forecastHour, variable, units, isMRMS, mrmsTimestamp } = state;
-
-        const cacheKey = isMRMS
-            ? `mrms-${mrmsTimestamp}-${variable}`
-            : `${model}-${date}-${run}-${forecastHour}-${variable}`;
-
-        if (Platform.OS === 'ios' && gridLayerRef.current.setActiveFrame) {
-            // Get the cached data BEFORE calling setActiveFrame
-            const cachedData = preloadedDataCache.current.get(cacheKey);
-
-            if (cachedData) {
-                currentGridDataRef.current = {
-                    nx: cachedData.nx,
-                    ny: cachedData.ny,
-                    scale: cachedData.scale,
-                    offset: cachedData.offset,
-                    missing: cachedData.missing,
-                    gridDef: cachedData.gridDef,
-                    variable: variable,
-                    units: units,
-                    scaleType: cachedData.scaleType
-                };
-            } else {
-                wxGridVerbose('gpuIOS_setActiveFrame_no_row', {
-                    cacheKey,
-                    cacheSize: preloadedDataCache.current.size,
-                });
-            }
-
-            gridLayerRef.current.setActiveFrame(cacheKey);
-            wxGridVerbose('gpuIOS_setActiveFrame', { cacheKey, hadCachedRow: Boolean(cachedData) });
-            return true;
-        }
-
-        const cachedData = preloadedDataCache.current.get(cacheKey);
-
-        if (!cachedData) {
-            wxGridWarn('updateGPUNoCache', {
-                cacheKey,
-                cacheSize: preloadedDataCache.current.size,
-                sampleKeys: Array.from(preloadedDataCache.current.keys()).slice(0, 5),
-            });
-            return false;
-        }
-
-        if (!gridLayerRef.current) {
-            wxGridWarn('updateGPUNoGridLayerRef', { cacheKey });
-            return false;
-        }
-
-        if (!cachedGeometry.current || cachedGeometry.current.model !== (isMRMS ? 'mrms' : model) || cachedGeometry.current.variable !== variable) {
-            gridLayerRef.current.updateGeometry(cachedData.corners, cachedData.gridDef);
-            cachedGeometry.current = { model: (isMRMS ? 'mrms' : model), variable };
-        }
-
-        const colormapKey = `${variable}-${units}`;
-        if (!cachedColormap.current || cachedColormap.current.key !== colormapKey) {
-            const { colormap, baseUnit } = core._getColormapForVariable(variable);
-            const toUnit = core._getTargetUnit(baseUnit, units);
-            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
-            let dataRange;
-            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
-                if (isMRMS) {
-                    dataRange = [5, 380];
-                } else {
-                    dataRange = [5, 380];
-                }
-            } else {
-                dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
-            }
-            const colormapBytes = _generateColormapBytes(finalColormap);
-            const colormapAsBase64 = fromByteArray(colormapBytes);
-
-            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
-            cachedColormap.current = { key: colormapKey };
-            cachedDataRange.current = dataRange;
-
-            setRenderProps(prev => ({ ...prev, dataRange }));
-        }
-
-        if (cachedData.filePath) {
-            gridLayerRef.current.updateDataTextureFromFile(
-                cachedData.filePath,
-                cachedData.nx, cachedData.ny,
-                cachedData.scale, cachedData.offset, cachedData.missing,
-                cachedData.scaleType
-            );
-            currentGridDataRef.current = {
-                nx: cachedData.nx,
-                ny: cachedData.ny,
-                scale: cachedData.scale,
-                offset: cachedData.offset,
-                missing: cachedData.missing,
-                gridDef: cachedData.gridDef,
-                variable: variable,
-                units: units,
-                scaleType: cachedData.scaleType
-            };
-            wxGridVerbose('gpuUploadFromFile', {
-                cacheKey,
-                nx: cachedData.nx,
-                ny: cachedData.ny,
-                filePathSuffix: String(cachedData.filePath).split('/').pop(),
-            });
-        } else {
-            wxGridWarn('updateGPUNoFilePath', { cacheKey });
-            return false;
-        }
-
-        // Update inspector parameters for file-based data too
-        if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
-            gridLayerRef.current.updateDataParameters(cachedData.scale, cachedData.offset, cachedData.missing);
-        }
-        return true;
-    };
-
-    const handleStateChangeRef = useRef(null);
-    const debounceTimeoutRef = useRef(null);
-
-    useEffect(() => {
-        if (core && props.customColormaps) {
-            core.customColormaps = props.customColormaps;
-            // Trigger a re-render if we already have data loaded
-            if (hasInitialLoad.current) {
-                core._emitStateChange();
-            }
-        }
-    }, [core, props.customColormaps]);
-
-    const getValueAtPoint = async (lng, lat) => {
-        if (!core) {
-            return null;
-        }
-
-        if (NEXRAD_NATIVE && core.state?.isNexrad) {
-            return getNexradInspectPayloadAt(lng, lat);
-        }
-
-        // ADD THIS: Check if we have valid data before attempting inspection
-        if (!currentGridDataRef.current) {
-            return null;
-        }
-
-        try {
-            const gridIndices = core._getGridIndexFromLngLat(lng, lat);
-            if (!gridIndices) return null;
-
-            const { i, j } = gridIndices;
-
-            const value = await InspectorModule.getValueAtGridIndex(i, j);
-
-            if (value === null) {
-                return null;
-            }
-
-            const { colormap, baseUnit } = core._getColormapForVariable(core.state.variable);
-            const displayUnit = core._getTargetUnit(baseUnit, core.state.units);
-            const finalColormap = core._convertColormapUnits(colormap, baseUnit, displayUnit);
-            const minThreshold = finalColormap[0];
-
-            if (value < minThreshold) {
-                return null;
-            }
-
-            // Filter out values below the minimum threshold (matching shader behavior)
-            if (value < minThreshold) {
-                return null;
-            }
-
-            // Also check if value is NaN or effectively missing
-            if (!isFinite(value)) {
-                return null;
-            }
-
-            return {
-                value: value,
-                unit: displayUnit,
-                variable: {
-                    code: core.state.variable,
-                    name: core.getVariableDisplayName(core.state.variable)
-                },
-                lngLat: { lng, lat }
-            };
-        } catch {
-            return null;
-        }
-    };
-
-    const getValueAtPointRef = useRef(getValueAtPoint);
-    getValueAtPointRef.current = getValueAtPoint;
-    const getNexradInspectPayloadAtRef = useRef(getNexradInspectPayloadAt);
-    getNexradInspectPayloadAtRef.current = getNexradInspectPayloadAt;
-
-    const _checkForUpdates = useMemo(() => async () => {
-        if (!core) return;
-        const s = core.state;
-        const { isMRMS, isSatellite, isNexrad, model: currentModel, variable: currentVariable, date, run } = s;
-
-        if (isSatellite) {
-            const prevTimeline = core._computeSatelliteTimeline();
-            const prevTimes = [...(prevTimeline.unixTimes || [])]
-                .map((t) => Number(t))
-                .filter((t) => !Number.isNaN(t))
-                .sort((a, b) => a - b);
-            const prevMax = prevTimes.length ? prevTimes[prevTimes.length - 1] : null;
-            const curSat = s.satelliteTimestamp == null ? null : Number(s.satelliteTimestamp);
-
-            await core.fetchSatelliteListing(true);
-            core._emitStateChange();
-
-            const nextTimeline = core._computeSatelliteTimeline();
-            const nextTimes = [...(nextTimeline.unixTimes || [])]
-                .map((t) => Number(t))
-                .filter((t) => !Number.isNaN(t))
-                .sort((a, b) => a - b);
-            const newMax = nextTimes.length ? nextTimes[nextTimes.length - 1] : null;
-
-            if (prevMax != null && curSat != null && curSat === prevMax && newMax != null && newMax > prevMax) {
-                await core.setSatelliteTimestamp(newMax);
-            } else if (curSat != null && newMax != null && nextTimes.length && !nextTimes.includes(curSat)) {
-                await core.setSatelliteTimestamp(newMax);
-            }
-            return;
-        }
-
-        if (isNexrad && s.nexradSite) {
-            const nk = core._nexradTimesCacheKey();
-            const rawBefore = nk ? core.nexradTimesByStation[nk]?.unixTimes : [];
-            const filteredBefore = core._getFilteredNexradTimestampsForVariable(rawBefore || []);
-            const prevMax = filteredBefore.length ? filteredBefore[filteredBefore.length - 1] : null;
-            const curNx = s.nexradTimestamp == null ? null : Number(s.nexradTimestamp);
-
-            await core.refreshNexradTimes();
-
-            const rawAfter = nk ? core.nexradTimesByStation[nk]?.unixTimes : [];
-            const filteredAfter = core._getFilteredNexradTimestampsForVariable(rawAfter || []);
-            const newMax = filteredAfter.length ? filteredAfter[filteredAfter.length - 1] : null;
-
-            if (prevMax != null && curNx != null && curNx === prevMax && newMax != null && newMax > prevMax) {
-                await core.setNexradTimestamp(newMax);
-            } else if (curNx != null && newMax != null && filteredAfter.length && !filteredAfter.includes(curNx)) {
-                await core.setNexradTimestamp(newMax);
-            }
-            return;
-        }
-
-        if (isMRMS) {
-            // --- MRMS LOGIC (Keep existing logic) ---
-            const oldTimestamps = new Set(core.mrmsStatus?.[currentVariable] || []);
-            const mrmsStatus = await core.fetchMRMSStatus(true);
-            const newTimestamps = mrmsStatus?.[currentVariable] || [];
-            if (newTimestamps.length === 0) return;
-
-            const newTimestampsToPreload = newTimestamps.filter(ts => !oldTimestamps.has(ts));
-
-            if (newTimestampsToPreload.length > 0) {
-                core.mrmsStatus = mrmsStatus;
-                core._emitStateChange(); // Update UI slider without changing selection
-
-                // ... (Keep your existing preloading logic here) ...
-                const { corners, gridDef } = core._getGridCornersAndDef('mrms');
-                const { nx, ny } = gridDef.grid_params;
-
-                newTimestampsToPreload.forEach(frame => {
-                    const cacheKey = `mrms-${frame}-${currentVariable}`;
-                    if (preloadedDataCache.current.has(cacheKey)) return;
-
-                    const frameDate = new Date(frame * 1000);
-                    const y = frameDate.getUTCFullYear(), m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = frameDate.getUTCDate().toString().padStart(2, '0');
-                    const resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${currentVariable}/0`;
-                    const options = augmentProcessFrameOptionsForDebug(
-                        buildGridFrameProcessOptions(
-                            core.baseGridUrl,
-                            resourcePath,
-                            core.apiKey,
-                            core.bundleId,
-                            gridRequestSiteOrigin,
-                        ),
-                        core,
-                    );
-                    logProcessFrameAuthMismatch(core, options, { phase: 'mrmsRefresh', cacheKey });
-
-                    WeatherFrameProcessorModule.processFrame(options)
-                        .then(result => {
-                            if (!result || !result.filePath) return;
-                            const frameData = { filePath: result.filePath, nx, ny, scale: result.scale, offset: result.offset, missing: result.missing, corners, gridDef, scaleType: result.scaleType, originalScale: result.scale, originalOffset: result.offset };
-                            preloadedDataCache.current.set(cacheKey, frameData);
-                            if (Platform.OS === 'ios' && gridLayerRef.current?.primeGpuCache) {
-                                gridLayerRef.current.primeGpuCache({ [cacheKey]: frameData });
-                            }
-                        })
-                        .catch((e) => {
-                            const cancelled =
-                                e &&
-                                (e.code === 'E_CANCELLED' ||
-                                    e?.userInfo?.code === 'E_CANCELLED' ||
-                                    (typeof e?.message === 'string' && e.message.includes('superseded')));
-                            if (!cancelled) {
-                                wxGridWarn('mrmsRefreshFrameError', { cacheKey, code: e?.code, message: e?.message });
-                            }
-                        });
-                });
-
-                const newTimestampsSet = new Set(newTimestamps);
-                oldTimestamps.forEach(oldTs => {
-                    if (!newTimestampsSet.has(oldTs)) {
-                        const cacheKey = `mrms-${oldTs}-${currentVariable}`;
-                        preloadedDataCache.current.delete(cacheKey);
-                    }
-                });
-            }
-        } else {
-            const previousStatus = core.modelStatus;
-            const modelStatus = await core.fetchModelStatus(true);
-            const statusChanged = JSON.stringify(previousStatus) !== JSON.stringify(modelStatus);
-            if (statusChanged) {
-                core._emitStateChange();
-            }
-
-            const latestRun = findLatestModelRun(modelStatus, currentModel);
-            if (!latestRun) return;
-        }
-    }, [core]);
-
-    useEffect(() => {
-        if (!core) {
-            return;
-        }
-
-        const handleStateChange = (newState) => {
-            if (!previousStateRef.current) {
-                previousStateRef.current = core.state;
-            }
-
-            const variableChanged = !previousStateRef.current || newState.variable !== previousStateRef.current.variable;
-
-            if (variableChanged && gridLayerRef.current?.setVariable) {
-                gridLayerRef.current.setVariable(newState.variable);
-            }
-
-            const stateKey = newState.isNexrad
-                ? `nx-${newState.nexradSite}-${newState.nexradProduct}-${newState.nexradDataSource}-${newState.nexradTimestamp}-${newState.nexradTilt}-${newState.units}-${newState.model}-${newState.variable}-${newState.mrmsTimestamp}-${newState.forecastHour}-dur:${newState.nexradDurationValue ?? ''}-tl:${nexradObsTimelineSig(newState)}`
-                : newState.isSatellite
-                  ? `sat-${newState.satelliteInstrumentId}-${newState.satelliteSectorLabel}-${newState.satelliteChannel}-${newState.satelliteTimestamp}-${newState.variable}-${newState.units}-${newState.opacity}-dur:${newState.satelliteDurationValue ?? ''}-tl:${satelliteObsTimelineSig(newState)}`
-                  : `${newState.model}-${newState.variable}-${newState.date}-${newState.run}-${newState.forecastHour}-${newState.units}-${newState.mrmsTimestamp}`;
-
-            const sameTimeline = newState.isNexrad
-                ? newState.nexradTimestamp === previousStateRef.current?.nexradTimestamp &&
-                  newState.nexradSite === previousStateRef.current?.nexradSite &&
-                  newState.nexradProduct === previousStateRef.current?.nexradProduct &&
-                  Number(newState.nexradTilt) === Number(previousStateRef.current?.nexradTilt) &&
-                  newState.nexradDurationValue === previousStateRef.current?.nexradDurationValue &&
-                  nexradObsTimelineSig(newState) === nexradObsTimelineSig(previousStateRef.current)
-                : newState.isSatellite
-                  ? newState.satelliteTimestamp === previousStateRef.current?.satelliteTimestamp &&
-                    newState.satelliteInstrumentId === previousStateRef.current?.satelliteInstrumentId &&
-                    newState.satelliteSectorLabel === previousStateRef.current?.satelliteSectorLabel &&
-                    newState.satelliteChannel === previousStateRef.current?.satelliteChannel &&
-                    newState.satelliteDurationValue === previousStateRef.current?.satelliteDurationValue &&
-                    satelliteObsTimelineSig(newState) === satelliteObsTimelineSig(previousStateRef.current)
-                  : newState.forecastHour === previousStateRef.current?.forecastHour &&
-                    newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp;
-
-            const sameModeAnchor =
-                newState.isSatellite
-                    ? newState.satelliteInstrumentId === previousStateRef.current?.satelliteInstrumentId &&
-                      newState.satelliteSectorLabel === previousStateRef.current?.satelliteSectorLabel &&
-                      newState.satelliteChannel === previousStateRef.current?.satelliteChannel
-                    : newState.model === previousStateRef.current?.model &&
-                      newState.isMRMS === previousStateRef.current?.isMRMS;
-
-            const isOpacityOnlyChange =
-                hasInitialLoad.current &&
-                newState.opacity !== renderProps.opacity &&
-                newState.variable === previousStateRef.current?.variable &&
-                sameTimeline &&
-                sameModeAnchor &&
-                newState.units === previousStateRef.current?.units;
-
-            const isPlayStateOnlyChange =
-                hasInitialLoad.current &&
-                newState.isPlaying !== previousStateRef.current?.isPlaying &&
-                newState.variable === previousStateRef.current?.variable &&
-                sameTimeline &&
-                sameModeAnchor &&
-                newState.units === previousStateRef.current?.units &&
-                newState.opacity === previousStateRef.current?.opacity;
-
-            if (!isOpacityOnlyChange && !isPlayStateOnlyChange && lastProcessedState.current === stateKey) {
-                previousStateRef.current = newState;
-                return;
-            }
-
-            if (
-                wxGridDebugEnabled() &&
-                Platform.OS === 'ios' &&
-                ((newState.isNexrad && previousStateRef.current?.isNexrad) ||
-                    (newState.isSatellite && previousStateRef.current?.isSatellite))
-            ) {
-                const prev = previousStateRef.current;
-                if (newState.isNexrad && prev?.isNexrad) {
-                    if (
-                        newState.nexradDurationValue !== prev.nexradDurationValue ||
-                        nexradObsTimelineSig(newState) !== nexradObsTimelineSig(prev)
-                    ) {
-                        wxGridVerbose('iosNexradTimelineWindowChanged', {
-                            duration: { from: prev.nexradDurationValue, to: newState.nexradDurationValue },
-                            timelineSig: { from: nexradObsTimelineSig(prev), to: nexradObsTimelineSig(newState) },
-                            willSyncNative: true,
-                        });
-                    }
-                }
-                if (newState.isSatellite && prev?.isSatellite) {
-                    if (
-                        newState.satelliteDurationValue !== prev.satelliteDurationValue ||
-                        satelliteObsTimelineSig(newState) !== satelliteObsTimelineSig(prev)
-                    ) {
-                        wxGridVerbose('iosSatelliteTimelineWindowChanged', {
-                            duration: { from: prev.satelliteDurationValue, to: newState.satelliteDurationValue },
-                            timelineSig: { from: satelliteObsTimelineSig(prev), to: satelliteObsTimelineSig(newState) },
-                            willSyncNative: true,
-                        });
-                    }
-                }
-            }
-
-            if (!isOpacityOnlyChange && !isPlayStateOnlyChange) {
-                lastProcessedState.current = stateKey;
-            }
-
-            if (isOpacityOnlyChange) {
-                setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
-                if (NEXRAD_NATIVE && newState.isNexrad) {
-                    nexradControllerRef.current?.applyStyleFromState?.(newState);
-                }
-                if (SATELLITE_NATIVE && newState.isSatellite) {
-                    satelliteLayerRef.current?.updateSatelliteStyle?.(
-                        JSON.stringify({
-                            visible: newState.visible !== false,
-                            opacity: newState.opacity ?? 1,
-                            fillSmoothing: 0,
-                        }),
-                    );
-                }
-                previousStateRef.current = newState;
-                return;
-            }
-
-            if (isPlayStateOnlyChange) {
-                previousStateRef.current = newState;
-                return;
-            }
-
-            const isUnitsOnlyChange =
-                hasInitialLoad.current &&
-                newState.model === previousStateRef.current.model &&
-                newState.isMRMS === previousStateRef.current.isMRMS &&
-                newState.variable === previousStateRef.current.variable &&
-                newState.date === previousStateRef.current.date &&
-                newState.run === previousStateRef.current.run &&
-                (newState.isNexrad
-                    ? newState.nexradTimestamp === previousStateRef.current.nexradTimestamp &&
-                      newState.nexradSite === previousStateRef.current.nexradSite &&
-                      newState.nexradProduct === previousStateRef.current.nexradProduct
-                    : newState.forecastHour === previousStateRef.current.forecastHour &&
-                      newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp) &&
-                newState.units !== previousStateRef.current.units;
-
-            if (isUnitsOnlyChange) {
-                if (NEXRAD_NATIVE && newState.isNexrad) {
-                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
-                    nexradControllerRef.current?.applyStyleFromState?.(newState);
-                    previousStateRef.current = newState;
-                    return;
-                }
-                const { variable, units, isMRMS, mrmsTimestamp, model, date, run, forecastHour } = newState;
-                const oldCacheKey = isMRMS
-                    ? `mrms-${mrmsTimestamp}-${variable}`
-                    : `${model}-${date}-${run}-${forecastHour}-${variable}`;
-
-                const cachedData = preloadedDataCache.current.get(oldCacheKey);
-
-                if (cachedData && cachedData.originalScale !== undefined && cachedData.originalOffset !== undefined) {
-                    const { baseUnit } = core._getColormapForVariable(variable);
-                    const toUnit = core._getTargetUnit(baseUnit, units);
-                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
-                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
-
-                    let dataScale = cachedData.originalScale;
-                    let dataOffset = cachedData.originalOffset;
-
-                    if (serverDataUnit !== baseUnit) {
-                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
-                        if (conversionFunc) {
-                            if (cachedData.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                dataScale = newOffsetPlusScale - newOffset;
-                                dataOffset = newOffset;
-                            } else {
-                                const convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                dataScale = convertedOffsetPlusScale - convertedOffset;
-                                dataOffset = convertedOffset;
-                            }
-                        }
-                    }
-
-                    if (baseUnit !== toUnit) {
-                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-                        if (conversionFunc) {
-                            if (cachedData.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                dataScale = newOffsetPlusScale - newOffset;
-                                dataOffset = newOffset;
-                            } else {
-                                const convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                dataScale = convertedOffsetPlusScale - convertedOffset;
-                                dataOffset = convertedOffset;
-                            }
-                        }
-                    }
-
-                    const { colormap } = core._getColormapForVariable(variable);
-                    const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
-                    let dataRange = (variable === 'ptypeRefl' || variable === 'ptypeRate') ? [5, 380] : [finalColormap[0], finalColormap[finalColormap.length - 2]];
-                    const colormapBytes = _generateColormapBytes(finalColormap);
-                    const colormapAsBase64 = fromByteArray(colormapBytes);
-
-                    gridLayerRef.current.updateColormapTexture(colormapAsBase64);
-                    cachedColormap.current = { key: `${variable}-${units}` };
-                    cachedDataRange.current = dataRange;
-                    setRenderProps(prev => ({ ...prev, dataRange, opacity: newState.opacity }));
-
-                    if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
-                        const scaleTypeValue = cachedData.scaleType === 'sqrt' ? 1 : 0;
-                        gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing, scaleTypeValue);
-                    }
-
-                    const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
-                    preloadedDataCache.current.set(newCacheKey, { ...cachedData, scale: dataScale, offset: dataOffset });
-                }
-
-                previousStateRef.current = newState;
-                return;
-            }
-
-            const prev = previousStateRef.current;
-            const needsFullLoad =
-                !hasInitialLoad.current ||
-                newState.isNexrad !== prev?.isNexrad ||
-                newState.isSatellite !== prev?.isSatellite ||
-                (newState.isNexrad &&
-                    prev?.isNexrad &&
-                    (newState.nexradSite !== prev.nexradSite ||
-                        newState.nexradDataSource !== prev.nexradDataSource ||
-                        newState.nexradProduct !== prev.nexradProduct)) ||
-                (newState.isSatellite &&
-                    prev?.isSatellite &&
-                    (newState.satelliteInstrumentId !== prev.satelliteInstrumentId ||
-                        newState.satelliteSectorLabel !== prev.satelliteSectorLabel ||
-                        newState.satelliteChannel !== prev.satelliteChannel)) ||
-                (!newState.isNexrad &&
-                    !newState.isSatellite &&
-                    (newState.model !== prev?.model ||
-                        newState.isMRMS !== prev?.isMRMS ||
-                        newState.variable !== prev?.variable ||
-                        newState.date !== prev?.date ||
-                        newState.run !== prev?.run));
-
-            if (needsFullLoad) {
-                wxGridVerbose('needsFullLoad', {
-                    variable: newState.variable,
-                    isMRMS: newState.isMRMS,
-                    model: newState.model,
-                    isInitial: !hasInitialLoad.current,
-                    prevVariable: prev?.variable,
-                    prevModel: prev?.model,
-                });
-                const nexradIdentityChange =
-                    NEXRAD_NATIVE &&
-                    (newState.isNexrad !== prev?.isNexrad ||
-                        (newState.isNexrad &&
-                            prev?.isNexrad &&
-                            (newState.nexradSite !== prev.nexradSite ||
-                                newState.nexradDataSource !== prev.nexradDataSource ||
-                                newState.nexradProduct !== prev.nexradProduct)));
-                const satelliteIdentityChange =
-                    SATELLITE_NATIVE &&
-                    (newState.isSatellite !== prev?.isSatellite ||
-                        (newState.isSatellite &&
-                            prev?.isSatellite &&
-                            (newState.satelliteInstrumentId !== prev.satelliteInstrumentId ||
-                                newState.satelliteSectorLabel !== prev.satelliteSectorLabel ||
-                                newState.satelliteChannel !== prev.satelliteChannel)));
-                if (nexradIdentityChange) {
-                    nexradPreloadInteractionRef.current?.cancel?.();
-                    nexradPreloadInteractionRef.current = null;
-                    nexradControllerRef.current?.destroy();
-                    nexradControllerRef.current = null;
-                }
-                if (satelliteIdentityChange) {
-                    satelliteControllerRef.current?.destroy();
-                    satelliteControllerRef.current = null;
-                }
-                if (gridLayerRef.current) {
-                    gridLayerRef.current.setVariable(newState.variable);
-                    gridLayerRef.current.clear();
-                    if (Platform.OS === 'ios' && gridLayerRef.current.clearGpuCache) {
-                        gridLayerRef.current.clearGpuCache();
-                    }
-                }
-                hasPreloadedRef.current = false;
-                preloadedDataCache.current.clear();
-                cachedGeometry.current = null;
-                cachedColormap.current = null;
-                currentGridDataRef.current = null;
-                WeatherFrameProcessorModule.cancelAllFrames();
-                wxGridVerbose('cancelAllFrames', { reason: 'needsFullLoad', variable: newState.variable });
-
-                if (!newState.variable) {
-                    previousStateRef.current = newState;
-                    return;
-                }
-                if (!newState.isNexrad && !newState.isSatellite) {
-                    preloadAllFramesToDisk(newState);
-                } else if (NEXRAD_NATIVE && newState.isNexrad) {
-                    hasInitialLoad.current = true;
-                } else if (SATELLITE_NATIVE && newState.isSatellite) {
-                    hasInitialLoad.current = true;
-                }
-            } else if (
-                !newState.isNexrad &&
-                (newState.forecastHour !== previousStateRef.current.forecastHour ||
-                    (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp))
-            ) {
-                const success = updateGPUWithCachedData(newState);
-                if (!success) {
-                    wxGridWarn('timelineGpuUpdateMiss', {
-                        isMRMS: newState.isMRMS,
-                        variable: newState.variable,
-                        mrmsTimestamp: newState.mrmsTimestamp,
-                        forecastHour: newState.forecastHour,
-                    });
-                }
-                if (success && newState.opacity !== renderProps.opacity) {
-                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
-                }
-            }
-
-            if (NEXRAD_NATIVE && newState.isNexrad && newState.nexradSite && newState.nexradTimestamp != null) {
-                const ctl = ensureNexradController();
-                if (ctl) {
-                    hasInitialLoad.current = true;
-                    void ctl.sync(newState);
-                    nexradPreloadInteractionRef.current?.cancel?.();
-                    const preloadCancelled = { v: false };
-                    nexradPreloadInteractionRef.current = {
-                        cancel: () => {
-                            preloadCancelled.v = true;
-                        },
-                    };
-                    const nexradTimelineSnapshot = Array.isArray(newState.availableNexradTimestamps)
-                        ? newState.availableNexradTimestamps
-                        : [];
-                    const kickPreload = () => {
-                        nexradPreloadInteractionRef.current = null;
-                        if (preloadCancelled.v) {
-                            return;
-                        }
-                        const cur = nexradControllerRef.current;
-                        if (!cur) {
-                            return;
-                        }
-                        const s = core.state;
-                        if (!s.isNexrad || !s.nexradSite || s.nexradTimestamp == null) {
-                            return;
-                        }
-                        const coreTs = Array.isArray(s.availableNexradTimestamps) ? s.availableNexradTimestamps : [];
-                        const mergedTimestamps =
-                            coreTs.length > 0 ? coreTs : nexradTimelineSnapshot.length > 0 ? nexradTimelineSnapshot : [];
-                        const preloadState = { ...s, availableNexradTimestamps: mergedTimestamps };
-                        cur.preloadAllAvailable(preloadState);
-                    };
-                    if (typeof queueMicrotask === 'function') {
-                        queueMicrotask(kickPreload);
-                    } else {
-                        setTimeout(kickPreload, 0);
-                    }
-                }
-            } else if (NEXRAD_NATIVE && (!newState.isNexrad || !newState.nexradSite)) {
-                nexradPreloadInteractionRef.current?.cancel?.();
-                nexradPreloadInteractionRef.current = null;
-                nexradControllerRef.current?.destroy();
-                nexradControllerRef.current = null;
-            }
-
-            if (SATELLITE_NATIVE && newState.isSatellite) {
-                satBridgeWarn('handleStateChange → satellite', {
-                    satelliteInstrumentId: newState.satelliteInstrumentId ?? null,
-                    satelliteSectorLabel: newState.satelliteSectorLabel ?? null,
-                    satelliteChannel: newState.satelliteChannel ?? null,
-                    timelineKeys: Object.keys(newState.satelliteTimeToFileMap || {}).length,
-                    refHasSync: Boolean(satelliteLayerRef.current?.syncSatellite),
-                });
-                const satCtl = ensureSatelliteController();
-                if (satCtl) {
-                    hasInitialLoad.current = true;
-                    void satCtl.sync(newState);
-                } else {
-                    satBridgeWarn('handleStateChange satellite: ensureSatelliteController returned null', {});
-                }
-                if (!newState.satelliteInstrumentId && typeof __DEV__ !== 'undefined' && __DEV__) {
-                    console.warn(
-                        '[AguaceroWX][satellite] isSatellite is true but satelliteInstrumentId is missing — native sync still runs; timeline may be empty until core sets instrument.',
-                    );
-                }
-            } else if (SATELLITE_NATIVE && !newState.isSatellite) {
-                satelliteControllerRef.current?.destroy();
-                satelliteControllerRef.current = null;
-            }
-
-            previousStateRef.current = newState;
-        };
-
-        handleStateChangeRef.current = handleStateChange;
-
-        const stableHandler = (newState) => {
-            lastEmittedStateForInspectRef.current = newState;
-            setNexradSitesMapVisible(Boolean(newState.isNexrad && newState.nexradShowSitesPicker !== false));
-            // OPTIMIZATION: If playing (high speed), prioritize MAP update and skip debounce
-            if (newState.isPlaying) {
-                // 1. Update Map FIRST (Native Enqueue)
-                if (handleStateChangeRef.current) {
-                    handleStateChangeRef.current(newState);
-                }
-
-                // 2. Update UI Slider SECOND
-                // This ensures the heavy map frame is processing while React reconciles the slider
-                props.onStateChange?.(newState);
-
-                if (debounceTimeoutRef.current) {
-                    clearTimeout(debounceTimeoutRef.current);
-                    debounceTimeoutRef.current = null;
-                }
-                return;
-            }
-
-            // --- Existing Logic for scrubbing/paused ---
-
-            // 1. Immediate Slider Update for responsiveness
-            props.onStateChange?.(newState);
-
-            if (debounceTimeoutRef.current) {
-                clearTimeout(debounceTimeoutRef.current);
-            }
-
-            const prevStable = previousStateRef.current;
-            const sameTimelineStable =
-                prevStable &&
-                (prevStable.isNexrad
-                    ? newState.nexradTimestamp === prevStable.nexradTimestamp &&
-                      newState.nexradSite === prevStable.nexradSite &&
-                      newState.nexradProduct === prevStable.nexradProduct &&
-                      Number(newState.nexradTilt) === Number(prevStable.nexradTilt) &&
-                      newState.nexradDurationValue === prevStable.nexradDurationValue &&
-                      nexradObsTimelineSig(newState) === nexradObsTimelineSig(prevStable)
-                    : prevStable.isSatellite
-                      ? newState.satelliteTimestamp === prevStable.satelliteTimestamp &&
-                        newState.satelliteInstrumentId === prevStable.satelliteInstrumentId &&
-                        newState.satelliteSectorLabel === prevStable.satelliteSectorLabel &&
-                        newState.satelliteChannel === prevStable.satelliteChannel &&
-                        newState.satelliteDurationValue === prevStable.satelliteDurationValue &&
-                        satelliteObsTimelineSig(newState) === satelliteObsTimelineSig(prevStable)
-                      : newState.forecastHour === prevStable.forecastHour &&
-                        newState.mrmsTimestamp === prevStable.mrmsTimestamp);
-
-            const sameModeStable =
-                prevStable &&
-                (newState.isSatellite
-                    ? newState.satelliteInstrumentId === prevStable.satelliteInstrumentId &&
-                      newState.satelliteSectorLabel === prevStable.satelliteSectorLabel &&
-                      newState.satelliteChannel === prevStable.satelliteChannel
-                    : newState.model === prevStable.model && newState.isMRMS === prevStable.isMRMS);
-
-            // Opacity and Play state changes should be immediate for the native layer too
-            const isOpacityOnlyChange =
-                prevStable &&
-                sameTimelineStable &&
-                sameModeStable &&
-                newState.opacity !== prevStable.opacity &&
-                newState.variable === prevStable.variable &&
-                newState.units === prevStable.units;
-
-            const isPlayStateOnlyChange =
-                prevStable &&
-                sameTimelineStable &&
-                sameModeStable &&
-                newState.isPlaying !== prevStable.isPlaying &&
-                newState.variable === prevStable.variable &&
-                newState.units === prevStable.units &&
-                newState.opacity === prevStable.opacity;
-
-            if (isOpacityOnlyChange || isPlayStateOnlyChange || !previousStateRef.current) {
-                if (handleStateChangeRef.current) {
-                    handleStateChangeRef.current(newState);
-                }
-                return;
-            }
-
-            debounceTimeoutRef.current = setTimeout(() => {
-                if (handleStateChangeRef.current) {
-                    handleStateChangeRef.current(newState);
-                }
-                debounceTimeoutRef.current = null;
-            }, 16); // ~60fps map updates
-        };
-
-        core.on('state:change', stableHandler);
-
-        return () => {
-            core.off('state:change', stableHandler);
-            if (debounceTimeoutRef.current) {
-                clearTimeout(debounceTimeoutRef.current);
-            }
-            if (NEXRAD_NATIVE) {
-                nexradPreloadInteractionRef.current?.cancel?.();
-                nexradPreloadInteractionRef.current = null;
-                nexradControllerRef.current?.destroy();
-                nexradControllerRef.current = null;
-            }
-            if (SATELLITE_NATIVE) {
-                satelliteControllerRef.current?.destroy();
-                satelliteControllerRef.current = null;
-            }
-        };
-    }, [core, ensureNexradController, ensureSatelliteController]);
-
-    useEffect(() => {
-        return () => {
-            preloadedDataCache.current.clear(); // This drops JS references
-            hasInitialLoad.current = false;
-            lastProcessedState.current = null;
-            // Native cleanup
-            if (gridLayerRef.current && Platform.OS === 'ios') {
-                gridLayerRef.current.clearGpuCache();
-            }
-            if (NEXRAD_NATIVE) {
-                nexradPreloadInteractionRef.current?.cancel?.();
-                nexradPreloadInteractionRef.current = null;
-                nexradControllerRef.current?.destroy();
-                nexradControllerRef.current = null;
-            }
-            if (SATELLITE_NATIVE) {
-                satelliteControllerRef.current?.destroy();
-                satelliteControllerRef.current = null;
-            }
-        };
-    }, []);
-
-    const lastInspectorUpdateRef = useRef(0);
-    const INSPECTOR_THROTTLE_MS = 50;
-
-    useEffect(() => {
-        if (!core || !inspectorEnabled) {
-            return;
-        }
-
-        const handleMapMove = (center) => {
-            if (!center || !Array.isArray(center) || center.length !== 2) {
-                return;
-            }
-
-            // Throttle updates
-            const now = Date.now();
-            if (now - lastInspectorUpdateRef.current < INSPECTOR_THROTTLE_MS) {
-                return;
-            }
-            lastInspectorUpdateRef.current = now;
-
-            const [longitude, latitude] = center;
-
-            if (NEXRAD_NATIVE && core.state?.isNexrad) {
-                onInspect?.(getNexradInspectPayloadAtRef.current(longitude, latitude));
-                return;
-            }
-
-            void getValueAtPointRef.current(longitude, latitude).then((payload) => {
-                onInspect?.(payload);
-            });
-        };
-
-        core.on('map:move', handleMapMove);
-
-        if (context && context.getCenter) {
-            const center = context.getCenter();
-            if (center) {
-                handleMapMove(center);
-            }
-        }
-
-        return () => {
-            core.off('map:move', handleMapMove);
-        };
-    }, [inspectorEnabled, onInspect, core, context]);
-
-    useEffect(() => {
-        if (!core || !inspectorEnabled) {
-            return;
-        }
-
-        const triggerReinspection = () => {
-            const mapRef = mapRegistry.getMap();
-            const center = mapRef?._currentCenter;
-
-            if (center && Array.isArray(center) && center.length === 2) {
-                const [longitude, latitude] = center;
-
-                if (NEXRAD_NATIVE && core?.state?.isNexrad) {
-                    onInspect?.(getNexradInspectPayloadAtRef.current(longitude, latitude));
-                } else {
-                    getValueAtPointRef.current(longitude, latitude).then((payload) => {
-                        onInspect?.(payload);
-                    });
-                }
-            }
-        };
-
-        // Small delay to ensure data is loaded before re-inspecting
-        const timer = setTimeout(triggerReinspection, 100);
-
-        return () => clearTimeout(timer);
-    }, [
-        core?.state?.nexradTimestamp,
-        core?.state?.isNexrad,
-        core?.state?.nexradSite,
-        core?.state?.nexradProduct,
-        core?.state?.nexradTilt,
-        core?.state?.nexradDataSource,
-        core?.state?.nexradStormRelative,
-        core?.state?.variable,
-        core?.state?.model,
-        core?.state?.forecastHour,
-        core?.state?.mrmsTimestamp,
-        core?.state?.units,
-        core?.state?.opacity,
-        inspectorEnabled,
-        onInspect,
-    ]);
-
-    useEffect(() => {
-        if (!core) {
-            return;
-        }
-
-        const handleCameraChange = (center) => {
-            if (core && center) {
-                core.setMapCenter(center);
-            }
-        };
-
-        // Register with the global registry
-        mapRegistry.addCameraListener(handleCameraChange);
-
-        // Try to get initial center
-        const mapRef = mapRegistry.getMap();
-        if (mapRef?._currentCenter) {
-            handleCameraChange(mapRef._currentCenter);
-        }
-
-        return () => {
-            mapRegistry.removeCameraListener(handleCameraChange);
-        };
-    }, [core]);
-
-    useEffect(() => {
-        core.initialize({ autoRefresh: false }); // <-- add the argument
-        return () => {
-            core.destroy();
-        };
-    }, [core]);
-
-    const gridBelowId =
-        belowIDFromProps ??
-        context?.weatherBeforeLayerId ??
-        'AML_-_terrain';
-
-    return (
-        <>
-            <GridRenderLayer
-                ref={gridLayerRef}
-                opacity={renderProps.opacity}
-                dataRange={renderProps.dataRange}
-                belowID={gridBelowId}
-            />
-            {NEXRAD_NATIVE ? <NexradRadarLayer ref={nexradLayerRef} belowID={gridBelowId} /> : null}
-            {SATELLITE_NATIVE ? <SatelliteLayer ref={satelliteLayerRef} belowID={gridBelowId} /> : null}
-            <NwsAlertsOverlay core={core} watchesWarnings={watchesWarningsOptions} onNwsAlertClick={onNwsAlertClick} />
-            {nexradSitesMapVisible ? (
-                <NexradSitesMapLayer
-                    visible
-                    belowLayerID={gridBelowId}
-                    onSelectSite={(siteId) => void core.setNexradSite(siteId)}
-                />
-            ) : null}
-        </>
-    );
-});
-
-WeatherLayerManager.getAvailableVariables = (options) => {
-    if (!options || !options.apiKey) {
-        return [];
-    }
-    const core = new AguaceroCore({ apiKey: options.apiKey });
-    return core.getAvailableVariables('mrms');
+// packages/react-native/src/WeatherLayerManager.js
+
+import {
+    AguaceroCore,
+    DICTIONARIES,
+    formatTimelineDurationValue,
+    getUnitConversionFunction,
+    parseTimelineDurationHours,
+} from '@aguacerowx/javascript-sdk';
+import { fromByteArray } from 'base64-js';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { NativeModules, Platform, UIManager } from 'react-native';
+import { AguaceroContext } from './AguaceroContext';
+import { GridRenderLayer } from './GridRenderLayer';
+import NexradRadarLayer from './NexradRadarLayer';
+import SatelliteLayer from './SatelliteLayer';
+import { NexradSitesMapLayer } from './NexradSitesMapLayer';
+import { NexradAndroidController } from './nexrad/nexradAndroidController';
+import { SatelliteAndroidController } from './satellite/satelliteAndroidController';
+import NwsAlertsOverlay from './nws/NwsAlertsOverlay';
+import { mapRegistry } from './MapRegistry';
+import { satBridgeWarn } from './satelliteBridgeDiag';
+import {
+    augmentProcessFrameOptionsForDebug,
+    aguaceroDebugWarn,
+    configureAguaceroRnDebug,
+    getAguaceroAuthDiagnosticSnapshot,
+    isAguaceroRnDebugEnabled,
+} from './aguaceroRnDebug';
+import { installAguaceroCoreDebugHooks, logProcessFrameAuthMismatch } from './aguaceroCoreDebugHooks';
+import { resolveGridRequestSiteOrigin } from './gridCdnAuth';
+import { auditSatelliteIntegration, installSatelliteDiagnosticListener } from './satelliteRnDebug';
+
+const NEXRAD_NATIVE = Platform.OS === 'android' || Platform.OS === 'ios';
+const SATELLITE_NATIVE = Platform.OS === 'android' || Platform.OS === 'ios';
+
+satBridgeWarn('SDK fingerprint', {
+    platform: Platform.OS,
+    SATELLITE_NATIVE,
+    note: 'If you never see sat-bridge logs, the app bundle is not loading this WeatherLayerManager build.',
+});
+
+/**
+ * Same filtering as {@link AguaceroCore#_getFilteredMrmsTimestampsForVariable} for older cores
+ * where that helper (or {@code setMRMSDurationValue}) is missing from the prototype chain.
+ */
+function getFilteredMrmsTimestampsCompat(core, variable) {
+    const raw = core.mrmsStatus?.[variable];
+    if (!raw || !raw.length) return [];
+    const hours = parseTimelineDurationHours(core.state.mrmsDurationValue);
+    let list = [...raw]
+        .map((t) => Number(t))
+        .filter((t) => !Number.isNaN(t))
+        .sort((a, b) => a - b);
+    if (hours > 0 && list.length > 0) {
+        const latest = list[list.length - 1];
+        const cutoff = latest - hours * 3600;
+        list = list.filter((t) => t >= cutoff);
+    }
+    return list;
+}
+
+/**
+ * Older npm installs may resolve an {@link AguaceroCore} without {@code setMRMSDurationValue} /
+ * {@code setNexradDurationValue}; mirror those methods here using the same logic as the SDK.
+ */
+async function applyMrmsDurationValue(core, value) {
+    if (typeof core.setMRMSDurationValue === 'function') {
+        await core.setMRMSDurationValue(value);
+        return;
+    }
+    const v = formatTimelineDurationValue(value);
+    await core.setState({ mrmsDurationValue: v });
+    if (!core.state.isMRMS || !core.state.variable) return;
+    const filtered =
+        typeof core._getFilteredMrmsTimestampsForVariable === 'function'
+            ? core._getFilteredMrmsTimestampsForVariable(core.state.variable)
+            : getFilteredMrmsTimestampsCompat(core, core.state.variable);
+    if (!filtered || filtered.length === 0) return;
+    const curN = core.state.mrmsTimestamp == null ? null : Number(core.state.mrmsTimestamp);
+    if (curN == null || !filtered.includes(curN)) {
+        await core.setState({ mrmsTimestamp: filtered[filtered.length - 1] });
+    }
+}
+
+async function applyNexradDurationValue(core, value) {
+    if (typeof core.setNexradDurationValue === 'function') {
+        await core.setNexradDurationValue(value);
+        return;
+    }
+    const v = formatTimelineDurationValue(value);
+    await core.setState({ nexradDurationValue: v });
+    if (!core.state.isNexrad || !core.state.nexradSite) return;
+    if (typeof core.refreshNexradTimes === 'function') {
+        await core.refreshNexradTimes();
+    }
+    const nk = typeof core._nexradTimesCacheKey === 'function' ? core._nexradTimesCacheKey() : null;
+    const raw = nk ? core.nexradTimesByStation?.[nk]?.unixTimes || [] : [];
+    const filtered =
+        typeof core._getFilteredNexradTimestampsForVariable === 'function'
+            ? core._getFilteredNexradTimestampsForVariable(raw)
+            : [...raw].map((t) => Number(t)).filter((t) => !Number.isNaN(t)).sort((a, b) => a - b);
+    if (!filtered || filtered.length === 0) return;
+    const curN = core.state.nexradTimestamp == null ? null : Number(core.state.nexradTimestamp);
+    if (curN == null || !filtered.includes(curN)) {
+        await core.setState({ nexradTimestamp: filtered[filtered.length - 1] });
+    }
+}
+
+function findLatestModelRun(modelsData, modelName) {
+    const model = modelsData?.[modelName];
+    if (!model) return null;
+    const availableDates = Object.keys(model).sort((a, b) => b.localeCompare(a));
+    for (const date of availableDates) {
+        const runs = model[date];
+        if (!runs) continue;
+        const availableRuns = Object.keys(runs).sort((a, b) => b.localeCompare(a));
+        if (availableRuns.length > 0) return { date: date, run: availableRuns[0] };
+    }
+    return null;
+}
+const { WeatherFrameProcessorModule, InspectorModule } = NativeModules;
+
+/**
+ * `state:change` payloads can briefly have {@code isNexrad} before {@code nexradSite} / {@code nexradTimestamp}
+ * are populated; {@code core.state} is updated first. Merge so readouts match the active radar.
+ *
+ * @param {object | null} emitted
+ * @param {object | null} coreState
+ */
+function mergeNexradEmittedWithCore(emitted, coreState) {
+    if (!emitted || !coreState) return null;
+    return {
+        ...emitted,
+        nexradSite: coreState.nexradSite ?? emitted.nexradSite,
+        nexradTimestamp: coreState.nexradTimestamp ?? emitted.nexradTimestamp,
+        nexradProduct: coreState.nexradProduct ?? emitted.nexradProduct,
+        nexradTilt: coreState.nexradTilt ?? emitted.nexradTilt,
+        nexradDataSource: coreState.nexradDataSource ?? emitted.nexradDataSource,
+        nexradStormRelative: coreState.nexradStormRelative ?? emitted.nexradStormRelative,
+    };
+}
+
+/**
+ * Compact timeline identity for deduping {@code state:change}: extending the NEXRAD/satellite window
+ * often keeps the same selected unix — without this, {@link WeatherLayerManager} short-circuits and
+ * never calls native {@code sync} / preload with the expanded frame list.
+ */
+function nexradObsTimelineSig(state) {
+    const arr = [...(state?.availableNexradTimestamps || [])]
+        .map(Number)
+        .filter((t) => Number.isFinite(t))
+        .sort((a, b) => a - b);
+    if (!arr.length) return '0';
+    return `${arr.length}:${arr[0]}:${arr[arr.length - 1]}`;
+}
+
+function satelliteObsTimelineSig(state) {
+    const keys = Object.keys(state?.satelliteTimeToFileMap || {})
+        .map(Number)
+        .filter((t) => Number.isFinite(t))
+        .sort((a, b) => a - b);
+    if (!keys.length) return '0';
+    return `${keys.length}:${keys[0]}:${keys[keys.length - 1]}`;
+}
+
+/** True when {@link WeatherLayerManager} `debug` / {@link configureAguaceroRnDebug}, or legacy `__AGUACERO_WX_GRID_DEBUG__`. */
+function wxGridDebugEnabled() {
+    if (isAguaceroRnDebugEnabled()) return true;
+    try {
+        if (typeof __DEV__ !== 'undefined' && __DEV__) return true;
+        return Boolean(typeof globalThis !== 'undefined' && globalThis.__AGUACERO_WX_GRID_DEBUG__);
+    } catch {
+        return false;
+    }
+}
+
+function wxGridVerbose(tag, detail) {
+    if (!wxGridDebugEnabled()) return;
+    if (detail !== undefined) {
+        console.log(`[AguaceroWX][grid][${tag}]`, detail);
+    } else {
+        console.log(`[AguaceroWX][grid][${tag}]`);
+    }
+}
+
+/** Always logs (Metro / device logs) — use for failures and unusual early exits. */
+function wxGridWarn(tag, detail) {
+    if (detail !== undefined) {
+        console.warn(`[AguaceroWX][grid][${tag}]`, detail);
+    } else {
+        console.warn(`[AguaceroWX][grid][${tag}]`);
+    }
+}
+
+/**
+ * Native {@code processFrame} must mirror browser/AguaceroCore grid auth: encoded {@code apiKey}
+ * in the query string and optional {@code Origin} / {@code Referer} (many CloudFront setups require them).
+ *
+ * @param {string} baseGridUrl
+ * @param {string} resourcePath
+ * @param {string} apiKey
+ * @param {string | null | undefined} bundleId
+ * @param {string | undefined} gridRequestSiteOrigin - prop or core origin (see {@link resolveGridRequestSiteOrigin})
+ * @param {import('@aguacerowx/javascript-sdk').AguaceroCore | null | undefined} core
+ */
+function buildGridFrameProcessOptions(baseGridUrl, resourcePath, apiKey, bundleId, gridRequestSiteOrigin, core) {
+    const trimmedKey = typeof apiKey === 'string' ? apiKey.trim() : apiKey;
+    const url = `${baseGridUrl}${resourcePath}?apiKey=${encodeURIComponent(trimmedKey || '')}`;
+    const options = { url, apiKey: trimmedKey, bundleId };
+    const origin = resolveGridRequestSiteOrigin(gridRequestSiteOrigin, core);
+    if (origin) {
+        options.gridRequestSiteOrigin = origin;
+    }
+    return options;
+}
+
+/**
+ * A helper function to generate the raw RGBA byte buffer for the colormap texture.
+ */
+const _generateColormapBytes = (colormap) => {
+    const width = 256;
+    const data = new Uint8Array(width * 4);
+    const stops = colormap.reduce((acc, _, i) => (i % 2 === 0 ? [...acc, { value: colormap[i], color: colormap[i + 1] }] : acc), []);
+
+    if (stops.length === 0) return data;
+
+    const minVal = stops[0].value;
+    const maxVal = stops[stops.length - 1].value;
+
+    const hexToRgb = (hex) => {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return [r, g, b];
+    };
+
+    for (let i = 0; i < width; i++) {
+        const val = minVal + (i / (width - 1)) * (maxVal - minVal);
+        let lower = stops[0];
+        let upper = stops[stops.length - 1];
+        for (let j = 0; j < stops.length - 1; j++) {
+            if (val >= stops[j].value && val <= stops[j + 1].value) {
+                lower = stops[j];
+                upper = stops[j + 1];
+                break;
+            }
+        }
+        const t = (val - lower.value) / (upper.value - lower.value || 1);
+        const lowerRgb = hexToRgb(lower.color);
+        const upperRgb = hexToRgb(upper.color);
+        const rgb = lowerRgb.map((c, idx) => c * (1 - t) + upperRgb[idx] * t);
+
+        const offset = i * 4;
+        data[offset + 0] = Math.round(rgb[0]);
+        data[offset + 1] = Math.round(rgb[1]);
+        data[offset + 2] = Math.round(rgb[2]);
+        data[offset + 3] = 255;
+    }
+    return data;
+};
+
+AguaceroCore.prototype.setMapCenter = function (center) {
+    this.emit('map:move', center);
+};
+
+export const WeatherLayerManager = forwardRef((props, ref) => {
+    const {
+        inspectorEnabled,
+        onInspect,
+        apiKey,
+        customColormaps,
+        initialMode,
+        initialVariable,
+        /** GOES instrument when {@link initialMode} is `"satellite"` (default `GOES19-EAST`). */
+        initialSatelliteId,
+        /** Sector token or label when {@link initialMode} is `"satellite"` (default `conus` → GOES-EAST CONUS). */
+        initialSatelliteSector,
+        /** Product/band when {@link initialMode} is `"satellite"` (e.g. `geocolor`, `C13`). Falls back to {@link initialVariable}. */
+        initialSatelliteProduct,
+        autoRefresh,
+        autoRefreshInterval,
+        initialModel,
+        belowID: belowIDFromProps,
+        interpolateNexradColormap = true,
+        nexradGateSmoothing = false,
+        watchesWarnings: watchesWarningsProp,
+        onNwsAlertClick,
+        /** Same semantics as mapsgl / AguaceroCore: Origin + Referer for grid CDN (required by many CloudFront rules). */
+        gridRequestSiteOrigin,
+        /** When true, logs auth/HTTP diagnostics under `[AguaceroRN][debug]` (Metro / Logcat / Xcode). */
+        debug = false,
+        ...restProps
+    } = props;
+
+    useEffect(() => {
+        configureAguaceroRnDebug({ enabled: Boolean(debug) });
+    }, [debug]);
+
+    useEffect(() => {
+        if (!debug) return undefined;
+        auditSatelliteIntegration({ core, satelliteLayerRef });
+        return installSatelliteDiagnosticListener();
+    }, [debug, core]);
+    const context = useContext(AguaceroContext);
+
+    // Create the core here instead of getting it from context
+    const core = useMemo(
+        () =>
+            new AguaceroCore({
+                apiKey: apiKey,
+                customColormaps: customColormaps,
+                gridRequestSiteOrigin: gridRequestSiteOrigin,
+                layerOptions: {
+                    mode: initialMode,
+                    variable: initialVariable,
+                    model: initialModel,
+                    ...(initialMode === 'satellite'
+                        ? {
+                              satelliteId: initialSatelliteId,
+                              sector: initialSatelliteSector,
+                              satelliteProduct: initialSatelliteProduct ?? initialVariable,
+                          }
+                        : {}),
+                },
+                autoRefresh: false, // <-- add this
+            }),
+        [apiKey, gridRequestSiteOrigin],
+    );
+
+    useEffect(() => {
+        if (!core) return;
+        installAguaceroCoreDebugHooks(core, {
+            gridRequestSiteOriginProp: gridRequestSiteOrigin ?? null,
+            debugProp: Boolean(debug),
+        });
+        if (isAguaceroRnDebugEnabled() && !apiKey) {
+            aguaceroDebugWarn('WeatherLayerManager.missingApiKey', {
+                hint: 'apiKey prop is empty — all CDN requests will fail or return 403',
+            });
+        }
+        if (isAguaceroRnDebugEnabled() && apiKey && !gridRequestSiteOrigin) {
+            aguaceroDebugWarn('WeatherLayerManager.missingGridOrigin', {
+                hint: 'gridRequestSiteOrigin is not set — CloudFront often returns 403 without Origin/Referer on React Native',
+                snapshot: getAguaceroAuthDiagnosticSnapshot(core),
+            });
+        }
+    }, [core, debug, gridRequestSiteOrigin, apiKey]);
+
+    const [watchesWarningsOptions, setWatchesWarningsOptions] = useState(() => ({
+        alertInteractionEnabled: true,
+        ...(watchesWarningsProp ?? {}),
+    }));
+
+    useEffect(() => {
+        setWatchesWarningsOptions((prev) => ({
+            ...prev,
+            ...(watchesWarningsProp ?? {}),
+        }));
+    }, [watchesWarningsProp]);
+
+    useEffect(() => {
+        setNexradSitesMapVisible(Boolean(core.state.isNexrad && core.state.nexradShowSitesPicker !== false));
+    }, [core]);
+
+    const gridLayerRef = useRef(null);
+    const nexradLayerRef = useRef(null);
+    const nexradControllerRef = useRef(null);
+    /** Latest {@code state:change} payload (includes {@code colormap}, NEXRAD maps) — required for readouts; {@code core.state} omits those. */
+    const lastEmittedStateForInspectRef = useRef(null);
+    const satelliteLayerRef = useRef(null);
+    const satelliteControllerRef = useRef(null);
+    /** @type {React.MutableRefObject<{ cancel?: () => void } | null>} */
+    const nexradPreloadInteractionRef = useRef(null);
+    const currentGridDataRef = useRef(null);
+    const autoRefreshIntervalId = useRef(null);
+
+    const ensureNexradController = useCallback(() => {
+        if (!NEXRAD_NATIVE) return null;
+        if (!nexradControllerRef.current) {
+            nexradControllerRef.current = new NexradAndroidController(core, nexradLayerRef, {
+                interpolateNexradColormap,
+                nexradGateSmoothing,
+            });
+        }
+        return nexradControllerRef.current;
+    }, [core, interpolateNexradColormap, nexradGateSmoothing]);
+
+    /** Synchronous NEXRAD readout (mapsgl-style); no await — avoids jank on map move. */
+    const getNexradInspectPayloadAt = useCallback(
+        (lng, lat) => {
+            if (!NEXRAD_NATIVE || !core?.state?.isNexrad) return null;
+            const ctl = ensureNexradController();
+            if (!ctl) {
+                return null;
+            }
+            const emitted = lastEmittedStateForInspectRef.current;
+            if (!emitted) {
+                return null;
+            }
+            const st = mergeNexradEmittedWithCore(emitted, core.state);
+            if (!st?.nexradSite || st.nexradTimestamp == null) {
+                return null;
+            }
+            return ctl.getInspectPayload(lng, lat, st) ?? null;
+        },
+        [core, ensureNexradController],
+    );
+
+    const ensureSatelliteController = useCallback(() => {
+        if (!SATELLITE_NATIVE) return null;
+        if (!satelliteControllerRef.current) {
+            satelliteControllerRef.current = new SatelliteAndroidController(core, satelliteLayerRef);
+        }
+        return satelliteControllerRef.current;
+    }, [core]);
+
+    useEffect(() => {
+        if (!SATELLITE_NATIVE) return;
+        let gridCmdKeys = [];
+        let satCmdKeys = [];
+        try {
+            gridCmdKeys = Object.keys(UIManager.getViewManagerConfig?.('GridRenderLayer')?.Commands ?? {});
+        } catch {
+            gridCmdKeys = ['error'];
+        }
+        try {
+            satCmdKeys = Object.keys(UIManager.getViewManagerConfig?.('SatelliteLayer')?.Commands ?? {});
+        } catch {
+            satCmdKeys = ['error'];
+        }
+        satBridgeWarn('mount UIManager command registration', {
+            GridRenderLayerCommands: gridCmdKeys,
+            SatelliteLayerCommands: satCmdKeys,
+            satelliteMissing: satCmdKeys.length === 0,
+        });
+    }, []);
+
+    useEffect(() => {
+        const ctl = nexradControllerRef.current;
+        if (NEXRAD_NATIVE && ctl) {
+            ctl.updateStyleOptions({
+                interpolateNexradColormap,
+                nexradGateSmoothing,
+            });
+            if (core?.state?.isNexrad) {
+                ctl.applyStyleFromState(core.state);
+            }
+        }
+    }, [interpolateNexradColormap, nexradGateSmoothing, core]);
+
+    // Cache for preloaded grid data - stores the processed data ready for GPU upload
+    const preloadedDataCache = useRef(new Map());
+
+    // Store geometry and colormap that don't change with forecast hour
+    const cachedGeometry = useRef(null);
+    const cachedColormap = useRef(null);
+    const cachedDataRange = useRef([0, 1]);
+
+    // Track if we've done the initial load
+    const hasInitialLoad = useRef(false);
+    const hasPreloadedRef = useRef(false);
+    /** Bumped on {@code cancelAllFrames} / full reload so stale {@code processFrame} results are ignored. */
+    const preloadGenerationRef = useRef(0);
+
+    // Track the last state we processed to avoid redundant updates
+    const lastProcessedState = useRef(null);
+    const previousStateRef = useRef(null);
+
+    const [renderProps, setRenderProps] = useState({
+        opacity: 1,
+        dataRange: [0, 1]
+    });
+    /** Drives {@link NexradSitesMapLayer}; must re-render when core NEXRAD / picker flags change. */
+    const [nexradSitesMapVisible, setNexradSitesMapVisible] = useState(false);
+
+    useImperativeHandle(ref, () => {
+        const setAutoRefresh = (enabled, intervalSeconds) => {
+            if (autoRefreshIntervalId.current) {
+                clearInterval(autoRefreshIntervalId.current);
+                autoRefreshIntervalId.current = null;
+            }
+            if (enabled) {
+                const effectiveInterval = (intervalSeconds || autoRefreshInterval || 30) * 1000;
+                // Run once immediately, then start the interval
+                _checkForUpdates();
+                autoRefreshIntervalId.current = setInterval(_checkForUpdates, effectiveInterval);
+            }
+        };
+        return {
+            play: () => {
+                core.play();
+            },
+            pause: () => {
+                core.pause();
+            },
+            togglePlay: () => {
+                core.togglePlay();
+            },
+            step: (direction) => {
+                core.step(direction);
+            },
+            setPlaybackSpeed: (speed) => {
+                if (speed > 0) {
+                    core.playbackSpeed = speed;
+                    if (core.isPlaying) {
+                        core.pause();
+                        core.play();
+                    }
+                }
+            },
+            setOpacity: (opacity) => core.setOpacity(opacity),
+            setUnits: (units) => core.setUnits(units),
+            switchMode: (options) => core.switchMode(options),
+            getAvailableVariables: (model) => core.getAvailableVariables(model),
+            getVariableDisplayName: (code) => core.getVariableDisplayName(code),
+            setRun: (runString) => core.setState({ run: runString.split(':')[1] }),
+            setState: (newState) => core.setState(newState),
+            setMRMSTimestamp: (timestamp) => core.setMRMSTimestamp(timestamp),
+            setMRMSDurationValue: (value) => applyMrmsDurationValue(core, value),
+            setNexradSite: (siteId) => core.setNexradSite(siteId),
+            setNexradProduct: (product) => core.setNexradProduct(product),
+            setNexradTilt: (tilt) => core.setNexradTilt(tilt),
+            setNexradStormRelative: (enabled) => core.setNexradStormRelative(enabled),
+            setNexradTimestamp: (ts) => core.setNexradTimestamp(ts),
+            setNexradDurationValue: (value) => applyNexradDurationValue(core, value),
+            setSatelliteTimestamp: (timestamp) => core.setSatelliteTimestamp(timestamp),
+            setSatelliteDurationValue: (value) => core.setSatelliteDurationValue(value),
+            setSatelliteSelection: (opts) => core.setSatelliteSelection(opts),
+            setShaderSmoothing: async (enabled) => {
+                await core.setShaderSmoothing(enabled);
+                if (gridLayerRef.current) {
+                    gridLayerRef.current.setSmoothing(enabled);
+                }
+            },
+            setSmoothing: (enabled) => {
+                if (gridLayerRef.current) {
+                    gridLayerRef.current.setSmoothing(enabled);
+                }
+            },
+            setAutoRefresh,
+            refreshData: () => {
+                _checkForUpdates();
+            },
+            /**
+             * NWS watches/warnings (native map, iOS + Android): same options as mapsgl {@link WeatherLayerManager#configureWatchesWarnings}.
+             * @param {object} partial
+             */
+            configureWatchesWarnings: (partial) => {
+                setWatchesWarningsOptions((prev) => ({ ...prev, ...partial }));
+            },
+        };
+    }, [core, autoRefreshInterval, _checkForUpdates]);
+
+    const preloadAllFramesToDisk = async (state) => {
+        if (state.isNexrad || state.isSatellite) {
+            hasPreloadedRef.current = false;
+            wxGridVerbose('preloadSkip', { reason: 'nexrad_or_satellite' });
+            return;
+        }
+
+        if (hasPreloadedRef.current) {
+            wxGridVerbose('preloadSkip', { reason: 'hasPreloadedRef_gate', isMRMS: state.isMRMS, variable: state.variable });
+            return;
+        }
+
+        const { isMRMS, model, date, run, variable, units, availableHours, availableTimestamps, forecastHour, mrmsTimestamp } = state;
+
+        // CRITICAL: Don't start preloading if we don't have a valid current frame
+        if (isMRMS && (mrmsTimestamp == null || !availableTimestamps || availableTimestamps.length === 0)) {
+            hasPreloadedRef.current = false;
+            wxGridWarn('preloadAbort', {
+                reason: 'mrms_missing_frame_or_timestamps',
+                mrmsTimestamp,
+                timestampCount: availableTimestamps?.length ?? 0,
+                variable,
+            });
+            return;
+        }
+
+        if (!isMRMS && (forecastHour == null || !availableHours || availableHours.length === 0)) {
+            hasPreloadedRef.current = false;
+            wxGridWarn('preloadAbort', {
+                reason: 'model_missing_hour_or_hours',
+                forecastHour,
+                hourCount: availableHours?.length ?? 0,
+                model,
+                variable,
+            });
+            return;
+        }
+
+        // Only mark as "has preloaded" after validation passes
+        hasPreloadedRef.current = true;
+        const generation = preloadGenerationRef.current;
+        const isStaleGeneration = () => generation !== preloadGenerationRef.current;
+
+        wxGridVerbose('preloadStart', {
+            isMRMS,
+            model,
+            date,
+            run,
+            variable,
+            mrmsTimestamp: isMRMS ? mrmsTimestamp : undefined,
+            forecastHour: !isMRMS ? forecastHour : undefined,
+            baseGridUrl: core?.baseGridUrl,
+            hasApiKey: Boolean(core?.apiKey),
+            bundleId: core?.bundleId ?? null,
+            gridRequestSiteOrigin: gridRequestSiteOrigin || null,
+        });
+
+        // Fix the current forecast hour if it's invalid for this variable/model combo
+        let effectiveForecastHour = forecastHour;
+        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && forecastHour === 0) {
+            const validHours = availableHours.filter(hour => hour !== 0);
+            effectiveForecastHour = validHours.length > 0 ? validHours[0] : 0;
+        }
+
+        if (!cachedGeometry.current || !cachedColormap.current) {
+            const gridModel = isMRMS ? 'mrms' : model;
+            const { corners, gridDef } = core._getGridCornersAndDef(gridModel);
+            gridLayerRef.current.updateGeometry(corners, gridDef);
+            cachedGeometry.current = { model: gridModel, variable };
+
+            wxGridVerbose('geometryColormapInit', {
+                gridModel,
+                variable,
+                nx: gridDef?.grid_params?.nx,
+                ny: gridDef?.grid_params?.ny,
+            });
+
+            const { colormap, baseUnit } = core._getColormapForVariable(variable);
+            const toUnit = core._getTargetUnit(baseUnit, units);
+            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+            let dataRange;
+            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
+                dataRange = isMRMS ? [5, 380] : [5, 380];
+            } else {
+                dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+            }
+            const colormapBytes = _generateColormapBytes(finalColormap);
+            const colormapAsBase64 = fromByteArray(colormapBytes);
+
+            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+            cachedColormap.current = { key: `${variable}-${units}` };
+            cachedDataRange.current = dataRange;
+
+            setRenderProps({ opacity: state.opacity, dataRange: dataRange });
+            hasInitialLoad.current = true;
+        }
+
+        // Apply the same filtering logic as in AguaceroCore._emitStateChange
+        let filteredHours = availableHours;
+        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && availableHours && availableHours.length > 0) {
+            filteredHours = availableHours.filter(hour => hour !== 0);
+        }
+
+        const allFrames = isMRMS ? availableTimestamps : filteredHours;
+        if (!allFrames || allFrames.length === 0) {
+            hasPreloadedRef.current = false;
+            wxGridWarn('preloadAbort', { reason: 'no_frames_after_filter', isMRMS, variable });
+            return;
+        }
+
+        const currentFrame = isMRMS ? mrmsTimestamp : effectiveForecastHour;
+
+        // Double-check currentFrame is valid
+        if (currentFrame == null) {
+            hasPreloadedRef.current = false;
+            wxGridWarn('preloadAbort', { reason: 'currentFrame_null', isMRMS, variable });
+            return;
+        }
+
+        // Reverse the frame order to load from last to first
+        const reversedFrames = [...allFrames].reverse();
+        const framesToPreload = reversedFrames.filter(frame => frame !== currentFrame);
+
+        const { corners, gridDef } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
+        const { nx, ny } = gridDef.grid_params;
+
+        // Load the current frame FIRST and WAIT for it before continuing
+        const currentCacheKey = isMRMS ? `mrms-${currentFrame}-${variable}` : `${model}-${date}-${run}-${currentFrame}-${variable}`;
+
+        if (!preloadedDataCache.current.has(currentCacheKey)) {
+            let resourcePath;
+            if (isMRMS) {
+                const frameDate = new Date(currentFrame * 1000);
+                const y = frameDate.getUTCFullYear();
+                const m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0');
+                const d = frameDate.getUTCDate().toString().padStart(2, '0');
+                resourcePath = `/grids/mrms/${y}${m}${d}/${currentFrame}/0/${variable}/0`;
+            } else {
+                resourcePath = `/grids/${model}/${date}/${run}/${currentFrame}/${variable}/0`;
+            }
+
+            const options = augmentProcessFrameOptionsForDebug(
+                buildGridFrameProcessOptions(
+                    core.baseGridUrl,
+                    resourcePath,
+                    core.apiKey,
+                    core.bundleId,
+                    gridRequestSiteOrigin,
+                    core,
+                ),
+                core,
+            );
+            logProcessFrameAuthMismatch(core, options, { phase: 'preloadCurrent', currentCacheKey });
+
+            try {
+                wxGridVerbose('processFrameRequest', { currentCacheKey, resourcePath, frame: currentFrame });
+                const result = await WeatherFrameProcessorModule.processFrame(options);
+
+                if (isStaleGeneration()) {
+                    wxGridVerbose('preloadCurrentFrameStale', { currentCacheKey, generation });
+                    return;
+                }
+
+                if (!result || !result.filePath) {
+                    hasPreloadedRef.current = false;
+                    wxGridWarn('preloadAbort', {
+                        reason: 'processFrame_empty_result',
+                        currentCacheKey,
+                        resultKeys: result ? Object.keys(result) : [],
+                    });
+                    return;
+                }
+
+                const { baseUnit } = core._getColormapForVariable(variable);
+
+                const toUnit = core._getTargetUnit(baseUnit, units);
+
+                const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
+                const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
+
+                let dataScale = result.scale;
+                let dataOffset = result.offset;
+
+                let convertedScale = dataScale;
+                let convertedOffset = dataOffset;
+
+                if (serverDataUnit !== baseUnit) {
+                    const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
+                    if (conversionFunc) {
+                        if (result.scaleType === 'sqrt') {
+                            const physicalAtOffset = dataOffset * dataOffset;
+                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                            convertedScale = newOffsetPlusScale - convertedOffset;
+                        } else {
+                            convertedOffset = conversionFunc(dataOffset);
+                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                            convertedScale = convertedOffsetPlusScale - convertedOffset;
+                        }
+                        dataScale = convertedScale;
+                        dataOffset = convertedOffset;
+                    }
+                }
+
+                if (baseUnit !== toUnit) {
+                    const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                    if (conversionFunc) {
+                        if (result.scaleType === 'sqrt') {
+                            const physicalAtOffset = dataOffset * dataOffset;
+                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                            convertedScale = newOffsetPlusScale - convertedOffset;
+                        } else {
+                            convertedOffset = conversionFunc(dataOffset);
+                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                            convertedScale = convertedOffsetPlusScale - convertedOffset;
+                        }
+                    }
+                }
+
+                const frameData = {
+                    filePath: result.filePath,
+                    nx, ny,
+                    scale: convertedScale,
+                    offset: convertedOffset,
+                    missing: result.missing,
+                    corners,
+                    gridDef,
+                    scaleType: result.scaleType,
+                    originalScale: result.scale,
+                    originalOffset: result.offset
+                };
+
+                preloadedDataCache.current.set(currentCacheKey, frameData);
+
+                // Update the GPU with the current frame
+                gridLayerRef.current.updateDataTextureFromFile(
+                    frameData.filePath,
+                    frameData.nx, frameData.ny,
+                    frameData.scale, frameData.offset, frameData.missing,
+                    frameData.scaleType
+                );
+
+                currentGridDataRef.current = {
+                    nx: frameData.nx,
+                    ny: frameData.ny,
+                    scale: frameData.scale,
+                    offset: frameData.offset,
+                    missing: frameData.missing,
+                    gridDef: frameData.gridDef,
+                    variable: variable,
+                    units: units,
+                    scaleType: frameData.scaleType
+                };
+
+                wxGridVerbose('preloadCurrentFrameOk', {
+                    currentCacheKey,
+                    nx: frameData.nx,
+                    ny: frameData.ny,
+                    scale: frameData.scale,
+                    offset: frameData.offset,
+                    filePathSuffix: String(frameData.filePath).split('/').pop(),
+                });
+            } catch (e) {
+                const cancelled =
+                    e &&
+                    (e.code === 'E_CANCELLED' ||
+                        e?.userInfo?.code === 'E_CANCELLED' ||
+                        (typeof e?.message === 'string' && e.message.includes('superseded')));
+                if (!cancelled) {
+                    hasPreloadedRef.current = false;
+                    const errDetail = {
+                        currentCacheKey,
+                        code: e?.code,
+                        message: e?.message,
+                        userInfo: e?.userInfo,
+                    };
+                    wxGridWarn('preloadProcessFrameError', errDetail);
+                    if (isAguaceroRnDebugEnabled()) {
+                        aguaceroDebugWarn('preloadProcessFrameError', {
+                            ...errDetail,
+                            auth: getAguaceroAuthDiagnosticSnapshot(core),
+                            is403:
+                                e?.code === 'HTTP_ERROR' &&
+                                typeof e?.message === 'string' &&
+                                e.message.includes('403'),
+                        });
+                    }
+                } else {
+                    wxGridVerbose('preloadProcessFrameCancelled', { currentCacheKey });
+                }
+            }
+        }
+
+        // NOW preload the rest of the frames asynchronously
+        framesToPreload.forEach((frame) => {
+            const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
+            if (preloadedDataCache.current.has(cacheKey)) {
+                return;
+            }
+
+            let resourcePath;
+            if (isMRMS) {
+                const frameDate = new Date(frame * 1000);
+                const y = frameDate.getUTCFullYear();
+                const m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0');
+                const d = frameDate.getUTCDate().toString().padStart(2, '0');
+                resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${variable}/0`;
+            } else {
+                resourcePath = `/grids/${model}/${date}/${run}/${frame}/${variable}/0`;
+            }
+
+            const options = augmentProcessFrameOptionsForDebug(
+                buildGridFrameProcessOptions(
+                    core.baseGridUrl,
+                    resourcePath,
+                    core.apiKey,
+                    core.bundleId,
+                    gridRequestSiteOrigin,
+                    core,
+                ),
+                core,
+            );
+            logProcessFrameAuthMismatch(core, options, { phase: 'preloadBackground', cacheKey });
+
+            WeatherFrameProcessorModule.processFrame(options)
+                .then(result => {
+                    if (isStaleGeneration()) {
+                        return;
+                    }
+                    if (!result || !result.filePath) {
+                        return;
+                    }
+
+                    // ADD: Same two-step conversion as the current frame
+                    const { baseUnit } = core._getColormapForVariable(variable);
+                    const toUnit = core._getTargetUnit(baseUnit, units);
+                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
+                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
+
+                    let dataScale = result.scale;
+                    let dataOffset = result.offset;
+
+                    let convertedScale = dataScale;
+                    let convertedOffset = dataOffset;
+
+                    // Step 1: Convert from server unit to colormap base unit
+                    if (serverDataUnit !== baseUnit) {
+                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
+                        if (conversionFunc) {
+                            if (result.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                convertedScale = newOffsetPlusScale - convertedOffset;
+                            } else {
+                                convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                convertedScale = convertedOffsetPlusScale - convertedOffset;
+                            }
+                            dataScale = convertedScale;
+                            dataOffset = convertedOffset;
+                        }
+                    }
+
+                    // Step 2: Convert from colormap base unit to target display unit
+                    if (baseUnit !== toUnit) {
+                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                        if (conversionFunc) {
+                            if (result.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                convertedScale = newOffsetPlusScale - convertedOffset;
+                            } else {
+                                convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                convertedScale = convertedOffsetPlusScale - convertedOffset;
+                            }
+                        }
+                    }
+
+                    const frameData = {
+                        filePath: result.filePath,
+                        nx, ny,
+                        scale: convertedScale,
+                        offset: convertedOffset,
+                        missing: result.missing,
+                        corners,
+                        gridDef,
+                        scaleType: result.scaleType,
+                        originalScale: result.scale,
+                        originalOffset: result.offset
+                    };
+
+                    preloadedDataCache.current.set(cacheKey, frameData);
+
+                    if (Platform.OS === 'ios' && gridLayerRef.current.primeGpuCache) {
+                        const frameInfoForGpu = {
+                            [cacheKey]: {
+                                filePath: frameData.filePath,
+                                nx: frameData.nx,
+                                ny: frameData.ny,
+                                scale: frameData.scale,
+                                offset: frameData.offset,
+                                missing: frameData.missing,
+                                scaleType: frameData.scaleType || 'linear',
+                                originalScale: frameData.originalScale,
+                                originalOffset: frameData.originalOffset
+                            }
+                        };
+                        gridLayerRef.current.primeGpuCache(frameInfoForGpu);
+                    }
+                })
+                .catch((e) => {
+                    const cancelled =
+                        e &&
+                        (e.code === 'E_CANCELLED' ||
+                            e?.userInfo?.code === 'E_CANCELLED' ||
+                            (typeof e?.message === 'string' && e.message.includes('superseded')));
+                    if (!cancelled) {
+                        wxGridWarn('backgroundFrameError', { cacheKey, code: e?.code, message: e?.message });
+                    }
+                });
+        });
+    };
+
+    useEffect(() => {
+        // This effect manages the auto-refresh based on props
+        if (autoRefresh) {
+            const interval = (autoRefreshInterval || 30) * 1000;
+            _checkForUpdates(); // Run immediately on enable
+            autoRefreshIntervalId.current = setInterval(_checkForUpdates, interval);
+        }
+
+        // Cleanup function: this runs when the component unmounts or props change
+        return () => {
+            if (autoRefreshIntervalId.current) {
+                clearInterval(autoRefreshIntervalId.current);
+                autoRefreshIntervalId.current = null;
+            }
+        };
+    }, [autoRefresh, autoRefreshInterval, _checkForUpdates]);
+
+    const updateGPUWithCachedData = (state) => {
+        const { model, date, run, forecastHour, variable, units, isMRMS, mrmsTimestamp } = state;
+
+        const cacheKey = isMRMS
+            ? `mrms-${mrmsTimestamp}-${variable}`
+            : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+
+        if (Platform.OS === 'ios' && gridLayerRef.current.setActiveFrame) {
+            // Get the cached data BEFORE calling setActiveFrame
+            const cachedData = preloadedDataCache.current.get(cacheKey);
+
+            if (cachedData) {
+                currentGridDataRef.current = {
+                    nx: cachedData.nx,
+                    ny: cachedData.ny,
+                    scale: cachedData.scale,
+                    offset: cachedData.offset,
+                    missing: cachedData.missing,
+                    gridDef: cachedData.gridDef,
+                    variable: variable,
+                    units: units,
+                    scaleType: cachedData.scaleType
+                };
+            } else {
+                wxGridVerbose('gpuIOS_setActiveFrame_no_row', {
+                    cacheKey,
+                    cacheSize: preloadedDataCache.current.size,
+                });
+            }
+
+            gridLayerRef.current.setActiveFrame(cacheKey);
+            wxGridVerbose('gpuIOS_setActiveFrame', { cacheKey, hadCachedRow: Boolean(cachedData) });
+            return true;
+        }
+
+        const cachedData = preloadedDataCache.current.get(cacheKey);
+
+        if (!cachedData) {
+            wxGridWarn('updateGPUNoCache', {
+                cacheKey,
+                cacheSize: preloadedDataCache.current.size,
+                sampleKeys: Array.from(preloadedDataCache.current.keys()).slice(0, 5),
+            });
+            return false;
+        }
+
+        if (!gridLayerRef.current) {
+            wxGridWarn('updateGPUNoGridLayerRef', { cacheKey });
+            return false;
+        }
+
+        if (!cachedGeometry.current || cachedGeometry.current.model !== (isMRMS ? 'mrms' : model) || cachedGeometry.current.variable !== variable) {
+            gridLayerRef.current.updateGeometry(cachedData.corners, cachedData.gridDef);
+            cachedGeometry.current = { model: (isMRMS ? 'mrms' : model), variable };
+        }
+
+        const colormapKey = `${variable}-${units}`;
+        if (!cachedColormap.current || cachedColormap.current.key !== colormapKey) {
+            const { colormap, baseUnit } = core._getColormapForVariable(variable);
+            const toUnit = core._getTargetUnit(baseUnit, units);
+            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+            let dataRange;
+            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
+                if (isMRMS) {
+                    dataRange = [5, 380];
+                } else {
+                    dataRange = [5, 380];
+                }
+            } else {
+                dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+            }
+            const colormapBytes = _generateColormapBytes(finalColormap);
+            const colormapAsBase64 = fromByteArray(colormapBytes);
+
+            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+            cachedColormap.current = { key: colormapKey };
+            cachedDataRange.current = dataRange;
+
+            setRenderProps(prev => ({ ...prev, dataRange }));
+        }
+
+        if (cachedData.filePath) {
+            gridLayerRef.current.updateDataTextureFromFile(
+                cachedData.filePath,
+                cachedData.nx, cachedData.ny,
+                cachedData.scale, cachedData.offset, cachedData.missing,
+                cachedData.scaleType
+            );
+            currentGridDataRef.current = {
+                nx: cachedData.nx,
+                ny: cachedData.ny,
+                scale: cachedData.scale,
+                offset: cachedData.offset,
+                missing: cachedData.missing,
+                gridDef: cachedData.gridDef,
+                variable: variable,
+                units: units,
+                scaleType: cachedData.scaleType
+            };
+            wxGridVerbose('gpuUploadFromFile', {
+                cacheKey,
+                nx: cachedData.nx,
+                ny: cachedData.ny,
+                filePathSuffix: String(cachedData.filePath).split('/').pop(),
+            });
+        } else {
+            wxGridWarn('updateGPUNoFilePath', { cacheKey });
+            return false;
+        }
+
+        // Update inspector parameters for file-based data too
+        if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
+            gridLayerRef.current.updateDataParameters(cachedData.scale, cachedData.offset, cachedData.missing);
+        }
+        return true;
+    };
+
+    const handleStateChangeRef = useRef(null);
+    const debounceTimeoutRef = useRef(null);
+
+    useEffect(() => {
+        if (core && props.customColormaps) {
+            core.customColormaps = props.customColormaps;
+            // Trigger a re-render if we already have data loaded
+            if (hasInitialLoad.current) {
+                core._emitStateChange();
+            }
+        }
+    }, [core, props.customColormaps]);
+
+    const getValueAtPoint = async (lng, lat) => {
+        if (!core) {
+            return null;
+        }
+
+        if (NEXRAD_NATIVE && core.state?.isNexrad) {
+            return getNexradInspectPayloadAt(lng, lat);
+        }
+
+        // ADD THIS: Check if we have valid data before attempting inspection
+        if (!currentGridDataRef.current) {
+            return null;
+        }
+
+        try {
+            const gridIndices = core._getGridIndexFromLngLat(lng, lat);
+            if (!gridIndices) return null;
+
+            const { i, j } = gridIndices;
+
+            const value = await InspectorModule.getValueAtGridIndex(i, j);
+
+            if (value === null) {
+                return null;
+            }
+
+            const { colormap, baseUnit } = core._getColormapForVariable(core.state.variable);
+            const displayUnit = core._getTargetUnit(baseUnit, core.state.units);
+            const finalColormap = core._convertColormapUnits(colormap, baseUnit, displayUnit);
+            const minThreshold = finalColormap[0];
+
+            if (value < minThreshold) {
+                return null;
+            }
+
+            // Filter out values below the minimum threshold (matching shader behavior)
+            if (value < minThreshold) {
+                return null;
+            }
+
+            // Also check if value is NaN or effectively missing
+            if (!isFinite(value)) {
+                return null;
+            }
+
+            return {
+                value: value,
+                unit: displayUnit,
+                variable: {
+                    code: core.state.variable,
+                    name: core.getVariableDisplayName(core.state.variable)
+                },
+                lngLat: { lng, lat }
+            };
+        } catch {
+            return null;
+        }
+    };
+
+    const getValueAtPointRef = useRef(getValueAtPoint);
+    getValueAtPointRef.current = getValueAtPoint;
+    const getNexradInspectPayloadAtRef = useRef(getNexradInspectPayloadAt);
+    getNexradInspectPayloadAtRef.current = getNexradInspectPayloadAt;
+
+    const _checkForUpdates = useMemo(() => async () => {
+        if (!core) return;
+        const s = core.state;
+        const { isMRMS, isSatellite, isNexrad, model: currentModel, variable: currentVariable, date, run } = s;
+
+        if (isSatellite) {
+            const prevTimeline = core._computeSatelliteTimeline();
+            const prevTimes = [...(prevTimeline.unixTimes || [])]
+                .map((t) => Number(t))
+                .filter((t) => !Number.isNaN(t))
+                .sort((a, b) => a - b);
+            const prevMax = prevTimes.length ? prevTimes[prevTimes.length - 1] : null;
+            const curSat = s.satelliteTimestamp == null ? null : Number(s.satelliteTimestamp);
+
+            await core.fetchSatelliteListing(true);
+            core._emitStateChange();
+
+            const nextTimeline = core._computeSatelliteTimeline();
+            const nextTimes = [...(nextTimeline.unixTimes || [])]
+                .map((t) => Number(t))
+                .filter((t) => !Number.isNaN(t))
+                .sort((a, b) => a - b);
+            const newMax = nextTimes.length ? nextTimes[nextTimes.length - 1] : null;
+
+            if (prevMax != null && curSat != null && curSat === prevMax && newMax != null && newMax > prevMax) {
+                await core.setSatelliteTimestamp(newMax);
+            } else if (curSat != null && newMax != null && nextTimes.length && !nextTimes.includes(curSat)) {
+                await core.setSatelliteTimestamp(newMax);
+            }
+            return;
+        }
+
+        if (isNexrad && s.nexradSite) {
+            const nk = core._nexradTimesCacheKey();
+            const rawBefore = nk ? core.nexradTimesByStation[nk]?.unixTimes : [];
+            const filteredBefore = core._getFilteredNexradTimestampsForVariable(rawBefore || []);
+            const prevMax = filteredBefore.length ? filteredBefore[filteredBefore.length - 1] : null;
+            const curNx = s.nexradTimestamp == null ? null : Number(s.nexradTimestamp);
+
+            await core.refreshNexradTimes();
+
+            const rawAfter = nk ? core.nexradTimesByStation[nk]?.unixTimes : [];
+            const filteredAfter = core._getFilteredNexradTimestampsForVariable(rawAfter || []);
+            const newMax = filteredAfter.length ? filteredAfter[filteredAfter.length - 1] : null;
+
+            if (prevMax != null && curNx != null && curNx === prevMax && newMax != null && newMax > prevMax) {
+                await core.setNexradTimestamp(newMax);
+            } else if (curNx != null && newMax != null && filteredAfter.length && !filteredAfter.includes(curNx)) {
+                await core.setNexradTimestamp(newMax);
+            }
+            return;
+        }
+
+        if (isMRMS) {
+            // --- MRMS LOGIC (Keep existing logic) ---
+            const oldTimestamps = new Set(core.mrmsStatus?.[currentVariable] || []);
+            const mrmsStatus = await core.fetchMRMSStatus(true);
+            const newTimestamps = mrmsStatus?.[currentVariable] || [];
+            if (newTimestamps.length === 0) return;
+
+            const newTimestampsToPreload = newTimestamps.filter(ts => !oldTimestamps.has(ts));
+
+            if (newTimestampsToPreload.length > 0) {
+                core.mrmsStatus = mrmsStatus;
+                core._emitStateChange(); // Update UI slider without changing selection
+
+                // ... (Keep your existing preloading logic here) ...
+                const { corners, gridDef } = core._getGridCornersAndDef('mrms');
+                const { nx, ny } = gridDef.grid_params;
+
+                newTimestampsToPreload.forEach(frame => {
+                    const cacheKey = `mrms-${frame}-${currentVariable}`;
+                    if (preloadedDataCache.current.has(cacheKey)) return;
+
+                    const frameDate = new Date(frame * 1000);
+                    const y = frameDate.getUTCFullYear(), m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = frameDate.getUTCDate().toString().padStart(2, '0');
+                    const resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${currentVariable}/0`;
+                    const options = augmentProcessFrameOptionsForDebug(
+                        buildGridFrameProcessOptions(
+                            core.baseGridUrl,
+                            resourcePath,
+                            core.apiKey,
+                            core.bundleId,
+                            gridRequestSiteOrigin,
+                            core,
+                        ),
+                        core,
+                    );
+                    logProcessFrameAuthMismatch(core, options, { phase: 'mrmsRefresh', cacheKey });
+
+                    WeatherFrameProcessorModule.processFrame(options)
+                        .then(result => {
+                            if (!result || !result.filePath) return;
+                            const frameData = { filePath: result.filePath, nx, ny, scale: result.scale, offset: result.offset, missing: result.missing, corners, gridDef, scaleType: result.scaleType, originalScale: result.scale, originalOffset: result.offset };
+                            preloadedDataCache.current.set(cacheKey, frameData);
+                            if (Platform.OS === 'ios' && gridLayerRef.current?.primeGpuCache) {
+                                gridLayerRef.current.primeGpuCache({ [cacheKey]: frameData });
+                            }
+                        })
+                        .catch((e) => {
+                            const cancelled =
+                                e &&
+                                (e.code === 'E_CANCELLED' ||
+                                    e?.userInfo?.code === 'E_CANCELLED' ||
+                                    (typeof e?.message === 'string' && e.message.includes('superseded')));
+                            if (!cancelled) {
+                                wxGridWarn('mrmsRefreshFrameError', { cacheKey, code: e?.code, message: e?.message });
+                            }
+                        });
+                });
+
+                const newTimestampsSet = new Set(newTimestamps);
+                oldTimestamps.forEach(oldTs => {
+                    if (!newTimestampsSet.has(oldTs)) {
+                        const cacheKey = `mrms-${oldTs}-${currentVariable}`;
+                        preloadedDataCache.current.delete(cacheKey);
+                    }
+                });
+            }
+        } else {
+            const previousStatus = core.modelStatus;
+            const modelStatus = await core.fetchModelStatus(true);
+            const statusChanged = JSON.stringify(previousStatus) !== JSON.stringify(modelStatus);
+            if (statusChanged) {
+                core._emitStateChange();
+            }
+
+            const latestRun = findLatestModelRun(modelStatus, currentModel);
+            if (!latestRun) return;
+        }
+    }, [core]);
+
+    useEffect(() => {
+        if (!core) {
+            return;
+        }
+
+        const handleStateChange = (newState) => {
+            if (!previousStateRef.current) {
+                previousStateRef.current = core.state;
+            }
+
+            const variableChanged = !previousStateRef.current || newState.variable !== previousStateRef.current.variable;
+
+            if (variableChanged && gridLayerRef.current?.setVariable) {
+                gridLayerRef.current.setVariable(newState.variable);
+            }
+
+            const stateKey = newState.isNexrad
+                ? `nx-${newState.nexradSite}-${newState.nexradProduct}-${newState.nexradDataSource}-${newState.nexradTimestamp}-${newState.nexradTilt}-${newState.units}-${newState.model}-${newState.variable}-${newState.mrmsTimestamp}-${newState.forecastHour}-dur:${newState.nexradDurationValue ?? ''}-tl:${nexradObsTimelineSig(newState)}`
+                : newState.isSatellite
+                  ? `sat-${newState.satelliteInstrumentId}-${newState.satelliteSectorLabel}-${newState.satelliteChannel}-${newState.satelliteTimestamp}-${newState.variable}-${newState.units}-${newState.opacity}-dur:${newState.satelliteDurationValue ?? ''}-tl:${satelliteObsTimelineSig(newState)}`
+                  : `${newState.model}-${newState.variable}-${newState.date}-${newState.run}-${newState.forecastHour}-${newState.units}-${newState.mrmsTimestamp}`;
+
+            const sameTimeline = newState.isNexrad
+                ? newState.nexradTimestamp === previousStateRef.current?.nexradTimestamp &&
+                  newState.nexradSite === previousStateRef.current?.nexradSite &&
+                  newState.nexradProduct === previousStateRef.current?.nexradProduct &&
+                  Number(newState.nexradTilt) === Number(previousStateRef.current?.nexradTilt) &&
+                  newState.nexradDurationValue === previousStateRef.current?.nexradDurationValue &&
+                  nexradObsTimelineSig(newState) === nexradObsTimelineSig(previousStateRef.current)
+                : newState.isSatellite
+                  ? newState.satelliteTimestamp === previousStateRef.current?.satelliteTimestamp &&
+                    newState.satelliteInstrumentId === previousStateRef.current?.satelliteInstrumentId &&
+                    newState.satelliteSectorLabel === previousStateRef.current?.satelliteSectorLabel &&
+                    newState.satelliteChannel === previousStateRef.current?.satelliteChannel &&
+                    newState.satelliteDurationValue === previousStateRef.current?.satelliteDurationValue &&
+                    satelliteObsTimelineSig(newState) === satelliteObsTimelineSig(previousStateRef.current)
+                  : newState.forecastHour === previousStateRef.current?.forecastHour &&
+                    newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp;
+
+            const sameModeAnchor =
+                newState.isSatellite
+                    ? newState.satelliteInstrumentId === previousStateRef.current?.satelliteInstrumentId &&
+                      newState.satelliteSectorLabel === previousStateRef.current?.satelliteSectorLabel &&
+                      newState.satelliteChannel === previousStateRef.current?.satelliteChannel
+                    : newState.model === previousStateRef.current?.model &&
+                      newState.isMRMS === previousStateRef.current?.isMRMS;
+
+            const isOpacityOnlyChange =
+                hasInitialLoad.current &&
+                newState.opacity !== renderProps.opacity &&
+                newState.variable === previousStateRef.current?.variable &&
+                sameTimeline &&
+                sameModeAnchor &&
+                newState.units === previousStateRef.current?.units;
+
+            const isPlayStateOnlyChange =
+                hasInitialLoad.current &&
+                newState.isPlaying !== previousStateRef.current?.isPlaying &&
+                newState.variable === previousStateRef.current?.variable &&
+                sameTimeline &&
+                sameModeAnchor &&
+                newState.units === previousStateRef.current?.units &&
+                newState.opacity === previousStateRef.current?.opacity;
+
+            if (!isOpacityOnlyChange && !isPlayStateOnlyChange && lastProcessedState.current === stateKey) {
+                previousStateRef.current = newState;
+                return;
+            }
+
+            if (
+                wxGridDebugEnabled() &&
+                Platform.OS === 'ios' &&
+                ((newState.isNexrad && previousStateRef.current?.isNexrad) ||
+                    (newState.isSatellite && previousStateRef.current?.isSatellite))
+            ) {
+                const prev = previousStateRef.current;
+                if (newState.isNexrad && prev?.isNexrad) {
+                    if (
+                        newState.nexradDurationValue !== prev.nexradDurationValue ||
+                        nexradObsTimelineSig(newState) !== nexradObsTimelineSig(prev)
+                    ) {
+                        wxGridVerbose('iosNexradTimelineWindowChanged', {
+                            duration: { from: prev.nexradDurationValue, to: newState.nexradDurationValue },
+                            timelineSig: { from: nexradObsTimelineSig(prev), to: nexradObsTimelineSig(newState) },
+                            willSyncNative: true,
+                        });
+                    }
+                }
+                if (newState.isSatellite && prev?.isSatellite) {
+                    if (
+                        newState.satelliteDurationValue !== prev.satelliteDurationValue ||
+                        satelliteObsTimelineSig(newState) !== satelliteObsTimelineSig(prev)
+                    ) {
+                        wxGridVerbose('iosSatelliteTimelineWindowChanged', {
+                            duration: { from: prev.satelliteDurationValue, to: newState.satelliteDurationValue },
+                            timelineSig: { from: satelliteObsTimelineSig(prev), to: satelliteObsTimelineSig(newState) },
+                            willSyncNative: true,
+                        });
+                    }
+                }
+            }
+
+            if (!isOpacityOnlyChange && !isPlayStateOnlyChange) {
+                lastProcessedState.current = stateKey;
+            }
+
+            if (isOpacityOnlyChange) {
+                setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                if (NEXRAD_NATIVE && newState.isNexrad) {
+                    nexradControllerRef.current?.applyStyleFromState?.(newState);
+                }
+                if (SATELLITE_NATIVE && newState.isSatellite) {
+                    satelliteLayerRef.current?.updateSatelliteStyle?.(
+                        JSON.stringify({
+                            visible: newState.visible !== false,
+                            opacity: newState.opacity ?? 1,
+                            fillSmoothing: 0,
+                        }),
+                    );
+                }
+                previousStateRef.current = newState;
+                return;
+            }
+
+            if (isPlayStateOnlyChange) {
+                previousStateRef.current = newState;
+                return;
+            }
+
+            const isUnitsOnlyChange =
+                hasInitialLoad.current &&
+                newState.model === previousStateRef.current.model &&
+                newState.isMRMS === previousStateRef.current.isMRMS &&
+                newState.variable === previousStateRef.current.variable &&
+                newState.date === previousStateRef.current.date &&
+                newState.run === previousStateRef.current.run &&
+                (newState.isNexrad
+                    ? newState.nexradTimestamp === previousStateRef.current.nexradTimestamp &&
+                      newState.nexradSite === previousStateRef.current.nexradSite &&
+                      newState.nexradProduct === previousStateRef.current.nexradProduct
+                    : newState.forecastHour === previousStateRef.current.forecastHour &&
+                      newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp) &&
+                newState.units !== previousStateRef.current.units;
+
+            if (isUnitsOnlyChange) {
+                if (NEXRAD_NATIVE && newState.isNexrad) {
+                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                    nexradControllerRef.current?.applyStyleFromState?.(newState);
+                    previousStateRef.current = newState;
+                    return;
+                }
+                const { variable, units, isMRMS, mrmsTimestamp, model, date, run, forecastHour } = newState;
+                const oldCacheKey = isMRMS
+                    ? `mrms-${mrmsTimestamp}-${variable}`
+                    : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+
+                const cachedData = preloadedDataCache.current.get(oldCacheKey);
+
+                if (cachedData && cachedData.originalScale !== undefined && cachedData.originalOffset !== undefined) {
+                    const { baseUnit } = core._getColormapForVariable(variable);
+                    const toUnit = core._getTargetUnit(baseUnit, units);
+                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
+                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
+
+                    let dataScale = cachedData.originalScale;
+                    let dataOffset = cachedData.originalOffset;
+
+                    if (serverDataUnit !== baseUnit) {
+                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
+                        if (conversionFunc) {
+                            if (cachedData.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                dataScale = newOffsetPlusScale - newOffset;
+                                dataOffset = newOffset;
+                            } else {
+                                const convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                dataScale = convertedOffsetPlusScale - convertedOffset;
+                                dataOffset = convertedOffset;
+                            }
+                        }
+                    }
+
+                    if (baseUnit !== toUnit) {
+                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                        if (conversionFunc) {
+                            if (cachedData.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                dataScale = newOffsetPlusScale - newOffset;
+                                dataOffset = newOffset;
+                            } else {
+                                const convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                dataScale = convertedOffsetPlusScale - convertedOffset;
+                                dataOffset = convertedOffset;
+                            }
+                        }
+                    }
+
+                    const { colormap } = core._getColormapForVariable(variable);
+                    const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+                    let dataRange = (variable === 'ptypeRefl' || variable === 'ptypeRate') ? [5, 380] : [finalColormap[0], finalColormap[finalColormap.length - 2]];
+                    const colormapBytes = _generateColormapBytes(finalColormap);
+                    const colormapAsBase64 = fromByteArray(colormapBytes);
+
+                    gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+                    cachedColormap.current = { key: `${variable}-${units}` };
+                    cachedDataRange.current = dataRange;
+                    setRenderProps(prev => ({ ...prev, dataRange, opacity: newState.opacity }));
+
+                    if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
+                        const scaleTypeValue = cachedData.scaleType === 'sqrt' ? 1 : 0;
+                        gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing, scaleTypeValue);
+                    }
+
+                    const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+                    preloadedDataCache.current.set(newCacheKey, { ...cachedData, scale: dataScale, offset: dataOffset });
+                }
+
+                previousStateRef.current = newState;
+                return;
+            }
+
+            const prev = previousStateRef.current;
+            const needsFullLoad =
+                !hasInitialLoad.current ||
+                newState.isNexrad !== prev?.isNexrad ||
+                newState.isSatellite !== prev?.isSatellite ||
+                (newState.isNexrad &&
+                    prev?.isNexrad &&
+                    (newState.nexradSite !== prev.nexradSite ||
+                        newState.nexradDataSource !== prev.nexradDataSource ||
+                        newState.nexradProduct !== prev.nexradProduct)) ||
+                (newState.isSatellite &&
+                    prev?.isSatellite &&
+                    (newState.satelliteInstrumentId !== prev.satelliteInstrumentId ||
+                        newState.satelliteSectorLabel !== prev.satelliteSectorLabel ||
+                        newState.satelliteChannel !== prev.satelliteChannel)) ||
+                (!newState.isNexrad &&
+                    !newState.isSatellite &&
+                    (newState.model !== prev?.model ||
+                        newState.isMRMS !== prev?.isMRMS ||
+                        newState.variable !== prev?.variable ||
+                        newState.date !== prev?.date ||
+                        newState.run !== prev?.run));
+
+            if (needsFullLoad) {
+                wxGridVerbose('needsFullLoad', {
+                    variable: newState.variable,
+                    isMRMS: newState.isMRMS,
+                    model: newState.model,
+                    isInitial: !hasInitialLoad.current,
+                    prevVariable: prev?.variable,
+                    prevModel: prev?.model,
+                });
+                const nexradIdentityChange =
+                    NEXRAD_NATIVE &&
+                    (newState.isNexrad !== prev?.isNexrad ||
+                        (newState.isNexrad &&
+                            prev?.isNexrad &&
+                            (newState.nexradSite !== prev.nexradSite ||
+                                newState.nexradDataSource !== prev.nexradDataSource ||
+                                newState.nexradProduct !== prev.nexradProduct)));
+                const satelliteIdentityChange =
+                    SATELLITE_NATIVE &&
+                    (newState.isSatellite !== prev?.isSatellite ||
+                        (newState.isSatellite &&
+                            prev?.isSatellite &&
+                            (newState.satelliteInstrumentId !== prev.satelliteInstrumentId ||
+                                newState.satelliteSectorLabel !== prev.satelliteSectorLabel ||
+                                newState.satelliteChannel !== prev.satelliteChannel)));
+                if (nexradIdentityChange) {
+                    nexradPreloadInteractionRef.current?.cancel?.();
+                    nexradPreloadInteractionRef.current = null;
+                    nexradControllerRef.current?.destroy();
+                    nexradControllerRef.current = null;
+                }
+                if (satelliteIdentityChange) {
+                    satelliteControllerRef.current?.destroy();
+                    satelliteControllerRef.current = null;
+                }
+                if (gridLayerRef.current) {
+                    gridLayerRef.current.setVariable(newState.variable);
+                    gridLayerRef.current.clear();
+                    if (Platform.OS === 'ios' && gridLayerRef.current.clearGpuCache) {
+                        gridLayerRef.current.clearGpuCache();
+                    }
+                }
+                hasPreloadedRef.current = false;
+                preloadGenerationRef.current += 1;
+                preloadedDataCache.current.clear();
+                cachedGeometry.current = null;
+                cachedColormap.current = null;
+                currentGridDataRef.current = null;
+                WeatherFrameProcessorModule.cancelAllFrames();
+                wxGridVerbose('cancelAllFrames', {
+                    reason: 'needsFullLoad',
+                    variable: newState.variable,
+                    generation: preloadGenerationRef.current,
+                });
+
+                if (!newState.variable) {
+                    previousStateRef.current = newState;
+                    return;
+                }
+                if (!newState.isNexrad && !newState.isSatellite) {
+                    preloadAllFramesToDisk(newState);
+                } else if (NEXRAD_NATIVE && newState.isNexrad) {
+                    hasInitialLoad.current = true;
+                } else if (SATELLITE_NATIVE && newState.isSatellite) {
+                    hasInitialLoad.current = true;
+                }
+            } else if (
+                !newState.isNexrad &&
+                (newState.forecastHour !== previousStateRef.current.forecastHour ||
+                    (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp))
+            ) {
+                const success = updateGPUWithCachedData(newState);
+                if (!success) {
+                    wxGridWarn('timelineGpuUpdateMiss', {
+                        isMRMS: newState.isMRMS,
+                        variable: newState.variable,
+                        mrmsTimestamp: newState.mrmsTimestamp,
+                        forecastHour: newState.forecastHour,
+                    });
+                    hasPreloadedRef.current = false;
+                    void preloadAllFramesToDisk(newState);
+                }
+                if (success && newState.opacity !== renderProps.opacity) {
+                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                }
+            }
+
+            if (NEXRAD_NATIVE && newState.isNexrad && newState.nexradSite && newState.nexradTimestamp != null) {
+                const ctl = ensureNexradController();
+                if (ctl) {
+                    hasInitialLoad.current = true;
+                    void ctl.sync(newState);
+                    nexradPreloadInteractionRef.current?.cancel?.();
+                    const preloadCancelled = { v: false };
+                    nexradPreloadInteractionRef.current = {
+                        cancel: () => {
+                            preloadCancelled.v = true;
+                        },
+                    };
+                    const nexradTimelineSnapshot = Array.isArray(newState.availableNexradTimestamps)
+                        ? newState.availableNexradTimestamps
+                        : [];
+                    const kickPreload = () => {
+                        nexradPreloadInteractionRef.current = null;
+                        if (preloadCancelled.v) {
+                            return;
+                        }
+                        const cur = nexradControllerRef.current;
+                        if (!cur) {
+                            return;
+                        }
+                        const s = core.state;
+                        if (!s.isNexrad || !s.nexradSite || s.nexradTimestamp == null) {
+                            return;
+                        }
+                        const coreTs = Array.isArray(s.availableNexradTimestamps) ? s.availableNexradTimestamps : [];
+                        const mergedTimestamps =
+                            coreTs.length > 0 ? coreTs : nexradTimelineSnapshot.length > 0 ? nexradTimelineSnapshot : [];
+                        const preloadState = { ...s, availableNexradTimestamps: mergedTimestamps };
+                        cur.preloadAllAvailable(preloadState);
+                    };
+                    if (typeof queueMicrotask === 'function') {
+                        queueMicrotask(kickPreload);
+                    } else {
+                        setTimeout(kickPreload, 0);
+                    }
+                }
+            } else if (NEXRAD_NATIVE && (!newState.isNexrad || !newState.nexradSite)) {
+                nexradPreloadInteractionRef.current?.cancel?.();
+                nexradPreloadInteractionRef.current = null;
+                nexradControllerRef.current?.destroy();
+                nexradControllerRef.current = null;
+            }
+
+            if (SATELLITE_NATIVE && newState.isSatellite) {
+                satBridgeWarn('handleStateChange → satellite', {
+                    satelliteInstrumentId: newState.satelliteInstrumentId ?? null,
+                    satelliteSectorLabel: newState.satelliteSectorLabel ?? null,
+                    satelliteChannel: newState.satelliteChannel ?? null,
+                    timelineKeys: Object.keys(newState.satelliteTimeToFileMap || {}).length,
+                    refHasSync: Boolean(satelliteLayerRef.current?.syncSatellite),
+                });
+                const satCtl = ensureSatelliteController();
+                if (satCtl) {
+                    hasInitialLoad.current = true;
+                    void satCtl.sync(newState);
+                } else {
+                    satBridgeWarn('handleStateChange satellite: ensureSatelliteController returned null', {});
+                }
+                if (!newState.satelliteInstrumentId && typeof __DEV__ !== 'undefined' && __DEV__) {
+                    console.warn(
+                        '[AguaceroWX][satellite] isSatellite is true but satelliteInstrumentId is missing — native sync still runs; timeline may be empty until core sets instrument.',
+                    );
+                }
+            } else if (SATELLITE_NATIVE && !newState.isSatellite) {
+                satelliteControllerRef.current?.destroy();
+                satelliteControllerRef.current = null;
+            }
+
+            previousStateRef.current = newState;
+        };
+
+        handleStateChangeRef.current = handleStateChange;
+
+        const stableHandler = (newState) => {
+            lastEmittedStateForInspectRef.current = newState;
+            setNexradSitesMapVisible(Boolean(newState.isNexrad && newState.nexradShowSitesPicker !== false));
+            // OPTIMIZATION: If playing (high speed), prioritize MAP update and skip debounce
+            if (newState.isPlaying) {
+                // 1. Update Map FIRST (Native Enqueue)
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+
+                // 2. Update UI Slider SECOND
+                // This ensures the heavy map frame is processing while React reconciles the slider
+                props.onStateChange?.(newState);
+
+                if (debounceTimeoutRef.current) {
+                    clearTimeout(debounceTimeoutRef.current);
+                    debounceTimeoutRef.current = null;
+                }
+                return;
+            }
+
+            // --- Existing Logic for scrubbing/paused ---
+
+            // 1. Immediate Slider Update for responsiveness
+            props.onStateChange?.(newState);
+
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+
+            const prevStable = previousStateRef.current;
+            const sameTimelineStable =
+                prevStable &&
+                (prevStable.isNexrad
+                    ? newState.nexradTimestamp === prevStable.nexradTimestamp &&
+                      newState.nexradSite === prevStable.nexradSite &&
+                      newState.nexradProduct === prevStable.nexradProduct &&
+                      Number(newState.nexradTilt) === Number(prevStable.nexradTilt) &&
+                      newState.nexradDurationValue === prevStable.nexradDurationValue &&
+                      nexradObsTimelineSig(newState) === nexradObsTimelineSig(prevStable)
+                    : prevStable.isSatellite
+                      ? newState.satelliteTimestamp === prevStable.satelliteTimestamp &&
+                        newState.satelliteInstrumentId === prevStable.satelliteInstrumentId &&
+                        newState.satelliteSectorLabel === prevStable.satelliteSectorLabel &&
+                        newState.satelliteChannel === prevStable.satelliteChannel &&
+                        newState.satelliteDurationValue === prevStable.satelliteDurationValue &&
+                        satelliteObsTimelineSig(newState) === satelliteObsTimelineSig(prevStable)
+                      : newState.forecastHour === prevStable.forecastHour &&
+                        newState.mrmsTimestamp === prevStable.mrmsTimestamp);
+
+            const sameModeStable =
+                prevStable &&
+                (newState.isSatellite
+                    ? newState.satelliteInstrumentId === prevStable.satelliteInstrumentId &&
+                      newState.satelliteSectorLabel === prevStable.satelliteSectorLabel &&
+                      newState.satelliteChannel === prevStable.satelliteChannel
+                    : newState.model === prevStable.model && newState.isMRMS === prevStable.isMRMS);
+
+            // Opacity and Play state changes should be immediate for the native layer too
+            const isOpacityOnlyChange =
+                prevStable &&
+                sameTimelineStable &&
+                sameModeStable &&
+                newState.opacity !== prevStable.opacity &&
+                newState.variable === prevStable.variable &&
+                newState.units === prevStable.units;
+
+            const isPlayStateOnlyChange =
+                prevStable &&
+                sameTimelineStable &&
+                sameModeStable &&
+                newState.isPlaying !== prevStable.isPlaying &&
+                newState.variable === prevStable.variable &&
+                newState.units === prevStable.units &&
+                newState.opacity === prevStable.opacity;
+
+            if (isOpacityOnlyChange || isPlayStateOnlyChange || !previousStateRef.current) {
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+                return;
+            }
+
+            debounceTimeoutRef.current = setTimeout(() => {
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+                debounceTimeoutRef.current = null;
+            }, 16); // ~60fps map updates
+        };
+
+        core.on('state:change', stableHandler);
+
+        return () => {
+            core.off('state:change', stableHandler);
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+            if (NEXRAD_NATIVE) {
+                nexradPreloadInteractionRef.current?.cancel?.();
+                nexradPreloadInteractionRef.current = null;
+                nexradControllerRef.current?.destroy();
+                nexradControllerRef.current = null;
+            }
+            if (SATELLITE_NATIVE) {
+                satelliteControllerRef.current?.destroy();
+                satelliteControllerRef.current = null;
+            }
+        };
+    }, [core, ensureNexradController, ensureSatelliteController]);
+
+    useEffect(() => {
+        return () => {
+            preloadedDataCache.current.clear(); // This drops JS references
+            hasInitialLoad.current = false;
+            lastProcessedState.current = null;
+            // Native cleanup
+            if (gridLayerRef.current && Platform.OS === 'ios') {
+                gridLayerRef.current.clearGpuCache();
+            }
+            if (NEXRAD_NATIVE) {
+                nexradPreloadInteractionRef.current?.cancel?.();
+                nexradPreloadInteractionRef.current = null;
+                nexradControllerRef.current?.destroy();
+                nexradControllerRef.current = null;
+            }
+            if (SATELLITE_NATIVE) {
+                satelliteControllerRef.current?.destroy();
+                satelliteControllerRef.current = null;
+            }
+        };
+    }, []);
+
+    const lastInspectorUpdateRef = useRef(0);
+    const INSPECTOR_THROTTLE_MS = 50;
+
+    useEffect(() => {
+        if (!core || !inspectorEnabled) {
+            return;
+        }
+
+        const handleMapMove = (center) => {
+            if (!center || !Array.isArray(center) || center.length !== 2) {
+                return;
+            }
+
+            // Throttle updates
+            const now = Date.now();
+            if (now - lastInspectorUpdateRef.current < INSPECTOR_THROTTLE_MS) {
+                return;
+            }
+            lastInspectorUpdateRef.current = now;
+
+            const [longitude, latitude] = center;
+
+            if (NEXRAD_NATIVE && core.state?.isNexrad) {
+                onInspect?.(getNexradInspectPayloadAtRef.current(longitude, latitude));
+                return;
+            }
+
+            void getValueAtPointRef.current(longitude, latitude).then((payload) => {
+                onInspect?.(payload);
+            });
+        };
+
+        core.on('map:move', handleMapMove);
+
+        if (context && context.getCenter) {
+            const center = context.getCenter();
+            if (center) {
+                handleMapMove(center);
+            }
+        }
+
+        return () => {
+            core.off('map:move', handleMapMove);
+        };
+    }, [inspectorEnabled, onInspect, core, context]);
+
+    useEffect(() => {
+        if (!core || !inspectorEnabled) {
+            return;
+        }
+
+        const triggerReinspection = () => {
+            const mapRef = mapRegistry.getMap();
+            const center = mapRef?._currentCenter;
+
+            if (center && Array.isArray(center) && center.length === 2) {
+                const [longitude, latitude] = center;
+
+                if (NEXRAD_NATIVE && core?.state?.isNexrad) {
+                    onInspect?.(getNexradInspectPayloadAtRef.current(longitude, latitude));
+                } else {
+                    getValueAtPointRef.current(longitude, latitude).then((payload) => {
+                        onInspect?.(payload);
+                    });
+                }
+            }
+        };
+
+        // Small delay to ensure data is loaded before re-inspecting
+        const timer = setTimeout(triggerReinspection, 100);
+
+        return () => clearTimeout(timer);
+    }, [
+        core?.state?.nexradTimestamp,
+        core?.state?.isNexrad,
+        core?.state?.nexradSite,
+        core?.state?.nexradProduct,
+        core?.state?.nexradTilt,
+        core?.state?.nexradDataSource,
+        core?.state?.nexradStormRelative,
+        core?.state?.variable,
+        core?.state?.model,
+        core?.state?.forecastHour,
+        core?.state?.mrmsTimestamp,
+        core?.state?.units,
+        core?.state?.opacity,
+        inspectorEnabled,
+        onInspect,
+    ]);
+
+    useEffect(() => {
+        if (!core) {
+            return;
+        }
+
+        const handleCameraChange = (center) => {
+            if (core && center) {
+                core.setMapCenter(center);
+            }
+        };
+
+        // Register with the global registry
+        mapRegistry.addCameraListener(handleCameraChange);
+
+        // Try to get initial center
+        const mapRef = mapRegistry.getMap();
+        if (mapRef?._currentCenter) {
+            handleCameraChange(mapRef._currentCenter);
+        }
+
+        return () => {
+            mapRegistry.removeCameraListener(handleCameraChange);
+        };
+    }, [core]);
+
+    useEffect(() => {
+        core.initialize({ autoRefresh: false }); // <-- add the argument
+        return () => {
+            core.destroy();
+        };
+    }, [core]);
+
+    const gridBelowId =
+        belowIDFromProps ??
+        context?.weatherBeforeLayerId ??
+        'AML_-_terrain';
+
+    return (
+        <>
+            <GridRenderLayer
+                ref={gridLayerRef}
+                opacity={renderProps.opacity}
+                dataRange={renderProps.dataRange}
+                belowID={gridBelowId}
+            />
+            {NEXRAD_NATIVE ? <NexradRadarLayer ref={nexradLayerRef} belowID={gridBelowId} /> : null}
+            {SATELLITE_NATIVE ? <SatelliteLayer ref={satelliteLayerRef} belowID={gridBelowId} /> : null}
+            <NwsAlertsOverlay core={core} watchesWarnings={watchesWarningsOptions} onNwsAlertClick={onNwsAlertClick} />
+            {nexradSitesMapVisible ? (
+                <NexradSitesMapLayer
+                    visible
+                    belowLayerID={gridBelowId}
+                    onSelectSite={(siteId) => void core.setNexradSite(siteId)}
+                />
+            ) : null}
+        </>
+    );
+});
+
+WeatherLayerManager.getAvailableVariables = (options) => {
+    if (!options || !options.apiKey) {
+        return [];
+    }
+    const core = new AguaceroCore({ apiKey: options.apiKey });
+    return core.getAvailableVariables('mrms');
 };