nanosplash 4.0.19 → 4.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Nanosplash, Copyright (c) 2025 Isak Hauge
+Copyright (c) 2025-2026 Isak Hauge
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

package/README.md

@@ -5,9 +5,12 @@
 [![CI Production: Build, Test](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml/badge.svg)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml)
 [![Coverage Status](https://coveralls.io/repos/github/isakhauge/nanosplash/badge.svg?branch=main)](https://coveralls.io/github/isakhauge/nanosplash?branch=main)
 
----
+![Nanosplash features: tiny 3kb gzipped, high performance, zero dependencies, minimalistic design, exports ES/CJS/IIFE, 3 function API](https://raw.githubusercontent.com/isakhauge/nanosplash/main/assets/feature-grid.svg)
 
 ```js
+// Anti-flicker: appear only if slower than 150 ms, stay at least 400 ms
+const ns = useNs({ showDelay: 150, minDuration: 400 })
+
 // Fullscreen
 ns.show('Loading')
 
@@ -16,18 +19,30 @@ ns.show('Loading', '#my-div')
 
 // Hide
 ns.hide()
+
+// Run a job under a splash: shows before the job starts, hides when settled
+const data = await ns.show(['Loading', () => fetchData()])
+
+// Run labeled jobs sequentially under one splash — label updates per step,
+// results come back as a typed tuple in order
+const [user, posts] = await ns.show([
+  ['Loading user', () => fetchUser()],
+  ['Loading posts', () => fetchPosts()],
+])
 ```
 
+Still just two functions. Accessible out of the box (`role="status"`, `aria-live="polite"`, `aria-busy`, `prefers-reduced-motion`) and themeable via `--ns-*` CSS custom properties.
+
 ## Installation
-Add to your project and get the typing and docs.
+
 ```bash
 npm install nanosplash
 ```
 
-Or add the script tag to your HTML.
 ```html
 <script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
 ## Documentation
-[Read the full docs here](./docs.md)
+
+[Read the full docs here](./docs.md)

package/dist/cjs/ns.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',d=()=>globalThis.document,l=()=>globalThis.document.body,u=s=>Array.from(s),y=(s,o)=>u(s.querySelectorAll(o)),f=(s,o)=>y(s,o)[0]??null,N=s=>s instanceof Element?s:f(d(),s),c=(s,...o)=>{const i=d().createElement("div");return s&&i.classList.add(s),i.append(...o),i},m=s=>{const o=c();return o.innerHTML=s,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},v={ns:"."+r.ns,nsText:"."+r.nsText},A="4.0.19",E=()=>{const s=()=>y(d(),v.ns),o=()=>{const t=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),n=c(r.ns,c(r.nsText),c(r.nsSpinner,t));return n.nsId=Date.now(),n},i=()=>s().sort((e,t)=>e.nsId-t.nsId),b=()=>i()[0]??null,g=(e,t)=>{if(f(e,v.nsText)?.remove(),!t)return;const n=c(r.nsText,t);e.insertBefore(n,e.firstChild)},x=(e,t)=>{const n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(r.nsHost)},w=e=>u(e.children).find(n=>n.classList.contains(r.ns)),k=(e,t)=>{const n=t?N(t)??l():l();let a;const p=w(n);if(p?a=p:(a=o(),x(a,n)),g(a,e??""),n===l()){const T=scrollY+"px";l().style.setProperty("--ns-top",T)}return a.nsId},h=e=>{e&&(e.parentElement?.classList.remove(r.nsHost),e.remove())},z=e=>s().find(t=>t.nsId===e)??null,S=e=>{e==="*"?s().forEach(h):h(typeof e=="number"?z(e):b())};return(()=>{f(d(),"#ns")?.remove();const e=m(`<style id="ns">${I}</style>`);l().append(e)})(),{show:k,hide:S,version:A}};exports.useNs=E;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top:0}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:"Inter", "Helvetica", "Arial";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-show-delay:0s}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:"";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh,body.nsh:before{width:100%;height:100%;top:var(--ns-top);position:fixed;left:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 .06rem #00000040;filter:drop-shadow(0 0 .07rem #00000040);max-width:80dvw;animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}`,t=()=>globalThis.document,n=()=>globalThis.document.body,r=e=>Array.from(e),i=(e,t)=>r(e.querySelectorAll(t)),a=(e,t)=>i(e,t)[0]??null,o=e=>e instanceof Element?e:a(t(),e),s=(e,...n)=>{let r=t().createElement(`div`);return e&&r.classList.add(e),r.append(...n),r},c=e=>{let t=s();return t.innerHTML=e,t.firstChild},l={ns:`ns`,nsHost:`nsh`,nsText:`nst`,nsSpinner:`nss`},u={ns:`.`+l.ns,nsHost:`.`+l.nsHost,nsText:`.`+l.nsText,nsSpinner:`.`+l.nsSpinner},d=`4.1.1`,f=1,p=e=>Array.isArray(e)&&typeof e[1]==`function`,m=m=>{let h=()=>i(t(),u.ns),g=()=>{let e=c(`<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>`);e.setAttribute(`aria-hidden`,`true`);let t=s(l.ns,s(l.nsText),s(l.nsSpinner,e));return t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),t.nsId=f++,t},_=()=>h().filter(e=>e.nsHideTimer===void 0).sort((e,t)=>e.nsId-t.nsId),v=()=>_()[0]??null,y=(e,t)=>{if(a(e,u.nsText)?.remove(),!t)return;let n=s(l.nsText,t);e.insertBefore(n,e.firstChild)},b=(e,t)=>{let n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(l.nsHost),t.setAttribute(`aria-busy`,`true`)},x=(e,t)=>{e.nsShownAt=performance.now(),e.nsShowDelay=m?.showDelay??0,e.nsMinDuration=m?.minDuration??0,t.style.setProperty(`--ns-show-delay`,e.nsShowDelay+`ms`)},S=e=>r(e.children).find(e=>e.classList.contains(l.ns)),C=(e,t)=>{let r=t?o(t):n();if(!r)return null;k();let i,a=S(r);if(a?(i=a,clearTimeout(i.nsHideTimer),i.nsHideTimer=void 0):(i=g(),b(i,r)),x(i,r),y(i,e??``),r===n()){let e=scrollY+`px`;n().style.setProperty(`--ns-top`,e)}return i.nsId},w=e=>{let t=e.parentElement;t&&(t.classList.remove(l.nsHost),t.removeAttribute(`aria-busy`),t.style.removeProperty(`--ns-show-delay`)),e.remove()},T=e=>{if(!e||e.nsHideTimer!==void 0)return;let t=e.nsShowDelay??0,n=performance.now()-((e.nsShownAt??0)+t),r=t>0&&n<0,i=(e.nsMinDuration??0)-n;if(!r&&i>0){e.nsHideTimer=setTimeout(()=>w(e),i);return}w(e)},E=e=>h().find(t=>t.nsId===e)??null,D=e=>{e===`*`?h().forEach(T):T(typeof e==`number`?E(e):v())},O=()=>c(`<style id="ns">${e}</style>`),k=()=>{let e=a(t(),`#ns`),n=O();if(!e){t().head.append(n);return}e.textContent!==n.textContent&&e.replaceWith(n)},A=async(e,t)=>{if(e.length===0)return[];let n=[],r=null;try{for(let[i,a]of e)r=C(i,t),n.push(await a())}finally{r!==null&&D(r)}return n};return{show:((e,t)=>p(e)?A([e],t).then(e=>e[0]):Array.isArray(e)?A(e,t):C(e,t)),hide:D,version:d}};exports.useNs=m;

package/dist/es/ns.es.js

@@ -1,58 +1,80 @@
-const T = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}', d = () => globalThis.document, l = () => globalThis.document.body, y = (s) => Array.from(s), u = (s, o) => y(s.querySelectorAll(o)), f = (s, o) => u(s, o)[0] ?? null, A = (s) => s instanceof Element ? s : f(d(), s), c = (s, ...o) => {
-  const i = d().createElement("div");
-  return s && i.classList.add(s), i.append(...o), i;
-}, m = (s) => {
-  const o = c();
-  return o.innerHTML = s, o.firstChild;
-}, r = {
-  ns: "ns",
-  nsHost: "nsh",
-  nsText: "nst",
-  nsSpinner: "nss"
-}, v = {
-  ns: "." + r.ns,
-  nsText: "." + r.nsText
-}, N = "4.0.19", H = () => {
-  const s = () => u(d(), v.ns), o = () => {
-    const t = m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), n = c(
-      r.ns,
-      c(r.nsText),
-      c(r.nsSpinner, t)
-    );
-    return n.nsId = Date.now(), n;
-  }, i = () => s().sort((e, t) => e.nsId - t.nsId), b = () => i()[0] ?? null, g = (e, t) => {
-    if (f(e, v.nsText)?.remove(), !t) return;
-    const n = c(r.nsText, t);
-    e.insertBefore(n, e.firstChild);
-  }, x = (e, t) => {
-    const n = t.firstElementChild;
-    n ? t.insertBefore(e, n) : t.append(e), t.classList.add(r.nsHost);
-  }, w = (e) => y(e.children).find((n) => n.classList.contains(r.ns)), k = (e, t) => {
-    const n = t ? A(t) ?? l() : l();
-    let a;
-    const p = w(n);
-    if (p ? a = p : (a = o(), x(a, n)), g(a, e ?? ""), n === l()) {
-      const S = scrollY + "px";
-      l().style.setProperty("--ns-top", S);
-    }
-    return a.nsId;
-  }, h = (e) => {
-    e && (e.parentElement?.classList.remove(r.nsHost), e.remove());
-  }, z = (e) => s().find((t) => t.nsId === e) ?? null, I = (e) => {
-    e === "*" ? s().forEach(h) : h(typeof e == "number" ? z(e) : b());
-  };
-  return (() => {
-    f(d(), "#ns")?.remove();
-    const e = m(
-      `<style id="ns">${T}</style>`
-    );
-    l().append(e);
-  })(), {
-    show: k,
-    hide: I,
-    version: N
-  };
-};
-export {
-  H as useNs
+//#region src/style/ns.css?inline
+var e = () => globalThis.document, t = () => globalThis.document.body, n = (e) => Array.from(e), r = (e, t) => n(e.querySelectorAll(t)), i = (e, t) => r(e, t)[0] ?? null, a = (t) => t instanceof Element ? t : i(e(), t), o = (t, ...n) => {
+	let r = e().createElement("div");
+	return t && r.classList.add(t), r.append(...n), r;
+}, s = (e) => {
+	let t = o();
+	return t.innerHTML = e, t.firstChild;
+}, c = {
+	ns: "ns",
+	nsHost: "nsh",
+	nsText: "nst",
+	nsSpinner: "nss"
+}, l = {
+	ns: "." + c.ns,
+	nsHost: "." + c.nsHost,
+	nsText: "." + c.nsText,
+	nsSpinner: "." + c.nsSpinner
+}, u = "4.1.1", d = 1, f = (e) => Array.isArray(e) && typeof e[1] == "function", p = (p) => {
+	let m = () => r(e(), l.ns), h = () => {
+		let e = s("<svg viewBox=\"0 0 50 50\"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>");
+		e.setAttribute("aria-hidden", "true");
+		let t = o(c.ns, o(c.nsText), o(c.nsSpinner, e));
+		return t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite"), t.nsId = d++, t;
+	}, g = () => m().filter((e) => e.nsHideTimer === void 0).sort((e, t) => e.nsId - t.nsId), _ = () => g()[0] ?? null, v = (e, t) => {
+		if (i(e, l.nsText)?.remove(), !t) return;
+		let n = o(c.nsText, t);
+		e.insertBefore(n, e.firstChild);
+	}, y = (e, t) => {
+		let n = t.firstElementChild;
+		n ? t.insertBefore(e, n) : t.append(e), t.classList.add(c.nsHost), t.setAttribute("aria-busy", "true");
+	}, b = (e, t) => {
+		e.nsShownAt = performance.now(), e.nsShowDelay = p?.showDelay ?? 0, e.nsMinDuration = p?.minDuration ?? 0, t.style.setProperty("--ns-show-delay", e.nsShowDelay + "ms");
+	}, x = (e) => n(e.children).find((e) => e.classList.contains(c.ns)), S = (e, n) => {
+		let r = n ? a(n) : t();
+		if (!r) return null;
+		O();
+		let i, o = x(r);
+		if (o ? (i = o, clearTimeout(i.nsHideTimer), i.nsHideTimer = void 0) : (i = h(), y(i, r)), b(i, r), v(i, e ?? ""), r === t()) {
+			let e = scrollY + "px";
+			t().style.setProperty("--ns-top", e);
+		}
+		return i.nsId;
+	}, C = (e) => {
+		let t = e.parentElement;
+		t && (t.classList.remove(c.nsHost), t.removeAttribute("aria-busy"), t.style.removeProperty("--ns-show-delay")), e.remove();
+	}, w = (e) => {
+		if (!e || e.nsHideTimer !== void 0) return;
+		let t = e.nsShowDelay ?? 0, n = performance.now() - ((e.nsShownAt ?? 0) + t), r = t > 0 && n < 0, i = (e.nsMinDuration ?? 0) - n;
+		if (!r && i > 0) {
+			e.nsHideTimer = setTimeout(() => C(e), i);
+			return;
+		}
+		C(e);
+	}, T = (e) => m().find((t) => t.nsId === e) ?? null, E = (e) => {
+		e === "*" ? m().forEach(w) : w(typeof e == "number" ? T(e) : _());
+	}, D = () => s("<style id=\"ns\">@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top:0}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:\"Inter\", \"Helvetica\", \"Arial\";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-show-delay:0s}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:\"\";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh,body.nsh:before{width:100%;height:100%;top:var(--ns-top);position:fixed;left:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 .06rem #00000040;filter:drop-shadow(0 0 .07rem #00000040);max-width:80dvw;animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}</style>"), O = () => {
+		let t = i(e(), "#ns"), n = D();
+		if (!t) {
+			e().head.append(n);
+			return;
+		}
+		t.textContent !== n.textContent && t.replaceWith(n);
+	}, k = async (e, t) => {
+		if (e.length === 0) return [];
+		let n = [], r = null;
+		try {
+			for (let [i, a] of e) r = S(i, t), n.push(await a());
+		} finally {
+			r !== null && E(r);
+		}
+		return n;
+	};
+	return {
+		show: ((e, t) => f(e) ? k([e], t).then((e) => e[0]) : Array.isArray(e) ? k(e, t) : S(e, t)),
+		hide: E,
+		version: u
+	};
 };
+//#endregion
+export { p as useNs };

package/dist/iife/ns.iife.js

@@ -1 +1 @@
-(function(){"use strict";const b='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Inter", "Helvetica", "Arial";--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 9999999999;--blur: blur(5px);position:relative;z-index:var(--zIdx)}.nsh:before{width:100%;height:100%;bottom:0;right:0;position:absolute;content:"";background-color:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{width:100%;height:100%;position:fixed;top:var(--ns-top);left:0}.ns{width:100%;height:100%;bottom:0;right:0;display:flex;justify-content:center;align-items:center;position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font),sans-serif;font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(0,0,0,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',d=()=>globalThis.document,i=()=>globalThis.document.body,p=s=>Array.from(s),v=(s,o)=>p(s.querySelectorAll(o)),h=(s,o)=>v(s,o)[0]??null,g=s=>s instanceof Element?s:h(d(),s),a=(s,...o)=>{const l=d().createElement("div");return s&&l.classList.add(s),l.append(...o),l},m=s=>{const o=a();return o.innerHTML=s,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},u={ns:"."+r.ns,nsText:"."+r.nsText},x="4.0.19",w=()=>{const s=()=>v(d(),u.ns),o=()=>{const t=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),n=a(r.ns,a(r.nsText),a(r.nsSpinner,t));return n.nsId=Date.now(),n},l=()=>s().sort((e,t)=>e.nsId-t.nsId),k=()=>l()[0]??null,z=(e,t)=>{if(h(e,u.nsText)?.remove(),!t)return;const n=a(r.nsText,t);e.insertBefore(n,e.firstChild)},I=(e,t)=>{const n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(r.nsHost)},S=e=>p(e.children).find(n=>n.classList.contains(r.ns)),T=(e,t)=>{const n=t?g(t)??i():i();let c;const y=S(n);if(y?c=y:(c=o(),I(c,n)),z(c,e??""),n===i()){const E=scrollY+"px";i().style.setProperty("--ns-top",E)}return c.nsId},f=e=>{e&&(e.parentElement?.classList.remove(r.nsHost),e.remove())},A=e=>s().find(t=>t.nsId===e)??null,N=e=>{e==="*"?s().forEach(f):f(typeof e=="number"?A(e):k())};return(()=>{h(d(),"#ns")?.remove();const e=m(`<style id="ns">${b}</style>`);i().append(e)})(),{show:T,hide:N,version:x}};window.addEventListener("load",function(){this.ns=w()})})();
+(function(){var e=()=>globalThis.document,t=()=>globalThis.document.body,n=e=>Array.from(e),r=(e,t)=>n(e.querySelectorAll(t)),i=(e,t)=>r(e,t)[0]??null,a=t=>t instanceof Element?t:i(e(),t),o=(t,...n)=>{let r=e().createElement(`div`);return t&&r.classList.add(t),r.append(...n),r},s=e=>{let t=o();return t.innerHTML=e,t.firstChild},c={ns:`ns`,nsHost:`nsh`,nsText:`nst`,nsSpinner:`nss`},l={ns:`.`+c.ns,nsHost:`.`+c.nsHost,nsText:`.`+c.nsText,nsSpinner:`.`+c.nsSpinner},u=`4.1.1`,d=1,f=e=>Array.isArray(e)&&typeof e[1]==`function`,p=p=>{let m=()=>r(e(),l.ns),h=()=>{let e=s(`<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>`);e.setAttribute(`aria-hidden`,`true`);let t=o(c.ns,o(c.nsText),o(c.nsSpinner,e));return t.setAttribute(`role`,`status`),t.setAttribute(`aria-live`,`polite`),t.nsId=d++,t},g=()=>m().filter(e=>e.nsHideTimer===void 0).sort((e,t)=>e.nsId-t.nsId),_=()=>g()[0]??null,v=(e,t)=>{if(i(e,l.nsText)?.remove(),!t)return;let n=o(c.nsText,t);e.insertBefore(n,e.firstChild)},y=(e,t)=>{let n=t.firstElementChild;n?t.insertBefore(e,n):t.append(e),t.classList.add(c.nsHost),t.setAttribute(`aria-busy`,`true`)},b=(e,t)=>{e.nsShownAt=performance.now(),e.nsShowDelay=p?.showDelay??0,e.nsMinDuration=p?.minDuration??0,t.style.setProperty(`--ns-show-delay`,e.nsShowDelay+`ms`)},x=e=>n(e.children).find(e=>e.classList.contains(c.ns)),S=(e,n)=>{let r=n?a(n):t();if(!r)return null;O();let i,o=x(r);if(o?(i=o,clearTimeout(i.nsHideTimer),i.nsHideTimer=void 0):(i=h(),y(i,r)),b(i,r),v(i,e??``),r===t()){let e=scrollY+`px`;t().style.setProperty(`--ns-top`,e)}return i.nsId},C=e=>{let t=e.parentElement;t&&(t.classList.remove(c.nsHost),t.removeAttribute(`aria-busy`),t.style.removeProperty(`--ns-show-delay`)),e.remove()},w=e=>{if(!e||e.nsHideTimer!==void 0)return;let t=e.nsShowDelay??0,n=performance.now()-((e.nsShownAt??0)+t),r=t>0&&n<0,i=(e.nsMinDuration??0)-n;if(!r&&i>0){e.nsHideTimer=setTimeout(()=>C(e),i);return}C(e)},T=e=>m().find(t=>t.nsId===e)??null,E=e=>{e===`*`?m().forEach(w):w(typeof e==`number`?T(e):_())},D=()=>s(`<style id="ns">@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top:0}:where(:root){--ns-color:DarkSlateGray;--ns-size:20px;--ns-font:"Inter", "Helvetica", "Arial";--ns-weight:400;--ns-bg:#ffffffe6;--ns-z-index:10000000000;--ns-blur:blur(5px);--ns-show-delay:0s}.nsh{--color:var(--ns-color);--size:var(--ns-size);--relSize:calc(var(--size) * .9);--font:var(--ns-font);--weight:var(--ns-weight);--bg:var(--ns-bg);--zIdx:var(--ns-z-index);--blur:var(--ns-blur);z-index:var(--zIdx);position:relative}.nsh:before{animation:.2s linear backwards nsFade;animation-delay:var(--ns-show-delay);content:"";background-color:var(--bg);width:100%;height:100%;-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit;position:absolute;bottom:0;right:0}body.nsh,body.nsh:before{width:100%;height:100%;top:var(--ns-top);position:fixed;left:0}.ns{width:100%;height:100%;z-index:calc(var(--zIdx) + 2);animation:2s backwards nsFade;animation-delay:var(--ns-show-delay);justify-content:center;align-items:center;gap:var(--relSize);display:flex;position:absolute;bottom:0;right:0}.nst{color:var(--color);font-size:var(--size);font-family:var(--font), sans-serif;font-weight:var(--weight);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 .06rem #00000040;filter:drop-shadow(0 0 .07rem #00000040);max-width:80dvw;animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);overflow:hidden}.nss{width:var(--relSize);height:var(--relSize);animation:.5s backwards nsAscend;animation-delay:var(--ns-show-delay);display:block}.nss>svg{width:inherit;height:inherit;stroke-width:8px;animation:2s linear infinite nsRotate;position:relative}.nss .path{stroke:var(--color);stroke-linecap:round;animation:1.5s ease-in-out infinite nsDash}@media (prefers-reduced-motion:reduce){.ns,.nst,.nss,.nsh:before{animation-duration:0s}.nss>svg{animation:6s linear infinite nsRotate}.nss .path{stroke-dasharray:90 150;stroke-dashoffset:-35px;animation:none}}</style>`),O=()=>{let t=i(e(),`#ns`),n=D();if(!t){e().head.append(n);return}t.textContent!==n.textContent&&t.replaceWith(n)},k=async(e,t)=>{if(e.length===0)return[];let n=[],r=null;try{for(let[i,a]of e)r=S(i,t),n.push(await a())}finally{r!==null&&E(r)}return n};return{show:((e,t)=>f(e)?k([e],t).then(e=>e[0]):Array.isArray(e)?k(e,t):S(e,t)),hide:E,version:u}};window.addEventListener(`load`,()=>{window.ns=p()})})();

package/package.json

@@ -1,55 +1,47 @@
 {
   "name": "nanosplash",
+  "version": "4.1.1",
   "private": false,
-  "version": "4.0.19",
-  "type": "module",
-  "author": {
-    "name": "Isak K. Hauge",
-    "email": "isakhauge@icloud.com",
-    "url": "https://no.linkedin.com/in/isakhauge"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/isakhauge/nanosplash.git"
-  },
   "description": "The tiny loading screen for web artisans",
-  "homepage": "https://github.com/isakhauge/nanosplash",
   "keywords": [
-    "loading",
+    "cdn",
+    "es",
+    "esm",
+    "iife",
     "loader",
-    "screen",
-    "splash",
+    "loading",
     "nano",
     "nanosplash",
+    "screen",
     "small",
+    "splash",
     "tiny",
-    "es",
-    "esm",
     "ts",
     "typescript",
-    "iife",
-    "cdn",
     "vite"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "bun run build:es && bun run build:cjs && bun run build:iife",
-    "build:es": "tsc && cross-env entry=./src/composables/ns.ts format=es vite build -m production --outDir ./dist/es",
-    "build:cjs": "tsc && cross-env entry=./src/composables/ns.ts format=cjs vite build -m production --outDir ./dist/cjs",
-    "build:iife": "tsc && cross-env entry=./src/iife.ts format=iife vite build -m production --outDir ./dist/iife",
-    "preview": "vite preview",
-    "lint": "eslint . --fix",
-    "format": "prettier --write ./src/**/*.ts ./vite.config.ts ./vitest.config.ts",
-    "test": "bunx vitest --coverage"
+  "homepage": "https://github.com/isakhauge/nanosplash",
+  "author": {
+    "name": "Isak K. Hauge",
+    "email": "isakhauge@icloud.com",
+    "url": "https://no.linkedin.com/in/isakhauge"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/isakhauge/nanosplash.git"
+  },
+  "source": "./src/composables/ns.ts",
   "files": [
     "dist",
     "types",
     "README.md",
     "LICENSE"
   ],
-  "types": "./types/global.d.ts",
+  "type": "module",
   "main": "./dist/es/ns.es.js",
+  "types": "./types/global.d.ts",
+  "unpkg": "./dist/iife/ns.iife.js",
+  "jsdelivr": "./dist/iife/ns.iife.js",
   "exports": {
     ".": {
       "types": "./types/global.d.ts",
@@ -58,27 +50,40 @@
       "default": "./dist/es/ns.es.js"
     }
   },
-  "source": "./src/composables/ns.ts",
-  "unpkg": "./dist/iife/ns.iife.js",
-  "jsdelivr": "./dist/iife/ns.iife.js",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "bun run build:es && bun run build:cjs && bun run build:iife",
+    "build:es": "tsc && cross-env entry=./src/composables/ns.ts format=es vp build -m production --outDir ./dist/es",
+    "build:cjs": "tsc && cross-env entry=./src/composables/ns.ts format=cjs vp build -m production --outDir ./dist/cjs",
+    "build:iife": "tsc && cross-env entry=./src/iife.ts format=iife vp build -m production --outDir ./dist/iife",
+    "preview": "vp preview",
+    "lint": "vp lint",
+    "format": "vp fmt",
+    "test": "vp test --coverage",
+    "check": "vp check"
+  },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
     "@types/node": "^25.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
-    "@vitest/coverage-v8": "4.0.18",
+    "@vitest/coverage-v8": "4.1.11",
     "cross-env": "^10.1.0",
     "cssnano": "^7.1.2",
     "dotenv": "^17.3.1",
-    "eslint": "^10.0.1",
-    "eslint-config-prettier": "^10.1.8",
-    "globals": "^17.3.0",
     "jsdom": "^28.1.0",
     "postcss": "^8.5.6",
-    "prettier": "3.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "typescript": "7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plus": "0.3.0",
+    "vitest": "4.1.11"
+  },
+  "overrides": {
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vitest": "4.1.11"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "bun",
+      "version": "1.4.0",
+      "onFail": "warn"
+    }
   }
 }

package/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { INanosplash } from './interfaces/INanosplash.ts'
+import type { INanosplash, NsOptions } from './interfaces/INanosplash.ts'
 
 declare global {
   interface Window {
@@ -11,9 +11,11 @@ declare global {
  *
  * **The tiny loading screen for web artisans**
  *
- * `useNs` is the main hook, which will inject the style into the DOM and return
- * an instance of the Nanosplash API.
- * We recommend that you add Nanosplash to the Window.
+ * Create the Nanosplash API. `useNs` is the sole entry point; styles inject
+ * lazily on the first `show()`.
+ * We recommend adding Nanosplash to the Window.
+ * @param options Anti-flicker timing applied to every splash shown through
+ * this instance.
  * @returns Instance of Nanosplash API
  * @example The short and easy way.
  * window.ns = useNs()
@@ -21,6 +23,8 @@ declare global {
  * window.addEventListener('load', function() {
  *     this.ns = useNs()
  * })
+ * @example With anti-flicker timing.
+ * const ns = useNs({ showDelay: 150, minDuration: 400 })
  * @author Isak Hauge <https://www.linkedin.com/in/isakhauge/>
  */
-export const useNs: () => INanosplash
+export const useNs: (options?: NsOptions) => INanosplash

package/types/interfaces/INSElement.d.ts

@@ -1,5 +1,13 @@
-import type { int } from "../semantic/number";
+import type { int } from '../semantic/number'
 
 export interface INSElement extends HTMLDivElement {
   nsId: int
+  /** `performance.now()` timestamp of the last `show()` call targeting this element. */
+  nsShownAt?: number
+  /** Milliseconds the splash stays invisible after `show()` (anti-flicker). */
+  nsShowDelay?: int
+  /** Minimum milliseconds the splash stays visible once shown (anti-flicker). */
+  nsMinDuration?: int
+  /** Pending deferred-removal timer, set while a `hide()` waits out `minDuration`. */
+  nsHideTimer?: ReturnType<typeof setTimeout>
 }

package/types/interfaces/INanosplash.d.ts

@@ -1,6 +1,64 @@
 import type { ElementRef } from '../dom'
 import type { int } from '../semantic/number'
 
+/**
+ * # Options
+ * Configuration for `useNs()`. Applies to every splash shown through the
+ * returned API instance, keeping visual behavior consistent.
+ */
+export interface NsOptions {
+  /**
+   * Milliseconds to keep the splash invisible after `show()`.
+   * If it is hidden before the delay elapses, it never becomes visible.
+   * Prevents a flash of spinner on fast operations.
+   */
+  showDelay?: int
+  /**
+   * Minimum milliseconds the splash stays visible once shown.
+   * A `hide()` call arriving earlier is deferred until the minimum has passed.
+   * Prevents a barely-visible blink.
+   */
+  minDuration?: int
+}
+
+/**
+ * # Job
+ * An async unit of work tracked by a Nanosplash. The splash is guaranteed
+ * to be visible before the job is invoked.
+ */
+export type NsJob<T> = () => Promise<T>
+
+/**
+ * # Label
+ * The text displayed beside the spinner, or falsy for spinner only.
+ */
+export type NsLabel = string | null | undefined
+
+/**
+ * # Labeled job
+ * A job with a label. While the job runs, the splash shows the label.
+ */
+export type NsLabeledJob<T> = [NsLabel, NsJob<T>]
+
+/**
+ * # Show input
+ * Everything `show()` accepts as its first argument.
+ */
+export type NsShowInput =
+  | NsLabel
+  | NsLabeledJob<unknown>
+  | readonly NsLabeledJob<unknown>[]
+
+/**
+ * # Job results
+ * Maps a tuple of labeled jobs to a tuple of each job's resolved return value.
+ */
+export type NsJobResults<Jobs extends readonly NsLabeledJob<unknown>[]> = {
+  -readonly [K in keyof Jobs]: Jobs[K] extends NsLabeledJob<infer R>
+    ? Awaited<R>
+    : never
+}
+
 /**
  * # Nanosplash
  * @author Isak Hauge <isakhauge@icloud.com>
@@ -8,61 +66,63 @@ import type { int } from '../semantic/number'
 export interface INanosplash {
   /**
    * # Show
-   * Display Nanosplash inside the window.
-   * @param {string | null | undefined} text Optional text. Pass falsy to display spinner only.
-   * @param {string | Element | undefined} inside Optional element reference
-   * @returns {number | null} The internal ID of the created Nanosplash.
+   * Display a splash, globally or inside a container.
+   * @param label Optional label. Pass falsy to display the spinner only.
+   * @param inside Optional container: an `Element` or a CSS selector.
+   * Omit to target the document body.
+   * @returns The splash's ID, or `null` if `inside` could not be resolved.
    * @example
-   * // Show spinner only
-   * ns.show()
-   * @example
-   * // Show spinner and text
-   * ns.show('Loading ...')
+   * ns.show()                       // spinner only
+   * ns.show('Loading…')             // spinner and label
+   * ns.show('Loading…', '#my-div')  // inside a container (selector)
+   * ns.show(null, myElement)        // inside a container (element), no label
+   */
+  show(label?: NsLabel, inside?: ElementRef | HTMLElement): int | null
+  /**
+   * # Show (single job)
+   * Display a splash for the lifetime of one job: show it with the label
+   * before the job starts and hide it when the job settles (resolve or
+   * reject). Pass the job's result through.
+   * @param job A `[label, job]` pair.
+   * @param inside Optional container: an `Element` or a CSS selector.
+   * @returns The job's resolved value.
    * @example
-   * // Show spinner and text inside element
-   * const div = document.createElement('div')
-   * div.id = 'my-div'
-   * document.body.append(div)
-   *
-   * // Alternative 1: Using node
-   * ns.show('Loading ...', div)
-   *
-   * // Alternative 2: Using selector
-   * ns.show('Loading ...', '#my-div')
+   * const user = await ns.show(['Loading user…', () => fetchUser()])
+   */
+  show<T>(
+    job: NsLabeledJob<T>,
+    inside?: ElementRef | HTMLElement,
+  ): Promise<Awaited<T>>
+  /**
+   * # Show (job sequence)
+   * Display one splash across sequential labeled jobs, updating the label as
+   * each job starts. Resolve with the jobs' results as a typed tuple, in
+   * input order. Fail fast: the first rejection hides the splash,
+   * propagates, and skips the remaining jobs.
+   * @param jobs An array of `[label, job]` pairs.
+   * @param inside Optional container: an `Element` or a CSS selector.
+   * @returns The jobs' resolved values, in input order.
    * @example
-   * // Show spinner only, inside element
-   * const div = document.createElement('div')
-   * div.id = 'my-div'
-   * document.body.append(div)
-   *
-   * // Alternative 1: Using node
-   * ns.show(null, div)
-   *
-   * // Alternative 2: Using selector
-   * ns.show(null, '#my-div')
+   * const [user, posts] = await ns.show([
+   *   ['Loading user…', () => fetchUser()],
+   *   ['Loading posts…', () => fetchPosts()],
+   * ])
    */
-  show(
-    text?: string | null | undefined,
-    inside?: ElementRef | HTMLElement
-  ): int | null
+  show<Jobs extends readonly NsLabeledJob<unknown>[]>(
+    jobs: readonly [...Jobs],
+    inside?: ElementRef | HTMLElement,
+  ): Promise<NsJobResults<Jobs>>
   /**
    * # Hide
-   * Remove Nanosplash in multiple ways depending on the passed argument.
-   * - Pass ID: Remove specific.
-   * - Pass '*': Remove all in window.
-   * - Pass nothing: Remove in FIFO order.
-   * @param id The internal ID, an asterisk, or nothing.
-   * @example
-   * // Remove the first Nanosplash in the queue (FIFO)
-   * ns.hide()
-   * @example
-   * // Remove specific Nanosplash in case you have multiple
-   * const idA: number = ns.show(null, '#div-a') // 1700000000000
-   * const idB: number = ns.show(null, '#div-b') // 1800000000000
-   * ns.hide(idB) // Only hides Nanosplash inside the element with ID div-b
+   * Remove one or more splashes.
+   * - Pass an ID: remove that splash.
+   * - Pass `'*'`: remove every splash.
+   * - Pass nothing: remove the oldest splash (FIFO).
+   * @param id A splash ID, `'*'`, or nothing.
    * @example
-   * // Hide all Nanosplash elements in the DOM
-   * ns.hide('*')
+   * ns.hide()      // oldest splash
+   * ns.hide(id)    // specific splash, using the ID returned by show()
+   * ns.hide('*')   // every splash
    */
   hide(id?: int | '*'): void
   /**