@aguacerowx/react-native 0.0.46 → 0.0.49

package/lib/module/WeatherLayerManager.js

@@ -0,0 +1,1751 @@
+// 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';
+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 in __DEV__, or set `globalThis.__AGUACERO_WX_GRID_DEBUG__ = true` in the app entry for release builds. */
+function wxGridDebugEnabled() {
+  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 = /*#__PURE__*/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,
+    ...restProps
+  } = props;
+  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]);
+  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 = buildGridFrameProcessOptions(core.baseGridUrl, resourcePath, core.apiKey, core.bundleId, gridRequestSiteOrigin);
+      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;
+          wxGridWarn('preloadProcessFrameError', {
+            currentCacheKey,
+            code: e?.code,
+            message: e?.message,
+            userInfo: e?.userInfo
+          });
+        } 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 = buildGridFrameProcessOptions(core.baseGridUrl, resourcePath, core.apiKey, core.bundleId, gridRequestSiteOrigin);
+      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 = buildGridFrameProcessOptions(core.baseGridUrl, resourcePath, core.apiKey, core.bundleId, gridRequestSiteOrigin);
+          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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GridRenderLayer, {
+    ref: gridLayerRef,
+    opacity: renderProps.opacity,
+    dataRange: renderProps.dataRange,
+    belowID: gridBelowId
+  }), NEXRAD_NATIVE ? /*#__PURE__*/React.createElement(NexradRadarLayer, {
+    ref: nexradLayerRef,
+    belowID: gridBelowId
+  }) : null, SATELLITE_NATIVE ? /*#__PURE__*/React.createElement(SatelliteLayer, {
+    ref: satelliteLayerRef,
+    belowID: gridBelowId
+  }) : null, /*#__PURE__*/React.createElement(NwsAlertsOverlay, {
+    core: core,
+    watchesWarnings: watchesWarningsOptions,
+    onNwsAlertClick: onNwsAlertClick
+  }), nexradSitesMapVisible ? /*#__PURE__*/React.createElement(NexradSitesMapLayer, {
+    visible: true,
+    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');
+};
+//# sourceMappingURL=WeatherLayerManager.js.map