vue-sileo 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sileo-vue contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+<div align="center">
+  <h1>vue-sileo</h1>
+  <p>Physics-based toast notifications for Vue 3</p>
+  <p>
+    <a href="https://www.npmjs.com/package/vue-sileo">
+      <img src="https://img.shields.io/npm/v/vue-sileo" alt="npm" />
+    </a>
+  </p>
+</div>
+
+A Vue 3 port of [sileo](https://github.com/hiaaryan/sileo) by [@hiaaryan](https://github.com/hiaaryan). All credit for the design and animations goes to the original library.
+
+## Installation
+
+```bash
+npm install vue-sileo
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Toaster, sileo } from "vue-sileo";
+import "vue-sileo/styles.css";
+
+function notify() {
+  sileo.success({
+    title: "Success",
+    description: "Your changes have been saved.",
+  });
+}
+</script>
+
+<template>
+  <Toaster position="top-right" />
+  <button @click="notify">Save</button>
+</template>
+```
+
+## API
+
+### Toast Types
+
+```ts
+sileo.success({ title: "Success", description: "Operation completed" });
+sileo.error({ title: "Error", description: "Something went wrong" });
+sileo.warning({ title: "Warning", description: "Please confirm" });
+sileo.info({ title: "Info", description: "New version available" });
+sileo.action({ 
+  title: "Update", 
+  description: "Click to install",
+  button: { title: "Install", onClick: () => {} }
+});
+```
+
+### Promise Handling
+
+```ts
+sileo.promise(
+  fetchData(),
+  {
+    loading: { title: "Loading..." },
+    success: (data) => ({ title: "Done", description: data }),
+    error: (err) => ({ title: "Failed", description: err.message }),
+  }
+);
+```
+
+### Configuration
+
+```vue
+<Toaster 
+  position="top-right"
+  :offset="16"
+  :options="{ duration: 5000, roundness: 18 }"
+/>
+```
+
+**Positions**: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`
+
+### Options
+
+```ts
+{
+  title?: string;
+  description?: string;
+  position?: SileoPosition;
+  duration?: number | null;  // milliseconds, null = infinite
+  fill?: string;             // background color
+  roundness?: number;        // border radius
+  autopilot?: boolean;       // auto expand/collapse
+  button?: { title: string; onClick: () => void };
+}
+```
+
+## Credits
+
+This is a Vue 3 port of [sileo](https://github.com/hiaaryan/sileo) by [@hiaaryan](https://github.com/hiaaryan). Check out the [original library](https://sileo.aaryan.design) and [documentation](https://sileo.aaryan.design/docs).
+
+## License
+
+MIT

package/dist/vue-sileo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);var t=6e3;t*.1;var n=t*.025,r=t-2e3;const i=e=>e.includes(`right`)?`right`:e.includes(`center`)?`center`:`left`,a=e=>e.startsWith(`top`)?`bottom`:`top`,o={toasts:[],listeners:new Set,position:`top-right`,options:void 0,emit(){for(let e of this.listeners)e(this.toasts)},update(e){this.toasts=e(this.toasts),this.emit()}};var s=0,c=()=>`${++s}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,8)}`;const l=e=>`${e.id}:${e.instanceId}`;var u=e=>{let t=o.toasts.find(t=>t.id===e);!t||t.exiting||(o.update(t=>t.map(t=>t.id===e?{...t,exiting:!0}:t)),setTimeout(()=>o.update(t=>t.filter(t=>t.id!==e)),600))},d=(e,t)=>{if(e.autopilot===!1||!t||t<=0)return{};let i=typeof e.autopilot==`object`?e.autopilot:void 0,a=e=>Math.min(t,Math.max(0,e));return{expandDelayMs:a(i?.expand??n),collapseDelayMs:a(i?.collapse??r)}},f=e=>({...o.options,...e,styles:{...o.options?.styles,...e.styles}}),p=(e,t,n)=>{let r=d(e,e.duration??6e3);return{...e,id:t,instanceId:c(),position:e.position??n??o.position,autoExpandDelayMs:r.expandDelayMs,autoCollapseDelayMs:r.collapseDelayMs}},m=e=>{let t=o.toasts.filter(e=>!e.exiting),n=f(e),r=n.id??`sileo-default`,i=t.find(e=>e.id===r),a=p(n,r,i?.position);return i?o.update(e=>e.map(e=>e.id===r?a:e)):o.update(e=>[...e.filter(e=>e.id!==r),a]),{id:r,duration:n.duration??6e3}},h=(e,t)=>{let n=o.toasts.find(t=>t.id===e);if(!n)return;let r=p(f(t),e,n.position);o.update(t=>t.map(t=>t.id===e?r:t))};const g={show:e=>m(e).id,success:e=>m({...e,state:`success`}).id,error:e=>m({...e,state:`error`}).id,warning:e=>m({...e,state:`warning`}).id,info:e=>m({...e,state:`info`}).id,action:e=>m({...e,state:`action`}).id,promise:(e,t)=>{let{id:n}=m({...t.loading,state:`loading`,duration:null,position:t.position}),r=typeof e==`function`?e():e;return r.then(e=>{t.action?h(n,{...typeof t.action==`function`?t.action(e):t.action,state:`action`,id:n}):h(n,{...typeof t.success==`function`?t.success(e):t.success,state:`success`,id:n})}).catch(e=>{h(n,{...typeof t.error==`function`?t.error(e):t.error,state:`error`,id:n})}),r},dismiss:u,clear:e=>o.update(t=>e?t.filter(t=>t.position!==e):[])};var _={xmlns:`http://www.w3.org/2000/svg`,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`};const v=()=>(0,e.h)(`svg`,_,[(0,e.h)(`title`,`Arrow Right`),(0,e.h)(`path`,{d:`M5 12h14`}),(0,e.h)(`path`,{d:`m12 5 7 7-7 7`})]),ee=()=>(0,e.h)(`svg`,_,[(0,e.h)(`title`,`Life Buoy`),(0,e.h)(`circle`,{cx:`12`,cy:`12`,r:`10`}),(0,e.h)(`path`,{d:`m4.93 4.93 4.24 4.24`}),(0,e.h)(`path`,{d:`m14.83 9.17 4.24-4.24`}),(0,e.h)(`path`,{d:`m14.83 14.83 4.24 4.24`}),(0,e.h)(`path`,{d:`m9.17 14.83-4.24 4.24`}),(0,e.h)(`circle`,{cx:`12`,cy:`12`,r:`4`})]),y=()=>(0,e.h)(`svg`,{..._,"data-sileo-icon":`spin`,"aria-hidden":`true`},[(0,e.h)(`title`,`Loader Circle`),(0,e.h)(`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`})]),b=()=>(0,e.h)(`svg`,_,[(0,e.h)(`title`,`X`),(0,e.h)(`path`,{d:`M18 6 6 18`}),(0,e.h)(`path`,{d:`m6 6 12 12`})]),x=()=>(0,e.h)(`svg`,_,[(0,e.h)(`title`,`Circle Alert`),(0,e.h)(`circle`,{cx:`12`,cy:`12`,r:`10`}),(0,e.h)(`line`,{x1:`12`,x2:`12`,y1:`8`,y2:`12`}),(0,e.h)(`line`,{x1:`12`,x2:`12.01`,y1:`16`,y2:`16`})]),te=()=>(0,e.h)(`svg`,_,[(0,e.h)(`title`,`Check`),(0,e.h)(`path`,{d:`M20 6 9 17l-5-5`})]);var ne=[`data-ready`,`data-expanded`,`data-exiting`,`data-edge`,`data-position`,`data-state`],re=[`data-edge`],ie=[`height`,`viewBox`],ae=[`id`],oe=[`stdDeviation`],se=[`filter`],ce=[`x`,`rx`,`ry`,`fill`],le=[`height`,`rx`,`ry`,`fill`],ue=[`data-edge`],de={"data-sileo-header-stack":``},fe=[`data-state`],pe=[`data-state`],me=[`data-state`],he=[`data-state`],ge=[`data-edge`,`data-visible`],_e=[`data-state`],S=40,C=350,ve=18,ye=.5,be=10,xe=2.25,Se=200,Ce=150,we=30,Te=20,w=(0,e.defineComponent)({__name:`Sileo`,props:{id:{},fill:{default:`var(--sileo-fill)`},state:{default:`success`},title:{},description:{},position:{default:`left`},expand:{default:`bottom`},icon:{},styles:{},button:{},roundness:{},exiting:{type:Boolean,default:!1},autoExpandDelayMs:{},autoCollapseDelayMs:{},canExpand:{type:Boolean},interruptKey:{},refreshKey:{}},emits:[`mouseenter`,`mouseleave`,`dismiss`],setup(t,{emit:n}){let r={success:(0,e.h)(te),loading:(0,e.h)(y),error:(0,e.h)(b),warning:(0,e.h)(x),info:(0,e.h)(ee),action:(0,e.h)(v)},i=t,a=n,o=(0,e.computed)(()=>i.title??i.state),s=(0,e.ref)({title:o.value,description:i.description,state:i.state,icon:i.icon,styles:i.styles,button:i.button,fill:i.fill}),c=(0,e.ref)(i.refreshKey),l=(0,e.ref)(!1),u=(0,e.ref)(!1),d=(0,e.ref)(0),f=(0,e.ref)(0),p=(0,e.computed)(()=>!!s.value.description||!!s.value.button),m=(0,e.computed)(()=>s.value.state===`loading`),h=(0,e.computed)(()=>p.value&&l.value&&!m.value),g=(0,e.computed)(()=>m.value?!1:i.canExpand??(!i.interruptKey||i.interruptKey===i.id)),_=(0,e.computed)(()=>`${s.value.state}-${s.value.title}`),w=(0,e.computed)(()=>`sileo-gooey-${i.id}`),T=(0,e.computed)(()=>Math.max(0,i.roundness??ve)),E=(0,e.computed)(()=>T.value*ye),D=(0,e.ref)(null),O=(0,e.ref)(null),k=(0,e.ref)(null),A=(0,e.ref)(null),j=null,M=null,N=null,P=null,F=null,I=i.refreshKey,L=null,R=(0,e.ref)({current:{key:_.value,view:s.value},prev:null}),z=(0,e.computed)(()=>({title:o.value,description:i.description,state:i.state,icon:i.icon,styles:i.styles,button:i.button,fill:i.fill})),B=S*xe,V=(0,e.computed)(()=>p.value?Math.max(B,S+f.value):B),H=V.value,U=(0,e.computed)(()=>h.value?(H=V.value,V.value):H),W=(0,e.computed)(()=>p.value?Math.max(U.value,B):S),Ee=(0,e.computed)(()=>Math.max(0,U.value-S)),G=(0,e.computed)(()=>Math.max(d.value||S,S)),De=(0,e.computed)(()=>S+E.value*3),Oe=(0,e.computed)(()=>i.position===`right`?C-G.value:i.position===`center`?(C-G.value)/2:0),ke=(0,e.computed)(()=>({"--_h":`${h.value?U.value:S}px`,"--_pw":`${G.value}px`,"--_px":`${Oe.value}px`,"--_sy":`${h.value?1:S/De.value}`,"--_ph":`${De.value}px`,"--_by":`${h.value?1:0}`,"--_ht":`translateY(${h.value?i.expand===`bottom`?3:-3:0}px) scale(${h.value?.9:1})`,"--_co":`${h.value?1:0}`})),K=null,q=0,J=null,Y=0;function Ae(){let e=k.value,t=O.value;if(!e||!t)return;if(F===null){let e=getComputedStyle(t);F=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight)}let n=e.scrollWidth+F+be;n>be&&d.value!==n&&(d.value=n)}function je(){Me();let e=k.value;e&&(Ae(),K=new ResizeObserver(()=>{cancelAnimationFrame(q),q=requestAnimationFrame(Ae)}),K.observe(e))}function Me(){K&&=(cancelAnimationFrame(q),K.disconnect(),null)}function Ne(){if(!p.value){f.value=0;return}let e=A.value;if(!e)return;let t=e.scrollHeight;f.value!==t&&(f.value=t)}function X(){Z();let e=A.value;e&&(Ne(),J=new ResizeObserver(()=>{cancelAnimationFrame(Y),Y=requestAnimationFrame(Ne)}),J.observe(e))}function Z(){J&&=(cancelAnimationFrame(Y),J.disconnect(),null)}(0,e.watch)([_,s],()=>{let e=_.value,t=s.value;R.value.current.key===e?R.value.current.view!==t&&(R.value={...R.value,current:{key:e,view:t}}):R.value={prev:R.value.current,current:{key:e,view:t}}},{flush:`sync`}),(0,e.watch)(()=>R.value.current.key,()=>{(0,e.nextTick)(je)}),(0,e.watch)(()=>R.value.prev,e=>{e&&(j&&clearTimeout(j),j=window.setTimeout(()=>{j=null,R.value={...R.value,prev:null}},Ce))}),(0,e.watch)(p,t=>{t?(0,e.nextTick)(X):(f.value=0,Z())}),(0,e.watch)([()=>i.refreshKey,z],()=>{let e=i.refreshKey,t=z.value;if(e===void 0){s.value=t,c.value=void 0,L=null,I=e;return}I!==e&&(I=e,P&&=(clearTimeout(P),null),h.value?(L={key:e,payload:t},l.value=!1,P=window.setTimeout(()=>{P=null,L&&=(s.value=L.payload,c.value=L.key,null)},Se)):(L=null,s.value=t,c.value=e))},{deep:!1}),(0,e.watch)([()=>i.autoCollapseDelayMs,()=>i.autoExpandDelayMs,p,g,()=>i.exiting,c],()=>{if(!p.value)return;if(M&&clearTimeout(M),N&&clearTimeout(N),i.exiting||!g.value){l.value=!1;return}if(i.autoExpandDelayMs==null&&i.autoCollapseDelayMs==null)return;let e=i.autoExpandDelayMs??0,t=i.autoCollapseDelayMs??0;e>0?M=window.setTimeout(()=>l.value=!0,e):l.value=!0,t>0&&(N=window.setTimeout(()=>l.value=!1,t))},{immediate:!0}),(0,e.watch)(h,e=>{e&&(H=V.value)});function Pe(e){a(`mouseenter`,e),p.value&&(l.value=!0)}function Fe(e){a(`mouseleave`,e),l.value=!1}function Ie(e){e.propertyName!==`height`&&e.propertyName!==`transform`||h.value||(L&&=(P&&=(clearTimeout(P),null),s.value=L.payload,c.value=L.key,null))}let Q=null;function Le(e){i.exiting||e.target.closest(`[data-sileo-button]`)||(Q=e.clientY,e.currentTarget.setPointerCapture(e.pointerId))}function Re(e){if(Q===null)return;let t=e.clientY-Q,n=t>0?1:-1,r=Math.min(Math.abs(t),Te)*n,i=D.value;i&&(i.style.transform=`translateY(${r}px)`)}function ze(e){if(Q===null)return;let t=e.clientY-Q;Q=null;let n=D.value;n&&(n.style.transform=``),Math.abs(t)>we&&a(`dismiss`)}(0,e.onMounted)(()=>{requestAnimationFrame(()=>u.value=!0),(0,e.nextTick)(()=>{je(),p.value&&X()});let t=D.value;t&&(t.addEventListener(`pointermove`,Re,{passive:!0}),t.addEventListener(`pointerup`,ze,{passive:!0}))}),(0,e.onUnmounted)(()=>{Me(),Z(),j&&clearTimeout(j),M&&clearTimeout(M),N&&clearTimeout(N),P&&clearTimeout(P);let e=D.value;e&&(e.removeEventListener(`pointermove`,Re),e.removeEventListener(`pointerup`,ze))});function $(e){return e.icon===void 0?r[e.state]??null:e.icon}function Be(e){e.preventDefault(),e.stopPropagation(),s.value.button?.onClick()}return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{ref_key:`buttonRef`,ref:D,type:`button`,"data-sileo-toast":``,"data-ready":u.value,"data-expanded":h.value,"data-exiting":i.exiting,"data-edge":i.expand,"data-position":i.position,"data-state":s.value.state,style:(0,e.normalizeStyle)(ke.value),onMouseenter:Pe,onMouseleave:Fe,onTransitionend:Ie,onPointerdown:Le},[(0,e.createElementVNode)(`div`,{"data-sileo-canvas":``,"data-edge":i.expand},[((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,{"data-sileo-svg":``,width:C,height:W.value,viewBox:`0 0 ${C} ${W.value}`},[n[2]||=(0,e.createElementVNode)(`title`,null,`Sileo Notification`,-1),(0,e.createElementVNode)(`defs`,null,[(0,e.createElementVNode)(`filter`,{id:w.value,x:`-20%`,y:`-20%`,width:`140%`,height:`140%`,colorInterpolationFilters:`sRGB`},[(0,e.createElementVNode)(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:E.value,result:`blur`},null,8,oe),n[0]||=(0,e.createElementVNode)(`feColorMatrix`,{in:`blur`,mode:`matrix`,values:`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10`,result:`goo`},null,-1),n[1]||=(0,e.createElementVNode)(`feComposite`,{in:`SourceGraphic`,in2:`goo`,operator:`atop`},null,-1)],8,ae)]),(0,e.createElementVNode)(`g`,{filter:`url(#${w.value})`},[(0,e.createElementVNode)(`rect`,{"data-sileo-pill":``,x:Oe.value,rx:T.value,ry:T.value,fill:s.value.fill},null,8,ce),(0,e.createElementVNode)(`rect`,{"data-sileo-body":``,y:S,width:C,height:Ee.value,rx:T.value,ry:T.value,fill:s.value.fill},null,8,le)],8,se)],8,ie))],8,re),(0,e.createElementVNode)(`div`,{ref_key:`headerRef`,ref:O,"data-sileo-header":``,"data-edge":i.expand},[(0,e.createElementVNode)(`div`,de,[((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{ref_key:`innerRef`,ref:k,key:R.value.current.key,"data-sileo-header-inner":``,"data-layer":`current`},[(0,e.createElementVNode)(`div`,{"data-sileo-badge":``,"data-state":R.value.current.view.state,class:(0,e.normalizeClass)(R.value.current.view.styles?.badge)},[((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(()=>$(R.value.current.view))))],10,fe),(0,e.createElementVNode)(`span`,{"data-sileo-title":``,"data-state":R.value.current.view.state,class:(0,e.normalizeClass)(R.value.current.view.styles?.title)},(0,e.toDisplayString)(R.value.current.view.title),11,pe)])),R.value.prev?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:R.value.prev.key,"data-sileo-header-inner":``,"data-layer":`prev`,"data-exiting":`true`},[(0,e.createElementVNode)(`div`,{"data-sileo-badge":``,"data-state":R.value.prev.view.state,class:(0,e.normalizeClass)(R.value.prev.view.styles?.badge)},[((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(()=>$(R.value.prev.view))))],10,me),(0,e.createElementVNode)(`span`,{"data-sileo-title":``,"data-state":R.value.prev.view.state,class:(0,e.normalizeClass)(R.value.prev.view.styles?.title)},(0,e.toDisplayString)(R.value.prev.view.title),11,he)])):(0,e.createCommentVNode)(``,!0)])],8,ue),p.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,"data-sileo-content":``,"data-edge":i.expand,"data-visible":h.value},[(0,e.createElementVNode)(`div`,{ref_key:`contentRef`,ref:A,"data-sileo-description":``,class:(0,e.normalizeClass)(s.value.styles?.description)},[typeof s.value.description==`string`?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[(0,e.createTextVNode)((0,e.toDisplayString)(s.value.description),1)],64)):s.value.description?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(()=>s.value.description),{key:1})):(0,e.createCommentVNode)(``,!0),s.value.button?((0,e.openBlock)(),(0,e.createElementBlock)(`a`,{key:2,href:`#`,"data-sileo-button":``,"data-state":s.value.state,class:(0,e.normalizeClass)(s.value.styles?.button),onClick:Be},(0,e.toDisplayString)(s.value.button.title),11,_e)):(0,e.createCommentVNode)(``,!0)],2)],8,ge)):(0,e.createCommentVNode)(``,!0)],44,ne))}});const T=[`top-left`,`top-center`,`top-right`,`bottom-left`,`bottom-center`,`bottom-right`];var E=[`data-position`],D=(0,e.defineComponent)({__name:`Toaster`,props:{position:{default:`top-right`},offset:{},options:{}},setup(t){let n=t,r=(0,e.ref)(o.toasts),s=(0,e.ref)(),c=!1,u=new Map,d,f=new Map;function p(){for(let e of u.values())clearTimeout(e);u.clear()}function m(e){g.dismiss(e)}function h(e){if(!c)for(let t of e){if(t.exiting)continue;let e=l(t);if(u.has(e))continue;let n=t.duration??6e3;n===null||n<=0||u.set(e,window.setTimeout(()=>m(t.id),n))}}let _=(0,e.computed)(()=>{let e=r.value;for(let t=e.length-1;t>=0;t--)if(!e[t].exiting)return e[t].id}),v=(0,e.computed)(()=>{let e={};for(let t of r.value){let r=t.position??n.position,i=e[r];i?i.push(t):e[r]=[t]}return e});(0,e.watch)(_,e=>{d=e,s.value=e}),(0,e.watch)(()=>n.position,e=>{o.position=e},{immediate:!0}),(0,e.watch)(()=>n.options,e=>{o.options=e},{immediate:!0}),(0,e.watch)(r,e=>{let t=new Set(e.map(l)),n=new Set(e.map(e=>e.id));for(let[e,n]of u)t.has(e)||(clearTimeout(n),u.delete(e));for(let e of f.keys())n.has(e)||f.delete(e);h(e)},{deep:!0});function ee(){c||(c=!0,p())}function y(){c&&(c=!1,h(r.value))}function b(e){let t=f.get(e);return t||(t={enter:t=>{s.value!==e&&(s.value=e),ee()},leave:e=>{s.value!==d&&(s.value=d),y()},dismiss:()=>m(e)},f.set(e,t),t)}function x(e){if(n.offset===void 0)return;let t=typeof n.offset==`object`?n.offset:{top:n.offset,right:n.offset,bottom:n.offset,left:n.offset},r={},i=e=>typeof e==`number`?`${e}px`:e;return e.startsWith(`top`)&&t.top&&(r.top=i(t.top)),e.startsWith(`bottom`)&&t.bottom&&(r.bottom=i(t.bottom)),e.endsWith(`left`)&&t.left&&(r.left=i(t.left)),e.endsWith(`right`)&&t.right&&(r.right=i(t.right)),r}return(0,e.onMounted)(()=>{o.listeners.add(e=>{r.value=[...e]})}),(0,e.onUnmounted)(()=>{o.listeners.clear(),p()}),(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.renderSlot)(t.$slots,`default`),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(T),t=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:t},[v.value[t]?.length?((0,e.openBlock)(),(0,e.createElementBlock)(`section`,{key:0,"data-sileo-viewport":``,"data-position":t,"aria-live":`polite`,style:(0,e.normalizeStyle)(x(t))},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(v.value[t],n=>((0,e.openBlock)(),(0,e.createBlock)(w,{key:n.id,id:n.id,state:n.state,title:n.title,description:n.description,position:(0,e.unref)(i)(t),expand:(0,e.unref)(a)(t),icon:n.icon,fill:n.fill,styles:n.styles,button:n.button,roundness:n.roundness,exiting:n.exiting,"auto-expand-delay-ms":n.autoExpandDelayMs,"auto-collapse-delay-ms":n.autoCollapseDelayMs,"refresh-key":n.instanceId,"can-expand":s.value===void 0||s.value===n.id,onMouseenter:e=>b(n.id).enter(e),onMouseleave:e=>b(n.id).leave(e),onDismiss:e=>b(n.id).dismiss()},null,8,[`id`,`state`,`title`,`description`,`position`,`expand`,`icon`,`fill`,`styles`,`button`,`roundness`,`exiting`,`auto-expand-delay-ms`,`auto-collapse-delay-ms`,`refresh-key`,`can-expand`,`onMouseenter`,`onMouseleave`,`onDismiss`]))),128))],12,E)):(0,e.createCommentVNode)(``,!0)],64))),128))],64))}});exports.Toaster=D,exports.sileo=g;

package/dist/vue-sileo.css

@@ -0,0 +1,2 @@
+:root{--sileo-spring-easing:linear(0, .002 0.6%, .007 1.2%, .015 1.8%, .026 2.4%, .041 3.1%, .06 3.8%, .108 5.3%, .157 6.6%, .214 8%, .467 13.7%, .577 16.3%, .631 17.7%, .682 19.1%, .73 20.5%, .771 21.8%, .808 23.1%, .844 24.5%, .874 25.8%, .903 27.2%, .928 28.6%, .952 30.1%, .972 31.6%, .988 33.1%, 1.01 35.7%, 1.025 38.5%, 1.034 41.6%, 1.038 45%, 1.035 50.1%, 1.012 64.2%, 1.003 73%, .999 83.7%, 1);--sileo-duration:.6s;--sileo-height:40px;--sileo-width:350px;--sileo-state-success:oklch(72.3% .219 142.136);--sileo-state-loading:oklch(55.6% 0 0);--sileo-state-error:oklch(63.7% .237 25.331);--sileo-state-warning:oklch(79.5% .184 86.047);--sileo-state-info:oklch(68.5% .169 237.323);--sileo-state-action:oklch(62.3% .214 259.815);--sileo-fill:#fff;--sileo-text:#0a0a0a;--sileo-description:#525252}[data-theme=light]{--sileo-fill:#0a0a0a;--sileo-text:#fff;--sileo-description:#d4d4d4}[data-sileo-toast]{cursor:pointer;pointer-events:auto;touch-action:none;width:var(--sileo-width);height:var(--_h,var(--sileo-height));opacity:0;transform-origin:50%;contain:layout style;background:0 0;border:0;padding:0;position:relative;overflow:visible;transform:translateZ(0)scale(.95)}[data-sileo-toast][data-state=loading]{cursor:default}[data-sileo-toast][data-ready=true]{opacity:1;transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing), opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing), margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing), margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing), height var(--sileo-duration) var(--sileo-spring-easing);transform:translateZ(0)scale(1)}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){transform:translateY(-6px)scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){transform:translateY(6px)scale(.95)}[data-sileo-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-sileo-viewport][data-position^=top] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px)scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(6px)scale(.95)}[data-sileo-canvas]{pointer-events:none;contain:layout style;position:absolute;left:0;right:0;overflow:visible;transform:translateZ(0)}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1)translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-sileo-svg]{overflow:visible}[data-sileo-pill],[data-sileo-body]{transform-box:fill-box;transform-origin:50% 0}[data-sileo-pill]{transform:scaleY(var(--_sy,1));width:var(--_pw);height:var(--_ph)}[data-sileo-body]{transform:scaleY(var(--_by,0));opacity:var(--_by,0)}[data-sileo-toast][data-ready=true] [data-sileo-pill]{transition:transform var(--sileo-duration) var(--sileo-spring-easing), width var(--sileo-duration) var(--sileo-spring-easing), x var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-toast][data-ready=true][data-expanded=true] [data-sileo-pill]{transition-delay:calc(var(--sileo-duration) * .08)}[data-sileo-toast][data-ready=true] [data-sileo-body]{transition:transform var(--sileo-duration) var(--sileo-spring-easing), opacity var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header]{z-index:20;height:var(--sileo-height);left:var(--_px,0px);transform:var(--_ht);max-width:var(--_pw);align-items:center;padding:.5rem;display:flex;position:absolute;overflow:hidden}[data-sileo-toast][data-ready=true] [data-sileo-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing), left var(--sileo-duration) var(--sileo-spring-easing), max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header][data-edge=top]{bottom:0}[data-sileo-header][data-edge=bottom]{top:0}[data-sileo-header-stack]{align-items:center;height:100%;display:inline-flex;position:relative}[data-sileo-header-inner]{white-space:nowrap;opacity:1;filter:blur();will-change:opacity, filter;align-items:center;gap:.5rem;display:flex}[data-sileo-header-inner][data-layer=current]{animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-sileo-header-inner][data-layer=prev]{pointer-events:none;position:absolute;top:0;left:0}[data-sileo-header-inner][data-exiting=true]{animation:.3s forwards sileo-header-exit}[data-sileo-badge]{box-sizing:border-box;width:24px;height:24px;color:var(--sileo-tone,currentColor);background-color:var(--sileo-tone-bg,transparent);border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding:2px;display:flex}[data-sileo-title]{text-transform:capitalize;color:var(--sileo-tone,currentColor);font-size:.825rem;font-weight:500;line-height:1rem}:is([data-sileo-badge],[data-sileo-title])[data-state]{--_c:var(--sileo-state-success);--sileo-tone:var(--_c);--sileo-tone-bg:color-mix(in oklch, var(--_c) 20%, transparent)}:is([data-sileo-badge],[data-sileo-title])[data-state=loading]{--_c:var(--sileo-state-loading)}:is([data-sileo-badge],[data-sileo-title])[data-state=error]{--_c:var(--sileo-state-error)}:is([data-sileo-badge],[data-sileo-title])[data-state=warning]{--_c:var(--sileo-state-warning)}:is([data-sileo-badge],[data-sileo-title])[data-state=info]{--_c:var(--sileo-state-info)}:is([data-sileo-badge],[data-sileo-title])[data-state=action]{--_c:var(--sileo-state-action)}[data-sileo-content]{z-index:10;pointer-events:none;width:100%;opacity:var(--_co,0);position:absolute;left:0}[data-sileo-content]:not([data-visible=true]){content-visibility:hidden}[data-sileo-toast][data-ready=true] [data-sileo-content]{transition:opacity calc(var(--sileo-duration) * .08) var(--sileo-spring-easing) calc(var(--sileo-duration) * .04)}[data-sileo-content][data-edge=top]{top:0}[data-sileo-content][data-edge=bottom]{top:var(--sileo-height)}[data-sileo-content][data-visible=true]{pointer-events:auto}[data-sileo-toast][data-ready=true] [data-sileo-content][data-visible=true]{transition:opacity var(--sileo-duration) var(--sileo-spring-easing) calc(var(--sileo-duration) * .25)}[data-sileo-description]{text-align:left;width:100%;color:var(--sileo-description);contain:layout style;content-visibility:auto;padding:1rem;font-size:.875rem;line-height:1.25rem}[data-sileo-button]{cursor:pointer;height:1.75rem;color:var(--sileo-btn-color,currentColor);background-color:var(--sileo-btn-bg,transparent);border:0;border-radius:9999px;justify-content:center;align-items:center;margin-top:.75rem;padding:0 .625rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex}[data-sileo-button]:hover{background-color:var(--sileo-btn-bg-hover,transparent)}[data-sileo-button][data-state]{--_c:var(--sileo-state-success);--sileo-btn-color:var(--_c);--sileo-btn-bg:color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover:color-mix(in oklch, var(--_c) 25%, transparent)}[data-sileo-button][data-state=loading]{--_c:var(--sileo-state-loading)}[data-sileo-button][data-state=error]{--_c:var(--sileo-state-error)}[data-sileo-button][data-state=warning]{--_c:var(--sileo-state-warning)}[data-sileo-button][data-state=info]{--_c:var(--sileo-state-info)}[data-sileo-button][data-state=action]{--_c:var(--sileo-state-action)}[data-sileo-icon=spin]{animation:1s linear infinite sileo-spin}@keyframes sileo-spin{to{rotate:360deg}}@keyframes sileo-header-enter{0%{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur()}}@keyframes sileo-header-exit{0%{opacity:1;filter:blur()}to{opacity:0;filter:blur(6px)}}[data-sileo-viewport]{z-index:50;pointer-events:none;contain:layout style;gap:.75rem;max-width:calc(100vw - 1.5rem);padding:.75rem;display:flex;position:fixed}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=top]{flex-direction:column-reverse;top:0}[data-sileo-viewport][data-position^=bottom]{flex-direction:column;bottom:0}[data-sileo-viewport][data-position$=left]{align-items:flex-start;left:0}[data-sileo-viewport][data-position$=right]{align-items:flex-end;right:0}[data-sileo-viewport][data-position$=center]{align-items:center;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:no-preference){[data-sileo-toast][data-ready=true]:hover,[data-sileo-toast][data-ready=true][data-exiting=true]{will-change:transform, opacity, height}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1}}
+/*$vite$:1*/

package/dist/vue-sileo.mjs

@@ -0,0 +1,657 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, h as c, nextTick as l, normalizeClass as u, normalizeStyle as ee, onMounted as te, onUnmounted as ne, openBlock as d, ref as f, renderList as p, renderSlot as re, resolveDynamicComponent as m, toDisplayString as h, unref as g, watch as _ } from "vue";
+var v = 6e3;
+v * .1;
+var y = v * .025, b = v - 2e3;
+const x = (e) => e.includes("right") ? "right" : e.includes("center") ? "center" : "left", S = (e) => e.startsWith("top") ? "bottom" : "top", C = {
+	toasts: [],
+	listeners: /* @__PURE__ */ new Set(),
+	position: "top-right",
+	options: void 0,
+	emit() {
+		for (let e of this.listeners) e(this.toasts);
+	},
+	update(e) {
+		this.toasts = e(this.toasts), this.emit();
+	}
+};
+var w = 0, T = () => `${++w}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+const E = (e) => `${e.id}:${e.instanceId}`;
+var D = (e) => {
+	let t = C.toasts.find((t) => t.id === e);
+	!t || t.exiting || (C.update((t) => t.map((t) => t.id === e ? {
+		...t,
+		exiting: !0
+	} : t)), setTimeout(() => C.update((t) => t.filter((t) => t.id !== e)), 600));
+}, O = (e, t) => {
+	if (e.autopilot === !1 || !t || t <= 0) return {};
+	let n = typeof e.autopilot == "object" ? e.autopilot : void 0, r = (e) => Math.min(t, Math.max(0, e));
+	return {
+		expandDelayMs: r(n?.expand ?? y),
+		collapseDelayMs: r(n?.collapse ?? b)
+	};
+}, k = (e) => ({
+	...C.options,
+	...e,
+	styles: {
+		...C.options?.styles,
+		...e.styles
+	}
+}), A = (e, t, n) => {
+	let r = O(e, e.duration ?? 6e3);
+	return {
+		...e,
+		id: t,
+		instanceId: T(),
+		position: e.position ?? n ?? C.position,
+		autoExpandDelayMs: r.expandDelayMs,
+		autoCollapseDelayMs: r.collapseDelayMs
+	};
+}, j = (e) => {
+	let t = C.toasts.filter((e) => !e.exiting), n = k(e), r = n.id ?? "sileo-default", i = t.find((e) => e.id === r), a = A(n, r, i?.position);
+	return i ? C.update((e) => e.map((e) => e.id === r ? a : e)) : C.update((e) => [...e.filter((e) => e.id !== r), a]), {
+		id: r,
+		duration: n.duration ?? 6e3
+	};
+}, M = (e, t) => {
+	let n = C.toasts.find((t) => t.id === e);
+	if (!n) return;
+	let r = A(k(t), e, n.position);
+	C.update((t) => t.map((t) => t.id === e ? r : t));
+};
+const N = {
+	show: (e) => j(e).id,
+	success: (e) => j({
+		...e,
+		state: "success"
+	}).id,
+	error: (e) => j({
+		...e,
+		state: "error"
+	}).id,
+	warning: (e) => j({
+		...e,
+		state: "warning"
+	}).id,
+	info: (e) => j({
+		...e,
+		state: "info"
+	}).id,
+	action: (e) => j({
+		...e,
+		state: "action"
+	}).id,
+	promise: (e, t) => {
+		let { id: n } = j({
+			...t.loading,
+			state: "loading",
+			duration: null,
+			position: t.position
+		}), r = typeof e == "function" ? e() : e;
+		return r.then((e) => {
+			t.action ? M(n, {
+				...typeof t.action == "function" ? t.action(e) : t.action,
+				state: "action",
+				id: n
+			}) : M(n, {
+				...typeof t.success == "function" ? t.success(e) : t.success,
+				state: "success",
+				id: n
+			});
+		}).catch((e) => {
+			M(n, {
+				...typeof t.error == "function" ? t.error(e) : t.error,
+				state: "error",
+				id: n
+			});
+		}), r;
+	},
+	dismiss: D,
+	clear: (e) => C.update((t) => e ? t.filter((t) => t.position !== e) : [])
+};
+var P = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+const ie = () => c("svg", P, [
+	c("title", "Arrow Right"),
+	c("path", { d: "M5 12h14" }),
+	c("path", { d: "m12 5 7 7-7 7" })
+]), ae = () => c("svg", P, [
+	c("title", "Life Buoy"),
+	c("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}),
+	c("path", { d: "m4.93 4.93 4.24 4.24" }),
+	c("path", { d: "m14.83 9.17 4.24-4.24" }),
+	c("path", { d: "m14.83 14.83 4.24 4.24" }),
+	c("path", { d: "m9.17 14.83-4.24 4.24" }),
+	c("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4"
+	})
+]), oe = () => c("svg", {
+	...P,
+	"data-sileo-icon": "spin",
+	"aria-hidden": "true"
+}, [c("title", "Loader Circle"), c("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })]), se = () => c("svg", P, [
+	c("title", "X"),
+	c("path", { d: "M18 6 6 18" }),
+	c("path", { d: "m6 6 12 12" })
+]), ce = () => c("svg", P, [
+	c("title", "Circle Alert"),
+	c("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}),
+	c("line", {
+		x1: "12",
+		x2: "12",
+		y1: "8",
+		y2: "12"
+	}),
+	c("line", {
+		x1: "12",
+		x2: "12.01",
+		y1: "16",
+		y2: "16"
+	})
+]), le = () => c("svg", P, [c("title", "Check"), c("path", { d: "M20 6 9 17l-5-5" })]);
+var ue = [
+	"data-ready",
+	"data-expanded",
+	"data-exiting",
+	"data-edge",
+	"data-position",
+	"data-state"
+], de = ["data-edge"], fe = ["height", "viewBox"], pe = ["id"], me = ["stdDeviation"], he = ["filter"], ge = [
+	"x",
+	"rx",
+	"ry",
+	"fill"
+], _e = [
+	"height",
+	"rx",
+	"ry",
+	"fill"
+], ve = ["data-edge"], ye = { "data-sileo-header-stack": "" }, be = ["data-state"], xe = ["data-state"], Se = ["data-state"], Ce = ["data-state"], we = ["data-edge", "data-visible"], Te = ["data-state"], F = 40, I = 350, Ee = 18, De = .5, Oe = 10, ke = 2.25, Ae = 200, je = 150, Me = 30, Ne = 20, L = /* @__PURE__ */ s({
+	__name: "Sileo",
+	props: {
+		id: {},
+		fill: { default: "var(--sileo-fill)" },
+		state: { default: "success" },
+		title: {},
+		description: {},
+		position: { default: "left" },
+		expand: { default: "bottom" },
+		icon: {},
+		styles: {},
+		button: {},
+		roundness: {},
+		exiting: {
+			type: Boolean,
+			default: !1
+		},
+		autoExpandDelayMs: {},
+		autoCollapseDelayMs: {},
+		canExpand: { type: Boolean },
+		interruptKey: {},
+		refreshKey: {}
+	},
+	emits: [
+		"mouseenter",
+		"mouseleave",
+		"dismiss"
+	],
+	setup(s, { emit: p }) {
+		let re = {
+			success: c(le),
+			loading: c(oe),
+			error: c(se),
+			warning: c(ce),
+			info: c(ae),
+			action: c(ie)
+		}, g = s, v = p, y = t(() => g.title ?? g.state), b = f({
+			title: y.value,
+			description: g.description,
+			state: g.state,
+			icon: g.icon,
+			styles: g.styles,
+			button: g.button,
+			fill: g.fill
+		}), x = f(g.refreshKey), S = f(!1), C = f(!1), w = f(0), T = f(0), E = t(() => !!b.value.description || !!b.value.button), D = t(() => b.value.state === "loading"), O = t(() => E.value && S.value && !D.value), k = t(() => D.value ? !1 : g.canExpand ?? (!g.interruptKey || g.interruptKey === g.id)), A = t(() => `${b.value.state}-${b.value.title}`), j = t(() => `sileo-gooey-${g.id}`), M = t(() => Math.max(0, g.roundness ?? Ee)), N = t(() => M.value * De), P = f(null), L = f(null), R = f(null), z = f(null), B = null, V = null, H = null, U = null, W = null, G = g.refreshKey, K = null, q = f({
+			current: {
+				key: A.value,
+				view: b.value
+			},
+			prev: null
+		}), Pe = t(() => ({
+			title: y.value,
+			description: g.description,
+			state: g.state,
+			icon: g.icon,
+			styles: g.styles,
+			button: g.button,
+			fill: g.fill
+		})), J = F * ke, Y = t(() => E.value ? Math.max(J, F + T.value) : J), X = Y.value, Fe = t(() => O.value ? (X = Y.value, Y.value) : X), Ie = t(() => E.value ? Math.max(Fe.value, J) : F), Le = t(() => Math.max(0, Fe.value - F)), Re = t(() => Math.max(w.value || F, F)), ze = t(() => F + N.value * 3), Be = t(() => g.position === "right" ? I - Re.value : g.position === "center" ? (I - Re.value) / 2 : 0), Ve = t(() => ({
+			"--_h": `${O.value ? Fe.value : F}px`,
+			"--_pw": `${Re.value}px`,
+			"--_px": `${Be.value}px`,
+			"--_sy": `${O.value ? 1 : F / ze.value}`,
+			"--_ph": `${ze.value}px`,
+			"--_by": `${O.value ? 1 : 0}`,
+			"--_ht": `translateY(${O.value ? g.expand === "bottom" ? 3 : -3 : 0}px) scale(${O.value ? .9 : 1})`,
+			"--_co": `${O.value ? 1 : 0}`
+		})), Z = null, He = 0, Q = null, Ue = 0;
+		function We() {
+			let e = R.value, t = L.value;
+			if (!e || !t) return;
+			if (W === null) {
+				let e = getComputedStyle(t);
+				W = parseFloat(e.paddingLeft) + parseFloat(e.paddingRight);
+			}
+			let n = e.scrollWidth + W + Oe;
+			n > Oe && w.value !== n && (w.value = n);
+		}
+		function Ge() {
+			Ke();
+			let e = R.value;
+			e && (We(), Z = new ResizeObserver(() => {
+				cancelAnimationFrame(He), He = requestAnimationFrame(We);
+			}), Z.observe(e));
+		}
+		function Ke() {
+			Z &&= (cancelAnimationFrame(He), Z.disconnect(), null);
+		}
+		function qe() {
+			if (!E.value) {
+				T.value = 0;
+				return;
+			}
+			let e = z.value;
+			if (!e) return;
+			let t = e.scrollHeight;
+			T.value !== t && (T.value = t);
+		}
+		function Je() {
+			Ye();
+			let e = z.value;
+			e && (qe(), Q = new ResizeObserver(() => {
+				cancelAnimationFrame(Ue), Ue = requestAnimationFrame(qe);
+			}), Q.observe(e));
+		}
+		function Ye() {
+			Q &&= (cancelAnimationFrame(Ue), Q.disconnect(), null);
+		}
+		_([A, b], () => {
+			let e = A.value, t = b.value;
+			q.value.current.key === e ? q.value.current.view !== t && (q.value = {
+				...q.value,
+				current: {
+					key: e,
+					view: t
+				}
+			}) : q.value = {
+				prev: q.value.current,
+				current: {
+					key: e,
+					view: t
+				}
+			};
+		}, { flush: "sync" }), _(() => q.value.current.key, () => {
+			l(Ge);
+		}), _(() => q.value.prev, (e) => {
+			e && (B && clearTimeout(B), B = window.setTimeout(() => {
+				B = null, q.value = {
+					...q.value,
+					prev: null
+				};
+			}, je));
+		}), _(E, (e) => {
+			e ? l(Je) : (T.value = 0, Ye());
+		}), _([() => g.refreshKey, Pe], () => {
+			let e = g.refreshKey, t = Pe.value;
+			if (e === void 0) {
+				b.value = t, x.value = void 0, K = null, G = e;
+				return;
+			}
+			G !== e && (G = e, U &&= (clearTimeout(U), null), O.value ? (K = {
+				key: e,
+				payload: t
+			}, S.value = !1, U = window.setTimeout(() => {
+				U = null, K &&= (b.value = K.payload, x.value = K.key, null);
+			}, Ae)) : (K = null, b.value = t, x.value = e));
+		}, { deep: !1 }), _([
+			() => g.autoCollapseDelayMs,
+			() => g.autoExpandDelayMs,
+			E,
+			k,
+			() => g.exiting,
+			x
+		], () => {
+			if (!E.value) return;
+			if (V && clearTimeout(V), H && clearTimeout(H), g.exiting || !k.value) {
+				S.value = !1;
+				return;
+			}
+			if (g.autoExpandDelayMs == null && g.autoCollapseDelayMs == null) return;
+			let e = g.autoExpandDelayMs ?? 0, t = g.autoCollapseDelayMs ?? 0;
+			e > 0 ? V = window.setTimeout(() => S.value = !0, e) : S.value = !0, t > 0 && (H = window.setTimeout(() => S.value = !1, t));
+		}, { immediate: !0 }), _(O, (e) => {
+			e && (X = Y.value);
+		});
+		function Xe(e) {
+			v("mouseenter", e), E.value && (S.value = !0);
+		}
+		function Ze(e) {
+			v("mouseleave", e), S.value = !1;
+		}
+		function Qe(e) {
+			e.propertyName !== "height" && e.propertyName !== "transform" || O.value || (K &&= (U &&= (clearTimeout(U), null), b.value = K.payload, x.value = K.key, null));
+		}
+		let $ = null;
+		function $e(e) {
+			g.exiting || e.target.closest("[data-sileo-button]") || ($ = e.clientY, e.currentTarget.setPointerCapture(e.pointerId));
+		}
+		function et(e) {
+			if ($ === null) return;
+			let t = e.clientY - $, n = t > 0 ? 1 : -1, r = Math.min(Math.abs(t), Ne) * n, i = P.value;
+			i && (i.style.transform = `translateY(${r}px)`);
+		}
+		function tt(e) {
+			if ($ === null) return;
+			let t = e.clientY - $;
+			$ = null;
+			let n = P.value;
+			n && (n.style.transform = ""), Math.abs(t) > Me && v("dismiss");
+		}
+		te(() => {
+			requestAnimationFrame(() => C.value = !0), l(() => {
+				Ge(), E.value && Je();
+			});
+			let e = P.value;
+			e && (e.addEventListener("pointermove", et, { passive: !0 }), e.addEventListener("pointerup", tt, { passive: !0 }));
+		}), ne(() => {
+			Ke(), Ye(), B && clearTimeout(B), V && clearTimeout(V), H && clearTimeout(H), U && clearTimeout(U);
+			let e = P.value;
+			e && (e.removeEventListener("pointermove", et), e.removeEventListener("pointerup", tt));
+		});
+		function nt(e) {
+			return e.icon === void 0 ? re[e.state] ?? null : e.icon;
+		}
+		function rt(e) {
+			e.preventDefault(), e.stopPropagation(), b.value.button?.onClick();
+		}
+		return (t, s) => (d(), i("button", {
+			ref_key: "buttonRef",
+			ref: P,
+			type: "button",
+			"data-sileo-toast": "",
+			"data-ready": C.value,
+			"data-expanded": O.value,
+			"data-exiting": g.exiting,
+			"data-edge": g.expand,
+			"data-position": g.position,
+			"data-state": b.value.state,
+			style: ee(Ve.value),
+			onMouseenter: Xe,
+			onMouseleave: Ze,
+			onTransitionend: Qe,
+			onPointerdown: $e
+		}, [
+			a("div", {
+				"data-sileo-canvas": "",
+				"data-edge": g.expand
+			}, [(d(), i("svg", {
+				"data-sileo-svg": "",
+				width: I,
+				height: Ie.value,
+				viewBox: `0 0 ${I} ${Ie.value}`
+			}, [
+				s[2] ||= a("title", null, "Sileo Notification", -1),
+				a("defs", null, [a("filter", {
+					id: j.value,
+					x: "-20%",
+					y: "-20%",
+					width: "140%",
+					height: "140%",
+					colorInterpolationFilters: "sRGB"
+				}, [
+					a("feGaussianBlur", {
+						in: "SourceGraphic",
+						stdDeviation: N.value,
+						result: "blur"
+					}, null, 8, me),
+					s[0] ||= a("feColorMatrix", {
+						in: "blur",
+						mode: "matrix",
+						values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10",
+						result: "goo"
+					}, null, -1),
+					s[1] ||= a("feComposite", {
+						in: "SourceGraphic",
+						in2: "goo",
+						operator: "atop"
+					}, null, -1)
+				], 8, pe)]),
+				a("g", { filter: `url(#${j.value})` }, [a("rect", {
+					"data-sileo-pill": "",
+					x: Be.value,
+					rx: M.value,
+					ry: M.value,
+					fill: b.value.fill
+				}, null, 8, ge), a("rect", {
+					"data-sileo-body": "",
+					y: F,
+					width: I,
+					height: Le.value,
+					rx: M.value,
+					ry: M.value,
+					fill: b.value.fill
+				}, null, 8, _e)], 8, he)
+			], 8, fe))], 8, de),
+			a("div", {
+				ref_key: "headerRef",
+				ref: L,
+				"data-sileo-header": "",
+				"data-edge": g.expand
+			}, [a("div", ye, [(d(), i("div", {
+				ref_key: "innerRef",
+				ref: R,
+				key: q.value.current.key,
+				"data-sileo-header-inner": "",
+				"data-layer": "current"
+			}, [a("div", {
+				"data-sileo-badge": "",
+				"data-state": q.value.current.view.state,
+				class: u(q.value.current.view.styles?.badge)
+			}, [(d(), n(m(() => nt(q.value.current.view))))], 10, be), a("span", {
+				"data-sileo-title": "",
+				"data-state": q.value.current.view.state,
+				class: u(q.value.current.view.styles?.title)
+			}, h(q.value.current.view.title), 11, xe)])), q.value.prev ? (d(), i("div", {
+				key: q.value.prev.key,
+				"data-sileo-header-inner": "",
+				"data-layer": "prev",
+				"data-exiting": "true"
+			}, [a("div", {
+				"data-sileo-badge": "",
+				"data-state": q.value.prev.view.state,
+				class: u(q.value.prev.view.styles?.badge)
+			}, [(d(), n(m(() => nt(q.value.prev.view))))], 10, Se), a("span", {
+				"data-sileo-title": "",
+				"data-state": q.value.prev.view.state,
+				class: u(q.value.prev.view.styles?.title)
+			}, h(q.value.prev.view.title), 11, Ce)])) : r("", !0)])], 8, ve),
+			E.value ? (d(), i("div", {
+				key: 0,
+				"data-sileo-content": "",
+				"data-edge": g.expand,
+				"data-visible": O.value
+			}, [a("div", {
+				ref_key: "contentRef",
+				ref: z,
+				"data-sileo-description": "",
+				class: u(b.value.styles?.description)
+			}, [typeof b.value.description == "string" ? (d(), i(e, { key: 0 }, [o(h(b.value.description), 1)], 64)) : b.value.description ? (d(), n(m(() => b.value.description), { key: 1 })) : r("", !0), b.value.button ? (d(), i("a", {
+				key: 2,
+				href: "#",
+				"data-sileo-button": "",
+				"data-state": b.value.state,
+				class: u(b.value.styles?.button),
+				onClick: rt
+			}, h(b.value.button.title), 11, Te)) : r("", !0)], 2)], 8, we)) : r("", !0)
+		], 44, ue));
+	}
+});
+const R = [
+	"top-left",
+	"top-center",
+	"top-right",
+	"bottom-left",
+	"bottom-center",
+	"bottom-right"
+];
+var z = ["data-position"], B = /* @__PURE__ */ s({
+	__name: "Toaster",
+	props: {
+		position: { default: "top-right" },
+		offset: {},
+		options: {}
+	},
+	setup(a) {
+		let o = a, s = f(C.toasts), c = f(), l = !1, u = /* @__PURE__ */ new Map(), m, h = /* @__PURE__ */ new Map();
+		function v() {
+			for (let e of u.values()) clearTimeout(e);
+			u.clear();
+		}
+		function y(e) {
+			N.dismiss(e);
+		}
+		function b(e) {
+			if (!l) for (let t of e) {
+				if (t.exiting) continue;
+				let e = E(t);
+				if (u.has(e)) continue;
+				let n = t.duration ?? 6e3;
+				n === null || n <= 0 || u.set(e, window.setTimeout(() => y(t.id), n));
+			}
+		}
+		let w = t(() => {
+			let e = s.value;
+			for (let t = e.length - 1; t >= 0; t--) if (!e[t].exiting) return e[t].id;
+		}), T = t(() => {
+			let e = {};
+			for (let t of s.value) {
+				let n = t.position ?? o.position, r = e[n];
+				r ? r.push(t) : e[n] = [t];
+			}
+			return e;
+		});
+		_(w, (e) => {
+			m = e, c.value = e;
+		}), _(() => o.position, (e) => {
+			C.position = e;
+		}, { immediate: !0 }), _(() => o.options, (e) => {
+			C.options = e;
+		}, { immediate: !0 }), _(s, (e) => {
+			let t = new Set(e.map(E)), n = new Set(e.map((e) => e.id));
+			for (let [e, n] of u) t.has(e) || (clearTimeout(n), u.delete(e));
+			for (let e of h.keys()) n.has(e) || h.delete(e);
+			b(e);
+		}, { deep: !0 });
+		function D() {
+			l || (l = !0, v());
+		}
+		function O() {
+			l && (l = !1, b(s.value));
+		}
+		function k(e) {
+			let t = h.get(e);
+			return t || (t = {
+				enter: (t) => {
+					c.value !== e && (c.value = e), D();
+				},
+				leave: (e) => {
+					c.value !== m && (c.value = m), O();
+				},
+				dismiss: () => y(e)
+			}, h.set(e, t), t);
+		}
+		function A(e) {
+			if (o.offset === void 0) return;
+			let t = typeof o.offset == "object" ? o.offset : {
+				top: o.offset,
+				right: o.offset,
+				bottom: o.offset,
+				left: o.offset
+			}, n = {}, r = (e) => typeof e == "number" ? `${e}px` : e;
+			return e.startsWith("top") && t.top && (n.top = r(t.top)), e.startsWith("bottom") && t.bottom && (n.bottom = r(t.bottom)), e.endsWith("left") && t.left && (n.left = r(t.left)), e.endsWith("right") && t.right && (n.right = r(t.right)), n;
+		}
+		return te(() => {
+			C.listeners.add((e) => {
+				s.value = [...e];
+			});
+		}), ne(() => {
+			C.listeners.clear(), v();
+		}), (t, a) => (d(), i(e, null, [re(t.$slots, "default"), (d(!0), i(e, null, p(g(R), (t) => (d(), i(e, { key: t }, [T.value[t]?.length ? (d(), i("section", {
+			key: 0,
+			"data-sileo-viewport": "",
+			"data-position": t,
+			"aria-live": "polite",
+			style: ee(A(t))
+		}, [(d(!0), i(e, null, p(T.value[t], (e) => (d(), n(L, {
+			key: e.id,
+			id: e.id,
+			state: e.state,
+			title: e.title,
+			description: e.description,
+			position: g(x)(t),
+			expand: g(S)(t),
+			icon: e.icon,
+			fill: e.fill,
+			styles: e.styles,
+			button: e.button,
+			roundness: e.roundness,
+			exiting: e.exiting,
+			"auto-expand-delay-ms": e.autoExpandDelayMs,
+			"auto-collapse-delay-ms": e.autoCollapseDelayMs,
+			"refresh-key": e.instanceId,
+			"can-expand": c.value === void 0 || c.value === e.id,
+			onMouseenter: (t) => k(e.id).enter(t),
+			onMouseleave: (t) => k(e.id).leave(t),
+			onDismiss: (t) => k(e.id).dismiss()
+		}, null, 8, [
+			"id",
+			"state",
+			"title",
+			"description",
+			"position",
+			"expand",
+			"icon",
+			"fill",
+			"styles",
+			"button",
+			"roundness",
+			"exiting",
+			"auto-expand-delay-ms",
+			"auto-collapse-delay-ms",
+			"refresh-key",
+			"can-expand",
+			"onMouseenter",
+			"onMouseleave",
+			"onDismiss"
+		]))), 128))], 12, z)) : r("", !0)], 64))), 128))], 64));
+	}
+});
+export { B as Toaster, N as sileo };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "vue-sileo",
+  "version": "0.1.0",
+  "description": "An opinionated, physics-based toast notification library for Vue.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Syndrom7/vue-sileo.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "toast",
+    "notification",
+    "sileo",
+    "notifications",
+    "alert",
+    "message",
+    "physics",
+    "animation"
+  ],
+  "author": "Syndrom7",
+  "bugs": {
+    "url": "https://github.com/Syndrom7/vue-sileo/issues"
+  },
+  "homepage": "https://github.com/Syndrom7/vue-sileo#readme",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/vue-sileo.d.ts",
+        "default": "./dist/vue-sileo.mjs"
+      },
+      "require": {
+        "types": "./dist/vue-sileo.d.ts",
+        "default": "./dist/vue-sileo.cjs"
+      }
+    },
+    "./styles.css": "./dist/vue-sileo.css"
+  },
+  "main": "./dist/vue-sileo.cjs",
+  "module": "./dist/vue-sileo.mjs",
+  "types": "./dist/vue-sileo.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0-beta.13",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.5"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}