Big v0.10 upgrade

.gitignore

@@ -10,3 +10,5 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /temp
 /test-results
+/.vscode
+.spellignore

src/lib/Controller.svelte

@@ -0,0 +1,73 @@
+<script>
+import { onMount, onDestroy } from 'svelte'
+import { tweened } from 'svelte/motion'
+import { linear } from 'svelte/easing'
+import { toast } from './stores.js'
+
+/** @type {import('./stores.js').SvelteToastOptions} */
+export let item
+
+let next = item.initial || 0
+let prev = next
+let paused = false
+
+const progress = tweened(item.initial, { duration: item.duration, easing: linear })
+
+/** @param {CustomEvent} [ev] */
+function close(ev) {
+  const { value } = ev?.detail || {}
+  toast.pop(item.id, { value })
+}
+
+function autoclose() {
+  if ($progress === 1 || $progress === 0) close()
+}
+
+function pause() {
+  if (!paused && $progress !== next) {
+    progress.set($progress, { duration: 0 })
+    paused = true
+  }
+}
+
+function resume() {
+  if (paused) {
+    const d = item.duration || 0
+    const duration = d - d * (($progress - prev) / (next - prev))
+    progress.set(next, { duration }).then(autoclose)
+    paused = false
+  }
+}
+
+function handler() {
+  document.hidden ? ['hidden', 'both'].includes(item.pausable || '') && pause() : resume()
+}
+
+function listen() {
+  document.addEventListener('visibilitychange', handler)
+  handler()
+}
+
+function unlisten() {
+  document.removeEventListener('visibilitychange', handler)
+}
+
+$: if (next !== item.next) {
+  next = item.next || 0
+  prev = $progress
+  paused = false
+  progress.set(next).then(autoclose)
+}
+
+onMount(listen)
+onDestroy(unlisten)
+</script>
+
+<output
+  on:mouseenter={() => {
+    if (['hover', 'both'].includes(item.pausable || '')) pause()
+  }}
+  on:mouseleave={resume}
+>
+  <svelte:component this={item.view} {item} {progress} on:close={close} />
+</output>

src/lib/SvelteToast.svelte

@@ -1,52 +1,83 @@
 <script>
-import { fade, fly } from 'svelte/transition'
+import { onDestroy } from 'svelte'
+import { fly } from 'svelte/transition'
 import { flip } from 'svelte/animate'
 import { toast } from './stores.js'
-import ToastItem from './ToastItem.svelte'
+import Controller from './Controller.svelte'
+import View from './View.svelte'
 
-/** @type {import('./stores.js').SvelteToastOptions} */
+/** @type {import('./stores.js').SvelteToastOptions} - options override */
 export let options = {}
-/** @type {(string|'default')} */
+/** @type {string|'default'} - toast container target name */
 export let target = 'default'
+/** @type {string|undefined} - toast container class */
+let classes = ''
+export { classes as class }
 
+/** @type {import('./stores.js').SvelteToastOptions} */
+const defaults = {
+  duration: 4000,
+  initial: 1,
+  next: 0,
+  pausable: 'hidden',
+  dismissable: true,
+  reversed: true,
+  intro: { x: 256 },
+  view: View
+}
 /** @type {import('./stores.js').SvelteToastOptions[]} */
 let items = []
+/** @type {import('./stores.js').SvelteToastOptions} */
+let merged
+/** @type {Object<string,string|number>|undefined} */
+let theme
+/** @type {string|undefined} */
+let _class
 
-/** @param {Object<string,string|number>} [theme] */
-function getCss(theme) {
-  return theme ? Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '') : undefined
+/** @param {Object<string,string|number>} [obj] */
+function toStyles(obj) {
+  return obj ? Object.keys(obj).reduce((a, c) => `${a}${c}:${obj[c]};`, '') : undefined
 }
 
-$: toast._init(target, options)
+$: {
+  ;({ theme, class: _class, ...merged } = { ...defaults, ...options })
+  toast._init(target, merged)
+}
+$: {
+  const _items = $toast.filter((i) => i.target === target)
+  if (merged.reversed) _items.reverse()
+  items = _items
+}
 
-$: items = $toast.filter((i) => i.target === target)
+onDestroy(() => toast.pop({ target }))
 </script>
 
-<ul class="_toastContainer">
+<ul class={classes} style={toStyles(theme)}>
   {#each items as item (item.id)}
     <li
-      class={item.classes?.join(' ')}
+      class={[_class, item.class].join(' ')}
+      style={toStyles(item.theme)}
       in:fly={item.intro}
-      out:fade
+      out:fly={item.outro}
       animate:flip={{ duration: 200 }}
-      style={getCss(item.theme)}
     >
-      <ToastItem {item} />
+      <Controller {item} />
     </li>
   {/each}
 </ul>
 
 <style>
-._toastContainer {
+:where(ul) {
   top: var(--toastContainerTop, 1.5rem);
   right: var(--toastContainerRight, 2rem);
   bottom: var(--toastContainerBottom, auto);
   left: var(--toastContainerLeft, auto);
+  z-index: var(--toastContainerZIndex, auto);
   position: fixed;
   margin: 0;
   padding: 0;
   list-style-type: none;
   pointer-events: none;
-  z-index: var(--toastContainerZIndex, 9999);
+  will-change: contents;
 }
 </style>