@aguacerowx/javascript-sdk 0.0.23 → 0.0.25

package/src/AguaceroCore.js

@@ -1,1624 +1,1624 @@
-// AguaceroCore.js - The Headless "Engine"
-
-// --- Non-UI Imports ---
-import { EventEmitter } from './events.js';
-import { COORDINATE_CONFIGS } from './coordinate_configs.js';
-import { getUnitConversionFunction } from './unitConversions.js';
-import { DICTIONARIES, MODEL_CONFIGS } from './dictionaries.js';
-import { DEFAULT_COLORMAPS } from './default-colormaps.js';
-import proj4 from 'proj4';
-import { processCompressedGrid } from './gridDecodePipeline.js';
-import { getBundleId } from './getBundleId';
-import {
-    SATELLITE_FRAMES_URL,
-    buildSatelliteTimelineForSelection,
-    formatTimelineDurationValue,
-    resolveSatelliteSectorLabel,
-    resolveSatelliteDurationOption,
-    parseTimelineDurationHours,
-} from './satellite_support.js';
-import {
-    fetchNexradTimesListing,
-    inferNexradDataSourceForProduct,
-    nexradColormapFldKey,
-    variableToNexradGroup,
-    getAvailableNexradTilts,
-    getRawNexradTiltsForCoalesce,
-} from './nexrad_support.js';
-import { nexradLayerTiltToDisplayOption } from './nexradTiltCoalesce.js';
-import { NEXRAD_LEVEL3_ELEV, getNexradLevel3EntryByRadarKey } from './nexrad_level3_catalog.js';
-import {
-    setRadarTiltsManifest,
-    fetchRadarTiltsManifestFromNetwork,
-    getDefaultRadarTilt,
-    formatTiltForApi,
-    clampNexradTiltForVariable,
-    getRadarTilts,
-} from './nexradTilts.js';
-
-// --- Non-UI Helper Functions ---
-function hrdpsObliqueTransform(rotated_lon, rotated_lat) {
-    const o_lat_p = 53.91148; const o_lon_p = 245.305142;
-    const DEG_TO_RAD = Math.PI / 180.0; const RAD_TO_DEG = 180.0 / Math.PI;
-    const o_lat_p_rad = o_lat_p * DEG_TO_RAD;
-    const rot_lon_rad = rotated_lon * DEG_TO_RAD;
-    const rot_lat_rad = rotated_lat * DEG_TO_RAD;
-    const sin_rot_lat = Math.sin(rot_lat_rad); const cos_rot_lat = Math.cos(rot_lat_rad);
-    const sin_rot_lon = Math.sin(rot_lon_rad); const cos_rot_lon = Math.cos(rot_lon_rad);
-    const sin_o_lat_p = Math.sin(o_lat_p_rad); const cos_o_lat_p = Math.cos(o_lat_p_rad);
-    const sin_lat = cos_o_lat_p * sin_rot_lat + sin_o_lat_p * cos_rot_lat * cos_rot_lon;
-    let lat = Math.asin(sin_lat) * RAD_TO_DEG;
-    const sin_lon_num = cos_rot_lat * sin_rot_lon;
-    const sin_lon_den = -sin_o_lat_p * sin_rot_lat + cos_o_lat_p * cos_rot_lat * cos_rot_lon;
-    let lon = Math.atan2(sin_lon_num, sin_lon_den) * RAD_TO_DEG + o_lon_p;
-    if (lon > 180) lon -= 360; else if (lon < -180) lon += 360;
-    return [lon, lat];
-}
-
-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;
-}
-
-/**
- * model-status JSON uses string keys for runs (often zero-padded: "00", "06").
- * Direct lookup modelStatus[model][date][run] fails if state.run is "6" but the key is "06".
- * Returns the hour list and the run key that matched.
- */
-function resolveModelRunHours(modelStatus, model, date, run) {
-    const runs = modelStatus?.[model]?.[date];
-    if (!runs || run == null || run === '') {
-        return {
-            hours: [],
-            matchedRunKey: null,
-            availableRunKeys: runs ? Object.keys(runs) : [],
-        };
-    }
-    const runStr = String(run);
-    const candidates = new Set([runStr]);
-    const n = parseInt(runStr, 10);
-    if (!Number.isNaN(n)) {
-        candidates.add(String(n));
-        candidates.add(String(n).padStart(2, '0'));
-        candidates.add(String(n).padStart(3, '0'));
-    }
-    for (const key of candidates) {
-        const h = runs[key];
-        if (h && Array.isArray(h) && h.length > 0) {
-            return { hours: h, matchedRunKey: key, availableRunKeys: Object.keys(runs) };
-        }
-    }
-    if (!Number.isNaN(n)) {
-        for (const k of Object.keys(runs)) {
-            const kn = parseInt(k, 10);
-            if (!Number.isNaN(kn) && kn === n) {
-                const h = runs[k];
-                if (h && Array.isArray(h) && h.length > 0) {
-                    return { hours: h, matchedRunKey: k, availableRunKeys: Object.keys(runs) };
-                }
-            }
-        }
-    }
-    return { hours: [], matchedRunKey: null, availableRunKeys: Object.keys(runs) };
-}
-
-export class AguaceroCore extends EventEmitter {
-    constructor(options = {}) {
-        super();
-        this.isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
-        this.apiKey = options.apiKey;
-        /** Passed as CloudFront `userId` for satellite KTX2 URLs (production uses the authenticated account id). */
-        this.userId = options.userId ?? 'sdk-user';
-        this.bundleId = getBundleId();
-        this.baseGridUrl = 'https://d3dc62msmxkrd7.cloudfront.net';
-        /** @type {Worker | null} */
-        this._gridDecodeWorker = null;
-        /** When true, skip Worker and use {@link processCompressedGrid} on the main thread. */
-        this._gridDecodeWorkerDisabled = false;
-        this._gridDecodeMsgId = 0;
-        this.statusUrl = 'https://d3dc62msmxkrd7.cloudfront.net/model-status';
-        this.modelStatus = null;
-        this.mrmsStatus = null;
-        /** @type {{ objects?: Array<{ key: string }> } | null} */
-        this.satelliteListing = null;
-        this.dataCache = new Map();
-        this.abortControllers = new Map();
-        this.isPlaying = false;
-        this.playIntervalId = null;
-        this.playbackSpeed = options.playbackSpeed || 500;
-        this.customColormaps = options.customColormaps || {};
-
-        const userLayerOptions = options.layerOptions || {};
-        // EDIT: Determine initial mode from options
-        const initialMode = userLayerOptions.mode || 'model';
-        const initialVariable = userLayerOptions.variable || null;
-
-        const initialSatellite = initialMode === 'satellite';
-        const initialNexrad = initialMode === 'nexrad';
-        const initialNexradProd = userLayerOptions.nexradProduct || 'REF';
-        const initialNexradDs = inferNexradDataSourceForProduct(initialNexradProd);
-        const initialNexradFld = initialNexrad
-            ? nexradColormapFldKey(initialNexradDs, initialNexradProd)
-            : initialVariable;
-        let initialSatelliteInstrumentId = null;
-        let initialSatelliteSectorLabel = null;
-        let initialSatelliteChannel = null;
-        if (initialSatellite) {
-            initialSatelliteInstrumentId = userLayerOptions.satelliteId ?? 'GOES19-EAST';
-            initialSatelliteSectorLabel = resolveSatelliteSectorLabel(
-                userLayerOptions.satelliteSector ?? userLayerOptions.sector ?? 'conus',
-            );
-            initialSatelliteChannel =
-                userLayerOptions.satelliteProduct ??
-                userLayerOptions.satelliteChannel ??
-                initialVariable ??
-                'C13';
-        }
-        this.state = {
-            model: userLayerOptions.model || 'gfs',
-            // EDIT: Set isMRMS based on the initial mode
-            isMRMS: initialMode === 'mrms' && !initialSatellite && !initialNexrad,
-            mrmsTimestamp: null,
-            variable: initialNexrad
-                ? initialNexradFld
-                : initialSatellite && initialSatelliteInstrumentId
-                  ? initialSatelliteChannel
-                  : initialVariable,
-            date: null,
-            run: null,
-            forecastHour: 0,
-            visible: true,
-            opacity: userLayerOptions.opacity ?? 1,
-            units: options.initialUnit || 'imperial',
-            shaderSmoothingEnabled: options.shaderSmoothingEnabled ?? true,
-            isSatellite: initialSatellite,
-            satelliteInstrumentId: initialSatelliteInstrumentId,
-            satelliteSectorLabel: initialSatelliteSectorLabel,
-            satelliteChannel: initialSatelliteChannel,
-            satelliteTimestamp: userLayerOptions.satelliteTimestamp != null ? Number(userLayerOptions.satelliteTimestamp) : null,
-            satelliteTier: userLayerOptions.satelliteTier || 'basic',
-            satelliteDurationValue: formatTimelineDurationValue(
-                userLayerOptions.satelliteDurationValue != null ? userLayerOptions.satelliteDurationValue : '1',
-            ),
-            mrmsDurationValue: formatTimelineDurationValue(
-                userLayerOptions.mrmsDurationValue != null ? userLayerOptions.mrmsDurationValue : '1',
-            ),
-            nexradDurationValue: formatTimelineDurationValue(
-                userLayerOptions.nexradDurationValue != null ? userLayerOptions.nexradDurationValue : '1',
-            ),
-            isNexrad: initialNexrad,
-            nexradSite: userLayerOptions.nexradSite ?? null,
-            nexradDataSource: initialNexradDs,
-            nexradProduct: initialNexradProd,
-            nexradTilt:
-                userLayerOptions.nexradTilt != null
-                    ? Number(userLayerOptions.nexradTilt)
-                    : userLayerOptions.nexradSite
-                      ? getDefaultRadarTilt(userLayerOptions.nexradSite)
-                      : null,
-            nexradTimestamp: userLayerOptions.nexradTimestamp != null ? Number(userLayerOptions.nexradTimestamp) : null,
-            nexradStormRelative: userLayerOptions.nexradStormRelative === true,
-            /** When true, mapsgl shows clickable NEXRAD site markers (independent of selected site). */
-            nexradShowSitesPicker: userLayerOptions.nexradShowSitesPicker !== false,
-        };
-
-        this.autoRefreshEnabled = options.autoRefresh ?? false;
-        this.autoRefreshIntervalSeconds = options.autoRefreshInterval ?? 60;
-        this.autoRefreshIntervalId = null;
-
-        /** @type {Record<string, { unixTimes?: number[]; timeToKeyMap?: Record<string, string>; listWindowHours?: number }>} */
-        this.nexradTimesByStation = {};
-    }
-
-    async setState(newState) {
-        const patch = { ...newState };
-        if ('satelliteKey' in patch) delete patch.satelliteKey;
-        if ('nexradDataSource' in patch && !('nexradProduct' in patch)) {
-            delete patch.nexradDataSource;
-        }
-        const willBeNexrad =
-            patch.isNexrad !== undefined ? Boolean(patch.isNexrad) : this.state.isNexrad;
-        if (willBeNexrad && 'nexradProduct' in patch && patch.nexradProduct != null) {
-            const p = (patch.nexradProduct || 'REF').toUpperCase();
-            const prevP = (this.state.nexradProduct || 'REF').toUpperCase();
-            const ds = inferNexradDataSourceForProduct(p);
-            patch.nexradProduct = p;
-            patch.nexradDataSource = ds;
-            patch.variable = nexradColormapFldKey(ds, p);
-            if (!('nexradStormRelative' in newState)) {
-                // Default: base radial velocity (L3 N0G only) — one fetch per time; fast scrub.
-                // SRV (N0G + N0S) is opt-in: setNexradStormRelative(true) or pass nexradStormRelative in setState.
-                // Re-selecting the same product (e.g. VEL → VEL) leaves the current SRV flag alone.
-                if (p !== 'VEL' || prevP !== 'VEL') {
-                    patch.nexradStormRelative = false;
-                }
-            }
-        }
-        if ('forecastHour' in patch && patch.forecastHour != null) {
-            patch.forecastHour = Number(patch.forecastHour);
-        }
-        if ('mrmsTimestamp' in patch && patch.mrmsTimestamp != null) {
-            patch.mrmsTimestamp = Number(patch.mrmsTimestamp);
-        }
-        if ('satelliteTimestamp' in patch && patch.satelliteTimestamp != null) {
-            patch.satelliteTimestamp = Number(patch.satelliteTimestamp);
-        }
-        if ('satelliteDurationValue' in patch && patch.satelliteDurationValue != null) {
-            patch.satelliteDurationValue = formatTimelineDurationValue(patch.satelliteDurationValue);
-        }
-        if ('mrmsDurationValue' in patch && patch.mrmsDurationValue != null) {
-            patch.mrmsDurationValue = formatTimelineDurationValue(patch.mrmsDurationValue);
-        }
-        if ('nexradDurationValue' in patch && patch.nexradDurationValue != null) {
-            patch.nexradDurationValue = formatTimelineDurationValue(patch.nexradDurationValue);
-        }
-        if ('nexradTimestamp' in patch && patch.nexradTimestamp != null) {
-            patch.nexradTimestamp = Number(patch.nexradTimestamp);
-        }
-        if ('nexradTilt' in patch && patch.nexradTilt != null) {
-            patch.nexradTilt = Number(patch.nexradTilt);
-        }
-        Object.assign(this.state, patch);
-        this._emitStateChange();
-    }
-
-    /**
-     * Forecast hours for the current model/date/run (normalized numbers).
-     * Tolerates model-status run keys like "06" vs state.run "6" so preload and slider stay in sync.
-     */
-    getAvailableForecastHours() {
-        if (this.state.isMRMS || this.state.isSatellite || this.state.isNexrad) return [];
-        if (!this.state.model || this.state.date == null || this.state.run == null) return [];
-
-        const resolved = resolveModelRunHours(
-            this.modelStatus,
-            this.state.model,
-            this.state.date,
-            this.state.run
-        );
-        let hours = resolved.hours || [];
-
-        if (hours.length > 0) {
-            hours = hours.map(h => (typeof h === 'string' ? parseInt(h, 10) : Number(h))).filter(h => !Number.isNaN(h));
-        }
-        if (this.state.variable === 'ptypeRefl' && this.state.model === 'hrrr' && hours.length > 0) {
-            hours = hours.filter(hour => hour !== 0);
-        }
-        return hours;
-    }
-
-    _computeSatelliteTimeline() {
-        const { satelliteInstrumentId, satelliteSectorLabel, satelliteChannel } = this.state;
-        if (!satelliteInstrumentId || !satelliteSectorLabel || !satelliteChannel || !this.satelliteListing?.objects) {
-            return { unixTimes: [], timeToFileMap: {} };
-        }
-        const allFiles = this.satelliteListing.objects.map((o) => o.key);
-        const sectorName = satelliteSectorLabel;
-        const tier = this.state.satelliteTier || 'basic';
-        const durationOpt = resolveSatelliteDurationOption(sectorName, tier, this.state.satelliteDurationValue);
-        return buildSatelliteTimelineForSelection(
-            {
-                satelliteInstrumentId,
-                satelliteSectorLabel,
-                satelliteChannel,
-            },
-            allFiles,
-            durationOpt,
-        );
-    }
-
-    /**
-     * MRMS timestamps for a variable, oldest first (matches satellite timelines and left→right time sliders).
-     * Limited to the last N hours relative to the newest frame (see mrmsDurationValue).
-     * @param {string} variable
-     * @returns {number[]}
-     */
-    _getFilteredMrmsTimestampsForVariable(variable) {
-        const raw = this.mrmsStatus?.[variable];
-        if (!raw || !raw.length) return [];
-        const hours = parseTimelineDurationHours(this.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;
-    }
-
-    _nexradListingWindowHours() {
-        return parseTimelineDurationHours(this.state.nexradDurationValue);
-    }
-
-    _getFilteredNexradTimestampsForVariable(rawList) {
-        if (!rawList || !rawList.length) return [];
-        const hours = this._nexradListingWindowHours();
-        let list = [...rawList]
-            .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;
-    }
-
-    /**
-     * Cache key for {@link this.nexradTimesByStation} — matches frontend composite keys (tilt + variable group/source).
-     */
-    _nexradTimesCacheKey() {
-        const s = this.state;
-        if (!s.isNexrad || !s.nexradSite) return null;
-        const site = s.nexradSite;
-        const variable = s.nexradProduct || 'REF';
-        const ds = s.nexradDataSource || 'level2';
-        const tiltNum = s.nexradTilt != null ? s.nexradTilt : getDefaultRadarTilt(site);
-        const elevNormUse =
-            ds === 'level3'
-                ? NEXRAD_LEVEL3_ELEV
-                : formatTiltForApi(clampNexradTiltForVariable(site, variable, tiltNum));
-        const group = ds === 'level3' ? 'l3' : variableToNexradGroup(variable);
-        const l3Product =
-            ds === 'level3'
-                ? getNexradLevel3EntryByRadarKey(variable)?.product ?? (variable === 'VEL' ? 'N0G' : variable)
-                : '';
-        if (ds === 'level3') {
-            return `${site}_l3_${l3Product}_${elevNormUse}`;
-        }
-        return `${site}_${group}_${elevNormUse}`;
-    }
-
-    _emitStateChange() {
-        const { colormap, baseUnit } = this._getColormapForVariable(this.state.variable);
-        const toUnit = this._getTargetUnit(baseUnit, this.state.units);
-        const displayColormap = this._convertColormapUnits(colormap, baseUnit, toUnit);
-
-        let availableTimestamps = [];
-        if (this.state.isMRMS && this.state.variable && this.mrmsStatus) {
-            availableTimestamps = this._getFilteredMrmsTimestampsForVariable(this.state.variable);
-        }
-
-        let availableSatelliteTimestamps = [];
-        let satelliteTimeToFileMap = {};
-        if (this.state.isSatellite && this.state.satelliteInstrumentId) {
-            const timeline = this._computeSatelliteTimeline();
-            satelliteTimeToFileMap = timeline.timeToFileMap || {};
-            availableSatelliteTimestamps = [...(timeline.unixTimes || [])]
-                .map((t) => Number(t))
-                .filter((t) => !Number.isNaN(t))
-                .sort((a, b) => a - b);
-        }
-
-        let availableNexradTimestamps = [];
-        let nexradTimeToKeyMap = {};
-        let nexradLevel3MotionTimeToKeyMap = {};
-        let availableNexradTilts = [];
-        if (this.state.isNexrad && this.state.nexradSite) {
-            const nk = this._nexradTimesCacheKey();
-            const ent = nk ? this.nexradTimesByStation[nk] : null;
-            const raw = ent?.unixTimes || [];
-            availableNexradTimestamps = this._getFilteredNexradTimestampsForVariable(raw);
-            nexradTimeToKeyMap = ent?.timeToKeyMap || {};
-            nexradLevel3MotionTimeToKeyMap = ent?.level3MotionTimeToKeyMap || {};
-            availableNexradTilts = getAvailableNexradTilts(
-                this.state.nexradSite,
-                this.state.nexradDataSource || 'level2',
-                this.state.nexradProduct || 'REF',
-            );
-        }
-
-        const availableHours = this.getAvailableForecastHours();
-
-        const eventPayload = {
-            ...this.state,
-            availableModels: this.modelStatus ? Object.keys(this.modelStatus).sort() : [],
-            availableRuns: this.modelStatus?.[this.state.model] || {},
-            availableHours: availableHours, // <-- Changed from inline calculation
-            availableVariables: this.getAvailableVariables(this.state.isMRMS ? 'mrms' : this.state.model),
-            // We need to confirm this line is working as expected.
-            availableMRMSVariables: this.getAvailableVariables('mrms'),
-            availableTimestamps: availableTimestamps,
-            availableSatelliteTimestamps,
-            satelliteTimeToFileMap,
-            availableNexradTimestamps,
-            nexradTimeToKeyMap,
-            nexradLevel3MotionTimeToKeyMap,
-            availableNexradTilts,
-            isPlaying: this.isPlaying,
-            colormap: displayColormap,
-            colormapBaseUnit: toUnit,
-        };
-
-        this.emit('state:change', eventPayload);
-    }
-
-    async initialize(options = {}) {
-        await this.fetchModelStatus(true);
-        await this.fetchMRMSStatus(true);
-        await this.fetchSatelliteListing(true);
-
-        let initialState = { ...this.state };
-
-        if (initialState.isSatellite && initialState.satelliteInstrumentId) {
-            const timeline = this._computeSatelliteTimeline();
-            const tsList = [...(timeline.unixTimes || [])].sort((a, b) => a - b);
-            if (initialState.satelliteTimestamp == null && tsList.length > 0) {
-                initialState.satelliteTimestamp = tsList[tsList.length - 1];
-            }
-        }
-
-        // ADD: Logic to handle an initial MRMS state
-        if (initialState.isMRMS) {
-            const variable = initialState.variable;
-            if (variable && this.mrmsStatus && this.mrmsStatus[variable]) {
-                const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
-                initialState.mrmsTimestamp =
-                    sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
-            } else {
-                const availableMRMSVars = this.getAvailableVariables('mrms');
-                if (availableMRMSVars.length > 0) {
-                    const firstVar = availableMRMSVars[0];
-                    initialState.variable = firstVar;
-                    const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(firstVar);
-                    initialState.mrmsTimestamp =
-                        sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
-                }
-            }
-        } else if (!initialState.isSatellite && !initialState.isNexrad) {
-            // EDIT: This is the existing logic, now in an else block
-            const latestRun = findLatestModelRun(this.modelStatus, initialState.model);
-            if (latestRun) {
-                initialState = { ...initialState, ...latestRun, forecastHour: 0 };
-                if (!initialState.variable) {
-                    const availableVariables = this.getAvailableVariables(initialState.model);
-                    if (availableVariables && availableVariables.length > 0) {
-                        initialState.variable = availableVariables[0];
-                    }
-                }
-            }
-        }
-
-        await this.setState(initialState);
-
-        if (this.state.isNexrad) {
-            const manifest = await fetchRadarTiltsManifestFromNetwork();
-            if (manifest) setRadarTiltsManifest(manifest);
-            if (this.state.nexradSite) {
-                await this.refreshNexradTimes();
-            }
-        }
-        if (options.autoRefresh ?? this.autoRefreshEnabled) {
-            this.startAutoRefresh(options.refreshInterval ?? this.autoRefreshIntervalSeconds);
-        }
-    }
-
-    destroy() {
-        this.pause();
-        this.stopAutoRefresh();
-        this.dataCache.clear();
-        this.callbacks = {};
-        if (this._gridDecodeWorker) {
-            this._gridDecodeWorker.terminate();
-            this._gridDecodeWorker = null;
-        }
-    }
-
-    // --- Public API Methods ---
-
-    play() {
-        if (this.isPlaying) return;
-        this.isPlaying = true;
-        clearInterval(this.playIntervalId);
-        this.playIntervalId = setInterval(() => { this.step(1); }, this.playbackSpeed);
-        this.emit('playback:start', { speed: this.playbackSpeed });
-        this._emitStateChange(); // Notify UI that isPlaying is now true
-    }
-
-    pause() {
-        if (!this.isPlaying) return;
-        this.isPlaying = false;
-        clearInterval(this.playIntervalId);
-        this.playIntervalId = null;
-        this.emit('playback:stop');
-        this._emitStateChange(); // Notify UI that isPlaying is now false
-    }
-
-    togglePlay() {
-        this.isPlaying ? this.pause() : this.play();
-    }
-
-    step(direction = 1) {
-        if (this.state.isSatellite) {
-            const timeline = this._computeSatelliteTimeline();
-            const availableTimestamps = [...(timeline.unixTimes || [])]
-                .sort((a, b) => a - b)
-                .map((t) => Number(t));
-            if (availableTimestamps.length === 0) return;
-
-            const ts = this.state.satelliteTimestamp == null ? null : Number(this.state.satelliteTimestamp);
-            const currentIndex = ts == null ? -1 : availableTimestamps.indexOf(ts);
-
-            let nextIndex = currentIndex === -1 ? availableTimestamps.length - 1 : currentIndex + direction;
-            const maxIndex = availableTimestamps.length - 1;
-            if (nextIndex > maxIndex) nextIndex = 0;
-            if (nextIndex < 0) nextIndex = maxIndex;
-
-            this.setState({ satelliteTimestamp: availableTimestamps[nextIndex] });
-            return;
-        }
-        // --- THIS IS THE CORRECTED MRMS LOGIC ---
-        if (this.state.isMRMS) {
-            const { variable, mrmsTimestamp } = this.state;
-            if (!this.mrmsStatus || !this.mrmsStatus[variable]) {
-                return;
-            }
-
-            const availableTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
-            if (availableTimestamps.length === 0) return;
-
-            const ts = mrmsTimestamp == null ? null : Number(mrmsTimestamp);
-            const currentIndex = ts == null ? -1 : availableTimestamps.indexOf(ts);
-
-            if (currentIndex === -1) {
-                // If not found, reset to the latest frame (end of ascending list)
-                this.setState({ mrmsTimestamp: availableTimestamps[availableTimestamps.length - 1] });
-                return;
-            }
-
-            const maxIndex = availableTimestamps.length - 1;
-            let nextIndex = currentIndex + direction;
-            
-            // Loop animation
-            if (nextIndex > maxIndex) nextIndex = 0; 
-            if (nextIndex < 0) nextIndex = maxIndex;
-
-            const newTimestamp = availableTimestamps[nextIndex];
-            this.setState({ mrmsTimestamp: newTimestamp });
-
-        } else if (this.state.isNexrad) {
-            const nk = this._nexradTimesCacheKey();
-            const raw = nk ? this.nexradTimesByStation[nk]?.unixTimes : [];
-            const availableTimestamps = this._getFilteredNexradTimestampsForVariable(raw || []);
-            if (availableTimestamps.length === 0) return;
-
-            const ts = this.state.nexradTimestamp == null ? null : Number(this.state.nexradTimestamp);
-            const currentIndex = ts == null ? -1 : availableTimestamps.indexOf(ts);
-
-            let nextIndex = currentIndex === -1 ? availableTimestamps.length - 1 : currentIndex + direction;
-            const maxIndex = availableTimestamps.length - 1;
-            if (nextIndex > maxIndex) nextIndex = 0;
-            if (nextIndex < 0) nextIndex = maxIndex;
-
-            this.setState({ nexradTimestamp: availableTimestamps[nextIndex] });
-        } else {
-            const { forecastHour } = this.state;
-            const forecastHours = this.getAvailableForecastHours();
-            if (!forecastHours || forecastHours.length === 0) return;
-
-            const fh = Number(forecastHour);
-            const currentIndex = forecastHours.indexOf(fh);
-            if (currentIndex === -1) return;
-
-            const maxIndex = forecastHours.length - 1;
-            let nextIndex = currentIndex + direction;
-            if (nextIndex > maxIndex) nextIndex = 0;
-            if (nextIndex < 0) nextIndex = maxIndex;
-
-            const newHour = forecastHours[nextIndex];
-            this.setState({ forecastHour: newHour });
-        }
-    }
-    
-    setPlaybackSpeed(speed) {
-        if (speed > 0) {
-            this.playbackSpeed = speed;
-            if (this.isPlaying) this.play();
-        }
-    }
-
-    async setShaderSmoothing(enabled) {
-        if (typeof enabled !== 'boolean' || enabled === this.state.shaderSmoothingEnabled) return;
-        await this.setState({ shaderSmoothingEnabled: enabled });
-    }
-    
-    async setOpacity(newOpacity) {
-        const clampedOpacity = Math.max(0, Math.min(1, newOpacity));
-        if (clampedOpacity === this.state.opacity) return;
-        await this.setState({ opacity: clampedOpacity });
-    }
-    
-    async setVariable(variable) {
-        // --- NEW CODE: Handle switching TO ptypeRefl on HRRR ---
-        if (variable === 'ptypeRefl' && this.state.model === 'hrrr' && this.state.forecastHour === 0) {
-            const availableHours = resolveModelRunHours(
-                this.modelStatus,
-                this.state.model,
-                this.state.date,
-                this.state.run
-            ).hours || [];
-            const firstValidHour = availableHours.find(hour => hour !== 0) || 0;
-            await this.setState({ variable, forecastHour: firstValidHour });
-            return;
-        }
-        // --- END NEW CODE ---
-        
-        await this.setState({ variable });
-    }
-    
-    async setModel(modelName) {
-        if (modelName === this.state.model || !this.modelStatus?.[modelName]) return;
-        if (this.state.isSatellite) {
-            await this.setState({
-                isSatellite: false,
-                satelliteInstrumentId: null,
-                satelliteSectorLabel: null,
-                satelliteChannel: null,
-                satelliteTimestamp: null,
-            });
-        }
-        const latestRun = findLatestModelRun(this.modelStatus, modelName);
-        if (latestRun) {
-            // --- NEW CODE: Determine initial forecast hour ---
-            let initialHour = 0;
-            
-            // If switching to HRRR with ptypeRefl, start at hour 1 instead of 0
-            if (modelName === 'hrrr' && this.state.variable === 'ptypeRefl') {
-                const availableHours = resolveModelRunHours(
-                    this.modelStatus,
-                    modelName,
-                    latestRun.date,
-                    latestRun.run
-                ).hours || [];
-                initialHour = availableHours.find(hour => hour !== 0) || 0;
-            }
-            // --- END NEW CODE ---
-            
-            await this.setState({ 
-                model: modelName, 
-                date: latestRun.date, 
-                run: latestRun.run, 
-                forecastHour: initialHour  // <-- Changed from hardcoded 0
-            });
-        }
-    }
-    
-    async setRun(runString) {
-        const [date, run] = runString.split(':');
-        if (date !== this.state.date || run !== this.state.run) {
-            await this.setState({ date, run, forecastHour: 0 });
-        }
-    }
-
-    async setUnits(newUnits) {
-        if (newUnits === this.state.units || !['metric', 'imperial'].includes(newUnits)) return;
-        await this.setState({ units: newUnits });
-    }
-    
-    async setMRMSVariable(variable) {
-        const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
-        const initialTimestamp =
-            sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
-
-        await this.setState({
-            variable,
-            isMRMS: true,
-            isSatellite: false,
-            satelliteInstrumentId: null,
-            satelliteSectorLabel: null,
-            satelliteChannel: null,
-            satelliteTimestamp: null,
-            mrmsTimestamp: initialTimestamp,
-        });
-    }
-
-    async setMRMSTimestamp(timestamp) {
-        if (!this.state.isMRMS) return;
-        await this.setState({ mrmsTimestamp: timestamp });
-    }
-
-    async setSatelliteTimestamp(timestamp) {
-        if (!this.state.isSatellite) return;
-        await this.setState({ satelliteTimestamp: timestamp != null ? Number(timestamp) : null });
-    }
-
-    /**
-     * How many hours of satellite frames to include in the timeline (positive, at most 12 hours).
-     * API default: `layerOptions.satelliteDurationValue` on construction.
-     */
-    async setSatelliteDurationValue(value) {
-        const v = formatTimelineDurationValue(value);
-        await this.setState({ satelliteDurationValue: v });
-        if (!this.state.isSatellite || !this.state.satelliteInstrumentId) return;
-        const timeline = this._computeSatelliteTimeline();
-        const tsList = [...(timeline.unixTimes || [])]
-            .map((t) => Number(t))
-            .filter((t) => !Number.isNaN(t))
-            .sort((a, b) => a - b);
-        if (tsList.length === 0) return;
-        const cur = this.state.satelliteTimestamp;
-        const curN = cur == null ? null : Number(cur);
-        if (curN == null || !tsList.includes(curN)) {
-            await this.setState({ satelliteTimestamp: tsList[tsList.length - 1] });
-        }
-    }
-
-    /**
-     * Set satellite view using spacecraft id, sector, and channel/product.
-     * Omitted fields keep the current selection; when not in satellite mode, missing fields use GOES-19 East CONUS / C13 defaults.
-     * @param {{ satelliteId?: string, sector?: string, satelliteSector?: string, satelliteProduct?: string, satelliteChannel?: string, satelliteTimestamp?: number|null }} opts
-     */
-    async setSatelliteSelection(opts = {}) {
-        const cur = this.state.isSatellite ? this.state : null;
-        const tsArg =
-            opts.satelliteTimestamp !== undefined
-                ? opts.satelliteTimestamp
-                : this.state.isSatellite && this.state.satelliteTimestamp != null
-                  ? Number(this.state.satelliteTimestamp)
-                  : undefined;
-        return this.switchMode({
-            mode: 'satellite',
-            satelliteId: opts.satelliteId ?? cur?.satelliteInstrumentId ?? 'GOES19-EAST',
-            satelliteSector: opts.satelliteSector ?? opts.sector ?? cur?.satelliteSectorLabel ?? 'conus',
-            satelliteProduct:
-                opts.satelliteProduct ?? opts.satelliteChannel ?? cur?.satelliteChannel ?? 'C13',
-            satelliteTimestamp: tsArg,
-        });
-    }
-
-    /**
-     * How many hours of MRMS frames to include in the timeline (positive, at most 12 hours).
-     * API default: `layerOptions.mrmsDurationValue` on construction.
-     */
-    async setMRMSDurationValue(value) {
-        const v = formatTimelineDurationValue(value);
-        await this.setState({ mrmsDurationValue: v });
-        if (!this.state.isMRMS || !this.state.variable) return;
-        const filtered = this._getFilteredMrmsTimestampsForVariable(this.state.variable);
-        if (filtered.length === 0) return;
-        const cur = this.state.mrmsTimestamp;
-        const curN = cur == null ? null : Number(cur);
-        if (curN == null || !filtered.includes(curN)) {
-            await this.setState({ mrmsTimestamp: filtered[filtered.length - 1] });
-        }
-    }
-
-    /**
-     * NEXRAD sweep listing / scrub window in hours (independent of MRMS duration).
-     * API default: `layerOptions.nexradDurationValue` on construction.
-     */
-    async setNexradDurationValue(value) {
-        const v = formatTimelineDurationValue(value);
-        await this.setState({ nexradDurationValue: v });
-        if (!this.state.isNexrad || !this.state.nexradSite) return;
-        await this.refreshNexradTimes();
-        const nk = this._nexradTimesCacheKey();
-        const filtered = this._getFilteredNexradTimestampsForVariable(
-            nk ? this.nexradTimesByStation[nk]?.unixTimes || [] : [],
-        );
-        if (filtered.length === 0) return;
-        const cur = this.state.nexradTimestamp;
-        const curN = cur == null ? null : Number(cur);
-        if (curN == null || !filtered.includes(curN)) {
-            await this.setState({ nexradTimestamp: filtered[filtered.length - 1] });
-        }
-    }
-
-    async switchMode(options) {
-        let { mode, variable, model, forecastHour, mrmsTimestamp, satelliteTimestamp } = options;
-        if (!mode) {
-            return;
-        }
-        if (mode === 'model' && !model) {
-            return;
-        }
-        if ((mode === 'mrms' || mode === 'model') && !variable) {
-            return;
-        }
-        let targetState = {};
-        if (mode === 'satellite') {
-            const satelliteInstrumentId = options.satelliteId ?? 'GOES19-EAST';
-            const satelliteSectorLabel = resolveSatelliteSectorLabel(
-                options.satelliteSector ?? options.sector ?? 'conus',
-            );
-            const satelliteChannel =
-                options.satelliteProduct ?? options.satelliteChannel ?? variable ?? 'C13';
-            const channelToken = satelliteChannel;
-            // Emit satellite mode immediately so map layers (e.g. model grid) clear before listing fetch finishes.
-            await this.setState({
-                isSatellite: true,
-                isMRMS: false,
-                isNexrad: false,
-                satelliteInstrumentId,
-                satelliteSectorLabel,
-                satelliteChannel,
-                variable: channelToken,
-                satelliteTimestamp: null,
-                mrmsTimestamp: null,
-                date: null,
-                run: null,
-                forecastHour: 0,
-            });
-
-            await this.fetchSatelliteListing(true);
-            const allFiles = this.satelliteListing?.objects?.map((o) => o.key) || [];
-            const sectorName = satelliteSectorLabel;
-            const tier = this.state.satelliteTier || 'basic';
-            const durationOpt = resolveSatelliteDurationOption(sectorName, tier, this.state.satelliteDurationValue);
-            const timeline = buildSatelliteTimelineForSelection(
-                { satelliteInstrumentId, satelliteSectorLabel, satelliteChannel },
-                allFiles,
-                durationOpt,
-            );
-            const tsList = [...(timeline.unixTimes || [])].sort((a, b) => a - b);
-            let finalTs = satelliteTimestamp !== undefined ? satelliteTimestamp : null;
-            if (finalTs == null && tsList.length > 0) {
-                finalTs = tsList[tsList.length - 1];
-            }
-            await this.setState({
-                satelliteTimestamp: finalTs != null ? Number(finalTs) : null,
-            });
-            return;
-        } else if (mode === 'mrms') {
-            const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
-            let finalTimestamp = mrmsTimestamp;
-            if (finalTimestamp === undefined) {
-                finalTimestamp =
-                    sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
-            } else if (sortedTimestamps.length > 0) {
-                const n = Number(finalTimestamp);
-                if (!sortedTimestamps.includes(n)) {
-                    finalTimestamp = sortedTimestamps[sortedTimestamps.length - 1];
-                }
-            }
-            targetState = {
-                isMRMS: true,
-                isSatellite: false,
-                isNexrad: false,
-                variable: variable,
-                mrmsTimestamp: finalTimestamp,
-                model: this.state.model, date: null, run: null, forecastHour: 0,
-                satelliteInstrumentId: null,
-                satelliteSectorLabel: null,
-                satelliteChannel: null,
-                satelliteTimestamp: null,
-            };
-        } else if (mode === 'model') {
-            const latestRun = findLatestModelRun(this.modelStatus, model);
-            if (!latestRun) {
-                return;
-            }
-            
-            // --- NEW CODE: Determine initial forecast hour for switchMode ---
-            let initialHour = forecastHour !== undefined ? forecastHour : 0;
-            
-            // If switching to HRRR with ptypeRefl and hour is 0, use hour 1
-            if (model === 'hrrr' && variable === 'ptypeRefl' && initialHour === 0) {
-                const availableHours = resolveModelRunHours(
-                    this.modelStatus,
-                    model,
-                    latestRun.date,
-                    latestRun.run
-                ).hours || [];
-                initialHour = availableHours.find(hour => hour !== 0) || 0;
-            }
-            // --- END NEW CODE ---
-            
-            targetState = {
-                isMRMS: false,
-                isSatellite: false,
-                isNexrad: false,
-                model: model,
-                variable: variable,
-                date: latestRun.date,
-                run: latestRun.run,
-                forecastHour: initialHour,  // <-- Changed
-                mrmsTimestamp: null,
-                satelliteInstrumentId: null,
-                satelliteSectorLabel: null,
-                satelliteChannel: null,
-                satelliteTimestamp: null,
-            };
-        } else if (mode === 'nexrad') {
-            const nexradProduct = options.nexradProduct || 'REF';
-            const p = nexradProduct.toUpperCase();
-            const site = options.nexradSite ?? null;
-            let tilt =
-                options.nexradTilt != null
-                    ? Number(options.nexradTilt)
-                    : site != null
-                      ? getDefaultRadarTilt(site)
-                      : null;
-            await this.setState({
-                isNexrad: true,
-                isMRMS: false,
-                isSatellite: false,
-                nexradSite: site,
-                nexradProduct: p,
-                nexradTilt: tilt,
-                nexradTimestamp: options.nexradTimestamp != null ? Number(options.nexradTimestamp) : null,
-                nexradStormRelative: options.nexradStormRelative === true,
-                nexradShowSitesPicker: options.nexradShowSitesPicker !== false,
-                ...(options.nexradDurationValue != null
-                    ? { nexradDurationValue: formatTimelineDurationValue(options.nexradDurationValue) }
-                    : {}),
-                mrmsTimestamp: null,
-                satelliteInstrumentId: null,
-                satelliteSectorLabel: null,
-                satelliteChannel: null,
-                satelliteTimestamp: null,
-                date: null,
-                run: null,
-                forecastHour: 0,
-            });
-            const manifest = await fetchRadarTiltsManifestFromNetwork();
-            if (manifest) setRadarTiltsManifest(manifest);
-            if (site) {
-                await this.refreshNexradTimes();
-                const filtered = this._getFilteredNexradTimestampsForVariable(
-                    this.nexradTimesByStation[this._nexradTimesCacheKey()]?.unixTimes || [],
-                );
-                let ts =
-                    options.nexradTimestamp != null
-                        ? Number(options.nexradTimestamp)
-                        : this.state.nexradTimestamp;
-                if (ts == null && filtered.length > 0) ts = filtered[filtered.length - 1];
-                else if (ts != null && filtered.length > 0 && !filtered.includes(ts)) {
-                    ts = filtered[filtered.length - 1];
-                }
-                await this.setState({ nexradTimestamp: ts });
-            }
-            return;
-        } else {
-            return;
-        }
-        await this.setState(targetState);
-    }
-
-    /**
-     * Keep `nexradTilt` on a coalesced elevation (same rules as aguacero-frontend tilt controls).
-     */
-    async _snapNexradTiltToAvailableOptions() {
-        const s = this.state;
-        if (!s.isNexrad || !s.nexradSite) return;
-        const raw = getRawNexradTiltsForCoalesce(
-            s.nexradSite,
-            s.nexradDataSource || 'level2',
-            s.nexradProduct || 'REF',
-        );
-        if (!raw.length) return;
-        const t = s.nexradTilt;
-        const target = t != null && Number.isFinite(Number(t)) ? Number(t) : getDefaultRadarTilt(s.nexradSite);
-        const canonical = nexradLayerTiltToDisplayOption(target, raw);
-        const match = (a, b) => Math.abs(Number(a) - Number(b)) < 1e-4;
-        if (match(s.nexradTilt, canonical)) return;
-        await this.setState({ nexradTilt: canonical });
-    }
-
-    async refreshNexradTimes() {
-        const s0 = this.state;
-        if (!s0.isNexrad || !s0.nexradSite) return;
-        await this._snapNexradTiltToAvailableOptions();
-        const s = this.state;
-        const listingHours = this._nexradListingWindowHours();
-        const out = await fetchNexradTimesListing({
-            stationId: s.nexradSite,
-            variable: s.nexradProduct || 'REF',
-            elev: s.nexradTilt,
-            source: s.nexradDataSource || 'level2',
-            level3StormRelative: s.nexradStormRelative,
-            level3Product: getNexradLevel3EntryByRadarKey(s.nexradProduct)?.product,
-            listingWindowHours: listingHours,
-        });
-        const nk = this._nexradTimesCacheKey();
-        if (!nk) return;
-        this.nexradTimesByStation[nk] = {
-            unixTimes: out.unixTimes,
-            timeToKeyMap: out.timeToKeyMap,
-            level3MotionTimeToKeyMap: out.level3MotionTimeToKeyMap,
-            listWindowHours: listingHours,
-        };
-        if (out.level3MotionKey && out.level3MotionUnixTimes?.length) {
-            this.nexradTimesByStation[out.level3MotionKey] = {
-                unixTimes: out.level3MotionUnixTimes,
-                timeToKeyMap: out.level3MotionTimeToKeyMap,
-                listWindowHours: listingHours,
-            };
-        }
-        if (out.l2StormMotionListKey && out.level3MotionUnixTimes?.length) {
-            this.nexradTimesByStation[out.l2StormMotionListKey] = {
-                unixTimes: out.level3MotionUnixTimes,
-                timeToKeyMap: out.level3MotionTimeToKeyMap,
-                listWindowHours: listingHours,
-            };
-        }
-        const filtered = this._getFilteredNexradTimestampsForVariable(out.unixTimes || []);
-        const map = out.timeToKeyMap || {};
-        if (filtered.length > 0) {
-            const cur = this.state.nexradTimestamp != null ? Number(this.state.nexradTimestamp) : null;
-            const hasKey = cur != null && Object.prototype.hasOwnProperty.call(map, String(cur));
-            const inWindow = cur != null && filtered.includes(cur);
-            if (cur == null || !inWindow || !hasKey) {
-                this.state.nexradTimestamp = filtered[filtered.length - 1];
-            }
-        } else if (this.state.nexradTimestamp != null) {
-            this.state.nexradTimestamp = null;
-        }
-        this._emitStateChange();
-    }
-
-    async setNexradSite(siteId) {
-        if (!this.state.isNexrad) return;
-        const tilt = siteId ? getDefaultRadarTilt(siteId) : null;
-        await this.setState({
-            nexradSite: siteId || null,
-            nexradTilt: tilt,
-            nexradTimestamp: null,
-        });
-        await this.refreshNexradTimes();
-        const filtered = this._getFilteredNexradTimestampsForVariable(
-            this.nexradTimesByStation[this._nexradTimesCacheKey()]?.unixTimes || [],
-        );
-        if (filtered.length > 0) {
-            await this.setState({ nexradTimestamp: filtered[filtered.length - 1] });
-        }
-    }
-
-    async setNexradProduct(product) {
-        if (!this.state.isNexrad) return;
-        const p = (product || 'REF').toUpperCase();
-        await this.setState({ nexradProduct: p });
-        await this.refreshNexradTimes();
-        const filtered = this._getFilteredNexradTimestampsForVariable(
-            this.nexradTimesByStation[this._nexradTimesCacheKey()]?.unixTimes || [],
-        );
-        if (filtered.length > 0) {
-            await this.setState({ nexradTimestamp: filtered[filtered.length - 1] });
-        }
-    }
-
-    async setNexradTilt(tilt) {
-        if (!this.state.isNexrad || !this.state.nexradSite) return;
-        await this.setState({ nexradTilt: tilt != null ? Number(tilt) : null });
-        await this.refreshNexradTimes();
-    }
-
-    /**
-     * Opt-in storm-relative velocity (L3: N0G + N0S). When off (default), only base radial velocity is used (faster).
-     * @param {boolean} enabled
-     */
-    async setNexradStormRelative(enabled) {
-        if (!this.state.isNexrad) return;
-        await this.setState({ nexradStormRelative: Boolean(enabled) });
-        await this.refreshNexradTimes();
-    }
-
-    async setNexradTimestamp(ts) {
-        if (!this.state.isNexrad) return;
-        await this.setState({ nexradTimestamp: ts != null ? Number(ts) : null });
-    }
-
-    // --- Data and Calculation Methods ---
-
-    _ensureGridDecodeWorker() {
-        if (this._gridDecodeWorkerDisabled) {
-            return null;
-        }
-        if (this._gridDecodeWorker) {
-            return this._gridDecodeWorker;
-        }
-        if (typeof Worker === 'undefined') {
-            this._gridDecodeWorkerDisabled = true;
-            return null;
-        }
-        try {
-            this._gridDecodeWorker = new Worker(new URL('./gridDecodeWorker.js', import.meta.url), {
-                type: 'module',
-            });
-            this._gridDecodeWorker.addEventListener('error', () => {
-                this._gridDecodeWorkerDisabled = true;
-                if (this._gridDecodeWorker) {
-                    this._gridDecodeWorker.terminate();
-                    this._gridDecodeWorker = null;
-                }
-            });
-        } catch {
-            this._gridDecodeWorkerDisabled = true;
-            return null;
-        }
-        return this._gridDecodeWorker;
-    }
-
-    /**
-     * Offloads zstd + delta decode + transform to a Worker when available; falls back to main-thread
-     * {@link processCompressedGrid}. Uses a copy for postMessage transfer so the original `compressedData`
-     * stays valid if the Worker path fails.
-     */
-    _decodeGridPayload(compressedData, encoding) {
-        const worker = this._ensureGridDecodeWorker();
-        if (!worker) {
-            return Promise.resolve(processCompressedGrid(compressedData, encoding));
-        }
-        const payload = compressedData.slice();
-        return new Promise((resolve, reject) => {
-            const id = ++this._gridDecodeMsgId;
-            const onMsg = (e) => {
-                if (!e.data || e.data.id !== id) {
-                    return;
-                }
-                worker.removeEventListener('message', onMsg);
-                worker.removeEventListener('error', onErr);
-                if (e.data.error) {
-                    reject(new Error(e.data.error));
-                    return;
-                }
-                const data = new Uint8Array(e.data.dataBuffer, e.data.dataByteOffset, e.data.dataByteLength);
-                resolve({ data, encoding: e.data.encoding });
-            };
-            const onErr = (err) => {
-                worker.removeEventListener('message', onMsg);
-                worker.removeEventListener('error', onErr);
-                reject(err);
-            };
-            worker.addEventListener('message', onMsg);
-            worker.addEventListener('error', onErr);
-            try {
-                worker.postMessage(
-                    {
-                        id,
-                        encoding,
-                        compressedBuffer: payload.buffer,
-                        compressedByteOffset: payload.byteOffset,
-                        compressedByteLength: payload.byteLength,
-                    },
-                    [payload.buffer]
-                );
-            } catch (err) {
-                worker.removeEventListener('message', onMsg);
-                worker.removeEventListener('error', onErr);
-                reject(err);
-            }
-        });
-    }
-
-    async _loadGridData(state) {
-        if (this.isReactNative) {
-            return null;
-        }
-        if (state.isNexrad) {
-            return null;
-        }
-        const { model, date, run, forecastHour, variable, isMRMS, mrmsTimestamp } = state;
-        let effectiveSmoothing = 0;
-        const customVariableSettings = this.customColormaps[variable];
-        if (customVariableSettings && typeof customVariableSettings.smoothing === 'number') {
-            effectiveSmoothing = customVariableSettings.smoothing;
-        }
-        let resourcePath;
-        let dataUrlIdentifier;
-        if (isMRMS) {
-            if (!mrmsTimestamp) return null;
-            const mrmsDate = new Date(mrmsTimestamp * 1000);
-            const y = mrmsDate.getUTCFullYear(), m = (mrmsDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = mrmsDate.getUTCDate().toString().padStart(2, '0');
-            dataUrlIdentifier = `mrms-${mrmsTimestamp}-${variable}-${effectiveSmoothing}`;
-            resourcePath = `/grids/mrms/${y}${m}${d}/${mrmsTimestamp}/0/${variable}/${effectiveSmoothing}`;
-        } else {
-            dataUrlIdentifier = `${model}-${date}-${run}-${forecastHour}-${variable}-${effectiveSmoothing}`;
-            resourcePath = `/grids/${model}/${date}/${run}/${forecastHour}/${variable}/${effectiveSmoothing}`;
-        }
-        if (this.dataCache.has(dataUrlIdentifier)) {
-            return this.dataCache.get(dataUrlIdentifier);
-        }
-
-        const abortController = new AbortController();
-        this.abortControllers.set(dataUrlIdentifier, abortController);
-                
-        const loadPromise = (async () => {
-            if (!this.apiKey) {
-                throw new Error('API key is not configured.');
-            }
-            try {
-                const baseUrl = `${this.baseGridUrl}${resourcePath}`;
-                const urlWithApiKeyParam = `${baseUrl}?apiKey=${this.apiKey}`;
-                const headers = { 'x-api-key': this.apiKey };
-                if (this.bundleId && this.isReactNative) {
-                    headers['x-app-identifier'] = this.bundleId;
-                }
-                
-                const response = await fetch(urlWithApiKeyParam, { 
-                    headers: headers,
-                    signal: abortController.signal
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch grid data: ${response.status} ${response.statusText}`);
-                }
-                const { data: b64Data, encoding } = await response.json();
-                const compressedData = Uint8Array.from(atob(b64Data), c => c.charCodeAt(0));
-
-                let gridPayload;
-                try {
-                    gridPayload = await this._decodeGridPayload(compressedData, encoding);
-                } catch {
-                    gridPayload = processCompressedGrid(compressedData, encoding);
-                }
-                
-                this.abortControllers.delete(dataUrlIdentifier);
-                
-                return { data: gridPayload.data, encoding: gridPayload.encoding };
-
-            } catch (error) {
-                this.dataCache.delete(dataUrlIdentifier);
-                this.abortControllers.delete(dataUrlIdentifier);
-                return null;
-            }
-        })();
-        this.dataCache.set(dataUrlIdentifier, loadPromise);
-        return loadPromise;
-    }
-
-    cancelAllRequests() {
-        // Abort all in-flight requests
-        this.abortControllers.forEach((controller, key) => {
-            controller.abort();
-        });
-        
-        // Clear both maps
-        this.abortControllers.clear();
-        this.dataCache.clear();
-    }
-    
-    async getValueAtLngLat(lng, lat) {
-        if (this.state.isSatellite || this.state.isNexrad) {
-            return null;
-        }
-        const { variable, isMRMS, mrmsTimestamp, model, date, run, forecastHour, units } = this.state;
-        if (!variable) return null;
-
-        const gridIndices = this._getGridIndexFromLngLat(lng, lat);
-        if (!gridIndices) return null;
-
-        const { i, j } = gridIndices;
-        const gridModel = isMRMS ? 'mrms' : model;
-        const normalizedGridModel = this._normalizeModelName(gridModel);
-        const { nx } = COORDINATE_CONFIGS[normalizedGridModel].grid_params;
-
-        const customSettings = this.customColormaps[variable];
-        const effectiveSmoothing = (customSettings && typeof customSettings.smoothing === 'number') ? customSettings.smoothing : 0;
-        
-        const dataUrlIdentifier = isMRMS
-            ? `mrms-${mrmsTimestamp}-${variable}-${effectiveSmoothing}`
-            : `${model}-${date}-${run}-${forecastHour}-${variable}-${effectiveSmoothing}`;
-
-        const gridDataPromise = this.dataCache.get(dataUrlIdentifier);
-        if (!gridDataPromise) return null;
-
-        try {
-            const gridData = await gridDataPromise;
-            if (!gridData || !gridData.data) return null;
-
-            const index1D = j * nx + i;
-            const byteValue = gridData.data[index1D];
-            const signedQuantizedValue = byteValue - 128;
-
-            // --- START OF FIX ---
-            // You were missing 'scale_type' in this destructuring assignment.
-            const { scale, offset, missing_quantized, scale_type } = gridData.encoding;
-            // --- END OF FIX ---
-
-            if (signedQuantizedValue === missing_quantized) return null;
-
-            const intermediateValue = signedQuantizedValue * scale + offset;
-
-            // Step 2: Apply non-linear scaling if specified
-            let nativeValue = intermediateValue;
-            if (scale_type === 'sqrt') {
-                // Square the value while preserving its sign
-                nativeValue = intermediateValue < 0 ? -(intermediateValue * intermediateValue) : (intermediateValue * intermediateValue);
-            }
-            const { colormap, baseUnit } = this._getColormapForVariable(variable);
-
-            // If the value is outside the colormap's bounds, return null.
-            if (colormap && colormap.length >= 2) {
-                const minBound = colormap[0];
-                const maxBound = colormap[colormap.length - 2];
-                if (nativeValue < minBound || nativeValue > maxBound) {
-                    return null;
-                }
-            }
-
-            let dataNativeUnit = baseUnit || (DICTIONARIES.fld[variable] || {}).defaultUnit || 'none';
-            
-            const displayUnit = this._getTargetUnit(dataNativeUnit, units);
-            const conversionFunc = getUnitConversionFunction(dataNativeUnit, displayUnit);
-            let displayValue = conversionFunc ? conversionFunc(nativeValue) : nativeValue;
-
-            return {
-                lngLat: { lng, lat },
-                variable: {
-                    code: variable,
-                    name: this.getVariableDisplayName(variable),
-                },
-                value: displayValue,
-                unit: displayUnit,
-            };
-        } catch (error) {
-            return null;
-        }
-    }
-
-    getAvailableVariables(modelName = null) {
-        const model = modelName || this.state.model;
-        return MODEL_CONFIGS[model]?.vars || [];
-    }
-
-    getVariableDisplayName(variableCode) {
-        const varInfo = DICTIONARIES.fld[variableCode];
-        return varInfo?.displayName || varInfo?.name || variableCode;
-    }
-
-    _getColormapForVariable(variable) {
-        if (!variable) return { colormap: [], baseUnit: '' };
-        
-        if (this.customColormaps[variable] && this.customColormaps[variable].colormap) {
-            return {
-                colormap: this.customColormaps[variable].colormap,
-                baseUnit: this.customColormaps[variable].baseUnit || ''
-            };
-        }
-        
-        const colormapKey = DICTIONARIES.variable_cmap[variable] || variable;
-        const customColormap = this.customColormaps[colormapKey];
-        if (customColormap && customColormap.colormap) {
-            return { colormap: customColormap.colormap, baseUnit: customColormap.baseUnit || '' };
-        }
-        
-        const defaultColormapData = DEFAULT_COLORMAPS[colormapKey];
-        if (defaultColormapData && defaultColormapData.units) {
-            // ✅ Get defaultUnit from the field dictionary
-            const fieldInfo = DICTIONARIES.fld[variable] || {};
-            const baseUnit = fieldInfo.defaultUnit || Object.keys(defaultColormapData.units)[0];
-            
-            const unitData = defaultColormapData.units[baseUnit];
-            if (unitData && unitData.colormap) {
-                return { colormap: unitData.colormap, baseUnit: baseUnit };
-            }
-        }
-        return { colormap: [], baseUnit: '' };
-    }
-
-    _convertColormapUnits(colormap, fromUnits, toUnits) {
-        if (fromUnits === toUnits) return colormap;
-        const conversionFunc = getUnitConversionFunction(fromUnits, toUnits);
-        if (!conversionFunc) return colormap;
-        const newColormap = [];
-        for (let i = 0; i < colormap.length; i += 2) {
-            newColormap.push(conversionFunc(colormap[i]), colormap[i + 1]);
-        }
-        return newColormap;
-    }
-
-    _normalizeModelName(modelName) {
-        const mapping = { 'hrrr': ['mpashn', 'mpasrt', 'mpasht', 'hrrrsub', 'rrfs', 'namnest', 'mpasrn', 'mpasrn3', 'mpasht2'], 'arw': ['arw2', 'fv3', 'href'], 'rtma': ['nbm'], 'ecmwf': ['ecmwfaifs'], 'gfs': ['arpege', 'graphcastgfs'] };
-        for (const [normalized, aliases] of Object.entries(mapping)) { if (aliases.includes(modelName)) return normalized; }
-        return modelName;
-    }
-
-    _getGridCornersAndDef(model) {
-        const normalizedModel = this._normalizeModelName(model);
-        const gridDef = { ...COORDINATE_CONFIGS[normalizedModel], modelName: model };
-        if (!gridDef) return null;
-        const { nx, ny } = gridDef.grid_params;
-        const gridType = gridDef.type;
-        let corners;
-        if (gridType === 'latlon') {
-            let { lon_first, lat_first, lat_last, lon_last, dx_degrees, dy_degrees } = gridDef.grid_params;
-            corners = {
-                lon_tl: lon_first, lat_tl: lat_first,
-                lon_tr: lon_last !== undefined ? lon_last : (lon_first + (nx - 1) * dx_degrees), lat_tr: lat_first,
-                lon_bl: lon_first, lat_bl: lat_last !== undefined ? lat_last : (lat_first + (ny - 1) * dy_degrees),
-                lon_br: lon_last !== undefined ? lon_last : (lon_first + (nx - 1) * dx_degrees), lat_br: lat_last !== undefined ? lat_last : (lat_first + (ny - 1) * dy_degrees),
-            };
-        } else if (gridType === 'rotated_latlon') {
-            const [lon_tl, lat_tl] = hrdpsObliqueTransform(gridDef.grid_params.lon_first, gridDef.grid_params.lat_first);
-            const [lon_tr, lat_tr] = hrdpsObliqueTransform(gridDef.grid_params.lon_first + (nx - 1) * gridDef.grid_params.dx_degrees, gridDef.grid_params.lat_first);
-            const [lon_bl, lat_bl] = hrdpsObliqueTransform(gridDef.grid_params.lon_first, gridDef.grid_params.lat_first + (ny - 1) * gridDef.grid_params.dy_degrees);
-            const [lon_br, lat_br] = hrdpsObliqueTransform(gridDef.grid_params.lon_first + (nx - 1) * gridDef.grid_params.dx_degrees, gridDef.grid_params.lat_first + (ny - 1) * gridDef.grid_params.dy_degrees);
-            corners = { lon_tl, lat_tl, lon_tr, lat_tr, lon_bl, lat_bl, lon_br, lat_br };
-        } else if (gridType === 'lambert_conformal_conic' || gridType === 'polar_ stereographic') {
-            let projString = Object.entries(gridDef.proj_params).map(([k,v]) => `+${k}=${v}`).join(' ');
-            if(gridType === 'polar_stereographic') projString += ' +lat_0=90';
-            const { x_origin, y_origin, dx, dy } = gridDef.grid_params;
-            const [lon_tl, lat_tl] = proj4(projString, 'EPSG:4326', [x_origin, y_origin]);
-            const [lon_tr, lat_tr] = proj4(projString, 'EPSG:4326', [x_origin + (nx - 1) * dx, y_origin]);
-            const [lon_bl, lat_bl] = proj4(projString, 'EPSG:4326', [x_origin, y_origin + (ny - 1) * dy]);
-            const [lon_br, lat_br] = proj4(projString, 'EPSG:4326', [x_origin + (nx - 1) * dx, y_origin + (ny - 1) * dy]);
-            corners = { lon_tl, lat_tl, lon_tr, lat_tr, lon_bl, lat_bl, lon_br, lat_br };
-        } else {
-            return null;
-        }
-        return { corners, gridDef };
-    }
-
-    _getTargetUnit(defaultUnit, system) {
-        if (system === 'metric') {
-            if (['°F', '°C', 'fahrenheit', 'celsius'].includes(defaultUnit)) return '°C';
-            if (['kts', 'mph', 'm/s'].includes(defaultUnit)) return 'km/h';
-            if (['in', 'mm', 'cm'].includes(defaultUnit)) return 'mm';
-        }
-        if (system === 'imperial') {
-            if (['°F', '°C', 'fahrenheit', 'celsius'].includes(defaultUnit)) return '°F';
-            if (['kts', 'mph', 'm/s'].includes(defaultUnit)) return 'mph';
-            if (['in', 'mm', 'cm'].includes(defaultUnit)) return 'in';
-        }
-        return defaultUnit;
-    }
-
-    _getGridIndexFromLngLat(lng, lat) {
-        const gridModel = this.state.isMRMS ? 'mrms' : this.state.model;
-        const normalizedGridModel = this._normalizeModelName(gridModel);
-        const gridDef = COORDINATE_CONFIGS[normalizedGridModel];
-        if (!gridDef) return null;
-        const { nx, ny } = gridDef.grid_params;
-        const pixelCoords = this.latLonToGridPixel(lat, lng, gridDef, gridModel);
-        if (!pixelCoords || !isFinite(pixelCoords.x) || !isFinite(pixelCoords.y) || pixelCoords.x < 0 || pixelCoords.y < 0) return null;
-        const i = Math.round(pixelCoords.x);
-        const j = Math.round(pixelCoords.y);
-        if (i >= 0 && i < nx && j >= 0 && j < ny) return { i, j };
-        return null;
-    }
-    
-    latLonToProjected(lat, lon, gridDef) {
-        if (!isFinite(lat) || !isFinite(lon)) throw new Error(`Invalid coordinates: lat=${lat}, lon=${lon}`);
-        const gridType = gridDef.type;
-        if (gridType === 'latlon') return { x: lon, y: lat }; 
-        let projString = Object.entries(gridDef.proj_params).map(([k,v]) => `+${k}=${v}`).join(' ');
-        if(gridType === 'polar_stereographic') projString += ' +lat_0=90';
-        const projected = proj4('EPSG:4326', projString, [lon, lat]);
-        return { x: projected[0], y: projected[1] };
-    }
-    
-    latLonToGridPixel(lat, lon, gridDef, modelName) {
-        if (!gridDef) return null;
-        if (modelName === 'rgem' && gridDef.type === 'polar_stereographic') return this.latLonToGridPixelPolarStereographic(lat, lon, gridDef);
-        const projected = this.latLonToProjected(lat, lon, gridDef);
-        let x, y;
-        const gridOrigin = { x: gridDef.grid_params.lon_first, y: gridDef.grid_params.lat_first };
-        const gridPixelSize = { x: gridDef.grid_params.dx_degrees, y: gridDef.grid_params.dy_degrees };
-        if (gridDef.type === 'latlon' || gridDef.type === 'rotated_latlon') {
-            let adjustedLon = projected.x;
-            if (modelName === 'mrms') {
-                if (adjustedLon < 0) adjustedLon += 360;
-                x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
-                y = (gridOrigin.y - projected.y) / gridPixelSize.y;
-            } else {
-                const isGFSType = gridDef.grid_params && gridDef.grid_params.lon_first === 0.0 && Math.abs(gridDef.grid_params.lat_first) === 90.0;
-                const isECMWFType = gridDef.grid_params && gridDef.grid_params.lon_first === 180.0 && gridDef.grid_params.lat_first === 90.0;
-                const isGEMType = modelName === 'gem' || (gridDef.grid_params.lon_first === 180.0 && gridDef.grid_params.lat_first === -90.0 && gridDef.grid_params.lon_last === 179.85);
-                if (isGEMType) {
-                    while (adjustedLon < gridOrigin.x) adjustedLon += 360;
-                    x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
-                    y = (projected.y - gridOrigin.y) / gridPixelSize.y;
-                    return { x, y };
-                }
-                let isFlippedGrid = isECMWFType ? true : (gridDef.grid_params.lat_first < (gridDef.grid_params.lat_last || (gridDef.grid_params.ny - 1) * gridDef.grid_params.dy_degrees));
-                if (isGFSType) adjustedLon = projected.x + 180;
-                else if (isECMWFType) { if (adjustedLon < gridOrigin.x) adjustedLon += 360; }
-                else if (['arome1', 'arome25', 'arpegeeu', 'iconeu', 'icond2'].includes(modelName)) {
-                    while (adjustedLon < 0) adjustedLon += 360;
-                    while (adjustedLon >= 360) adjustedLon -= 360;
-                    x = (adjustedLon >= gridOrigin.x) ? (adjustedLon - gridOrigin.x) / gridPixelSize.x : (adjustedLon + 360 - gridOrigin.x) / gridPixelSize.x;
-                    if (['arome1', 'arome25', 'arpegeeu'].includes(modelName)) y = (gridOrigin.y - projected.y) / Math.abs(gridPixelSize.y);
-                    else if (['iconeu', 'icond2'].includes(modelName)) y = (projected.y - gridOrigin.y) / gridPixelSize.y;
-                    return { x, y };
-                } else {
-                    const lonFirst = gridOrigin.x;
-                    if (lonFirst > 180 && adjustedLon < 0) adjustedLon += 360;
-                    else if (lonFirst < 0 && adjustedLon > 180) adjustedLon -= 360;
-                }
-                x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
-                if (isFlippedGrid) {
-                    if (isECMWFType) y = (gridOrigin.y - projected.y) / Math.abs(gridPixelSize.y);
-                    else {
-                        const maxLat = gridDef.grid_params.lat_last || (gridDef.grid_params.ny - 1) * gridDef.grid_params.dy_degrees;
-                        y = (maxLat - projected.y) / Math.abs(gridPixelSize.y);
-                    }
-                } else y = (projected.y - gridOrigin.y) / gridPixelSize.y;
-            }
-        } else {
-            const projOrigin = { x: gridDef.grid_params.x_origin, y: gridDef.grid_params.y_origin };
-            const projPixelSize = { x: gridDef.grid_params.dx, y: gridDef.grid_params.dy };
-            x = (projected.x - projOrigin.x) / projPixelSize.x;
-            y = (projOrigin.y - projected.y) / Math.abs(projPixelSize.y);
-        }
-        return { x, y };
-    }
-
-    latLonToGridPixelPolarStereographic(lat, lon, gridDef) {
-        try {
-            const projParams = gridDef.proj_params;
-            let projectionString = `+proj=${projParams.proj}`;
-            Object.keys(projParams).forEach(key => { if (key !== 'proj') projectionString += ` +${key}=${projParams[key]}`; });
-            projectionString += ' +lat_0=90 +no_defs';
-            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
-            const x_min = x_origin;
-            const x_max = x_origin + (nx - 1) * dx;
-            const y_max = y_origin;
-            const y_min = y_origin + (ny - 1) * dy;
-            const [proj_x, proj_y] = proj4('EPSG:4326', projectionString, [lon, lat]);
-            if (!isFinite(proj_x) || !isFinite(proj_y)) return { x: -1, y: -1 };
-            const t_x = (proj_x - x_min) / (x_max - x_min);
-            const t_y = (proj_y - y_max) / (y_min - y_max);
-            const x = t_x * (nx - 1);
-            const y = t_y * (ny - 1);
-            return { x, y };
-        } catch (error) {
-            return { x: -1, y: -1 };
-        }
-    }
-    
-    // --- Status Methods ---
-
-    async fetchModelStatus(force = false) {
-        if (!this.modelStatus || force) {
-            try {
-                const response = await fetch(this.statusUrl);
-                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
-                this.modelStatus = (await response.json()).models;
-            } catch (error) { this.modelStatus = null; }
-        }
-        return this.modelStatus;
-    }
-
-    async fetchMRMSStatus(force = false) {
-        const mrmsStatusUrl = 'https://h3dfvh5pq6euq36ymlpz4zqiha0obqju.lambda-url.us-east-2.on.aws';
-        if (!this.mrmsStatus || force) {
-            try {
-                const response = await fetch(mrmsStatusUrl);
-                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
-                this.mrmsStatus = await response.json();
-            } catch (error) { this.mrmsStatus = null; }
-        }
-        return this.mrmsStatus;
-    }
-
-    async fetchSatelliteListing(force = false) {
-        if (!this.satelliteListing || force) {
-            try {
-                const response = await fetch(SATELLITE_FRAMES_URL);
-                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
-                this.satelliteListing = await response.json();
-            } catch (error) {
-                this.satelliteListing = null;
-            }
-        }
-        return this.satelliteListing;
-    }
-
-    startAutoRefresh(intervalSeconds) {
-        this.stopAutoRefresh();
-        this.autoRefreshIntervalId = setInterval(async () => {
-            await this.fetchModelStatus(true);
-            this._emitStateChange();
-        }, (intervalSeconds || 60) * 1000);
-    }
-
-    stopAutoRefresh() {
-        if (this.autoRefreshIntervalId) {
-            clearInterval(this.autoRefreshIntervalId);
-            this.autoRefreshIntervalId = null;
-        }
-    }
+// AguaceroCore.js - The Headless "Engine"
+
+// --- Non-UI Imports ---
+import { EventEmitter } from './events.js';
+import { COORDINATE_CONFIGS } from './coordinate_configs.js';
+import { getUnitConversionFunction } from './unitConversions.js';
+import { DICTIONARIES, MODEL_CONFIGS } from './dictionaries.js';
+import { DEFAULT_COLORMAPS } from './default-colormaps.js';
+import proj4 from 'proj4';
+import { processCompressedGrid } from './gridDecodePipeline.js';
+import { getBundleId } from './getBundleId';
+import {
+    SATELLITE_FRAMES_URL,
+    buildSatelliteTimelineForSelection,
+    formatTimelineDurationValue,
+    resolveSatelliteSectorLabel,
+    resolveSatelliteDurationOption,
+    parseTimelineDurationHours,
+} from './satellite_support.js';
+import {
+    fetchNexradTimesListing,
+    inferNexradDataSourceForProduct,
+    nexradColormapFldKey,
+    variableToNexradGroup,
+    getAvailableNexradTilts,
+    getRawNexradTiltsForCoalesce,
+} from './nexrad_support.js';
+import { nexradLayerTiltToDisplayOption } from './nexradTiltCoalesce.js';
+import { NEXRAD_LEVEL3_ELEV, getNexradLevel3EntryByRadarKey } from './nexrad_level3_catalog.js';
+import {
+    setRadarTiltsManifest,
+    fetchRadarTiltsManifestFromNetwork,
+    getDefaultRadarTilt,
+    formatTiltForApi,
+    clampNexradTiltForVariable,
+    getRadarTilts,
+} from './nexradTilts.js';
+
+// --- Non-UI Helper Functions ---
+function hrdpsObliqueTransform(rotated_lon, rotated_lat) {
+    const o_lat_p = 53.91148; const o_lon_p = 245.305142;
+    const DEG_TO_RAD = Math.PI / 180.0; const RAD_TO_DEG = 180.0 / Math.PI;
+    const o_lat_p_rad = o_lat_p * DEG_TO_RAD;
+    const rot_lon_rad = rotated_lon * DEG_TO_RAD;
+    const rot_lat_rad = rotated_lat * DEG_TO_RAD;
+    const sin_rot_lat = Math.sin(rot_lat_rad); const cos_rot_lat = Math.cos(rot_lat_rad);
+    const sin_rot_lon = Math.sin(rot_lon_rad); const cos_rot_lon = Math.cos(rot_lon_rad);
+    const sin_o_lat_p = Math.sin(o_lat_p_rad); const cos_o_lat_p = Math.cos(o_lat_p_rad);
+    const sin_lat = cos_o_lat_p * sin_rot_lat + sin_o_lat_p * cos_rot_lat * cos_rot_lon;
+    let lat = Math.asin(sin_lat) * RAD_TO_DEG;
+    const sin_lon_num = cos_rot_lat * sin_rot_lon;
+    const sin_lon_den = -sin_o_lat_p * sin_rot_lat + cos_o_lat_p * cos_rot_lat * cos_rot_lon;
+    let lon = Math.atan2(sin_lon_num, sin_lon_den) * RAD_TO_DEG + o_lon_p;
+    if (lon > 180) lon -= 360; else if (lon < -180) lon += 360;
+    return [lon, lat];
+}
+
+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;
+}
+
+/**
+ * model-status JSON uses string keys for runs (often zero-padded: "00", "06").
+ * Direct lookup modelStatus[model][date][run] fails if state.run is "6" but the key is "06".
+ * Returns the hour list and the run key that matched.
+ */
+function resolveModelRunHours(modelStatus, model, date, run) {
+    const runs = modelStatus?.[model]?.[date];
+    if (!runs || run == null || run === '') {
+        return {
+            hours: [],
+            matchedRunKey: null,
+            availableRunKeys: runs ? Object.keys(runs) : [],
+        };
+    }
+    const runStr = String(run);
+    const candidates = new Set([runStr]);
+    const n = parseInt(runStr, 10);
+    if (!Number.isNaN(n)) {
+        candidates.add(String(n));
+        candidates.add(String(n).padStart(2, '0'));
+        candidates.add(String(n).padStart(3, '0'));
+    }
+    for (const key of candidates) {
+        const h = runs[key];
+        if (h && Array.isArray(h) && h.length > 0) {
+            return { hours: h, matchedRunKey: key, availableRunKeys: Object.keys(runs) };
+        }
+    }
+    if (!Number.isNaN(n)) {
+        for (const k of Object.keys(runs)) {
+            const kn = parseInt(k, 10);
+            if (!Number.isNaN(kn) && kn === n) {
+                const h = runs[k];
+                if (h && Array.isArray(h) && h.length > 0) {
+                    return { hours: h, matchedRunKey: k, availableRunKeys: Object.keys(runs) };
+                }
+            }
+        }
+    }
+    return { hours: [], matchedRunKey: null, availableRunKeys: Object.keys(runs) };
+}
+
+export class AguaceroCore extends EventEmitter {
+    constructor(options = {}) {
+        super();
+        this.isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+        this.apiKey = options.apiKey;
+        /** Passed as CloudFront `userId` for satellite KTX2 URLs (production uses the authenticated account id). */
+        this.userId = options.userId ?? 'sdk-user';
+        this.bundleId = getBundleId();
+        this.baseGridUrl = 'https://d3dc62msmxkrd7.cloudfront.net';
+        /** @type {Worker | null} */
+        this._gridDecodeWorker = null;
+        /** When true, skip Worker and use {@link processCompressedGrid} on the main thread. */
+        this._gridDecodeWorkerDisabled = false;
+        this._gridDecodeMsgId = 0;
+        this.statusUrl = 'https://d3dc62msmxkrd7.cloudfront.net/model-status';
+        this.modelStatus = null;
+        this.mrmsStatus = null;
+        /** @type {{ objects?: Array<{ key: string }> } | null} */
+        this.satelliteListing = null;
+        this.dataCache = new Map();
+        this.abortControllers = new Map();
+        this.isPlaying = false;
+        this.playIntervalId = null;
+        this.playbackSpeed = options.playbackSpeed || 500;
+        this.customColormaps = options.customColormaps || {};
+
+        const userLayerOptions = options.layerOptions || {};
+        // EDIT: Determine initial mode from options
+        const initialMode = userLayerOptions.mode || 'model';
+        const initialVariable = userLayerOptions.variable || null;
+
+        const initialSatellite = initialMode === 'satellite';
+        const initialNexrad = initialMode === 'nexrad';
+        const initialNexradProd = userLayerOptions.nexradProduct || 'REF';
+        const initialNexradDs = inferNexradDataSourceForProduct(initialNexradProd);
+        const initialNexradFld = initialNexrad
+            ? nexradColormapFldKey(initialNexradDs, initialNexradProd)
+            : initialVariable;
+        let initialSatelliteInstrumentId = null;
+        let initialSatelliteSectorLabel = null;
+        let initialSatelliteChannel = null;
+        if (initialSatellite) {
+            initialSatelliteInstrumentId = userLayerOptions.satelliteId ?? 'GOES19-EAST';
+            initialSatelliteSectorLabel = resolveSatelliteSectorLabel(
+                userLayerOptions.satelliteSector ?? userLayerOptions.sector ?? 'conus',
+            );
+            initialSatelliteChannel =
+                userLayerOptions.satelliteProduct ??
+                userLayerOptions.satelliteChannel ??
+                initialVariable ??
+                'C13';
+        }
+        this.state = {
+            model: userLayerOptions.model || 'gfs',
+            // EDIT: Set isMRMS based on the initial mode
+            isMRMS: initialMode === 'mrms' && !initialSatellite && !initialNexrad,
+            mrmsTimestamp: null,
+            variable: initialNexrad
+                ? initialNexradFld
+                : initialSatellite && initialSatelliteInstrumentId
+                  ? initialSatelliteChannel
+                  : initialVariable,
+            date: null,
+            run: null,
+            forecastHour: 0,
+            visible: true,
+            opacity: userLayerOptions.opacity ?? 1,
+            units: options.initialUnit || 'imperial',
+            shaderSmoothingEnabled: options.shaderSmoothingEnabled ?? true,
+            isSatellite: initialSatellite,
+            satelliteInstrumentId: initialSatelliteInstrumentId,
+            satelliteSectorLabel: initialSatelliteSectorLabel,
+            satelliteChannel: initialSatelliteChannel,
+            satelliteTimestamp: userLayerOptions.satelliteTimestamp != null ? Number(userLayerOptions.satelliteTimestamp) : null,
+            satelliteTier: userLayerOptions.satelliteTier || 'basic',
+            satelliteDurationValue: formatTimelineDurationValue(
+                userLayerOptions.satelliteDurationValue != null ? userLayerOptions.satelliteDurationValue : '1',
+            ),
+            mrmsDurationValue: formatTimelineDurationValue(
+                userLayerOptions.mrmsDurationValue != null ? userLayerOptions.mrmsDurationValue : '1',
+            ),
+            nexradDurationValue: formatTimelineDurationValue(
+                userLayerOptions.nexradDurationValue != null ? userLayerOptions.nexradDurationValue : '1',
+            ),
+            isNexrad: initialNexrad,
+            nexradSite: userLayerOptions.nexradSite ?? null,
+            nexradDataSource: initialNexradDs,
+            nexradProduct: initialNexradProd,
+            nexradTilt:
+                userLayerOptions.nexradTilt != null
+                    ? Number(userLayerOptions.nexradTilt)
+                    : userLayerOptions.nexradSite
+                      ? getDefaultRadarTilt(userLayerOptions.nexradSite)
+                      : null,
+            nexradTimestamp: userLayerOptions.nexradTimestamp != null ? Number(userLayerOptions.nexradTimestamp) : null,
+            nexradStormRelative: userLayerOptions.nexradStormRelative === true,
+            /** When true, mapsgl shows clickable NEXRAD site markers (independent of selected site). */
+            nexradShowSitesPicker: userLayerOptions.nexradShowSitesPicker !== false,
+        };
+
+        this.autoRefreshEnabled = options.autoRefresh ?? false;
+        this.autoRefreshIntervalSeconds = options.autoRefreshInterval ?? 60;
+        this.autoRefreshIntervalId = null;
+
+        /** @type {Record<string, { unixTimes?: number[]; timeToKeyMap?: Record<string, string>; listWindowHours?: number }>} */
+        this.nexradTimesByStation = {};
+    }
+
+    async setState(newState) {
+        const patch = { ...newState };
+        if ('satelliteKey' in patch) delete patch.satelliteKey;
+        if ('nexradDataSource' in patch && !('nexradProduct' in patch)) {
+            delete patch.nexradDataSource;
+        }
+        const willBeNexrad =
+            patch.isNexrad !== undefined ? Boolean(patch.isNexrad) : this.state.isNexrad;
+        if (willBeNexrad && 'nexradProduct' in patch && patch.nexradProduct != null) {
+            const p = (patch.nexradProduct || 'REF').toUpperCase();
+            const prevP = (this.state.nexradProduct || 'REF').toUpperCase();
+            const ds = inferNexradDataSourceForProduct(p);
+            patch.nexradProduct = p;
+            patch.nexradDataSource = ds;
+            patch.variable = nexradColormapFldKey(ds, p);
+            if (!('nexradStormRelative' in newState)) {
+                // Default: base radial velocity (L3 N0G only) — one fetch per time; fast scrub.
+                // SRV (N0G + N0S) is opt-in: setNexradStormRelative(true) or pass nexradStormRelative in setState.
+                // Re-selecting the same product (e.g. VEL → VEL) leaves the current SRV flag alone.
+                if (p !== 'VEL' || prevP !== 'VEL') {
+                    patch.nexradStormRelative = false;
+                }
+            }
+        }
+        if ('forecastHour' in patch && patch.forecastHour != null) {
+            patch.forecastHour = Number(patch.forecastHour);
+        }
+        if ('mrmsTimestamp' in patch && patch.mrmsTimestamp != null) {
+            patch.mrmsTimestamp = Number(patch.mrmsTimestamp);
+        }
+        if ('satelliteTimestamp' in patch && patch.satelliteTimestamp != null) {
+            patch.satelliteTimestamp = Number(patch.satelliteTimestamp);
+        }
+        if ('satelliteDurationValue' in patch && patch.satelliteDurationValue != null) {
+            patch.satelliteDurationValue = formatTimelineDurationValue(patch.satelliteDurationValue);
+        }
+        if ('mrmsDurationValue' in patch && patch.mrmsDurationValue != null) {
+            patch.mrmsDurationValue = formatTimelineDurationValue(patch.mrmsDurationValue);
+        }
+        if ('nexradDurationValue' in patch && patch.nexradDurationValue != null) {
+            patch.nexradDurationValue = formatTimelineDurationValue(patch.nexradDurationValue);
+        }
+        if ('nexradTimestamp' in patch && patch.nexradTimestamp != null) {
+            patch.nexradTimestamp = Number(patch.nexradTimestamp);
+        }
+        if ('nexradTilt' in patch && patch.nexradTilt != null) {
+            patch.nexradTilt = Number(patch.nexradTilt);
+        }
+        Object.assign(this.state, patch);
+        this._emitStateChange();
+    }
+
+    /**
+     * Forecast hours for the current model/date/run (normalized numbers).
+     * Tolerates model-status run keys like "06" vs state.run "6" so preload and slider stay in sync.
+     */
+    getAvailableForecastHours() {
+        if (this.state.isMRMS || this.state.isSatellite || this.state.isNexrad) return [];
+        if (!this.state.model || this.state.date == null || this.state.run == null) return [];
+
+        const resolved = resolveModelRunHours(
+            this.modelStatus,
+            this.state.model,
+            this.state.date,
+            this.state.run
+        );
+        let hours = resolved.hours || [];
+
+        if (hours.length > 0) {
+            hours = hours.map(h => (typeof h === 'string' ? parseInt(h, 10) : Number(h))).filter(h => !Number.isNaN(h));
+        }
+        if (this.state.variable === 'ptypeRefl' && this.state.model === 'hrrr' && hours.length > 0) {
+            hours = hours.filter(hour => hour !== 0);
+        }
+        return hours;
+    }
+
+    _computeSatelliteTimeline() {
+        const { satelliteInstrumentId, satelliteSectorLabel, satelliteChannel } = this.state;
+        if (!satelliteInstrumentId || !satelliteSectorLabel || !satelliteChannel || !this.satelliteListing?.objects) {
+            return { unixTimes: [], timeToFileMap: {} };
+        }
+        const allFiles = this.satelliteListing.objects.map((o) => o.key);
+        const sectorName = satelliteSectorLabel;
+        const tier = this.state.satelliteTier || 'basic';
+        const durationOpt = resolveSatelliteDurationOption(sectorName, tier, this.state.satelliteDurationValue);
+        return buildSatelliteTimelineForSelection(
+            {
+                satelliteInstrumentId,
+                satelliteSectorLabel,
+                satelliteChannel,
+            },
+            allFiles,
+            durationOpt,
+        );
+    }
+
+    /**
+     * MRMS timestamps for a variable, oldest first (matches satellite timelines and left→right time sliders).
+     * Limited to the last N hours relative to the newest frame (see mrmsDurationValue).
+     * @param {string} variable
+     * @returns {number[]}
+     */
+    _getFilteredMrmsTimestampsForVariable(variable) {
+        const raw = this.mrmsStatus?.[variable];
+        if (!raw || !raw.length) return [];
+        const hours = parseTimelineDurationHours(this.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;
+    }
+
+    _nexradListingWindowHours() {
+        return parseTimelineDurationHours(this.state.nexradDurationValue);
+    }
+
+    _getFilteredNexradTimestampsForVariable(rawList) {
+        if (!rawList || !rawList.length) return [];
+        const hours = this._nexradListingWindowHours();
+        let list = [...rawList]
+            .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;
+    }
+
+    /**
+     * Cache key for {@link this.nexradTimesByStation} — matches frontend composite keys (tilt + variable group/source).
+     */
+    _nexradTimesCacheKey() {
+        const s = this.state;
+        if (!s.isNexrad || !s.nexradSite) return null;
+        const site = s.nexradSite;
+        const variable = s.nexradProduct || 'REF';
+        const ds = s.nexradDataSource || 'level2';
+        const tiltNum = s.nexradTilt != null ? s.nexradTilt : getDefaultRadarTilt(site);
+        const elevNormUse =
+            ds === 'level3'
+                ? NEXRAD_LEVEL3_ELEV
+                : formatTiltForApi(clampNexradTiltForVariable(site, variable, tiltNum));
+        const group = ds === 'level3' ? 'l3' : variableToNexradGroup(variable);
+        const l3Product =
+            ds === 'level3'
+                ? getNexradLevel3EntryByRadarKey(variable)?.product ?? (variable === 'VEL' ? 'N0G' : variable)
+                : '';
+        if (ds === 'level3') {
+            return `${site}_l3_${l3Product}_${elevNormUse}`;
+        }
+        return `${site}_${group}_${elevNormUse}`;
+    }
+
+    _emitStateChange() {
+        const { colormap, baseUnit } = this._getColormapForVariable(this.state.variable);
+        const toUnit = this._getTargetUnit(baseUnit, this.state.units);
+        const displayColormap = this._convertColormapUnits(colormap, baseUnit, toUnit);
+
+        let availableTimestamps = [];
+        if (this.state.isMRMS && this.state.variable && this.mrmsStatus) {
+            availableTimestamps = this._getFilteredMrmsTimestampsForVariable(this.state.variable);
+        }
+
+        let availableSatelliteTimestamps = [];
+        let satelliteTimeToFileMap = {};
+        if (this.state.isSatellite && this.state.satelliteInstrumentId) {
+            const timeline = this._computeSatelliteTimeline();
+            satelliteTimeToFileMap = timeline.timeToFileMap || {};
+            availableSatelliteTimestamps = [...(timeline.unixTimes || [])]
+                .map((t) => Number(t))
+                .filter((t) => !Number.isNaN(t))
+                .sort((a, b) => a - b);
+        }
+
+        let availableNexradTimestamps = [];
+        let nexradTimeToKeyMap = {};
+        let nexradLevel3MotionTimeToKeyMap = {};
+        let availableNexradTilts = [];
+        if (this.state.isNexrad && this.state.nexradSite) {
+            const nk = this._nexradTimesCacheKey();
+            const ent = nk ? this.nexradTimesByStation[nk] : null;
+            const raw = ent?.unixTimes || [];
+            availableNexradTimestamps = this._getFilteredNexradTimestampsForVariable(raw);
+            nexradTimeToKeyMap = ent?.timeToKeyMap || {};
+            nexradLevel3MotionTimeToKeyMap = ent?.level3MotionTimeToKeyMap || {};
+            availableNexradTilts = getAvailableNexradTilts(
+                this.state.nexradSite,
+                this.state.nexradDataSource || 'level2',
+                this.state.nexradProduct || 'REF',
+            );
+        }
+
+        const availableHours = this.getAvailableForecastHours();
+
+        const eventPayload = {
+            ...this.state,
+            availableModels: this.modelStatus ? Object.keys(this.modelStatus).sort() : [],
+            availableRuns: this.modelStatus?.[this.state.model] || {},
+            availableHours: availableHours, // <-- Changed from inline calculation
+            availableVariables: this.getAvailableVariables(this.state.isMRMS ? 'mrms' : this.state.model),
+            // We need to confirm this line is working as expected.
+            availableMRMSVariables: this.getAvailableVariables('mrms'),
+            availableTimestamps: availableTimestamps,
+            availableSatelliteTimestamps,
+            satelliteTimeToFileMap,
+            availableNexradTimestamps,
+            nexradTimeToKeyMap,
+            nexradLevel3MotionTimeToKeyMap,
+            availableNexradTilts,
+            isPlaying: this.isPlaying,
+            colormap: displayColormap,
+            colormapBaseUnit: toUnit,
+        };
+
+        this.emit('state:change', eventPayload);
+    }
+
+    async initialize(options = {}) {
+        await this.fetchModelStatus(true);
+        await this.fetchMRMSStatus(true);
+        await this.fetchSatelliteListing(true);
+
+        let initialState = { ...this.state };
+
+        if (initialState.isSatellite && initialState.satelliteInstrumentId) {
+            const timeline = this._computeSatelliteTimeline();
+            const tsList = [...(timeline.unixTimes || [])].sort((a, b) => a - b);
+            if (initialState.satelliteTimestamp == null && tsList.length > 0) {
+                initialState.satelliteTimestamp = tsList[tsList.length - 1];
+            }
+        }
+
+        // ADD: Logic to handle an initial MRMS state
+        if (initialState.isMRMS) {
+            const variable = initialState.variable;
+            if (variable && this.mrmsStatus && this.mrmsStatus[variable]) {
+                const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
+                initialState.mrmsTimestamp =
+                    sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
+            } else {
+                const availableMRMSVars = this.getAvailableVariables('mrms');
+                if (availableMRMSVars.length > 0) {
+                    const firstVar = availableMRMSVars[0];
+                    initialState.variable = firstVar;
+                    const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(firstVar);
+                    initialState.mrmsTimestamp =
+                        sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
+                }
+            }
+        } else if (!initialState.isSatellite && !initialState.isNexrad) {
+            // EDIT: This is the existing logic, now in an else block
+            const latestRun = findLatestModelRun(this.modelStatus, initialState.model);
+            if (latestRun) {
+                initialState = { ...initialState, ...latestRun, forecastHour: 0 };
+                if (!initialState.variable) {
+                    const availableVariables = this.getAvailableVariables(initialState.model);
+                    if (availableVariables && availableVariables.length > 0) {
+                        initialState.variable = availableVariables[0];
+                    }
+                }
+            }
+        }
+
+        await this.setState(initialState);
+
+        if (this.state.isNexrad) {
+            const manifest = await fetchRadarTiltsManifestFromNetwork();
+            if (manifest) setRadarTiltsManifest(manifest);
+            if (this.state.nexradSite) {
+                await this.refreshNexradTimes();
+            }
+        }
+        if (options.autoRefresh ?? this.autoRefreshEnabled) {
+            this.startAutoRefresh(options.refreshInterval ?? this.autoRefreshIntervalSeconds);
+        }
+    }
+
+    destroy() {
+        this.pause();
+        this.stopAutoRefresh();
+        this.dataCache.clear();
+        this.callbacks = {};
+        if (this._gridDecodeWorker) {
+            this._gridDecodeWorker.terminate();
+            this._gridDecodeWorker = null;
+        }
+    }
+
+    // --- Public API Methods ---
+
+    play() {
+        if (this.isPlaying) return;
+        this.isPlaying = true;
+        clearInterval(this.playIntervalId);
+        this.playIntervalId = setInterval(() => { this.step(1); }, this.playbackSpeed);
+        this.emit('playback:start', { speed: this.playbackSpeed });
+        this._emitStateChange(); // Notify UI that isPlaying is now true
+    }
+
+    pause() {
+        if (!this.isPlaying) return;
+        this.isPlaying = false;
+        clearInterval(this.playIntervalId);
+        this.playIntervalId = null;
+        this.emit('playback:stop');
+        this._emitStateChange(); // Notify UI that isPlaying is now false
+    }
+
+    togglePlay() {
+        this.isPlaying ? this.pause() : this.play();
+    }
+
+    step(direction = 1) {
+        if (this.state.isSatellite) {
+            const timeline = this._computeSatelliteTimeline();
+            const availableTimestamps = [...(timeline.unixTimes || [])]
+                .sort((a, b) => a - b)
+                .map((t) => Number(t));
+            if (availableTimestamps.length === 0) return;
+
+            const ts = this.state.satelliteTimestamp == null ? null : Number(this.state.satelliteTimestamp);
+            const currentIndex = ts == null ? -1 : availableTimestamps.indexOf(ts);
+
+            let nextIndex = currentIndex === -1 ? availableTimestamps.length - 1 : currentIndex + direction;
+            const maxIndex = availableTimestamps.length - 1;
+            if (nextIndex > maxIndex) nextIndex = 0;
+            if (nextIndex < 0) nextIndex = maxIndex;
+
+            this.setState({ satelliteTimestamp: availableTimestamps[nextIndex] });
+            return;
+        }
+        // --- THIS IS THE CORRECTED MRMS LOGIC ---
+        if (this.state.isMRMS) {
+            const { variable, mrmsTimestamp } = this.state;
+            if (!this.mrmsStatus || !this.mrmsStatus[variable]) {
+                return;
+            }
+
+            const availableTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
+            if (availableTimestamps.length === 0) return;
+
+            const ts = mrmsTimestamp == null ? null : Number(mrmsTimestamp);
+            const currentIndex = ts == null ? -1 : availableTimestamps.indexOf(ts);
+
+            if (currentIndex === -1) {
+                // If not found, reset to the latest frame (end of ascending list)
+                this.setState({ mrmsTimestamp: availableTimestamps[availableTimestamps.length - 1] });
+                return;
+            }
+
+            const maxIndex = availableTimestamps.length - 1;
+            let nextIndex = currentIndex + direction;
+            
+            // Loop animation
+            if (nextIndex > maxIndex) nextIndex = 0; 
+            if (nextIndex < 0) nextIndex = maxIndex;
+
+            const newTimestamp = availableTimestamps[nextIndex];
+            this.setState({ mrmsTimestamp: newTimestamp });
+
+        } else if (this.state.isNexrad) {
+            const nk = this._nexradTimesCacheKey();
+            const raw = nk ? this.nexradTimesByStation[nk]?.unixTimes : [];
+            const availableTimestamps = this._getFilteredNexradTimestampsForVariable(raw || []);
+            if (availableTimestamps.length === 0) return;
+
+            const ts = this.state.nexradTimestamp == null ? null : Number(this.state.nexradTimestamp);
+            const currentIndex = ts == null ? -1 : availableTimestamps.indexOf(ts);
+
+            let nextIndex = currentIndex === -1 ? availableTimestamps.length - 1 : currentIndex + direction;
+            const maxIndex = availableTimestamps.length - 1;
+            if (nextIndex > maxIndex) nextIndex = 0;
+            if (nextIndex < 0) nextIndex = maxIndex;
+
+            this.setState({ nexradTimestamp: availableTimestamps[nextIndex] });
+        } else {
+            const { forecastHour } = this.state;
+            const forecastHours = this.getAvailableForecastHours();
+            if (!forecastHours || forecastHours.length === 0) return;
+
+            const fh = Number(forecastHour);
+            const currentIndex = forecastHours.indexOf(fh);
+            if (currentIndex === -1) return;
+
+            const maxIndex = forecastHours.length - 1;
+            let nextIndex = currentIndex + direction;
+            if (nextIndex > maxIndex) nextIndex = 0;
+            if (nextIndex < 0) nextIndex = maxIndex;
+
+            const newHour = forecastHours[nextIndex];
+            this.setState({ forecastHour: newHour });
+        }
+    }
+    
+    setPlaybackSpeed(speed) {
+        if (speed > 0) {
+            this.playbackSpeed = speed;
+            if (this.isPlaying) this.play();
+        }
+    }
+
+    async setShaderSmoothing(enabled) {
+        if (typeof enabled !== 'boolean' || enabled === this.state.shaderSmoothingEnabled) return;
+        await this.setState({ shaderSmoothingEnabled: enabled });
+    }
+    
+    async setOpacity(newOpacity) {
+        const clampedOpacity = Math.max(0, Math.min(1, newOpacity));
+        if (clampedOpacity === this.state.opacity) return;
+        await this.setState({ opacity: clampedOpacity });
+    }
+    
+    async setVariable(variable) {
+        // --- NEW CODE: Handle switching TO ptypeRefl on HRRR ---
+        if (variable === 'ptypeRefl' && this.state.model === 'hrrr' && this.state.forecastHour === 0) {
+            const availableHours = resolveModelRunHours(
+                this.modelStatus,
+                this.state.model,
+                this.state.date,
+                this.state.run
+            ).hours || [];
+            const firstValidHour = availableHours.find(hour => hour !== 0) || 0;
+            await this.setState({ variable, forecastHour: firstValidHour });
+            return;
+        }
+        // --- END NEW CODE ---
+        
+        await this.setState({ variable });
+    }
+    
+    async setModel(modelName) {
+        if (modelName === this.state.model || !this.modelStatus?.[modelName]) return;
+        if (this.state.isSatellite) {
+            await this.setState({
+                isSatellite: false,
+                satelliteInstrumentId: null,
+                satelliteSectorLabel: null,
+                satelliteChannel: null,
+                satelliteTimestamp: null,
+            });
+        }
+        const latestRun = findLatestModelRun(this.modelStatus, modelName);
+        if (latestRun) {
+            // --- NEW CODE: Determine initial forecast hour ---
+            let initialHour = 0;
+            
+            // If switching to HRRR with ptypeRefl, start at hour 1 instead of 0
+            if (modelName === 'hrrr' && this.state.variable === 'ptypeRefl') {
+                const availableHours = resolveModelRunHours(
+                    this.modelStatus,
+                    modelName,
+                    latestRun.date,
+                    latestRun.run
+                ).hours || [];
+                initialHour = availableHours.find(hour => hour !== 0) || 0;
+            }
+            // --- END NEW CODE ---
+            
+            await this.setState({ 
+                model: modelName, 
+                date: latestRun.date, 
+                run: latestRun.run, 
+                forecastHour: initialHour  // <-- Changed from hardcoded 0
+            });
+        }
+    }
+    
+    async setRun(runString) {
+        const [date, run] = runString.split(':');
+        if (date !== this.state.date || run !== this.state.run) {
+            await this.setState({ date, run, forecastHour: 0 });
+        }
+    }
+
+    async setUnits(newUnits) {
+        if (newUnits === this.state.units || !['metric', 'imperial'].includes(newUnits)) return;
+        await this.setState({ units: newUnits });
+    }
+    
+    async setMRMSVariable(variable) {
+        const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
+        const initialTimestamp =
+            sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
+
+        await this.setState({
+            variable,
+            isMRMS: true,
+            isSatellite: false,
+            satelliteInstrumentId: null,
+            satelliteSectorLabel: null,
+            satelliteChannel: null,
+            satelliteTimestamp: null,
+            mrmsTimestamp: initialTimestamp,
+        });
+    }
+
+    async setMRMSTimestamp(timestamp) {
+        if (!this.state.isMRMS) return;
+        await this.setState({ mrmsTimestamp: timestamp });
+    }
+
+    async setSatelliteTimestamp(timestamp) {
+        if (!this.state.isSatellite) return;
+        await this.setState({ satelliteTimestamp: timestamp != null ? Number(timestamp) : null });
+    }
+
+    /**
+     * How many hours of satellite frames to include in the timeline (positive, at most 12 hours).
+     * API default: `layerOptions.satelliteDurationValue` on construction.
+     */
+    async setSatelliteDurationValue(value) {
+        const v = formatTimelineDurationValue(value);
+        await this.setState({ satelliteDurationValue: v });
+        if (!this.state.isSatellite || !this.state.satelliteInstrumentId) return;
+        const timeline = this._computeSatelliteTimeline();
+        const tsList = [...(timeline.unixTimes || [])]
+            .map((t) => Number(t))
+            .filter((t) => !Number.isNaN(t))
+            .sort((a, b) => a - b);
+        if (tsList.length === 0) return;
+        const cur = this.state.satelliteTimestamp;
+        const curN = cur == null ? null : Number(cur);
+        if (curN == null || !tsList.includes(curN)) {
+            await this.setState({ satelliteTimestamp: tsList[tsList.length - 1] });
+        }
+    }
+
+    /**
+     * Set satellite view using spacecraft id, sector, and channel/product.
+     * Omitted fields keep the current selection; when not in satellite mode, missing fields use GOES-19 East CONUS / C13 defaults.
+     * @param {{ satelliteId?: string, sector?: string, satelliteSector?: string, satelliteProduct?: string, satelliteChannel?: string, satelliteTimestamp?: number|null }} opts
+     */
+    async setSatelliteSelection(opts = {}) {
+        const cur = this.state.isSatellite ? this.state : null;
+        const tsArg =
+            opts.satelliteTimestamp !== undefined
+                ? opts.satelliteTimestamp
+                : this.state.isSatellite && this.state.satelliteTimestamp != null
+                  ? Number(this.state.satelliteTimestamp)
+                  : undefined;
+        return this.switchMode({
+            mode: 'satellite',
+            satelliteId: opts.satelliteId ?? cur?.satelliteInstrumentId ?? 'GOES19-EAST',
+            satelliteSector: opts.satelliteSector ?? opts.sector ?? cur?.satelliteSectorLabel ?? 'conus',
+            satelliteProduct:
+                opts.satelliteProduct ?? opts.satelliteChannel ?? cur?.satelliteChannel ?? 'C13',
+            satelliteTimestamp: tsArg,
+        });
+    }
+
+    /**
+     * How many hours of MRMS frames to include in the timeline (positive, at most 12 hours).
+     * API default: `layerOptions.mrmsDurationValue` on construction.
+     */
+    async setMRMSDurationValue(value) {
+        const v = formatTimelineDurationValue(value);
+        await this.setState({ mrmsDurationValue: v });
+        if (!this.state.isMRMS || !this.state.variable) return;
+        const filtered = this._getFilteredMrmsTimestampsForVariable(this.state.variable);
+        if (filtered.length === 0) return;
+        const cur = this.state.mrmsTimestamp;
+        const curN = cur == null ? null : Number(cur);
+        if (curN == null || !filtered.includes(curN)) {
+            await this.setState({ mrmsTimestamp: filtered[filtered.length - 1] });
+        }
+    }
+
+    /**
+     * NEXRAD sweep listing / scrub window in hours (independent of MRMS duration).
+     * API default: `layerOptions.nexradDurationValue` on construction.
+     */
+    async setNexradDurationValue(value) {
+        const v = formatTimelineDurationValue(value);
+        await this.setState({ nexradDurationValue: v });
+        if (!this.state.isNexrad || !this.state.nexradSite) return;
+        await this.refreshNexradTimes();
+        const nk = this._nexradTimesCacheKey();
+        const filtered = this._getFilteredNexradTimestampsForVariable(
+            nk ? this.nexradTimesByStation[nk]?.unixTimes || [] : [],
+        );
+        if (filtered.length === 0) return;
+        const cur = this.state.nexradTimestamp;
+        const curN = cur == null ? null : Number(cur);
+        if (curN == null || !filtered.includes(curN)) {
+            await this.setState({ nexradTimestamp: filtered[filtered.length - 1] });
+        }
+    }
+
+    async switchMode(options) {
+        let { mode, variable, model, forecastHour, mrmsTimestamp, satelliteTimestamp } = options;
+        if (!mode) {
+            return;
+        }
+        if (mode === 'model' && !model) {
+            return;
+        }
+        if ((mode === 'mrms' || mode === 'model') && !variable) {
+            return;
+        }
+        let targetState = {};
+        if (mode === 'satellite') {
+            const satelliteInstrumentId = options.satelliteId ?? 'GOES19-EAST';
+            const satelliteSectorLabel = resolveSatelliteSectorLabel(
+                options.satelliteSector ?? options.sector ?? 'conus',
+            );
+            const satelliteChannel =
+                options.satelliteProduct ?? options.satelliteChannel ?? variable ?? 'C13';
+            const channelToken = satelliteChannel;
+            // Emit satellite mode immediately so map layers (e.g. model grid) clear before listing fetch finishes.
+            await this.setState({
+                isSatellite: true,
+                isMRMS: false,
+                isNexrad: false,
+                satelliteInstrumentId,
+                satelliteSectorLabel,
+                satelliteChannel,
+                variable: channelToken,
+                satelliteTimestamp: null,
+                mrmsTimestamp: null,
+                date: null,
+                run: null,
+                forecastHour: 0,
+            });
+
+            await this.fetchSatelliteListing(true);
+            const allFiles = this.satelliteListing?.objects?.map((o) => o.key) || [];
+            const sectorName = satelliteSectorLabel;
+            const tier = this.state.satelliteTier || 'basic';
+            const durationOpt = resolveSatelliteDurationOption(sectorName, tier, this.state.satelliteDurationValue);
+            const timeline = buildSatelliteTimelineForSelection(
+                { satelliteInstrumentId, satelliteSectorLabel, satelliteChannel },
+                allFiles,
+                durationOpt,
+            );
+            const tsList = [...(timeline.unixTimes || [])].sort((a, b) => a - b);
+            let finalTs = satelliteTimestamp !== undefined ? satelliteTimestamp : null;
+            if (finalTs == null && tsList.length > 0) {
+                finalTs = tsList[tsList.length - 1];
+            }
+            await this.setState({
+                satelliteTimestamp: finalTs != null ? Number(finalTs) : null,
+            });
+            return;
+        } else if (mode === 'mrms') {
+            const sortedTimestamps = this._getFilteredMrmsTimestampsForVariable(variable);
+            let finalTimestamp = mrmsTimestamp;
+            if (finalTimestamp === undefined) {
+                finalTimestamp =
+                    sortedTimestamps.length > 0 ? sortedTimestamps[sortedTimestamps.length - 1] : null;
+            } else if (sortedTimestamps.length > 0) {
+                const n = Number(finalTimestamp);
+                if (!sortedTimestamps.includes(n)) {
+                    finalTimestamp = sortedTimestamps[sortedTimestamps.length - 1];
+                }
+            }
+            targetState = {
+                isMRMS: true,
+                isSatellite: false,
+                isNexrad: false,
+                variable: variable,
+                mrmsTimestamp: finalTimestamp,
+                model: this.state.model, date: null, run: null, forecastHour: 0,
+                satelliteInstrumentId: null,
+                satelliteSectorLabel: null,
+                satelliteChannel: null,
+                satelliteTimestamp: null,
+            };
+        } else if (mode === 'model') {
+            const latestRun = findLatestModelRun(this.modelStatus, model);
+            if (!latestRun) {
+                return;
+            }
+            
+            // --- NEW CODE: Determine initial forecast hour for switchMode ---
+            let initialHour = forecastHour !== undefined ? forecastHour : 0;
+            
+            // If switching to HRRR with ptypeRefl and hour is 0, use hour 1
+            if (model === 'hrrr' && variable === 'ptypeRefl' && initialHour === 0) {
+                const availableHours = resolveModelRunHours(
+                    this.modelStatus,
+                    model,
+                    latestRun.date,
+                    latestRun.run
+                ).hours || [];
+                initialHour = availableHours.find(hour => hour !== 0) || 0;
+            }
+            // --- END NEW CODE ---
+            
+            targetState = {
+                isMRMS: false,
+                isSatellite: false,
+                isNexrad: false,
+                model: model,
+                variable: variable,
+                date: latestRun.date,
+                run: latestRun.run,
+                forecastHour: initialHour,  // <-- Changed
+                mrmsTimestamp: null,
+                satelliteInstrumentId: null,
+                satelliteSectorLabel: null,
+                satelliteChannel: null,
+                satelliteTimestamp: null,
+            };
+        } else if (mode === 'nexrad') {
+            const nexradProduct = options.nexradProduct || 'REF';
+            const p = nexradProduct.toUpperCase();
+            const site = options.nexradSite ?? null;
+            let tilt =
+                options.nexradTilt != null
+                    ? Number(options.nexradTilt)
+                    : site != null
+                      ? getDefaultRadarTilt(site)
+                      : null;
+            await this.setState({
+                isNexrad: true,
+                isMRMS: false,
+                isSatellite: false,
+                nexradSite: site,
+                nexradProduct: p,
+                nexradTilt: tilt,
+                nexradTimestamp: options.nexradTimestamp != null ? Number(options.nexradTimestamp) : null,
+                nexradStormRelative: options.nexradStormRelative === true,
+                nexradShowSitesPicker: options.nexradShowSitesPicker !== false,
+                ...(options.nexradDurationValue != null
+                    ? { nexradDurationValue: formatTimelineDurationValue(options.nexradDurationValue) }
+                    : {}),
+                mrmsTimestamp: null,
+                satelliteInstrumentId: null,
+                satelliteSectorLabel: null,
+                satelliteChannel: null,
+                satelliteTimestamp: null,
+                date: null,
+                run: null,
+                forecastHour: 0,
+            });
+            const manifest = await fetchRadarTiltsManifestFromNetwork();
+            if (manifest) setRadarTiltsManifest(manifest);
+            if (site) {
+                await this.refreshNexradTimes();
+                const filtered = this._getFilteredNexradTimestampsForVariable(
+                    this.nexradTimesByStation[this._nexradTimesCacheKey()]?.unixTimes || [],
+                );
+                let ts =
+                    options.nexradTimestamp != null
+                        ? Number(options.nexradTimestamp)
+                        : this.state.nexradTimestamp;
+                if (ts == null && filtered.length > 0) ts = filtered[filtered.length - 1];
+                else if (ts != null && filtered.length > 0 && !filtered.includes(ts)) {
+                    ts = filtered[filtered.length - 1];
+                }
+                await this.setState({ nexradTimestamp: ts });
+            }
+            return;
+        } else {
+            return;
+        }
+        await this.setState(targetState);
+    }
+
+    /**
+     * Keep `nexradTilt` on a coalesced elevation (same rules as aguacero-frontend tilt controls).
+     */
+    async _snapNexradTiltToAvailableOptions() {
+        const s = this.state;
+        if (!s.isNexrad || !s.nexradSite) return;
+        const raw = getRawNexradTiltsForCoalesce(
+            s.nexradSite,
+            s.nexradDataSource || 'level2',
+            s.nexradProduct || 'REF',
+        );
+        if (!raw.length) return;
+        const t = s.nexradTilt;
+        const target = t != null && Number.isFinite(Number(t)) ? Number(t) : getDefaultRadarTilt(s.nexradSite);
+        const canonical = nexradLayerTiltToDisplayOption(target, raw);
+        const match = (a, b) => Math.abs(Number(a) - Number(b)) < 1e-4;
+        if (match(s.nexradTilt, canonical)) return;
+        await this.setState({ nexradTilt: canonical });
+    }
+
+    async refreshNexradTimes() {
+        const s0 = this.state;
+        if (!s0.isNexrad || !s0.nexradSite) return;
+        await this._snapNexradTiltToAvailableOptions();
+        const s = this.state;
+        const listingHours = this._nexradListingWindowHours();
+        const out = await fetchNexradTimesListing({
+            stationId: s.nexradSite,
+            variable: s.nexradProduct || 'REF',
+            elev: s.nexradTilt,
+            source: s.nexradDataSource || 'level2',
+            level3StormRelative: s.nexradStormRelative,
+            level3Product: getNexradLevel3EntryByRadarKey(s.nexradProduct)?.product,
+            listingWindowHours: listingHours,
+        });
+        const nk = this._nexradTimesCacheKey();
+        if (!nk) return;
+        this.nexradTimesByStation[nk] = {
+            unixTimes: out.unixTimes,
+            timeToKeyMap: out.timeToKeyMap,
+            level3MotionTimeToKeyMap: out.level3MotionTimeToKeyMap,
+            listWindowHours: listingHours,
+        };
+        if (out.level3MotionKey && out.level3MotionUnixTimes?.length) {
+            this.nexradTimesByStation[out.level3MotionKey] = {
+                unixTimes: out.level3MotionUnixTimes,
+                timeToKeyMap: out.level3MotionTimeToKeyMap,
+                listWindowHours: listingHours,
+            };
+        }
+        if (out.l2StormMotionListKey && out.level3MotionUnixTimes?.length) {
+            this.nexradTimesByStation[out.l2StormMotionListKey] = {
+                unixTimes: out.level3MotionUnixTimes,
+                timeToKeyMap: out.level3MotionTimeToKeyMap,
+                listWindowHours: listingHours,
+            };
+        }
+        const filtered = this._getFilteredNexradTimestampsForVariable(out.unixTimes || []);
+        const map = out.timeToKeyMap || {};
+        if (filtered.length > 0) {
+            const cur = this.state.nexradTimestamp != null ? Number(this.state.nexradTimestamp) : null;
+            const hasKey = cur != null && Object.prototype.hasOwnProperty.call(map, String(cur));
+            const inWindow = cur != null && filtered.includes(cur);
+            if (cur == null || !inWindow || !hasKey) {
+                this.state.nexradTimestamp = filtered[filtered.length - 1];
+            }
+        } else if (this.state.nexradTimestamp != null) {
+            this.state.nexradTimestamp = null;
+        }
+        this._emitStateChange();
+    }
+
+    async setNexradSite(siteId) {
+        if (!this.state.isNexrad) return;
+        const tilt = siteId ? getDefaultRadarTilt(siteId) : null;
+        await this.setState({
+            nexradSite: siteId || null,
+            nexradTilt: tilt,
+            nexradTimestamp: null,
+        });
+        await this.refreshNexradTimes();
+        const filtered = this._getFilteredNexradTimestampsForVariable(
+            this.nexradTimesByStation[this._nexradTimesCacheKey()]?.unixTimes || [],
+        );
+        if (filtered.length > 0) {
+            await this.setState({ nexradTimestamp: filtered[filtered.length - 1] });
+        }
+    }
+
+    async setNexradProduct(product) {
+        if (!this.state.isNexrad) return;
+        const p = (product || 'REF').toUpperCase();
+        await this.setState({ nexradProduct: p });
+        await this.refreshNexradTimes();
+        const filtered = this._getFilteredNexradTimestampsForVariable(
+            this.nexradTimesByStation[this._nexradTimesCacheKey()]?.unixTimes || [],
+        );
+        if (filtered.length > 0) {
+            await this.setState({ nexradTimestamp: filtered[filtered.length - 1] });
+        }
+    }
+
+    async setNexradTilt(tilt) {
+        if (!this.state.isNexrad || !this.state.nexradSite) return;
+        await this.setState({ nexradTilt: tilt != null ? Number(tilt) : null });
+        await this.refreshNexradTimes();
+    }
+
+    /**
+     * Opt-in storm-relative velocity (L3: N0G + N0S). When off (default), only base radial velocity is used (faster).
+     * @param {boolean} enabled
+     */
+    async setNexradStormRelative(enabled) {
+        if (!this.state.isNexrad) return;
+        await this.setState({ nexradStormRelative: Boolean(enabled) });
+        await this.refreshNexradTimes();
+    }
+
+    async setNexradTimestamp(ts) {
+        if (!this.state.isNexrad) return;
+        await this.setState({ nexradTimestamp: ts != null ? Number(ts) : null });
+    }
+
+    // --- Data and Calculation Methods ---
+
+    _ensureGridDecodeWorker() {
+        if (this._gridDecodeWorkerDisabled) {
+            return null;
+        }
+        if (this._gridDecodeWorker) {
+            return this._gridDecodeWorker;
+        }
+        if (typeof Worker === 'undefined') {
+            this._gridDecodeWorkerDisabled = true;
+            return null;
+        }
+        try {
+            this._gridDecodeWorker = new Worker(new URL('./gridDecodeWorker.js', import.meta.url), {
+                type: 'module',
+            });
+            this._gridDecodeWorker.addEventListener('error', () => {
+                this._gridDecodeWorkerDisabled = true;
+                if (this._gridDecodeWorker) {
+                    this._gridDecodeWorker.terminate();
+                    this._gridDecodeWorker = null;
+                }
+            });
+        } catch {
+            this._gridDecodeWorkerDisabled = true;
+            return null;
+        }
+        return this._gridDecodeWorker;
+    }
+
+    /**
+     * Offloads zstd + delta decode + transform to a Worker when available; falls back to main-thread
+     * {@link processCompressedGrid}. Uses a copy for postMessage transfer so the original `compressedData`
+     * stays valid if the Worker path fails.
+     */
+    _decodeGridPayload(compressedData, encoding) {
+        const worker = this._ensureGridDecodeWorker();
+        if (!worker) {
+            return Promise.resolve(processCompressedGrid(compressedData, encoding));
+        }
+        const payload = compressedData.slice();
+        return new Promise((resolve, reject) => {
+            const id = ++this._gridDecodeMsgId;
+            const onMsg = (e) => {
+                if (!e.data || e.data.id !== id) {
+                    return;
+                }
+                worker.removeEventListener('message', onMsg);
+                worker.removeEventListener('error', onErr);
+                if (e.data.error) {
+                    reject(new Error(e.data.error));
+                    return;
+                }
+                const data = new Uint8Array(e.data.dataBuffer, e.data.dataByteOffset, e.data.dataByteLength);
+                resolve({ data, encoding: e.data.encoding });
+            };
+            const onErr = (err) => {
+                worker.removeEventListener('message', onMsg);
+                worker.removeEventListener('error', onErr);
+                reject(err);
+            };
+            worker.addEventListener('message', onMsg);
+            worker.addEventListener('error', onErr);
+            try {
+                worker.postMessage(
+                    {
+                        id,
+                        encoding,
+                        compressedBuffer: payload.buffer,
+                        compressedByteOffset: payload.byteOffset,
+                        compressedByteLength: payload.byteLength,
+                    },
+                    [payload.buffer]
+                );
+            } catch (err) {
+                worker.removeEventListener('message', onMsg);
+                worker.removeEventListener('error', onErr);
+                reject(err);
+            }
+        });
+    }
+
+    async _loadGridData(state) {
+        if (this.isReactNative) {
+            return null;
+        }
+        if (state.isNexrad) {
+            return null;
+        }
+        const { model, date, run, forecastHour, variable, isMRMS, mrmsTimestamp } = state;
+        let effectiveSmoothing = 0;
+        const customVariableSettings = this.customColormaps[variable];
+        if (customVariableSettings && typeof customVariableSettings.smoothing === 'number') {
+            effectiveSmoothing = customVariableSettings.smoothing;
+        }
+        let resourcePath;
+        let dataUrlIdentifier;
+        if (isMRMS) {
+            if (!mrmsTimestamp) return null;
+            const mrmsDate = new Date(mrmsTimestamp * 1000);
+            const y = mrmsDate.getUTCFullYear(), m = (mrmsDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = mrmsDate.getUTCDate().toString().padStart(2, '0');
+            dataUrlIdentifier = `mrms-${mrmsTimestamp}-${variable}-${effectiveSmoothing}`;
+            resourcePath = `/grids/mrms/${y}${m}${d}/${mrmsTimestamp}/0/${variable}/${effectiveSmoothing}`;
+        } else {
+            dataUrlIdentifier = `${model}-${date}-${run}-${forecastHour}-${variable}-${effectiveSmoothing}`;
+            resourcePath = `/grids/${model}/${date}/${run}/${forecastHour}/${variable}/${effectiveSmoothing}`;
+        }
+        if (this.dataCache.has(dataUrlIdentifier)) {
+            return this.dataCache.get(dataUrlIdentifier);
+        }
+
+        const abortController = new AbortController();
+        this.abortControllers.set(dataUrlIdentifier, abortController);
+                
+        const loadPromise = (async () => {
+            if (!this.apiKey) {
+                throw new Error('API key is not configured.');
+            }
+            try {
+                const baseUrl = `${this.baseGridUrl}${resourcePath}`;
+                const urlWithApiKeyParam = `${baseUrl}?apiKey=${this.apiKey}`;
+                const headers = { 'x-api-key': this.apiKey };
+                if (this.bundleId && this.isReactNative) {
+                    headers['x-app-identifier'] = this.bundleId;
+                }
+                
+                const response = await fetch(urlWithApiKeyParam, { 
+                    headers: headers,
+                    signal: abortController.signal
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch grid data: ${response.status} ${response.statusText}`);
+                }
+                const { data: b64Data, encoding } = await response.json();
+                const compressedData = Uint8Array.from(atob(b64Data), c => c.charCodeAt(0));
+
+                let gridPayload;
+                try {
+                    gridPayload = await this._decodeGridPayload(compressedData, encoding);
+                } catch {
+                    gridPayload = processCompressedGrid(compressedData, encoding);
+                }
+                
+                this.abortControllers.delete(dataUrlIdentifier);
+                
+                return { data: gridPayload.data, encoding: gridPayload.encoding };
+
+            } catch (error) {
+                this.dataCache.delete(dataUrlIdentifier);
+                this.abortControllers.delete(dataUrlIdentifier);
+                return null;
+            }
+        })();
+        this.dataCache.set(dataUrlIdentifier, loadPromise);
+        return loadPromise;
+    }
+
+    cancelAllRequests() {
+        // Abort all in-flight requests
+        this.abortControllers.forEach((controller, key) => {
+            controller.abort();
+        });
+        
+        // Clear both maps
+        this.abortControllers.clear();
+        this.dataCache.clear();
+    }
+    
+    async getValueAtLngLat(lng, lat) {
+        if (this.state.isSatellite || this.state.isNexrad) {
+            return null;
+        }
+        const { variable, isMRMS, mrmsTimestamp, model, date, run, forecastHour, units } = this.state;
+        if (!variable) return null;
+
+        const gridIndices = this._getGridIndexFromLngLat(lng, lat);
+        if (!gridIndices) return null;
+
+        const { i, j } = gridIndices;
+        const gridModel = isMRMS ? 'mrms' : model;
+        const normalizedGridModel = this._normalizeModelName(gridModel);
+        const { nx } = COORDINATE_CONFIGS[normalizedGridModel].grid_params;
+
+        const customSettings = this.customColormaps[variable];
+        const effectiveSmoothing = (customSettings && typeof customSettings.smoothing === 'number') ? customSettings.smoothing : 0;
+        
+        const dataUrlIdentifier = isMRMS
+            ? `mrms-${mrmsTimestamp}-${variable}-${effectiveSmoothing}`
+            : `${model}-${date}-${run}-${forecastHour}-${variable}-${effectiveSmoothing}`;
+
+        const gridDataPromise = this.dataCache.get(dataUrlIdentifier);
+        if (!gridDataPromise) return null;
+
+        try {
+            const gridData = await gridDataPromise;
+            if (!gridData || !gridData.data) return null;
+
+            const index1D = j * nx + i;
+            const byteValue = gridData.data[index1D];
+            const signedQuantizedValue = byteValue - 128;
+
+            // --- START OF FIX ---
+            // You were missing 'scale_type' in this destructuring assignment.
+            const { scale, offset, missing_quantized, scale_type } = gridData.encoding;
+            // --- END OF FIX ---
+
+            if (signedQuantizedValue === missing_quantized) return null;
+
+            const intermediateValue = signedQuantizedValue * scale + offset;
+
+            // Step 2: Apply non-linear scaling if specified
+            let nativeValue = intermediateValue;
+            if (scale_type === 'sqrt') {
+                // Square the value while preserving its sign
+                nativeValue = intermediateValue < 0 ? -(intermediateValue * intermediateValue) : (intermediateValue * intermediateValue);
+            }
+            const { colormap, baseUnit } = this._getColormapForVariable(variable);
+
+            // If the value is outside the colormap's bounds, return null.
+            if (colormap && colormap.length >= 2) {
+                const minBound = colormap[0];
+                const maxBound = colormap[colormap.length - 2];
+                if (nativeValue < minBound || nativeValue > maxBound) {
+                    return null;
+                }
+            }
+
+            let dataNativeUnit = baseUnit || (DICTIONARIES.fld[variable] || {}).defaultUnit || 'none';
+            
+            const displayUnit = this._getTargetUnit(dataNativeUnit, units);
+            const conversionFunc = getUnitConversionFunction(dataNativeUnit, displayUnit);
+            let displayValue = conversionFunc ? conversionFunc(nativeValue) : nativeValue;
+
+            return {
+                lngLat: { lng, lat },
+                variable: {
+                    code: variable,
+                    name: this.getVariableDisplayName(variable),
+                },
+                value: displayValue,
+                unit: displayUnit,
+            };
+        } catch (error) {
+            return null;
+        }
+    }
+
+    getAvailableVariables(modelName = null) {
+        const model = modelName || this.state.model;
+        return MODEL_CONFIGS[model]?.vars || [];
+    }
+
+    getVariableDisplayName(variableCode) {
+        const varInfo = DICTIONARIES.fld[variableCode];
+        return varInfo?.displayName || varInfo?.name || variableCode;
+    }
+
+    _getColormapForVariable(variable) {
+        if (!variable) return { colormap: [], baseUnit: '' };
+        
+        if (this.customColormaps[variable] && this.customColormaps[variable].colormap) {
+            return {
+                colormap: this.customColormaps[variable].colormap,
+                baseUnit: this.customColormaps[variable].baseUnit || ''
+            };
+        }
+        
+        const colormapKey = DICTIONARIES.variable_cmap[variable] || variable;
+        const customColormap = this.customColormaps[colormapKey];
+        if (customColormap && customColormap.colormap) {
+            return { colormap: customColormap.colormap, baseUnit: customColormap.baseUnit || '' };
+        }
+        
+        const defaultColormapData = DEFAULT_COLORMAPS[colormapKey];
+        if (defaultColormapData && defaultColormapData.units) {
+            // ✅ Get defaultUnit from the field dictionary
+            const fieldInfo = DICTIONARIES.fld[variable] || {};
+            const baseUnit = fieldInfo.defaultUnit || Object.keys(defaultColormapData.units)[0];
+            
+            const unitData = defaultColormapData.units[baseUnit];
+            if (unitData && unitData.colormap) {
+                return { colormap: unitData.colormap, baseUnit: baseUnit };
+            }
+        }
+        return { colormap: [], baseUnit: '' };
+    }
+
+    _convertColormapUnits(colormap, fromUnits, toUnits) {
+        if (fromUnits === toUnits) return colormap;
+        const conversionFunc = getUnitConversionFunction(fromUnits, toUnits);
+        if (!conversionFunc) return colormap;
+        const newColormap = [];
+        for (let i = 0; i < colormap.length; i += 2) {
+            newColormap.push(conversionFunc(colormap[i]), colormap[i + 1]);
+        }
+        return newColormap;
+    }
+
+    _normalizeModelName(modelName) {
+        const mapping = { 'hrrr': ['mpashn', 'mpasrt', 'mpasht', 'hrrrsub', 'rrfs', 'namnest', 'mpasrn', 'mpasrn3', 'mpasht2'], 'arw': ['arw2', 'fv3', 'href'], 'rtma': ['nbm'], 'ecmwf': ['ecmwfaifs'], 'gfs': ['arpege', 'graphcastgfs'] };
+        for (const [normalized, aliases] of Object.entries(mapping)) { if (aliases.includes(modelName)) return normalized; }
+        return modelName;
+    }
+
+    _getGridCornersAndDef(model) {
+        const normalizedModel = this._normalizeModelName(model);
+        const gridDef = { ...COORDINATE_CONFIGS[normalizedModel], modelName: model };
+        if (!gridDef) return null;
+        const { nx, ny } = gridDef.grid_params;
+        const gridType = gridDef.type;
+        let corners;
+        if (gridType === 'latlon') {
+            let { lon_first, lat_first, lat_last, lon_last, dx_degrees, dy_degrees } = gridDef.grid_params;
+            corners = {
+                lon_tl: lon_first, lat_tl: lat_first,
+                lon_tr: lon_last !== undefined ? lon_last : (lon_first + (nx - 1) * dx_degrees), lat_tr: lat_first,
+                lon_bl: lon_first, lat_bl: lat_last !== undefined ? lat_last : (lat_first + (ny - 1) * dy_degrees),
+                lon_br: lon_last !== undefined ? lon_last : (lon_first + (nx - 1) * dx_degrees), lat_br: lat_last !== undefined ? lat_last : (lat_first + (ny - 1) * dy_degrees),
+            };
+        } else if (gridType === 'rotated_latlon') {
+            const [lon_tl, lat_tl] = hrdpsObliqueTransform(gridDef.grid_params.lon_first, gridDef.grid_params.lat_first);
+            const [lon_tr, lat_tr] = hrdpsObliqueTransform(gridDef.grid_params.lon_first + (nx - 1) * gridDef.grid_params.dx_degrees, gridDef.grid_params.lat_first);
+            const [lon_bl, lat_bl] = hrdpsObliqueTransform(gridDef.grid_params.lon_first, gridDef.grid_params.lat_first + (ny - 1) * gridDef.grid_params.dy_degrees);
+            const [lon_br, lat_br] = hrdpsObliqueTransform(gridDef.grid_params.lon_first + (nx - 1) * gridDef.grid_params.dx_degrees, gridDef.grid_params.lat_first + (ny - 1) * gridDef.grid_params.dy_degrees);
+            corners = { lon_tl, lat_tl, lon_tr, lat_tr, lon_bl, lat_bl, lon_br, lat_br };
+        } else if (gridType === 'lambert_conformal_conic' || gridType === 'polar_ stereographic') {
+            let projString = Object.entries(gridDef.proj_params).map(([k,v]) => `+${k}=${v}`).join(' ');
+            if(gridType === 'polar_stereographic') projString += ' +lat_0=90';
+            const { x_origin, y_origin, dx, dy } = gridDef.grid_params;
+            const [lon_tl, lat_tl] = proj4(projString, 'EPSG:4326', [x_origin, y_origin]);
+            const [lon_tr, lat_tr] = proj4(projString, 'EPSG:4326', [x_origin + (nx - 1) * dx, y_origin]);
+            const [lon_bl, lat_bl] = proj4(projString, 'EPSG:4326', [x_origin, y_origin + (ny - 1) * dy]);
+            const [lon_br, lat_br] = proj4(projString, 'EPSG:4326', [x_origin + (nx - 1) * dx, y_origin + (ny - 1) * dy]);
+            corners = { lon_tl, lat_tl, lon_tr, lat_tr, lon_bl, lat_bl, lon_br, lat_br };
+        } else {
+            return null;
+        }
+        return { corners, gridDef };
+    }
+
+    _getTargetUnit(defaultUnit, system) {
+        if (system === 'metric') {
+            if (['°F', '°C', 'fahrenheit', 'celsius'].includes(defaultUnit)) return '°C';
+            if (['kts', 'mph', 'm/s'].includes(defaultUnit)) return 'km/h';
+            if (['in', 'mm', 'cm'].includes(defaultUnit)) return 'mm';
+        }
+        if (system === 'imperial') {
+            if (['°F', '°C', 'fahrenheit', 'celsius'].includes(defaultUnit)) return '°F';
+            if (['kts', 'mph', 'm/s'].includes(defaultUnit)) return 'mph';
+            if (['in', 'mm', 'cm'].includes(defaultUnit)) return 'in';
+        }
+        return defaultUnit;
+    }
+
+    _getGridIndexFromLngLat(lng, lat) {
+        const gridModel = this.state.isMRMS ? 'mrms' : this.state.model;
+        const normalizedGridModel = this._normalizeModelName(gridModel);
+        const gridDef = COORDINATE_CONFIGS[normalizedGridModel];
+        if (!gridDef) return null;
+        const { nx, ny } = gridDef.grid_params;
+        const pixelCoords = this.latLonToGridPixel(lat, lng, gridDef, gridModel);
+        if (!pixelCoords || !isFinite(pixelCoords.x) || !isFinite(pixelCoords.y) || pixelCoords.x < 0 || pixelCoords.y < 0) return null;
+        const i = Math.round(pixelCoords.x);
+        const j = Math.round(pixelCoords.y);
+        if (i >= 0 && i < nx && j >= 0 && j < ny) return { i, j };
+        return null;
+    }
+    
+    latLonToProjected(lat, lon, gridDef) {
+        if (!isFinite(lat) || !isFinite(lon)) throw new Error(`Invalid coordinates: lat=${lat}, lon=${lon}`);
+        const gridType = gridDef.type;
+        if (gridType === 'latlon') return { x: lon, y: lat }; 
+        let projString = Object.entries(gridDef.proj_params).map(([k,v]) => `+${k}=${v}`).join(' ');
+        if(gridType === 'polar_stereographic') projString += ' +lat_0=90';
+        const projected = proj4('EPSG:4326', projString, [lon, lat]);
+        return { x: projected[0], y: projected[1] };
+    }
+    
+    latLonToGridPixel(lat, lon, gridDef, modelName) {
+        if (!gridDef) return null;
+        if (modelName === 'rgem' && gridDef.type === 'polar_stereographic') return this.latLonToGridPixelPolarStereographic(lat, lon, gridDef);
+        const projected = this.latLonToProjected(lat, lon, gridDef);
+        let x, y;
+        const gridOrigin = { x: gridDef.grid_params.lon_first, y: gridDef.grid_params.lat_first };
+        const gridPixelSize = { x: gridDef.grid_params.dx_degrees, y: gridDef.grid_params.dy_degrees };
+        if (gridDef.type === 'latlon' || gridDef.type === 'rotated_latlon') {
+            let adjustedLon = projected.x;
+            if (modelName === 'mrms') {
+                if (adjustedLon < 0) adjustedLon += 360;
+                x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
+                y = (gridOrigin.y - projected.y) / gridPixelSize.y;
+            } else {
+                const isGFSType = gridDef.grid_params && gridDef.grid_params.lon_first === 0.0 && Math.abs(gridDef.grid_params.lat_first) === 90.0;
+                const isECMWFType = gridDef.grid_params && gridDef.grid_params.lon_first === 180.0 && gridDef.grid_params.lat_first === 90.0;
+                const isGEMType = modelName === 'gem' || (gridDef.grid_params.lon_first === 180.0 && gridDef.grid_params.lat_first === -90.0 && gridDef.grid_params.lon_last === 179.85);
+                if (isGEMType) {
+                    while (adjustedLon < gridOrigin.x) adjustedLon += 360;
+                    x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
+                    y = (projected.y - gridOrigin.y) / gridPixelSize.y;
+                    return { x, y };
+                }
+                let isFlippedGrid = isECMWFType ? true : (gridDef.grid_params.lat_first < (gridDef.grid_params.lat_last || (gridDef.grid_params.ny - 1) * gridDef.grid_params.dy_degrees));
+                if (isGFSType) adjustedLon = projected.x + 180;
+                else if (isECMWFType) { if (adjustedLon < gridOrigin.x) adjustedLon += 360; }
+                else if (['arome1', 'arome25', 'arpegeeu', 'iconeu', 'icond2'].includes(modelName)) {
+                    while (adjustedLon < 0) adjustedLon += 360;
+                    while (adjustedLon >= 360) adjustedLon -= 360;
+                    x = (adjustedLon >= gridOrigin.x) ? (adjustedLon - gridOrigin.x) / gridPixelSize.x : (adjustedLon + 360 - gridOrigin.x) / gridPixelSize.x;
+                    if (['arome1', 'arome25', 'arpegeeu'].includes(modelName)) y = (gridOrigin.y - projected.y) / Math.abs(gridPixelSize.y);
+                    else if (['iconeu', 'icond2'].includes(modelName)) y = (projected.y - gridOrigin.y) / gridPixelSize.y;
+                    return { x, y };
+                } else {
+                    const lonFirst = gridOrigin.x;
+                    if (lonFirst > 180 && adjustedLon < 0) adjustedLon += 360;
+                    else if (lonFirst < 0 && adjustedLon > 180) adjustedLon -= 360;
+                }
+                x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
+                if (isFlippedGrid) {
+                    if (isECMWFType) y = (gridOrigin.y - projected.y) / Math.abs(gridPixelSize.y);
+                    else {
+                        const maxLat = gridDef.grid_params.lat_last || (gridDef.grid_params.ny - 1) * gridDef.grid_params.dy_degrees;
+                        y = (maxLat - projected.y) / Math.abs(gridPixelSize.y);
+                    }
+                } else y = (projected.y - gridOrigin.y) / gridPixelSize.y;
+            }
+        } else {
+            const projOrigin = { x: gridDef.grid_params.x_origin, y: gridDef.grid_params.y_origin };
+            const projPixelSize = { x: gridDef.grid_params.dx, y: gridDef.grid_params.dy };
+            x = (projected.x - projOrigin.x) / projPixelSize.x;
+            y = (projOrigin.y - projected.y) / Math.abs(projPixelSize.y);
+        }
+        return { x, y };
+    }
+
+    latLonToGridPixelPolarStereographic(lat, lon, gridDef) {
+        try {
+            const projParams = gridDef.proj_params;
+            let projectionString = `+proj=${projParams.proj}`;
+            Object.keys(projParams).forEach(key => { if (key !== 'proj') projectionString += ` +${key}=${projParams[key]}`; });
+            projectionString += ' +lat_0=90 +no_defs';
+            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
+            const x_min = x_origin;
+            const x_max = x_origin + (nx - 1) * dx;
+            const y_max = y_origin;
+            const y_min = y_origin + (ny - 1) * dy;
+            const [proj_x, proj_y] = proj4('EPSG:4326', projectionString, [lon, lat]);
+            if (!isFinite(proj_x) || !isFinite(proj_y)) return { x: -1, y: -1 };
+            const t_x = (proj_x - x_min) / (x_max - x_min);
+            const t_y = (proj_y - y_max) / (y_min - y_max);
+            const x = t_x * (nx - 1);
+            const y = t_y * (ny - 1);
+            return { x, y };
+        } catch (error) {
+            return { x: -1, y: -1 };
+        }
+    }
+    
+    // --- Status Methods ---
+
+    async fetchModelStatus(force = false) {
+        if (!this.modelStatus || force) {
+            try {
+                const response = await fetch(this.statusUrl);
+                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+                this.modelStatus = (await response.json()).models;
+            } catch (error) { this.modelStatus = null; }
+        }
+        return this.modelStatus;
+    }
+
+    async fetchMRMSStatus(force = false) {
+        const mrmsStatusUrl = 'https://h3dfvh5pq6euq36ymlpz4zqiha0obqju.lambda-url.us-east-2.on.aws';
+        if (!this.mrmsStatus || force) {
+            try {
+                const response = await fetch(mrmsStatusUrl);
+                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+                this.mrmsStatus = await response.json();
+            } catch (error) { this.mrmsStatus = null; }
+        }
+        return this.mrmsStatus;
+    }
+
+    async fetchSatelliteListing(force = false) {
+        if (!this.satelliteListing || force) {
+            try {
+                const response = await fetch(SATELLITE_FRAMES_URL);
+                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+                this.satelliteListing = await response.json();
+            } catch (error) {
+                this.satelliteListing = null;
+            }
+        }
+        return this.satelliteListing;
+    }
+
+    startAutoRefresh(intervalSeconds) {
+        this.stopAutoRefresh();
+        this.autoRefreshIntervalId = setInterval(async () => {
+            await this.fetchModelStatus(true);
+            this._emitStateChange();
+        }, (intervalSeconds || 60) * 1000);
+    }
+
+    stopAutoRefresh() {
+        if (this.autoRefreshIntervalId) {
+            clearInterval(this.autoRefreshIntervalId);
+            this.autoRefreshIntervalId = null;
+        }
+    }
 }