@ythknn/notify 0.1.0 → 0.2.0

package/README.md

@@ -96,7 +96,37 @@ All optional: `position` (`top-right`, `top-left`, `top-center`, `bottom-right`,
 `solid`), `alertStyle` (`banner`, `alert`), `duration`, `max`, `stack`, `swipeToDismiss`,
 `pauseOnHover`, `expandable`, `timestamps`, `closeButton` (`hover`, `always`, `never`),
 `contextMenu`, `sound`, `volume`, `width`, `radius`, `gap`, `offset`, `accent`, `history`,
-`formatTime`, `className`, `style`, `label`.
+`dir` (`ltr`, `rtl`), `locale`, `labels`, `formatTime`, `className`, `style`, `label`.
+
+### Right-to-left and other languages
+
+Notify follows the page direction: under `<html dir="rtl">` the card mirrors, the close button
+moves to the top-right corner and progress fills from the right. Pass `dir` to override it.
+`locale` writes relative times and counts with `Intl`, and `labels` replaces any built-in string.
+`{count}` and `{app}` are filled in, and the labels are plain strings, so they work from a Server
+Component layout.
+
+```tsx
+<html lang="ar" dir="rtl">
+  <body>
+    {children}
+    <Notifier
+      locale="ar"
+      labels={{
+        timeSensitive: "حساس للوقت",
+        showLess: "عرض أقل",
+        clearAll: "مسح الكل",
+        clearCount: "مسح الكل ({count})",
+        replyPlaceholder: "اكتب ردًا…",
+        // …every key is optional
+      }}
+    />
+  </body>
+</html>
+```
+
+User text keeps the page direction. Wrap a fragment that starts in the other script, like a
+filename, in `<bdi>` or in Unicode isolates (`\u2068…\u2069`) so it keeps its own order.
 
 ### Theming
 
@@ -109,8 +139,10 @@ Every visual token is a CSS custom property on `.ntf-root`: `--ntf-bg`, `--ntf-f
 - **Click**: runs `onClick`, expands, or fans out a stack.
 - **Swipe toward the edge**: dismisses to Notification Center.
 - **Right-click**: actions, Mute for 1 Hour, Mute for Today, Clear.
-- **Keyboard**: Enter activates, Space expands, Delete closes, Esc collapses.
-- Respects Reduce Motion and announces through a polite live region.
+- **Keyboard**: Enter activates, Space expands, Delete closes, Esc collapses. Focus pauses the
+  timer, and closing a focused banner moves focus to the next one.
+- **Touch**: a finger held on a banner, mid-swipe or not, pauses the timer.
+- Screen readers hear each banner once, in full; time-sensitive ones interrupt. Respects Reduce Motion.
 
 ## License
 

package/dist/index.d.ts

@@ -7,6 +7,38 @@ type NotifyMaterial = "glass" | "regular" | "thick" | "solid";
 /** Mirrors System Settings: banners leave on their own, alerts wait for you. */
 type NotifyAlertStyle = "banner" | "alert";
 type NotifyCloseButton = "hover" | "always" | "never";
+type NotifyDirection = "ltr" | "rtl";
+/**
+ * Every string Notify writes itself. `{count}` and `{app}` are filled in.
+ * Plain strings, so they can be passed from a Server Component layout.
+ */
+interface NotifyLabels {
+  /** Eyebrow on time-sensitive notifications, also read out first. */
+  timeSensitive: string;
+  close: string;
+  /** Close button on a collapsed stack. */
+  clearStack: string;
+  showMore: string;
+  showLess: string;
+  /** Clear button in an expanded stack's header. */
+  clearApp: string;
+  /** Default placeholder for inline replies. */
+  replyPlaceholder: string;
+  send: string;
+  notificationCenter: string;
+  history: string;
+  focus: string;
+  focusOn: string;
+  focusOff: string;
+  clearAll: string;
+  empty: string;
+  muteHour: string;
+  muteToday: string;
+  unmute: string;
+  clear: string;
+  /** Context menu item for a collapsed stack. */
+  clearCount: string;
+}
 type NotifyDismissReason = "timeout" | "swipe" | "dismiss" | "overflow" | "close" | "click" | "action" | "reply" | "clear";
 interface NotifyApp {
   /** Groups notifications into stacks. Defaults to a slug of `name`. */
@@ -100,6 +132,12 @@ interface NotifierProps {
   accent?: string;
   /** Notifications kept in Notification Center. */
   history?: number;
+  /** Writing direction. Inherited from the page (`<html dir>`) when not set. */
+  dir?: NotifyDirection;
+  /** BCP 47 locale for relative times and counts, like "ar" or "fr". Also sets `lang`. */
+  locale?: string;
+  /** Replace any of the built-in strings. */
+  labels?: Partial<NotifyLabels>;
   formatTime?: (time: number, now: number) => string;
   className?: string;
   style?: CSSProperties;
@@ -115,7 +153,7 @@ interface NotifyGroup {
  * and the context menu into a portal on document.body.
  */
 export declare function Notifier(props: NotifierProps): import("react").ReactPortal | null;
-interface NotificationPreviewProps extends Pick<NotifierProps, "theme" | "material" | "radius" | "width" | "accent" | "timestamps" | "closeButton" | "expandable" | "formatTime"> {
+interface NotificationPreviewProps extends Pick<NotifierProps, "theme" | "material" | "radius" | "width" | "accent" | "timestamps" | "closeButton" | "expandable" | "dir" | "locale" | "labels" | "formatTime"> {
   notification: NotifyOptions;
   /** Render as the front of a collapsed stack of this many. */
   stackCount?: number;
@@ -178,4 +216,4 @@ export declare function useNow(): number;
 export declare function formatTime(time: number, current: number): string;
 /** A short two-note glass chime, synthesized so there is no audio file to ship. */
 export declare function playChime(volume?: number): void;
-export type { NotificationPreviewProps, NotifierProps, NotifyAction, NotifyActionContext, NotifyAlertStyle, NotifyApp, NotifyAvatar, NotifyCloseButton, NotifyDismissReason, NotifyMaterial, NotifyOptions, NotifyPosition, NotifyRecord, NotifyState, NotifyTheme };
+export type { NotificationPreviewProps, NotifierProps, NotifyAction, NotifyActionContext, NotifyAlertStyle, NotifyApp, NotifyAvatar, NotifyCloseButton, NotifyDirection, NotifyDismissReason, NotifyLabels, NotifyMaterial, NotifyOptions, NotifyPosition, NotifyRecord, NotifyState, NotifyTheme };

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{createContext as e,useCallback as t,useContext as n,useEffect as r,useLayoutEffect as i,useMemo as a,useRef as o,useState as s,useSyncExternalStore as c}from"react";import{createPortal as l,flushSync as u}from"react-dom";import{AnimatePresence as d,LayoutGroup as f,MotionConfig as p,motion as m,useDragControls as h,useMotionValue as g}from"motion/react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";const b={banners:[],center:[],centerOpen:!1,focus:!1,muted:{}};let x=b;const S=/* @__PURE__ */ new Set,C={history:50};function w(e){x=e,S.forEach(e=>e())}const T={subscribe(e){return S.add(e),()=>{S.delete(e)}},getSnapshot:()=>x,getServerSnapshot:()=>b,connect(e){return Object.assign(C,e),()=>{C.onAlert=void 0}}};let E=0;const D=()=>`ntf-${Date.now().toString(36)}-${(E++).toString(36)}`,O=e=>e.toLowerCase().trim().replace(/[^a-z0-9]+/g,`-`)||`app`;function k(e){return e?typeof e==`string`?{id:O(e),name:e}:{...e,id:e.id??O(e.name)}:{id:`notify`,name:`Notification`}}const A=e=>x.banners.find(t=>t.id===e)??x.center.find(t=>t.id===e);function j(e){return!!e.silent||x.centerOpen||x.focus&&!e.timeSensitive||(x.muted[e.app.id]??0)>Date.now()}function M(e,t){if(!t)return e.map(e=>({key:e.id,app:e.app,items:[e]}));let n=/* @__PURE__ */ new Map;for(let t of e){let e=n.get(t.app.id);e||(e={key:`app:${t.app.id}`,app:t.app,items:[]},n.set(t.app.id,e)),e.items.push(t)}return[...n.values()]}const N=e=>typeof e==`string`?{title:e}:e;function P(e){let t=N(e);if(t.id&&A(t.id))return F(t.id,{...t,realert:!0}),t.id;let{id:n=D(),app:r,...i}=t,a=Date.now(),o={...i,id:n,app:k(r),createdAt:a,alertAt:a},s=j(o);return w({...x,banners:s?x.banners:[o,...x.banners],center:[o,...x.center].slice(0,C.history)}),s||C.onAlert?.(o),n}function F(e,t){let n=A(e);if(!n)return;let{realert:r,app:i,...a}=t,o={...n,...a,...i===void 0?null:{app:k(i)},...r?{alertAt:Date.now()}:null},s=t=>t.map(t=>t.id===e?o:t),c=x.banners.some(t=>t.id===e),l=!!r&&!j(o),u=s(x.banners);l&&(u=[o,...u.filter(t=>t.id!==e)]);let d=x.center.some(t=>t.id===e);w({...x,banners:c||l?u:x.banners,center:d?s(x.center):[o,...x.center].slice(0,C.history)}),l&&C.onAlert?.(o)}const I=[`timeout`,`swipe`,`dismiss`,`overflow`];function L(e,t){let n=e===null?null:new Set(Array.isArray(e)?e:[e]),r=e=>n===null||n.has(e.id),i=I.includes(t),a=/* @__PURE__ */ new Map;x.banners.filter(r).forEach(e=>a.set(e.id,e)),i||x.center.filter(r).forEach(e=>a.set(e.id,e)),a.size&&(w({...x,banners:x.banners.filter(e=>!r(e)),center:i?x.center:x.center.filter(e=>!r(e))}),a.forEach(e=>e.onDismiss?.(t)))}function R(e){if(e===x.centerOpen)return;let t=e?x.banners:[];w({...x,centerOpen:e,banners:e?[]:x.banners}),t.forEach(e=>e.onDismiss?.(`dismiss`))}function z(e,t,n={}){let r=P({...n,...N(t.loading),duration:1/0}),i=e=>F(r,{progress:null,duration:void 0,...n,...N(e),realert:!0});return e.then(e=>i(typeof t.success==`function`?t.success(e):t.success),e=>i(typeof t.error==`function`?t.error(e):t.error)),r}const ee=()=>{let e=/* @__PURE__ */ new Date;return e.setHours(23,59,59,999),e.getTime()-Date.now()},B=Object.assign(P,{update:F,dismiss:e=>L(e??null,`dismiss`),remove:e=>L(e,`clear`),clear:()=>L(null,`clear`),promise:z,center:{open:()=>R(!0),close:()=>R(!1),toggle:()=>R(!x.centerOpen),clear:e=>L(e?x.center.filter(t=>t.app.id===e).map(e=>e.id):null,`clear`)},setFocus:e=>w({...x,focus:e}),toggleFocus:()=>w({...x,focus:!x.focus}),mute:(e,t=36e5)=>w({...x,muted:{...x.muted,[e]:Date.now()+(t===`today`?ee():t)}}),unmute:e=>{let t={...x.muted};delete t[e],w({...x,muted:t})},isMuted:e=>(x.muted[e]??0)>Date.now()});function V(){return c(T.subscribe,T.getSnapshot,T.getServerSnapshot)}const te=()=>()=>{};function ne(){return c(te,()=>!0,()=>!1)}function re(e){return document.addEventListener(`visibilitychange`,e),()=>document.removeEventListener(`visibilitychange`,e)}function ie(){return c(re,()=>document.hidden,()=>!1)}let H=0,U;const W=/* @__PURE__ */ new Set;function ae(e){return U||=(H=Date.now(),setInterval(()=>{H=Date.now(),W.forEach(e=>e())},15e3)),W.add(e),()=>{W.delete(e),W.size||(clearInterval(U),U=void 0)}}function G(){return c(ae,()=>H,()=>0)}function oe(e,t){let n=t-e;if(!t||n<6e4)return`now`;let r=Math.floor(n/6e4);if(r<60)return`${r}m ago`;let i=Math.floor(r/60);if(i<24)return`${i}h ago`;let a=new Date(e),o=new Date(t);return o.setDate(o.getDate()-1),a.toDateString()===o.toDateString()?`Yesterday`:a.toLocaleDateString(void 0,{month:`short`,day:`numeric`})}function se(e,t,n,i){let a=o(i),s=o({key:e,duration:t,remaining:t});r(()=>{a.current=i}),r(()=>{let r=s.current;if((r.key!==e||r.duration!==t)&&(r.key=e,r.duration=t,r.remaining=t),n||!Number.isFinite(r.remaining))return;let i=Date.now(),o=setTimeout(()=>a.current(),Math.max(0,r.remaining));return()=>{clearTimeout(o),r.remaining-=Date.now()-i}},[e,t,n])}function K(e){let t=e.material??`glass`,n=typeof e.offset==`number`?{x:e.offset,y:e.offset}:e.offset??{};return{position:e.position??`top-right`,theme:e.theme??`system`,material:t,alertStyle:e.alertStyle??`banner`,duration:e.duration??6e3,max:Math.max(1,e.max??4),stack:e.stack??!0,swipeToDismiss:e.swipeToDismiss??!0,pauseOnHover:e.pauseOnHover??!0,expandable:e.expandable??!0,timestamps:e.timestamps??!0,closeButton:e.closeButton??`hover`,contextMenu:e.contextMenu??!0,sound:e.sound??!1,volume:e.volume??.6,width:e.width??356,radius:e.radius??(t===`glass`?24:16),gap:e.gap??10,offsetX:n.x??16,offsetY:n.y??16,accent:e.accent,history:e.history??50,formatTime:e.formatTime??oe}}function ce(e,t){return{"data-ntf-theme":e.theme,"data-ntf-material":e.material,"data-ntf-close":e.closeButton,style:{"--ntf-width":`${e.width}px`,"--ntf-radius":`${e.radius}px`,"--ntf-gap":`${e.gap}px`,"--ntf-ox":`${e.offsetX}px`,"--ntf-oy":`${e.offsetY}px`,...e.accent?{"--ntf-accent":e.accent}:null,...t}}}function le(e,t){return e.duration===void 0?(e.style??t.alertStyle)===`alert`?1/0:t.duration:e.duration}function q(e){return e.endsWith(`right`)?1:e.endsWith(`left`)?-1:0}const J={type:`spring`,bounce:.16,duration:.55},Y={duration:.32,ease:[.32,.72,0,1]};function ue(e){let t=q(e.position);return t===0?{y:e.position.startsWith(`top`)?-28:28,opacity:0,scale:.96}:{x:t*(e.width+e.offsetX+40)}}function de(e,t){let n=q(e.position),r=t||n;return r===0?{opacity:0,scale:.96,y:e.position.startsWith(`top`)?-12:12,transition:Y}:{x:r*(e.width+e.offsetX+80),opacity:n===0?0:1,transition:t?{type:`spring`,bounce:0,duration:.38}:Y}}const fe=/* @__PURE__ */ new Set,X=e({cfg:K({}),menuIds:fe}),Z=()=>n(X);function pe({size:e=8}){return/* @__PURE__ */ v(`svg`,{width:e,height:e,viewBox:`0 0 8 8`,"aria-hidden":`true`,children:/* @__PURE__ */ v(`path`,{d:`M1 1l6 6M7 1L1 7`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})})}function me(){return/* @__PURE__ */ v(`svg`,{width:`9`,height:`9`,viewBox:`0 0 10 10`,"aria-hidden":`true`,children:/* @__PURE__ */ v(`path`,{d:`M2 3.75l3 3 3-3`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.6`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function he(){return/* @__PURE__ */ v(`svg`,{width:`12`,height:`12`,viewBox:`0 0 12 12`,"aria-hidden":`true`,children:/* @__PURE__ */ v(`path`,{d:`M6 10V2.4M2.6 5.6L6 2.2l3.4 3.4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.7`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function ge(){return/* @__PURE__ */ v(`svg`,{width:`14`,height:`14`,viewBox:`0 0 14 14`,"aria-hidden":`true`,children:/* @__PURE__ */ v(`path`,{d:`M11.9 8.9A5.2 5.2 0 0 1 5.1 2.1a5.4 5.4 0 1 0 6.8 6.8z`,fill:`currentColor`})})}const _e=[[`#5ac8fa`,`#007aff`],[`#ffd60a`,`#ff9f0a`],[`#ff6b6b`,`#ff2d55`],[`#64d2ff`,`#5e5ce6`],[`#30d158`,`#00a86b`],[`#bf5af2`,`#8944ab`]];function ve(e){let t=0;for(let n=0;n<e.length;n++)t=t*31+e.charCodeAt(n)|0;return Math.abs(t)}function ye({app:e}){let{icon:t,name:n}=e;if(typeof t==`string`)return/* @__PURE__ */ v(`img`,{className:`ntf-appicon`,src:t,alt:``,draggable:!1});if(t)return/* @__PURE__ */ v(`span`,{className:`ntf-appicon`,children:t});let[r,i]=_e[ve(n)%_e.length];return/* @__PURE__ */ v(`span`,{className:`ntf-appicon ntf-monogram`,style:{background:`linear-gradient(180deg, ${r}, ${i})`},children:n.trim().charAt(0).toUpperCase()})}function be({avatar:e}){return typeof e==`string`?/* @__PURE__ */ v(`img`,{className:`ntf-avatar`,src:e,alt:``,draggable:!1}):/* @__PURE__ */ v(`span`,{className:`ntf-avatar`,style:e.background?{background:e.background}:void 0,children:e.initials.slice(0,2).toUpperCase()})}function xe({record:e}){return e.avatar?/* @__PURE__ */ y(_,{children:[/* @__PURE__ */ v(be,{avatar:e.avatar}),/* @__PURE__ */ v(`span`,{className:`ntf-badge`,children:/* @__PURE__ */ v(ye,{app:e.app})})]}):/* @__PURE__ */ v(ye,{app:e.app})}const Se=e=>typeof e==`string`||typeof e==`number`?String(e):``;function Ce({record:e,stackCount:t=1,menuRecords:n,dragging:i,defaultExpanded:a=!1,onClose:c,onExpandStack:l,onDone:u,onHold:f}){let{cfg:p,openMenu:h,menuIds:g}=Z(),_=G(),[b,x]=s(a),[S,C]=s(null),[w,T]=s(``),E=o(null),D=t>1,O=e.actions??[],k=typeof e.body==`string`&&e.body.length>90,A=p.expandable&&!D&&(O.length>0||!!e.image||k),j=A&&b,M=j?S:null,N=j||g.has(e.id);r(()=>{if(f)return f(e.id,N),()=>f(e.id,!1)},[f,e.id,N]),r(()=>{M&&E.current?.focus({preventScroll:!0})},[M]);let P={id:e.id,dismiss:()=>u?.(`action`)},F=()=>x(e=>!e),I=()=>{if(!i?.current){if(D)return l?.();e.onClick?(e.onClick(P),u?.(`click`)):A&&F()}},L=e=>{if(e.reply)return C(e);e.onSelect?.(P),e.keepOpen||u?.(`action`)},R=()=>{let e=w.trim();e&&M&&(M.onReply?.(e,P),T(``),C(null),u?.(`reply`))},z=e=>{e.target===e.currentTarget&&(e.key===`Enter`?(e.preventDefault(),I()):e.key===` `&&A?(e.preventDefault(),F()):e.key===`Escape`&&j?(e.preventDefault(),x(!1)):(e.key===`Delete`||e.key===`Backspace`)&&c&&(e.preventDefault(),c()))},ee=t=>{h&&p.contextMenu&&(t.preventDefault(),h({event:t,record:e,records:n??[e]}))},B=e=>t=>{t.stopPropagation(),e()},V=e.time===void 0?e.createdAt:+e.time,te=typeof M?.reply==`object`?M.reply.placeholder:void 0,ne=j&&(!!e.image||O.length>0);return/* @__PURE__ */ y(`article`,{className:`ntf-card`,"data-expanded":j||void 0,"data-stacked":D||void 0,"data-expandable":A||void 0,tabIndex:0,role:`group`,"aria-roledescription":`notification`,"aria-label":[e.app.name,Se(e.title),Se(e.body)].filter(Boolean).join(`. `),onClick:I,onKeyDown:z,onContextMenu:ee,children:[p.closeButton!==`never`&&c&&/* @__PURE__ */ v(`button`,{type:`button`,className:`ntf-close`,"aria-label":D?`Clear ${t} notifications`:`Close`,onClick:B(c),children:/* @__PURE__ */ v(pe,{})}),/* @__PURE__ */ y(`div`,{className:`ntf-main`,children:[/* @__PURE__ */ v(`div`,{className:`ntf-media`,children:/* @__PURE__ */ v(xe,{record:e})}),/* @__PURE__ */ y(`div`,{className:`ntf-text`,children:[e.timeSensitive&&/* @__PURE__ */ v(`div`,{className:`ntf-eyebrow`,children:`Time Sensitive`}),/* @__PURE__ */ y(`div`,{className:`ntf-head`,children:[/* @__PURE__ */ v(`div`,{className:`ntf-title`,children:e.title}),(p.timestamps||A)&&/* @__PURE__ */ y(`div`,{className:`ntf-meta`,children:[p.timestamps&&/* @__PURE__ */ v(`span`,{className:`ntf-time`,children:p.formatTime(V,_)}),A&&/* @__PURE__ */ v(`button`,{type:`button`,className:`ntf-chevron`,"aria-label":j?`Show less`:`Show more`,"aria-expanded":j,onClick:B(F),children:/* @__PURE__ */ v(me,{})})]})]}),e.subtitle&&/* @__PURE__ */ v(`div`,{className:`ntf-subtitle`,children:e.subtitle}),e.body&&/* @__PURE__ */ v(`div`,{className:`ntf-body`,children:e.body}),typeof e.progress==`number`&&/* @__PURE__ */ v(we,{value:e.progress})]}),e.image&&!j&&/* @__PURE__ */ v(`img`,{className:`ntf-thumb`,src:e.image,alt:``,draggable:!1})]}),/* @__PURE__ */ v(d,{initial:!1,children:ne&&/* @__PURE__ */ v(m.div,{className:`ntf-extra`,initial:{height:0,opacity:0},animate:{height:`auto`,opacity:1},exit:{height:0,opacity:0},transition:Y,children:/* @__PURE__ */ y(`div`,{className:`ntf-extra-inner`,children:[e.image&&/* @__PURE__ */ v(`img`,{className:`ntf-hero`,src:e.image,alt:``,draggable:!1}),M?/* @__PURE__ */ y(`form`,{className:`ntf-reply`,"data-ntf-nodrag":!0,onClick:e=>e.stopPropagation(),onSubmit:e=>{e.preventDefault(),R()},children:[/* @__PURE__ */ v(`input`,{ref:E,value:w,placeholder:te??`Reply…`,"aria-label":M.label,onChange:e=>T(e.target.value),onKeyDown:e=>{e.key===`Escape`&&(e.stopPropagation(),C(null))}}),/* @__PURE__ */ v(`button`,{type:`submit`,className:`ntf-send`,"aria-label":`Send`,disabled:!w.trim(),children:/* @__PURE__ */ v(he,{})})]}):O.length>0&&/* @__PURE__ */ v(`div`,{className:`ntf-actions`,"data-count":Math.min(O.length,3),children:O.map(e=>/* @__PURE__ */ v(`button`,{type:`button`,className:`ntf-action`,"data-destructive":e.destructive||void 0,onClick:B(()=>L(e)),children:e.label},e.label))})]})},`extra`)})]})}function we({value:e}){let t=Math.max(0,Math.min(1,e));return/* @__PURE__ */ v(`div`,{className:`ntf-progress`,role:`progressbar`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(t*100),children:/* @__PURE__ */ v(`span`,{style:{transform:`scaleX(${t})`}})})}function Te(e,t,n){let r=h(),i=g(0),a=o(!1);return e?{dragging:a,props:{style:{x:i},drag:`x`,dragControls:r,dragListener:!1,dragConstraints:{left:0,right:0},dragElastic:t===1?{left:.06,right:.92}:t===-1?{left:.92,right:.06}:.92,dragTransition:{bounceStiffness:520,bounceDamping:38},onPointerDown(e){e.button!==0||e.target.closest(`button, input, textarea, select, a, [data-ntf-nodrag]`)||r.start(e)},onDragStart(){a.current=!0},onDragEnd(e,r){setTimeout(()=>{a.current=!1},0);let i=t||Math.sign(r.offset.x||r.velocity.x);i&&(r.offset.x*i>80||r.velocity.x*i>500)&&n(i)}}}:{dragging:a,props:{style:{x:i}}}}function Ee({ref:e,group:n,variant:r}){let{cfg:i}=Z(),{items:a,app:c}=n,l=a[0],f=a.map(e=>e.id),[p,h]=s(!1),[g,_]=s(!1),[b,x]=s(!1),[S,C]=s(0),[w,T]=s(0),E=o(/* @__PURE__ */ new Set),D=ie(),O=a.length>1,k=O&&p,A=O&&!k,j=q(i.position),M=r===`banner`?`swipe`:`close`,N=t((e,t)=>{t?E.current.add(e):E.current.delete(e),C(E.current.size)},[]),P=r!==`banner`||D||k||b||S>0||i.pauseOnHover&&g;se(`${l.id}:${l.alertAt}`,r===`banner`?le(l,i):1/0,P,()=>L(a.filter(e=>Number.isFinite(le(e,i))).map(e=>e.id),`timeout`));let F=Te(i.swipeToDismiss&&!k,j,e=>{u(()=>T(e)),L(f,M)});return/* @__PURE__ */ y(m.li,{ref:e,layout:`position`,className:`ntf-group`,"data-variant":r,"data-collapsed":A||void 0,"data-depth":A?Math.min(a.length-1,2):void 0,initial:ue(i),animate:{x:0,y:0,opacity:1,scale:1},exit:de(i,w),transition:J,onPointerEnter:e=>e.pointerType===`mouse`&&_(!0),onPointerLeave:()=>_(!1),onFocus:e=>{e.target.matches(`:focus-visible`)&&x(!0)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||x(!1)},...F.props,children:[/* @__PURE__ */ v(d,{initial:!1,mode:`popLayout`,children:k&&/* @__PURE__ */ y(m.div,{className:`ntf-group-header`,initial:{opacity:0,y:8},animate:{opacity:1,y:0},exit:{opacity:0,y:8},transition:Y,children:[/* @__PURE__ */ v(`span`,{className:`ntf-group-title`,children:c.name}),/* @__PURE__ */ y(`span`,{className:`ntf-group-buttons`,children:[/* @__PURE__ */ v(`button`,{type:`button`,className:`ntf-pill`,onClick:()=>h(!1),children:`Show Less`}),/* @__PURE__ */ v(`button`,{type:`button`,className:`ntf-pill ntf-pill-icon`,"aria-label":`Clear all ${c.name} notifications`,onClick:()=>L(f,`clear`),children:/* @__PURE__ */ v(pe,{})})]})]},`header`)}),/* @__PURE__ */ y(`div`,{className:`ntf-stack`,children:[/* @__PURE__ */ v(d,{initial:!1,mode:`popLayout`,children:a.map((e,t)=>(t===0||k)&&/* @__PURE__ */ v(De,{record:e,index:t,items:a,collapsed:A,expanded:k,swipeReason:M,groupDragging:F.dragging,onExpandStack:()=>h(!0),onHold:N},e.id))}),/* @__PURE__ */ v(d,{initial:!1,children:A&&/* @__PURE__ */ y(m.div,{className:`ntf-peeks`,"aria-hidden":`true`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:Y,children:[/* @__PURE__ */ v(`span`,{className:`ntf-peek`}),a.length>2&&/* @__PURE__ */ v(`span`,{className:`ntf-peek`,"data-depth":`2`})]},`peeks`)})]})]})}function De({ref:e,record:t,index:n,items:r,collapsed:i,expanded:a,swipeReason:o,groupDragging:c,onExpandStack:l,onHold:d}){let{cfg:f}=Z(),[p,h]=s(0),g=Te(f.swipeToDismiss&&a,q(f.position),e=>{u(()=>h(e)),L(t.id,o)});return/* @__PURE__ */ v(m.div,{ref:e,layout:`position`,className:`ntf-slot`,initial:n===0?ue(f):{opacity:0,y:-18,scale:.95},animate:{x:0,y:0,opacity:1,scale:1},exit:p?de(f,p):{opacity:0,y:-14,scale:.95,transition:Y},transition:J,...g.props,children:/* @__PURE__ */ v(Ce,{record:t,stackCount:i?r.length:1,menuRecords:i?r:[t],dragging:a?g.dragging:c,onClose:()=>L(i?r.map(e=>e.id):t.id,`close`),onExpandStack:l,onDone:e=>L(t.id,e),onHold:d})})}function Oe({records:e,focus:t,side:n}){let{cfg:r}=Z(),i=a(()=>M(e,!0),[e]),o=(n===`left`?-1:1)*(r.width+r.offsetX*2+40);return/* @__PURE__ */ y(_,{children:[/* @__PURE__ */ v(m.div,{className:`ntf-scrim`,"data-side":n,onClick:()=>B.center.close(),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:Y}),/* @__PURE__ */ y(m.aside,{className:`ntf-center`,"data-side":n,role:`dialog`,"aria-label":`Notification Center`,initial:{x:o},animate:{x:0},exit:{x:o,transition:Y},transition:J,children:[/* @__PURE__ */ y(`div`,{className:`ntf-center-bar`,children:[/* @__PURE__ */ y(`button`,{type:`button`,className:`ntf-focus`,"aria-pressed":t,onClick:()=>B.toggleFocus(),children:[/* @__PURE__ */ v(`span`,{className:`ntf-focus-icon`,children:/* @__PURE__ */ v(ge,{})}),/* @__PURE__ */ y(`span`,{className:`ntf-focus-text`,children:[/* @__PURE__ */ v(`strong`,{children:`Focus`}),/* @__PURE__ */ v(`span`,{children:t?`Do Not Disturb`:`Off`})]})]}),e.length>0&&/* @__PURE__ */ v(`button`,{type:`button`,className:`ntf-pill`,onClick:()=>B.center.clear(),children:`Clear All`})]}),/* @__PURE__ */ v(f,{id:`ntf-center`,children:/* @__PURE__ */ v(`ol`,{className:`ntf-center-list`,"aria-label":`Notification history`,children:/* @__PURE__ */ v(d,{mode:`popLayout`,initial:!1,children:i.map(e=>/* @__PURE__ */ v(Ee,{group:e,variant:`center`},e.key))})})}),/* @__PURE__ */ v(d,{initial:!1,children:e.length===0&&/* @__PURE__ */ v(m.p,{className:`ntf-empty`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:Y,children:`No Notifications`},`empty`)})]})]})}function ke({x:e,y:t,items:n,onClose:a}){let s=o(null);return i(()=>{let n=s.current;if(!n)return;let{width:r,height:i}=n.getBoundingClientRect(),a=Math.max(8,Math.min(e,window.innerWidth-r-8)),o=t+i>window.innerHeight-8?Math.max(8,t-i):t;n.style.left=`${a}px`,n.style.top=`${o}px`,n.querySelector(`button`)?.focus({preventScroll:!0})},[e,t]),r(()=>{let e=e=>{s.current?.contains(e.target)||a()},t=e=>{e.key===`Escape`&&a()};return window.addEventListener(`pointerdown`,e,!0),window.addEventListener(`keydown`,t),window.addEventListener(`resize`,a),window.addEventListener(`blur`,a),window.addEventListener(`scroll`,a,!0),()=>{window.removeEventListener(`pointerdown`,e,!0),window.removeEventListener(`keydown`,t),window.removeEventListener(`resize`,a),window.removeEventListener(`blur`,a),window.removeEventListener(`scroll`,a,!0)}},[a]),/* @__PURE__ */ v(m.div,{ref:s,className:`ntf-menu`,role:`menu`,initial:{opacity:0,scale:.98},animate:{opacity:1,scale:1,transition:{duration:.12}},exit:{opacity:0,transition:{duration:.18}},onKeyDown:e=>{if(e.key!==`ArrowDown`&&e.key!==`ArrowUp`)return;e.preventDefault();let t=[...s.current?.querySelectorAll(`button`)??[]];t[(t.indexOf(document.activeElement)+(e.key===`ArrowDown`?1:-1)+t.length)%t.length]?.focus()},onContextMenu:e=>e.preventDefault(),children:n.map((e,t)=>e===`separator`?/* @__PURE__ */ v(`div`,{className:`ntf-menu-sep`,role:`separator`},`sep-${t}`):/* @__PURE__ */ v(`button`,{type:`button`,role:`menuitem`,className:`ntf-menu-item`,"data-destructive":e.destructive||void 0,onClick:()=>{a(),e.onSelect()},children:e.label},e.label))})}let Q=null;function $(e=.6){if(typeof window<`u`)try{let t=window.AudioContext??window.webkitAudioContext;if(!t)return;Q??=new t,Q.state===`suspended`&&Q.resume();let n=Q,r=n.currentTime+.01,i=n.createGain();i.gain.value=Math.max(0,Math.min(1,e))*.16,i.connect(n.destination);for(let[e,t]of[[1567.98,0],[2349.32,.075]]){let a=n.createOscillator(),o=n.createGain();a.type=`sine`,a.frequency.value=e,o.gain.setValueAtTime(0,r+t),o.gain.linearRampToValueAtTime(1,r+t+.006),o.gain.exponentialRampToValueAtTime(1e-4,r+t+.85),a.connect(o).connect(i),a.start(r+t),a.stop(r+t+.9)}}catch{}}function Ae({record:e,records:t}){let{app:n}=e,r=[];if(t.length===1){let t={id:e.id,dismiss:()=>L(e.id,`action`)};for(let n of e.actions??[])n.reply||r.push({label:n.label,destructive:n.destructive,onSelect:()=>{n.onSelect?.(t),n.keepOpen||L(e.id,`action`)}});r.length&&r.push(`separator`)}return B.isMuted(n.id)?r.push({label:`Unmute ${n.name}`,onSelect:()=>B.unmute(n.id)}):r.push({label:`Mute for 1 Hour`,onSelect:()=>B.mute(n.id,36e5)},{label:`Mute for Today`,onSelect:()=>B.mute(n.id,`today`)}),r.push(`separator`,{label:t.length>1?`Clear All (${t.length})`:`Clear`,onSelect:()=>L(t.map(e=>e.id),`clear`)}),r}function je(e){let n=K(e),i=V(),o=ne(),[c,u]=s(null);r(()=>T.connect({history:n.history,onAlert:e=>{(e.sound??n.sound)&&$(n.volume)}}),[n.history,n.sound,n.volume]);let m=a(()=>M(i.banners,n.stack),[i.banners,n.stack]),h=m.slice(0,n.max),g=m.slice(n.max).flatMap(e=>e.items.map(e=>e.id)).join(` `);r(()=>{g&&L(g.split(` `),`overflow`)},[g]),r(()=>{if(!i.centerOpen)return;let e=e=>{e.key===`Escape`&&B.center.close()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[i.centerOpen]);let _=t(({event:e,record:t,records:n})=>{u({x:e.clientX,y:e.clientY,record:t,records:n})},[]),b=t(()=>u(null),[]),x=a(()=>new Set(c?.records.map(e=>e.id)),[c]);if(!o)return null;let[S,C]=n.position.split(`-`);return l(/* @__PURE__ */ v(X,{value:{cfg:n,openMenu:_,menuIds:x},children:/* @__PURE__ */ v(p,{reducedMotion:`user`,children:/* @__PURE__ */ y(`div`,{className:e.className?`ntf-root ${e.className}`:`ntf-root`,...ce(n,e.style),children:[/* @__PURE__ */ v(f,{id:`ntf-banners`,children:/* @__PURE__ */ v(`ol`,{className:`ntf-viewport`,"data-x":C,"data-y":S,"aria-label":e.label??`Notifications`,"aria-live":`polite`,children:/* @__PURE__ */ v(d,{mode:`popLayout`,initial:!1,children:h.map(e=>/* @__PURE__ */ v(Ee,{group:e,variant:`banner`},e.key))})})}),/* @__PURE__ */ v(d,{children:i.centerOpen&&/* @__PURE__ */ v(Oe,{records:i.center,focus:i.focus,side:C===`left`?`left`:`right`},`center`)}),/* @__PURE__ */ v(d,{children:c&&/* @__PURE__ */ v(ke,{x:c.x,y:c.y,items:Ae(c),onClose:b},`${c.x}:${c.y}`)})]})})}),document.body)}const Me=/* @__PURE__ */ new Set;function Ne({notification:e,stackCount:t=1,defaultExpanded:n,onClose:r,className:i,style:o,...s}){let c=K({...s,contextMenu:!1}),l=G(),u=a(()=>{let{id:t=`preview`,app:n,...r}=e;return{...r,id:t,app:k(n),createdAt:l,alertAt:l}},[e,l]),d=Math.min(t-1,2);return/* @__PURE__ */ v(X,{value:{cfg:c,menuIds:Me},children:/* @__PURE__ */ v(`div`,{className:i?`ntf-root ntf-inline ${i}`:`ntf-root ntf-inline`,...ce(c,o),children:/* @__PURE__ */ v(`div`,{className:`ntf-group`,"data-variant":`preview`,"data-collapsed":d>0||void 0,"data-depth":d||void 0,children:/* @__PURE__ */ y(`div`,{className:`ntf-stack`,children:[/* @__PURE__ */ v(Ce,{record:u,stackCount:t,defaultExpanded:n,onClose:r}),d>0&&/* @__PURE__ */ y(`div`,{className:`ntf-peeks`,"aria-hidden":`true`,children:[/* @__PURE__ */ v(`span`,{className:`ntf-peek`}),d>1&&/* @__PURE__ */ v(`span`,{className:`ntf-peek`,"data-depth":`2`})]})]})})})})}export{Ne as NotificationPreview,je as Notifier,oe as formatTime,M as groupRecords,B as notify,$ as playChime,V as useNotifyState,G as useNow};
+import{Fragment as e,createContext as t,useCallback as n,useContext as r,useEffect as i,useLayoutEffect as a,useMemo as o,useRef as s,useState as c,useSyncExternalStore as l}from"react";import{createPortal as u,flushSync as d}from"react-dom";import{AnimatePresence as f,LayoutGroup as p,MotionConfig as m,motion as h,useDragControls as g,useIsPresent as _,useMotionValue as v}from"motion/react";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";let S=0;function C(){let[e,t]=c([]);return[e,n(e=>{let n={key:S++,record:e};t(e=>[...e,n]),setTimeout(()=>t(e=>e.filter(e=>e!==n)),7e3)},[])]}function w({items:e,timeSensitive:t}){return/* @__PURE__ */ x(y,{children:[/* @__PURE__ */ b(`div`,{className:`ntf-sr-only`,"aria-live":`polite`,children:e.filter(e=>!e.record.timeSensitive).map(e=>T(e,t))}),/* @__PURE__ */ b(`div`,{className:`ntf-sr-only`,"aria-live":`assertive`,children:e.filter(e=>e.record.timeSensitive).map(e=>T(e,t))})]})}function T({key:t,record:n},r){let i=[n.timeSensitive&&r,n.app.name,n.title,n.subtitle,n.body].filter(e=>e!=null&&e!==!1&&e!==``);return/* @__PURE__ */ b(`div`,{children:i.map((t,n)=>/* @__PURE__ */ x(e,{children:[n>0&&`. `,t]},n))},t)}const E={banners:[],center:[],centerOpen:!1,focus:!1,muted:{}};let D=E;const O=/* @__PURE__ */ new Set,k={history:50};function A(e){D=e,O.forEach(e=>e())}const j={subscribe(e){return O.add(e),()=>{O.delete(e)}},getSnapshot:()=>D,getServerSnapshot:()=>E,connect(e){return Object.assign(k,e),()=>{k.onAlert=void 0}}};let M=0;const N=()=>`ntf-${Date.now().toString(36)}-${(M++).toString(36)}`,P=e=>e.toLowerCase().trim().replace(/[^a-z0-9]+/g,`-`)||`app`;function F(e){return e?typeof e==`string`?{id:P(e),name:e}:{...e,id:e.id??P(e.name)}:{id:`notify`,name:`Notification`}}const I=e=>D.banners.find(t=>t.id===e)??D.center.find(t=>t.id===e);function L(e){return!!e.silent||D.centerOpen||D.focus&&!e.timeSensitive||(D.muted[e.app.id]??0)>Date.now()}function R(e,t){if(!t)return e.map(e=>({key:e.id,app:e.app,items:[e]}));let n=/* @__PURE__ */ new Map;for(let t of e){let e=n.get(t.app.id);e||(e={key:`app:${t.app.id}`,app:t.app,items:[]},n.set(t.app.id,e)),e.items.push(t)}return[...n.values()]}const z=e=>typeof e==`string`?{title:e}:e;function B(e){let t=z(e);if(t.id&&I(t.id))return V(t.id,{...t,realert:!0}),t.id;let{id:n=N(),app:r,...i}=t,a=Date.now(),o={...i,id:n,app:F(r),createdAt:a,alertAt:a},s=L(o);return A({...D,banners:s?D.banners:[o,...D.banners],center:[o,...D.center].slice(0,k.history)}),s||k.onAlert?.(o),n}function V(e,t){let n=I(e);if(!n)return;let{realert:r,app:i,...a}=t,o={...n,...a,...i===void 0?null:{app:F(i)},...r?{alertAt:Date.now()}:null},s=t=>t.map(t=>t.id===e?o:t),c=D.banners.some(t=>t.id===e),l=!!r&&!L(o),u=s(D.banners);l&&(u=[o,...u.filter(t=>t.id!==e)]);let d=D.center.some(t=>t.id===e);A({...D,banners:c||l?u:D.banners,center:d?s(D.center):[o,...D.center].slice(0,k.history)}),l&&k.onAlert?.(o)}const ee=[`timeout`,`swipe`,`dismiss`,`overflow`];function H(e,t){let n=e===null?null:new Set(Array.isArray(e)?e:[e]),r=e=>n===null||n.has(e.id),i=ee.includes(t),a=/* @__PURE__ */ new Map;D.banners.filter(r).forEach(e=>a.set(e.id,e)),i||D.center.filter(r).forEach(e=>a.set(e.id,e)),a.size&&(A({...D,banners:D.banners.filter(e=>!r(e)),center:i?D.center:D.center.filter(e=>!r(e))}),a.forEach(e=>e.onDismiss?.(t)))}function U(e){if(e===D.centerOpen)return;let t=e?D.banners:[];A({...D,centerOpen:e,banners:e?[]:D.banners}),t.forEach(e=>e.onDismiss?.(`dismiss`))}function te(e,t,n={}){let r=B({...n,...z(t.loading),duration:1/0}),i=e=>V(r,{progress:null,duration:void 0,...n,...z(e),realert:!0});return e.then(e=>i(typeof t.success==`function`?t.success(e):t.success),e=>i(typeof t.error==`function`?t.error(e):t.error)),r}const ne=()=>{let e=/* @__PURE__ */ new Date;return e.setHours(23,59,59,999),e.getTime()-Date.now()},W=Object.assign(B,{update:V,dismiss:e=>H(e??null,`dismiss`),remove:e=>H(e,`clear`),clear:()=>H(null,`clear`),promise:te,center:{open:()=>U(!0),close:()=>U(!1),toggle:()=>U(!D.centerOpen),clear:e=>H(e?D.center.filter(t=>t.app.id===e).map(e=>e.id):null,`clear`)},setFocus:e=>A({...D,focus:e}),toggleFocus:()=>A({...D,focus:!D.focus}),mute:(e,t=36e5)=>A({...D,muted:{...D.muted,[e]:Date.now()+(t===`today`?ne():t)}}),unmute:e=>{let t={...D.muted};delete t[e],A({...D,muted:t})},isMuted:e=>(D.muted[e]??0)>Date.now()});function re(){return l(j.subscribe,j.getSnapshot,j.getServerSnapshot)}const ie=()=>()=>{};function ae(){return l(ie,()=>!0,()=>!1)}function oe(e){return document.addEventListener(`visibilitychange`,e),()=>document.removeEventListener(`visibilitychange`,e)}function se(){return l(oe,()=>document.hidden,()=>!1)}let G=0,K;const q=/* @__PURE__ */ new Set;function ce(e){return K||=(G=Date.now(),setInterval(()=>{G=Date.now(),q.forEach(e=>e())},15e3)),q.add(e),()=>{q.delete(e),q.size||(clearInterval(K),K=void 0)}}function J(){return l(ce,()=>G,()=>0)}function le(e,t){let n=t-e;if(!t||n<6e4)return`now`;let r=Math.floor(n/6e4);if(r<60)return`${r}m ago`;let i=Math.floor(r/60);if(i<24)return`${i}h ago`;let a=new Date(e),o=new Date(t);return o.setDate(o.getDate()-1),a.toDateString()===o.toDateString()?`Yesterday`:a.toLocaleDateString(void 0,{month:`short`,day:`numeric`})}const ue=/* @__PURE__ */ new Map;function de(e){let t=ue.get(e);if(t)return t;let n=new Intl.RelativeTimeFormat(e,{numeric:`auto`,style:`narrow`}),r=new Intl.DateTimeFormat(e,{month:`short`,day:`numeric`});return t=(e,t)=>{let i=t-e;if(!t||i<6e4)return n.format(0,`second`);let a=Math.floor(i/6e4);if(a<60)return n.format(-a,`minute`);let o=Math.floor(a/60);if(o<24)return n.format(-o,`hour`);let s=new Date(e),c=new Date(t);return c.setDate(c.getDate()-1),s.toDateString()===c.toDateString()?n.format(-1,`day`):r.format(s)},ue.set(e,t),t}function fe(e,t,n,r){let a=s(r),o=s({key:e,duration:t,remaining:t});i(()=>{a.current=r}),i(()=>{let r=o.current;if((r.key!==e||r.duration!==t)&&(r.key=e,r.duration=t,r.remaining=t),n||!Number.isFinite(r.remaining))return;let i=Date.now(),s=setTimeout(()=>a.current(),Math.max(0,r.remaining));return()=>{clearTimeout(s),r.remaining-=Date.now()-i}},[e,t,n])}const pe={timeSensitive:`Time Sensitive`,close:`Close`,clearStack:`Clear {count} notifications`,showMore:`Show More`,showLess:`Show Less`,clearApp:`Clear all {app} notifications`,replyPlaceholder:`Reply…`,send:`Send`,notificationCenter:`Notification Center`,history:`Notification history`,focus:`Focus`,focusOn:`Do Not Disturb`,focusOff:`Off`,clearAll:`Clear All`,empty:`No Notifications`,muteHour:`Mute for 1 Hour`,muteToday:`Mute for Today`,unmute:`Unmute {app}`,clear:`Clear`,clearCount:`Clear All ({count})`};function Y(e,t,n){return e.replace(/\{(count|app)\}/g,(e,r)=>r===`app`?n.app??e:n.count===void 0?e:t.locale?new Intl.NumberFormat(t.locale).format(n.count):String(n.count))}function me(e){let t=e.material??`glass`,n=typeof e.offset==`number`?{x:e.offset,y:e.offset}:e.offset??{};return{position:e.position??`top-right`,theme:e.theme??`system`,material:t,alertStyle:e.alertStyle??`banner`,duration:e.duration??6e3,max:Math.max(1,e.max??4),stack:e.stack??!0,swipeToDismiss:e.swipeToDismiss??!0,pauseOnHover:e.pauseOnHover??!0,expandable:e.expandable??!0,timestamps:e.timestamps??!0,closeButton:e.closeButton??`hover`,contextMenu:e.contextMenu??!0,sound:e.sound??!1,volume:e.volume??.6,width:e.width??356,radius:e.radius??(t===`glass`?24:16),gap:e.gap??10,offsetX:n.x??16,offsetY:n.y??16,accent:e.accent,history:e.history??50,dir:e.dir,locale:e.locale,labels:e.labels?{...pe,...e.labels}:pe,formatTime:e.formatTime??(e.locale?de(e.locale):le)}}function he(e,t){return{dir:e.dir,lang:e.locale,"data-ntf-theme":e.theme,"data-ntf-material":e.material,"data-ntf-close":e.closeButton,style:{"--ntf-width":`${e.width}px`,"--ntf-radius":`${e.radius}px`,"--ntf-gap":`${e.gap}px`,"--ntf-ox":`${e.offsetX}px`,"--ntf-oy":`${e.offsetY}px`,...e.accent?{"--ntf-accent":e.accent}:null,...t}}}function ge(e,t){return e.duration===void 0?(e.style??t.alertStyle)===`alert`?1/0:t.duration:e.duration}function X(e){return e.endsWith(`right`)?1:e.endsWith(`left`)?-1:0}const _e={type:`spring`,bounce:.16,duration:.55},Z={duration:.32,ease:[.32,.72,0,1]};function ve(e){let t=X(e.position);return t===0?{y:e.position.startsWith(`top`)?-28:28,opacity:0,scale:.96}:{x:t*(e.width+e.offsetX+40)}}function ye(e,t){let n=X(e.position),r=t||n;return r===0?{opacity:0,scale:.96,y:e.position.startsWith(`top`)?-12:12,transition:Z}:{x:r*(e.width+e.offsetX+80),opacity:n===0?0:1,transition:t?{type:`spring`,bounce:0,duration:.38}:Z}}const be=/* @__PURE__ */ new Set,xe=t({cfg:me({}),menuIds:be}),Q=()=>r(xe);let Se;const Ce=/[\u0600-\u06ff\u0750-\u077f\u08a0-\u08ff]/;function we(e,t){Se??=new Intl.Segmenter(void 0,{granularity:`grapheme`});let n=Array.from(Se.segment(e.replace(/\u200c/g,``).trim()),e=>e.segment).slice(0,t);return n.join(n.some(e=>Ce.test(e))?`‌`:``).toUpperCase()}function Te({size:e=8}){return/* @__PURE__ */ b(`svg`,{width:e,height:e,viewBox:`0 0 8 8`,"aria-hidden":`true`,children:/* @__PURE__ */ b(`path`,{d:`M1 1l6 6M7 1L1 7`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})})}function Ee(){return/* @__PURE__ */ b(`svg`,{width:`9`,height:`9`,viewBox:`0 0 10 10`,"aria-hidden":`true`,children:/* @__PURE__ */ b(`path`,{d:`M2 3.75l3 3 3-3`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.6`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function De(){return/* @__PURE__ */ b(`svg`,{width:`12`,height:`12`,viewBox:`0 0 12 12`,"aria-hidden":`true`,children:/* @__PURE__ */ b(`path`,{d:`M6 10V2.4M2.6 5.6L6 2.2l3.4 3.4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.7`,strokeLinecap:`round`,strokeLinejoin:`round`})})}function Oe(){return/* @__PURE__ */ b(`svg`,{width:`14`,height:`14`,viewBox:`0 0 14 14`,"aria-hidden":`true`,children:/* @__PURE__ */ b(`path`,{d:`M11.9 8.9A5.2 5.2 0 0 1 5.1 2.1a5.4 5.4 0 1 0 6.8 6.8z`,fill:`currentColor`})})}const ke=[[`#5ac8fa`,`#007aff`],[`#ffd60a`,`#ff9f0a`],[`#ff6b6b`,`#ff2d55`],[`#64d2ff`,`#5e5ce6`],[`#30d158`,`#00a86b`],[`#bf5af2`,`#8944ab`]];function Ae(e){let t=0;for(let n=0;n<e.length;n++)t=t*31+e.charCodeAt(n)|0;return Math.abs(t)}function je({app:e}){let{icon:t,name:n}=e;if(typeof t==`string`)return/* @__PURE__ */ b(`img`,{className:`ntf-appicon`,src:t,alt:``,draggable:!1});if(t)return/* @__PURE__ */ b(`span`,{className:`ntf-appicon`,children:t});let[r,i]=ke[Ae(n)%ke.length];return/* @__PURE__ */ b(`span`,{className:`ntf-appicon ntf-monogram`,style:{background:`linear-gradient(180deg, ${r}, ${i})`},children:we(n,1)})}function Me({avatar:e}){return typeof e==`string`?/* @__PURE__ */ b(`img`,{className:`ntf-avatar`,src:e,alt:``,draggable:!1}):/* @__PURE__ */ b(`span`,{className:`ntf-avatar`,style:e.background?{background:e.background}:void 0,children:we(e.initials,2)})}function Ne({record:e}){return e.avatar?/* @__PURE__ */ x(y,{children:[/* @__PURE__ */ b(Me,{avatar:e.avatar}),/* @__PURE__ */ b(`span`,{className:`ntf-badge`,children:/* @__PURE__ */ b(je,{app:e.app})})]}):/* @__PURE__ */ b(je,{app:e.app})}const Pe=e=>typeof e==`string`||typeof e==`number`?String(e):``;function Fe({record:e,stackCount:t=1,menuRecords:n,dragging:r,defaultExpanded:a=!1,onClose:o,onExpandStack:l,onDone:u,onHold:d}){let{cfg:p,openMenu:m,menuIds:g}=Q(),_=J(),[v,y]=c(a),[S,C]=c(null),[w,T]=c(``),E=s(null),D=t>1,O=e.actions??[],k=typeof e.body==`string`&&e.body.length>90,A=p.expandable&&!D&&(O.length>0||!!e.image||k),j=A&&v,M=j?S:null,N=j||g.has(e.id);i(()=>{if(d)return d(e.id,N),()=>d(e.id,!1)},[d,e.id,N]),i(()=>{M&&E.current?.focus({preventScroll:!0})},[M]);let P={id:e.id,dismiss:()=>u?.(`action`)},F=()=>y(e=>!e),I=()=>{if(!r?.current){if(D)return l?.();e.onClick?(e.onClick(P),u?.(`click`)):A&&F()}},L=e=>{if(e.reply)return C(e);e.onSelect?.(P),e.keepOpen||u?.(`action`)},R=()=>{let e=w.trim();e&&M&&(M.onReply?.(e,P),T(``),C(null),u?.(`reply`))},z=e=>{e.target===e.currentTarget&&(e.key===`Enter`?(e.preventDefault(),I()):e.key===` `&&A?(e.preventDefault(),F()):e.key===`Escape`&&j?(e.preventDefault(),y(!1)):(e.key===`Delete`||e.key===`Backspace`)&&o&&(e.preventDefault(),o()))},B=t=>{m&&p.contextMenu&&(t.preventDefault(),m({event:t,record:e,records:n??[e]}))},V=e=>t=>{t.stopPropagation(),e()},ee=e.time===void 0?e.createdAt:+e.time,H=typeof M?.reply==`object`?M.reply.placeholder:void 0,U=j&&(!!e.image||O.length>0);return/* @__PURE__ */ x(`article`,{className:`ntf-card`,"data-expanded":j||void 0,"data-stacked":D||void 0,"data-expandable":A||void 0,tabIndex:0,role:`group`,"aria-roledescription":`notification`,"aria-label":[e.app.name,Pe(e.title),Pe(e.body)].filter(Boolean).join(`. `),onClick:I,onKeyDown:z,onContextMenu:B,children:[p.closeButton!==`never`&&o&&/* @__PURE__ */ b(`button`,{type:`button`,className:`ntf-close`,"aria-label":D?Y(p.labels.clearStack,p,{count:t}):p.labels.close,onClick:V(o),children:/* @__PURE__ */ b(Te,{})}),/* @__PURE__ */ x(`div`,{className:`ntf-main`,children:[/* @__PURE__ */ b(`div`,{className:`ntf-media`,children:/* @__PURE__ */ b(Ne,{record:e})}),/* @__PURE__ */ x(`div`,{className:`ntf-text`,children:[e.timeSensitive&&/* @__PURE__ */ b(`div`,{className:`ntf-eyebrow`,children:p.labels.timeSensitive}),/* @__PURE__ */ x(`div`,{className:`ntf-head`,children:[/* @__PURE__ */ b(`div`,{className:`ntf-title`,children:e.title}),(p.timestamps||A)&&/* @__PURE__ */ x(`div`,{className:`ntf-meta`,children:[p.timestamps&&/* @__PURE__ */ b(`span`,{className:`ntf-time`,children:p.formatTime(ee,_)}),A&&/* @__PURE__ */ b(`button`,{type:`button`,className:`ntf-chevron`,"aria-label":j?p.labels.showLess:p.labels.showMore,"aria-expanded":j,onClick:V(F),children:/* @__PURE__ */ b(Ee,{})})]})]}),e.subtitle&&/* @__PURE__ */ b(`div`,{className:`ntf-subtitle`,children:e.subtitle}),e.body&&/* @__PURE__ */ b(`div`,{className:`ntf-body`,children:e.body}),typeof e.progress==`number`&&/* @__PURE__ */ b(Ie,{value:e.progress})]}),e.image&&!j&&/* @__PURE__ */ b(`img`,{className:`ntf-thumb`,src:e.image,alt:``,draggable:!1})]}),/* @__PURE__ */ b(f,{initial:!1,children:U&&/* @__PURE__ */ b(h.div,{className:`ntf-extra`,initial:{height:0,opacity:0},animate:{height:`auto`,opacity:1},exit:{height:0,opacity:0},transition:Z,children:/* @__PURE__ */ x(`div`,{className:`ntf-extra-inner`,children:[e.image&&/* @__PURE__ */ b(`img`,{className:`ntf-hero`,src:e.image,alt:``,draggable:!1}),M?/* @__PURE__ */ x(`form`,{className:`ntf-reply`,"data-ntf-nodrag":!0,onClick:e=>e.stopPropagation(),onSubmit:e=>{e.preventDefault(),R()},children:[/* @__PURE__ */ b(`input`,{ref:E,value:w,dir:`auto`,placeholder:H??p.labels.replyPlaceholder,"aria-label":M.label,onChange:e=>T(e.target.value),onKeyDown:e=>{e.key===`Escape`&&(e.stopPropagation(),e.currentTarget.closest(`.ntf-card`)?.focus({preventScroll:!0}),C(null))}}),/* @__PURE__ */ b(`button`,{type:`submit`,className:`ntf-send`,"aria-label":p.labels.send,disabled:!w.trim(),children:/* @__PURE__ */ b(De,{})})]}):O.length>0&&/* @__PURE__ */ b(`div`,{className:`ntf-actions`,"data-count":Math.min(O.length,3),children:O.map(e=>/* @__PURE__ */ b(`button`,{type:`button`,className:`ntf-action`,"data-destructive":e.destructive||void 0,onClick:V(()=>L(e)),children:e.label},e.label))})]})},`extra`)})]})}function Ie({value:e}){let t=Math.max(0,Math.min(1,e));return/* @__PURE__ */ b(`div`,{className:`ntf-progress`,role:`progressbar`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(t*100),children:/* @__PURE__ */ b(`span`,{style:{width:`${t*100}%`}})})}const Le=`.ntf-viewport, .ntf-center-list`,Re=e=>!e.closest(`[data-ntf-leaving]`),ze=e=>[...e.querySelectorAll(`.ntf-card`)];let Be=null;function Ve(e,t){let n=t.filter(Re);return n.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??n.at(-1)}function He(e){let t=e.closest(`.ntf-group`),n=e.closest(Le);return(t&&Re(t)?Ve(e,ze(t)):void 0)??(n?Ve(e,ze(n)):void 0)??(Be?.isConnected?Be:null)}function Ue(){let e=_(),t=s(null);return i(()=>{let n=document.activeElement;!e&&n&&t.current?.contains(n)&&n.matches(`:focus-visible`)&&He(t.current)?.focus({preventScroll:!0})},[e]),{"data-ntf-leaving":e?void 0:``,onFocus(e){t.current=e.currentTarget;let n=e.relatedTarget;n instanceof HTMLElement&&!n.closest(Le)&&(Be=n)}}}function We(e,t,n){let r=g(),i=v(0),a=s(!1);return e?{dragging:a,props:{style:{x:i},drag:`x`,dragControls:r,dragListener:!1,dragConstraints:{left:0,right:0},dragElastic:t===1?{left:.06,right:.92}:t===-1?{left:.92,right:.06}:.92,dragTransition:{bounceStiffness:520,bounceDamping:38},onPointerDown(e){e.button!==0||e.target.closest(`button, input, textarea, select, a, [data-ntf-nodrag]`)||r.start(e)},onDragStart(){a.current=!0},onDragEnd(e,r){setTimeout(()=>{a.current=!1},0);let i=t||Math.sign(r.offset.x||r.velocity.x);i&&(r.offset.x*i>80||r.velocity.x*i>500)&&n(i)}}}:{dragging:a,props:{style:{x:i}}}}function Ge({ref:e,group:t,variant:r}){let{cfg:a}=Q(),{items:o,app:l}=t,u=o[0],p=o.map(e=>e.id),[m,g]=c(!1),[_,v]=c(!1),[y,S]=c(!1),[C,w]=c(!1),[T,E]=c(0),[D,O]=c(0),k=s(/* @__PURE__ */ new Set),A=se(),j=Ue(),M=o.length>1,N=M&&m,P=M&&!N,F=X(a.position),I=r===`banner`?`swipe`:`close`,L=n((e,t)=>{t?k.current.add(e):k.current.delete(e),E(k.current.size)},[]),R=r!==`banner`||A||N||y||C||T>0||a.pauseOnHover&&_;i(()=>{if(!C)return;let e=()=>w(!1);return window.addEventListener(`pointerup`,e),window.addEventListener(`pointercancel`,e),()=>{window.removeEventListener(`pointerup`,e),window.removeEventListener(`pointercancel`,e)}},[C]),fe(`${u.id}:${u.alertAt}`,r===`banner`?ge(u,a):1/0,R,()=>H(o.filter(e=>Number.isFinite(ge(e,a))).map(e=>e.id),`timeout`));let z=We(a.swipeToDismiss&&!N,F,e=>{d(()=>O(e)),H(p,I)}),B=e=>{j.onFocus(e),e.target.matches(`:focus-visible`)&&S(!0)},V=e=>{e.currentTarget.contains(e.relatedTarget)||S(!1)};return/* @__PURE__ */ x(h.li,{ref:e,layout:`position`,className:`ntf-group`,"data-variant":r,"data-collapsed":P||void 0,"data-depth":P?Math.min(o.length-1,2):void 0,initial:ve(a),animate:{x:0,y:0,opacity:1,scale:1},exit:ye(a,D),transition:_e,onPointerEnter:e=>e.pointerType===`mouse`&&v(!0),onPointerLeave:()=>v(!1),onPointerDownCapture:()=>w(!0),...j,onFocus:B,onBlur:V,...z.props,children:[/* @__PURE__ */ b(f,{initial:!1,mode:`popLayout`,children:N&&/* @__PURE__ */ x(h.div,{className:`ntf-group-header`,initial:{opacity:0,y:8},animate:{opacity:1,y:0},exit:{opacity:0,y:8},transition:Z,children:[/* @__PURE__ */ b(`span`,{className:`ntf-group-title`,children:l.name}),/* @__PURE__ */ x(`span`,{className:`ntf-group-buttons`,children:[/* @__PURE__ */ b(`button`,{type:`button`,className:`ntf-pill`,onClick:e=>{e.currentTarget.matches(`:focus-visible`)&&He(e.currentTarget)?.focus({preventScroll:!0}),g(!1)},children:a.labels.showLess}),/* @__PURE__ */ b(`button`,{type:`button`,className:`ntf-pill ntf-pill-icon`,"aria-label":Y(a.labels.clearApp,a,{app:l.name}),onClick:()=>H(p,`clear`),children:/* @__PURE__ */ b(Te,{})})]})]},`header`)}),/* @__PURE__ */ x(`div`,{className:`ntf-stack`,children:[/* @__PURE__ */ b(f,{initial:!1,mode:`popLayout`,children:o.map((e,t)=>(t===0||N)&&/* @__PURE__ */ b(Ke,{record:e,index:t,items:o,collapsed:P,expanded:N,swipeReason:I,groupDragging:z.dragging,onExpandStack:()=>g(!0),onHold:L},e.id))}),/* @__PURE__ */ b(f,{initial:!1,children:P&&/* @__PURE__ */ x(h.div,{className:`ntf-peeks`,"aria-hidden":`true`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:Z,children:[/* @__PURE__ */ b(`span`,{className:`ntf-peek`}),o.length>2&&/* @__PURE__ */ b(`span`,{className:`ntf-peek`,"data-depth":`2`})]},`peeks`)})]})]})}function Ke({ref:e,record:t,index:n,items:r,collapsed:i,expanded:a,swipeReason:o,groupDragging:s,onExpandStack:l,onHold:u}){let{cfg:f}=Q(),[p,m]=c(0),g=Ue(),_=We(f.swipeToDismiss&&a,X(f.position),e=>{d(()=>m(e)),H(t.id,o)});return/* @__PURE__ */ b(h.div,{ref:e,layout:`position`,className:`ntf-slot`,initial:n===0?ve(f):{opacity:0,y:-18,scale:.95},animate:{x:0,y:0,opacity:1,scale:1},exit:p?ye(f,p):{opacity:0,y:-14,scale:.95,transition:Z},transition:_e,...g,..._.props,children:/* @__PURE__ */ b(Fe,{record:t,stackCount:i?r.length:1,menuRecords:i?r:[t],dragging:a?_.dragging:s,onClose:()=>H(i?r.map(e=>e.id):t.id,`close`),onExpandStack:l,onDone:e=>H(t.id,e),onHold:u})})}function qe({records:e,focus:t,side:n}){let{cfg:r}=Q(),i=o(()=>R(e,!0),[e]),a=(n===`left`?-1:1)*(r.width+r.offsetX*2+40);return/* @__PURE__ */ x(y,{children:[/* @__PURE__ */ b(h.div,{className:`ntf-scrim`,"data-side":n,onClick:()=>W.center.close(),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:Z}),/* @__PURE__ */ x(h.aside,{className:`ntf-center`,"data-side":n,role:`dialog`,"aria-label":r.labels.notificationCenter,initial:{x:a},animate:{x:0},exit:{x:a,transition:Z},transition:_e,children:[/* @__PURE__ */ x(`div`,{className:`ntf-center-bar`,children:[/* @__PURE__ */ x(`button`,{type:`button`,className:`ntf-focus`,"aria-pressed":t,onClick:()=>W.toggleFocus(),children:[/* @__PURE__ */ b(`span`,{className:`ntf-focus-icon`,children:/* @__PURE__ */ b(Oe,{})}),/* @__PURE__ */ x(`span`,{className:`ntf-focus-text`,children:[/* @__PURE__ */ b(`strong`,{children:r.labels.focus}),/* @__PURE__ */ b(`span`,{children:t?r.labels.focusOn:r.labels.focusOff})]})]}),e.length>0&&/* @__PURE__ */ b(`button`,{type:`button`,className:`ntf-pill`,onClick:()=>W.center.clear(),children:r.labels.clearAll})]}),/* @__PURE__ */ b(p,{id:`ntf-center`,children:/* @__PURE__ */ b(`ol`,{className:`ntf-center-list`,"aria-label":r.labels.history,children:/* @__PURE__ */ b(f,{mode:`popLayout`,initial:!1,children:i.map(e=>/* @__PURE__ */ b(Ge,{group:e,variant:`center`},e.key))})})}),/* @__PURE__ */ b(f,{initial:!1,children:e.length===0&&/* @__PURE__ */ b(h.p,{className:`ntf-empty`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:Z,children:r.labels.empty},`empty`)})]})]})}function Je({x:e,y:t,items:n,onClose:r}){let o=s(null);return a(()=>{let n=o.current;if(!n)return;let{width:r,height:i}=n.getBoundingClientRect(),a=getComputedStyle(n).direction===`rtl`,s=Math.max(8,Math.min(a?e-r:e,window.innerWidth-r-8)),c=t+i>window.innerHeight-8?Math.max(8,t-i):t;n.style.left=`${s}px`,n.style.transformOrigin=a?`top right`:`top left`,n.style.top=`${c}px`,n.querySelector(`button`)?.focus({preventScroll:!0})},[e,t]),i(()=>{let e=e=>{o.current?.contains(e.target)||r()},t=e=>{e.key===`Escape`&&r()};return window.addEventListener(`pointerdown`,e,!0),window.addEventListener(`keydown`,t),window.addEventListener(`resize`,r),window.addEventListener(`blur`,r),window.addEventListener(`scroll`,r,!0),()=>{window.removeEventListener(`pointerdown`,e,!0),window.removeEventListener(`keydown`,t),window.removeEventListener(`resize`,r),window.removeEventListener(`blur`,r),window.removeEventListener(`scroll`,r,!0)}},[r]),/* @__PURE__ */ b(h.div,{ref:o,className:`ntf-menu`,role:`menu`,initial:{opacity:0,scale:.98},animate:{opacity:1,scale:1,transition:{duration:.12}},exit:{opacity:0,transition:{duration:.18}},onKeyDown:e=>{if(e.key!==`ArrowDown`&&e.key!==`ArrowUp`)return;e.preventDefault();let t=[...o.current?.querySelectorAll(`button`)??[]];t[(t.indexOf(document.activeElement)+(e.key===`ArrowDown`?1:-1)+t.length)%t.length]?.focus()},onContextMenu:e=>e.preventDefault(),children:n.map((e,t)=>e===`separator`?/* @__PURE__ */ b(`div`,{className:`ntf-menu-sep`,role:`separator`},`sep-${t}`):/* @__PURE__ */ b(`button`,{type:`button`,role:`menuitem`,className:`ntf-menu-item`,"data-destructive":e.destructive||void 0,onClick:()=>{r(),e.onSelect()},children:e.label},e.label))})}let $=null;function Ye(e=.6){if(typeof window<`u`)try{let t=window.AudioContext??window.webkitAudioContext;if(!t)return;$??=new t,$.state===`suspended`&&$.resume();let n=$,r=n.currentTime+.01,i=n.createGain();i.gain.value=Math.max(0,Math.min(1,e))*.16,i.connect(n.destination);for(let[e,t]of[[1567.98,0],[2349.32,.075]]){let a=n.createOscillator(),o=n.createGain();a.type=`sine`,a.frequency.value=e,o.gain.setValueAtTime(0,r+t),o.gain.linearRampToValueAtTime(1,r+t+.006),o.gain.exponentialRampToValueAtTime(1e-4,r+t+.85),a.connect(o).connect(i),a.start(r+t),a.stop(r+t+.9)}}catch{}}function Xe({record:e,records:t},n){let{labels:r}=n,{app:i}=e,a=[];if(t.length===1){let t={id:e.id,dismiss:()=>H(e.id,`action`)};for(let n of e.actions??[])n.reply||a.push({label:n.label,destructive:n.destructive,onSelect:()=>{n.onSelect?.(t),n.keepOpen||H(e.id,`action`)}});a.length&&a.push(`separator`)}return W.isMuted(i.id)?a.push({label:Y(r.unmute,n,{app:i.name}),onSelect:()=>W.unmute(i.id)}):a.push({label:r.muteHour,onSelect:()=>W.mute(i.id,36e5)},{label:r.muteToday,onSelect:()=>W.mute(i.id,`today`)}),a.push(`separator`,{label:t.length>1?Y(r.clearCount,n,{count:t.length}):r.clear,onSelect:()=>H(t.map(e=>e.id),`clear`)}),a}function Ze(e){let t=me(e),r=re(),a=ae(),[s,l]=c(null),[d,h]=C();i(()=>j.connect({history:t.history,onAlert:e=>{(e.sound??t.sound)&&Ye(t.volume),h(e)}}),[t.history,t.sound,t.volume,h]);let g=o(()=>R(r.banners,t.stack),[r.banners,t.stack]),_=g.slice(0,t.max),v=g.slice(t.max).flatMap(e=>e.items.map(e=>e.id)).join(` `);i(()=>{v&&H(v.split(` `),`overflow`)},[v]),i(()=>{if(!r.centerOpen)return;let e=e=>{e.key===`Escape`&&W.center.close()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[r.centerOpen]);let y=n(({event:e,record:t,records:n})=>{l({x:e.clientX,y:e.clientY,record:t,records:n})},[]),S=n(()=>l(null),[]),T=o(()=>new Set(s?.records.map(e=>e.id)),[s]);if(!a)return null;let[E,D]=t.position.split(`-`);return u(/* @__PURE__ */ b(xe,{value:{cfg:t,openMenu:y,menuIds:T},children:/* @__PURE__ */ b(m,{reducedMotion:`user`,children:/* @__PURE__ */ x(`div`,{className:e.className?`ntf-root ${e.className}`:`ntf-root`,...he(t,e.style),children:[/* @__PURE__ */ b(w,{items:d,timeSensitive:t.labels.timeSensitive}),/* @__PURE__ */ b(p,{id:`ntf-banners`,children:/* @__PURE__ */ b(`ol`,{className:`ntf-viewport`,"data-x":D,"data-y":E,"aria-label":e.label??`Notifications`,children:/* @__PURE__ */ b(f,{mode:`popLayout`,initial:!1,children:_.map(e=>/* @__PURE__ */ b(Ge,{group:e,variant:`banner`},e.key))})})}),/* @__PURE__ */ b(f,{children:r.centerOpen&&/* @__PURE__ */ b(qe,{records:r.center,focus:r.focus,side:D===`left`?`left`:`right`},`center`)}),/* @__PURE__ */ b(f,{children:s&&/* @__PURE__ */ b(Je,{x:s.x,y:s.y,items:Xe(s,t),onClose:S},`${s.x}:${s.y}`)})]})})}),document.body)}const Qe=/* @__PURE__ */ new Set;function $e({notification:e,stackCount:t=1,defaultExpanded:n,onClose:r,className:i,style:a,...s}){let c=me({...s,contextMenu:!1}),l=J(),u=o(()=>{let{id:t=`preview`,app:n,...r}=e;return{...r,id:t,app:F(n),createdAt:l,alertAt:l}},[e,l]),d=Math.min(t-1,2);return/* @__PURE__ */ b(xe,{value:{cfg:c,menuIds:Qe},children:/* @__PURE__ */ b(`div`,{className:i?`ntf-root ntf-inline ${i}`:`ntf-root ntf-inline`,...he(c,a),children:/* @__PURE__ */ b(`div`,{className:`ntf-group`,"data-variant":`preview`,"data-collapsed":d>0||void 0,"data-depth":d||void 0,children:/* @__PURE__ */ x(`div`,{className:`ntf-stack`,children:[/* @__PURE__ */ b(Fe,{record:u,stackCount:t,defaultExpanded:n,onClose:r}),d>0&&/* @__PURE__ */ x(`div`,{className:`ntf-peeks`,"aria-hidden":`true`,children:[/* @__PURE__ */ b(`span`,{className:`ntf-peek`}),d>1&&/* @__PURE__ */ b(`span`,{className:`ntf-peek`,"data-depth":`2`})]})]})})})})}export{$e as NotificationPreview,Ze as Notifier,le as formatTime,R as groupRecords,W as notify,Ye as playChime,re as useNotifyState,J as useNow};

package/dist/notify.css

@@ -1 +1 @@
-.ntf-root{--ntf-width:356px;--ntf-radius:24px;--ntf-gap:10px;--ntf-ox:16px;--ntf-oy:16px;--ntf-inner-radius:max(8px, calc(var(--ntf-radius) - 12px));--ntf-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;--ntf-label:#000000e0;--ntf-label-2:#00000080;--ntf-fill:#0000000e;--ntf-fill-2:#00000017;--ntf-fill-3:#00000021;--ntf-separator:#0000001a;--ntf-tint:var(--ntf-accent,#007aff);--ntf-red:#ff3b30;--ntf-urgent:#ff9500;--ntf-focus:#5e5ce6;--ntf-close-bg:#fcfcfcf5;--ntf-close-fg:#0000009e;--ntf-close-edge:#00000024;--ntf-menu-bg:#f6f6f6d1;--ntf-menu-shadow:0 0 0 .5px #00000024, inset 0 .5px 0 #ffffffb3, 0 12px 36px #0003, 0 2px 8px #00000014;--ntf-bg:#fff9;--ntf-peek-bg:#ffffff73;--ntf-filter:blur(22px) saturate(190%);--ntf-shadow:0 0 0 .5px #00000017, inset 0 1px .5px #fffffff2, inset 0 -.5px .5px #ffffff80, 0 10px 34px #0000001f, 0 2px 8px #0000000d;--ntf-peek-shadow:0 0 0 .5px #00000012, 0 6px 18px #00000014;font-family:var(--ntf-font);letter-spacing:-.08px;color:var(--ntf-label);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px;line-height:16px}.ntf-root[data-ntf-material=regular]{--ntf-bg:#f6f6f8cc;--ntf-peek-bg:#f0f0f2b3;--ntf-filter:blur(30px) saturate(180%);--ntf-shadow:0 0 0 .5px #0000001f, 0 8px 26px #00000024, 0 1px 4px #0000000d}.ntf-root[data-ntf-material=thick]{--ntf-bg:#f9f9faed;--ntf-peek-bg:#f2f2f4e6;--ntf-filter:blur(40px) saturate(170%);--ntf-shadow:0 0 0 .5px #0000001f, 0 8px 26px #00000026, 0 1px 4px #0000000d}.ntf-root[data-ntf-material=solid]{--ntf-bg:#f6f6f8;--ntf-peek-bg:#ebebee;--ntf-filter:none;--ntf-shadow:0 0 0 .5px #0000001f, 0 8px 26px #00000024, 0 1px 4px #0000000d}.ntf-root[data-ntf-theme=dark]{--ntf-label:#ffffffeb;--ntf-label-2:#ffffff8c;--ntf-fill:#ffffff1a;--ntf-fill-2:#ffffff26;--ntf-fill-3:#fff3;--ntf-separator:#ffffff1f;--ntf-tint:var(--ntf-accent,#0a84ff);--ntf-red:#ff453a;--ntf-urgent:#ff9f0a;--ntf-focus:#6e6af0;--ntf-close-bg:#48484af5;--ntf-close-fg:#ffffffd1;--ntf-close-edge:#00000080;--ntf-menu-bg:#2a2a2ccc;--ntf-menu-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff24, 0 12px 36px #00000073;--ntf-bg:#1e1e20b8;--ntf-peek-bg:#1e1e2099;--ntf-shadow:0 0 0 .5px #0000008c, inset 0 .5px .5px #ffffff47, inset 0 0 0 .5px #ffffff12, 0 12px 38px #0000005c;--ntf-peek-shadow:0 0 0 .5px #00000080, inset 0 0 0 .5px #ffffff0f, 0 6px 18px #0000003d}.ntf-root[data-ntf-theme=dark][data-ntf-material=regular]{--ntf-bg:#28282ad6;--ntf-peek-bg:#28282abd;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0006}.ntf-root[data-ntf-theme=dark][data-ntf-material=thick]{--ntf-bg:#242426eb;--ntf-peek-bg:#242426d9;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0000006b}.ntf-root[data-ntf-theme=dark][data-ntf-material=solid]{--ntf-bg:#2c2c2e;--ntf-peek-bg:#242426;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1a, 0 10px 30px #0000006b}@media (prefers-color-scheme:dark){.ntf-root[data-ntf-theme=system]{--ntf-label:#ffffffeb;--ntf-label-2:#ffffff8c;--ntf-fill:#ffffff1a;--ntf-fill-2:#ffffff26;--ntf-fill-3:#fff3;--ntf-separator:#ffffff1f;--ntf-tint:var(--ntf-accent,#0a84ff);--ntf-red:#ff453a;--ntf-urgent:#ff9f0a;--ntf-focus:#6e6af0;--ntf-close-bg:#48484af5;--ntf-close-fg:#ffffffd1;--ntf-close-edge:#00000080;--ntf-menu-bg:#2a2a2ccc;--ntf-menu-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff24, 0 12px 36px #00000073;--ntf-bg:#1e1e20b8;--ntf-peek-bg:#1e1e2099;--ntf-shadow:0 0 0 .5px #0000008c, inset 0 .5px .5px #ffffff47, inset 0 0 0 .5px #ffffff12, 0 12px 38px #0000005c;--ntf-peek-shadow:0 0 0 .5px #00000080, inset 0 0 0 .5px #ffffff0f, 0 6px 18px #0000003d}.ntf-root[data-ntf-theme=system][data-ntf-material=regular]{--ntf-bg:#28282ad6;--ntf-peek-bg:#28282abd;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0006}.ntf-root[data-ntf-theme=system][data-ntf-material=thick]{--ntf-bg:#242426eb;--ntf-peek-bg:#242426d9;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0000006b}.ntf-root[data-ntf-theme=system][data-ntf-material=solid]{--ntf-bg:#2c2c2e;--ntf-peek-bg:#242426;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1a, 0 10px 30px #0000006b}}.ntf-root *,.ntf-root :before,.ntf-root :after{box-sizing:border-box}.ntf-root button{font:inherit;letter-spacing:inherit;cursor:default;-webkit-tap-highlight-color:transparent}.ntf-viewport{z-index:2147483000;gap:var(--ntf-gap);width:min(var(--ntf-width), calc(100vw - 2 * var(--ntf-ox)));pointer-events:none;flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:fixed}.ntf-viewport[data-y=top]{top:calc(var(--ntf-oy) + env(safe-area-inset-top,0px))}.ntf-viewport[data-y=bottom]{bottom:calc(var(--ntf-oy) + env(safe-area-inset-bottom,0px));flex-direction:column-reverse}.ntf-viewport[data-x=right]{right:var(--ntf-ox)}.ntf-viewport[data-x=left]{left:var(--ntf-ox)}.ntf-viewport[data-x=center]{margin-inline:auto;left:0;right:0}.ntf-group{pointer-events:auto;touch-action:pan-y;width:100%;list-style:none;position:relative}.ntf-group[data-collapsed]{padding-bottom:8px}.ntf-group[data-collapsed][data-depth="2"]{padding-bottom:15px}.ntf-stack{isolation:isolate;gap:var(--ntf-gap);flex-direction:column;display:flex;position:relative}.ntf-slot{touch-action:pan-y;position:relative}.ntf-peeks{z-index:-1;pointer-events:none;position:absolute;inset:0}.ntf-peek{z-index:2;border-radius:var(--ntf-radius);background:var(--ntf-peek-bg);height:40px;backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-peek-shadow);position:absolute;bottom:-8px;left:11px;right:11px}.ntf-peek[data-depth="2"]{z-index:1;opacity:.8;bottom:-15px;left:22px;right:22px}.ntf-group-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.ntf-group-title{white-space:nowrap;text-overflow:ellipsis;background:var(--ntf-bg);min-width:0;height:26px;backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-peek-shadow);border-radius:13px;padding:0 11px;font-size:13px;font-weight:600;line-height:26px;overflow:hidden}.ntf-group-buttons{flex:none;gap:6px;display:flex}.ntf-pill{height:26px;color:var(--ntf-label);background:var(--ntf-bg);backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-peek-shadow);border:0;border-radius:13px;padding:0 11px;font-size:12px;font-weight:500;transition:background-color .15s,transform .15s}.ntf-pill:active{transform:scale(.96)}.ntf-pill-icon{width:26px;color:var(--ntf-label-2);place-items:center;padding:0;display:grid}.ntf-pill:focus-visible,.ntf-chevron:focus-visible,.ntf-close:focus-visible,.ntf-action:focus-visible,.ntf-focus:focus-visible{outline:2px solid var(--ntf-tint);outline-offset:2px}.ntf-card{border-radius:var(--ntf-radius);background:var(--ntf-bg);width:100%;backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-shadow);color:var(--ntf-label);text-align:left;cursor:default;-webkit-user-select:none;user-select:none;outline:none;padding:12px 14px 12px 12px;transition:box-shadow .2s;position:relative}.ntf-card:focus-visible{box-shadow:var(--ntf-shadow), 0 0 0 3px color-mix(in srgb, var(--ntf-tint) 55%, transparent)}.ntf-main{align-items:center;gap:10px;min-height:38px;display:flex}.ntf-media{flex:none;width:38px;height:38px;position:relative}.ntf-appicon{object-fit:cover;border-radius:23%;place-items:center;width:100%;height:100%;display:grid;overflow:hidden;box-shadow:0 .5px 1.5px #00000038,inset 0 0 0 .5px #0000000f}.ntf-appicon>svg{width:100%;height:100%;display:block}.ntf-monogram{color:#fff;letter-spacing:0;font-size:17px;font-weight:600}.ntf-avatar{object-fit:cover;color:#fff;letter-spacing:.01em;background:linear-gradient(#a9afbb,#868b96);border-radius:50%;place-items:center;width:100%;height:100%;padding:0 4px 3px 0;font-size:13px;font-weight:600;display:grid}.ntf-badge{width:17px;height:17px;position:absolute;bottom:-4px;right:-5px}.ntf-badge .ntf-appicon{box-shadow:0 0 0 1px var(--ntf-close-bg), 0 1px 2px #00000040}.ntf-badge .ntf-monogram{font-size:10px}.ntf-text{flex:1;min-width:0}.ntf-eyebrow{letter-spacing:.02em;text-transform:uppercase;color:var(--ntf-urgent);margin-bottom:1px;font-size:11px;font-weight:600;line-height:13px}.ntf-head{align-items:center;gap:8px;display:flex}.ntf-title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}.ntf-card[data-expanded] .ntf-title{white-space:normal}.ntf-meta{flex:none;justify-content:flex-end;align-items:center;min-width:20px;height:16px;display:flex;position:relative}.ntf-time{color:var(--ntf-label-2);white-space:nowrap;font-size:12px;transition:opacity .15s}.ntf-chevron{width:20px;height:20px;color:var(--ntf-label-2);background:var(--ntf-fill);opacity:0;border:0;border-radius:50%;place-items:center;padding:0;transition:opacity .15s,transform .2s,background-color .15s;display:grid;position:absolute;top:50%;right:-3px;transform:translateY(-50%)scale(.85)}.ntf-chevron:hover{background:var(--ntf-fill-2)}.ntf-chevron svg{transition:transform .25s cubic-bezier(.32,.72,0,1)}.ntf-card[data-expanded] .ntf-chevron svg{transform:rotate(180deg)}.ntf-card[data-expandable]:hover .ntf-chevron,.ntf-card[data-expandable]:focus-within .ntf-chevron,.ntf-card[data-expanded] .ntf-chevron{opacity:1;transform:translateY(-50%)}.ntf-card[data-expandable]:hover .ntf-time,.ntf-card[data-expandable]:focus-within .ntf-time,.ntf-card[data-expanded] .ntf-time{opacity:0}.ntf-subtitle{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.ntf-card[data-expanded] .ntf-subtitle{white-space:normal}.ntf-body{-webkit-line-clamp:3;line-clamp:3;overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ntf-card[data-expanded] .ntf-body{-webkit-line-clamp:12;line-clamp:12}.ntf-thumb{object-fit:cover;width:40px;height:40px;box-shadow:inset 0 0 0 .5px var(--ntf-separator);border-radius:8px;flex:none}.ntf-progress{background:var(--ntf-fill-2);border-radius:2px;height:4px;margin-top:7px;overflow:hidden}.ntf-progress>span{border-radius:inherit;background:var(--ntf-tint);transform-origin:0;height:100%;transition:transform .45s;display:block}.ntf-close{z-index:2;width:20px;height:20px;color:var(--ntf-close-fg);background:var(--ntf-close-bg);box-shadow:0 0 0 .5px var(--ntf-close-edge), 0 1px 4px #00000029;opacity:0;border:0;border-radius:50%;place-items:center;padding:0;transition:opacity .15s,transform .2s cubic-bezier(.32,.72,0,1);display:grid;position:absolute;top:-7px;left:-7px;transform:scale(.8)}.ntf-card:hover>.ntf-close,.ntf-card:focus-within>.ntf-close,.ntf-root[data-ntf-close=always] .ntf-close{opacity:1;transform:none}.ntf-close:active{transform:scale(.9)}.ntf-extra{overflow:hidden}.ntf-extra-inner{gap:8px;padding-top:10px;display:grid}.ntf-hero{object-fit:cover;border-radius:var(--ntf-inner-radius);width:100%;max-height:220px;display:block}.ntf-actions{grid-template-columns:1fr;gap:6px;display:grid}.ntf-actions[data-count="2"]{grid-template-columns:1fr 1fr}.ntf-action{border-radius:var(--ntf-inner-radius);height:30px;color:var(--ntf-label);background:var(--ntf-fill);white-space:nowrap;text-overflow:ellipsis;border:0;padding:0 10px;font-size:13px;font-weight:500;transition:background-color .15s;overflow:hidden}.ntf-action:hover{background:var(--ntf-fill-2)}.ntf-action:active{background:var(--ntf-fill-3)}.ntf-action[data-destructive]{color:var(--ntf-red)}.ntf-reply{border-radius:var(--ntf-inner-radius);background:var(--ntf-fill);align-items:center;gap:6px;margin:0;padding:4px 4px 4px 12px;display:flex}.ntf-reply input{min-width:0;height:24px;font:inherit;letter-spacing:inherit;color:var(--ntf-label);-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;flex:1;padding:0}.ntf-reply input:focus,.ntf-reply input:focus-visible{box-shadow:none;outline:none}.ntf-reply:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--ntf-tint) 45%, transparent)}.ntf-reply input::placeholder{color:var(--ntf-label-2)}.ntf-send{color:#fff;background:var(--ntf-tint);border:0;border-radius:50%;flex:none;place-items:center;width:24px;height:24px;padding:0;transition:opacity .15s,transform .15s;display:grid}.ntf-send:disabled{opacity:.35}.ntf-send:not(:disabled):active{transform:scale(.9)}.ntf-scrim{z-index:2147482999;background:linear-gradient(270deg,#0000002e,#0000 560px);position:fixed;inset:0}.ntf-scrim[data-side=left]{background:linear-gradient(90deg,#0000002e,#0000 560px)}.ntf-center{z-index:2147483001;--ntf-bleed:48px;width:min(calc(var(--ntf-width) + 2 * var(--ntf-ox) + var(--ntf-bleed)), 100vw);padding:calc(var(--ntf-oy) + env(safe-area-inset-top,0px)) var(--ntf-ox) 32px calc(var(--ntf-ox) + var(--ntf-bleed));overscroll-behavior:contain;scrollbar-width:none;flex-direction:column;gap:14px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.ntf-center::-webkit-scrollbar{display:none}.ntf-center[data-side=left]{padding-left:var(--ntf-ox);padding-right:calc(var(--ntf-ox) + var(--ntf-bleed));left:0;right:auto}@media (width<=480px){.ntf-center{--ntf-bleed:0px}}.ntf-center-bar{justify-content:space-between;align-items:center;gap:8px;display:flex}.ntf-focus{height:46px;color:var(--ntf-label);text-align:left;background:var(--ntf-bg);backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-shadow);border:0;border-radius:23px;align-items:center;gap:9px;padding:0 14px 0 8px;display:flex}.ntf-focus-icon{width:30px;height:30px;color:var(--ntf-label);background:var(--ntf-fill-2);border-radius:50%;place-items:center;transition:background-color .2s,color .2s;display:grid}.ntf-focus[aria-pressed=true] .ntf-focus-icon{color:#fff;background:var(--ntf-focus)}.ntf-focus-text{line-height:15px;display:grid}.ntf-focus-text strong{font-weight:600}.ntf-focus-text span{color:var(--ntf-label-2);font-size:12px}.ntf-center-list{gap:var(--ntf-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ntf-empty{border-radius:var(--ntf-radius);text-align:center;color:var(--ntf-label-2);background:var(--ntf-bg);backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-shadow);margin:0;padding:16px;font-weight:500}.ntf-menu{z-index:2147483002;background:var(--ntf-menu-bg);backdrop-filter:blur(30px)saturate(180%);min-width:196px;box-shadow:var(--ntf-menu-shadow);transform-origin:0 0;border-radius:12px;padding:5px;position:fixed;top:0;left:0}.ntf-menu-item{text-align:left;width:100%;color:var(--ntf-label);white-space:nowrap;background:0 0;border:0;border-radius:6px;outline:none;padding:3px 10px;font-size:13px;line-height:18px;display:block}.ntf-menu-item:hover,.ntf-menu-item:focus-visible{color:#fff;background:var(--ntf-tint)}.ntf-menu-item[data-destructive]{color:var(--ntf-red)}.ntf-menu-item[data-destructive]:hover,.ntf-menu-item[data-destructive]:focus-visible{color:#fff;background:var(--ntf-red)}.ntf-menu-sep{background:var(--ntf-separator);height:1px;margin:5px 10px}.ntf-inline{width:min(var(--ntf-width), 100%);position:relative}@media (prefers-reduced-motion:reduce){.ntf-root *,.ntf-root :before,.ntf-root :after{transition-duration:.01ms!important}}
+.ntf-root{--ntf-width:356px;--ntf-radius:24px;--ntf-gap:10px;--ntf-ox:16px;--ntf-oy:16px;--ntf-inner-radius:max(8px, calc(var(--ntf-radius) - 12px));--ntf-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;--ntf-label:#000000e0;--ntf-label-2:#00000080;--ntf-fill:#0000000e;--ntf-fill-2:#00000017;--ntf-fill-3:#00000021;--ntf-separator:#0000001a;--ntf-tint:var(--ntf-accent,#007aff);--ntf-red:#ff3b30;--ntf-urgent:#ff9500;--ntf-focus:#5e5ce6;--ntf-close-bg:#fcfcfcf5;--ntf-close-fg:#0000009e;--ntf-close-edge:#00000024;--ntf-menu-bg:#f6f6f6d1;--ntf-menu-shadow:0 0 0 .5px #00000024, inset 0 .5px 0 #ffffffb3, 0 12px 36px #0003, 0 2px 8px #00000014;--ntf-bg:#fff9;--ntf-peek-bg:#ffffff73;--ntf-filter:blur(22px) saturate(190%);--ntf-shadow:0 0 0 .5px #00000017, inset 0 1px .5px #fffffff2, inset 0 -.5px .5px #ffffff80, 0 10px 34px #0000001f, 0 2px 8px #0000000d;--ntf-peek-shadow:0 0 0 .5px #00000012, 0 6px 18px #00000014;font-family:var(--ntf-font);letter-spacing:-.08px;color:var(--ntf-label);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px;line-height:16px}.ntf-root:lang(ar),.ntf-root:lang(fa),.ntf-root:lang(ur),.ntf-root:lang(ar) *,.ntf-root:lang(fa) *,.ntf-root:lang(ur) *{letter-spacing:normal}.ntf-root[data-ntf-material=regular]{--ntf-bg:#f6f6f8cc;--ntf-peek-bg:#f0f0f2b3;--ntf-filter:blur(30px) saturate(180%);--ntf-shadow:0 0 0 .5px #0000001f, 0 8px 26px #00000024, 0 1px 4px #0000000d}.ntf-root[data-ntf-material=thick]{--ntf-bg:#f9f9faed;--ntf-peek-bg:#f2f2f4e6;--ntf-filter:blur(40px) saturate(170%);--ntf-shadow:0 0 0 .5px #0000001f, 0 8px 26px #00000026, 0 1px 4px #0000000d}.ntf-root[data-ntf-material=solid]{--ntf-bg:#f6f6f8;--ntf-peek-bg:#ebebee;--ntf-filter:none;--ntf-shadow:0 0 0 .5px #0000001f, 0 8px 26px #00000024, 0 1px 4px #0000000d}.ntf-root[data-ntf-theme=dark]{--ntf-label:#ffffffeb;--ntf-label-2:#ffffff8c;--ntf-fill:#ffffff1a;--ntf-fill-2:#ffffff26;--ntf-fill-3:#fff3;--ntf-separator:#ffffff1f;--ntf-tint:var(--ntf-accent,#0a84ff);--ntf-red:#ff453a;--ntf-urgent:#ff9f0a;--ntf-focus:#6e6af0;--ntf-close-bg:#48484af5;--ntf-close-fg:#ffffffd1;--ntf-close-edge:#00000080;--ntf-menu-bg:#2a2a2ccc;--ntf-menu-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff24, 0 12px 36px #00000073;--ntf-bg:#1e1e20b8;--ntf-peek-bg:#1e1e2099;--ntf-shadow:0 0 0 .5px #0000008c, inset 0 .5px .5px #ffffff47, inset 0 0 0 .5px #ffffff12, 0 12px 38px #0000005c;--ntf-peek-shadow:0 0 0 .5px #00000080, inset 0 0 0 .5px #ffffff0f, 0 6px 18px #0000003d}.ntf-root[data-ntf-theme=dark][data-ntf-material=regular]{--ntf-bg:#28282ad6;--ntf-peek-bg:#28282abd;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0006}.ntf-root[data-ntf-theme=dark][data-ntf-material=thick]{--ntf-bg:#242426eb;--ntf-peek-bg:#242426d9;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0000006b}.ntf-root[data-ntf-theme=dark][data-ntf-material=solid]{--ntf-bg:#2c2c2e;--ntf-peek-bg:#242426;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1a, 0 10px 30px #0000006b}@media (prefers-color-scheme:dark){.ntf-root[data-ntf-theme=system]{--ntf-label:#ffffffeb;--ntf-label-2:#ffffff8c;--ntf-fill:#ffffff1a;--ntf-fill-2:#ffffff26;--ntf-fill-3:#fff3;--ntf-separator:#ffffff1f;--ntf-tint:var(--ntf-accent,#0a84ff);--ntf-red:#ff453a;--ntf-urgent:#ff9f0a;--ntf-focus:#6e6af0;--ntf-close-bg:#48484af5;--ntf-close-fg:#ffffffd1;--ntf-close-edge:#00000080;--ntf-menu-bg:#2a2a2ccc;--ntf-menu-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff24, 0 12px 36px #00000073;--ntf-bg:#1e1e20b8;--ntf-peek-bg:#1e1e2099;--ntf-shadow:0 0 0 .5px #0000008c, inset 0 .5px .5px #ffffff47, inset 0 0 0 .5px #ffffff12, 0 12px 38px #0000005c;--ntf-peek-shadow:0 0 0 .5px #00000080, inset 0 0 0 .5px #ffffff0f, 0 6px 18px #0000003d}.ntf-root[data-ntf-theme=system][data-ntf-material=regular]{--ntf-bg:#28282ad6;--ntf-peek-bg:#28282abd;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0006}.ntf-root[data-ntf-theme=system][data-ntf-material=thick]{--ntf-bg:#242426eb;--ntf-peek-bg:#242426d9;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1f, 0 10px 30px #0000006b}.ntf-root[data-ntf-theme=system][data-ntf-material=solid]{--ntf-bg:#2c2c2e;--ntf-peek-bg:#242426;--ntf-shadow:0 0 0 .5px #0009, inset 0 0 0 .5px #ffffff1a, 0 10px 30px #0000006b}}.ntf-root *,.ntf-root :before,.ntf-root :after{box-sizing:border-box}.ntf-root button{font:inherit;letter-spacing:inherit;cursor:default;-webkit-tap-highlight-color:transparent}.ntf-viewport{z-index:2147483000;gap:var(--ntf-gap);width:min(var(--ntf-width), calc(100vw - 2 * var(--ntf-ox)));pointer-events:none;flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:fixed}.ntf-viewport[data-y=top]{top:calc(var(--ntf-oy) + env(safe-area-inset-top,0px))}.ntf-viewport[data-y=bottom]{bottom:calc(var(--ntf-oy) + env(safe-area-inset-bottom,0px));flex-direction:column-reverse}.ntf-viewport[data-x=right]{right:var(--ntf-ox)}.ntf-viewport[data-x=left]{left:var(--ntf-ox)}.ntf-viewport[data-x=center]{margin-inline:auto;left:0;right:0}.ntf-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ntf-group{pointer-events:auto;touch-action:pan-y;width:100%;list-style:none;position:relative}.ntf-group[data-collapsed]{padding-bottom:8px}.ntf-group[data-collapsed][data-depth="2"]{padding-bottom:15px}.ntf-stack{isolation:isolate;gap:var(--ntf-gap);flex-direction:column;display:flex;position:relative}.ntf-slot{touch-action:pan-y;position:relative}.ntf-peeks{z-index:-1;pointer-events:none;position:absolute;inset:0}.ntf-peek{z-index:2;border-radius:var(--ntf-radius);background:var(--ntf-peek-bg);height:40px;backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-peek-shadow);position:absolute;bottom:-8px;left:11px;right:11px}.ntf-peek[data-depth="2"]{z-index:1;opacity:.8;bottom:-15px;left:22px;right:22px}.ntf-group-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.ntf-group-title{white-space:nowrap;text-overflow:ellipsis;background:var(--ntf-bg);min-width:0;height:26px;backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-peek-shadow);border-radius:13px;padding:0 11px;font-size:13px;font-weight:600;line-height:26px;overflow:hidden}.ntf-group-buttons{flex:none;gap:6px;display:flex}.ntf-pill{height:26px;color:var(--ntf-label);background:var(--ntf-bg);backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-peek-shadow);border:0;border-radius:13px;padding:0 11px;font-size:12px;font-weight:500;transition:background-color .15s,transform .15s}.ntf-pill:active{transform:scale(.96)}.ntf-pill-icon{width:26px;color:var(--ntf-label-2);place-items:center;padding:0;display:grid}.ntf-pill:focus-visible,.ntf-chevron:focus-visible,.ntf-close:focus-visible,.ntf-action:focus-visible,.ntf-focus:focus-visible{outline:2px solid var(--ntf-tint);outline-offset:2px}.ntf-card{border-radius:var(--ntf-radius);background:var(--ntf-bg);width:100%;backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-shadow);color:var(--ntf-label);text-align:start;cursor:default;-webkit-user-select:none;user-select:none;outline:none;padding-block:12px;padding-inline:12px 14px;transition:box-shadow .2s;position:relative}.ntf-card:focus-visible{box-shadow:var(--ntf-shadow), 0 0 0 3px color-mix(in srgb, var(--ntf-tint) 55%, transparent)}.ntf-main{align-items:center;gap:10px;min-height:38px;display:flex}.ntf-media{flex:none;width:38px;height:38px;position:relative}.ntf-appicon{object-fit:cover;border-radius:23%;place-items:center;width:100%;height:100%;display:grid;overflow:hidden;box-shadow:0 .5px 1.5px #00000038,inset 0 0 0 .5px #0000000f}.ntf-appicon>svg{width:100%;height:100%;display:block}.ntf-monogram{color:#fff;letter-spacing:0;font-size:17px;font-weight:600}.ntf-avatar{object-fit:cover;color:#fff;letter-spacing:.01em;background:linear-gradient(#a9afbb,#868b96);border-radius:50%;place-items:center;width:100%;height:100%;padding-block:0 3px;padding-inline:0 4px;font-size:13px;font-weight:600;display:grid}.ntf-badge{inset-inline-end:-5px;width:17px;height:17px;position:absolute;bottom:-4px}.ntf-badge .ntf-appicon{box-shadow:0 0 0 1px var(--ntf-close-bg), 0 1px 2px #00000040}.ntf-badge .ntf-monogram{font-size:10px}.ntf-text{flex:1;min-width:0}.ntf-eyebrow{letter-spacing:.02em;text-transform:uppercase;color:var(--ntf-urgent);margin-bottom:1px;font-size:11px;font-weight:600;line-height:13px}.ntf-head{align-items:center;gap:8px;display:flex}.ntf-title,.ntf-subtitle,.ntf-body{text-align:match-parent;text-align:-webkit-match-parent;unicode-bidi:plaintext}.ntf-title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:600;overflow:hidden}.ntf-card[data-expanded] .ntf-title{white-space:normal}.ntf-meta{flex:none;justify-content:flex-end;align-items:center;min-width:20px;height:16px;display:flex;position:relative}.ntf-time{color:var(--ntf-label-2);white-space:nowrap;font-size:12px;transition:opacity .15s}.ntf-chevron{top:50%;width:20px;height:20px;color:var(--ntf-label-2);background:var(--ntf-fill);opacity:0;border:0;border-radius:50%;place-items:center;padding:0;transition:opacity .15s,transform .2s,background-color .15s;display:grid;position:absolute;inset-inline-end:-3px;transform:translateY(-50%)scale(.85)}.ntf-chevron:hover{background:var(--ntf-fill-2)}.ntf-chevron svg{transition:transform .25s cubic-bezier(.32,.72,0,1)}.ntf-card[data-expanded] .ntf-chevron svg{transform:rotate(180deg)}.ntf-card[data-expandable]:hover .ntf-chevron,.ntf-card[data-expandable]:focus-within .ntf-chevron,.ntf-card[data-expanded] .ntf-chevron{opacity:1;transform:translateY(-50%)}.ntf-card[data-expandable]:hover .ntf-time,.ntf-card[data-expandable]:focus-within .ntf-time,.ntf-card[data-expanded] .ntf-time{opacity:0}.ntf-subtitle{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.ntf-card[data-expanded] .ntf-subtitle{white-space:normal}.ntf-body{-webkit-line-clamp:3;line-clamp:3;overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ntf-card[data-expanded] .ntf-body{-webkit-line-clamp:12;line-clamp:12}.ntf-thumb{object-fit:cover;width:40px;height:40px;box-shadow:inset 0 0 0 .5px var(--ntf-separator);border-radius:8px;flex:none}.ntf-progress{background:var(--ntf-fill-2);border-radius:2px;height:4px;margin-top:7px;overflow:hidden}.ntf-progress>span{border-radius:inherit;background:var(--ntf-tint);height:100%;transition:width .45s;display:block}.ntf-close{z-index:2;top:-7px;width:20px;height:20px;color:var(--ntf-close-fg);background:var(--ntf-close-bg);box-shadow:0 0 0 .5px var(--ntf-close-edge), 0 1px 4px #00000029;opacity:0;border:0;border-radius:50%;place-items:center;padding:0;transition:opacity .15s,transform .2s cubic-bezier(.32,.72,0,1);display:grid;position:absolute;inset-inline-start:-7px;transform:scale(.8)}.ntf-card:hover>.ntf-close,.ntf-card:focus-within>.ntf-close,.ntf-root[data-ntf-close=always] .ntf-close{opacity:1;transform:none}.ntf-close:active{transform:scale(.9)}.ntf-extra{overflow:hidden}.ntf-extra-inner{gap:8px;padding-top:10px;display:grid}.ntf-hero{object-fit:cover;border-radius:var(--ntf-inner-radius);width:100%;max-height:220px;display:block}.ntf-actions{grid-template-columns:1fr;gap:6px;display:grid}.ntf-actions[data-count="2"]{grid-template-columns:1fr 1fr}.ntf-action{border-radius:var(--ntf-inner-radius);height:30px;color:var(--ntf-label);background:var(--ntf-fill);white-space:nowrap;text-overflow:ellipsis;border:0;padding:0 10px;font-size:13px;font-weight:500;transition:background-color .15s;overflow:hidden}.ntf-action:hover{background:var(--ntf-fill-2)}.ntf-action:active{background:var(--ntf-fill-3)}.ntf-action[data-destructive]{color:var(--ntf-red)}.ntf-reply{border-radius:var(--ntf-inner-radius);background:var(--ntf-fill);align-items:center;gap:6px;margin:0;padding-block:4px;padding-inline:12px 4px;display:flex}.ntf-reply input{min-width:0;height:24px;font:inherit;letter-spacing:inherit;color:var(--ntf-label);-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;flex:1;padding:0}.ntf-reply input:focus,.ntf-reply input:focus-visible{box-shadow:none;outline:none}.ntf-reply:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--ntf-tint) 45%, transparent)}.ntf-reply input::placeholder{color:var(--ntf-label-2)}.ntf-send{color:#fff;background:var(--ntf-tint);border:0;border-radius:50%;flex:none;place-items:center;width:24px;height:24px;padding:0;transition:opacity .15s,transform .15s;display:grid}.ntf-send:disabled{opacity:.35}.ntf-send:not(:disabled):active{transform:scale(.9)}.ntf-scrim{z-index:2147482999;background:linear-gradient(270deg,#0000002e,#0000 560px);position:fixed;inset:0}.ntf-scrim[data-side=left]{background:linear-gradient(90deg,#0000002e,#0000 560px)}.ntf-center{z-index:2147483001;--ntf-bleed:48px;width:min(calc(var(--ntf-width) + 2 * var(--ntf-ox) + var(--ntf-bleed)), 100vw);padding:calc(var(--ntf-oy) + env(safe-area-inset-top,0px)) var(--ntf-ox) 32px calc(var(--ntf-ox) + var(--ntf-bleed));overscroll-behavior:contain;scrollbar-width:none;flex-direction:column;gap:14px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.ntf-center::-webkit-scrollbar{display:none}.ntf-center[data-side=left]{padding-left:var(--ntf-ox);padding-right:calc(var(--ntf-ox) + var(--ntf-bleed));left:0;right:auto}@media (width<=480px){.ntf-center{--ntf-bleed:0px}}.ntf-center-bar{justify-content:space-between;align-items:center;gap:8px;display:flex}.ntf-focus{height:46px;color:var(--ntf-label);text-align:start;background:var(--ntf-bg);backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-shadow);border:0;border-radius:23px;align-items:center;gap:9px;padding-block:0;padding-inline:8px 14px;display:flex}.ntf-focus-icon{width:30px;height:30px;color:var(--ntf-label);background:var(--ntf-fill-2);border-radius:50%;place-items:center;transition:background-color .2s,color .2s;display:grid}.ntf-focus[aria-pressed=true] .ntf-focus-icon{color:#fff;background:var(--ntf-focus)}.ntf-focus-text{line-height:15px;display:grid}.ntf-focus-text strong{font-weight:600}.ntf-focus-text span{color:var(--ntf-label-2);font-size:12px}.ntf-center-list{gap:var(--ntf-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ntf-empty{border-radius:var(--ntf-radius);text-align:center;color:var(--ntf-label-2);background:var(--ntf-bg);backdrop-filter:var(--ntf-filter);box-shadow:var(--ntf-shadow);margin:0;padding:16px;font-weight:500}.ntf-menu{z-index:2147483002;background:var(--ntf-menu-bg);backdrop-filter:blur(30px)saturate(180%);min-width:196px;box-shadow:var(--ntf-menu-shadow);transform-origin:0 0;border-radius:12px;padding:5px;position:fixed;top:0;left:0}.ntf-menu-item{text-align:start;width:100%;color:var(--ntf-label);white-space:nowrap;background:0 0;border:0;border-radius:6px;outline:none;padding:3px 10px;font-size:13px;line-height:18px;display:block}.ntf-menu-item:hover,.ntf-menu-item:focus-visible{color:#fff;background:var(--ntf-tint)}.ntf-menu-item[data-destructive]{color:var(--ntf-red)}.ntf-menu-item[data-destructive]:hover,.ntf-menu-item[data-destructive]:focus-visible{color:#fff;background:var(--ntf-red)}.ntf-menu-sep{background:var(--ntf-separator);height:1px;margin:5px 10px}.ntf-inline{width:min(var(--ntf-width), 100%);position:relative}@media (prefers-reduced-motion:reduce){.ntf-root *,.ntf-root :before,.ntf-root :after{transition-duration:.01ms!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ythknn/notify",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "macOS-style notifications for React and Next.js: banners that stack, swipe away, expand for actions and take inline replies, plus a Notification Center.",
   "keywords": [
     "notifications",