@rfkit/charts 1.6.0 → 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 {
@@ -622,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 {
@@ -630,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\\)\\] {
@@ -646,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 {
@@ -670,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 {
@@ -749,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 {
@@ -845,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\\%\\] {
@@ -873,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 {
@@ -978,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 {
@@ -1060,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);
 }
 
@@ -1075,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);
 }
 
@@ -1201,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 {
@@ -1209,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 {
@@ -1238,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)) {
@@ -1249,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 {
@@ -1265,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 {
@@ -1658,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 {
@@ -1666,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 {
@@ -1702,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 {
@@ -1742,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 {
@@ -1758,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\\)\\] {
@@ -1770,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 {
@@ -1778,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 {
@@ -1786,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 {
@@ -2574,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);
 }
 
@@ -2592,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);
 }
 
@@ -2700,7 +2763,7 @@ 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);
 }
 
@@ -5082,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] = {
@@ -5198,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) {
@@ -5380,6 +5505,7 @@ function createParams() {
             onChange: ()=>{}
         },
         band: {
+            kind: BandKind.Position,
             show: false,
             left: void 0,
             width: 0,
@@ -5950,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;
             }
@@ -6153,16 +6287,24 @@ 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');
@@ -6680,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 = '';
@@ -6696,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);
@@ -6796,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);
@@ -7234,6 +7393,20 @@ const getDefaultConfig = ()=>{
             container: [
                 'container'
             ],
+            'container-type': [
+                {
+                    '@container': [
+                        '',
+                        'normal',
+                        'size',
+                        isArbitraryVariable,
+                        isArbitraryValue
+                    ]
+                }
+            ],
+            'container-named': [
+                isNamedContainerQuery
+            ],
             columns: [
                 {
                     columns: [
@@ -8155,6 +8328,15 @@ const getDefaultConfig = ()=>{
                     indent: scaleUnambiguousSpacing()
                 }
             ],
+            'tab-size': [
+                {
+                    tab: [
+                        isInteger,
+                        isArbitraryVariable,
+                        isArbitraryValue
+                    ]
+                }
+            ],
             'vertical-align': [
                 {
                     align: [
@@ -9422,6 +9604,15 @@ const getDefaultConfig = ()=>{
             'translate-none': [
                 'translate-none'
             ],
+            zoom: [
+                {
+                    zoom: [
+                        isInteger,
+                        isArbitraryVariable,
+                        isArbitraryValue
+                    ]
+                }
+            ],
             accent: [
                 {
                     accent: scaleColor()
@@ -9530,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()
@@ -9764,6 +9983,9 @@ const getDefaultConfig = ()=>{
             ]
         },
         conflictingClassGroups: {
+            'container-named': [
+                'container-type'
+            ],
             overflow: [
                 'overflow-x',
                 'overflow-y'
@@ -10029,6 +10251,9 @@ const getDefaultConfig = ()=>{
                 'leading'
             ]
         },
+        postfixLookupClassGroups: [
+            'container-type'
+        ],
         orderSensitiveModifiers: [
             '*',
             '**',
@@ -10540,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) {
@@ -10571,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,
@@ -10586,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 [
@@ -10715,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
@@ -10806,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",
@@ -10857,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,
@@ -10869,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);
@@ -10882,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
@@ -10905,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}]`));
@@ -10928,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);
@@ -10940,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";
@@ -10966,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
@@ -11003,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) {
@@ -11024,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,
@@ -11081,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);
@@ -11113,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
@@ -11166,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);
         };
     }, []);
 }
@@ -11202,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 () {
@@ -11355,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;
@@ -13085,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
     });
 };
@@ -13098,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
     });
@@ -13117,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;
@@ -13186,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(()=>{
@@ -13215,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(" "),
@@ -13228,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,
@@ -13350,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;
@@ -13369,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
@@ -13381,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: {
@@ -13396,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
     ]);
@@ -13408,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");
@@ -13462,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";
 }
@@ -13479,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 = {
@@ -13584,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
@@ -14518,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, {
@@ -14836,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();
@@ -15056,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,
@@ -15063,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;
@@ -15127,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();
@@ -15142,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);
@@ -15159,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,
@@ -15306,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,
@@ -15319,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();
@@ -15617,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,
@@ -15645,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
             }
         })
@@ -15661,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, {
@@ -15689,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;
@@ -15719,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;
@@ -15932,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),
@@ -15978,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),
@@ -16008,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;
@@ -16105,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) {
@@ -16173,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);
@@ -16183,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,
@@ -16405,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);
         }, [
@@ -16707,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
@@ -17542,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})`);
@@ -17554,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 = [
@@ -17701,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,
@@ -17739,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
         })
     });
@@ -18224,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,
@@ -18237,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';
@@ -18379,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, {})
     });
@@ -22055,7 +22369,7 @@ const Cursor = ({ id, type })=>{
         type
     ]);
     if (!show || !isEnabled || !active) 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: "z-[6]",
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -22268,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,
@@ -22615,7 +22929,7 @@ const Area_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}%`,
@@ -23313,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: {
@@ -24323,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?.({
@@ -24350,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)([]);
@@ -24395,7 +24709,7 @@ const SegmentsDisplayControl_SegmentsDisplayControl = ()=>{
     });
 };
 const SegmentsDisplayControl = SegmentsDisplayControl_SegmentsDisplayControl;
-const SeriesControl = ({ type })=>{
+const SeriesControl_SeriesControl = ({ type })=>{
     const { state: { globalID } } = useStore_useStore();
     const { mode: currentMode } = useSeriesManager(globalID);
     const handleSeriesControl = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
@@ -24517,7 +24831,7 @@ const SeriesControl = ({ type })=>{
         children: renderIcon()
     });
 };
-const controls_SeriesControl = SeriesControl;
+const SeriesControl = SeriesControl_SeriesControl;
 const SeriesDisplayControl = ()=>{
     const { state: { globalID, series: seriesConfig } } = useStore_useStore();
     const filteredSeries = useFilteredSeries_useFilteredSeries(globalID);
@@ -24879,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, {})
@@ -24891,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, {})
@@ -25578,7 +25892,7 @@ const TOOLBAR_ITEM_CONFIGS = [
         ]
     },
     {
-        component: controls_Reset,
+        component: Reset,
         toolType: constants_ToolbarItemType.Reset,
         supportedCharts: [],
         excludedCharts: [
@@ -25596,7 +25910,7 @@ const TOOLBAR_ITEM_CONFIGS = [
         ]
     },
     {
-        component: controls_SeriesControl,
+        component: SeriesControl,
         toolType: constants_ToolbarItemType.SeriesControl,
         supportedCharts: [
             constants_ChartType.SingleFrequency,
@@ -25707,7 +26021,7 @@ const resolveToolbarItemProps = (config, chartType)=>{
     };
     return config.props;
 };
-const Toolbar = ({ type })=>{
+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();
@@ -25739,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;
@@ -25865,7 +26179,7 @@ class Occupancy extends BaseRenderer {
         });
     }
 }
-const Level = (props)=>{
+const Level_Level = (props)=>{
     const { opacity } = props;
     const { chart, Chart } = hooks_useChart({
         Render: Occupancy,
@@ -25888,7 +26202,7 @@ const Level = (props)=>{
         style: style
     });
 };
-const modules_Level = Level;
+const Level = Level_Level;
 const LINE_WIDTH_BASE = 0.5;
 const MAJOR_TICK_LENGTH = 6;
 const MINOR_TICK_LENGTH = 4;
@@ -26486,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",
@@ -27636,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",
@@ -27867,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: {
@@ -29253,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
@@ -29309,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: {
@@ -29602,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",
@@ -29614,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;
@@ -29775,13 +30125,13 @@ 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, {
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Spectrum, {
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PluginBox, {
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Level, {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Level, {
                             opacity: 0.5
                         })
                     })
@@ -30180,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, {}),
@@ -30203,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, {}),
@@ -30246,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: {
@@ -30281,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",
@@ -30623,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, {