@rfkit/charts 1.5.1 → 1.7.0

package/index.js

@@ -79,6 +79,10 @@ var __webpack_modules__ = {
             module.id,
             `@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    [data-rfkit-charts-root], [data-rfkit-charts-root] {
+      --shimmer-angle: 20deg;
+    }
+
     [data-rfkit-charts-root] *, [data-rfkit-charts-root] :before, [data-rfkit-charts-root] :after {
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
@@ -97,6 +101,13 @@ var __webpack_modules__ = {
       --tw-exit-scale: 1;
       --tw-exit-translate-x: 0;
       --tw-exit-translate-y: 0;
+      --scroll-fade-t: 0px;
+      --scroll-fade-b: 0px;
+      --scroll-fade-s: 0px;
+      --scroll-fade-e: 0px;
+      --scroll-fade-mask: initial;
+      --shimmer-image: initial;
+      --shimmer-text-fill: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -170,6 +181,13 @@ var __webpack_modules__ = {
       --tw-exit-scale: 1;
       --tw-exit-translate-x: 0;
       --tw-exit-translate-y: 0;
+      --scroll-fade-t: 0px;
+      --scroll-fade-b: 0px;
+      --scroll-fade-s: 0px;
+      --scroll-fade-e: 0px;
+      --scroll-fade-mask: initial;
+      --shimmer-image: initial;
+      --shimmer-text-fill: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -367,6 +385,59 @@ var __webpack_modules__ = {
   initial-value: 0;
 }
 
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false
+}
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false
+}
+
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rfkit-charts-root] .shimmer {
+    -webkit-text-fill-color: currentColor;
+    background-image: none;
+    animation: none;
+  }
+}
+
 [data-rfkit-charts-root] .pointer-events-auto {
   pointer-events: auto;
 }
@@ -412,23 +483,15 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .inset-0 {
-  inset: calc(var(--spacing) * 0);
+  inset: 0;
 }
 
 [data-rfkit-charts-root] .inset-x-0 {
-  inset-inline: calc(var(--spacing) * 0);
-}
-
-[data-rfkit-charts-root] .start {
-  inset-inline-start: var(--spacing);
-}
-
-[data-rfkit-charts-root] .end {
-  inset-inline-end: var(--spacing);
+  inset-inline: 0;
 }
 
 [data-rfkit-charts-root] .top-0 {
-  top: calc(var(--spacing) * 0);
+  top: 0;
 }
 
 [data-rfkit-charts-root] .top-1\\/2 {
@@ -460,7 +523,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .right-0 {
-  right: calc(var(--spacing) * 0);
+  right: 0;
 }
 
 [data-rfkit-charts-root] .right-4 {
@@ -480,7 +543,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .bottom-0 {
-  bottom: calc(var(--spacing) * 0);
+  bottom: 0;
 }
 
 [data-rfkit-charts-root] .bottom-5 {
@@ -492,7 +555,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .left-0 {
-  left: calc(var(--spacing) * 0);
+  left: 0;
 }
 
 [data-rfkit-charts-root] .left-1\\/2 {
@@ -571,6 +634,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%;
 }
@@ -606,7 +685,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .m-0 {
-  margin: calc(var(--spacing) * 0);
+  margin: 0;
 }
 
 [data-rfkit-charts-root] .-mx-1 {
@@ -614,11 +693,11 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .mx-1 {
-  margin-inline: calc(var(--spacing) * 1);
+  margin-inline: var(--spacing);
 }
 
 [data-rfkit-charts-root] .my-1 {
-  margin-block: calc(var(--spacing) * 1);
+  margin-block: var(--spacing);
 }
 
 [data-rfkit-charts-root] .my-\\[calc\\(var\\(--size-gap-base\\)\\/2\\)\\] {
@@ -630,7 +709,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .mt-1 {
-  margin-top: calc(var(--spacing) * 1);
+  margin-top: var(--spacing);
 }
 
 [data-rfkit-charts-root] .mt-2 {
@@ -654,11 +733,11 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .mr-1 {
-  margin-right: calc(var(--spacing) * 1);
+  margin-right: var(--spacing);
 }
 
 [data-rfkit-charts-root] .mb-1 {
-  margin-bottom: calc(var(--spacing) * 1);
+  margin-bottom: var(--spacing);
 }
 
 [data-rfkit-charts-root] .mb-2 {
@@ -733,7 +812,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .h-0 {
-  height: calc(var(--spacing) * 0);
+  height: 0;
 }
 
 [data-rfkit-charts-root] .h-1\\.5 {
@@ -829,7 +908,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .min-h-0 {
-  min-height: calc(var(--spacing) * 0);
+  min-height: 0;
 }
 
 [data-rfkit-charts-root] .min-h-\\[30\\%\\] {
@@ -857,7 +936,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .w-0 {
-  width: calc(var(--spacing) * 0);
+  width: 0;
 }
 
 [data-rfkit-charts-root] .w-2\\.5 {
@@ -962,7 +1041,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .min-w-0 {
-  min-width: calc(var(--spacing) * 0);
+  min-width: 0;
 }
 
 [data-rfkit-charts-root] .min-w-4 {
@@ -1044,7 +1123,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .translate-x-0 {
-  --tw-translate-x: calc(var(--spacing) * 0);
+  --tw-translate-x: 0;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -1059,7 +1138,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .translate-y-0 {
-  --tw-translate-y: calc(var(--spacing) * 0);
+  --tw-translate-y: 0;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -1185,7 +1264,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .gap-0 {
-  gap: calc(var(--spacing) * 0);
+  gap: 0;
 }
 
 [data-rfkit-charts-root] .gap-0\\.5 {
@@ -1193,7 +1272,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .gap-1 {
-  gap: calc(var(--spacing) * 1);
+  gap: var(--spacing);
 }
 
 [data-rfkit-charts-root] .gap-1\\.5 {
@@ -1222,8 +1301,8 @@ var __webpack_modules__ = {
 
 [data-rfkit-charts-root] :where(.space-y-1 > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+  margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
 }
 
 [data-rfkit-charts-root] :where(.space-y-2 > :not(:last-child)) {
@@ -1233,7 +1312,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .gap-x-1 {
-  column-gap: calc(var(--spacing) * 1);
+  column-gap: var(--spacing);
 }
 
 [data-rfkit-charts-root] .gap-x-3 {
@@ -1249,7 +1328,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .gap-y-1 {
-  row-gap: calc(var(--spacing) * 1);
+  row-gap: var(--spacing);
 }
 
 [data-rfkit-charts-root] .gap-y-2 {
@@ -1642,7 +1721,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .p-0 {
-  padding: calc(var(--spacing) * 0);
+  padding: 0;
 }
 
 [data-rfkit-charts-root] .p-0\\.5 {
@@ -1650,7 +1729,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .p-1 {
-  padding: calc(var(--spacing) * 1);
+  padding: var(--spacing);
 }
 
 [data-rfkit-charts-root] .p-2 {
@@ -1686,7 +1765,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .px-1 {
-  padding-inline: calc(var(--spacing) * 1);
+  padding-inline: var(--spacing);
 }
 
 [data-rfkit-charts-root] .px-1\\.5 {
@@ -1726,7 +1805,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .py-1 {
-  padding-block: calc(var(--spacing) * 1);
+  padding-block: var(--spacing);
 }
 
 [data-rfkit-charts-root] .py-1\\.5 {
@@ -1742,11 +1821,11 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .pt-0 {
-  padding-top: calc(var(--spacing) * 0);
+  padding-top: 0;
 }
 
 [data-rfkit-charts-root] .pt-1 {
-  padding-top: calc(var(--spacing) * 1);
+  padding-top: var(--spacing);
 }
 
 [data-rfkit-charts-root] .pt-\\[calc\\(var\\(--size-gap-base\\)\\/2\\)\\] {
@@ -1754,7 +1833,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .pr-0 {
-  padding-right: calc(var(--spacing) * 0);
+  padding-right: 0;
 }
 
 [data-rfkit-charts-root] .pr-0\\.5 {
@@ -1762,7 +1841,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .pr-1 {
-  padding-right: calc(var(--spacing) * 1);
+  padding-right: var(--spacing);
 }
 
 [data-rfkit-charts-root] .pr-2 {
@@ -1770,11 +1849,11 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .pb-0 {
-  padding-bottom: calc(var(--spacing) * 0);
+  padding-bottom: 0;
 }
 
 [data-rfkit-charts-root] .pb-1 {
-  padding-bottom: calc(var(--spacing) * 1);
+  padding-bottom: var(--spacing);
 }
 
 [data-rfkit-charts-root] .pl-0\\.5 {
@@ -2558,7 +2637,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .data-\\[side\\=bottom\\]\\:translate-y-1[data-side="bottom"] {
-  --tw-translate-y: calc(var(--spacing) * 1);
+  --tw-translate-y: var(--spacing);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -2576,7 +2655,7 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .data-\\[side\\=right\\]\\:translate-x-1[data-side="right"] {
-  --tw-translate-x: calc(var(--spacing) * 1);
+  --tw-translate-x: var(--spacing);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
@@ -2684,38 +2763,38 @@ var __webpack_modules__ = {
 }
 
 [data-rfkit-charts-root] .data-\\[state\\=unchecked\\]\\:translate-x-0[data-state="unchecked"] {
-  --tw-translate-x: calc(var(--spacing) * 0);
+  --tw-translate-x: 0;
   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;
 }
@@ -5066,7 +5145,9 @@ function isRangeIntersectSegment(range, segment) {
 }
 const isPlainObject = (value1)=>'[object Object]' === Object.prototype.toString.call(value1) && null !== value1;
 const mergeObjects = (source, params)=>{
-    const target = source;
+    const target = {
+        ...source
+    };
     Object.keys(target).forEach((key)=>{
         const paramValue = params[key];
         if (isPlainObject(paramValue) && isPlainObject(target[key])) target[key] = {
@@ -5182,6 +5263,66 @@ const convertToTimestampedArrays = (data, timestamps)=>{
         return frame;
     });
 };
+const BandKind = {
+    Position: 'position',
+    CenterBandwidth: 'centerBandwidth',
+    FrequencyRange: 'frequencyRange'
+};
+const DEFAULT_BAND_STATE = {
+    kind: BandKind.Position,
+    show: false,
+    left: void 0,
+    width: 0,
+    color: ''
+};
+const hasOwn = (value1, key)=>Object.hasOwn(value1, key);
+const isFiniteNumber = (value1)=>'number' == typeof value1 && Number.isFinite(value1);
+const hasValidSharedFields = (input)=>(!hasOwn(input, 'show') || 'boolean' == typeof input.show) && (!hasOwn(input, 'color') || void 0 === input.color || 'string' == typeof input.color);
+const resolveSharedState = (input, current, strategy)=>({
+        show: 'boolean' == typeof input.show ? input.show : 'merge' === strategy ? current.show : true,
+        color: hasOwn(input, 'color') ? input.color : 'merge' === strategy ? current.color : void 0
+    });
+function resolveBandState(input, current = DEFAULT_BAND_STATE, strategy = 'replace') {
+    if (!hasValidSharedFields(input)) return current;
+    const hasPosition = hasOwn(input, 'left') || hasOwn(input, 'width');
+    const hasCenter = hasOwn(input, 'frequency') || hasOwn(input, 'bandwidth');
+    const hasRange = hasOwn(input, 'startFrequency') || hasOwn(input, 'stopFrequency');
+    const modeCount = Number(hasPosition) + Number(hasCenter) + Number(hasRange);
+    if (modeCount > 1) return current;
+    const shared = resolveSharedState(input, current, strategy);
+    if (hasCenter) {
+        if (!isFiniteNumber(input.frequency) || !isFiniteNumber(input.bandwidth) || input.bandwidth <= 0) return current;
+        return {
+            kind: BandKind.CenterBandwidth,
+            ...shared,
+            frequency: input.frequency,
+            bandwidth: input.bandwidth
+        };
+    }
+    if (hasRange) {
+        if (!isFiniteNumber(input.startFrequency) || !isFiniteNumber(input.stopFrequency) || input.stopFrequency <= input.startFrequency) return current;
+        return {
+            kind: BandKind.FrequencyRange,
+            ...shared,
+            startFrequency: input.startFrequency,
+            stopFrequency: input.stopFrequency
+        };
+    }
+    if (hasPosition) {
+        if (hasOwn(input, 'left') && void 0 !== input.left && !isFiniteNumber(input.left) || hasOwn(input, 'width') && void 0 !== input.width && !isFiniteNumber(input.width)) return current;
+        const currentPosition = current.kind === BandKind.Position ? current : void 0;
+        return {
+            kind: BandKind.Position,
+            ...shared,
+            left: hasOwn(input, 'left') ? input.left : 'merge' === strategy ? currentPosition?.left : void 0,
+            width: hasOwn(input, 'width') ? input.width ?? 0 : 'merge' === strategy ? currentPosition?.width ?? 0 : 0
+        };
+    }
+    return {
+        ...current,
+        ...shared
+    };
+}
 const AppContext = __WEBPACK_EXTERNAL_MODULE_react__["default"].createContext(null);
 const store_context = AppContext;
 var heatmap_HeatmapCaptureType = /*#__PURE__*/ function(HeatmapCaptureType) {
@@ -5364,6 +5505,7 @@ function createParams() {
             onChange: ()=>{}
         },
         band: {
+            kind: BandKind.Position,
             show: false,
             left: void 0,
             width: 0,
@@ -5934,6 +6076,14 @@ const Params_Params = (props)=>{
             const prevValue = prevPropsRef.current[name];
             const stateKey = name;
             if (void 0 !== currentValue && currentValue !== prevValue) {
+                if ('band' === name) {
+                    const nextBand = resolveBandState(currentValue, currentState.band, 'merge');
+                    if (nextBand !== currentState.band) {
+                        payload.band = nextBand;
+                        hasChanges = true;
+                    }
+                    continue;
+                }
                 payload[stateKey] = mergeParameter(stateKey, currentValue, currentState);
                 hasChanges = true;
             }
@@ -6133,20 +6283,28 @@ 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()));
 }
+function useStoreApi() {
+    return useAppContext();
+}
 function useStoreDispatch() {
     return useAppContext().dispatch;
 }
 const Store = (props)=>{
     const { children } = props;
     const initialStateRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    if (!initialStateRef.current) initialStateRef.current = mergeObjects(createParams(), {
-        ...props,
-        axisY: normalizeAxisYProps(props.axisY)
-    });
+    if (!initialStateRef.current) {
+        const defaultState = createParams();
+        const initialState = mergeObjects(defaultState, {
+            ...props,
+            axisY: normalizeAxisYProps(props.axisY)
+        });
+        if (props.band) initialState.band = resolveBandState(props.band, defaultState.band, 'merge');
+        initialStateRef.current = initialState;
+    }
     const runtimeRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     if (!runtimeRef.current && initialStateRef.current) runtimeRef.current = createChartRuntime(initialStateRef.current);
     if (!runtimeRef.current) throw new Error('Failed to initialize chart runtime');
@@ -6282,7 +6440,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);
@@ -6664,11 +6822,18 @@ const createConfigUtils = (config)=>({
         cache: createLruCache(config.cacheSize),
         parseClassName: createParseClassName(config),
         sortModifiers: createSortModifiers(config),
+        postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
         ...createClassGroupUtils(config)
     });
+const createPostfixLookupClassGroupIds = (config)=>{
+    const lookup = Object.create(null);
+    const classGroupIds = config.postfixLookupClassGroups;
+    if (classGroupIds) for(let i = 0; i < classGroupIds.length; i++)lookup[classGroupIds[i]] = true;
+    return lookup;
+};
 const SPLIT_CLASSES_REGEX = /\s+/;
 const mergeClassList = (classList, configUtils)=>{
-    const { parseClassName, getClassGroupId, getConflictingClassGroupIds, sortModifiers } = configUtils;
+    const { parseClassName, getClassGroupId, getConflictingClassGroupIds, sortModifiers, postfixLookupClassGroupIds } = configUtils;
     const classGroupsInConflict = [];
     const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
     let result = '';
@@ -6680,7 +6845,16 @@ const mergeClassList = (classList, configUtils)=>{
             continue;
         }
         let hasPostfixModifier = !!maybePostfixModifierPosition;
-        let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+        let classGroupId;
+        if (hasPostfixModifier) {
+            const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
+            classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
+            const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : void 0;
+            if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
+                classGroupId = classGroupIdWithPostfix;
+                hasPostfixModifier = false;
+            }
+        } else classGroupId = getClassGroupId(baseClassName);
         if (!classGroupId) {
             if (!hasPostfixModifier) {
                 result = originalClassName + (result.length > 0 ? ' ' + result : result);
@@ -6780,6 +6954,7 @@ const isNever = ()=>false;
 const isShadow = (value1)=>shadowRegex.test(value1);
 const isImage = (value1)=>imageRegex.test(value1);
 const isAnyNonArbitrary = (value1)=>!isArbitraryValue(value1) && !isArbitraryVariable(value1);
+const isNamedContainerQuery = (value1)=>value1.startsWith('@container') && ('/' === value1[10] && void 0 !== value1[11] || 's' === value1[11] && void 0 !== value1[16] && value1.startsWith('-size/', 10) || 'n' === value1[11] && void 0 !== value1[18] && value1.startsWith('-normal/', 10));
 const isArbitrarySize = (value1)=>getIsArbitraryValue(value1, isLabelSize, isNever);
 const isArbitraryValue = (value1)=>arbitraryValueRegex.test(value1);
 const isArbitraryLength = (value1)=>getIsArbitraryValue(value1, isLabelLength, isLengthOnly);
@@ -7218,6 +7393,20 @@ const getDefaultConfig = ()=>{
             container: [
                 'container'
             ],
+            'container-type': [
+                {
+                    '@container': [
+                        '',
+                        'normal',
+                        'size',
+                        isArbitraryVariable,
+                        isArbitraryValue
+                    ]
+                }
+            ],
+            'container-named': [
+                isNamedContainerQuery
+            ],
             columns: [
                 {
                     columns: [
@@ -8139,6 +8328,15 @@ const getDefaultConfig = ()=>{
                     indent: scaleUnambiguousSpacing()
                 }
             ],
+            'tab-size': [
+                {
+                    tab: [
+                        isInteger,
+                        isArbitraryVariable,
+                        isArbitraryValue
+                    ]
+                }
+            ],
             'vertical-align': [
                 {
                     align: [
@@ -9406,6 +9604,15 @@ const getDefaultConfig = ()=>{
             'translate-none': [
                 'translate-none'
             ],
+            zoom: [
+                {
+                    zoom: [
+                        isInteger,
+                        isArbitraryVariable,
+                        isArbitraryValue
+                    ]
+                }
+            ],
             accent: [
                 {
                     accent: scaleColor()
@@ -9514,6 +9721,34 @@ const getDefaultConfig = ()=>{
                     ]
                 }
             ],
+            'scrollbar-thumb-color': [
+                {
+                    'scrollbar-thumb': scaleColor()
+                }
+            ],
+            'scrollbar-track-color': [
+                {
+                    'scrollbar-track': scaleColor()
+                }
+            ],
+            'scrollbar-gutter': [
+                {
+                    'scrollbar-gutter': [
+                        'auto',
+                        'stable',
+                        'both'
+                    ]
+                }
+            ],
+            'scrollbar-w': [
+                {
+                    scrollbar: [
+                        'auto',
+                        'thin',
+                        'none'
+                    ]
+                }
+            ],
             'scroll-m': [
                 {
                     'scroll-m': scaleUnambiguousSpacing()
@@ -9748,6 +9983,9 @@ const getDefaultConfig = ()=>{
             ]
         },
         conflictingClassGroups: {
+            'container-named': [
+                'container-type'
+            ],
             overflow: [
                 'overflow-x',
                 'overflow-y'
@@ -10013,6 +10251,9 @@ const getDefaultConfig = ()=>{
                 'leading'
             ]
         },
+        postfixLookupClassGroups: [
+            'container-type'
+        ],
         orderSensitiveModifiers: [
             '*',
             '**',
@@ -10524,7 +10765,7 @@ const TOOLBAR_DROPDOWN_CONTENT_CLASS_NAME = 'border-border/80 bg-secondary/92 te
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
     return function(event) {
         originalEventHandler?.(event);
-        if (false === checkForDefaultPrevented || !event.defaultPrevented) return ourEventHandler?.(event);
+        if (false === checkForDefaultPrevented || !event || !event.defaultPrevented) return ourEventHandler?.(event);
     };
 }
 function setRef(ref, value1) {
@@ -10555,6 +10796,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
     let defaultContexts = [];
     function createContext3(rootComponentName, defaultContext) {
         const BaseContext = __WEBPACK_EXTERNAL_MODULE_react__.createContext(defaultContext);
+        BaseContext.displayName = rootComponentName + "Context";
         const index = defaultContexts.length;
         defaultContexts = [
             ...defaultContexts,
@@ -10570,11 +10812,13 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
             });
         };
         Provider.displayName = rootComponentName + "Provider";
-        function useContext2(consumerName, scope) {
+        function useContext2(consumerName, scope, options = {}) {
+            const { optional = false } = options;
             const Context = scope?.[scopeName]?.[index] || BaseContext;
             const context = __WEBPACK_EXTERNAL_MODULE_react__.useContext(Context);
             if (context) return context;
             if (void 0 !== defaultContext) return defaultContext;
+            if (optional) return;
             throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
         }
         return [
@@ -10699,59 +10943,52 @@ function isFunction(value1) {
 }
 Symbol("RADIX:SYNC_STATE");
 function createSlot(ownerName) {
-    const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
     const Slot2 = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
-        const { children, ...slotProps } = props;
-        const childrenArray = __WEBPACK_EXTERNAL_MODULE_react__.Children.toArray(children);
-        const slottable = childrenArray.find(isSlottable);
-        if (slottable) {
-            const newElement = slottable.props.children;
-            const newChildren = childrenArray.map((child)=>{
-                if (child !== slottable) return child;
-                if (__WEBPACK_EXTERNAL_MODULE_react__.Children.count(newElement) > 1) return __WEBPACK_EXTERNAL_MODULE_react__.Children.only(null);
-                return __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(newElement) ? newElement.props.children : null;
-            });
-            return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SlotClone, {
-                ...slotProps,
-                ref: forwardedRef,
-                children: __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(newElement) ? __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(newElement, void 0, newChildren) : null
-            });
-        }
-        return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SlotClone, {
-            ...slotProps,
-            ref: forwardedRef,
-            children
+        let { children, ...slotProps } = props;
+        let slottableElement = null;
+        let hasSlottable = false;
+        const newChildren = [];
+        if (isLazyComponent(children) && "function" == typeof use) children = use(children._payload);
+        __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(children, (maybeSlottable)=>{
+            if (isSlottable(maybeSlottable)) {
+                hasSlottable = true;
+                const slottable = maybeSlottable;
+                let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+                if (isLazyComponent(child) && "function" == typeof use) child = use(child._payload);
+                slottableElement = getSlottableElementFromSlottable(slottable, child);
+                newChildren.push(slottableElement?.props?.children);
+            } else newChildren.push(maybeSlottable);
         });
+        if (slottableElement) slottableElement = __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(slottableElement, void 0, newChildren);
+        else if (!hasSlottable && 1 === __WEBPACK_EXTERNAL_MODULE_react__.Children.count(children) && __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(children)) slottableElement = children;
+        const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+        const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+        if (!slottableElement) {
+            if (children || 0 === children) throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
+            return children;
+        }
+        const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+        if (slottableElement.type !== __WEBPACK_EXTERNAL_MODULE_react__.Fragment) mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+        return __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(slottableElement, mergedProps);
     });
     Slot2.displayName = `${ownerName}.Slot`;
     return Slot2;
 }
-function createSlotClone(ownerName) {
-    const SlotClone = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
-        const { children, ...slotProps } = props;
-        if (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement(children)) {
-            const childrenRef = getElementRef(children);
-            const props2 = mergeProps(slotProps, children.props);
-            if (children.type !== __WEBPACK_EXTERNAL_MODULE_react__.Fragment) props2.ref = forwardedRef ? dist_composeRefs(forwardedRef, childrenRef) : childrenRef;
-            return __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(children, props2);
-        }
-        return __WEBPACK_EXTERNAL_MODULE_react__.Children.count(children) > 1 ? __WEBPACK_EXTERNAL_MODULE_react__.Children.only(null) : null;
-    });
-    SlotClone.displayName = `${ownerName}.SlotClone`;
-    return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
 function createSlottable(ownerName) {
-    const Slottable2 = ({ children })=>/* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
-            children
-        });
+    const Slottable2 = (props)=>"child" in props ? props.children(props.child) : props.children;
     Slottable2.displayName = `${ownerName}.Slottable`;
     Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
     return Slottable2;
 }
-function isSlottable(child) {
-    return __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && "function" == typeof child.type && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
+var getSlottableElementFromSlottable = (slottable, child)=>{
+    if ("child" in slottable.props) {
+        const child2 = slottable.props.child;
+        if (!__WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child2)) return null;
+        return __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    }
+    return __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) ? child : null;
+};
 function mergeProps(slotProps, childProps) {
     const overrideProps = {
         ...childProps
@@ -10790,6 +11027,19 @@ function getElementRef(element) {
     if (mayWarn) return element.props.ref;
     return element.props.ref || element.ref;
 }
+function isSlottable(child) {
+    return __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && "function" == typeof child.type && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+function isLazyComponent(element) {
+    return null != element && "object" == typeof element && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+function isPromiseLike(value1) {
+    return "object" == typeof value1 && null !== value1 && "then" in value1;
+}
+var createSlotError = (ownerName)=>`${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+var createSlottableError = (ownerName)=>`${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+var use = __WEBPACK_EXTERNAL_MODULE_react__[" use ".trim().toString()];
 var NODES = [
     "a",
     "button",
@@ -10841,8 +11091,8 @@ function createCollection(name) {
     });
     const CollectionProvider = (props)=>{
         const { scope, children } = props;
-        const ref = __WEBPACK_EXTERNAL_MODULE_react__["default"].useRef(null);
-        const itemMap = __WEBPACK_EXTERNAL_MODULE_react__["default"].useRef(/* @__PURE__ */ new Map()).current;
+        const ref = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
+        const itemMap = __WEBPACK_EXTERNAL_MODULE_react__.useRef(/* @__PURE__ */ new Map()).current;
         return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(CollectionProviderImpl, {
             scope,
             itemMap,
@@ -10853,7 +11103,7 @@ function createCollection(name) {
     CollectionProvider.displayName = PROVIDER_NAME;
     const COLLECTION_SLOT_NAME = name + "CollectionSlot";
     const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-    const CollectionSlot = __WEBPACK_EXTERNAL_MODULE_react__["default"].forwardRef((props, forwardedRef)=>{
+    const CollectionSlot = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
         const { scope, children } = props;
         const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
         const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
@@ -10866,12 +11116,12 @@ function createCollection(name) {
     const ITEM_SLOT_NAME = name + "CollectionItemSlot";
     const ITEM_DATA_ATTR = "data-radix-collection-item";
     const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-    const CollectionItemSlot = __WEBPACK_EXTERNAL_MODULE_react__["default"].forwardRef((props, forwardedRef)=>{
+    const CollectionItemSlot = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
         const { scope, children, ...itemData } = props;
-        const ref = __WEBPACK_EXTERNAL_MODULE_react__["default"].useRef(null);
+        const ref = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
         const composedRefs = useComposedRefs(forwardedRef, ref);
         const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-        __WEBPACK_EXTERNAL_MODULE_react__["default"].useEffect(()=>{
+        __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
             context.itemMap.set(ref, {
                 ref,
                 ...itemData
@@ -10889,7 +11139,7 @@ function createCollection(name) {
     CollectionItemSlot.displayName = ITEM_SLOT_NAME;
     function useCollection(scope) {
         const context = useCollectionContext(name + "CollectionConsumer", scope);
-        const getItems = __WEBPACK_EXTERNAL_MODULE_react__["default"].useCallback(()=>{
+        const getItems = __WEBPACK_EXTERNAL_MODULE_react__.useCallback(()=>{
             const collectionNode = context.collectionRef.current;
             if (!collectionNode) return [];
             const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -10912,6 +11162,7 @@ function createCollection(name) {
         createCollectionScope
     ];
 }
+"use client";
 var DirectionContext = __WEBPACK_EXTERNAL_MODULE_react__.createContext(void 0);
 function useDirection(localDir) {
     const globalDir = __WEBPACK_EXTERNAL_MODULE_react__.useContext(DirectionContext);
@@ -10924,23 +11175,6 @@ function useCallbackRef(callback) {
     });
     return __WEBPACK_EXTERNAL_MODULE_react__.useMemo(()=>(...args)=>callbackRef.current?.(...args), []);
 }
-function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
-    const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
-        const handleKeyDown = (event)=>{
-            if ("Escape" === event.key) onEscapeKeyDown(event);
-        };
-        ownerDocument.addEventListener("keydown", handleKeyDown, {
-            capture: true
-        });
-        return ()=>ownerDocument.removeEventListener("keydown", handleKeyDown, {
-                capture: true
-            });
-    }, [
-        onEscapeKeyDown,
-        ownerDocument
-    ]);
-}
 "use client";
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
@@ -10950,34 +11184,47 @@ var originalBodyPointerEvents;
 var DismissableLayerContext = __WEBPACK_EXTERNAL_MODULE_react__.createContext({
     layers: /* @__PURE__ */ new Set(),
     layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
-    branches: /* @__PURE__ */ new Set()
+    branches: /* @__PURE__ */ new Set(),
+    dismissableSurfaces: /* @__PURE__ */ new Set()
 });
 var DismissableLayer = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
-    const { disableOutsidePointerEvents = false, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, ...layerProps } = props;
+    const { disableOutsidePointerEvents = false, deferPointerDownOutside = false, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, ...layerProps } = props;
     const context = __WEBPACK_EXTERNAL_MODULE_react__.useContext(DismissableLayerContext);
     const [node, setNode] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
     const ownerDocument = node?.ownerDocument ?? globalThis?.document;
     const [, force] = __WEBPACK_EXTERNAL_MODULE_react__.useState({});
-    const composedRefs = useComposedRefs(forwardedRef, (node2)=>setNode(node2));
+    const composedRefs = useComposedRefs(forwardedRef, setNode);
     const layers = Array.from(context.layers);
     const [highestLayerWithOutsidePointerEventsDisabled] = [
         ...context.layersWithOutsidePointerEventsDisabled
     ].slice(-1);
-    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+    const highestLayerWithOutsidePointerEventsDisabledIndex = highestLayerWithOutsidePointerEventsDisabled ? layers.indexOf(highestLayerWithOutsidePointerEventsDisabled) : -1;
     const index = node ? layers.indexOf(node) : -1;
     const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
     const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+    const isDeferredPointerDownOutsideRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(false);
     const pointerDownOutside = usePointerDownOutside((event)=>{
-        const target = event.target;
-        const isPointerDownOnBranch = [
-            ...context.branches
-        ].some((branch)=>branch.contains(target));
-        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
         onPointerDownOutside?.(event);
         onInteractOutside?.(event);
         if (!event.defaultPrevented) onDismiss?.();
-    }, ownerDocument);
+    }, {
+        ownerDocument,
+        deferPointerDownOutside,
+        isDeferredPointerDownOutsideRef,
+        dismissableSurfaces: context.dismissableSurfaces,
+        shouldHandlePointerDownOutside: __WEBPACK_EXTERNAL_MODULE_react__.useCallback((target)=>{
+            if (!(target instanceof Node)) return false;
+            const isPointerDownOnBranch = [
+                ...context.branches
+            ].some((branch)=>branch.contains(target));
+            return isPointerEventsEnabled && !isPointerDownOnBranch;
+        }, [
+            context.branches,
+            isPointerEventsEnabled
+        ])
+    });
     const focusOutside = useFocusOutside((event)=>{
+        if (deferPointerDownOutside && isDeferredPointerDownOutsideRef.current) return;
         const target = event.target;
         const isFocusInBranch = [
             ...context.branches
@@ -10987,15 +11234,28 @@ var DismissableLayer = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forw
         onInteractOutside?.(event);
         if (!event.defaultPrevented) onDismiss?.();
     }, ownerDocument);
-    useEscapeKeydown((event)=>{
-        const isHighestLayer = index === context.layers.size - 1;
-        if (!isHighestLayer) return;
+    const isHighestLayer = node ? index === layers.length - 1 : false;
+    const handleKeyDown = useCallbackRef((event)=>{
+        if ("Escape" !== event.key) return;
         onEscapeKeyDown?.(event);
         if (!event.defaultPrevented && onDismiss) {
             event.preventDefault();
             onDismiss();
         }
-    }, ownerDocument);
+    });
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!isHighestLayer) return;
+        ownerDocument.addEventListener("keydown", handleKeyDown, {
+            capture: true
+        });
+        return ()=>ownerDocument.removeEventListener("keydown", handleKeyDown, {
+                capture: true
+            });
+    }, [
+        ownerDocument,
+        isHighestLayer,
+        handleKeyDown
+    ]);
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
         if (!node) return;
         if (disableOutsidePointerEvents) {
@@ -11008,7 +11268,10 @@ var DismissableLayer = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forw
         context.layers.add(node);
         dispatchUpdate();
         return ()=>{
-            if (disableOutsidePointerEvents && 1 === context.layersWithOutsidePointerEventsDisabled.size) ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+            if (disableOutsidePointerEvents) {
+                context.layersWithOutsidePointerEventsDisabled.delete(node);
+                if (0 === context.layersWithOutsidePointerEventsDisabled.size) ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+            }
         };
     }, [
         node,
@@ -11065,31 +11328,84 @@ var DismissableLayerBranch = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props
     });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
-function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
+var IS_TRUE = ()=>true;
+function usePointerDownOutside(onPointerDownOutside, args) {
+    const { ownerDocument = globalThis?.document, deferPointerDownOutside = false, isDeferredPointerDownOutsideRef, dismissableSurfaces, shouldHandlePointerDownOutside = IS_TRUE } = args;
     const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
     const isPointerInsideReactTreeRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(false);
+    const isPointerDownOutsideRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(false);
+    const interceptedOutsideInteractionEventsRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(/* @__PURE__ */ new Map());
     const handleClickRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(()=>{});
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        function resetOutsideInteraction() {
+            isPointerDownOutsideRef.current = false;
+            isDeferredPointerDownOutsideRef.current = false;
+            interceptedOutsideInteractionEventsRef.current.clear();
+        }
+        function isOutsideInteractionIntercepted() {
+            return Array.from(interceptedOutsideInteractionEventsRef.current.values()).some(Boolean);
+        }
+        function handleInteractionCapture(event) {
+            if (!isPointerDownOutsideRef.current) return;
+            const target = event.target;
+            const isDismissableSurface = target instanceof Node && [
+                ...dismissableSurfaces
+            ].some((surface)=>surface.contains(target));
+            if (!isDismissableSurface) interceptedOutsideInteractionEventsRef.current.set(event.type, true);
+            if ("click" === event.type) window.setTimeout(()=>{
+                if (isPointerDownOutsideRef.current) handleClickRef.current();
+            }, 0);
+        }
+        function handleInteractionBubble(event) {
+            if (isPointerDownOutsideRef.current) interceptedOutsideInteractionEventsRef.current.set(event.type, false);
+        }
         const handlePointerDown = (event)=>{
             if (event.target && !isPointerInsideReactTreeRef.current) {
                 let handleAndDispatchPointerDownOutsideEvent2 = function() {
-                    handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
+                    ownerDocument.removeEventListener("click", handleClickRef.current);
+                    const wasOutsideInteractionIntercepted = isOutsideInteractionIntercepted();
+                    resetOutsideInteraction();
+                    if (!wasOutsideInteractionIntercepted) handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
                         discrete: true
                     });
                 };
+                if (!shouldHandlePointerDownOutside(event.target)) {
+                    ownerDocument.removeEventListener("click", handleClickRef.current);
+                    resetOutsideInteraction();
+                    isPointerInsideReactTreeRef.current = false;
+                    return;
+                }
                 const eventDetail = {
                     originalEvent: event
                 };
-                if ("touch" === event.pointerType) {
+                isPointerDownOutsideRef.current = true;
+                isDeferredPointerDownOutsideRef.current = deferPointerDownOutside && 0 === event.button;
+                interceptedOutsideInteractionEventsRef.current.clear();
+                if (deferPointerDownOutside && 0 === event.button) {
                     ownerDocument.removeEventListener("click", handleClickRef.current);
                     handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
                     ownerDocument.addEventListener("click", handleClickRef.current, {
                         once: true
                     });
                 } else handleAndDispatchPointerDownOutsideEvent2();
-            } else ownerDocument.removeEventListener("click", handleClickRef.current);
+            } else {
+                ownerDocument.removeEventListener("click", handleClickRef.current);
+                resetOutsideInteraction();
+            }
             isPointerInsideReactTreeRef.current = false;
         };
+        const outsideInteractionEvents = [
+            "pointerup",
+            "mousedown",
+            "mouseup",
+            "touchstart",
+            "touchend",
+            "click"
+        ];
+        for (const eventName of outsideInteractionEvents){
+            ownerDocument.addEventListener(eventName, handleInteractionCapture, true);
+            ownerDocument.addEventListener(eventName, handleInteractionBubble);
+        }
         const timerId = window.setTimeout(()=>{
             ownerDocument.addEventListener("pointerdown", handlePointerDown);
         }, 0);
@@ -11097,10 +11413,18 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
             window.clearTimeout(timerId);
             ownerDocument.removeEventListener("pointerdown", handlePointerDown);
             ownerDocument.removeEventListener("click", handleClickRef.current);
+            for (const eventName of outsideInteractionEvents){
+                ownerDocument.removeEventListener(eventName, handleInteractionCapture, true);
+                ownerDocument.removeEventListener(eventName, handleInteractionBubble);
+            }
         };
     }, [
         ownerDocument,
-        handlePointerDownOutside
+        handlePointerDownOutside,
+        deferPointerDownOutside,
+        isDeferredPointerDownOutsideRef,
+        dismissableSurfaces,
+        shouldHandlePointerDownOutside
     ]);
     return {
         onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
@@ -11150,15 +11474,24 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 "use client";
 var dist_count = 0;
+var guards = null;
 function useFocusGuards() {
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
-        const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
-        document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
-        document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
+        if (!guards) guards = {
+            start: createFocusGuard(),
+            end: createFocusGuard()
+        };
+        const { start, end } = guards;
+        if (document.body.firstElementChild !== start) document.body.insertAdjacentElement("afterbegin", start);
+        if (document.body.lastElementChild !== end) document.body.insertAdjacentElement("beforeend", end);
         dist_count++;
         return ()=>{
-            if (1 === dist_count) document.querySelectorAll("[data-radix-focus-guard]").forEach((node)=>node.remove());
-            dist_count--;
+            if (1 === dist_count) {
+                guards?.start.remove();
+                guards?.end.remove();
+                guards = null;
+            }
+            dist_count = Math.max(0, dist_count - 1);
         };
     }, []);
 }
@@ -11186,7 +11519,7 @@ var FocusScope = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedR
     const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
     const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
     const lastFocusedElementRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, (node)=>setContainer(node));
+    const composedRefs = useComposedRefs(forwardedRef, setContainer);
     const focusScope = __WEBPACK_EXTERNAL_MODULE_react__.useRef({
         paused: false,
         pause () {
@@ -11339,9 +11672,17 @@ function getTabbableCandidates(container) {
     return nodes;
 }
 function findVisible(elements, container) {
-    for (const element of elements)if (!isHidden(element, {
-        upTo: container
-    })) return element;
+    const canUseCheckVisibility = "function" == typeof container.checkVisibility && container.checkVisibility({
+        checkVisibilityCSS: true
+    });
+    for (const element of elements){
+        const hidden = canUseCheckVisibility ? !element.checkVisibility({
+            checkVisibilityCSS: true
+        }) : isHidden(element, {
+            upTo: container
+        });
+        if (!hidden) return element;
+    }
 }
 function isHidden(node, { upTo }) {
     if ("hidden" === getComputedStyle(node).visibility) return true;
@@ -13069,10 +13410,13 @@ var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props)=>{
     const { __scopePopper, children } = props;
     const [anchor, setAnchor] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
+    const [placementState, setPlacementState] = __WEBPACK_EXTERNAL_MODULE_react__.useState(void 0);
     return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PopperProvider, {
         scope: __scopePopper,
         anchor,
         onAnchorChange: setAnchor,
+        placementState,
+        setPlacementState,
         children
     });
 };
@@ -13082,14 +13426,27 @@ var PopperAnchor = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwarde
     const { __scopePopper, virtualRef, ...anchorProps } = props;
     const context = usePopperContext(ANCHOR_NAME, __scopePopper);
     const ref = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const onAnchorChange = context.onAnchorChange;
+    const callbackRef = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((node)=>{
+        ref.current = node;
+        if (node) onAnchorChange(node);
+    }, [
+        onAnchorChange
+    ]);
+    const composedRefs = useComposedRefs(forwardedRef, callbackRef);
     const anchorRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!virtualRef) return;
         const previousAnchor = anchorRef.current;
-        anchorRef.current = virtualRef?.current || ref.current;
-        if (previousAnchor !== anchorRef.current) context.onAnchorChange(anchorRef.current);
+        anchorRef.current = virtualRef.current;
+        if (previousAnchor !== anchorRef.current) onAnchorChange(anchorRef.current);
     });
+    const sideAndAlign = context.placementState && getSideAndAlignFromPlacement(context.placementState);
+    const placedSide = sideAndAlign?.[0];
+    const placedAlign = sideAndAlign?.[1];
     return virtualRef ? null : /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Primitive.div, {
+        "data-radix-popper-side": placedSide,
+        "data-radix-popper-align": placedAlign,
         ...anchorProps,
         ref: composedRefs
     });
@@ -13101,7 +13458,7 @@ var PopperContent = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forward
     const { __scopePopper, side = "bottom", sideOffset = 0, align = "center", alignOffset = 0, arrowPadding = 0, avoidCollisions = true, collisionBoundary = [], collisionPadding: collisionPaddingProp = 0, sticky = "partial", hideWhenDetached = false, updatePositionStrategy = "optimized", onPlaced, ...contentProps } = props;
     const context = usePopperContext(CONTENT_NAME, __scopePopper);
     const [content, setContent] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
-    const composedRefs = useComposedRefs(forwardedRef, (node)=>setContent(node));
+    const composedRefs = useComposedRefs(forwardedRef, setContent);
     const [arrow, setArrow] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
     const arrowSize = useSize(arrow);
     const arrowWidth = arrowSize?.width ?? 0;
@@ -13170,10 +13527,21 @@ var PopperContent = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forward
             }),
             hideWhenDetached && floating_ui_react_dom_hide({
                 strategy: "referenceHidden",
-                ...detectOverflowOptions
+                ...detectOverflowOptions,
+                boundary: hasExplicitBoundaries ? detectOverflowOptions.boundary : void 0
             })
         ]
     });
+    const setPlacementState = context.setPlacementState;
+    useLayoutEffect2(()=>{
+        setPlacementState(placement);
+        return ()=>{
+            setPlacementState(void 0);
+        };
+    }, [
+        placement,
+        setPlacementState
+    ]);
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
     const handlePlaced = useCallbackRef(onPlaced);
     useLayoutEffect2(()=>{
@@ -13199,7 +13567,7 @@ var PopperContent = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forward
             transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
             minWidth: "max-content",
             zIndex: contentZIndex,
-            ["--radix-popper-transform-origin"]: [
+            "--radix-popper-transform-origin": [
                 middlewareData.transformOrigin?.x,
                 middlewareData.transformOrigin?.y
             ].join(" "),
@@ -13212,6 +13580,7 @@ var PopperContent = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forward
         children: /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PopperContentProvider, {
             scope: __scopePopper,
             placedSide,
+            placedAlign,
             onArrowChange: setArrow,
             arrowX,
             arrowY,
@@ -13334,7 +13703,7 @@ var Portal = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=
     const [mounted, setMounted] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
     useLayoutEffect2(()=>setMounted(true), []);
     const container = containerProp || mounted && globalThis?.document?.body;
-    return container ? __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__["default"].createPortal(/* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Primitive.div, {
+    return container ? __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__.createPortal(/* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Primitive.div, {
         ...portalProps,
         ref: forwardedRef
     }), container) : null;
@@ -13353,7 +13722,7 @@ var Presence = (props)=>{
     const child = "function" == typeof children ? children({
         present: presence.isPresent
     }) : __WEBPACK_EXTERNAL_MODULE_react__.Children.only(children);
-    const ref = useComposedRefs(presence.ref, dist_getElementRef(child));
+    const ref = useStableComposedRefs(presence.ref, dist_getElementRef(child));
     const forceMount = "function" == typeof children;
     return forceMount || presence.isPresent ? __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(child, {
         ref
@@ -13365,6 +13734,7 @@ function usePresence(present) {
     const stylesRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
     const prevPresentRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(present);
     const prevAnimationNameRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef("none");
+    const mountAnimationNameRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(void 0);
     const initialState = present ? "mounted" : "unmounted";
     const [state, send] = useStateMachine(initialState, {
         mounted: {
@@ -13380,8 +13750,10 @@ function usePresence(present) {
         }
     });
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
-        const currentAnimationName = getAnimationName(stylesRef.current);
-        prevAnimationNameRef.current = "mounted" === state ? currentAnimationName : "none";
+        if ("mounted" === state) {
+            prevAnimationNameRef.current = mountAnimationNameRef.current ?? getAnimationName(stylesRef.current);
+            mountAnimationNameRef.current = void 0;
+        } else prevAnimationNameRef.current = "none";
     }, [
         state
     ]);
@@ -13392,8 +13764,10 @@ function usePresence(present) {
         if (hasPresentChanged) {
             const prevAnimationName = prevAnimationNameRef.current;
             const currentAnimationName = getAnimationName(styles);
-            if (present) send("MOUNT");
-            else if ("none" === currentAnimationName || styles?.display === "none") send("UNMOUNT");
+            if (present) {
+                mountAnimationNameRef.current = currentAnimationName;
+                send("MOUNT");
+            } else if ("none" === currentAnimationName || styles?.display === "none") send("UNMOUNT");
             else {
                 const isAnimating = prevAnimationName !== currentAnimationName;
                 wasPresent && isAnimating ? send("ANIMATION_OUT") : send("UNMOUNT");
@@ -13446,11 +13820,39 @@ function usePresence(present) {
             "unmountSuspended"
         ].includes(state),
         ref: __WEBPACK_EXTERNAL_MODULE_react__.useCallback((node2)=>{
-            stylesRef.current = node2 ? getComputedStyle(node2) : null;
+            if (node2) {
+                const styles = getComputedStyle(node2);
+                stylesRef.current = styles;
+                mountAnimationNameRef.current = getAnimationName(styles);
+            } else stylesRef.current = null;
             setNode(node2);
         }, [])
     };
 }
+function dist_setRef(ref, value1) {
+    if ("function" == typeof ref) return ref(value1);
+    if (null != ref) ref.current = value1;
+}
+function useStableComposedRefs(...refs) {
+    const refsRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(refs);
+    refsRef.current = refs;
+    return __WEBPACK_EXTERNAL_MODULE_react__.useCallback((node)=>{
+        const currentRefs = refsRef.current;
+        let hasCleanup = false;
+        const cleanups = currentRefs.map((ref)=>{
+            const cleanup = dist_setRef(ref, node);
+            if (!hasCleanup && "function" == typeof cleanup) hasCleanup = true;
+            return cleanup;
+        });
+        if (hasCleanup) return ()=>{
+            for(let i = 0; i < cleanups.length; i++){
+                const cleanup = cleanups[i];
+                if ("function" == typeof cleanup) cleanup();
+                else dist_setRef(currentRefs[i], null);
+            }
+        };
+    }, []);
+}
 function getAnimationName(styles) {
     return styles?.animationName || "none";
 }
@@ -13463,6 +13865,25 @@ function dist_getElementRef(element) {
     if (mayWarn) return element.props.ref;
     return element.props.ref || element.ref;
 }
+var _isHydrated = false;
+function useIsHydrated() {
+    const [isHydrated, setIsHydrated] = __WEBPACK_EXTERNAL_MODULE_react__.useState(_isHydrated);
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!_isHydrated) {
+            _isHydrated = true;
+            setIsHydrated(true);
+        }
+    }, []);
+    return isHydrated;
+}
+var useReactSyncExternalStore = __WEBPACK_EXTERNAL_MODULE_react__[" useSyncExternalStore ".trim().toString()];
+function dist_subscribe() {
+    return ()=>{};
+}
+function useIsHydratedModern() {
+    return useReactSyncExternalStore(dist_subscribe, ()=>true, ()=>false);
+}
+var useIsHydrated2 = "function" == typeof useReactSyncExternalStore ? useIsHydratedModern : useIsHydrated;
 "use client";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var dist_EVENT_OPTIONS = {
@@ -13568,12 +13989,23 @@ var RovingFocusGroupItem = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props,
     const isCurrentTabStop = context.currentTabStopId === id;
     const getItems = dist_useCollection(__scopeRovingFocusGroup);
     const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
+    const isHydrated = useIsHydrated2();
+    useLayoutEffect2(()=>{
+        if (!isHydrated || !focusable) return;
+        onFocusableItemAdd();
+        return ()=>onFocusableItemRemove();
+    }, [
+        isHydrated,
+        focusable,
+        onFocusableItemAdd,
+        onFocusableItemRemove
+    ]);
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
-        if (focusable) {
-            onFocusableItemAdd();
-            return ()=>onFocusableItemRemove();
-        }
+        if (isHydrated || !focusable) return;
+        onFocusableItemAdd();
+        return ()=>onFocusableItemRemove();
     }, [
+        isHydrated,
         focusable,
         onFocusableItemAdd,
         onFocusableItemRemove
@@ -14502,6 +14934,15 @@ var Menu = (props)=>{
             });
         };
     }, []);
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!open) return;
+        const handleBlur = ()=>handleOpenChange(false);
+        window.addEventListener("blur", handleBlur);
+        return ()=>window.removeEventListener("blur", handleBlur);
+    }, [
+        open,
+        handleOpenChange
+    ]);
     return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Root2, {
         ...popperScope,
         children: /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MenuProvider, {
@@ -14820,8 +15261,9 @@ var MenuItem = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef
             if (!isPointerDownRef.current) event.currentTarget?.click();
         }),
         onKeyDown: composeEventHandlers(props.onKeyDown, (event)=>{
+            if (disabled || event.target !== event.currentTarget) return;
             const isTypingAhead = "" !== contentContext.searchRef.current;
-            if (disabled || isTypingAhead && " " === event.key) return;
+            if (isTypingAhead && " " === event.key) return;
             if (SELECTION_KEYS.includes(event.key)) {
                 event.currentTarget.click();
                 event.preventDefault();
@@ -15040,6 +15482,7 @@ var MenuSubTrigger = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwar
         pointerGraceTimerRef,
         onPointerGraceIntentChange
     ]);
+    const composedRefs = useComposedRefs(forwardedRef, subContext.onTriggerChange);
     return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MenuAnchor, {
         asChild: true,
         ...scope,
@@ -15047,10 +15490,10 @@ var MenuSubTrigger = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwar
             id: subContext.triggerId,
             "aria-haspopup": "menu",
             "aria-expanded": context.open,
-            "aria-controls": subContext.contentId,
+            "aria-controls": context.open ? subContext.contentId : void 0,
             "data-state": getOpenState(context.open),
             ...props,
-            ref: dist_composeRefs(forwardedRef, subContext.onTriggerChange),
+            ref: composedRefs,
             onClick: (event)=>{
                 props.onClick?.(event);
                 if (props.disabled || event.defaultPrevented) return;
@@ -15111,8 +15554,9 @@ var MenuSubTrigger = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwar
                 }
             })),
             onKeyDown: composeEventHandlers(props.onKeyDown, (event)=>{
+                if (props.disabled || event.target !== event.currentTarget) return;
                 const isTypingAhead = "" !== contentContext.searchRef.current;
-                if (props.disabled || isTypingAhead && " " === event.key) return;
+                if (isTypingAhead && " " === event.key) return;
                 if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
                     context.onOpenChange(true);
                     context.content?.focus();
@@ -15126,7 +15570,7 @@ MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "MenuSubContent";
 var MenuSubContent = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
     const portalContext = usePortalContext(dist_CONTENT_NAME, props.__scopeMenu);
-    const { forceMount = portalContext.forceMount, ...subContentProps } = props;
+    const { forceMount = portalContext.forceMount, align = "start", ...subContentProps } = props;
     const context = useMenuContext(dist_CONTENT_NAME, props.__scopeMenu);
     const rootContext = useMenuRootContext(dist_CONTENT_NAME, props.__scopeMenu);
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
@@ -15143,7 +15587,7 @@ var MenuSubContent = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwar
                     "aria-labelledby": subContext.triggerId,
                     ...subContentProps,
                     ref: composedRefs,
-                    align: "start",
+                    align,
                     side: "rtl" === rootContext.dir ? "left" : "right",
                     disableOutsidePointerEvents: false,
                     disableOutsideScroll: false,
@@ -15290,6 +15734,7 @@ var DropdownMenuTrigger = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, f
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
+    const composedRefs = useComposedRefs(forwardedRef, context.triggerRef);
     return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Anchor2, {
         asChild: true,
         ...menuScope,
@@ -15303,7 +15748,7 @@ var DropdownMenuTrigger = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, f
             "data-disabled": disabled ? "" : void 0,
             disabled,
             ...triggerProps,
-            ref: dist_composeRefs(forwardedRef, context.triggerRef),
+            ref: composedRefs,
             onPointerDown: composeEventHandlers(props.onPointerDown, (event)=>{
                 if (!disabled && 0 === event.button && false === event.ctrlKey) {
                     context.onOpenToggle();
@@ -15601,7 +16046,7 @@ var ScrollArea = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedR
     const [cornerHeight, setCornerHeight] = __WEBPACK_EXTERNAL_MODULE_react__.useState(0);
     const [scrollbarXEnabled, setScrollbarXEnabled] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
     const [scrollbarYEnabled, setScrollbarYEnabled] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
-    const composedRefs = useComposedRefs(forwardedRef, (node)=>setScrollArea(node));
+    const composedRefs = useComposedRefs(forwardedRef, setScrollArea);
     const direction = useDirection(dir);
     return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ScrollAreaProvider, {
         scope: __scopeScrollArea,
@@ -15629,8 +16074,8 @@ var ScrollArea = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedR
             ref: composedRefs,
             style: {
                 position: "relative",
-                ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
-                ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
+                "--radix-scroll-area-corner-width": cornerWidth + "px",
+                "--radix-scroll-area-corner-height": cornerHeight + "px",
                 ...props.style
             }
         })
@@ -15645,10 +16090,7 @@ var ScrollAreaViewport = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, fo
     const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
     return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
         children: [
-            /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("style", {
-                dangerouslySetInnerHTML: {
-                    __html: "[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"
-                },
+            /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ScrollAreaViewportStyle, {
                 nonce
             }),
             /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Primitive.div, {
@@ -15673,6 +16115,12 @@ var ScrollAreaViewport = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, fo
     });
 });
 ScrollAreaViewport.displayName = VIEWPORT_NAME;
+var ScrollAreaViewportStyle = __WEBPACK_EXTERNAL_MODULE_react__.memo(({ nonce })=>/* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("style", {
+        dangerouslySetInnerHTML: {
+            __html: "[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"
+        },
+        nonce
+    }), (prevProps, nextProps)=>prevProps.nonce === nextProps.nonce);
 var SCROLLBAR_NAME = "ScrollAreaScrollbar";
 var ScrollAreaScrollbar = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
     const { forceMount, ...scrollbarProps } = props;
@@ -15703,7 +16151,8 @@ var ScrollAreaScrollbar = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, f
         forceMount
     }) : "always" === context.type ? /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ScrollAreaScrollbarVisible, {
         ...scrollbarProps,
-        ref: forwardedRef
+        ref: forwardedRef,
+        "data-state": "visible"
     }) : null;
 });
 ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
@@ -15916,7 +16365,7 @@ var ScrollAreaScrollbarX = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props,
             bottom: 0,
             left: "rtl" === context.dir ? "var(--radix-scroll-area-corner-width)" : 0,
             right: "ltr" === context.dir ? "var(--radix-scroll-area-corner-width)" : 0,
-            ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
+            "--radix-scroll-area-thumb-width": getThumbSize(sizes) + "px",
             ...props.style
         },
         onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.x),
@@ -15962,7 +16411,7 @@ var ScrollAreaScrollbarY = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props,
             right: "ltr" === context.dir ? 0 : void 0,
             left: "rtl" === context.dir ? 0 : void 0,
             bottom: "var(--radix-scroll-area-corner-height)",
-            ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
+            "--radix-scroll-area-thumb-height": getThumbSize(sizes) + "px",
             ...props.style
         },
         onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.y),
@@ -15992,7 +16441,7 @@ var ScrollAreaScrollbarImpl = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((prop
     const { __scopeScrollArea, sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ...scrollbarProps } = props;
     const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
     const [scrollbar, setScrollbar] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
-    const composeRefs = useComposedRefs(forwardedRef, (node)=>setScrollbar(node));
+    const composeRefs = useComposedRefs(forwardedRef, setScrollbar);
     const rectRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
     const prevWebkitUserSelectRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef("");
     const viewport = context.viewport;
@@ -16089,7 +16538,7 @@ var ScrollAreaThumbImpl = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, f
     const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
     const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
     const { onThumbPositionChange } = scrollbarContext;
-    const composedRef = useComposedRefs(forwardedRef, (node)=>scrollbarContext.onThumbChange(node));
+    const composedRef = useComposedRefs(forwardedRef, scrollbarContext.onThumbChange);
     const removeUnlinkedScrollListenerRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(void 0);
     const debounceScrollEnd = useDebounceCallback(()=>{
         if (removeUnlinkedScrollListenerRef.current) {
@@ -16157,6 +16606,7 @@ var ScrollAreaCornerImpl = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props,
     const [width, setWidth] = __WEBPACK_EXTERNAL_MODULE_react__.useState(0);
     const [height, setHeight] = __WEBPACK_EXTERNAL_MODULE_react__.useState(0);
     const hasSize = Boolean(width && height);
+    const { onCornerWidthChange, onCornerHeightChange } = context;
     useResizeObserver(context.scrollbarX, ()=>{
         const height2 = context.scrollbarX?.offsetHeight || 0;
         context.onCornerHeightChange(height2);
@@ -16167,6 +16617,13 @@ var ScrollAreaCornerImpl = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props,
         context.onCornerWidthChange(width2);
         setWidth(width2);
     });
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>()=>{
+            onCornerWidthChange(0);
+            onCornerHeightChange(0);
+        }, [
+        onCornerWidthChange,
+        onCornerHeightChange
+    ]);
     return hasSize ? /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Primitive.div, {
         ...cornerProps,
         ref: forwardedRef,
@@ -16389,10 +16846,14 @@ var TooltipProvider = (props)=>{
         isOpenDelayedRef,
         delayDuration,
         onOpen: __WEBPACK_EXTERNAL_MODULE_react__.useCallback(()=>{
+            if (skipDelayDuration <= 0) return;
             window.clearTimeout(skipDelayTimerRef.current);
             isOpenDelayedRef.current = false;
-        }, []),
+        }, [
+            skipDelayDuration
+        ]),
         onClose: __WEBPACK_EXTERNAL_MODULE_react__.useCallback(()=>{
+            if (skipDelayDuration <= 0) return;
             window.clearTimeout(skipDelayTimerRef.current);
             skipDelayTimerRef.current = window.setTimeout(()=>isOpenDelayedRef.current = true, skipDelayDuration);
         }, [
@@ -16691,8 +17152,7 @@ var TooltipContentImpl = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, fo
     __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
         if (context.trigger) {
             const handleScroll = (event)=>{
-                const target = event.target;
-                if (target?.contains(context.trigger)) onClose();
+                if (event.target instanceof Node && event.target.contains(context.trigger)) onClose();
             };
             window.addEventListener("scroll", handleScroll, {
                 capture: true
@@ -17082,10 +17542,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), [
@@ -17097,10 +17746,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;
@@ -17130,11 +17781,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');
@@ -17150,14 +17816,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,
@@ -17176,15 +17845,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);
@@ -17321,7 +17986,7 @@ const ToolbarContentBox = ({ style, className, contentClassName, title, active =
     });
 };
 const primitives_ToolbarContentBox = ToolbarContentBox;
-const ToolbarGlyph = ({ children, className, opticalOffsetX = 0, opticalOffsetY = 0, opticalScale = 1 })=>{
+const ToolbarGlyph_ToolbarGlyph = ({ children, className, opticalOffsetX = 0, opticalOffsetY = 0, opticalScale = 1 })=>{
     const transforms = [];
     if (0 !== opticalOffsetX || 0 !== opticalOffsetY) transforms.push(`translate(${opticalOffsetX}px, ${opticalOffsetY}px)`);
     if (1 !== opticalScale) transforms.push(`scale(${opticalScale})`);
@@ -17333,137 +17998,7 @@ const ToolbarGlyph = ({ children, className, opticalOffsetX = 0, opticalOffsetY
         children: children
     });
 };
-const primitives_ToolbarGlyph = ToolbarGlyph;
-var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = __WEBPACK_EXTERNAL_MODULE_react__[" use ".trim().toString()];
-function isPromiseLike(value1) {
-    return "object" == typeof value1 && null !== value1 && "then" in value1;
-}
-function isLazyComponent(element) {
-    return null != element && "object" == typeof element && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
-}
-function dist_createSlot(ownerName) {
-    const SlotClone = /* @__PURE__ */ dist_createSlotClone(ownerName);
-    const Slot2 = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
-        let { children, ...slotProps } = props;
-        if (isLazyComponent(children) && "function" == typeof use) children = use(children._payload);
-        const childrenArray = __WEBPACK_EXTERNAL_MODULE_react__.Children.toArray(children);
-        const slottable = childrenArray.find(dist_isSlottable);
-        if (slottable) {
-            const newElement = slottable.props.children;
-            const newChildren = childrenArray.map((child)=>{
-                if (child !== slottable) return child;
-                if (__WEBPACK_EXTERNAL_MODULE_react__.Children.count(newElement) > 1) return __WEBPACK_EXTERNAL_MODULE_react__.Children.only(null);
-                return __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(newElement) ? newElement.props.children : null;
-            });
-            return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SlotClone, {
-                ...slotProps,
-                ref: forwardedRef,
-                children: __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(newElement) ? __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(newElement, void 0, newChildren) : null
-            });
-        }
-        return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SlotClone, {
-            ...slotProps,
-            ref: forwardedRef,
-            children
-        });
-    });
-    Slot2.displayName = `${ownerName}.Slot`;
-    return Slot2;
-}
-function dist_createSlotClone(ownerName) {
-    const SlotClone = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
-        let { children, ...slotProps } = props;
-        if (isLazyComponent(children) && "function" == typeof use) children = use(children._payload);
-        if (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement(children)) {
-            const childrenRef = react_slot_dist_getElementRef(children);
-            const props2 = dist_mergeProps(slotProps, children.props);
-            if (children.type !== __WEBPACK_EXTERNAL_MODULE_react__.Fragment) props2.ref = forwardedRef ? dist_composeRefs(forwardedRef, childrenRef) : childrenRef;
-            return __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(children, props2);
-        }
-        return __WEBPACK_EXTERNAL_MODULE_react__.Children.count(children) > 1 ? __WEBPACK_EXTERNAL_MODULE_react__.Children.only(null) : null;
-    });
-    SlotClone.displayName = `${ownerName}.SlotClone`;
-    return SlotClone;
-}
-var dist_SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function dist_isSlottable(child) {
-    return __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && "function" == typeof child.type && "__radixId" in child.type && child.type.__radixId === dist_SLOTTABLE_IDENTIFIER;
-}
-function dist_mergeProps(slotProps, childProps) {
-    const overrideProps = {
-        ...childProps
-    };
-    for(const propName in childProps){
-        const slotPropValue = slotProps[propName];
-        const childPropValue = childProps[propName];
-        const isHandler = /^on[A-Z]/.test(propName);
-        if (isHandler) {
-            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
-                const result = childPropValue(...args);
-                slotPropValue(...args);
-                return result;
-            };
-            else if (slotPropValue) overrideProps[propName] = slotPropValue;
-        } else if ("style" === propName) overrideProps[propName] = {
-            ...slotPropValue,
-            ...childPropValue
-        };
-        else if ("className" === propName) overrideProps[propName] = [
-            slotPropValue,
-            childPropValue
-        ].filter(Boolean).join(" ");
-    }
-    return {
-        ...slotProps,
-        ...overrideProps
-    };
-}
-function react_slot_dist_getElementRef(element) {
-    let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-    let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-    if (mayWarn) return element.ref;
-    getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-    mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-    if (mayWarn) return element.props.ref;
-    return element.props.ref || element.ref;
-}
-var dist_NODES = [
-    "a",
-    "button",
-    "div",
-    "form",
-    "h2",
-    "h3",
-    "img",
-    "input",
-    "label",
-    "li",
-    "nav",
-    "ol",
-    "p",
-    "select",
-    "span",
-    "svg",
-    "ul"
-];
-var dist_Primitive = dist_NODES.reduce((primitive, node)=>{
-    const Slot = dist_createSlot(`Primitive.${node}`);
-    const Node1 = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwardedRef)=>{
-        const { asChild, ...primitiveProps } = props;
-        const Comp = asChild ? Slot : node;
-        if ("undefined" != typeof window) window[Symbol.for("radix-ui")] = true;
-        return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Comp, {
-            ...primitiveProps,
-            ref: forwardedRef
-        });
-    });
-    Node1.displayName = `Primitive.${node}`;
-    return {
-        ...primitive,
-        [node]: Node1
-    };
-}, {});
+const ToolbarGlyph = ToolbarGlyph_ToolbarGlyph;
 var react_separator_dist_NAME = "Separator";
 var DEFAULT_ORIENTATION = "horizontal";
 var ORIENTATIONS = [
@@ -17480,7 +18015,7 @@ var dist_Separator = __WEBPACK_EXTERNAL_MODULE_react__.forwardRef((props, forwar
         "aria-orientation": ariaOrientation,
         role: "separator"
     };
-    return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(dist_Primitive.div, {
+    return /* @__PURE__ */ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Primitive.div, {
         "data-orientation": orientation,
         ...semanticProps,
         ...domProps,
@@ -17518,7 +18053,7 @@ const ToolbarDropdown = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_rea
 const ToolbarIconDropdown = ({ icon, title, triggerClassName, ...props })=>{
     const iconNode = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
         className: TOOLBAR_TRIGGER_ICON_CLASS_NAME,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(primitives_ToolbarGlyph, {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ToolbarGlyph, {
             children: icon
         })
     });
@@ -18003,7 +18538,7 @@ const RulerTicks_RulerTicks = ({ length = 10, tickColor = 'var(--chart-grid-stro
     });
 };
 const components_RulerTicks = RulerTicks_RulerTicks;
-const ZoomViewportLayer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, className, style: customStyle }, ref)=>{
+const ZoomViewportLayer_ZoomViewportLayer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, className, style: customStyle }, ref)=>{
     const { state: { zoom: { style: zoomStyle } } } = useStore_useStore();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         ref: ref,
@@ -18016,7 +18551,7 @@ const ZoomViewportLayer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.fo
         })
     });
 });
-const Zoom_ZoomViewportLayer = ZoomViewportLayer;
+const ZoomViewportLayer = ZoomViewportLayer_ZoomViewportLayer;
 const AXIS_X_TICKS_LAYER_CLASS_NAME = 'absolute right-0 top-0 flex h-full w-full items-center justify-between text-xs opacity-50';
 const AXIS_X_TICKS_SHELL_CLASS_NAME = 'relative h-6 w-full select-none overflow-hidden text-xs leading-6';
 const MSCAN_SEGMENT_CLASS_NAME = 'flex flex-1 items-center justify-center';
@@ -18158,7 +18693,7 @@ const AxisXTicks = ({ type })=>{
     if (!show) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: AXIS_X_TICKS_SHELL_CLASS_NAME,
-        children: type === constants_ChartType.Scan || type === constants_ChartType.ScanDF360 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DataNFixedTicks, {}) : type === constants_ChartType.MScan ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+        children: type === constants_ChartType.Scan || type === constants_ChartType.ScanDF360 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DataNFixedTicks, {}) : type === constants_ChartType.MScan ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MScanTicks, {})
         }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThreeFixedTicks, {})
     });
@@ -20057,6 +20592,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;
@@ -20248,11 +20790,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
@@ -20514,6 +21056,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}`;
 }
@@ -20531,16 +21092,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,
@@ -20609,6 +21161,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);
@@ -20696,7 +21262,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;
@@ -20724,9 +21290,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)('');
@@ -20744,23 +21400,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) ?? '' : '', [
@@ -20809,8 +21464,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)('');
@@ -20837,6 +21494,7 @@ const LevelCursorPopover = ({ id })=>{
     }, [
         globalID,
         left,
+        sample?.version,
         updateKey
     ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Mask, {
@@ -20870,9 +21528,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);
@@ -20888,7 +21549,8 @@ const OccupancyCursorPopover = ()=>{
         return '';
     }, [
         globalID,
-        left
+        left,
+        sample?.version
     ]);
     const frequency = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>'number' == typeof left ? frequencyFormat?.(left) ?? '' : '', [
         left,
@@ -20962,7 +21624,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));
 };
@@ -20973,15 +21635,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}`;
 }
@@ -20993,7 +21655,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;
@@ -21006,7 +21668,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;
@@ -21055,40 +21717,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}`;
@@ -21104,7 +21775,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()}`;
@@ -21120,30 +21794,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) : {
@@ -21155,29 +21838,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,
@@ -21250,16 +21931,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",
@@ -21279,14 +21965,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 {
@@ -21298,7 +21984,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 = {
@@ -21355,7 +22050,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,
@@ -21373,7 +22069,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), [
@@ -21402,12 +22099,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;
@@ -21421,35 +22122,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;
@@ -21459,9 +22171,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,
@@ -21472,6 +22191,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({
@@ -21484,27 +22206,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?.();
@@ -21515,15 +22296,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 ()=>{
@@ -21534,18 +22336,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,
@@ -21556,19 +22368,20 @@ const Cursor = ({ id, type })=>{
         mode,
         type
     ]);
-    if (!show || !isEnabled || !active || event?.sourceId !== id) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Zoom_ZoomViewportLayer, {
+    if (!show || !isEnabled || !active) return null;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(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}`)
         ]
@@ -21604,7 +22417,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
     ]);
@@ -21769,7 +22582,7 @@ const EventBus_EventBus = ({ id })=>{
     }, [
         handleMouseLeave
     ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[5] pointer-events-auto",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
             ref: containerRef,
@@ -21934,7 +22747,6 @@ function useZoomEvent(id, name) {
         handleDrag
     ]);
 }
-const PERCENTAGE = 100;
 const tools_PRECISION = 1e4;
 const defaultAreaInfoResult = {
     startIndex: 0,
@@ -21953,28 +22765,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,
@@ -21983,30 +22794,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;
@@ -22037,16 +22850,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) {
@@ -22113,7 +22929,7 @@ const Area = (props)=>{
                     })
                 })
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                     style: {
                         left: `${areaStyle?.left}%`,
@@ -22127,13 +22943,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);
@@ -22162,7 +22980,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);
@@ -22188,12 +23006,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;
@@ -22811,7 +23627,7 @@ const DragSelectBox = ({ enabled, defaultRect, minSize = 0, minWidth, minHeight,
     const middleInsetX = displayRectBox ? Math.max(0, Math.min(6, displayRectBox.width / 4)) : 6;
     const middleInsetY = displayRectBox ? Math.max(0, Math.min(6, displayRectBox.height / 4)) : 6;
     if (!enabled) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(ZoomViewportLayer, {
         className: cn_cn('left-0 top-0 h-full w-full overflow-hidden', className),
         ref: containerRef,
         style: {
@@ -22973,16 +23789,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);
@@ -23054,7 +23872,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;
@@ -23164,7 +23982,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
     });
 };
@@ -23819,7 +24637,7 @@ const IQChart = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_r
 const IQ_IQ = withChartPublisher(IQChart, 'IQ');
 const IQ = IQ_IQ;
 const Reset_modes = Object.values(constants_ModuleType);
-const Reset = ()=>{
+const Reset_Reset = ()=>{
     const { state: { globalID, publish } } = useStore_useStore();
     const handleReset = ()=>{
         publish?.({
@@ -23846,7 +24664,7 @@ const Reset = ()=>{
         })
     });
 };
-const controls_Reset = Reset;
+const Reset = Reset_Reset;
 const SegmentsDisplayControl_SegmentsDisplayControl = ()=>{
     const { state: { segments, globalID } } = useStore_useStore();
     const [display, setDisplay] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
@@ -24375,7 +25193,7 @@ const FluorescenceSwitch = ()=>{
         tone: "primary",
         onClick: toggleDisplay,
         title: title,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(primitives_ToolbarGlyph, {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ToolbarGlyph, {
             opticalOffsetY: iconOpticalOffsetY,
             opticalScale: iconOpticalScale,
             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Icon, {})
@@ -24387,7 +25205,7 @@ const FluorescenceSwitch = ()=>{
             tone: "primary",
             onClick: toggleDisplay,
             title: title,
-            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(primitives_ToolbarGlyph, {
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ToolbarGlyph, {
                 opticalOffsetY: iconOpticalOffsetY,
                 opticalScale: iconOpticalScale,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Icon, {})
@@ -24399,10 +25217,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: [
@@ -24449,11 +25307,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({
@@ -24475,11 +25338,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);
@@ -24529,50 +25388,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;
@@ -25070,7 +25892,7 @@ const TOOLBAR_ITEM_CONFIGS = [
         ]
     },
     {
-        component: controls_Reset,
+        component: Reset,
         toolType: constants_ToolbarItemType.Reset,
         supportedCharts: [],
         excludedCharts: [
@@ -25199,9 +26021,9 @@ 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 Toolbar_Toolbar = ({ type })=>{
+    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,
@@ -25231,7 +26053,7 @@ const Toolbar = ({ type })=>{
         })
     });
 };
-const components_Toolbar = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(Toolbar);
+const Toolbar = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(Toolbar_Toolbar);
 function useLevelStreamAnalyzer() {
     const { state: { globalID, axisY, levelStream } } = useStore_useStore();
     const range = axisY.range ?? constants_RANGE_DEFAULT;
@@ -25395,7 +26217,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);
@@ -25978,7 +26800,7 @@ const DragFrame = ({ id })=>{
         id
     ]);
     if (!zoom.show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[3]",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
             className: "absolute left-[-100%] top-0 h-full w-0 box-border border-2 border-dashed border-chart-grid-strong bg-chart-surface opacity-40",
@@ -26006,6 +26828,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',
@@ -26577,19 +27410,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) {
@@ -26605,7 +27484,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)=>{
@@ -26619,6 +27498,8 @@ const resolveFrequencyAllocationSegments = ({ segments, allocations })=>{
             return {
                 band,
                 range,
+                channelIndex: channelIndex ?? 0,
+                channelTitle,
                 position: {
                     left: `${left}%`,
                     width: `${width}%`
@@ -26638,15 +27519,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: [
@@ -26657,6 +27553,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",
@@ -26702,57 +27604,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;
@@ -26760,8 +27696,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: {
@@ -26772,43 +27709,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}`
             };
@@ -26819,15 +27777,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({
@@ -26836,28 +27792,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)(()=>{
@@ -26980,7 +27950,7 @@ const FrequencyTagLine_FrequencyTagLine = (props)=>{
         show
     ]);
     if (!show || !display) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[3]",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
             className: "relative flex h-full w-px border-l border-dashed border-chart-highlight/80 opacity-80",
@@ -27211,7 +28181,7 @@ const Limit_Limit = ({ id })=>{
         system.height
     ]);
     if (!show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[2]",
         children: segments?.map((i, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 style: {
@@ -27236,7 +28206,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
@@ -27289,47 +28260,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({
@@ -27341,6 +28321,15 @@ const useMarkerEvents = (props)=>{
                 });
             }
         });
+        return ()=>{
+            cleanupMove?.();
+            cleanupDrag?.();
+            cleanupMouseDown?.();
+            cleanupMouseUp?.();
+            cleanupMouseLeave?.();
+            cleanupLongPress?.();
+            cleanupDoubleClick?.();
+        };
     }, [
         id,
         display,
@@ -28578,7 +29567,7 @@ const Markers = ({ id })=>{
         resetMarkers
     ]);
     if (!show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[5]",
         children: markers.map((marker)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Markers_MarkerItem, {
                 marker: marker
@@ -28634,7 +29623,7 @@ function useScope_useScope() {
 const Scope = ()=>{
     const { state: { scope: { show, left, width } } } = useStore_useStore();
     if (!show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
             className: "relative flex h-full w-0 box-border border-y border-dashed border-chart-grid bg-chart-surface opacity-50",
             style: {
@@ -28731,19 +29720,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
@@ -28757,18 +29744,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", {
@@ -28776,10 +29768,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}`))
         })
@@ -28788,7 +29780,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);
@@ -28833,7 +29825,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;
@@ -28841,7 +29833,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;
@@ -28885,7 +29877,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,
@@ -28924,7 +29916,7 @@ const Stripe_Stripe = ({ id })=>{
         change
     ]);
     if (!show || left - right === 0 || !display) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[3]",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
             className: "relative flex h-full w-px box-border border-x-2 border-dashed border-y-0 border-chart-grid-strong bg-chart-surface opacity-40",
@@ -28936,37 +29928,73 @@ const Stripe_Stripe = ({ id })=>{
     });
 };
 const Stripe = Stripe_Stripe;
+function resolveBandPositions(band, segments) {
+    if (!band.show) return [];
+    if (band.kind === BandKind.Position) return [
+        {
+            key: BandKind.Position,
+            left: band.left ?? 50 - band.width / 2,
+            width: band.width
+        }
+    ];
+    const range = frequencyCalculation_calculateFrequencyRange(band);
+    if (!range || !segments.length) return [];
+    const totalSegmentPoints = segments.reduce((sum, segment)=>sum + Math.max(0, segment.point), 0);
+    if (totalSegmentPoints <= 0) return [];
+    const positions = [];
+    let segmentLeft = 0;
+    segments.forEach((segment, segmentIndex)=>{
+        const segmentWidth = Math.max(0, segment.point) / totalSegmentPoints * 100;
+        if (segment.point > 0 && segment.frequencyCache?.length && isRangeIntersectSegment(range, segment)) {
+            const localPosition = calculatePositionFromFrequencyRange(range, segment);
+            positions.push({
+                key: `frequency-${segmentIndex}`,
+                left: segmentLeft + localPosition.left / 100 * segmentWidth,
+                width: localPosition.width / 100 * segmentWidth
+            });
+        }
+        segmentLeft += segmentWidth;
+    });
+    return positions;
+}
 function useBandLayerController() {
-    const { state: { band }, dispatch } = useStore_useStore();
+    const { dispatch, store } = useStoreApi();
     const updateBand = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
-        const { show = true, width = 0 } = e;
+        const current = store.getState().band;
+        const next = resolveBandState(e, current, 'replace');
+        if (next === current) return;
         dispatch({
             payload: {
-                band: {
-                    ...band,
-                    show,
-                    width
-                }
+                band: next
             }
         });
     }, [
-        band
+        dispatch,
+        store
     ]);
     return updateBand;
 }
 const BandLayer_BandLayer = ()=>{
-    const { state: { band: { show, width, left, color } } } = useStore_useStore();
-    if (!show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-            className: "absolute flex h-full w-0 box-border border-y border-dashed opacity-50",
-            style: {
-                left: void 0 !== left ? `${left}%` : `calc(50% - ${width / 2}%)`,
-                width: `${width}%`,
-                backgroundColor: `${color}15`,
-                borderColor: `${color}`
-            }
-        })
+    const band = useStore_useSelector((state)=>state.band);
+    const segments = useStore_useSelector((state)=>state.segments);
+    const positions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>resolveBandPositions(band, segments), [
+        band,
+        segments
+    ]);
+    if (!positions.length) return null;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
+        children: positions.map((position)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                "data-testid": "spectrum-band",
+                "data-band-kind": band.kind,
+                "data-band-key": position.key,
+                className: "absolute flex h-full w-0 box-border border-y border-dashed opacity-50",
+                style: {
+                    left: `${position.left}%`,
+                    width: `${position.width}%`,
+                    backgroundColor: band.color ? `${band.color}15` : void 0,
+                    borderColor: band.color
+                }
+            }, position.key))
     });
 };
 const BandLayer = BandLayer_BandLayer;
@@ -29047,7 +30075,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
                     }),
@@ -29059,7 +30089,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, {})
                 ]
             })
@@ -29095,7 +30125,7 @@ const LevelStream_Chart_Chart = (props)=>{
     ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Container, {
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
                 type: constants_ChartType.LevelStream
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FlexBox, {
@@ -29352,9 +30382,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 [
@@ -29500,7 +30530,7 @@ const HeatmapPortal_Chart = (props)=>{
         id: heatmapElementID,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Background, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
                     type: constants_ChartType.Heatmap
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Heatmap, {}),
@@ -29523,7 +30553,7 @@ const OccupancyPortal_Chart = (props)=>{
                     occupancyAxisYDisabled: true
                 }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Background, {
                     children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
                             type: constants_ChartType.Occupancy
                         }),
                         /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Occupancy, {}),
@@ -29566,7 +30596,7 @@ const Blaze = ()=>{
         globalID
     ]);
     if (!show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
             className: "absolute left-[-100%] top-0 flex h-full w-0 opacity-50",
             style: {
@@ -29601,7 +30631,7 @@ const Spectrum_Legend = Legend;
 const SegmentsZebra = ()=>{
     const { state: { segments } } = useStore_useStore();
     const totalPoints = segments.totalPoints ?? 0;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomViewportLayer, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ZoomViewportLayer, {
         className: "z-[0]",
         children: segments.map((i, key)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 className: "h-full border-x",
@@ -29943,7 +30973,7 @@ const Spectrum_Chart_Chart = (props)=>{
     });
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Container, {
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Toolbar, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Toolbar, {
                 type: type
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_FlexBox, {
@@ -29981,12 +31011,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 = {}) {
@@ -30003,4 +31052,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 };