dotnotify 1.0.0

package/dist/dotnotify.min.js

@@ -0,0 +1,6 @@
+/*!
+ * DotNotify v1.0.0
+ * iOS-glass particle notification library
+ * MIT License — https://github.com/yourusername/dotnotify
+ */
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):n.DotNotify=t()}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this,function(){const n={position:"top-right",theme:"ios-glass",sound:!1,maxStack:4,duration:4200,zIndex:99999},t={error:{app:"Security",color:"#ff6b6b",rgb:"255,107,107",tagColor:"rgba(255,120,120,.75)",accentBg:"rgba(255,80,80,.18)",accentBorder:"rgba(255,80,80,.4)",accentText:"#ffaaaa",dots:["#ff5252","#ff1744","#ff6b6b","#ff8a80","#ffffff","#ff4444"],icon:'<svg viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="rgba(255,107,107,.8)" stroke-width="1.2"/><line x1="5.5" y1="5.5" x2="12.5" y2="12.5" stroke="rgba(255,107,107,.9)" stroke-width="1.6" stroke-linecap="round"/><line x1="12.5" y1="5.5" x2="5.5" y2="12.5" stroke="rgba(255,107,107,.9)" stroke-width="1.6" stroke-linecap="round"/></svg>'},success:{app:"Auth",color:"#4ade80",rgb:"74,222,128",tagColor:"rgba(74,222,128,.75)",accentBg:"rgba(74,222,128,.18)",accentBorder:"rgba(74,222,128,.4)",accentText:"#86efac",dots:["#4ade80","#22c55e","#86efac","#bbf7d0","#ffffff","#16a34a"],icon:'<svg viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="rgba(74,222,128,.8)" stroke-width="1.2"/><polyline points="5,9 7.5,12 13,6" stroke="rgba(74,222,128,.95)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>'},warning:{app:"Session",color:"#fbbf24",rgb:"251,191,36",tagColor:"rgba(251,191,36,.75)",accentBg:"rgba(251,191,36,.18)",accentBorder:"rgba(251,191,36,.4)",accentText:"#fde68a",dots:["#fbbf24","#f59e0b","#fcd34d","#fde68a","#ffffff","#d97706"],icon:'<svg viewBox="0 0 18 18" fill="none"><path d="M9 2L16.5 15H1.5L9 2Z" stroke="rgba(251,191,36,.8)" stroke-width="1.2" stroke-linejoin="round"/><line x1="9" y1="7" x2="9" y2="11" stroke="rgba(251,191,36,.95)" stroke-width="1.6" stroke-linecap="round"/><circle cx="9" cy="13.2" r="0.9" fill="rgba(251,191,36,.95)"/></svg>'},info:{app:"System",color:"#818cf8",rgb:"129,140,248",tagColor:"rgba(129,140,248,.75)",accentBg:"rgba(129,140,248,.18)",accentBorder:"rgba(129,140,248,.4)",accentText:"#c7d2fe",dots:["#818cf8","#6366f1","#a5b4fc","#c7d2fe","#ffffff","#4f46e5"],icon:'<svg viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="rgba(129,140,248,.8)" stroke-width="1.2"/><circle cx="9" cy="5.8" r="1" fill="rgba(129,140,248,.95)"/><line x1="9" y1="8.5" x2="9" y2="13.5" stroke="rgba(129,140,248,.95)" stroke-width="1.7" stroke-linecap="round"/></svg>'}};function e(n,t,e){const r=Math.max(0,Math.min(1,(e-t.delay)/(1-t.delay+.001))),a=function(n){return n<.5?4*n*n*n:1-Math.pow(-2*n+2,3)/2}(r);t.wb+=t.ws,t.x=t.sx+(t.tx-t.sx)*a+Math.sin(t.wb)*t.wa*(1-a),t.y=t.sy+(t.ty-t.sy)*a+Math.cos(1.3*t.wb)*t.wa*(1-a),t.op=r<.07?r/.07:r>.82?(1-r)/.18:1,t.trail.push({x:t.x,y:t.y}),t.trail.length>10&&t.trail.shift();for(let e=1;e<t.trail.length;e++){const r=e/t.trail.length*.32*t.op*(1-.8*a);r<.015||(n.beginPath(),n.moveTo(t.trail[e-1].x,t.trail[e-1].y),n.lineTo(t.trail[e].x,t.trail[e].y),n.strokeStyle=t.col+Math.round(255*r).toString(16).padStart(2,"0"),n.lineWidth=.6*t.r,n.lineCap="round",n.stroke())}const o=t.r*(1+.2*Math.sin(10*e*800+t.wb))*(1-.2*a),i=n.createRadialGradient(t.x,t.y,0,t.x,t.y,4.5*o);return i.addColorStop(0,t.col+Math.round(.4*t.op*255).toString(16).padStart(2,"0")),i.addColorStop(1,t.col+"00"),n.beginPath(),n.arc(t.x,t.y,4.5*o,0,2*Math.PI),n.fillStyle=i,n.fill(),n.beginPath(),n.arc(t.x,t.y,o,0,2*Math.PI),n.fillStyle=t.col+Math.round(255*t.op).toString(16).padStart(2,"0"),n.fill(),t.op>.4&&o>2&&(n.beginPath(),n.arc(t.x-.3*o,t.y-.3*o,.3*o,0,2*Math.PI),n.fillStyle="rgba(255,255,255,"+.6*t.op+")",n.fill()),r<1}const r=155;function a(n,t){const e=window.innerWidth,a=window.innerHeight;return{x:n.includes("right")?e-320-20:20,y:n.includes("top")?20+165*t:a-r-20-165*t}}function o(n,t,e,r,a){const o=!!n.progressStyle&&"ring"===n.progressStyle,i=document.createElement("div");i.className=`dn-card theme-${r}`,e.includes("left")&&i.classList.add("pos-left"),i.style.cssText=[`--dn-color:${t.color}`,`--dn-accent-bg:${t.accentBg}`,`--dn-accent-border:${t.accentBorder}`,`--dn-accent-text:${t.accentText}`].join(";");const s=n.thumbnail?`<img class="dn-thumb" src="${"string"==typeof n.thumbnail?n.thumbnail:""}" alt="thumb">`:"",d=(n.actions||[]).map((n,t)=>`<button class="dn-action${0===t&&n.primary?" dn-primary":""}" data-act="${n.label}">${n.label}</button>`).join("");if(i.innerHTML=`\n      <div class="dn-body">\n        <div class="dn-row">\n          ${function(n,t,e){let r;if(n.image){const t="string"==typeof n.image?n.image:n.image instanceof HTMLImageElement?n.image.src:null;r=t?`<img src="${t}" alt="notification image" style="width:${e?32:40}px;height:${e?32:40}px;border-radius:${e?9:11}px;object-fit:cover">`:n.image instanceof File?'<span class="dn-emoji" data-file="1">📷</span>':`<span class="dn-emoji">${n.icon||"🔔"}</span>`}else r=n.icon?n.icon.startsWith("<")?n.icon:`<span class="dn-emoji">${n.icon}</span>`:t.icon;if(e){const n=19,e=2*Math.PI*n;return`<div class="dn-ring-wrap">\n        <svg class="dn-ring-svg" viewBox="0 0 44 44">\n          <circle class="dn-ring-bg" cx="22" cy="22" r="${n}"/>\n          <circle class="dn-ring-fill" cx="22" cy="22" r="${n}" stroke="${t.color}" style="stroke-dasharray:${e};stroke-dashoffset:0"/>\n        </svg>\n        <div class="dn-ring-inner">${r}</div>\n      </div>`}return`<div class="dn-pill" style="box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 18px rgba(${t.rgb},.22),0 2px 8px rgba(0,0,0,.25);border-color:rgba(${t.rgb},.35)">${r}</div>`}(n,t,o)}\n          <div class="dn-txt">\n            <div class="dn-app" style="color:rgba(${t.rgb},.65)">${n.app||t.app}</div>\n            <div class="dn-title">${n.title||"Notification"}</div>\n            <div class="dn-msg">${n.message||""}</div>\n          </div>\n          ${s}\n          <button class="dn-close">✕</button>\n        </div>\n      </div>\n      ${d?`<div class="dn-actions">${d}</div>`:""}\n      <div class="dn-sep"></div>\n      <div class="dn-foot">\n        <span class="dn-time">just now</span>\n        <span class="dn-tag" style="color:${t.tagColor};border-color:rgba(${t.rgb},.18)">${n.type||"info"}</span>\n      </div>\n      ${o?"":'<div class="dn-dotbar"></div>'}\n    `,n.image instanceof File){const t=new FileReader;t.onload=n=>{const t=i.querySelector("[data-file]");if(t){const e=document.createElement("img");e.src=n.target.result,e.style.cssText="width:40px;height:40px;border-radius:11px;object-fit:cover;position:relative;z-index:1",t.replaceWith(e)}},t.readAsDataURL(n.image)}return i}return function(i){const s=Object.assign({},n,i);!function(){if(document.getElementById("dotnotify-styles"))return;const n=document.createElement("style");n.id="dotnotify-styles",n.textContent="\n      .dn-stage {\n        position: fixed;\n        inset: 0;\n        pointer-events: none;\n        z-index: var(--dn-z, 99999);\n      }\n      .dn-canvas {\n        position: fixed;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: var(--dn-z, 99999);\n      }\n\n      /* ── CARD ── */\n      .dn-card {\n        position: fixed;\n        width: 320px;\n        pointer-events: auto;\n        opacity: 0;\n        transform: scale(.72) translateY(-10px);\n        transform-origin: top right;\n        border-radius: 20px;\n        overflow: hidden;\n        transition: top .38s cubic-bezier(.34,1.2,.64,1);\n        will-change: transform, top, opacity;\n        user-select: none;\n        cursor: default;\n      }\n      .dn-card.pos-left { transform-origin: top left; }\n\n      /* Themes */\n      .dn-card.theme-ios-glass {\n        background: rgba(28,28,32,.55);\n        backdrop-filter: blur(40px) saturate(220%) brightness(110%);\n        -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(110%);\n        border: 0.5px solid rgba(255,255,255,.22);\n        box-shadow:\n          0 0 0 0.5px rgba(255,255,255,.08) inset,\n          0 1px 0 rgba(255,255,255,.15) inset,\n          0 4px 8px rgba(0,0,0,.12),\n          0 12px 32px rgba(0,0,0,.4),\n          0 40px 64px rgba(0,0,0,.3);\n      }\n      .dn-card.theme-ios-glass::before {\n        content: '';\n        position: absolute; top: 0; left: 0; right: 0; height: 50%;\n        background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 100%);\n        border-radius: 20px 20px 0 0;\n        pointer-events: none; z-index: 0;\n      }\n      .dn-card.theme-dark {\n        background: rgba(10,10,12,.82);\n        backdrop-filter: blur(32px) saturate(180%);\n        -webkit-backdrop-filter: blur(32px) saturate(180%);\n        border: 0.5px solid rgba(255,255,255,.14);\n        box-shadow: 0 0 0 0.5px rgba(255,255,255,.06) inset, 0 12px 40px rgba(0,0,0,.6);\n      }\n      .dn-card.theme-light {\n        background: rgba(255,255,255,.78);\n        backdrop-filter: blur(32px) saturate(180%);\n        -webkit-backdrop-filter: blur(32px) saturate(180%);\n        border: 0.5px solid rgba(0,0,0,.1);\n        box-shadow: 0 0 0 0.5px rgba(255,255,255,.9) inset, 0 8px 32px rgba(0,0,0,.14);\n      }\n      .dn-card.theme-light .dn-title  { color: rgba(0,0,0,.88) !important; }\n      .dn-card.theme-light .dn-msg    { color: rgba(0,0,0,.5)  !important; }\n      .dn-card.theme-light .dn-app    { color: rgba(0,0,0,.38) !important; }\n      .dn-card.theme-light .dn-time   { color: rgba(0,0,0,.3)  !important; }\n      .dn-card.theme-light .dn-close  { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.35); }\n      .dn-card.theme-light .dn-sep    { background: linear-gradient(90deg,transparent,rgba(0,0,0,.08) 20%,rgba(0,0,0,.06) 80%,transparent); }\n      .dn-card.theme-light .dn-tag    { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }\n      .dn-card.theme-light .dn-dp     { background: rgba(0,0,0,.18); }\n      .dn-card.theme-minimal {\n        background: rgba(16,16,18,.9);\n        backdrop-filter: blur(20px) saturate(160%);\n        -webkit-backdrop-filter: blur(20px) saturate(160%);\n        border: 0.5px solid rgba(255,255,255,.1);\n        box-shadow: 0 8px 24px rgba(0,0,0,.5);\n      }\n\n      /* animations */\n      .dn-card.dn-show  { animation: dn-in .44s cubic-bezier(.28,1.35,.5,1) forwards; }\n      .dn-card.dn-hide  { animation: dn-out .44s cubic-bezier(.4,0,1,1) forwards; }\n      .dn-card.dn-swipe-left  { animation: dn-swipe-l .32s ease forwards; }\n      .dn-card.dn-swipe-right { animation: dn-swipe-r .32s ease forwards; }\n\n      @keyframes dn-in    { 0%{opacity:0;transform:scale(.72) translateY(-10px)} 60%{opacity:1} 100%{opacity:1;transform:scale(1) translateY(0)} }\n      @keyframes dn-out   { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.88) translateY(-8px)} }\n      @keyframes dn-swipe-l { 0%{opacity:1;transform:translateX(0)} 100%{opacity:0;transform:translateX(-130%)} }\n      @keyframes dn-swipe-r { 0%{opacity:1;transform:translateX(0)} 100%{opacity:0;transform:translateX(130%)} }\n\n      /* ── BODY ── */\n      .dn-body   { position: relative; z-index: 2; padding: 14px 16px 10px; }\n      .dn-row    { display: flex; align-items: flex-start; gap: 12px; }\n\n      /* icon pill */\n      .dn-pill {\n        flex-shrink: 0;\n        width: 40px; height: 40px; border-radius: 12px;\n        display: flex; align-items: center; justify-content: center;\n        position: relative; overflow: hidden;\n        background: rgba(255,255,255,.1);\n        border: 0.5px solid rgba(255,255,255,.2);\n        box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25);\n      }\n      .dn-pill::before {\n        content: '';\n        position: absolute; top: 0; left: 0; right: 0; height: 55%;\n        background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 100%);\n        border-radius: 12px 12px 0 0;\n      }\n      .dn-pill svg, .dn-pill img, .dn-pill .dn-emoji {\n        position: relative; z-index: 1;\n      }\n      .dn-pill img {\n        width: 40px; height: 40px;\n        border-radius: 11px;\n        object-fit: cover;\n      }\n      .dn-pill .dn-emoji { font-size: 20px; line-height: 1; }\n\n      /* ring mode */\n      .dn-ring-wrap  { width: 44px; height: 44px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n      .dn-ring-svg   { position: absolute; inset: 0; transform: rotate(-90deg); }\n      .dn-ring-bg    { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2.5; }\n      .dn-ring-fill  { fill: none; stroke-width: 2.5; stroke-linecap: round; }\n      .dn-ring-inner {\n        width: 32px; height: 32px; border-radius: 10px;\n        display: flex; align-items: center; justify-content: center;\n        background: rgba(255,255,255,.1);\n        border: 0.5px solid rgba(255,255,255,.15);\n      }\n      .dn-ring-inner img   { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }\n      .dn-ring-inner .dn-emoji { font-size: 16px; }\n\n      /* image thumbnail */\n      .dn-thumb {\n        flex-shrink: 0; margin-top: 2px;\n        width: 48px; height: 48px; border-radius: 10px;\n        object-fit: cover;\n        border: 0.5px solid rgba(255,255,255,.15);\n      }\n\n      /* typography */\n      .dn-txt    { flex: 1; min-width: 0; }\n      .dn-app    { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 3px; line-height: 1; font-family: inherit; }\n      .dn-title  { font-size: 14px; font-weight: 600; letter-spacing: -.022em; line-height: 1.25; color: rgba(255,255,255,.95); font-family: inherit; }\n      .dn-msg    { font-size: 12.5px; font-weight: 300; line-height: 1.5; margin-top: 3px; color: rgba(255,255,255,.55); font-family: inherit; }\n\n      /* close */\n      .dn-close {\n        flex-shrink: 0; margin-top: -2px;\n        width: 22px; height: 22px; border-radius: 50%;\n        background: rgba(255,255,255,.1); border: 0.5px solid rgba(255,255,255,.15);\n        color: rgba(255,255,255,.4); font-size: 10px; cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: background .15s, color .15s;\n        font-family: inherit;\n      }\n      .dn-close:hover { background: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }\n\n      /* actions */\n      .dn-actions { display: flex; gap: 7px; padding: 0 16px 10px; position: relative; z-index: 2; }\n      .dn-action {\n        flex: 1; padding: 7px 10px; border-radius: 10px;\n        border: 0.5px solid rgba(255,255,255,.14);\n        background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);\n        font-family: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer;\n        transition: background .15s, border-color .15s; text-align: center;\n      }\n      .dn-action:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }\n      .dn-action.dn-primary {\n        background: var(--dn-accent-bg);\n        border-color: var(--dn-accent-border);\n        color: var(--dn-accent-text);\n      }\n      .dn-action.dn-primary:hover { filter: brightness(1.15); }\n\n      /* footer */\n      .dn-sep  { height: 0.5px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.08) 80%, transparent); }\n      .dn-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px; position: relative; z-index: 2; }\n      .dn-time { font-size: 10px; color: rgba(255,255,255,.25); letter-spacing: .02em; font-family: inherit; }\n      .dn-tag  { font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.08); border: 0.5px solid rgba(255,255,255,.12); font-family: inherit; }\n\n      /* dot progress */\n      .dn-dotbar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px 12px; position: relative; z-index: 2; }\n      .dn-dp {\n        width: 5px; height: 5px; border-radius: 50%;\n        background: rgba(255,255,255,.22); flex-shrink: 0; cursor: default;\n        transition:\n          width .35s cubic-bezier(.34,1.56,.64,1),\n          height .35s cubic-bezier(.34,1.56,.64,1),\n          background .3s ease, box-shadow .3s ease, opacity .3s ease;\n      }\n      .dn-dp.dn-active {\n        background: var(--dn-color);\n        box-shadow: 0 0 8px var(--dn-color), 0 0 18px color-mix(in srgb, var(--dn-color) 40%, transparent);\n      }\n      .dn-dp.dn-done   { width: 3px; height: 3px; background: rgba(255,255,255,.1); box-shadow: none; opacity: .5; }\n      .dn-dp.dn-hovered { width: 12px !important; height: 12px !important; background: var(--dn-color) !important; box-shadow: 0 0 12px var(--dn-color), 0 0 28px color-mix(in srgb, var(--dn-color) 50%, transparent) !important; opacity: 1 !important; }\n      .dn-dotbar.dn-paused .dn-dp:not(.dn-done):not(.dn-hovered) { width: 8px !important; height: 8px !important; background: var(--dn-color) !important; box-shadow: 0 0 7px var(--dn-color) !important; opacity: .75 !important; }\n      .dn-dotbar.dn-paused .dn-dp.dn-done:not(.dn-hovered) { width: 5px !important; height: 5px !important; background: rgba(255,255,255,.18) !important; opacity: .35 !important; }\n    ",document.head.appendChild(n)}();const d=function(n){let t=document.getElementById("dn-canvas");return t||(t=document.createElement("canvas"),t.id="dn-canvas",t.className="dn-canvas",t.style.zIndex=n,t.style.pointerEvents="none",document.body.appendChild(t)),t.width=window.innerWidth,t.height=window.innerHeight,t}(s.zIndex-1),c=d.getContext("2d");window.addEventListener("resize",()=>{d.width=window.innerWidth,d.height=window.innerHeight});let l=document.getElementById("dn-stage");l||(l=document.createElement("div"),l.id="dn-stage",l.className="dn-stage",l.style.zIndex=s.zIndex,document.body.appendChild(l));let p=[];const g=[];let h=null;function f(n){const t=p.findIndex(t=>t.el===n);if(t>-1&&p.splice(t,1),p.forEach((n,t)=>{const{x:e,y:r}=a(s.position,t);n.el.style.left=e+"px",n.el.style.top=r+"px",n.x=e,n.y=r}),g.length>0&&p.length<s.maxStack){const n=g.shift();setTimeout(()=>b(n.opts,n.resolve),120)}}function b(n,e){const i=t[n.type]||t.info,d=n.theme||s.theme,g=n.duration||s.duration,h=p.length,{x:b,y:x}=a(s.position,h),m="ring"===n.progressStyle,u=o(n,i,s.position,d);u.style.left=b+"px",u.style.top=x+"px",u.style.zIndex=s.zIndex,l.appendChild(u),requestAnimationFrame(()=>u.classList.add("dn-show")),(s.sound||n.sound)&&function(n){try{const t=new(window.AudioContext||window.webkitAudioContext),e=t.createOscillator(),r=t.createGain();e.connect(r),r.connect(t.destination);const a={error:[440,330],success:[523,659],warning:[466,440],info:[587,659]}[n]||[440,523];e.frequency.setValueAtTime(a[0],t.currentTime),e.frequency.exponentialRampToValueAtTime(a[1],t.currentTime+.12),e.type="sine",r.gain.setValueAtTime(0,t.currentTime),r.gain.linearRampToValueAtTime(.055,t.currentTime+.01),r.gain.exponentialRampToValueAtTime(.001,t.currentTime+.22),e.start(t.currentTime),e.stop(t.currentTime+.25)}catch(n){}}(n.type||"info");let y=null;const w=(n,t)=>{y&&y.destroy(),u.classList.remove("dn-show"),"swipe-left"===n?u.classList.add("dn-swipe-left"):"swipe-right"===n?u.classList.add("dn-swipe-right"):u.classList.add("dn-hide");const a=parseInt(u.style.left),o=parseInt(u.style.top),s=n.startsWith("swipe")?320:260;setTimeout(()=>{u.remove(),f(u);const s=function(n,t,e,r,a){return Array.from({length:52},()=>{const o=t+Math.random()*r,i=e+Math.random()*a,s=Math.random()*Math.PI*2,d=110+270*Math.random();return{sx:o,sy:i,x:o,y:i,tx:o+Math.cos(s)*d+60*(Math.random()-.5),ty:i+Math.sin(s)*d+60*(Math.random()-.5),r:1+3.5*Math.random(),col:n.dots[Math.floor(Math.random()*n.dots.length)],delay:.28*Math.random(),wb:Math.random()*Math.PI*2,ws:.04+.07*Math.random(),wa:.3+1.2*Math.random(),trail:[],op:0}})}(i,a,o,320,r);!function(n,t,e){const r=performance.now();let a;a=requestAnimationFrame(function o(i){const s=(i-r)/640;n.clearRect(0,0,n.canvas.width,n.canvas.height);let d=!1;for(const e of t){const t=Math.max(0,Math.min(1,(s-e.delay)/(1-e.delay+.001))),r=1-Math.pow(1-t,3);e.wb+=e.ws,e.x=e.sx+(e.tx-e.sx)*r,e.y=e.sy+(e.ty-e.sy)*r,e.op=t<.08?t/.08:Math.pow(1-t,1.5),e.trail.push({x:e.x,y:e.y}),e.trail.length>7&&e.trail.shift();for(let t=1;t<e.trail.length;t++){const r=t/e.trail.length*.25*e.op;r<.01||(n.beginPath(),n.moveTo(e.trail[t-1].x,e.trail[t-1].y),n.lineTo(e.trail[t].x,e.trail[t].y),n.strokeStyle=e.col+Math.round(255*r).toString(16).padStart(2,"0"),n.lineWidth=.5*e.r,n.lineCap="round",n.stroke())}const a=e.r*(1-.4*r),o=n.createRadialGradient(e.x,e.y,0,e.x,e.y,3.5*a);o.addColorStop(0,e.col+Math.round(.42*e.op*255).toString(16).padStart(2,"0")),o.addColorStop(1,e.col+"00"),n.beginPath(),n.arc(e.x,e.y,3.5*a,0,2*Math.PI),n.fillStyle=o,n.fill(),n.beginPath(),n.arc(e.x,e.y,a,0,2*Math.PI),n.fillStyle=e.col+Math.round(255*e.op).toString(16).padStart(2,"0"),n.fill(),t<1&&(d=!0)}d?a=requestAnimationFrame(o):(n.clearRect(0,0,n.canvas.width,n.canvas.height),e&&e())})}(c,s),e&&e({dismissed:n,action:t})},s)};setTimeout(()=>{y=m?function(n,t,e,r){const a=n.querySelector(".dn-ring-fill");if(!a)return{destroy:()=>{}};const o=2*Math.PI*19;a.style.strokeDasharray=o,a.style.strokeDashoffset=0;let i,s=0,d=Date.now(),c=!1;return n.addEventListener("mouseenter",()=>{c||(c=!0,s+=Date.now()-d)}),n.addEventListener("mouseleave",()=>{c&&(c=!1,d=Date.now())}),i=requestAnimationFrame(function n(){const t=c?s:s+(Date.now()-d),l=Math.min(1,t/e);a.style.strokeDashoffset=o*l,l>=1?r():i=requestAnimationFrame(n)}),{destroy:()=>cancelAnimationFrame(i)}}(u,0,g,()=>w("timeout")):function(n,t,e,r){const a=n.querySelector(".dn-dotbar");if(!a)return{destroy:()=>{}};let o=0,i=!1,s=0,d=Date.now(),c=null;const l=e/14;for(let n=0;n<14;n++){const n=document.createElement("div");n.className="dn-dp",n.style.setProperty("--dn-color",t.color),n.addEventListener("mouseenter",()=>n.classList.add("dn-hovered")),n.addEventListener("mouseleave",()=>n.classList.remove("dn-hovered")),a.appendChild(n)}const p=()=>a.querySelectorAll(".dn-dp");function g(){c=setTimeout(h,Math.max(0,l-s))}function h(){if(i)return;const n=p();n[o].classList.remove("dn-active"),n[o].classList.add("dn-done"),o++,s=0,d=Date.now(),o>=14?r():(n[o].classList.add("dn-active"),g())}return p()[0].classList.add("dn-active"),d=Date.now(),n.addEventListener("mouseenter",()=>{i||(i=!0,s+=Date.now()-d,a.classList.add("dn-paused"),clearTimeout(c))}),n.addEventListener("mouseleave",()=>{i&&(i=!1,a.classList.remove("dn-paused"),d=Date.now(),g())}),g(),{destroy:()=>clearTimeout(c)}}(u,i,g,()=>w("timeout"))},450),u.querySelector(".dn-close").addEventListener("click",()=>w("close")),(n.actions||[]).forEach(n=>{const t=u.querySelector(`[data-act="${n.label}"]`);t&&t.addEventListener("click",()=>{n.onClick&&n.onClick(),w("action",n.label)})}),function(n,t){let e=0,r=!1,a=0;const o=n=>{const t=n.touches?n.touches[0]:n;e=t.clientX,r=!0,a=0},i=t=>{if(!r)return;const o=(t.touches?t.touches[0]:t).clientX-e;a=o,n.style.transform="translateX("+o+"px)",n.style.opacity=String(1-Math.abs(o)/220)},s=()=>{r&&(r=!1,Math.abs(a)>80?t(a>0?"right":"left"):(n.style.transform="",n.style.opacity=""))};n.addEventListener("mousedown",o),n.addEventListener("mousemove",i),n.addEventListener("mouseup",s),n.addEventListener("mouseleave",()=>{r&&(r=!1,n.style.transform="",n.style.opacity="")}),n.addEventListener("touchstart",o,{passive:!0}),n.addEventListener("touchmove",i,{passive:!0}),n.addEventListener("touchend",s)}(u,n=>w("swipe-"+n)),p.push({el:u,x:b,y:x,kill:()=>w("external")})}return{fire:function(n){return new Promise(o=>{if(p.length>=s.maxStack)g.push({opts:n,resolve:o});else if(0===p.length){const{x:i,y:d}=a(s.position,0),l=function(n,t,e,r,a){const o=window.innerWidth/2,i=window.innerHeight/2;return Array.from({length:65},()=>{const s=Math.random()*Math.PI*2,d=90+260*Math.random(),c={sx:o+Math.cos(s)*d+100*(Math.random()-.5),sy:i+Math.sin(s)*d+100*(Math.random()-.5),tx:t+Math.random()*r,ty:e+Math.random()*a,r:1.2+4*Math.random(),col:n.dots[Math.floor(Math.random()*n.dots.length)],delay:.5*Math.pow(Math.random(),.5),wb:Math.random()*Math.PI*2,ws:.03+.06*Math.random(),wa:.5+2*Math.random(),trail:[],op:0,x:0,y:0};return c.x=c.sx,c.y=c.sy,c})}(t[n.type]||t.info,i,d,320,r);h&&h(),h=function(n,t,r,a){const o=performance.now();let i;return i=requestAnimationFrame(function s(d){const c=(d-o)/r;n.clearRect(0,0,n.canvas.width,n.canvas.height);let l=!1;for(const r of t)e(n,r,c)&&(l=!0);l?i=requestAnimationFrame(s):(n.clearRect(0,0,n.canvas.width,n.canvas.height),a&&a())}),()=>{cancelAnimationFrame(i),n.clearRect(0,0,n.canvas.width,n.canvas.height)}}(c,l,780,()=>{b(n,o)})}else b(n,o)})},dismissAll:function(){[...p].forEach(n=>n.kill())},configure:function(n){Object.assign(s,n)}}}});

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "dotnotify",
+  "version": "1.0.0",
+  "description": "iOS-glass particle notification library — dots fly in, card assembles, dots explode on dismiss. Zero dependencies.",
+  "main": "dist/dotnotify.js",
+  "module": "dist/dotnotify.esm.js",
+  "browser": "dist/dotnotify.min.js",
+  "types": "dist/dotnotify.d.ts",
+  "files": [
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "prepublishOnly": "echo ready"
+  },
+  "keywords": [
+    "notification",
+    "toast",
+    "ios",
+    "glass",
+    "particles",
+    "animation",
+    "ui",
+    "alert",
+    "dotnotify"
+  ],
+  "author": "Sanju sanjusanjay0444@gmail.com",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sanju-github24/dotnotify.git"
+  },
+  "homepage": "https://github.com/sanju-github24/dotnotify#readme",
+  "bugs": {
+    "url": "https://github.com/sanju-github24/dotnotify/issues"
+  },
+  "devDependencies": {
+    "terser": "^5.48.0"
+  },
+  "sideEffects": false
+}