@rfkit/charts 1.5.0 → 1.6.0

package/index.js

@@ -571,6 +571,22 @@ var __webpack_modules__ = {
   z-index: 1000;
 }
 
+[data-rfkit-charts-root] .row-0 {
+  grid-row: 0;
+}
+
+[data-rfkit-charts-root] .row-1 {
+  grid-row: 1;
+}
+
+[data-rfkit-charts-root] .row-2 {
+  grid-row: 2;
+}
+
+[data-rfkit-charts-root] .row-3 {
+  grid-row: 3;
+}
+
 [data-rfkit-charts-root] .container {
   width: 100%;
 }
@@ -1413,6 +1429,10 @@ var __webpack_modules__ = {
   }
 }
 
+[data-rfkit-charts-root] .border-primary\\/50 {
+  border-color: var(--primary);
+}
+
 @supports (color: color-mix(in lab, red, red)) {
   [data-rfkit-charts-root] .border-primary\\/50 {
     border-color: color-mix(in oklab, var(--primary) 50%, transparent);
@@ -2684,34 +2704,34 @@ var __webpack_modules__ = {
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
-@media (min-width: 40rem) {
-  [data-rfkit-charts-root] .sm\\:flex-row {
-    flex-direction: row;
-  }
-
-  [data-rfkit-charts-root] .sm\\:justify-end {
-    justify-content: flex-end;
-  }
-}
-
-@media (min-width: 80rem) {
-  [data-rfkit-charts-root] .xl\\:grid-cols-\\[220px_minmax\\(0\\,1\\.2fr\\)_320px\\] {
+@media (min-width: 1180px) {
+  [data-rfkit-charts-root] .min-\\[1180px\\]\\:grid-cols-\\[220px_minmax\\(0\\,1\\.2fr\\)_320px\\] {
     grid-template-columns: 220px minmax(0, 1.2fr) 320px;
   }
 
-  [data-rfkit-charts-root] .xl\\:grid-cols-\\[minmax\\(0\\,1\\.2fr\\)_auto_auto\\] {
+  [data-rfkit-charts-root] .min-\\[1180px\\]\\:grid-cols-\\[minmax\\(0\\,1\\.2fr\\)_auto_auto\\] {
     grid-template-columns: minmax(0, 1.2fr) auto auto;
   }
 
-  [data-rfkit-charts-root] .xl\\:grid-cols-\\[minmax\\(0\\,1\\.35fr\\)_320px\\] {
+  [data-rfkit-charts-root] .min-\\[1180px\\]\\:grid-cols-\\[minmax\\(0\\,1\\.35fr\\)_320px\\] {
     grid-template-columns: minmax(0, 1.35fr) 320px;
   }
 
-  [data-rfkit-charts-root] .xl\\:grid-cols-\\[minmax\\(0\\,1fr\\)_minmax\\(0\\,1fr\\)\\] {
+  [data-rfkit-charts-root] .min-\\[1180px\\]\\:grid-cols-\\[minmax\\(0\\,1fr\\)_minmax\\(0\\,1fr\\)\\] {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
 }
 
+@media (min-width: 40rem) {
+  [data-rfkit-charts-root] .sm\\:flex-row {
+    flex-direction: row;
+  }
+
+  [data-rfkit-charts-root] .sm\\:justify-end {
+    justify-content: flex-end;
+  }
+}
+
 [data-rfkit-charts-root] .\\[\\&_svg\\]\\:pointer-events-none svg {
   pointer-events: none;
 }
@@ -4355,6 +4375,7 @@ const UI_CONFIG = {
     ZOOM_MIN_RANGE: 10,
     POPOVER_MARGIN: 16
 };
+const SPECTRUM_THRESHOLD_COLOR = '#A855F7';
 const setting_defaultConfig = {
     line: {
         realData: {
@@ -4387,7 +4408,7 @@ const setting_defaultConfig = {
         },
         thresholdData: {
             name: 'thresholdData',
-            color: '#FF4C2A',
+            color: SPECTRUM_THRESHOLD_COLOR,
             thickness: 1,
             label: "\u95E8\u9650\u503C",
             display: true
@@ -6128,7 +6149,7 @@ function useStore_useStore() {
         store
     };
 }
-function useSelector(selector) {
+function useStore_useSelector(selector) {
     const { store } = useAppContext();
     return (0, __WEBPACK_EXTERNAL_MODULE_react__.useSyncExternalStore)(store.subscribe, ()=>selector(store.getState()), ()=>selector(store.getState()));
 }
@@ -6277,7 +6298,7 @@ const createNextSystemConfig = (system, size)=>({
 const Container_Container = (props)=>{
     const { children, style } = props;
     const dispatch = useStoreDispatch();
-    const system = useSelector((state)=>state.system);
+    const system = useStore_useSelector((state)=>state.system);
     const globalID = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>createGUID(), []);
     const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const systemRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(system);
@@ -17077,10 +17098,199 @@ const Dropdown = ({ value: value1, options, onChange, placeholder = "\u8BF7\u900
     });
 };
 const Overlay_Dropdown = Dropdown;
+const DEFAULT_SAMPLE_INTERVAL_MS = 80;
+const DEFAULT_SAMPLE_IDLE_DELAY_MS = 80;
+const toCursorEventSnapshot = (snapshot)=>({
+        sourceId: snapshot.sourceId,
+        sourceType: snapshot.sourceType,
+        clientX: snapshot.clientX,
+        clientY: snapshot.clientY,
+        bounds: snapshot.bounds
+    });
+const isSameSample = (current, next)=>current?.sourceId === next.sourceId && current?.sourceType === next.sourceType && current?.coord.left === next.coord.left && current?.coord.top === next.coord.top && current?.clientX === next.clientX && current?.clientY === next.clientY && current?.bounds.left === next.bounds.left && current?.bounds.top === next.bounds.top && current?.bounds.right === next.bounds.right && current?.bounds.bottom === next.bounds.bottom && current?.sampledIndex === next.sampledIndex && current?.globalIndex === next.globalIndex && current?.rowIndex === next.rowIndex;
+class InteractionRuntime {
+    entries = new Map();
+    sampleIntervalMs;
+    sampleIdleDelayMs;
+    now;
+    requestFrame;
+    cancelFrame;
+    setTimer;
+    clearTimer;
+    constructor(options = {}){
+        this.sampleIntervalMs = options.sampleIntervalMs ?? DEFAULT_SAMPLE_INTERVAL_MS;
+        this.sampleIdleDelayMs = options.sampleIdleDelayMs ?? DEFAULT_SAMPLE_IDLE_DELAY_MS;
+        this.now = options.now ?? (()=>Date.now());
+        this.requestFrame = options.requestFrame ?? ((callback)=>{
+            if ('undefined' != typeof window) return window.requestAnimationFrame(callback);
+            return Number(setTimeout(callback, 16));
+        });
+        this.cancelFrame = options.cancelFrame ?? ((id)=>{
+            if ('undefined' != typeof window) return void window.cancelAnimationFrame(id);
+            clearTimeout(id);
+        });
+        this.setTimer = options.setTimer ?? ((callback, delay)=>{
+            if ('undefined' != typeof window) return window.setTimeout(callback, delay);
+            return setTimeout(callback, delay);
+        });
+        this.clearTimer = options.clearTimer ?? ((id)=>{
+            if ('undefined' != typeof window) return void window.clearTimeout(id);
+            clearTimeout(id);
+        });
+    }
+    updatePointer(id, snapshot) {
+        const entry = this.ensureEntry(id);
+        entry.version += 1;
+        entry.pointer = {
+            ...snapshot,
+            version: entry.version,
+            timestamp: this.now()
+        };
+        this.schedulePointerFrame(entry);
+        this.scheduleSample(entry);
+    }
+    refreshBounds(id, bounds) {
+        const entry = this.ensureEntry(id);
+        if (!entry.pointer) return;
+        entry.version += 1;
+        entry.pointer = {
+            ...entry.pointer,
+            bounds,
+            version: entry.version,
+            timestamp: this.now()
+        };
+        this.schedulePointerFrame(entry);
+    }
+    clearPointer(id, _reason = 'manual') {
+        const entry = this.entries.get(id);
+        if (!entry) return;
+        entry.pointer = null;
+        entry.sample = null;
+        entry.lastSampleTimestamp = 0;
+        entry.hasSampleTimestamp = false;
+        this.clearEntryTimers(entry);
+        this.notifyPointer(entry, null);
+        this.notifySample(entry, null);
+    }
+    subscribePointer(id, listener) {
+        const entry = this.ensureEntry(id);
+        entry.pointerListeners.add(listener);
+        listener(entry.pointer);
+        return ()=>{
+            entry.pointerListeners.delete(listener);
+            this.cleanupEntryIfEmpty(id, entry);
+        };
+    }
+    subscribeSample(id, listener) {
+        const entry = this.ensureEntry(id);
+        entry.sampleListeners.add(listener);
+        listener(entry.sample);
+        return ()=>{
+            entry.sampleListeners.delete(listener);
+            this.cleanupEntryIfEmpty(id, entry);
+        };
+    }
+    getPointer(id) {
+        return this.entries.get(id)?.pointer ?? null;
+    }
+    getSample(id) {
+        return this.entries.get(id)?.sample ?? null;
+    }
+    dispose(id) {
+        if (id) {
+            const entry = this.entries.get(id);
+            if (!entry) return;
+            this.clearPointer(id, 'dispose');
+            entry.pointerListeners.clear();
+            entry.sampleListeners.clear();
+            this.entries.delete(id);
+            return;
+        }
+        for (const key of Array.from(this.entries.keys()))this.dispose(key);
+    }
+    ensureEntry(id) {
+        const current = this.entries.get(id);
+        if (current) return current;
+        const entry = {
+            pointer: null,
+            sample: null,
+            pointerListeners: new Set(),
+            sampleListeners: new Set(),
+            pointerFrame: null,
+            sampleTimer: null,
+            idleTimer: null,
+            lastSampleTimestamp: 0,
+            hasSampleTimestamp: false,
+            version: 0
+        };
+        this.entries.set(id, entry);
+        return entry;
+    }
+    schedulePointerFrame(entry) {
+        if (null !== entry.pointerFrame) return;
+        entry.pointerFrame = this.requestFrame(()=>{
+            entry.pointerFrame = null;
+            this.notifyPointer(entry, entry.pointer);
+        });
+    }
+    scheduleSample(entry) {
+        if (!entry.pointer) return;
+        const now = this.now();
+        const elapsed = now - entry.lastSampleTimestamp;
+        if (!entry.hasSampleTimestamp || elapsed >= this.sampleIntervalMs) this.flushSample(entry);
+        else if (!entry.sampleTimer) entry.sampleTimer = this.setTimer(()=>{
+            entry.sampleTimer = null;
+            this.flushSample(entry);
+        }, this.sampleIntervalMs - elapsed);
+        if (entry.idleTimer) this.clearTimer(entry.idleTimer);
+        entry.idleTimer = this.setTimer(()=>{
+            entry.idleTimer = null;
+            this.flushSample(entry);
+        }, this.sampleIdleDelayMs);
+    }
+    flushSample(entry) {
+        if (!entry.pointer) return;
+        const nextSample = {
+            ...entry.pointer
+        };
+        entry.lastSampleTimestamp = this.now();
+        entry.hasSampleTimestamp = true;
+        if (isSameSample(entry.sample, nextSample)) return;
+        entry.sample = nextSample;
+        this.notifySample(entry, nextSample);
+    }
+    notifyPointer(entry, snapshot) {
+        for (const listener of Array.from(entry.pointerListeners))listener(snapshot);
+    }
+    notifySample(entry, snapshot) {
+        for (const listener of Array.from(entry.sampleListeners))listener(snapshot);
+    }
+    clearEntryTimers(entry) {
+        if (null !== entry.pointerFrame) {
+            this.cancelFrame(entry.pointerFrame);
+            entry.pointerFrame = null;
+        }
+        if (entry.sampleTimer) {
+            this.clearTimer(entry.sampleTimer);
+            entry.sampleTimer = null;
+        }
+        if (entry.idleTimer) {
+            this.clearTimer(entry.idleTimer);
+            entry.idleTimer = null;
+        }
+    }
+    cleanupEntryIfEmpty(id, entry) {
+        if (entry.pointerListeners.size > 0 || entry.sampleListeners.size > 0 || entry.pointer || entry.sample) return;
+        this.clearEntryTimers(entry);
+        this.entries.delete(id);
+    }
+}
+const interactionRuntime = new InteractionRuntime();
+const toCursorSnapshotEvent = toCursorEventSnapshot;
 const cursor_follow_layer_useSafeLayoutEffect = 'undefined' == typeof window ? __WEBPACK_EXTERNAL_MODULE_react__.useEffect : __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect;
 const isValidBounds = (bounds)=>Number.isFinite(bounds.left) && Number.isFinite(bounds.top) && Number.isFinite(bounds.right) && Number.isFinite(bounds.bottom) && Number.isFinite(bounds.width) && Number.isFinite(bounds.height) && bounds.width > 0 && bounds.height > 0 && bounds.right > bounds.left && bounds.bottom > bounds.top;
 const isPointWithinBounds = (clientX, clientY, bounds)=>clientX >= bounds.left && clientX <= bounds.right && clientY >= bounds.top && clientY <= bounds.bottom;
-const CursorFollowLayer = ({ children, event, margin = 8, className })=>{
+const CursorFollowLayer = ({ children, interactionId, margin = 8, className })=>{
     const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const portalRoot = useChartsPortalContainer('cursor-follow');
     const renderedChildren = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>__WEBPACK_EXTERNAL_MODULE_react__.Children.toArray(children), [
@@ -17092,10 +17302,12 @@ const CursorFollowLayer = ({ children, event, margin = 8, className })=>{
         ref.current.style.visibility = 'hidden';
         ref.current.style.transform = 'translate3d(-100vw, -100vh, 0)';
     }, []);
-    const updatePosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
-        if (!event || !ref.current || !hasContent) return void hideLayer();
+    const latestPointerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const updatePosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((pointer = latestPointerRef.current)=>{
+        if (!pointer || !ref.current || !hasContent) return void hideLayer();
+        latestPointerRef.current = pointer;
         const node = ref.current;
-        const { clientX, clientY, bounds } = event;
+        const { clientX, clientY, bounds } = pointer;
         if (!Number.isFinite(clientX) || !Number.isFinite(clientY) || !isValidBounds(bounds)) return void hideLayer();
         const { width, height } = node.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
@@ -17125,11 +17337,26 @@ const CursorFollowLayer = ({ children, event, margin = 8, className })=>{
         node.style.visibility = 'visible';
         node.style.transform = `translate3d(${nextLeft}px, ${nextTop}px, 0)`;
     }, [
-        event,
         hasContent,
         hideLayer,
         margin
     ]);
+    cursor_follow_layer_useSafeLayoutEffect(()=>{
+        if (!hasContent || !interactionId) return void hideLayer();
+        return interactionRuntime.subscribePointer(interactionId, (pointer)=>{
+            if (!pointer) {
+                latestPointerRef.current = null;
+                hideLayer();
+                return;
+            }
+            updatePosition(pointer);
+        });
+    }, [
+        hasContent,
+        hideLayer,
+        interactionId,
+        updatePosition
+    ]);
     cursor_follow_layer_useSafeLayoutEffect(()=>{
         if (!portalRoot) return;
         portalRoot.setAttribute('data-rfkit-cursor-layer', 'true');
@@ -17145,14 +17372,17 @@ const CursorFollowLayer = ({ children, event, margin = 8, className })=>{
     });
     cursor_follow_layer_useSafeLayoutEffect(()=>{
         if (!ref.current || !hasContent) return;
+        const handleResize = ()=>{
+            updatePosition();
+        };
         const observer = new ResizeObserver(()=>{
             updatePosition();
         });
         observer.observe(ref.current);
-        window.addEventListener('resize', updatePosition);
+        window.addEventListener('resize', handleResize);
         return ()=>{
             observer.disconnect();
-            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('resize', handleResize);
         };
     }, [
         hasContent,
@@ -17171,15 +17401,11 @@ const CursorFollowLayer = ({ children, event, margin = 8, className })=>{
     }), portalRoot);
 };
 const cursor_follow_layer = CursorFollowLayer;
-const Popover = ({ children })=>{
-    const { state: { cursor: { event } } } = useStore_useStore();
-    if (!event) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(cursor_follow_layer, {
-        event: event,
+const Popover = ({ children, id })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(cursor_follow_layer, {
+        interactionId: id,
         margin: UI_CONFIG.POPOVER_MARGIN,
         children: children
     });
-};
 const Overlay_Popover = Popover;
 const Portal_Portal = ({ id, children })=>{
     const [container, setContainer] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
@@ -18847,13 +19073,9 @@ class SpectrumAnalyzer {
             if (!data?.length) return;
             this.isProcessing = true;
             this.hasProcessedData = true;
-            let index = offset;
-            if (this.segments.length) {
-                const segment = this.segments[segmentOffset];
-                if (!segment) throw new DataValidationError(ERROR_MESSAGES.INVALID_SEGMENT(segmentOffset));
-                index = segment.startIndex + offset;
-                this.scanProgress = (index + data.length) / this.config.maxPoints;
-            } else if (data.length !== this.config.maxPoints) this.updateMaxPoints(data.length);
+            const index = this.resolveGlobalIndex(segmentOffset, offset);
+            if (this.segments.length) this.scanProgress = (index + data.length) / this.config.maxPoints;
+            else if (data.length !== this.config.maxPoints) this.updateMaxPoints(data.length);
             if (fluorescenceData && void 0 !== fluorescenceMaxCount) {
                 this.fluorescenceData = fluorescenceData;
                 this.fluorescenceMaxCount = fluorescenceMaxCount;
@@ -18893,6 +19115,7 @@ class SpectrumAnalyzer {
     }
     initializeSegments(segments) {
         if (!segments?.length) throw new DataValidationError(ERROR_MESSAGES.EMPTY_SEGMENTS);
+        const prevMaxPoints = this.config.maxPoints;
         let totalPoints = 0;
         this.segments = segments.map((segment)=>{
             const { startFrequency, stopFrequency, stepFrequency } = segment;
@@ -18909,7 +19132,17 @@ class SpectrumAnalyzer {
                 startIndex
             };
         });
-        this.updateMaxPoints(totalPoints);
+        this.updateMaxPoints(totalPoints, false);
+        if (prevMaxPoints === totalPoints) {
+            this.config = {
+                ...this.config,
+                outputRange: {
+                    start: 0,
+                    end: totalPoints
+                }
+            };
+            this.reset(false);
+        }
     }
     setAntennaFactor(d) {
         const { antennaFactorData, config: { maxPoints } } = this;
@@ -19133,8 +19366,9 @@ class SpectrumAnalyzer {
         this.allocateMetricsBuffers();
         this.clearMetricsBuffers();
         this.templateData = new Float32Array;
+        this.occupancyData = new Float32Array;
         this.backgroundNoiseData = new Float32Array;
-        this.thresholdData = new Float32Array;
+        this.clearThresholdDataState();
         this.waterfallData = Array.from({
             length: waterfallMaxFrames
         }, ()=>{
@@ -19156,7 +19390,6 @@ class SpectrumAnalyzer {
         this.templateOutputData = new Float32Array;
         this.occupancyOutputData = new Float32Array;
         this.backgroundNoiseOutputData = new Float32Array;
-        this.thresholdOutputData = new Float32Array;
         this.fluorescenceData = enableFluorescence ? new Uint32Array(maxPoints * FLUORESCENCE.LEVEL_RANGE) : new Uint32Array(0);
         this.fluorescenceMaxCount = 0;
         this.fluorescenceUpdateCounter = 0;
@@ -19253,16 +19486,30 @@ class SpectrumAnalyzer {
         });
         this.setPendingFlag("backgroundNoise", false);
     }
-    setThresholdData(data) {
-        if (!data || 0 === data.length) {
-            this.thresholdData = new Float32Array(0);
-            this.setPendingFlag("threshold", false);
-            return;
+    setThresholdData(data, options) {
+        if (!data || 0 === data.length) return void this.clearThresholdDataState();
+        const sourceData = data instanceof Float32Array ? data : new Float32Array(data);
+        if (options) {
+            const index = this.resolveGlobalIndex(options.segmentOffset ?? 0, options.offset ?? 0);
+            this.validateInput(sourceData, index);
+            if (this.thresholdData.length !== this.config.maxPoints) {
+                const next = new Float32Array(this.config.maxPoints);
+                next.fill(SPECTRUM.INITIAL_VALUE);
+                if (this.thresholdData.length > 0) next.set(this.thresholdData.subarray(0, this.config.maxPoints));
+                this.thresholdData = next;
+            }
+            this.thresholdData.set(sourceData, index);
+        } else {
+            const normalized = new Float32Array(this.config.maxPoints);
+            normalized.fill(SPECTRUM.INITIAL_VALUE);
+            normalized.set(sourceData.subarray(0, this.config.maxPoints));
+            this.thresholdData = normalized;
         }
-        this.thresholdData = new Float32Array(data);
         if (!this.hasProcessedData || this.isProcessing) return void this.setPendingFlag("threshold", true);
+        const thresholdOutputData = this.resampleSingleData(this.thresholdData);
+        this.thresholdOutputData = thresholdOutputData;
         this.notifySpectrumUpdate({
-            thresholdData: this.resampleSingleData(this.thresholdData)
+            thresholdData: thresholdOutputData
         });
         this.setPendingFlag("threshold", false);
     }
@@ -19296,6 +19543,19 @@ class SpectrumAnalyzer {
         }
         return templateOverData;
     }
+    resolveGlobalIndex(segmentOffset = 0, offset = 0) {
+        if (this.segments.length) {
+            const segment = this.segments[segmentOffset];
+            if (!segment) throw new DataValidationError(ERROR_MESSAGES.INVALID_SEGMENT(segmentOffset));
+            return segment.startIndex + offset;
+        }
+        return offset;
+    }
+    clearThresholdDataState() {
+        this.thresholdData = new Float32Array(0);
+        this.thresholdOutputData = new Float32Array(0);
+        this.setPendingFlag("threshold", false);
+    }
     resampleDataSeries() {
         const { antennaFactorData, antennaFactorSwitch, maxData, minData, avgData, templateData, occupancyData, backgroundNoiseData, thresholdData, config: { maxPoints, outputPoints } } = this;
         const activeAntennaFactorData = antennaFactorSwitch ? antennaFactorData : new Float32Array(maxPoints);
@@ -19368,7 +19628,7 @@ class SpectrumAnalyzer {
         this.waterfallData.push(newData);
         this.waterfallOutputData.push(outputData);
     }
-    updateMaxPoints(maxPoints) {
+    updateMaxPoints(maxPoints, preserveProcessedFlag = true) {
         if (this.config.maxPoints === maxPoints) return;
         this.config = {
             ...this.config,
@@ -19378,7 +19638,7 @@ class SpectrumAnalyzer {
                 end: maxPoints
             }
         };
-        this.reset(true);
+        this.reset(preserveProcessedFlag);
     }
     validateInput(data, index) {
         if (index < 0 || index + data.length > this.config.maxPoints) throw new IndexOutOfBoundsError(ERROR_MESSAGES.INDEX_OUT_OF_BOUNDS(index), index);
@@ -19452,7 +19712,9 @@ class SpectrumAnalyzer {
             this.setPendingFlag("backgroundNoise", false);
         }
         if (this.pendingDataFlags["threshold"] && this.thresholdData.length > 0) {
-            pendingOutput.thresholdData = this.resampleSingleData(this.thresholdData);
+            const thresholdOutputData = this.resampleSingleData(this.thresholdData);
+            this.thresholdOutputData = thresholdOutputData;
+            pendingOutput.thresholdData = thresholdOutputData;
             this.setPendingFlag("threshold", false);
         }
         if (this.pendingDataFlags["extra"] && Object.keys(this.extraData).length > 0) {
@@ -20016,6 +20278,13 @@ function getSeriesWithGraphicType(globalID) {
     });
     return result;
 }
+const DEFAULT_SPECTRUM_TYPE = 'singleFrequency';
+const WATERFALL_CAPABLE_SPECTRUM_TYPES = new Set([
+    DEFAULT_SPECTRUM_TYPE,
+    'scan',
+    'mscan'
+]);
+const shouldEnableSpectrumWaterfall = ({ heatmapElementID, type })=>!!heatmapElementID && WATERFALL_CAPABLE_SPECTRUM_TYPES.has(type ?? DEFAULT_SPECTRUM_TYPE);
 const applyAxisYRange = (currentAxisY, nextRange)=>{
     const [start, end] = nextRange;
     const currentRange = currentAxisY.range ?? constants_RANGE_DEFAULT;
@@ -20207,11 +20476,11 @@ function useSpectrumChartType({ type, heatmapElementID }) {
     ]);
     return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         let enableMetrics = false;
-        let enableWaterfall = false;
-        if (type === constants_ChartType.SingleFrequency || type === constants_ChartType.Scan || type === constants_ChartType.MScan) {
-            enableMetrics = true;
-            enableWaterfall = !!heatmapElementID;
-        }
+        const enableWaterfall = shouldEnableSpectrumWaterfall({
+            heatmapElementID,
+            type
+        });
+        if (type === constants_ChartType.SingleFrequency || type === constants_ChartType.Scan || type === constants_ChartType.MScan) enableMetrics = true;
         return {
             enableMetrics,
             enableWaterfall
@@ -20473,6 +20742,25 @@ function convertCoordToVisualLeft({ coord, zoom, segments }) {
     const index = Math.min(Math.round(safeLift / 100 * (totalPoints - 1)), totalPoints - 1);
     return (index - start) * 100 / (end - start + 1);
 }
+const hasBounds = (target)=>'function' == typeof target?.getBoundingClientRect;
+const calculateEventRelativePositionFromSource = (source)=>{
+    const { clientX = 0, clientY = 0 } = source;
+    const target = source.currentTarget ?? source.target;
+    const { left, top, width, height } = hasBounds(target) ? target.getBoundingClientRect() : {
+        height: 0,
+        left: 0,
+        top: 0,
+        width: 0
+    };
+    if (width <= 0 || height <= 0) return {
+        left: 0,
+        top: 0
+    };
+    return {
+        left: (clientX - left) / width * 100,
+        top: (clientY - top) / height * 100
+    };
+};
 function getEID(id) {
     return `EVENTBUS-${id}`;
 }
@@ -20490,16 +20778,7 @@ const createMouseEnterEventManager = (id, name, func)=>subscription_createSubscr
 const createWheelEventManager = (id, name, func)=>subscription_createSubscriptionManager(`${generateRecursiveId(id, func)}-wheel`, name, func, id);
 const createDragEventManager = (id, name, func)=>subscription_createSubscriptionManager(`${generateRecursiveId(id, func)}-drag`, name, func, id);
 const createLongPressEventManager = (id, name, func)=>subscription_createSubscriptionManager(`${generateRecursiveId(id, func)}-long-press`, name, func, id);
-const calculateEventRelativePosition = (e)=>{
-    const { target, clientX, clientY } = e;
-    const { left, top, width, height } = target.getBoundingClientRect();
-    const x = (clientX - left) / width * 100;
-    const y = (clientY - top) / height * 100;
-    return {
-        left: x,
-        top: y
-    };
-};
+const calculateEventRelativePosition = (e)=>calculateEventRelativePositionFromSource(e);
 const EVENT_PRIORITY_LEVEL_DEFAULT = 'void';
 const EVENT_PRIORITY_LEVELS = {
     [EVENT_PRIORITY_LEVEL_DEFAULT]: 0,
@@ -20568,6 +20847,20 @@ const FrequencyDisplay = ({ frequency, unit })=>frequency ? /*#__PURE__*/ (0, __
             unit
         ]
     }) : null;
+const useCursorSample = (id)=>{
+    const subscribe = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((listener)=>{
+        if (!id) return ()=>{};
+        return interactionRuntime.subscribeSample(id, ()=>{
+            listener();
+        });
+    }, [
+        id
+    ]);
+    const getSnapshot = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>id ? interactionRuntime.getSample(id) : null, [
+        id
+    ]);
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+};
 function useSeriesManager(globalID, options = {}) {
     const { subscribeToMode = true, subscribeToData = true, watchSeries } = options;
     const [updateCounter, setUpdateCounter] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
@@ -20655,7 +20948,7 @@ function getStableOrder(currentNames) {
 }
 function useFilteredSeries_useFilteredSeries(globalID, filter) {
     const { series } = useSeriesManager(globalID);
-    const { state: { series: { legendExternal } } } = useStore_useStore();
+    const legendExternal = useStore_useSelector((state)=>state.series.legendExternal);
     const filteredData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const filtered = Array.from(series.values()).filter((config)=>{
             if (legendExternal.includes(config.name)) return false;
@@ -20683,9 +20976,99 @@ function useFilteredSeries_useFilteredSeries(globalID, filter) {
     ]);
     return filteredData;
 }
+const clampPercent = (value1)=>Math.max(0, Math.min(100, value1));
+const normalizeRange = (a, b)=>({
+        end: Math.max(a, b),
+        start: Math.min(a, b)
+    });
+const resolveHeatmapColumnCount = (waterfallData)=>waterfallData.reduce((columnCount, row)=>Math.max(columnCount, row?.length ?? 0), 0);
+const resolveHeatmapGridInfo = (waterfallData)=>({
+        columnCount: resolveHeatmapColumnCount(waterfallData),
+        rowCount: waterfallData.length
+    });
+const resolveHeatmapRowIndex = (top, rowCount)=>{
+    if (rowCount <= 0) return -1;
+    if (1 === rowCount) return 0;
+    const safeTop = clampPercent(top);
+    return Math.max(0, Math.min(rowCount - 1, Math.ceil((100 - safeTop) * rowCount / 100) - 1));
+};
+const resolveHeatmapColumnIndex = (left, columnCount)=>{
+    if (columnCount <= 0) return -1;
+    if (1 === columnCount) return 0;
+    const safeLeft = clampPercent(left);
+    return Math.max(0, Math.min(columnCount - 1, Math.ceil(safeLeft * columnCount / 100) - 1));
+};
+const resolveHeatmapRowRange = (topA, topB, rowCount)=>{
+    const rowA = resolveHeatmapRowIndex(topA, rowCount);
+    const rowB = resolveHeatmapRowIndex(topB, rowCount);
+    if (rowA < 0 || rowB < 0) return null;
+    const { end, start } = normalizeRange(rowA, rowB);
+    return {
+        endIndex: end,
+        startIndex: start
+    };
+};
+const resolveHeatmapColumnRange = (leftA, leftB, columnCount)=>{
+    const columnA = resolveHeatmapColumnIndex(leftA, columnCount);
+    const columnB = resolveHeatmapColumnIndex(leftB, columnCount);
+    if (columnA < 0 || columnB < 0) return null;
+    const { end, start } = normalizeRange(columnA, columnB);
+    return {
+        endCol: end,
+        startCol: start
+    };
+};
+const resolveHeatmapGridRange = (waterfallData, bounds)=>{
+    const { columnCount, rowCount } = resolveHeatmapGridInfo(waterfallData);
+    if (0 === rowCount || 0 === columnCount) return null;
+    const rowRange = resolveHeatmapRowRange(bounds.startTop, bounds.endTop, rowCount);
+    const columnRange = resolveHeatmapColumnRange(bounds.startLeft, bounds.endLeft, columnCount);
+    if (!rowRange || !columnRange) return null;
+    return {
+        ...rowRange,
+        ...columnRange
+    };
+};
+const resolveHeatmapRangeData = (waterfallData, range)=>{
+    const { columnCount, rowCount } = resolveHeatmapGridInfo(waterfallData);
+    if (0 === rowCount || 0 === columnCount) return [];
+    const startIndex = Math.max(0, Math.min(rowCount - 1, range.startIndex));
+    const endIndex = Math.max(startIndex, Math.min(rowCount - 1, range.endIndex));
+    const startCol = Math.max(0, Math.min(columnCount - 1, range.startCol));
+    const endCol = Math.max(startCol, Math.min(columnCount - 1, range.endCol));
+    return waterfallData.slice(startIndex, endIndex + 1).map((row)=>{
+        const values = [];
+        for(let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1){
+            const rawValue = row?.[columnIndex];
+            values.push('number' == typeof rawValue && Number.isFinite(rawValue) ? rawValue : Number.NaN);
+        }
+        return values;
+    });
+};
+const resolveHeatmapCursorValue = (waterfallData, coord)=>{
+    const { columnCount, rowCount } = resolveHeatmapGridInfo(waterfallData);
+    if (0 === rowCount || 0 === columnCount) return null;
+    const rowIndex = resolveHeatmapRowIndex(coord.top, rowCount);
+    const columnIndex = resolveHeatmapColumnIndex(coord.left, columnCount);
+    if (rowIndex < 0 || columnIndex < 0) return null;
+    const row = waterfallData[rowIndex];
+    const rawValue = row?.[columnIndex];
+    const value1 = 'number' == typeof rawValue && Number.isFinite(rawValue) ? rawValue : null;
+    return {
+        columnIndex,
+        rowIndex,
+        timestamp: row?.timestamp ? String(row.timestamp) : '',
+        value: value1
+    };
+};
 const HeatmapCursorPopover = ({ id })=>{
-    const { state: { cursor: { coord }, axisX: { frequencyFormat, unit: axisXUnit = '' }, globalID, axisY: { unit: axisYUnit } } } = useStore_useStore();
-    const { left, top } = coord;
+    const frequencyFormat = useStore_useSelector((state)=>state.axisX.frequencyFormat);
+    const axisXUnit = useStore_useSelector((state)=>state.axisX.unit ?? '');
+    const globalID = useStore_useSelector((state)=>state.globalID);
+    const axisYUnit = useStore_useSelector((state)=>state.axisY.unit);
+    const sample = useCursorSample(id);
+    const left = sample?.coord.left;
+    const top = sample?.coord.top;
     const updateKey = useCursorPopoverUpdateKey('HeatmapPopover', id);
     const [value1, setValue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
     const [timestamp, setTimestamp] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
@@ -20703,23 +21086,22 @@ const HeatmapCursorPopover = ({ id })=>{
             setTimestamp('');
             return;
         }
-        const yIndex = Math.max(0, Math.min(outputWaterfall.length - 1, Math.round(outputWaterfall.length * (100 - top) / 100)));
-        const outputFrame = outputWaterfall[yIndex];
-        if (!outputFrame || 0 === outputFrame.length) return void setValue('');
-        const rawFrame = snapshot.rawData?.waterfallData?.[yIndex];
-        const globalIndex = snapshot.cursorIndex?.globalIndex;
-        const rawXIndex = 'number' == typeof globalIndex && Number.isFinite(globalIndex) && rawFrame && rawFrame.length > 0 ? Math.max(0, Math.min(rawFrame.length - 1, Math.floor(globalIndex))) : void 0;
-        const exactRawValue = void 0 !== rawXIndex && rawFrame ? rawFrame[rawXIndex] : void 0;
-        const sampledXIndex = leftToIndex(left, outputFrame.length);
-        const sampledValue = outputFrame[sampledXIndex];
-        const nextValue = Number.isFinite(exactRawValue) ? exactRawValue : sampledValue;
-        setValue('number' == typeof nextValue && Number.isFinite(nextValue) ? nextValue.toFixed(1) : '');
-        const frameTimestamp = outputFrame.timestamp;
-        setTimestamp(frameTimestamp ? String(frameTimestamp) : '');
+        const cursorValue = resolveHeatmapCursorValue(outputWaterfall, {
+            left,
+            top
+        });
+        if (!cursorValue) {
+            setValue('');
+            setTimestamp('');
+            return;
+        }
+        setValue(null !== cursorValue.value && Number.isFinite(cursorValue.value) ? cursorValue.value.toFixed(1) : '');
+        setTimestamp(cursorValue.timestamp);
     }, [
         globalID,
         left,
         top,
+        sample?.version,
         updateKey
     ]);
     const frequency = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>'number' == typeof left ? frequencyFormat?.(left) ?? '' : '', [
@@ -20768,8 +21150,10 @@ const HeatmapCursorPopover = ({ id })=>{
 };
 const CursorPopover = HeatmapCursorPopover;
 const LevelCursorPopover = ({ id })=>{
-    const { state: { cursor: { coord }, globalID, axisY: { unit: axisYUnit } } } = useStore_useStore();
-    const { left } = coord;
+    const globalID = useStore_useSelector((state)=>state.globalID);
+    const axisYUnit = useStore_useSelector((state)=>state.axisY.unit);
+    const sample = useCursorSample(id);
+    const left = sample?.coord.left;
     const updateKey = useCursorPopoverUpdateKey('LevelStreamPopover', id);
     const [value1, setValue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
     const [timestamp, setTimestamp] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
@@ -20796,6 +21180,7 @@ const LevelCursorPopover = ({ id })=>{
     }, [
         globalID,
         left,
+        sample?.version,
         updateKey
     ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Mask, {
@@ -20829,9 +21214,12 @@ const LevelCursorPopover = ({ id })=>{
     });
 };
 const Level_CursorPopover = LevelCursorPopover;
-const OccupancyCursorPopover = ()=>{
-    const { state: { cursor: { coord }, axisX: { frequencyFormat, unit: axisXUnit = '' }, globalID } } = useStore_useStore();
-    const { left } = coord;
+const OccupancyCursorPopover = ({ id })=>{
+    const frequencyFormat = useStore_useSelector((state)=>state.axisX.frequencyFormat);
+    const axisXUnit = useStore_useSelector((state)=>state.axisX.unit ?? '');
+    const globalID = useStore_useSelector((state)=>state.globalID);
+    const sample = useCursorSample(id);
+    const left = sample?.coord.left;
     const value1 = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         if (!globalID || 'number' != typeof left || !Number.isFinite(left)) return '';
         const snapshot = withDatabase(globalID).getAllRawData(left);
@@ -20847,7 +21235,8 @@ const OccupancyCursorPopover = ()=>{
         return '';
     }, [
         globalID,
-        left
+        left,
+        sample?.version
     ]);
     const frequency = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>'number' == typeof left ? frequencyFormat?.(left) ?? '' : '', [
         left,
@@ -20921,7 +21310,7 @@ const compareFrequencyMatchedCandidates = (currentFrequency, a, b)=>{
     if (0 !== widthDiff) return widthDiff;
     const centerDistanceDiff = Math.abs(getRangeCenter(a.range) - currentFrequency) - Math.abs(getRangeCenter(b.range) - currentFrequency);
     if (0 !== centerDistanceDiff) return centerDistanceDiff;
-    const stationPriorityDiff = Number(isStationInfo(b.item)) - Number(isStationInfo(a.item));
+    const stationPriorityDiff = Number(utils_isStationInfo(b.item)) - Number(utils_isStationInfo(a.item));
     if (0 !== stationPriorityDiff) return stationPriorityDiff;
     return getUnifiedSignalKey(a.item).localeCompare(getUnifiedSignalKey(b.item));
 };
@@ -20932,15 +21321,15 @@ const compareIndexMatchedCandidates = (currentFrequency, currentPointIndex, a, b
     if (0 !== widthDiff) return widthDiff;
     const frequencyDistanceDiff = getFrequencyDistanceToRange(currentFrequency, a.range) - getFrequencyDistanceToRange(currentFrequency, b.range);
     if (0 !== frequencyDistanceDiff) return frequencyDistanceDiff;
-    const stationPriorityDiff = Number(isStationInfo(b.item)) - Number(isStationInfo(a.item));
+    const stationPriorityDiff = Number(utils_isStationInfo(b.item)) - Number(utils_isStationInfo(a.item));
     if (0 !== stationPriorityDiff) return stationPriorityDiff;
     return getUnifiedSignalKey(a.item).localeCompare(getUnifiedSignalKey(b.item));
 };
-function isStationInfo(item) {
+function utils_isStationInfo(item) {
     return 'signalName' in item && 'orgName' in item;
 }
 function getUnifiedSignalKey(item) {
-    if (isStationInfo(item)) return `${item.signalName}-${item.frequency}`;
+    if (utils_isStationInfo(item)) return `${item.signalName}-${item.frequency}`;
     if (null != item.startFrequency && null != item.stopFrequency) return `${item.startFrequency}-${item.stopFrequency}`;
     return `${item.frequency}-${item.bandwidth}`;
 }
@@ -20952,7 +21341,7 @@ function toFrequencyRangeInput(item) {
         stopFrequency: null != item.stopFrequency ? Number(item.stopFrequency) : void 0
     };
 }
-function resolveBestSignalMatch(candidates, options) {
+function utils_resolveBestSignalMatch(candidates, options) {
     const { currentFrequency, currentPointIndex } = options;
     const indexTolerance = options.indexTolerance ?? SIGNAL_INDEX_MATCH_TOLERANCE;
     if (!Number.isFinite(currentFrequency) || !Number.isFinite(currentPointIndex) || !candidates.length) return;
@@ -20965,7 +21354,7 @@ function resolveBestSignalMatch(candidates, options) {
     return indexMatched[0];
 }
 const resolveSignalPresentation = (item)=>{
-    if (isStationInfo(item)) {
+    if (utils_isStationInfo(item)) {
         const signalType = item.signalType;
         const signalTypeInfo = SIGNAL_TYPE_MAP[signalType];
         const signalTypeName = signalTypeInfo?.name || item.signalType;
@@ -21014,40 +21403,49 @@ const resolveSignalPositions = (signalItems, segment)=>resolveSignalMatchCandida
             tooltip
         };
     });
-const resolveSignalSegments = ({ segments, signalItems, isCursorActive, currentFrequency, currentPosition })=>{
+const resolveStaticSignalSegments = ({ segments, signalItems })=>{
     if (!segments.length) return [];
     const totalSegmentPoints = segments.reduce((sum, segment)=>sum + segment.point, 0);
+    let segmentLeft = 0;
     return segments.map((segment, segmentIndex)=>{
-        const signalPositions = resolveSignalPositions(signalItems, segment);
-        const activeMatch = isCursorActive && currentPosition.segmentIndex === segmentIndex && Number.isFinite(currentFrequency) ? resolveBestSignalMatch(signalPositions, {
-            currentFrequency,
-            currentPointIndex: currentPosition.pointIndex
-        }) : void 0;
         const segmentWidth = segment.point / totalSegmentPoints * 100;
-        const segmentLeft = segments.slice(0, segmentIndex).reduce((sum, item)=>sum + item.point / totalSegmentPoints * 100, 0);
-        return {
+        const data = {
             segment,
             segmentIndex,
-            signalPositions,
-            activeSignalKey: activeMatch?.key,
+            signalPositions: resolveSignalPositions(signalItems, segment),
             style: {
                 left: `${segmentLeft}%`,
                 width: `${segmentWidth}%`
             }
         };
+        segmentLeft += segmentWidth;
+        return data;
     });
 };
-const findStationAtCursor = ({ frequency, signalItems, segments, currentPosition })=>{
+const resolveActiveSignalKey = ({ segmentData, isCursorActive, currentFrequency, currentPosition })=>{
+    if (!isCursorActive || !Number.isFinite(currentFrequency) || currentPosition.segmentIndex < 0) return;
+    const currentSegmentData = segmentData[currentPosition.segmentIndex];
+    if (!currentSegmentData) return;
+    return utils_resolveBestSignalMatch(currentSegmentData.signalPositions, {
+        currentFrequency,
+        currentPointIndex: currentPosition.pointIndex
+    })?.key;
+};
+const createStationRangeIndex = ({ signalItems, segments })=>{
+    if (!signalItems.length || !segments.length) return [];
+    const stationItems = signalItems.filter(utils_isStationInfo);
+    if (!stationItems.length) return [];
+    return segments.map((segment)=>resolveSignalMatchCandidates(stationItems, segment));
+};
+const findStationInRangeIndex = ({ frequency, stationRangeIndex, currentPosition })=>{
     if (!Number.isFinite(frequency)) return;
-    const currentSegment = segments[currentPosition.segmentIndex];
-    if (!currentSegment) return;
-    const stationItems = signalItems.filter(isStationInfo);
-    if (!stationItems.length) return;
-    const matchedSignal = resolveBestSignalMatch(resolveSignalMatchCandidates(stationItems, currentSegment), {
+    const candidates = stationRangeIndex[currentPosition.segmentIndex];
+    if (!candidates?.length) return;
+    const matchedSignal = utils_resolveBestSignalMatch(candidates, {
         currentFrequency: frequency,
         currentPointIndex: currentPosition.pointIndex
     });
-    return matchedSignal && isStationInfo(matchedSignal.item) ? matchedSignal.item : void 0;
+    return matchedSignal && utils_isStationInfo(matchedSignal.item) ? matchedSignal.item : void 0;
 };
 const withStationDataUpdate = (globalID, name, func)=>{
     const subscriptionId = `stationData-update-${globalID}`;
@@ -21063,7 +21461,10 @@ const STATION_DATA = (globalID, data)=>{
     return result;
 };
 function useUnifiedSignals({ respectVisibility = false } = {}) {
-    const { state: { globalID, signal } } = useStore_useStore();
+    const globalID = useStore_useSelector((state)=>state.globalID);
+    const signalData = useStore_useSelector((state)=>state.signal.data);
+    const signalDisplay = useStore_useSelector((state)=>state.signal.display);
+    const signalShow = useStore_useSelector((state)=>state.signal.show);
     const [updateTrigger, setUpdateTrigger] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         const subscriberName = `useUnifiedSignals-${globalID}-${Date.now()}`;
@@ -21079,30 +21480,39 @@ function useUnifiedSignals({ respectVisibility = false } = {}) {
         globalID
     ]);
     return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        if (respectVisibility && (!signal.show || !signal.display)) return [];
+        if (respectVisibility && (!signalShow || !signalDisplay)) return [];
         const stationData = STATION_DATA(globalID);
-        const signalData = signal.data || [];
+        const nextSignalData = signalData || [];
         return [
             ...stationData,
-            ...signalData
+            ...nextSignalData
         ];
     }, [
         globalID,
-        signal.data,
-        signal.display,
-        signal.show,
+        signalData,
+        signalDisplay,
+        signalShow,
         respectVisibility,
         updateTrigger
     ]);
 }
-function useStationInfoAtCursor({ frequency, enabled = true }) {
-    const { state: { cursor, segments } } = useStore_useStore();
-    const { coord: { left } } = cursor;
+function useStationInfoAtCursor({ frequency, enabled = true, cursorSample }) {
+    const cursor = useStore_useSelector((state)=>state.cursor);
+    const segments = useStore_useSelector((state)=>state.segments);
+    const left = cursorSample?.coord.left ?? cursor.coord.left;
     const signalItems = useUnifiedSignals({
         respectVisibility: enabled
     });
-    const isCursorActive = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>enabled && cursor_hasActiveSpectrumCursor(cursor), [
+    const stationRangeIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>createStationRangeIndex({
+            signalItems,
+            segments
+        }), [
+        segments,
+        signalItems
+    ]);
+    const isCursorActive = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>enabled && (cursorSample ? true : cursor_hasActiveSpectrumCursor(cursor)), [
         cursor,
+        cursorSample,
         enabled
     ]);
     const currentPosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>isCursorActive && 'number' == typeof left ? frequencyCalculation_calculateCursorPosition(left, segments) : {
@@ -21114,29 +21524,27 @@ function useStationInfoAtCursor({ frequency, enabled = true }) {
         segments
     ]);
     return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        if (!enabled || 'number' != typeof left || !Number.isFinite(left) || left < 0 || !signalItems.length || !segments?.length) return;
+        if (!enabled || 'number' != typeof left || !Number.isFinite(left) || left < 0 || !stationRangeIndex.length || !segments?.length) return;
         if (!isCursorActive) return;
         const currentFrequency = frequencyCalculation_getCursorFrequencyAtPosition(segments, currentPosition);
         if (!Number.isFinite(currentFrequency)) {
             const fallbackFrequency = Number(frequency);
             if (!Number.isFinite(fallbackFrequency)) return;
-            return findStationAtCursor({
+            return findStationInRangeIndex({
                 frequency: fallbackFrequency,
-                signalItems,
-                segments,
+                stationRangeIndex,
                 currentPosition
             });
         }
-        return findStationAtCursor({
+        return findStationInRangeIndex({
             frequency: currentFrequency,
-            signalItems,
-            segments,
+            stationRangeIndex,
             currentPosition
         });
     }, [
         enabled,
         frequency,
-        signalItems,
+        stationRangeIndex,
         segments,
         currentPosition,
         left,
@@ -21209,16 +21617,21 @@ const StationInfoPanel = ({ stationInfo })=>{
     });
 };
 const panels_StationInfoPanel = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(StationInfoPanel);
-const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true })=>{
-    const { state: { axisY, axisX: { frequencyFormat, unit }, globalID } } = useStore_useStore();
-    const filteredSeries = useFilteredSeries_useFilteredSeries(globalID, (config)=>false !== config.display);
+const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true, cursorSample })=>{
+    const axisYUnit = useStore_useSelector((state)=>state.axisY.unit);
+    const frequencyFormat = useStore_useSelector((state)=>state.axisX.frequencyFormat);
+    const unit = useStore_useSelector((state)=>state.axisX.unit);
+    const globalID = useStore_useSelector((state)=>state.globalID);
+    const snapshotCacheRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const filterVisibleSeries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((config)=>false !== config.display, []);
+    const filteredSeries = useFilteredSeries_useFilteredSeries(globalID, filterVisibleSeries);
     const calculateIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((values, series, sampledIndex, rawValue)=>{
         if (!values || 0 === values.length) return null;
         const safeSampledIndex = Math.max(0, Math.min(values.length - 1, Math.floor(sampledIndex)));
         const displayValue = Number.isFinite(rawValue) ? rawValue : values[safeSampledIndex];
         if ('number' != typeof displayValue) return null;
-        const unit = axisY.unit ?? '';
-        const level = getVirtualLevel(unit, displayValue)?.toFixed(1);
+        const nextUnit = axisYUnit ?? '';
+        const level = getVirtualLevel(nextUnit, displayValue)?.toFixed(1);
         if (!(0, utils_array.Ri)(level)) return null;
         return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
             className: "grid max-w-[220px] grid-cols-[minmax(0,1fr)_auto] items-center gap-x-1 text-xs",
@@ -21238,14 +21651,14 @@ const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true
                             children: level
                         }),
                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-                            children: unit
+                            children: nextUnit
                         })
                     ]
                 })
             ]
         }, series.name);
     }, [
-        axisY.unit
+        axisYUnit
     ]);
     const { value: value1, currentIndex } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         if (!globalID) return {
@@ -21257,7 +21670,16 @@ const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true
             value: null,
             currentIndex: Number.NaN
         };
-        const snapshot = db.getAllRawData(left);
+        const sampleVersion = cursorSample?.version;
+        const cachedSnapshot = snapshotCacheRef.current;
+        const snapshot = cachedSnapshot && cachedSnapshot.globalID === globalID && cachedSnapshot.left === left && cachedSnapshot.sampleVersion === sampleVersion && cachedSnapshot.updateKey === updateKey ? cachedSnapshot.snapshot : db.getAllRawData(left);
+        snapshotCacheRef.current = {
+            globalID,
+            left,
+            sampleVersion,
+            updateKey,
+            snapshot
+        };
         const cursorGlobalIndex = snapshot.cursorIndex?.globalIndex;
         const cursorSampledIndex = snapshot.cursorIndex?.sampledIndex;
         const sampledSeriesMap = {
@@ -21314,7 +21736,8 @@ const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true
         globalID,
         filteredSeries,
         updateKey,
-        left
+        left,
+        cursorSample?.version
     ]);
     const frequency = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>frequencyFormat?.(left) ?? '', [
         left,
@@ -21332,7 +21755,8 @@ const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true
     ]);
     const matchedStation = useStationInfoAtCursor({
         frequency,
-        enabled: showStationInfo
+        enabled: showStationInfo,
+        cursorSample
     });
     const hasStationInfo = showStationInfo && !!matchedStation;
     const hasValue = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>value1 && (Array.isArray(value1) ? value1.length > 0 : true), [
@@ -21361,12 +21785,16 @@ const FrequencyDataBoard = ({ left, updateKey, onChange, showStationInfo = true
 };
 const Spectrum_FrequencyDataBoard = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FrequencyDataBoard);
 const SpectrumCursorPopover = ({ id })=>{
-    const { state: { signal, cursor: { coord: { left } } } } = useStore_useStore();
+    const signalShow = useStore_useSelector((state)=>state.signal.show);
+    const signalDisplay = useStore_useSelector((state)=>state.signal.display);
+    const sample = useCursorSample(id);
+    const left = sample?.coord.left;
     const updateKey = useCursorPopoverUpdateKey('SpectrumPopover', id);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Spectrum_FrequencyDataBoard, {
-        left: left,
+        left: 'number' == typeof left ? left : -1,
         updateKey: updateKey,
-        showStationInfo: signal.show && signal.display
+        showStationInfo: signalShow && signalDisplay,
+        cursorSample: sample
     });
 };
 const Spectrum_CursorPopover = SpectrumCursorPopover;
@@ -21380,35 +21808,46 @@ const resolveCursorPopover = ({ id, mode, type })=>{
     if (type === constants_ModuleType.Heatmap) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(CursorPopover, {
         id: id
     });
-    if (type === constants_ModuleType.Occupancy) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Occupancy_CursorPopover, {});
+    if (type === constants_ModuleType.Occupancy) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Occupancy_CursorPopover, {
+        id: id
+    });
     return null;
 };
 const Cursor_COMPONENT_KEY = 'Cursor';
 const CURSOR_BOUNDS_TOLERANCE = 1;
 const Cursor_isPointWithinBounds = (clientX, clientY, bounds, tolerance = CURSOR_BOUNDS_TOLERANCE)=>clientX >= bounds.left - tolerance && clientX <= bounds.right + tolerance && clientY >= bounds.top - tolerance && clientY <= bounds.bottom + tolerance;
-const buildCursorEventSnapshot = (event, sourceId, sourceType)=>{
+const buildCursorPointerSnapshot = (event, coord, sourceId, sourceType, cachedBounds)=>{
     const target = event.currentTarget;
     if (!(target instanceof HTMLElement)) return null;
-    const bounds = resolveCursorVisibleBounds(target);
+    const bounds = cachedBounds ?? resolveCursorVisibleBounds(target);
     return {
         sourceId,
         sourceType,
         clientX: event.clientX,
         clientY: event.clientY,
+        coord,
         bounds
     };
 };
+const resolveCursorTarget = (event)=>{
+    const target = event.currentTarget;
+    return target instanceof HTMLElement ? target : null;
+};
 const isSameCursorPayload = (currentCursor, nextCoord, nextEvent)=>{
     const prevEvent = currentCursor.event;
     return currentCursor.coord.left === nextCoord.left && currentCursor.coord.top === nextCoord.top && prevEvent?.sourceId === nextEvent?.sourceId && prevEvent?.sourceType === nextEvent?.sourceType && prevEvent?.clientX === nextEvent?.clientX && prevEvent?.clientY === nextEvent?.clientY && prevEvent?.bounds.left === nextEvent?.bounds.left && prevEvent?.bounds.top === nextEvent?.bounds.top && prevEvent?.bounds.right === nextEvent?.bounds.right && prevEvent?.bounds.bottom === nextEvent?.bounds.bottom;
 };
 const Cursor = ({ id, type })=>{
     const { state: { cursor, globalID }, dispatch } = useStore_useStore();
-    const { active, coord, show, mode, event } = cursor;
+    const { active, show, mode } = cursor;
     const [isEnabled, setIsEnabled] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const cursorRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(cursor);
     const activeRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(active);
     const isEnabledRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(isEnabled);
+    const boundsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const targetRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const xLineRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const yLineRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         cursorRef.current = cursor;
         activeRef.current = active;
@@ -21418,9 +21857,16 @@ const Cursor = ({ id, type })=>{
         active,
         isEnabled
     ]);
-    const clearCursorIfOwned = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>()=>{
+    const clearCursorIfOwned = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(reason = 'leave')=>{
             setIsEnabled(false);
-            if (cursorRef.current.event?.sourceId !== id) return;
+            const currentPointer = interactionRuntime.getPointer(id);
+            if (cursorRef.current.event?.sourceId !== id && currentPointer?.sourceId !== id) {
+                isEnabledRef.current = false;
+                boundsRef.current = null;
+                targetRef.current = null;
+                interactionRuntime.clearPointer(id, reason);
+                return;
+            }
             const nextCursor = {
                 ...cursorRef.current,
                 event: null,
@@ -21431,6 +21877,9 @@ const Cursor = ({ id, type })=>{
             };
             cursorRef.current = nextCursor;
             isEnabledRef.current = false;
+            boundsRef.current = null;
+            targetRef.current = null;
+            interactionRuntime.clearPointer(id, reason);
             (0, __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__.flushSync)(()=>{
                 setIsEnabled(false);
                 dispatch({
@@ -21443,27 +21892,86 @@ const Cursor = ({ id, type })=>{
         dispatch,
         id
     ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (show) return;
+        setIsEnabled(false);
+        isEnabledRef.current = false;
+        boundsRef.current = null;
+        targetRef.current = null;
+        interactionRuntime.clearPointer(id, 'manual');
+    }, [
+        id,
+        show
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>()=>{
+            interactionRuntime.dispose(id);
+        }, [
+        id
+    ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (!globalID || !show) return;
-        const unsubscribeEnter = createMouseEnterEventManager(id, Cursor_COMPONENT_KEY, ()=>{
-            setIsEnabled(true);
-        });
-        const unsubscribeMove = createMoveEventManager(id, Cursor_COMPONENT_KEY, (event, coord)=>{
-            if (!isEnabledRef.current) return;
-            const nextEvent = buildCursorEventSnapshot(event, id, type);
-            if (nextEvent && !Cursor_isPointWithinBounds(nextEvent.clientX, nextEvent.clientY, nextEvent.bounds)) return void clearCursorIfOwned();
-            if (isSameCursorPayload(cursorRef.current, coord, nextEvent)) return;
+        return interactionRuntime.subscribeSample(id, (sample)=>{
+            if (!sample || sample.sourceId !== id) return;
+            const nextEvent = toCursorSnapshotEvent(sample);
+            if (isSameCursorPayload(cursorRef.current, sample.coord, nextEvent)) return;
+            const nextCursor = {
+                ...cursorRef.current,
+                event: nextEvent,
+                coord: sample.coord
+            };
+            cursorRef.current = nextCursor;
             dispatch({
                 payload: {
-                    cursor: {
-                        ...cursorRef.current,
-                        event: nextEvent,
-                        coord
-                    }
+                    cursor: nextCursor
                 }
             });
             if (activeRef.current) CURSOR_SETACTIVE(globalID)();
         });
+    }, [
+        dispatch,
+        globalID,
+        id,
+        show
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!show || !active) return;
+        return interactionRuntime.subscribePointer(id, (pointer)=>{
+            const xLine = xLineRef.current;
+            const yLine = yLineRef.current;
+            if (!pointer || pointer.sourceId !== id) {
+                if (xLine) xLine.style.left = '-200%';
+                if (yLine) yLine.style.top = '-200%';
+                return;
+            }
+            if (xLine) xLine.style.left = `${pointer.coord.left}%`;
+            if (yLine) yLine.style.top = `${pointer.coord.top}%`;
+        });
+    }, [
+        active,
+        id,
+        show
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!globalID || !show) return;
+        const unsubscribeEnter = createMouseEnterEventManager(id, Cursor_COMPONENT_KEY, ()=>{
+            isEnabledRef.current = true;
+            setIsEnabled(true);
+        });
+        const unsubscribeMove = createMoveEventManager(id, Cursor_COMPONENT_KEY, (event, coord)=>{
+            if (!isEnabledRef.current) return;
+            const target = resolveCursorTarget(event);
+            if (!target) return;
+            if (targetRef.current !== target || !boundsRef.current) {
+                const bounds = resolveCursorVisibleBounds(target);
+                targetRef.current = target;
+                boundsRef.current = bounds;
+                interactionRuntime.refreshBounds(id, bounds);
+            }
+            const nextPointer = buildCursorPointerSnapshot(event, coord, id, type, boundsRef.current);
+            if (!nextPointer) return;
+            if (!Cursor_isPointWithinBounds(nextPointer.clientX, nextPointer.clientY, nextPointer.bounds)) return void clearCursorIfOwned('bounds');
+            interactionRuntime.updatePointer(id, nextPointer);
+        });
         const unsubscribeLeave = createMouseLeaveEventManager(id, Cursor_COMPONENT_KEY, clearCursorIfOwned);
         return ()=>{
             unsubscribeEnter?.();
@@ -21474,15 +21982,36 @@ const Cursor = ({ id, type })=>{
         id,
         globalID,
         show,
+        type,
         clearCursorIfOwned
     ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!show) return;
+        const refreshBounds = ()=>{
+            const target = targetRef.current;
+            if (!target) return;
+            const bounds = resolveCursorVisibleBounds(target);
+            boundsRef.current = bounds;
+            interactionRuntime.refreshBounds(id, bounds);
+        };
+        window.addEventListener('resize', refreshBounds);
+        window.addEventListener('scroll', refreshBounds, true);
+        return ()=>{
+            window.removeEventListener('resize', refreshBounds);
+            window.removeEventListener('scroll', refreshBounds, true);
+        };
+    }, [
+        id,
+        show
+    ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (!show) return;
         const handleGlobalPointerMove = (event)=>{
             if (!isEnabledRef.current) return;
-            const currentEvent = cursorRef.current.event;
-            if (!currentEvent || currentEvent.sourceId !== id) return;
-            if (currentEvent.bounds.width <= 0 || currentEvent.bounds.height <= 0 || !Cursor_isPointWithinBounds(event.clientX, event.clientY, currentEvent.bounds)) clearCursorIfOwned();
+            const currentPointer = interactionRuntime.getPointer(id);
+            const bounds = currentPointer?.bounds ?? cursorRef.current.event?.bounds;
+            if (!currentPointer || currentPointer.sourceId !== id || !bounds) return;
+            if (bounds.width <= 0 || bounds.height <= 0 || !Cursor_isPointWithinBounds(event.clientX, event.clientY, bounds)) clearCursorIfOwned('bounds');
         };
         window.addEventListener('pointermove', handleGlobalPointerMove, true);
         return ()=>{
@@ -21493,18 +22022,28 @@ const Cursor = ({ id, type })=>{
         id,
         clearCursorIfOwned
     ]);
-    const dashedStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
-            x: {
-                left: `${coord.left || -100}%`,
-                opacity: active ? 0.5 : 0
-            },
-            y: {
-                top: `${coord.top || -100}%`,
-                opacity: active ? 0.5 : 0
-            }
-        }), [
-        active,
-        coord
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!show) return;
+        const handleWindowBlur = ()=>{
+            clearCursorIfOwned('blur');
+        };
+        const handleDocumentVisibilityChange = ()=>{
+            if ('hidden' === document.visibilityState) clearCursorIfOwned('visibility');
+        };
+        const handleDocumentMouseOut = (event)=>{
+            if (null === event.relatedTarget) clearCursorIfOwned('mouseout');
+        };
+        window.addEventListener('blur', handleWindowBlur);
+        document.addEventListener('visibilitychange', handleDocumentVisibilityChange);
+        document.addEventListener('mouseout', handleDocumentMouseOut);
+        return ()=>{
+            window.removeEventListener('blur', handleWindowBlur);
+            document.removeEventListener('visibilitychange', handleDocumentVisibilityChange);
+            document.removeEventListener('mouseout', handleDocumentMouseOut);
+        };
+    }, [
+        clearCursorIfOwned,
+        show
     ]);
     const popoverContent = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveCursorPopover({
             id,
@@ -21515,19 +22054,20 @@ const Cursor = ({ id, type })=>{
         mode,
         type
     ]);
-    if (!show || !isEnabled || !active || event?.sourceId !== id) return null;
+    if (!show || !isEnabled || !active) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Zoom_ZoomViewportLayer, {
         className: "z-[6]",
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: "pointer-events-none absolute left-[-200%] top-0 h-full border-l border-dashed border-chart-highlight/80",
-                style: dashedStyle.x
+                ref: xLineRef,
+                className: "pointer-events-none absolute left-[-200%] top-0 h-full border-l border-dashed border-chart-highlight/80 opacity-50"
             }),
             type === constants_ModuleType.Heatmap && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: "absolute left-0 top-[-200%] w-full border-t border-dashed border-chart-highlight/80",
-                style: dashedStyle.y
+                ref: yLineRef,
+                className: "absolute left-0 top-[-200%] w-full border-t border-dashed border-chart-highlight/80 opacity-50"
             }),
             popoverContent && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Overlay_Popover, {
+                id: id,
                 children: popoverContent
             }, `${mode ?? type}-${id}`)
         ]
@@ -21563,7 +22103,7 @@ function useEventBusCallback(id) {
     ]);
 }
 const EventBus_EventBus = ({ id })=>{
-    const globalID = useSelector((state)=>state.globalID);
+    const globalID = useStore_useSelector((state)=>state.globalID);
     const EID = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>getEID(id), [
         id
     ]);
@@ -21893,7 +22433,6 @@ function useZoomEvent(id, name) {
         handleDrag
     ]);
 }
-const PERCENTAGE = 100;
 const tools_PRECISION = 1e4;
 const defaultAreaInfoResult = {
     startIndex: 0,
@@ -21912,28 +22451,27 @@ const defaultAreaInfoResult = {
 };
 function calculateAreaInfo({ endLeft, startLeft, startTop, endTop, frequencyFormat, globalID }) {
     const { waterfallData } = withDatabase(globalID).getAllRawData();
-    if (!waterfallData?.length || !waterfallData[0]?.length) return defaultAreaInfoResult;
-    const rowCount = waterfallData.length;
-    const colCount = waterfallData[0].length;
-    const indices = {
-        top: Math.max(0, Math.min(rowCount - 1, Math.ceil(rowCount * (PERCENTAGE - startTop) / PERCENTAGE) - 1)),
-        bottom: Math.max(0, Math.min(rowCount - 1, Math.ceil(rowCount * (PERCENTAGE - endTop) / PERCENTAGE) - 1)),
-        start: Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * startLeft / PERCENTAGE) - 1)),
-        end: Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * endLeft / PERCENTAGE) - 1))
-    };
+    if (!waterfallData?.length) return defaultAreaInfoResult;
+    const indices = resolveHeatmapGridRange(waterfallData, {
+        endLeft,
+        endTop,
+        startLeft,
+        startTop
+    });
+    if (!indices) return defaultAreaInfoResult;
     const formatFrequency = frequencyFormat;
     const frequencies = {
-        start: Math.round(Number(formatFrequency(startLeft)) * tools_PRECISION) / tools_PRECISION,
-        end: Math.round(Number(formatFrequency(endLeft)) * tools_PRECISION) / tools_PRECISION
+        start: Math.round(Number(formatFrequency(Math.min(startLeft, endLeft))) * tools_PRECISION) / tools_PRECISION,
+        end: Math.round(Number(formatFrequency(Math.max(startLeft, endLeft))) * tools_PRECISION) / tools_PRECISION
     };
     const bandwidth = Math.abs(frequencies.end - frequencies.start);
-    const startTimestamp = waterfallData[indices.top]?.timestamp || '';
-    const endTimestamp = waterfallData[indices.bottom]?.timestamp || '';
+    const startTimestamp = waterfallData[indices.startIndex]?.timestamp || '';
+    const endTimestamp = waterfallData[indices.endIndex]?.timestamp || '';
     const result = {
-        startIndex: indices.top,
-        endIndex: indices.bottom,
-        startCol: indices.start,
-        endCol: indices.end,
+        startIndex: indices.startIndex,
+        endIndex: indices.endIndex,
+        startCol: indices.startCol,
+        endCol: indices.endCol,
         startTimestamp,
         endTimestamp,
         startFrequency: frequencies.start,
@@ -21942,30 +22480,32 @@ function calculateAreaInfo({ endLeft, startLeft, startTop, endTop, frequencyForm
         endFrequencyFormat: String(frequencies.end),
         bandwidth,
         bandwidthFormat: getFrequencyToFixed(bandwidth),
-        data: waterfallData.slice(indices.bottom, indices.top + 1).map((row)=>Array.from(row.slice(indices.start, indices.end + 1)))
+        data: resolveHeatmapRangeData(waterfallData, indices)
     };
     return result;
 }
 const heatmapCaptureUpdate = (globalID, func)=>subscription_createSubscriptionManager(`heatmapCaptureUpdate-${globalID}`, '0', func, globalID);
 const Area_COMPONENT_KEY = constants_ToolType.HeatmapCapture;
-const Area = (props)=>{
-    const { state: { heatmapCapture, segments, axisX: { frequencyFormat, unit }, system, globalID } } = useStore_useStore();
+const Area_Area = (props)=>{
+    const { state: { heatmapCapture, axisX: { frequencyFormat, unit }, system, globalID } } = useStore_useStore();
     const { id } = props;
-    const { type, show, sync, onChange } = heatmapCapture;
-    const canArea = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>type === heatmap_HeatmapCaptureType.Area && show, [
-        type
+    const { type, show, display, onChange } = heatmapCapture;
+    const canArea = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>type === heatmap_HeatmapCaptureType.Area && show && display, [
+        type,
+        show,
+        display
     ]);
     const [info, setInfo] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultAreaInfoResult);
     const [areaStyle, setAreaStyle] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (canArea) {
-            createMouseUpEventManager(id, Area_COMPONENT_KEY, ()=>{
+            const cleanupMouseUp = createMouseUpEventManager(id, Area_COMPONENT_KEY, ()=>{
                 onChange(info);
             });
-            createMouseLeaveEventManager(id, Area_COMPONENT_KEY, ()=>{
+            const cleanupMouseLeave = createMouseLeaveEventManager(id, Area_COMPONENT_KEY, ()=>{
                 onChange(info);
             });
-            createDragEventManager(id, Area_COMPONENT_KEY, (start, end)=>{
+            const cleanupDrag = createDragEventManager(id, Area_COMPONENT_KEY, (start, end)=>{
                 if (compareEventPriority(id, Area_COMPONENT_KEY) && start && end) {
                     const { left: startLeft, top: startTop } = start;
                     const { left: endLeft, top: endTop } = end;
@@ -21996,16 +22536,19 @@ const Area = (props)=>{
                     }));
                 }
             });
+            return ()=>{
+                cleanupMouseUp?.();
+                cleanupMouseLeave?.();
+                cleanupDrag?.();
+            };
         }
     }, [
         id,
         canArea,
-        sync,
-        areaStyle,
         info,
-        segments,
         frequencyFormat,
-        globalID
+        globalID,
+        onChange
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (!canArea) {
@@ -22086,13 +22629,15 @@ const Area = (props)=>{
         ]
     });
 };
-const Capture_Area = Area;
+const Area = Area_Area;
 const RowIndex_COMPONENT_KEY = constants_ToolType.HeatmapCapture;
 const RowIndex_RowIndex = ({ id })=>{
     const { state: { heatmapCapture, globalID, publish } } = useStore_useStore();
     const { onChange: onRowIndexChange, show, type, display } = heatmapCapture;
-    const canRowindex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>type === heatmap_HeatmapCaptureType.RowIndex, [
-        type
+    const canRowindex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>type === heatmap_HeatmapCaptureType.RowIndex && show && display, [
+        type,
+        show,
+        display
     ]);
     const [info, setInfo] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
     const [currentPosition, setCurrentPosition] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
@@ -22121,7 +22666,7 @@ const RowIndex_RowIndex = ({ id })=>{
         publish
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        const isInteractive = globalID && show && display && canRowindex;
+        const isInteractive = globalID && canRowindex;
         if (!isInteractive) return;
         const handleMouseDown = ()=>{
             setIsDragging(true);
@@ -22147,12 +22692,10 @@ const RowIndex_RowIndex = ({ id })=>{
     }, [
         id,
         globalID,
-        show,
         canRowindex,
-        display,
         updateRowData
     ]);
-    if (!canRowindex || !show || !display) return null;
+    if (!canRowindex) return null;
     const getMaskPosition = ()=>{
         if (!currentPosition) return {};
         const topPosition = currentPosition.top;
@@ -22932,16 +23475,18 @@ const Slider = ({ id })=>{
         const [heatmapData, len] = getHeatmapData();
         if (len <= 0) return null;
         const { position: pos, height: h, leftPosition: left, width: w } = r;
-        const endIndex = Math.round((100 - pos) / 100 * (len - 1));
-        const startIndex = Math.round((100 - (pos + h)) / 100 * (len - 1));
+        const gridInfo = resolveHeatmapGridInfo(heatmapData);
+        const rowRange = resolveHeatmapRowRange(pos + h, pos, len);
+        if (!rowRange) return null;
+        const { startIndex, endIndex } = rowRange;
         const startTimestamp = heatmapData[startIndex]?.timestamp ?? '';
         const endTimestamp = heatmapData[endIndex]?.timestamp ?? '';
         const startTs = dateTimeToTimestamp(startTimestamp);
         const endTs = dateTimeToTimestamp(endTimestamp);
         const duration = startTs > 0 && endTs > 0 ? Math.abs(endTs - startTs) : 0;
-        const colCount = heatmapData[0]?.length || 0;
-        const startCol = Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * left / 100) - 1));
-        const endCol = Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * (left + w) / 100) - 1));
+        const columnRange = resolveHeatmapColumnRange(left, left + w, gridInfo.columnCount);
+        if (!columnRange) return null;
+        const { startCol, endCol } = columnRange;
         const formatFn = frequencyFormatRef.current;
         const startFreqStr = formatFn?.(left);
         const endFreqStr = formatFn?.(left + w);
@@ -23013,7 +23558,7 @@ const Slider = ({ id })=>{
     const applyInterval = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((newInterval)=>{
         const { startIndex, endIndex, startFrequency, endFrequency } = newInterval;
         const [_, len] = getHeatmapData();
-        const rowChanged = !(startIndex === info?.startIndex && endIndex === info?.endIndex) && len > 0 && startIndex >= 0 && endIndex <= len && endIndex - startIndex >= Math.ceil(MIN_SIZE * len / 100);
+        const rowChanged = !(startIndex === info?.startIndex && endIndex === info?.endIndex) && len > 0 && startIndex >= 0 && endIndex < len && endIndex - startIndex >= Math.ceil(MIN_SIZE * len / 100);
         let freqChanged = false;
         let newLeftPosition = currentRect.leftPosition;
         let newWidth = currentRect.width;
@@ -23123,7 +23668,7 @@ const HeatmapCapture = (props)=>{
         ...props
     }) : type === heatmap_HeatmapCaptureType.RowIndex ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(RowIndex, {
         ...props
-    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Capture_Area, {
+    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Area, {
         ...props
     });
 };
@@ -23850,7 +24395,7 @@ const SegmentsDisplayControl_SegmentsDisplayControl = ()=>{
     });
 };
 const SegmentsDisplayControl = SegmentsDisplayControl_SegmentsDisplayControl;
-const SeriesControl_SeriesControl = ({ type })=>{
+const SeriesControl = ({ type })=>{
     const { state: { globalID } } = useStore_useStore();
     const { mode: currentMode } = useSeriesManager(globalID);
     const handleSeriesControl = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
@@ -23972,7 +24517,7 @@ const SeriesControl_SeriesControl = ({ type })=>{
         children: renderIcon()
     });
 };
-const SeriesControl = SeriesControl_SeriesControl;
+const controls_SeriesControl = SeriesControl;
 const SeriesDisplayControl = ()=>{
     const { state: { globalID, series: seriesConfig } } = useStore_useStore();
     const filteredSeries = useFilteredSeries_useFilteredSeries(globalID);
@@ -24358,10 +24903,50 @@ const FluorescenceSwitch = ()=>{
     });
 };
 const Fluorescence_Switch = FluorescenceSwitch;
+const DeltaMeasurementIcon_DeltaMeasurementIcon = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("svg", {
+        viewBox: "0 0 1024 1024",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        style: {
+            transition: 'transform 0.2s ease'
+        },
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+                d: "M512 200 L812 824 L212 824 Z",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "60",
+                strokeLinejoin: "miter"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
+                x1: "350",
+                y1: "650",
+                x2: "674",
+                y2: "650",
+                stroke: "currentColor",
+                strokeWidth: "40",
+                strokeDasharray: "10,10"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+                d: "M 360 650 L 390 630 L 390 670 Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+                d: "M 664 650 L 634 630 L 634 670 Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+const DeltaMeasurementIcon = DeltaMeasurementIcon_DeltaMeasurementIcon;
 const Switch_Switch = ()=>{
     const { state: { heatmapCapture }, dispatch } = useStore_useStore();
-    const { show, display, type } = heatmapCapture;
-    const { title, svg } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+    const { show, display, type, toolbarVariant } = heatmapCapture;
+    const { title, icon } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if ('deltaMeasurement' === toolbarVariant) return {
+            title: display ? "\u9000\u51FA\u0394\u6D4B\u91CF\u6A21\u5F0F" : "\u8FDB\u5165\u0394\u6D4B\u91CF\u6A21\u5F0F",
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DeltaMeasurementIcon, {})
+        };
         let title = "\u7011\u5E03\u56FE\u6355\u83B7-\u533A\u57DF\u6D4B\u91CF";
         let svg = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
             children: [
@@ -24408,11 +24993,16 @@ const Switch_Switch = ()=>{
         }
         return {
             title,
-            svg
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+                viewBox: "0 0 1024 1024",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: svg
+            })
         };
     }, [
         type,
-        display
+        display,
+        toolbarVariant
     ]);
     const setActive = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
         dispatch({
@@ -24434,11 +25024,7 @@ const Switch_Switch = ()=>{
             setActive(!display);
         },
         title: title,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
-            viewBox: "0 0 1024 1024",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: svg
-        })
+        children: icon
     });
 };
 const Capture_Switch = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(Switch_Switch);
@@ -24488,50 +25074,13 @@ const DeltaMeasurementSwitch = ()=>{
         deltaMeasurement,
         dispatch
     ]);
-    const DeltaIcon = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("svg", {
-            viewBox: "0 0 1024 1024",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            style: {
-                transition: 'transform 0.2s ease'
-            },
-            children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
-                    d: "M512 200 L812 824 L212 824 Z",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "60",
-                    strokeLinejoin: "miter"
-                }),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
-                    x1: "350",
-                    y1: "650",
-                    x2: "674",
-                    y2: "650",
-                    stroke: "currentColor",
-                    strokeWidth: "40",
-                    strokeDasharray: "10,10"
-                }),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
-                    d: "M 360 650 L 390 630 L 390 670 Z",
-                    fill: "currentColor"
-                }),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
-                    d: "M 664 650 L 634 630 L 634 670 Z",
-                    fill: "currentColor"
-                })
-            ]
-        }), [
-        display
-    ]);
     if (!show) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(primitives_IconBox, {
         active: display,
         tone: "primary",
         onClick: ()=>setDisplay(!display),
         title: display ? "\u9000\u51FA\u0394\u6D4B\u91CF\u6A21\u5F0F" : "\u8FDB\u5165\u0394\u6D4B\u91CF\u6A21\u5F0F",
-        children: DeltaIcon
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DeltaMeasurementIcon, {})
     });
 };
 const DeltaMeasurement_Switch = DeltaMeasurementSwitch;
@@ -25047,7 +25596,7 @@ const TOOLBAR_ITEM_CONFIGS = [
         ]
     },
     {
-        component: SeriesControl,
+        component: controls_SeriesControl,
         toolType: constants_ToolbarItemType.SeriesControl,
         supportedCharts: [
             constants_ChartType.SingleFrequency,
@@ -25159,8 +25708,8 @@ const resolveToolbarItemProps = (config, chartType)=>{
     return config.props;
 };
 const Toolbar = ({ type })=>{
-    const show = useSelector((state)=>state.toolbar.show);
-    const hiddenTools = useSelector((state)=>state.toolbar.hiddenTools ?? []);
+    const show = useStore_useSelector((state)=>state.toolbar.show);
+    const hiddenTools = useStore_useSelector((state)=>state.toolbar.hiddenTools ?? []);
     const { width, pluginBoxWidth } = useAxisYWidth_useAxisYWidth();
     const axisStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
             marginLeft: width,
@@ -25316,7 +25865,7 @@ class Occupancy extends BaseRenderer {
         });
     }
 }
-const Level_Level = (props)=>{
+const Level = (props)=>{
     const { opacity } = props;
     const { chart, Chart } = hooks_useChart({
         Render: Occupancy,
@@ -25339,7 +25888,7 @@ const Level_Level = (props)=>{
         style: style
     });
 };
-const Level = Level_Level;
+const modules_Level = Level;
 const LINE_WIDTH_BASE = 0.5;
 const MAJOR_TICK_LENGTH = 6;
 const MINOR_TICK_LENGTH = 4;
@@ -25354,7 +25903,7 @@ const MINOR_TICK_LINE_WIDTH = LINE_WIDTH_BASE;
 const AXIS_LINE_WIDTH = LINE_WIDTH_BASE;
 function useCanvasAxisY(options) {
     const { ranging } = options;
-    const axisY = useSelector((state)=>state.axisY);
+    const axisY = useStore_useSelector((state)=>state.axisY);
     const { range: axisYRange, disabled } = axisY;
     const canvasRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
@@ -25965,6 +26514,17 @@ const DragFrame = ({ id })=>{
     });
 };
 const Spectrum_DragFrame = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(DragFrame);
+const FREQUENCY_ALLOCATION_LANE_HEIGHT = 14;
+const FREQUENCY_ALLOCATION_COMPACT_LANE_HEIGHT = 5;
+const FREQUENCY_ALLOCATION_COMPACT_THRESHOLD = 4;
+const resolveFrequencyAllocationDensity = ({ density = 'auto', channelCount })=>{
+    const compact = 'compact' === density || 'auto' === density && channelCount > FREQUENCY_ALLOCATION_COMPACT_THRESHOLD;
+    return {
+        compact,
+        laneHeight: compact ? FREQUENCY_ALLOCATION_COMPACT_LANE_HEIGHT : FREQUENCY_ALLOCATION_LANE_HEIGHT,
+        showLabels: !compact
+    };
+};
 const originalColors = [
     '#B22222',
     '#CD5C5C',
@@ -26536,19 +27096,65 @@ const FrequencyAllocation_data = [
     }
 ];
 const STORAGE_KEY = 'rfkit-charts-frequency-allocation';
-const getFrequencyAllocationFromCache = ()=>{
+const isFrequencyAllocationChannelCache = (data)=>{
+    if (!data || 'object' != typeof data) return false;
+    const cache = data;
+    return 2 === cache.version && Array.isArray(cache.channels);
+};
+const readFrequencyAllocationCache = ()=>{
     const cached = localStorage.getItem(STORAGE_KEY);
     if (!cached) return null;
     const data = JSON.parse(cached);
-    return Array.isArray(data) ? data : null;
+    if (Array.isArray(data)) return data;
+    if (isFrequencyAllocationChannelCache(data)) return data;
+    return null;
+};
+const getFrequencyAllocationFromCache = ()=>{
+    const cache = readFrequencyAllocationCache();
+    return Array.isArray(cache) ? cache : null;
+};
+const getFrequencyAllocationChannelsFromCache = ()=>{
+    const cache = readFrequencyAllocationCache();
+    return isFrequencyAllocationChannelCache(cache) ? cache.channels : null;
 };
 const setFrequencyAllocationToCache = (data)=>{
     localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
 };
-function resolveFrequencyAllocationData(data) {
-    const cachedData = getFrequencyAllocationFromCache() ?? [];
+const setFrequencyAllocationChannelsToCache = (channels)=>{
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        version: 2,
+        channels
+    }));
+};
+const DEFAULT_FREQUENCY_ALLOCATION_CHANNEL_ID = 'default';
+const resolveChannelId = (channel, index)=>channel.id || channel.title || `${DEFAULT_FREQUENCY_ALLOCATION_CHANNEL_ID}-${index}`;
+const normalizeChannels = (channels, normalizeData)=>channels.map((channel, index)=>({
+            id: resolveChannelId(channel, index),
+            title: channel.title,
+            data: normalizeData(channel.data ?? [])
+        })).filter((channel)=>channel.data.length > 0);
+const normalizeSingleChannel = (data, normalizeData)=>[
+        {
+            id: DEFAULT_FREQUENCY_ALLOCATION_CHANNEL_ID,
+            data: normalizeData(data)
+        }
+    ];
+function resolveFrequencyAllocationChannelModel({ data, channels, cachedData, cachedChannels, presetData, normalizeData }) {
+    if (channels) return channels.length ? normalizeChannels(channels, normalizeData) : normalizeSingleChannel(data?.length ? data : presetData, normalizeData);
+    if (cachedChannels?.length) return normalizeChannels(cachedChannels, normalizeData);
     const inputData = data ?? [];
-    return sortAndRecolorFrequencyAllocationData(cachedData.length > 0 ? cachedData : inputData.length > 0 ? inputData : FrequencyAllocation_data);
+    const fallbackData = cachedData && cachedData.length > 0 ? cachedData : inputData.length > 0 ? inputData : presetData;
+    return normalizeSingleChannel(fallbackData, normalizeData);
+}
+function resolveFrequencyAllocationChannels({ data, channels }) {
+    return resolveFrequencyAllocationChannelModel({
+        data,
+        channels,
+        cachedData: getFrequencyAllocationFromCache(),
+        cachedChannels: getFrequencyAllocationChannelsFromCache(),
+        presetData: FrequencyAllocation_data,
+        normalizeData: sortAndRecolorFrequencyAllocationData
+    });
 }
 const resolveFrequencyAllocationRange = (band)=>{
     if (null != band.startFrequency && null != band.stopFrequency) {
@@ -26564,7 +27170,7 @@ const resolveFrequencyAllocationRange = (band)=>{
     }
     return null;
 };
-const resolveFrequencyAllocationSegments = ({ segments, allocations })=>{
+const resolveFrequencyAllocationSegments = ({ segments, allocations, channelIndex, channelTitle })=>{
     if (!segments.length || !allocations.length) return [];
     const totalSegmentPoints = segments.reduce((sum, segment)=>sum + segment.point, 0);
     return segments.map((segment, segmentIndex)=>{
@@ -26578,6 +27184,8 @@ const resolveFrequencyAllocationSegments = ({ segments, allocations })=>{
             return {
                 band,
                 range,
+                channelIndex: channelIndex ?? 0,
+                channelTitle,
                 position: {
                     left: `${left}%`,
                     width: `${width}%`
@@ -26597,15 +27205,30 @@ const resolveFrequencyAllocationSegments = ({ segments, allocations })=>{
         };
     });
 };
-function useFrequencyAllocationData_useFrequencyAllocationData() {
-    const { state: { frequencyAllocation: { data } } } = useStore_useStore();
-    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveFrequencyAllocationData(data), [
-        data
+const resolveFrequencyAllocationLanes = ({ segments, channels })=>channels.map((channel, channelIndex)=>({
+            channel,
+            channelIndex,
+            segmentData: resolveFrequencyAllocationSegments({
+                segments,
+                allocations: channel.data,
+                channelIndex,
+                channelTitle: channel.title
+            })
+        })).filter((lane)=>lane.segmentData.some((segment)=>segment.bandPositions.length > 0));
+function useFrequencyAllocationChannels() {
+    const data = useStore_useSelector((state)=>state.frequencyAllocation.data);
+    const channels = useStore_useSelector((state)=>state.frequencyAllocation.channels);
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveFrequencyAllocationChannels({
+            data,
+            channels
+        }), [
+        data,
+        channels
     ]);
 }
 const AllocationInfo_AllocationInfo = ({ allocationInfo, variant = 'default' })=>{
     if (!allocationInfo) return null;
-    const { title, description, startFrequency, stopFrequency, centerFrequency, stepFrequency, bandwidth, modulation } = allocationInfo;
+    const { title, description, startFrequency, stopFrequency, centerFrequency, stepFrequency, bandwidth, modulation, channelTitle } = allocationInfo;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: cn_cn('text-xs leading-5 text-popover-foreground', 'board' === variant && 'mt-[calc(var(--size-gap-base)/2)] border-t border-dashed border-border pt-[calc(var(--size-gap-base)/2)]'),
         children: [
@@ -26616,6 +27239,12 @@ const AllocationInfo_AllocationInfo = ({ allocationInfo, variant = 'default' })=
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: "mb-1 text-primary",
                 children: [
+                    channelTitle ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                        children: [
+                            "\u901A\u9053\uFF1A",
+                            channelTitle
+                        ]
+                    }) : null,
                     startFrequency && stopFrequency && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                         children: [
                             "\u9891\u7387\u8303\u56F4\uFF1A",
@@ -26661,57 +27290,91 @@ const AllocationInfo_AllocationInfo = ({ allocationInfo, variant = 'default' })=
     });
 };
 const AllocationInfo = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(AllocationInfo_AllocationInfo);
-const AllocationSegments_AllocationSegments = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ style, bandPositions, onMouseEnter, onMouseMove, onMouseLeave })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+const AllocationSegments = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ style, bandPositions, showLabels, onMouseEnter, onMouseMove, onMouseLeave })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: "absolute top-0 h-full [contain:layout]",
         style: style,
-        children: bandPositions.map(({ band, range, position })=>{
+        children: bandPositions.map((bandPosition)=>{
+            const { band, channelIndex, range, position } = bandPosition;
             const backgroundStyle = band.gradientColors ? {
                 backgroundImage: `linear-gradient(to right, ${band.gradientColors[0]}, ${band.gradientColors[1]})`
             } : {
                 backgroundColor: band.color || 'var(--primary)'
             };
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: "pointer-events-auto absolute flex h-full items-center justify-center overflow-hidden px-1 text-xs text-foreground/90 opacity-50 backdrop-blur-sm transition-[opacity,box-shadow] duration-200 hover:z-[1] hover:opacity-100 hover:shadow-lg",
+                className: "pointer-events-auto absolute flex h-full items-center justify-center overflow-hidden px-1 text-xs text-foreground/90 opacity-60 backdrop-blur-sm transition-[opacity,box-shadow] duration-200 hover:z-[1] hover:opacity-100 hover:shadow-lg",
                 style: {
                     ...backgroundStyle,
                     left: position.left,
                     width: position.width
                 },
-                onMouseEnter: onMouseEnter(band, range),
+                onMouseEnter: onMouseEnter(bandPosition),
                 onMouseMove: onMouseMove,
                 onMouseLeave: onMouseLeave,
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                children: showLabels ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                     className: "truncate",
                     children: band.title
-                })
-            }, `band-${band.title}-${range.start}-${range.stop}-${position.left}`);
+                }) : null
+            }, `band-${channelIndex ?? 0}-${band.title}-${range.start}-${range.stop}-${position.left}`);
         })
     }));
-const AllocationSegments = AllocationSegments_AllocationSegments;
-const overlays_Tooltip_Tooltip = ({ title, description, visible, x, y, startFrequency, stopFrequency, centerFrequency, stepFrequency, bandwidth, modulation })=>{
+const presenters_AllocationSegments = AllocationSegments;
+const overlays_Tooltip_Tooltip = ({ title, description, visible, x, y, startFrequency, stopFrequency, centerFrequency, stepFrequency, bandwidth, modulation, channelTitle, positionRef, scheduleRef })=>{
     const tooltipRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const [position, setPosition] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
+    const frameRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const updatePosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if (!visible || !tooltipRef.current) return;
+        const viewportPadding = 12;
+        const tooltip = tooltipRef.current;
+        const tooltipWidth = tooltip.offsetWidth;
+        const tooltipHeight = tooltip.offsetHeight;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const sourcePosition = positionRef.current ?? {
+            x,
+            y
+        };
+        const sourceX = sourcePosition.x;
+        const sourceY = sourcePosition.y;
+        const nextX = sourceX + tooltipWidth > windowWidth - viewportPadding ? sourceX - tooltipWidth - 10 : sourceX;
+        const nextY = sourceY + tooltipHeight > windowHeight - viewportPadding ? sourceY - tooltipHeight - 10 : sourceY;
+        const clampedX = Math.max(viewportPadding, Math.min(nextX, windowWidth - tooltipWidth - viewportPadding));
+        const clampedY = Math.max(viewportPadding, Math.min(nextY, windowHeight - tooltipHeight - viewportPadding));
+        tooltip.style.transform = `translate3d(${clampedX}px, ${clampedY}px, 0)`;
+    }, [
+        positionRef,
+        visible,
         x,
         y
-    });
+    ]);
+    const schedulePositionUpdate = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if (!visible || null !== frameRef.current) return;
+        frameRef.current = requestAnimationFrame(()=>{
+            frameRef.current = null;
+            updatePosition();
+        });
+    }, [
+        updatePosition,
+        visible
+    ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (visible && tooltipRef.current) {
-            const viewportPadding = 12;
-            const tooltip = tooltipRef.current;
-            const tooltipWidth = tooltip.offsetWidth;
-            const tooltipHeight = tooltip.offsetHeight;
-            const windowWidth = window.innerWidth;
-            const windowHeight = window.innerHeight;
-            const nextX = x + tooltipWidth > windowWidth - viewportPadding ? x - tooltipWidth - 10 : x;
-            const nextY = y + tooltipHeight > windowHeight - viewportPadding ? y - tooltipHeight - 10 : y;
-            setPosition({
-                x: Math.max(viewportPadding, Math.min(nextX, windowWidth - tooltipWidth - viewportPadding)),
-                y: Math.max(viewportPadding, Math.min(nextY, windowHeight - tooltipHeight - viewportPadding))
-            });
-        }
+        scheduleRef.current = schedulePositionUpdate;
+        return ()=>{
+            if (scheduleRef.current === schedulePositionUpdate) scheduleRef.current = null;
+        };
     }, [
-        x,
-        y,
+        schedulePositionUpdate,
+        scheduleRef
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!visible) return;
+        schedulePositionUpdate();
+        return ()=>{
+            if (null === frameRef.current) return;
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        };
+    }, [
+        schedulePositionUpdate,
         visible
     ]);
     if (!visible) return null;
@@ -26719,8 +27382,9 @@ const overlays_Tooltip_Tooltip = ({ title, description, visible, x, y, startFreq
         ref: tooltipRef,
         className: "pointer-events-none fixed z-[1000] max-w-[300px] rounded-[var(--radius-surface)] border border-border/70 bg-chart-panel/95 p-[var(--size-gap-base)] text-chart-panel-foreground shadow-lg backdrop-blur-md",
         style: {
-            left: position.x,
-            top: position.y
+            left: 0,
+            top: 0,
+            transform: `translate3d(${x}px, ${y}px, 0)`
         },
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AllocationInfo, {
             allocationInfo: {
@@ -26731,43 +27395,64 @@ const overlays_Tooltip_Tooltip = ({ title, description, visible, x, y, startFreq
                 centerFrequency,
                 stepFrequency,
                 bandwidth,
-                modulation
+                modulation,
+                channelTitle
             }
         })
     });
 };
 const overlays_Tooltip = overlays_Tooltip_Tooltip;
-const FrequencyAllocation = ()=>{
-    const unit = useSelector((state)=>state.axisX.unit);
-    const segments = useSelector((state)=>state.segments);
-    const display = useSelector((state)=>state.frequencyAllocation.display);
-    const show = useSelector((state)=>state.frequencyAllocation.show);
-    const zoomOffStyle = useSelector((state)=>state.zoom.style);
-    const frequencyAllocationData = useFrequencyAllocationData_useFrequencyAllocationData();
+const FrequencyAllocation_FrequencyAllocation = ()=>{
+    const unit = useStore_useSelector((state)=>state.axisX.unit);
+    const segments = useStore_useSelector((state)=>state.segments);
+    const display = useStore_useSelector((state)=>state.frequencyAllocation.display);
+    const show = useStore_useSelector((state)=>state.frequencyAllocation.show);
+    const density = useStore_useSelector((state)=>state.frequencyAllocation.density);
+    const zoomOffStyle = useStore_useSelector((state)=>state.zoom.style);
+    const frequencyAllocationChannels = useFrequencyAllocationChannels();
     const [tooltipInfo, setTooltipInfo] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
         visible: false,
         x: 0,
         y: 0
     });
-    const segmentData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveFrequencyAllocationSegments({
+    const tooltipPositionRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)({
+        x: 0,
+        y: 0
+    });
+    const scheduleTooltipPositionRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const updateTooltipPosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((event)=>{
+        tooltipPositionRef.current = {
+            x: event.clientX + 10,
+            y: event.clientY + 10
+        };
+        scheduleTooltipPositionRef.current?.();
+    }, []);
+    const laneData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveFrequencyAllocationLanes({
             segments,
-            allocations: frequencyAllocationData
+            channels: frequencyAllocationChannels
         }), [
         segments,
-        frequencyAllocationData
+        frequencyAllocationChannels
     ]);
+    const { laneHeight, showLabels } = resolveFrequencyAllocationDensity({
+        density,
+        channelCount: laneData.length
+    });
+    const containerHeight = Math.max(laneHeight, laneData.length * laneHeight);
     const handleTooltipUpdate = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((tooltipData)=>{
         setTooltipInfo((prev)=>({
                 ...prev,
                 ...tooltipData
             }));
     }, []);
-    const handleMouseEnter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((band, range)=>(e)=>{
+    const handleMouseEnter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(({ band, channelTitle, range })=>(e)=>{
+            updateTooltipPosition(e);
             const tooltipData = {
                 ...band,
                 visible: true,
-                x: e.clientX + 10,
-                y: e.clientY + 10,
+                x: tooltipPositionRef.current.x,
+                y: tooltipPositionRef.current.y,
+                channelTitle,
                 startFrequency: `${range.start}${unit}`,
                 stopFrequency: `${range.stop}${unit}`
             };
@@ -26778,15 +27463,13 @@ const FrequencyAllocation = ()=>{
             handleTooltipUpdate(tooltipData);
         }, [
         unit,
-        handleTooltipUpdate
+        handleTooltipUpdate,
+        updateTooltipPosition
     ]);
     const handleMouseMove = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
-        handleTooltipUpdate({
-            x: e.clientX + 10,
-            y: e.clientY + 10
-        });
+        updateTooltipPosition(e);
     }, [
-        handleTooltipUpdate
+        updateTooltipPosition
     ]);
     const handleMouseLeave = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
         handleTooltipUpdate({
@@ -26795,28 +27478,42 @@ const FrequencyAllocation = ()=>{
     }, [
         handleTooltipUpdate
     ]);
-    if (!show || !display) return null;
+    if (!show || !display || 0 === laneData.length) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        className: "pointer-events-none absolute inset-x-0 bottom-0 z-[5] flex h-3.5 w-full select-none items-center overflow-hidden bg-transparent",
+        className: "pointer-events-none absolute inset-x-0 bottom-0 z-[5] flex w-full select-none items-center overflow-hidden",
+        style: {
+            height: containerHeight,
+            backgroundColor: 'color-mix(in srgb, var(--chart-surface) 12%, transparent)'
+        },
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: "absolute right-0 top-0 flex h-full w-full items-end will-change-transform",
+                className: "absolute right-0 top-0 h-full w-full will-change-transform",
                 style: zoomOffStyle ?? void 0,
-                children: segmentData.map(({ segmentIndex, bandPositions, style })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AllocationSegments, {
-                        style: style,
-                        bandPositions: bandPositions,
-                        onMouseEnter: handleMouseEnter,
-                        onMouseMove: handleMouseMove,
-                        onMouseLeave: handleMouseLeave
-                    }, `segment-${segmentIndex}`))
+                children: laneData.map(({ channel, channelIndex, segmentData })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: "absolute left-0 w-full",
+                        style: {
+                            bottom: channelIndex * laneHeight,
+                            height: laneHeight
+                        },
+                        children: segmentData.map(({ segmentIndex, bandPositions, style })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(presenters_AllocationSegments, {
+                                style: style,
+                                bandPositions: bandPositions,
+                                showLabels: showLabels,
+                                onMouseEnter: handleMouseEnter,
+                                onMouseMove: handleMouseMove,
+                                onMouseLeave: handleMouseLeave
+                            }, `channel-${channel.id}-segment-${segmentIndex}`))
+                    }, `channel-${channel.id}`))
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(overlays_Tooltip, {
-                ...tooltipInfo
+                ...tooltipInfo,
+                positionRef: tooltipPositionRef,
+                scheduleRef: scheduleTooltipPositionRef
             })
         ]
     });
 };
-const Spectrum_FrequencyAllocation = FrequencyAllocation;
+const FrequencyAllocation = FrequencyAllocation_FrequencyAllocation;
 const useUpdateKey = (id)=>{
     const [updateKey, setUpdateKey] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
@@ -26950,6 +27647,12 @@ const FrequencyTagLine_FrequencyTagLine = (props)=>{
     });
 };
 const FrequencyTagLine = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FrequencyTagLine_FrequencyTagLine);
+const LIMIT_THRESHOLD_TEXT_STYLE = {
+    color: SPECTRUM_THRESHOLD_COLOR
+};
+const LIMIT_THRESHOLD_LINE_STYLE = {
+    borderColor: SPECTRUM_THRESHOLD_COLOR
+};
 const Item_Item = ({ value: value1, onChange })=>{
     const { state: { axisY, limit } } = useStore_useStore();
     const { label, disabled } = limit;
@@ -27014,6 +27717,7 @@ const Item_Item = ({ value: value1, onChange })=>{
                     type: "button",
                     disabled: disabled,
                     className: "pointer-events-auto absolute right-7 top-[-28px] z-[8] flex h-6 appearance-none items-center justify-center rounded-[var(--radius-control)] border-0 bg-secondary px-2 text-xs text-foreground",
+                    style: LIMIT_THRESHOLD_TEXT_STYLE,
                     onClick: ()=>setIsEdit(true),
                     children: [
                         label,
@@ -27023,6 +27727,7 @@ const Item_Item = ({ value: value1, onChange })=>{
                     ]
                 }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                     className: "pointer-events-auto absolute right-7 top-[-28px] z-[8] flex h-6 items-center justify-between bg-secondary px-2 text-xs text-foreground",
+                    style: LIMIT_THRESHOLD_TEXT_STYLE,
                     children: [
                         label,
                         "\xa0",
@@ -27034,7 +27739,8 @@ const Item_Item = ({ value: value1, onChange })=>{
                             min: min,
                             max: max,
                             step: step / 5,
-                            className: "h-auto w-14 border-none bg-transparent p-0 text-center text-primary outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                            className: "h-auto w-14 border-none bg-transparent p-0 text-center outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                            style: LIMIT_THRESHOLD_TEXT_STYLE,
                             onKeyDown: onEnter
                         }),
                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -27044,7 +27750,8 @@ const Item_Item = ({ value: value1, onChange })=>{
                     ]
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: "absolute right-0 top-[-0.5px] z-[8] h-0 w-full border-b border-dashed border-primary"
+                    className: "absolute right-0 top-[-0.5px] z-[8] h-0 w-full border-b border-dashed",
+                    style: LIMIT_THRESHOLD_LINE_STYLE
                 })
             ]
         })
@@ -27185,7 +27892,8 @@ const useMarkerEvents = (props)=>{
     const stateRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)({
         isDown: null,
         dragStart: null,
-        isHover: ''
+        isHover: '',
+        hoverId: null
     });
     const getEventContainer = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>document.getElementById(getEID(id)) ?? document.getElementById(id), [
         id
@@ -27238,47 +27946,56 @@ const useMarkerEvents = (props)=>{
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         const isShow = display;
-        createMoveEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
+        const cleanupMove = createMoveEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
             if (!isShow) return;
             if (void 0 !== e.left) {
-                stateRef.current.isHover = checkHover({
+                const nextHover = checkHover({
                     left: e.left
                 });
+                const nextHoverId = 'object' == typeof nextHover ? nextHover.id : null;
+                if (stateRef.current.hoverId === nextHoverId) {
+                    stateRef.current.isHover = nextHover;
+                    return;
+                }
+                stateRef.current.isHover = nextHover;
+                stateRef.current.hoverId = nextHoverId;
                 onHover({
                     left: e.left
                 });
             }
         });
-        createDragEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
+        const cleanupDrag = createDragEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
             const { isDown } = stateRef.current;
             if (isShow && isDown && compareEventPriority(id, useMarkerEvents_COMPONENT_KEY) && !fixed) onUpdateMarker(isDown.id, {
                 left: e.left,
                 top: e.top
             });
         });
-        createMouseDownEventManager(id, useMarkerEvents_COMPONENT_KEY, (e)=>{
+        const cleanupMouseDown = createMouseDownEventManager(id, useMarkerEvents_COMPONENT_KEY, (e)=>{
             if (!isShow) return;
             const marker = findMarkerByPosition(e) || ('object' == typeof stateRef.current.isHover ? stateRef.current.isHover : null);
             if (marker && !fixed) stateRef.current.isDown = marker;
         });
-        createMouseUpEventManager(id, useMarkerEvents_COMPONENT_KEY, ()=>{
+        const cleanupMouseUp = createMouseUpEventManager(id, useMarkerEvents_COMPONENT_KEY, ()=>{
             if (!isShow) return;
             stateRef.current.isDown = null;
             resetEventLevel(id, useMarkerEvents_COMPONENT_KEY);
         });
-        createMouseLeaveEventManager(id, useMarkerEvents_COMPONENT_KEY, ()=>{
+        const cleanupMouseLeave = createMouseLeaveEventManager(id, useMarkerEvents_COMPONENT_KEY, ()=>{
             if (!isShow) return;
+            const hadHover = null !== stateRef.current.hoverId;
             stateRef.current.isDown = null;
             stateRef.current.isHover = '';
+            stateRef.current.hoverId = null;
             resetEventLevel(id, useMarkerEvents_COMPONENT_KEY);
-            onResetHover();
+            if (hadHover) onResetHover();
         });
-        createLongPressEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
+        const cleanupLongPress = createLongPressEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
             if (!isShow || !compareEventPriority(id, useMarkerEvents_COMPONENT_KEY)) return;
             const marker = findMarkerByPosition(e) || ('object' == typeof stateRef.current.isHover ? stateRef.current.isHover : null);
             if (marker?.id) onToggleSelect(marker.id);
         });
-        createDoubleClickEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
+        const cleanupDoubleClick = createDoubleClickEventManager(id, useMarkerEvents_COMPONENT_KEY, (_, e)=>{
             if (!isShow || !compareEventPriority(id, useMarkerEvents_COMPONENT_KEY)) return;
             if (void 0 !== e.left) {
                 const nearbyMarker = checkHover({
@@ -27290,6 +28007,15 @@ const useMarkerEvents = (props)=>{
                 });
             }
         });
+        return ()=>{
+            cleanupMove?.();
+            cleanupDrag?.();
+            cleanupMouseDown?.();
+            cleanupMouseUp?.();
+            cleanupMouseLeave?.();
+            cleanupLongPress?.();
+            cleanupDoubleClick?.();
+        };
     }, [
         id,
         display,
@@ -28680,19 +29406,17 @@ function useSignalDataManager() {
         updateSignalData
     };
 }
-const Signal = ({ show = true, display = true })=>{
-    const segments = useSelector((state)=>state.segments);
-    const zoomOffStyle = useSelector((state)=>state.zoom.style);
-    const cursor = useSelector((state)=>state.cursor);
-    const signal = useSelector((state)=>state.signal);
-    const { coord: { left } } = cursor;
+const Signal = ({ id, show = true, display = true })=>{
+    const segments = useStore_useSelector((state)=>state.segments);
+    const zoomOffStyle = useStore_useSelector((state)=>state.zoom.style);
+    const signal = useStore_useSelector((state)=>state.signal);
+    const cursorSample = useCursorSample(id);
+    const left = cursorSample?.coord.left;
     const signalItems = useUnifiedSignals({
         respectVisibility: true
     });
     const shouldDisplay = signal.show && signal.display && display;
-    const isCursorActive = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>cursor_hasActiveSpectrumCursor(cursor), [
-        cursor
-    ]);
+    const isCursorActive = !!cursorSample;
     const currentPosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>isCursorActive && 'number' == typeof left ? frequencyCalculation_calculateCursorPosition(left, segments) : {
             segmentIndex: -1,
             pointIndex: -1
@@ -28706,18 +29430,23 @@ const Signal = ({ show = true, display = true })=>{
         isCursorActive,
         segments
     ]);
-    const segmentData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveSignalSegments({
+    const segmentData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveStaticSignalSegments({
             segments,
-            signalItems,
+            signalItems
+        }), [
+        segments,
+        signalItems
+    ]);
+    const activeSignalKey = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveActiveSignalKey({
+            segmentData,
             isCursorActive,
             currentFrequency,
             currentPosition
         }), [
-        segments,
-        signalItems,
-        isCursorActive,
         currentFrequency,
-        currentPosition
+        currentPosition,
+        isCursorActive,
+        segmentData
     ]);
     if (!show || !shouldDisplay) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -28725,10 +29454,10 @@ const Signal = ({ show = true, display = true })=>{
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
             className: "absolute right-0 top-0 flex h-full w-full",
             style: zoomOffStyle ?? void 0,
-            children: segmentData.map(({ segmentIndex, signalPositions, activeSignalKey, style })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SignalSegments, {
+            children: segmentData.map(({ segmentIndex, signalPositions, style })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SignalSegments, {
                     style: style,
                     signalPositions: signalPositions,
-                    activeSignalKey: activeSignalKey,
+                    activeSignalKey: currentPosition.segmentIndex === segmentIndex ? activeSignalKey : void 0,
                     segmentIndex: segmentIndex
                 }, `segment-${segmentIndex}`))
         })
@@ -28737,7 +29466,7 @@ const Signal = ({ show = true, display = true })=>{
 const Spectrum_Signal = Signal;
 const Stripe_COMPONENT_KEY = constants_ToolType.Stripe;
 const EDGE_HIT_SLOP = 1.5;
-const clampPercent = (value1)=>Math.max(0, Math.min(100, value1));
+const Stripe_clampPercent = (value1)=>Math.max(0, Math.min(100, value1));
 const resolveDragMode = ({ cursor, left, right })=>{
     const leftDistance = Math.abs(cursor - left);
     const rightDistance = Math.abs(cursor - right);
@@ -28782,7 +29511,7 @@ const Stripe_Stripe = ({ id })=>{
     const updateStripe = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
         const dragState = dragStateRef.current;
         if (!dragState || !Number.isFinite(e?.left)) return;
-        const coordinateCursor = clampPercent(e.left);
+        const coordinateCursor = Stripe_clampPercent(e.left);
         const currentStripe = stripeRef.current;
         const { mode, startCursor, startLeft, startRight } = dragState;
         let nextLeft = startLeft;
@@ -28790,7 +29519,7 @@ const Stripe_Stripe = ({ id })=>{
         if ('move' === mode) {
             const delta = coordinateCursor - startCursor;
             const width = startRight - startLeft;
-            nextLeft = clampPercent(startLeft + delta);
+            nextLeft = Stripe_clampPercent(startLeft + delta);
             nextRight = nextLeft + width;
             if (nextRight > 100) {
                 nextRight = 100;
@@ -28834,7 +29563,7 @@ const Stripe_Stripe = ({ id })=>{
         createMouseDownEventManager(id, Stripe_COMPONENT_KEY, (e)=>{
             if (!show || !display || !Number.isFinite(e?.left)) return;
             const currentStripe = stripeRef.current;
-            const cursor = clampPercent(e.left);
+            const cursor = Stripe_clampPercent(e.left);
             dragStateRef.current = {
                 mode: resolveDragMode({
                     cursor,
@@ -28996,7 +29725,9 @@ const Spectrum_Spectrum = (props)=>{
                         id: id,
                         type: constants_ModuleType.Spectrum
                     }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Spectrum_Signal, {}),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Spectrum_Signal, {
+                        id: id
+                    }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Spectrum_DragFrame, {
                         id: id
                     }),
@@ -29008,7 +29739,7 @@ const Spectrum_Spectrum = (props)=>{
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyTagLine, {
                         id: id
                     }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Spectrum_FrequencyAllocation, {}),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyAllocation, {}),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DeltaMeasurement, {})
                 ]
             })
@@ -29050,7 +29781,7 @@ const LevelStream_Chart_Chart = (props)=>{
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FlexBox, {
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Spectrum, {
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PluginBox, {
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Level, {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Level, {
                             opacity: 0.5
                         })
                     })
@@ -29301,9 +30032,9 @@ const charts_Occupancy_Occupancy = withChartPublisher(OccupancyChart, 'Occupancy
 const charts_Occupancy = charts_Occupancy_Occupancy;
 const Zoom_Zoom = ()=>{
     const dispatch = useStoreDispatch();
-    const zoom = useSelector((state)=>state.zoom);
-    const totalPoints = useSelector((state)=>state.segments.totalPoints) ?? 0;
-    const frequencyFormat = useSelector((state)=>state.axisX.frequencyFormat);
+    const zoom = useStore_useSelector((state)=>state.zoom);
+    const totalPoints = useStore_useSelector((state)=>state.segments.totalPoints) ?? 0;
+    const frequencyFormat = useStore_useSelector((state)=>state.axisX.frequencyFormat);
     const { interval: { start, end }, onChange } = zoom;
     const ticks = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         if (!totalPoints || !frequencyFormat) return [
@@ -29587,6 +30318,16 @@ const useMarkerPublish_useMarkerPublish = ({ globalID })=>{
     };
 };
 const useMarkerPublish = useMarkerPublish_useMarkerPublish;
+function resolveThresholdDataOptions({ segmentOffset, offset }) {
+    const options = {};
+    if (void 0 !== segmentOffset) options.segmentOffset = segmentOffset;
+    if (void 0 !== offset) options.offset = offset;
+    return void 0 !== options.segmentOffset || void 0 !== options.offset ? options : void 0;
+}
+function setAnalyzerThresholdData(analyzer, payload) {
+    if (!('thresholdData' in payload)) return;
+    analyzer.setThresholdData(payload.thresholdData, resolveThresholdDataOptions(payload));
+}
 function useTemplateComparison() {
     const { state: { globalID, axisX: { frequencyFormat }, signal: { onChange } } } = useStore_useStore();
     const frequencyFormatRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(frequencyFormat);
@@ -29764,7 +30505,7 @@ function useSpectrumAnalyzer(props) {
                 break;
             case constants_PSType.Spectrum:
                 if (e.data) analyzer.current.process(e);
-                if ('thresholdData' in e) analyzer.current.setThresholdData(e.thresholdData);
+                setAnalyzerThresholdData(analyzer.current, e);
                 if (e.maxData) analyzer.current.setMaxData(e.maxData);
                 if (e.minData) analyzer.current.setMinData(e.minData);
                 if (e.avgData) analyzer.current.setAvgData(e.avgData);
@@ -29920,12 +30661,31 @@ const Spectrum_Chart_Chart = (props)=>{
     });
 };
 const Spectrum_Chart = Spectrum_Chart_Chart;
-const SpectrumChart = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(src_store, {
+const heatmapCaptureDefaults_DEFAULT_SPECTRUM_TYPE = 'singleFrequency';
+const DEFAULT_HEATMAP_CAPTURE_TYPE = 'slider';
+const withSpectrumHeatmapCaptureDefaults = (props)=>{
+    const type = props.type ?? heatmapCaptureDefaults_DEFAULT_SPECTRUM_TYPE;
+    if (!props.heatmapElementID || type !== heatmapCaptureDefaults_DEFAULT_SPECTRUM_TYPE && 'scan' !== type && 'mscan' !== type) return props;
+    return {
         ...props,
+        heatmapCapture: {
+            show: true,
+            display: false,
+            type: DEFAULT_HEATMAP_CAPTURE_TYPE,
+            toolbarVariant: 'deltaMeasurement',
+            ...props.heatmapCapture
+        }
+    };
+};
+const SpectrumChart = (props)=>{
+    const normalizedProps = withSpectrumHeatmapCaptureDefaults(props);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(src_store, {
+        ...normalizedProps,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Spectrum_Chart, {
-            ...props
+            ...normalizedProps
         })
     });
+};
 const charts_Spectrum_Spectrum = withChartPublisher(SpectrumChart, 'Spectrum');
 const charts_Spectrum = charts_Spectrum_Spectrum;
 function initChartsTheme(options = {}) {
@@ -29942,4 +30702,4 @@ function initChartsTheme(options = {}) {
     };
 }
 initializeChartsThemeEnvironment();
-export { constants_ChartType as ChartType, charts_Dial as Dial, constants_FrequencyUnit as FrequencyUnit, charts_Gauge as Gauge, charts_Heatmap as Heatmap, heatmap_HeatmapCaptureType as HeatmapCaptureType, IQ, LevelStream, constants_MarkerEventType as MarkerEventType, marker_MarkerMode as MarkerMode, constants_ModuleType as ModuleType, charts_Occupancy as Occupancy, constants_OptionKey as OptionKey, constants_PSType as PSType, constants_SegmentsEvent as SegmentsEvent, constants_SeriesType as SeriesType, signal_SignalDataType as SignalDataType, charts_Spectrum as Spectrum, constants_ToolType as ToolType, constants_ToolbarItemType as ToolbarItemType, formatFrequencyUnit, formatFrequencyUnitFromHz, formatFrequencyUnitFromMHz, getChartsThemeState, initChartsTheme, setFrequencyAllocationToCache, subscribeChartsThemeChange, useSafePublish, withChartPublisher };
+export { constants_ChartType as ChartType, charts_Dial as Dial, constants_FrequencyUnit as FrequencyUnit, charts_Gauge as Gauge, charts_Heatmap as Heatmap, heatmap_HeatmapCaptureType as HeatmapCaptureType, IQ, LevelStream, constants_MarkerEventType as MarkerEventType, marker_MarkerMode as MarkerMode, constants_ModuleType as ModuleType, charts_Occupancy as Occupancy, constants_OptionKey as OptionKey, constants_PSType as PSType, constants_SegmentsEvent as SegmentsEvent, constants_SeriesType as SeriesType, signal_SignalDataType as SignalDataType, charts_Spectrum as Spectrum, constants_ToolType as ToolType, constants_ToolbarItemType as ToolbarItemType, formatFrequencyUnit, formatFrequencyUnitFromHz, formatFrequencyUnitFromMHz, getChartsThemeState, initChartsTheme, setFrequencyAllocationChannelsToCache, setFrequencyAllocationToCache, subscribeChartsThemeChange, useSafePublish, withChartPublisher };