nanosplash 2.5.3 → 3.0.1

package/docs/index.f34144dc.js

@@ -0,0 +1 @@
+var S=Object.defineProperty;var N=(t,e,n)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var c=(t,e,n)=>(N(t,typeof e!="symbol"?e+"":e,n),n);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const l of o.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&r(l)}).observe(document,{childList:!0,subtree:!0});function n(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(s){if(s.ep)return;s.ep=!0;const o=n(s);fetch(s.href,o)}})();const v="3.0.1";var u=(t=>(t.Add="add",t.Remove="remove",t))(u||{});const d=class d{constructor(){c(this,"id");c(this,"element");this.element=p(),this.element.id=this.id=d.generateGUID()}static generateGUID(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const n=Math.random()*16|0;return(e==="x"?n:n&3|8).toString(16)})}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}getId(){return this.id}getNSElement(){return this.element}setText(e){return this.getNSTextElement().innerText=e,e.length>0?this.showText():this.hideText(),this}showText(){return E(this.getNSTextElement()),this}hideText(){return I(this.getNSTextElement()),this}remove(){var e;return this.element&&((e=this.element.parentElement)==null||e.removeChild(this.element),delete this.element),this}};c(d,"NSClass","ns"),c(d,"NSHostClass","nsh");let a=d;function p(){return new DOMParser().parseFromString('<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function y(t,e){e.children.length>0?e.insertBefore(t,e.children.item(0)):e.append(t)}function f(t,e){t==null||t.classList[e](a.NSHostClass)}function w(t){f(t.getNSElement().parentElement,u.Remove)}function E(t){t.style.display="flex"}function I(t){t.style.display="none"}function x(t){return t instanceof Element?t:document.querySelector(t||"")}function C(t){var e;return((e=t==null?void 0:t.classList)==null?void 0:e.contains(a.NSClass))??!1}function m(t,e){f(t.parentElement,u.Remove),f(e,u.Add),y(t,e)}function g(t){const e=t.firstElementChild;if(e!==null&&C(e)){const s=e.id;return h.getInstance().nsStack.find(l=>l.getId()===s)??null}return null}const i=class i{constructor(){c(this,"version");c(this,"nsStack");this.version=v,this.nsStack=[]}findIndex(e){return this.nsStack.findIndex(e)}find(e){return this.nsStack.find(e)}static getInstance(){return i.instance||(i.instance=new i),i.instance}static assignToWindow(){Object.defineProperty(window,i.WindowAccessorKey,{value:i.getInstance(),writable:!1})}static start(){i.assignToWindow(),window.addEventListener("load",()=>{window[i.WindowAccessorKey]instanceof i||i.assignToWindow()})}createNS(e){const n=new a;return n.setText(e||""),this.nsStack.push(n),n}cleanAndRemove(e){return w(e),e.remove().getId()}stackDelete(e){let n=this.findIndex(r=>r.getId()===e.getId());return n<0?null:(this.nsStack.splice(n,1),e.getId())}deleteNS(e){const n=this.find(e);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(e){let n=g(document.body);return n||(n=this.createNS(),m(n.getNSElement(),document.body)),n.setText(e||"").getId()}showInside(e,n){const r=x(e);if(r){let s=g(r);return s||(s=this.createNS()),m(s.getNSElement(),r),s.setText(n||"").getId()}return null}hide(){const e=this.nsStack.pop();return e?this.cleanAndRemove(e):null}hideAll(){this.nsStack.forEach(this.cleanAndRemove),this.nsStack.splice(0,this.nsStack.length)}hideId(e){return this.deleteNS(n=>n.getId()===e)}hideInside(e){const n=x(e),r=s=>s.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};c(i,"WindowAccessorKey","ns"),c(i,"instance");let h=i;try{h.start()}catch(t){console.warn(t)}

package/docs/index.html

@@ -2,130 +2,106 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDEwIiBoZWlnaHQ9IjQwNCIgdmlld0JveD0iMCAwIDQxMCA0MDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zOTkuNjQxIDU5LjUyNDZMMjE1LjY0MyAzODguNTQ1QzIxMS44NDQgMzk1LjMzOCAyMDIuMDg0IDM5NS4zNzggMTk4LjIyOCAzODguNjE4TDEwLjU4MTcgNTkuNTU2M0M2LjM4MDg3IDUyLjE4OTYgMTIuNjgwMiA0My4yNjY1IDIxLjAyODEgNDQuNzU4NkwyMDUuMjIzIDc3LjY4MjRDMjA2LjM5OCA3Ny44OTI0IDIwNy42MDEgNzcuODkwNCAyMDguNzc2IDc3LjY3NjNMMzg5LjExOSA0NC44MDU4QzM5Ny40MzkgNDMuMjg5NCA0MDMuNzY4IDUyLjE0MzQgMzk5LjY0MSA1OS41MjQ2WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIvPgo8cGF0aCBkPSJNMjkyLjk2NSAxLjU3NDRMMTU2LjgwMSAyOC4yNTUyQzE1NC41NjMgMjguNjkzNyAxNTIuOTA2IDMwLjU5MDMgMTUyLjc3MSAzMi44NjY0TDE0NC4zOTUgMTc0LjMzQzE0NC4xOTggMTc3LjY2MiAxNDcuMjU4IDE4MC4yNDggMTUwLjUxIDE3OS40OThMMTg4LjQyIDE3MC43NDlDMTkxLjk2NyAxNjkuOTMxIDE5NS4xNzIgMTczLjA1NSAxOTQuNDQzIDE3Ni42MjJMMTgzLjE4IDIzMS43NzVDMTgyLjQyMiAyMzUuNDg3IDE4NS45MDcgMjM4LjY2MSAxODkuNTMyIDIzNy41NkwyMTIuOTQ3IDIzMC40NDZDMjE2LjU3NyAyMjkuMzQ0IDIyMC4wNjUgMjMyLjUyNyAyMTkuMjk3IDIzNi4yNDJMMjAxLjM5OCAzMjIuODc1QzIwMC4yNzggMzI4LjI5NCAyMDcuNDg2IDMzMS4yNDkgMjEwLjQ5MiAzMjYuNjAzTDIxMi41IDMyMy41TDMyMy40NTQgMTAyLjA3MkMzMjUuMzEyIDk4LjM2NDUgMzIyLjEwOCA5NC4xMzcgMzE4LjAzNiA5NC45MjI4TDI3OS4wMTQgMTAyLjQ1NEMyNzUuMzQ3IDEwMy4xNjEgMjcyLjIyNyA5OS43NDYgMjczLjI2MiA5Ni4xNTgzTDI5OC43MzEgNy44NjY4OUMyOTkuNzY3IDQuMjczMTQgMjk2LjYzNiAwLjg1NTE4MSAyOTIuOTY1IDEuNTc0NFoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcikiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjYuMDAwMTciIHkxPSIzMi45OTk5IiB4Mj0iMjM1IiB5Mj0iMzQ0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0MUQxRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQkQzNEZFIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhciIgeDE9IjE5NC42NTEiIHkxPSI4LjgxODE4IiB4Mj0iMjM2LjA3NiIgeTI9IjI5Mi45ODkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRUE4MyIvPgo8c3RvcCBvZmZzZXQ9IjAuMDgzMzMzMyIgc3RvcC1jb2xvcj0iI0ZGREQzNSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRkE4MDAiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K" />
-		<script src="https://cdn.tailwindcss.com"></script>
-		<link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Nanosplash</title>
-		<meta name="description" content="The tiny loading screen" />
-		<meta name="keywords" content="splash, screen, loading" />
-		<meta name="author" content="Isak Hauge" />
-		<script type="module" crossorigin src="/nanosplash.iife.js"></script>
-		<link rel="stylesheet" href="/style.css">
+		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+		<script type="module" crossorigin src="/nanosplash/index.f34144dc.js"></script>
+		<link rel="stylesheet" href="/nanosplash/index.74dbd99e.css">
 	</head>
-	<body class="flex flex-col justify-between">
-		<div class="w-100 min-h-screen flex flex-col justify-center items-center">
-			<div class="text-4xl text-slate-900 drop-shadow-lg">Nanosplash</div>
-			<div class="text-pink-500 mt-3 font-mono text-sm">ns.show('text').inside('#id')</div>
-			<div class="flex gap-5">
-				<div
-						id="demo"
-						class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
-				>
-					<i class="lni lni-play"></i>
-					Display demo
-				</div>
-				<a
-						href="#example"
-						class="bg-slate-500 text-slate-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
-				>
-					Show examples
-				</a>
-			</div>
-			<div class="flex flex-col space-y-2 my-10">
-				<div class="flex space-x-2 justify-center">
-					<img src="https://badgen.net/npm/v/nanosplash" />
-					<img src="https://badgen.net/npm/types/nanosplash" />
-					<img src="https://badgen.net/npm/dw/nanosplash" />
-				</div>
-				<div class="flex space-x-2 justify-center">
-					<img src="https://badgen.net/bundlephobia/min/nanosplash" />
-					<img
-							src="https://badgen.net/bundlephobia/tree-shaking/nanosplash"
-					/>
-				</div>
-			</div>
-			<div class="flex rounded-xl text-slate-400 shadow-xl overflow-hidden">
-				<div data-copy class="p-3 bg-slate-800 text-slate-400 font-mono">
-					&lt;script src=&quot;https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js&quot;&gt;
-				</div>
-				<div id="copy" class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white">Copy</div>
-			</div>
-			<div class="mt-10 flex justify-content items-center divide-x-2 text-slate-400">
-				<a href="https://www.npmjs.com/package/nanosplash" target="_blank"><i class="lni lni-npm text-4xl hover:text-pink-500 px-5"></i></a>
-				<a href="https://github.com/isakhauge/nanosplash" target="_blank"><i class="lni lni-github-original text-2xl hover:text-pink-500 px-5"></i></a>
+	<body class="bg-slate-50 min-w-full min-h-screen">
+		<div
+			id="main"
+			class="min-h-screen flex flex-col justify-center items-center p-5 overflow-hidden">
+			<div class="text-slate-700 font-medium text-4xl md:text-4xl xl:text-5xl drop-shadow-md tracking-wide">
+				Nanosplash
 			</div>
-			<a class="mt-10 text-pink-300 hover:text-pink-500" href="https://rawcdn.githack.com/isakhauge/nanosplash/0a6cdef58b0e47c0cad911952b1a329df58d2c24/docs/typedoc/index.html">API Reference Documentation</a>
-		</div>
-		<div id="example" class="grid grid-cols-1 xl:grid-cols-2 gap-1">
-			<div id="a" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Give user progress feedback</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.progress(<br>
-					&nbsp;&nbsp;[promise1, 'Loading A'],<br>
-					&nbsp;&nbsp;[promise2, 'Loading B'],<br>
-					&nbsp;&nbsp;[promise3, 'Loading C'],<br>
-					).inside('#myDiv')
-				</div>
-			</div>
-			<div id="b" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Handle async functions</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.while(promise).show('Loading ...').inside('#myDiv')
-				</div>
+			<div class="mt-5 md:mt-10 flex max-w-md justify-center flex-wrap gap-x-1 gap-y-1 drop-shadow-md">
+				<img loading="lazy" src="https://badgen.net/npm/v/nanosplash" alt="Version">
+				<img loading="lazy" src="https://badgen.net/npm/license/nanosplash" alt="License">
+				<img loading="lazy" src="https://badgen.net/npm/types/nanosplash" alt="Types">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/minzip/nanosplash" alt="Minzipped size">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/dependency-count/nanosplash" alt="Dependency count">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/tree-shaking/nanosplash" alt="Tree shaking">
 			</div>
-			<div id="c" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Display fullscreen</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.show('Fullscreen text')
-				</div>
+			<div class="mt-5 md:mt-10 flex gap-x-3 w-full max-w-[500px] justify-center">
+				<button
+					id="run"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">magic_button</span>
+					Run demo
+				</button>
+				<a
+					id="doc"
+					href="https://github.com/isakhauge/nanosplash"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">menu_book</span>
+					Documentation
+				</a>
 			</div>
-			<div id="d" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Display multiple, independent instances</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.show('Loading component A').inside('#a')<br>
-					ns.show('Loading component B').inside('#b')<br>
-					ns.show('Loading component C').inside('#c')
+			<div
+				id="wrapper"
+				class="relative min-w-[300px] mt-5 md:mt-20 flex flex-col md:flex-row gap-y-5 md:gap-y-0 md:gap-x-5 justify-stretch items-stretch bg-white 00 p-10 md:p-10 xl:p-20 rounded-xl ease-in-out duration-500 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+				<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#wrapper</div>
+				<div
+					id="a"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#a</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element A</div>
 				</div>
-			</div>
-			<div id="e" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Move splash instance to another destination</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					const splash = ns.show('Loading').inside('#a')<br>
-					splash.moveTo('#b')
+				<div
+					id="b"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#b</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element B</div>
 				</div>
-			</div>
-			<div id="f" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Hide splash instances</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					// Hides one instance at a time, in a LIFO-fashion.<br>
-					ns.hide()<br><br>
-					// Hides all instances.<br>
-					ns.hideAll()
+				<div
+					id="c"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#c</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element C</div>
 				</div>
 			</div>
 		</div>
-		<footer>
-			
-			<script>
-				window.addEventListener('load',  () => {
-					document.getElementById('demo').onclick = function () {
-						const wait = ms => new Promise(r => setTimeout(r, ms))
-						window.ns.progress(
-								[wait(2000), 'Loading data from API'],
-								[wait(4000), 'Restructuring'],
-								[wait(6000), 'Indexing'],
-								[wait(8000), 'Give this repo a star']
-						)
-					}
-					document.getElementById('copy').onclick = function () {
-						const text = document.querySelector('[data-copy]').innerText
-						navigator.clipboard.writeText(text)
-						alert('Copied to clipboard!')
-					}
-				})
-			</script>
-		</footer>
-		<style>body{min-height:100vh}</style>
+		
+		<script>
+			const wait = (ms) => new Promise(r => setTimeout(r, ms))
+			const ref = (selector) => document.querySelector(selector)
+			const run = ref('#run')
+			run.onclick = async () => {
+				console.log('Running demo')
+				const sec = (n) => n * 1000
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.show('Tiny loading screen')
+				await wait(sec(2))
+				ns.show('For web artisans')
+				await wait(sec(2))
+				ns.hide()
+				ns.showInside('#wrapper', 'Display over elements')
+				await wait(sec(2.25))
+				ns.hide()
+				ns.showInside('#a', 'Like this')
+				await wait(sec(0.5))
+				ns.showInside('#b', 'This')
+				await wait(sec(0.5))
+				ns.showInside('#c', 'Or this')
+				await wait(sec(1))
+				ns.hideAll()
+				ns.show('Simple API')
+				await wait(sec(1.5))
+				ns.show('1.5kb minzipped')
+				await wait(sec(1.5))
+				ns.show('No dependencies')
+				await wait(sec(1.5))
+				ns.show('99% test coverage')
+				await wait(sec(1.5))
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.hide()
+			}
+		</script>
 	</body>
 </html>

package/index.html

@@ -2,132 +2,104 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="favicon.svg" />
-		<script src="https://cdn.tailwindcss.com"></script>
-		<link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Nanosplash</title>
-		<meta name="description" content="The tiny loading screen" />
-		<meta name="keywords" content="splash, screen, loading" />
-		<meta name="author" content="Isak Hauge" />
+		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
 	</head>
-	<body class="flex flex-col justify-between">
-		<div class="w-100 min-h-screen flex flex-col justify-center items-center">
-			<div class="text-4xl text-slate-900 drop-shadow-lg">Nanosplash</div>
-			<div class="text-pink-500 mt-3 font-mono text-sm">ns.show('text').inside('#id')</div>
-			<div class="flex gap-5">
-				<div
-						id="demo"
-						class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
-				>
-					<i class="lni lni-play"></i>
-					Display demo
-				</div>
-				<a
-						href="#example"
-						class="bg-slate-500 text-slate-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
-				>
-					Show examples
-				</a>
-			</div>
-			<div class="flex flex-col space-y-2 my-10">
-				<div class="flex space-x-2 justify-center">
-					<img src="https://badgen.net/npm/v/nanosplash" />
-					<img src="https://badgen.net/npm/types/nanosplash" />
-					<img src="https://badgen.net/npm/dw/nanosplash" />
-				</div>
-				<div class="flex space-x-2 justify-center">
-					<img src="https://badgen.net/bundlephobia/min/nanosplash" />
-					<img
-							src="https://badgen.net/bundlephobia/tree-shaking/nanosplash"
-					/>
-				</div>
-			</div>
-			<div class="flex rounded-xl text-slate-400 shadow-xl overflow-hidden">
-				<div data-copy class="p-3 bg-slate-800 text-slate-400 font-mono">
-					&lt;script src=&quot;https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js&quot;&gt;
-				</div>
-				<div id="copy" class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white">Copy</div>
-			</div>
-			<div class="mt-10 flex justify-content items-center divide-x-2 text-slate-400">
-				<a href="https://www.npmjs.com/package/nanosplash" target="_blank"><i class="lni lni-npm text-4xl hover:text-pink-500 px-5"></i></a>
-				<a href="https://github.com/isakhauge/nanosplash" target="_blank"><i class="lni lni-github-original text-2xl hover:text-pink-500 px-5"></i></a>
+	<body class="bg-slate-50 min-w-full min-h-screen">
+		<div
+			id="main"
+			class="min-h-screen flex flex-col justify-center items-center p-5 overflow-hidden">
+			<div class="text-slate-700 font-medium text-4xl md:text-4xl xl:text-5xl drop-shadow-md tracking-wide">
+				Nanosplash
 			</div>
-			<a class="mt-10 text-pink-300 hover:text-pink-500" href="https://rawcdn.githack.com/isakhauge/nanosplash/0a6cdef58b0e47c0cad911952b1a329df58d2c24/docs/typedoc/index.html">API Reference Documentation</a>
-		</div>
-		<div id="example" class="grid grid-cols-1 xl:grid-cols-2 gap-1">
-			<div id="a" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Give user progress feedback</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.progress(<br>
-					&nbsp;&nbsp;[promise1, 'Loading A'],<br>
-					&nbsp;&nbsp;[promise2, 'Loading B'],<br>
-					&nbsp;&nbsp;[promise3, 'Loading C'],<br>
-					).inside('#myDiv')
-				</div>
-			</div>
-			<div id="b" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Handle async functions</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.while(promise).show('Loading ...').inside('#myDiv')
-				</div>
+			<div class="mt-5 md:mt-10 flex max-w-md justify-center flex-wrap gap-x-1 gap-y-1 drop-shadow-md">
+				<img loading="lazy" src="https://badgen.net/npm/v/nanosplash" alt="Version">
+				<img loading="lazy" src="https://badgen.net/npm/license/nanosplash" alt="License">
+				<img loading="lazy" src="https://badgen.net/npm/types/nanosplash" alt="Types">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/minzip/nanosplash" alt="Minzipped size">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/dependency-count/nanosplash" alt="Dependency count">
+				<img loading="lazy" src="https://badgen.net/bundlephobia/tree-shaking/nanosplash" alt="Tree shaking">
 			</div>
-			<div id="c" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Display fullscreen</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.show('Fullscreen text')
-				</div>
+			<div class="mt-5 md:mt-10 flex gap-x-3 w-full max-w-[500px] justify-center">
+				<button
+					id="run"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">magic_button</span>
+					Run demo
+				</button>
+				<a
+					id="doc"
+					href="https://github.com/isakhauge/nanosplash"
+					type="button"
+					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<span class="material-symbols-outlined">menu_book</span>
+					Documentation
+				</a>
 			</div>
-			<div id="d" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Display multiple, independent instances</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					ns.show('Loading component A').inside('#a')<br>
-					ns.show('Loading component B').inside('#b')<br>
-					ns.show('Loading component C').inside('#c')
+			<div
+				id="wrapper"
+				class="relative min-w-[300px] mt-5 md:mt-20 flex flex-col md:flex-row gap-y-5 md:gap-y-0 md:gap-x-5 justify-stretch items-stretch bg-white 00 p-10 md:p-10 xl:p-20 rounded-xl ease-in-out duration-500 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+				<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#wrapper</div>
+				<div
+					id="a"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#a</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element A</div>
 				</div>
-			</div>
-			<div id="e" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Move splash instance to another destination</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					const splash = ns.show('Loading').inside('#a')<br>
-					splash.moveTo('#b')
+				<div
+					id="b"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#b</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element B</div>
 				</div>
-			</div>
-			<div id="f" class="p-20 bg-slate-100 flex flex-col items-center">
-				<div class="text-xl mb-10">Hide splash instances</div>
-				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
-					// Hides one instance at a time, in a LIFO-fashion.<br>
-					ns.hide()<br><br>
-					// Hides all instances.<br>
-					ns.hideAll()
+				<div
+					id="c"
+					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
+					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#c</div>
+					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element C</div>
 				</div>
 			</div>
 		</div>
-		<footer>
-			<script type="module" src="/src/main.ts"></script>
-			<script>
-				window.addEventListener('load',  () => {
-					document.getElementById('demo').onclick = function () {
-						const wait = ms => new Promise(r => setTimeout(r, ms))
-						window.ns.progress(
-								[wait(2000), 'Loading data from API'],
-								[wait(4000), 'Restructuring'],
-								[wait(6000), 'Indexing'],
-								[wait(8000), 'Give this repo a star']
-						)
-					}
-					document.getElementById('copy').onclick = function () {
-						const text = document.querySelector('[data-copy]').innerText
-						navigator.clipboard.writeText(text)
-						alert('Copied to clipboard!')
-					}
-				})
-			</script>
-		</footer>
-		<style>
-			body {
-				min-height: 100vh;
+		<script type="module" src="src/ts/main.ts"></script>
+		<script>
+			const wait = (ms) => new Promise(r => setTimeout(r, ms))
+			const ref = (selector) => document.querySelector(selector)
+			const run = ref('#run')
+			run.onclick = async () => {
+				console.log('Running demo')
+				const sec = (n) => n * 1000
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.show('Tiny loading screen')
+				await wait(sec(2))
+				ns.show('For web artisans')
+				await wait(sec(2))
+				ns.hide()
+				ns.showInside('#wrapper', 'Display over elements')
+				await wait(sec(2.25))
+				ns.hide()
+				ns.showInside('#a', 'Like this')
+				await wait(sec(0.5))
+				ns.showInside('#b', 'This')
+				await wait(sec(0.5))
+				ns.showInside('#c', 'Or this')
+				await wait(sec(1))
+				ns.hideAll()
+				ns.show('Simple API')
+				await wait(sec(1.5))
+				ns.show('1.5kb minzipped')
+				await wait(sec(1.5))
+				ns.show('No dependencies')
+				await wait(sec(1.5))
+				ns.show('99% test coverage')
+				await wait(sec(1.5))
+				ns.show('Nanosplash')
+				await wait(sec(2))
+				ns.hide()
 			}
-		</style>
+		</script>
 	</body>
 </html>

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "nanosplash",
-  "description": "The simple, tiny loading screen",
-  "version": "2.5.3",
+  "description": "The tiny loading screen for web artisans",
+  "private": false,
+  "version": "3.0.1",
+  "type": "module",
   "author": {
     "name": "Isak K. Hauge",
-    "email": "isakhauge@gmail.com",
+    "email": "isakhauge@icloud.com",
     "url": "https://no.linkedin.com/in/isakhauge"
   },
   "keywords": [
@@ -30,45 +32,57 @@
     "url": "https://github.com/isakhauge/nanosplash.git"
   },
   "license": "MIT",
-  "main": "./dist/module/nanosplash.es.js",
-  "module": "./dist/module/nanosplash.es.js",
-  "source": "./src/Nanosplash.ts",
-  "unpkg": "./dist/iife/nanosplash.iife.js",
-  "style": "./dist/module/style.css",
+  "main": "./dist/latest/es/ns.js",
+  "module": "./dist/latest/es/ns.js",
+  "source": "./src/main.ts",
+  "unpkg": "./dist/latest/iife/ns.iife.js",
+  "style": "./dist/latest/es/style.css",
   "exports": {
     ".": {
-      "import": "./dist/module/nanosplash.es.js",
-      "require": "./dist/module/nanosplash.cjs.js",
-      "default": "./dist/module/nanosplash.es.js"
+      "types": {
+        "require": "./src/ts/types/global.d.ts",
+        "default": "./src/ts/types/global.d.ts"
+      },
+      "browser": {
+        "require": "./dist/latest/cjs/ns.cjs",
+        "default": "./dist/latest/es/ns.js"
+      },
+      "default": {
+        "require": "./dist/latest/cjs/ns.cjs",
+        "default": "./dist/latest/es/ns.js"
+      }
     }
   },
-  "types": "./src/types.d.ts",
+  "types": "./src/ts/types/global.d.ts",
   "scripts": {
-    "dev": "vite --host",
-    "build.iife": "vite build -c vite.iife.config.js",
-    "build.mod": "vite build -c vite.mod.config.js",
-    "build.site": "vite build -c vite.site.config.js",
-    "build": "tsc && yarn build.iife && yarn build.mod && yarn build.site && yarn doc",
-    "doc": "typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Core/Nanosplash.ts src/types.d.ts",
-    "doc.watch": "yarn doc --watch",
-    "serve": "vite preview",
+    "dev": "vite",
+    "build": "yarn build:all && yarn build:all:versioned && yarn build:demo",
+    "build:es": "tsc && cross-env entry=./src/ts/core/Service.ts format=es yarn vite build -m production --c vite.config.ts",
+    "build:cjs": "tsc && cross-env entry=./src/ts/core/Service.ts format=cjs yarn vite build -m production --c vite.config.ts",
+    "build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife yarn vite build -m production --c vite.config.ts",
+    "build:es:ver": "tsc && cross-env versioned=true entry=./src/ts/core/Service.ts format=es yarn vite build -m production --c vite.config.ts",
+    "build:cjs:ver": "tsc && cross-env versioned=true entry=./src/ts/core/Service.ts format=cjs yarn vite build -m production --c vite.config.ts",
+    "build:iife:ver": "tsc && cross-env versioned=true entry=./src/ts/main.ts format=iife yarn vite build -m production --c vite.config.ts",
+    "build:all": "yarn build:es && yarn build:cjs && yarn build:iife",
+    "build:all:versioned": "yarn build:es:ver && yarn build:cjs:ver && yarn build:iife:ver",
+    "build:demo": "tsc && vite build -m production --c vite.demo.config.ts",
+    "preview": "vite preview",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "test:ui": "vitest --ui",
+    "coverage": "vitest --coverage"
   },
   "devDependencies": {
-    "@types/jest": "^28.1.1",
-    "@types/jsdom": "^16.2.14",
-    "autoprefixer": "^10.4.7",
-    "c8": "^7.11.3",
-    "cssnano": "^5.1.12",
-    "jsdom": "^20.0.0",
-    "postcss": "^8.4.14",
-    "sass": "^1.52.3",
-    "ts-jest": "^28.0.5",
-    "ts-node": "^10.8.1",
-    "typedoc": "^0.22.17",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.12",
-    "vitest": "^0.15.1"
+    "@types/jsdom": "^21.1.2",
+    "@types/node": "^20.5.9",
+    "@types/rollup": "^0.54.0",
+    "@vitest/coverage-v8": "^0.34.3",
+    "@vitest/ui": "^0.34.3",
+    "cross-env": "^7.0.3",
+    "jsdom": "^22.1.0",
+    "sass": "^1.66.1",
+    "terser": "^5.19.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3"
   }
-}
+}