@novu/js 3.6.0 → 3.7.0

package/dist/esm/ui/index.mjs

@@ -1,5 +1,5 @@
-import { Novu, DEFAULT_API_VERSION, isSameFilter } from '../chunk-P4R443TU.mjs';
-import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.mjs';
+import { Novu, isBrowser, DEFAULT_API_VERSION, isSameFilter } from '../chunk-AIY4HF7H.mjs';
+import { parseMarkdownIntoTokens } from '../chunk-KYYDDVBR.mjs';
 import { __privateAdd, __privateMethod, __privateSet, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
 import { createComponent, mergeProps, delegateEvents, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
 import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, Index, batch } from 'solid-js';
@@ -11,7 +11,7 @@ import { useFloating } from 'solid-floating-ui';
 import { Motion as Motion$1 } from 'solid-motionone';
 import { cva } from 'class-variance-authority';
 
-// _hbh5yyuou:/home/runner/work/novu/novu/packages/js/src/ui/index.directcss
+// _b6ep5vqi5:/home/runner/work/novu/novu/packages/js/src/ui/index.directcss
 var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-1{margin-left:.25rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-1{margin-top:.25rem}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-3\\.5{height:.875rem;width:.875rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-translate-x-1\\/2{--tw-translate-x:50%}.nt-transform,.nt-translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-not-allowed{cursor:not-allowed}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-200{border-color:var(--nv-color-neutral-alpha-200)}.nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-\\[12px\\]{font-size:12px}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-\\[\\#000000\\]{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.nt-underline{text-decoration-line:underline}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-opacity-50{opacity:.5}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-12 .nv-notificationList{padding-bottom:3rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-12 .nv-preferencesContainer{padding-bottom:3rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
 
 // src/ui/config/appearanceKeys.ts
@@ -694,6 +694,330 @@ var useStyle = () => {
   );
   return styleFuncMemo();
 };
+var useTabsDropdown = ({ tabs }) => {
+  const [tabsList, setTabsList] = createSignal();
+  const [visibleTabs, setVisibleTabs] = createSignal([]);
+  const [dropdownTabs, setDropdownTabs] = createSignal([]);
+  onMount(() => {
+    const tabsListEl = tabsList();
+    if (!tabsListEl) return;
+    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
+        if (tabsElements.length === visibleTabIds.length) {
+          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+          observer.disconnect();
+          return;
+        }
+        visibleTabIds = visibleTabIds.slice(0, -1);
+        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
+        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
+        observer.disconnect();
+      },
+      { root: tabsListEl }
+    );
+    for (const tabElement of tabsElements) {
+      observer.observe(tabElement);
+    }
+  });
+  return { dropdownTabs, setTabsList, visibleTabs };
+};
+
+// src/ui/helpers/browser.ts
+function requestLock(id, cb) {
+  let isFulfilled = false;
+  let promiseResolve;
+  const promise = new Promise((resolve) => {
+    promiseResolve = resolve;
+  });
+  navigator.locks.request(id, () => {
+    if (!isFulfilled) {
+      cb(id);
+    }
+    return promise;
+  });
+  return () => {
+    isFulfilled = true;
+    promiseResolve();
+  };
+}
+var useBrowserTabsChannel = ({
+  channelName,
+  onMessage
+}) => {
+  const [tabsChannel] = createSignal(new BroadcastChannel(channelName));
+  const postMessage = (args) => {
+    const channel = tabsChannel();
+    channel.postMessage(args);
+  };
+  onMount(() => {
+    const listener = (event) => {
+      onMessage(event.data);
+    };
+    const channel = tabsChannel();
+    channel.addEventListener("message", listener);
+    onCleanup(() => {
+      channel.removeEventListener("message", listener);
+    });
+  });
+  return { postMessage };
+};
+
+// src/ui/helpers/useWebSocketEvent.ts
+var useWebSocketEvent = ({
+  event: webSocketEvent,
+  eventHandler: onMessage
+}) => {
+  const novu = useNovu();
+  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;
+  const { postMessage } = useBrowserTabsChannel({ channelName, onMessage });
+  const updateReadCount = (data) => {
+    onMessage(data);
+    postMessage(data);
+  };
+  onMount(() => {
+    let cleanup;
+    const resolveLock = requestLock(channelName, () => {
+      cleanup = novu.on(webSocketEvent, updateReadCount);
+    });
+    onCleanup(() => {
+      if (cleanup) {
+        cleanup();
+      }
+      resolveLock();
+    });
+  });
+};
+
+// src/notifications/visibility-tracker.ts
+var DEFAULT_OPTIONS = {
+  intersectionThreshold: 0.5,
+  visibilityDuration: 1e3,
+  batchDelay: 500,
+  maxBatchSize: 20,
+  enabled: true,
+  rootMargin: "0px"
+};
+var NotificationVisibilityTracker = class {
+  constructor(inboxService, options = {}) {
+    this.inboxService = inboxService;
+    /*
+     * Session-based tracking: notifications marked as seen in current session won't be marked again
+     * Only resets when tracker is destroyed (inbox closes)
+     */
+    this.seenNotifications = /* @__PURE__ */ new Set();
+    this.pendingNotifications = /* @__PURE__ */ new Map();
+    this.pendingBatch = /* @__PURE__ */ new Set();
+    this.batchTimer = null;
+    this.visibilityTimer = null;
+    this.observer = null;
+    this.elementToNotificationMap = /* @__PURE__ */ new WeakMap();
+    this.observedElements = /* @__PURE__ */ new Set();
+    this.options = __spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options);
+    this.initializeObserver();
+    this.startVisibilityTimer();
+  }
+  initializeObserver() {
+    if (!this.options.enabled || typeof window === "undefined" || !("IntersectionObserver" in window)) {
+      return;
+    }
+    this.observer = new IntersectionObserver((entries) => this.handleIntersection(entries), {
+      threshold: this.options.intersectionThreshold,
+      rootMargin: this.options.rootMargin
+    });
+  }
+  startVisibilityTimer() {
+    if (!this.options.enabled || typeof window === "undefined") {
+      return;
+    }
+    this.checkAllElementsVisibility();
+    this.visibilityTimer = window.setInterval(() => {
+      this.checkAllElementsVisibility();
+    }, 1e3);
+  }
+  checkAllElementsVisibility() {
+    this.observedElements.forEach((element) => {
+      const notificationId = this.elementToNotificationMap.get(element);
+      if (!notificationId || this.seenNotifications.has(notificationId)) {
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const isVisible = this.isElementVisible(rect);
+      if (isVisible) {
+        if (!this.pendingNotifications.has(notificationId)) {
+          this.pendingNotifications.set(notificationId, Date.now());
+        }
+      } else {
+        this.pendingNotifications.delete(notificationId);
+      }
+    });
+    this.processVisibleNotifications();
+  }
+  isElementVisible(rect) {
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const verticalInView = rect.top < viewportHeight && rect.bottom > 0;
+    const horizontalInView = rect.left < viewportWidth && rect.right > 0;
+    if (!verticalInView || !horizontalInView) {
+      return false;
+    }
+    const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);
+    const visibleWidth = Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
+    const visibleArea = visibleHeight * visibleWidth;
+    const totalArea = rect.height * rect.width;
+    return totalArea > 0 && visibleArea / totalArea >= this.options.intersectionThreshold;
+  }
+  handleIntersection(entries) {
+    const now = Date.now();
+    entries.forEach((entry) => {
+      const notificationId = this.elementToNotificationMap.get(entry.target);
+      if (!notificationId || this.seenNotifications.has(notificationId)) {
+        return;
+      }
+      if (entry.isIntersecting) {
+        this.pendingNotifications.set(notificationId, now);
+      } else {
+        this.pendingNotifications.delete(notificationId);
+      }
+    });
+    this.processVisibleNotifications();
+  }
+  processVisibleNotifications() {
+    const now = Date.now();
+    const notificationsToMark = [];
+    this.pendingNotifications.forEach((startTime, notificationId) => {
+      if (now - startTime >= this.options.visibilityDuration) {
+        notificationsToMark.push(notificationId);
+        this.seenNotifications.add(notificationId);
+      }
+    });
+    notificationsToMark.forEach((id) => {
+      this.pendingNotifications.delete(id);
+    });
+    if (notificationsToMark.length > 0) {
+      this.addToBatch(notificationsToMark);
+    }
+  }
+  addToBatch(notificationIds) {
+    notificationIds.forEach((id) => {
+      this.pendingBatch.add(id);
+    });
+    this.scheduleBatchProcessing();
+  }
+  scheduleBatchProcessing() {
+    if (this.batchTimer !== null) {
+      return;
+    }
+    this.batchTimer = window.setTimeout(() => {
+      this.processBatch();
+    }, this.options.batchDelay);
+  }
+  processBatch() {
+    return __async(this, null, function* () {
+      this.batchTimer = null;
+      const notificationsToSend = Array.from(this.pendingBatch);
+      this.pendingBatch.clear();
+      if (notificationsToSend.length === 0) {
+        return;
+      }
+      const chunks = this.chunkArray(notificationsToSend, this.options.maxBatchSize);
+      try {
+        yield Promise.all(chunks.map((chunk) => this.inboxService.markAsSeen({ notificationIds: chunk })));
+      } catch (error) {
+        notificationsToSend.forEach((id) => {
+          this.seenNotifications.delete(id);
+        });
+        console.error("Failed to mark notifications as seen:", error);
+      }
+    });
+  }
+  chunkArray(array, size) {
+    const chunks = [];
+    for (let i = 0; i < array.length; i += size) {
+      chunks.push(array.slice(i, i + size));
+    }
+    return chunks;
+  }
+  observe(element, notificationId) {
+    if (!this.observer || this.seenNotifications.has(notificationId)) {
+      return;
+    }
+    this.elementToNotificationMap.set(element, notificationId);
+    this.observedElements.add(element);
+    this.observer.observe(element);
+  }
+  unobserve(element) {
+    if (!this.observer) {
+      return;
+    }
+    const notificationId = this.elementToNotificationMap.get(element);
+    if (notificationId) {
+      this.pendingNotifications.delete(notificationId);
+      this.pendingBatch.delete(notificationId);
+      this.elementToNotificationMap.delete(element);
+      this.observedElements.delete(element);
+    }
+    this.observer.unobserve(element);
+  }
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    if (this.batchTimer !== null) {
+      window.clearTimeout(this.batchTimer);
+      this.batchTimer = null;
+    }
+    if (this.visibilityTimer !== null) {
+      window.clearInterval(this.visibilityTimer);
+      this.visibilityTimer = null;
+    }
+    this.seenNotifications.clear();
+    this.pendingNotifications.clear();
+    this.pendingBatch.clear();
+    this.observedElements.clear();
+  }
+  // Force process any pending batches (useful for cleanup)
+  flush() {
+    return __async(this, null, function* () {
+      if (this.batchTimer !== null) {
+        window.clearTimeout(this.batchTimer);
+        this.batchTimer = null;
+        yield this.processBatch();
+      }
+    });
+  }
+};
+
+// src/ui/helpers/useNotificationVisibility.ts
+function useNotificationVisibility() {
+  const novu = useNovu();
+  let tracker = null;
+  onMount(() => {
+    tracker = new NotificationVisibilityTracker(novu.notifications.inboxService);
+    onCleanup(() => {
+      if (tracker) {
+        tracker.destroy();
+        tracker = null;
+      }
+    });
+  });
+  const observeNotification = (element, notificationId) => {
+    if (tracker) {
+      tracker.observe(element, notificationId);
+    }
+  };
+  const unobserveNotification = (element) => {
+    if (tracker) {
+      tracker.unobserve(element);
+    }
+  };
+  return {
+    observeNotification,
+    unobserveNotification
+  };
+}
 
 // src/ui/context/AppearanceContext.tsx
 var AppearanceContext = createContext(void 0);
@@ -814,72 +1138,6 @@ var useNovuEvent = ({
     });
   });
 };
-
-// src/ui/helpers/browser.ts
-function requestLock(id, cb) {
-  let isFulfilled = false;
-  let promiseResolve;
-  const promise = new Promise((resolve) => {
-    promiseResolve = resolve;
-  });
-  navigator.locks.request(id, () => {
-    if (!isFulfilled) {
-      cb(id);
-    }
-    return promise;
-  });
-  return () => {
-    isFulfilled = true;
-    promiseResolve();
-  };
-}
-var useBrowserTabsChannel = ({
-  channelName,
-  onMessage
-}) => {
-  const [tabsChannel] = createSignal(new BroadcastChannel(channelName));
-  const postMessage = (args) => {
-    const channel = tabsChannel();
-    channel.postMessage(args);
-  };
-  onMount(() => {
-    const listener = (event) => {
-      onMessage(event.data);
-    };
-    const channel = tabsChannel();
-    channel.addEventListener("message", listener);
-    onCleanup(() => {
-      channel.removeEventListener("message", listener);
-    });
-  });
-  return { postMessage };
-};
-
-// src/ui/helpers/useWebSocketEvent.ts
-var useWebSocketEvent = ({
-  event: webSocketEvent,
-  eventHandler: onMessage
-}) => {
-  const novu = useNovu();
-  const channelName = `nv_ws_connection:a=${novu.applicationIdentifier}:s=${novu.subscriberId}:e=${webSocketEvent}`;
-  const { postMessage } = useBrowserTabsChannel({ channelName, onMessage });
-  const updateReadCount = (data) => {
-    onMessage(data);
-    postMessage(data);
-  };
-  onMount(() => {
-    let cleanup;
-    const resolveLock = requestLock(channelName, () => {
-      cleanup = novu.on(webSocketEvent, updateReadCount);
-    });
-    onCleanup(() => {
-      if (cleanup) {
-        cleanup();
-      }
-      resolveLock();
-    });
-  });
-};
 var LocalizationContext = createContext(void 0);
 var LocalizationProvider = (props) => {
   const localization = createMemo(() => {
@@ -1660,11 +1918,6 @@ var Bell2 = (props) => {
     }
   });
 };
-
-// src/utils/is-browser.ts
-function isBrowser() {
-  return typeof window !== "undefined";
-}
 var _tmpl$25 = /* @__PURE__ */ template(`<svg width=6 height=6 viewBox="0 0 6 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00175 1.70402L0.705765 6L0 5.29424L4.29548 0.998253H0.509608V0H6V5.49039H5.00175V1.70402Z"fill=currentColor>`);
 var ArrowUpRight = (props) => {
   return (() => {
@@ -4612,35 +4865,6 @@ var PreferencesHeader = (props) => {
     return _el$;
   })();
 };
-var useTabsDropdown = ({ tabs }) => {
-  const [tabsList, setTabsList] = createSignal();
-  const [visibleTabs, setVisibleTabs] = createSignal([]);
-  const [dropdownTabs, setDropdownTabs] = createSignal([]);
-  onMount(() => {
-    const tabsListEl = tabsList();
-    if (!tabsListEl) return;
-    const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
-    const observer = new IntersectionObserver(
-      (entries) => {
-        let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
-        if (tabsElements.length === visibleTabIds.length) {
-          setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
-          observer.disconnect();
-          return;
-        }
-        visibleTabIds = visibleTabIds.slice(0, -1);
-        setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
-        setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
-        observer.disconnect();
-      },
-      { root: tabsListEl }
-    );
-    for (const tabElement of tabsElements) {
-      observer.observe(tabElement);
-    }
-  });
-  return { dropdownTabs, setTabsList, visibleTabs };
-};
 var _tmpl$60 = /* @__PURE__ */ template(`<strong>`);
 var _tmpl$216 = /* @__PURE__ */ template(`<p>`);
 var Bold = (props) => {
@@ -6078,6 +6302,10 @@ var NotificationList = (props) => {
     setLimit
   } = useInboxContext();
   const ids = createMemo(() => data().map((n) => n.id));
+  const {
+    observeNotification,
+    unobserveNotification
+  } = useNotificationVisibility();
   let notificationListElement;
   createEffect(() => {
     setLimit(props.limit || DEFAULT_LIMIT);
@@ -6121,29 +6349,55 @@ var NotificationList = (props) => {
           },
           children: (_, index) => {
             const notification = () => data()[index()];
-            return createComponent(Notification, {
-              get notification() {
-                return notification();
-              },
-              get renderNotification() {
-                return props.renderNotification;
-              },
-              get renderSubject() {
-                return props.renderSubject;
-              },
-              get renderBody() {
-                return props.renderBody;
-              },
-              get onNotificationClick() {
-                return props.onNotificationClick;
-              },
-              get onPrimaryActionClick() {
-                return props.onPrimaryActionClick;
-              },
-              get onSecondaryActionClick() {
-                return props.onSecondaryActionClick;
-              }
-            });
+            return (() => {
+              var _el$4 = _tmpl$70();
+              use((el) => {
+                observeNotification(el, notification().id);
+                const observer = new MutationObserver((mutations) => {
+                  mutations.forEach((mutation) => {
+                    mutation.removedNodes.forEach((node) => {
+                      if (node === el) {
+                        unobserveNotification(el);
+                        observer.disconnect();
+                      }
+                    });
+                  });
+                });
+                if (el.parentElement) {
+                  observer.observe(el.parentElement, {
+                    childList: true
+                  });
+                }
+                onCleanup(() => {
+                  observer.disconnect();
+                  unobserveNotification(el);
+                });
+              }, _el$4);
+              insert(_el$4, createComponent(Notification, {
+                get notification() {
+                  return notification();
+                },
+                get renderNotification() {
+                  return props.renderNotification;
+                },
+                get renderSubject() {
+                  return props.renderSubject;
+                },
+                get renderBody() {
+                  return props.renderBody;
+                },
+                get onNotificationClick() {
+                  return props.onNotificationClick;
+                },
+                get onPrimaryActionClick() {
+                  return props.onPrimaryActionClick;
+                },
+                get onSecondaryActionClick() {
+                  return props.onSecondaryActionClick;
+                }
+              }));
+              return _el$4;
+            })();
           }
         }), createComponent(Show, {
           get when() {