nanosplash 3.1.1 → 4.0.0

package/.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-
+          registry-url: 'https://registry.npmjs.org'
       - name: Set up Git and update production branch
         run: |
           git config --global user.name "GitHub Actions"
@@ -38,7 +38,7 @@ jobs:
         uses: actions/configure-pages@v3
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Build (Vite)
         run: pnpm build
@@ -54,3 +54,8 @@ jobs:
           git add .
           git commit --allow-empty -m "Build, test, and coverage report"
           git push
+
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

package/.github/workflows/vitepress.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
       - name: Build with VitePress
         run: |
           pnpm docs:build

package/dist/cjs/ns.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{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);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.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}',m="3.1.1",l="ns",i=document,r=i.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),f=e=>a(i).all(e),h=e=>a(i).first(e),p=()=>f(".ns"),u=e=>e instanceof Element?e:h(e),n=(e,...s)=>{const t=i.createElement("div");return e&&t.classList.add(e),t.append(...s),t},v=e=>{const s=n();return s.innerHTML=e,s.firstChild},g=()=>{const s=v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=n("ns",n("nst"),n("nss",s));return t.nsId=Date.now(),t},w=()=>p().sort((e,s)=>e.nsId-s.nsId)[0]??null,k=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const o=n("nst",s);t?t.replaceWith(o):e.insertBefore(o,e.firstChild)},x=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},z=(e,s)=>{const t=s?u(s):r;let o;const c=a(t??r).first("& > .ns");c?o=c:(o=g(),x(o,t)),k(o,e??"");const y=scrollY+"px";return r.style.setProperty("--ns-top",y),o.nsId},d=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},I=e=>p().find(s=>s.nsId===e)??null,N=e=>{e==="*"?f(".ns").forEach(d):d(typeof e=="number"?I(e):w())},A=()=>{var e;(e=h("#"+l))==null||e.remove(),r.append(v(`<style id=${l}>${b}</style>`))},S=()=>(A(),window.ns={show:z,hide:N,version:m});exports.useNs=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{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);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.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}',m="4.0.0",l="ns",i=document,r=i.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),f=e=>a(i).all(e),h=e=>a(i).first(e),p=()=>f(".ns"),u=e=>e instanceof Element?e:h(e),n=(e,...s)=>{const t=i.createElement("div");return e&&t.classList.add(e),t.append(...s),t},v=e=>{const s=n();return s.innerHTML=e,s.firstChild},g=()=>{const s=v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=n("ns",n("nst"),n("nss",s));return t.nsId=Date.now(),t},k=()=>p().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const o=n("nst",s);t?t.replaceWith(o):e.insertBefore(o,e.firstChild)},x=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},z=(e,s)=>{const t=s?u(s):r;let o;const c=a(t??r).first("& > .ns");c?o=c:(o=g(),x(o,t)),w(o,e??"");const y=scrollY+"px";return r.style.setProperty("--ns-top",y),o.nsId},d=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},I=e=>p().find(s=>s.nsId===e)??null,N=e=>{e==="*"?f(".ns").forEach(d):d(typeof e=="number"?I(e):k())},A=()=>{var e;(e=h("#"+l))==null||e.remove(),r.append(v(`<style id=${l}>${b}</style>`))},S=()=>(A(),{show:z,hide:N,version:m});exports.useNs=S;

package/dist/es/ns.js

@@ -1,4 +1,4 @@
-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: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{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);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.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}', m = "3.1.1", l = "ns", i = document, r = i.body, a = (e) => /* @__PURE__ */ ((s) => ({
+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: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{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);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.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}', m = "4.0.0", l = "ns", i = document, r = i.body, a = (e) => /* @__PURE__ */ ((s) => ({
   all: s,
   first: (t) => s(t)[0] ?? null
 }))((s) => Array.from(e.querySelectorAll(s))), f = (e) => a(i).all(e), h = (e) => a(i).first(e), p = () => f(".ns"), u = (e) => e instanceof Element ? e : h(e), n = (e, ...s) => {
@@ -10,7 +10,7 @@ const b = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%
 }, g = () => {
   const s = v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), t = n("ns", n("nst"), n("nss", s));
   return t.nsId = Date.now(), t;
-}, w = () => p().sort((e, s) => e.nsId - s.nsId)[0] ?? null, k = (e, s) => {
+}, k = () => p().sort((e, s) => e.nsId - s.nsId)[0] ?? null, w = (e, s) => {
   const t = a(e).first(".nst");
   if (!s)
     return t == null ? void 0 : t.remove();
@@ -23,18 +23,18 @@ const b = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%
   const t = s ? u(s) : r;
   let o;
   const c = a(t ?? r).first("& > .ns");
-  c ? o = c : (o = g(), x(o, t)), k(o, e ?? "");
+  c ? o = c : (o = g(), x(o, t)), w(o, e ?? "");
   const y = scrollY + "px";
   return r.style.setProperty("--ns-top", y), o.nsId;
 }, d = (e) => {
   var s;
   (s = e == null ? void 0 : e.parentElement) == null || s.classList.remove("nsh"), e == null || e.remove();
 }, I = (e) => p().find((s) => s.nsId === e) ?? null, A = (e) => {
-  e === "*" ? f(".ns").forEach(d) : d(typeof e == "number" ? I(e) : w());
+  e === "*" ? f(".ns").forEach(d) : d(typeof e == "number" ? I(e) : k());
 }, N = () => {
   var e;
   (e = h("#" + l)) == null || e.remove(), r.append(v(`<style id=${l}>${b}</style>`));
-}, S = () => (N(), window.ns = {
+}, S = () => (N(), {
   show: z,
   hide: A,
   version: m

package/dist/iife/ns.iife.js

@@ -1 +1 @@
-(function(){"use strict";const y='@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: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{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);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.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}',b="3.1.1",c="ns",r=document,i=r.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),l=e=>a(r).all(e),d=e=>a(r).first(e),f=()=>l(".ns"),m=e=>e instanceof Element?e:d(e),o=(e,...s)=>{const t=r.createElement("div");return e&&t.classList.add(e),t.append(...s),t},h=e=>{const s=o();return s.innerHTML=e,s.firstChild},u=()=>{const s=h('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=o("ns",o("nst"),o("nss",s));return t.nsId=Date.now(),t},g=()=>f().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const n=o("nst",s);t?t.replaceWith(n):e.insertBefore(n,e.firstChild)},k=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},x=(e,s)=>{const t=s?m(s):i;let n;const v=a(t??i).first("& > .ns");v?n=v:(n=u(),k(n,t)),w(n,e??"");const A=scrollY+"px";return i.style.setProperty("--ns-top",A),n.nsId},p=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},z=e=>f().find(s=>s.nsId===e)??null,I=e=>{e==="*"?l(".ns").forEach(p):p(typeof e=="number"?z(e):g())},N=()=>{var e;(e=d("#"+c))==null||e.remove(),i.append(h(`<style id=${c}>${y}</style>`))};N(),window.ns={show:x,hide:I,version:b}})();
+(function(){"use strict";const y='@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: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{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);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.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}',b="4.0.0",c="ns",r=document,i=r.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),l=e=>a(r).all(e),d=e=>a(r).first(e),f=()=>l(".ns"),m=e=>e instanceof Element?e:d(e),o=(e,...s)=>{const t=r.createElement("div");return e&&t.classList.add(e),t.append(...s),t},h=e=>{const s=o();return s.innerHTML=e,s.firstChild},u=()=>{const s=h('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=o("ns",o("nst"),o("nss",s));return t.nsId=Date.now(),t},g=()=>f().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const n=o("nst",s);t?t.replaceWith(n):e.insertBefore(n,e.firstChild)},k=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},x=(e,s)=>{const t=s?m(s):i;let n;const v=a(t??i).first("& > .ns");v?n=v:(n=u(),k(n,t)),w(n,e??"");const S=scrollY+"px";return i.style.setProperty("--ns-top",S),n.nsId},p=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},z=e=>f().find(s=>s.nsId===e)??null,I=e=>{e==="*"?l(".ns").forEach(p):p(typeof e=="number"?z(e):g())},A=()=>{var e;(e=d("#"+c))==null||e.remove(),i.append(h(`<style id=${c}>${y}</style>`))},N=()=>(A(),{show:x,hide:I,version:b});window.ns=N()})();

package/docs/.vitepress/config.ts

@@ -6,6 +6,9 @@ export default defineConfig({
 	description: 'The tiny loading screen for web artisans',
 	base: '/nanosplash/',
 	appearance: 'dark',
+	head: [
+		['script', { src: 'https://unpkg.com/nanosplash/dist/iife/ns.iife.js' }],
+	],
 	themeConfig: {
 		nav: [
 			{ text: 'Home', link: '/' },

package/docs/.vitepress/theme/vue/PlayGround.vue

@@ -1,7 +1,6 @@
 <script setup>
 import CardGrid from './CardGrid.vue'
 import Card from './Card.vue'
-import Exe from './Exe.vue'
 </script>
 
 <template>
@@ -20,7 +19,6 @@ import Exe from './Exe.vue'
 				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
 			</Card>
 		</CardGrid>
-		<Exe />
 	</div>
 </template>
 

package/docs/api/start/install.md

@@ -18,15 +18,15 @@ Add the following script tag inside of the `<body>` tag:
 <script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
-```html{7}
+### Example
+
+```html{6}
 <html>
 	<head>
-		<meta charset="UTF-8" />
 		<title>My awesome application 🚀</title>
 	</head>
 	<body>
 		<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
-		...
 	</body>
 </html>
 ```
@@ -53,5 +53,9 @@ const ns = useNs()
 ns.show('It works!')
 ```
 
-The hook will inject the Nanosplash API inside the global `window` object.
-You can now start using Nanosplash by simply calling `ns.show`.
+For ease of use, add it to the window object for global access.
+
+```js{2}
+import { useNs } from 'nanosplash'
+window.ns = useNs()
+```

package/docs/api/start/playground.md

@@ -8,4 +8,9 @@ Here you can play around with Nanosplash and see how it works.
 
 <PlayGround />
 
-Select a method from the dropdown menu above and click "Run" to see it in action.
+Open your browser console (developer tools).
+
+- macOS: `⌘` `⌥` `i`
+- Windows: `Ctrl` `⇧` `i`
+
+Try to target different elements in the DOM. Nanosplash is available in the window scope as `ns`. Give it a shot!

package/package.json

@@ -1,91 +1,91 @@
 {
-  "name": "nanosplash",
-  "version": "3.1.1",
-  "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"
-  },
-  "main": "./dist/es/ns.js",
-  "module": "./dist/es/ns.js",
-  "devDependencies": {
-    "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.11.29",
-    "@types/rollup": "^0.54.0",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vitest/ui": "^1.4.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "jsdom": "^24.0.0",
-    "sass": "^1.72.0",
-    "stylelint-prettier": "^5.0.0",
-    "typescript": "5.4.2",
-    "typescript-eslint": "^7.2.0",
-    "vite": "^5.1.6",
-    "vitepress": "",
-    "vitest": "^1.4.0"
-  },
-  "exports": {
-    ".": {
-      "types": {
-        "require": "./src/ts/types/global.d.ts",
-        "default": "./src/ts/types/global.d.ts"
-      },
-      "browser": {
-        "require": "./dist/cjs/ns.cjs",
-        "default": "./dist/es/ns.js"
-      },
-      "default": {
-        "require": "./dist/cjs/ns.cjs",
-        "default": "./dist/es/ns.js"
-      }
-    }
-  },
-  "description": "The tiny loading screen for web artisans",
-  "homepage": "https://isakhauge.github.io/nanosplash",
-  "keywords": [
-    "loading",
-    "loader",
-    "screen",
-    "splash",
-    "nano",
-    "nanosplash",
-    "small",
-    "tiny",
-    "es",
-    "esm",
-    "ts",
-    "typescript",
-    "iife",
-    "cdn",
-    "vite"
-  ],
-  "license": "MIT",
-  "private": false,
-  "source": "./src/main.ts",
-  "type": "module",
-  "types": "./src/ts/types/global.d.ts",
-  "unpkg": "./dist/iife/ns.iife.js",
-  "scripts": {
-    "build": "pnpm build:all && pnpm build:docs",
-    "build:es": "tsc && cross-env entry=./src/ts/Nanosplash.ts format=es vite build -m production --c vite.config.ts",
-    "build:cjs": "tsc && cross-env entry=./src/ts/Nanosplash.ts format=cjs vite build -m production --c vite.config.ts",
-    "build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife vite build -m production --c vite.config.ts",
-    "build:all": "pnpm build:es && pnpm build:cjs && pnpm build:iife",
-    "build:docs": "pnpm docs:build",
-    "preview": "vite preview",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "lint": "eslint src/ts/**/*.ts --fix",
-    "coverage": "vitest --coverage",
-    "docs:dev": "pnpm exec vitepress dev docs",
-    "docs:build": "pnpm exec vitepress build docs",
-    "docs:preview": "pnpm exec vitepress preview docs"
-  }
-}
+	"name": "nanosplash",
+	"version": "4.0.0",
+	"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"
+	},
+	"main": "./dist/es/ns.js",
+	"module": "./dist/es/ns.js",
+	"devDependencies": {
+		"@types/jsdom": "^21.1.6",
+		"@types/node": "^20.11.30",
+		"@types/rollup": "^0.54.0",
+		"@vitest/coverage-v8": "^1.4.0",
+		"@vitest/ui": "^1.4.0",
+		"cross-env": "^7.0.3",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"jsdom": "^24.0.0",
+		"sass": "^1.72.0",
+		"stylelint-prettier": "^5.0.0",
+		"typescript": "5.4.2",
+		"typescript-eslint": "^7.2.0",
+		"vite": "^5.1.6",
+		"vitepress": "1.0.0-rc.45",
+		"vitest": "^1.4.0"
+	},
+	"exports": {
+		".": {
+			"types": {
+				"require": "./src/ts/types/global.d.ts",
+				"default": "./src/ts/types/global.d.ts"
+			},
+			"browser": {
+				"require": "./dist/cjs/ns.cjs",
+				"default": "./dist/es/ns.js"
+			},
+			"default": {
+				"require": "./dist/cjs/ns.cjs",
+				"default": "./dist/es/ns.js"
+			}
+		}
+	},
+	"description": "The tiny loading screen for web artisans",
+	"homepage": "https://isakhauge.github.io/nanosplash",
+	"keywords": [
+		"loading",
+		"loader",
+		"screen",
+		"splash",
+		"nano",
+		"nanosplash",
+		"small",
+		"tiny",
+		"es",
+		"esm",
+		"ts",
+		"typescript",
+		"iife",
+		"cdn",
+		"vite"
+	],
+	"license": "MIT",
+	"private": false,
+	"scripts": {
+		"build": "pnpm build:all && pnpm build:docs",
+		"build:es": "tsc && cross-env entry=./src/ts/Nanosplash.ts format=es vite build -m production --c vite.config.ts",
+		"build:cjs": "tsc && cross-env entry=./src/ts/Nanosplash.ts format=cjs vite build -m production --c vite.config.ts",
+		"build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife vite build -m production --c vite.config.ts",
+		"build:all": "pnpm build:es && pnpm build:cjs && pnpm build:iife",
+		"build:docs": "pnpm docs:build",
+		"preview": "vite preview",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"lint": "eslint src/ts/**/*.ts --fix",
+		"coverage": "vitest --coverage",
+		"docs:dev": "pnpm exec vitepress dev docs",
+		"docs:build": "pnpm exec vitepress build docs",
+		"docs:preview": "pnpm exec vitepress preview docs"
+	},
+	"source": "./src/main.ts",
+	"type": "module",
+	"types": "./src/ts/types/global.d.ts",
+	"unpkg": "./dist/iife/ns.iife.js"
+}

package/src/ts/Nanosplash.ts

@@ -201,9 +201,9 @@ const addCssToBody = (): void => {
  */
 export const useNs = (): NanosplashInterface => {
 	addCssToBody()
-	return (window.ns = {
+	return {
 		show,
 		hide,
 		version,
-	})
+	}
 }

package/src/ts/main.ts

@@ -1,3 +1,3 @@
 // @ts-strict
 import { useNs } from './Nanosplash'
-useNs() // Attach API to global scope (Window)
+window.ns = useNs() // Attach API to global scope (Window)

package/docs/.vitepress/theme/vue/Exe.vue

@@ -1,121 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-
-onMounted(async () => {
-	if (!window) return
-	const nsLib = await import('../../../../dist/es/ns.js')
-	const ns = nsLib.useNs()
-
-	const Commands = {
-		ShowInsideA: 'ns.show("Loading A", "#a")',
-		ShowInsideB: 'ns.show("Loading B", "#b")',
-		ShowInsideC: 'ns.show("Loading C", "#c")',
-		ShowInsideD: 'ns.show("Loading D", "#d")',
-		ShowInsideWrapper: 'ns.show("Loading Wrapper", "#wrapper")',
-		ShowFullScreen: 'ns.show("Loading window")',
-		Progress: 'Progressive Demo',
-		Hide: 'ns.hide()',
-		HideAll: 'ns.hide("*")',
-	}
-
-	const rCommandString = ref('')
-
-	const wait = ms => new Promise(r => setTimeout(r, ms))
-
-	async function onClickExe() {
-		const value = rCommandString.value
-		const phrases = [
-			'Generating witty dialog',
-			'Swapping time and space',
-			'sudo rm -rf /**/*',
-			'Tokenizing real life',
-			'Pushing pixels',
-			"Don't think of purple hippos",
-			'One mississippi, two mississippi...',
-		]
-		switch (value) {
-			case Commands.ShowInsideA:
-				ns.show('Loading A', '#a')
-				break
-			case Commands.ShowInsideB:
-				ns.show('Loading B', '#b')
-				break
-			case Commands.ShowInsideC:
-				ns.show('Loading C', '#c')
-				break
-			case Commands.ShowInsideD:
-				ns.show('Loading D', '#d')
-				break
-			case Commands.ShowInsideWrapper:
-				ns.show('Loading Wrapper', '#wrapper')
-				break
-			case Commands.ShowFullScreen:
-				const id = ns.show('Loading window')
-				await wait(4000)
-				ns.hide(id)
-				break
-			case Commands.Hide:
-				ns.hide()
-				break
-			case Commands.HideAll:
-				ns.hide('*')
-				break
-			case Commands.Progress:
-				for (const phrase of phrases) {
-					ns.show(phrase)
-					await wait(1500)
-				}
-				ns.hide('*')
-		}
-	}
-})
-</script>
-
-<template>
-	<div class="container">
-		<select class="select" v-model="rCommandString">
-			<option value="" selected disabled>Click and select</option>
-			<option v-for="(command, i) in Commands" :key="i" :value="command">
-				{{ command }}
-			</option>
-		</select>
-		<div class="exe" @click="onClickExe">Run</div>
-	</div>
-</template>
-
-<style lang="sass" scoped>
-@use "sass:color"
-
-$border-radius: 5px
-.container
-	position: relative
-	display: flex
-	border-radius: $border-radius
-	z-index: 1
-	& > *
-		padding: 10px 20px
-
-.select
-	position: relative
-	display: flex
-	flex-grow: 1
-	font-family: monospace
-	font-size: 14px
-	background-color: var(--vp-c-bg-alt)
-	border-radius: $border-radius 0 0 $border-radius
-	border: 1px solid rgba(Black, 0.1)
-	cursor: pointer
-	width: 100%
-
-$btn-bg: RoyalBlue
-.exe
-	position: relative
-	display: inline-flex
-	color: White
-	background-color: $btn-bg
-	cursor: pointer
-	border-radius: 0 $border-radius $border-radius 0
-	border: 1px solid rgba(Black, 0.1)
-	&:hover
-		background-color: darken($btn-bg, 10%)
-</style>