nanosplash 4.0.0 → 4.0.1

package/.github/workflows/ci.yml

@@ -52,6 +52,7 @@ jobs:
       - name: Commit and push changes
         run: |
           git add .
+          git add -f coverage/**/* dist/**/*
           git commit --allow-empty -m "Build, test, and coverage report"
           git push
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nanosplash",
-	"version": "4.0.0",
+	"version": "4.0.1",
 	"author": {
 		"name": "Isak K. Hauge",
 		"email": "isakhauge@icloud.com",
@@ -15,7 +15,6 @@
 	"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",
@@ -25,10 +24,10 @@
 		"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",
+		"typescript": "5.4.3",
+		"typescript-eslint": "^7.3.1",
+		"vite": "^5.2.6",
+		"vitepress": "1.0.1",
 		"vitest": "^1.4.0"
 	},
 	"exports": {

package/src/ts/Nanosplash.ts

@@ -1,206 +1,174 @@
 // @ts-strict
 import style from '../style/ns.sass?inline'
 import { NanosplashInterface } from './types/NanosplashInterface'
-import {
-	DOMSelector,
-	ElementReference,
-	NSElement,
-	ScopedSelectors,
-} from './types/Types'
+import { ElementReference, NSElement } from './types/Types'
+import type { DOMWindow } from 'jsdom'
 import { version } from '../../package.json'
 
-const styleId: string = 'ns'
-const doc: Document = document
-const bod: HTMLElement = doc.body
-
-/**
- * # Scope
- * Creates scoped selectors.
- * @param node Node to query.
- * @returns An object containing two, slightly different functions that
- * retrieves elements from the DOM.
- */
-const scope = (node: ParentNode): ScopedSelectors =>
-	(all => ({
-		all,
-		first: (ref: string) => all(ref)[0] ?? null,
-	}))((ref: string) => Array.from(node.querySelectorAll(ref)))
-
 /**
- * # Get all
- * @param selector CSS selector used to match nodes in the DOM.
- * @returns An array of Element nodes.
- */
-const getAll = (selector: DOMSelector): Element[] => scope(doc).all(selector)
-
-/**
- * # Get
- * @param selector CSS selector used to match nodes in the DOM.
- * @returns Firs Element node from the DOM matching the selector.
- */
-const get = (selector: DOMSelector): Element | null =>
-	scope(doc).first(selector)
-
-/**
- * # Get All Nanosplashes
- * @returns An array of all Nanosplash elements in the DOM.
- */
-const getAllNs = (): NSElement[] => getAll('.ns') as NSElement[]
-
-/**
- * # Parse Ref
- * @param ref Element reference which could be a selector or an Element.
- * @returns The Element node or null.
- */
-const parseRef = (ref: ElementReference): Element | null =>
-	ref instanceof Element ? ref : get(ref)
-
-/**
- * # Create HTMLDivElement
- * @param className Optional string containing class names.
- * @param children Optional list of Nodes or strings.
- * @returns The newly created HTMLDivElement.
- */
-const div = (
-	className?: string,
-	...children: (Node | string)[]
-): HTMLDivElement => {
-	const node: HTMLDivElement = doc.createElement('div')
-	if (className) node.classList.add(className)
-	node.append(...children)
-	return node
-}
-
-/**
- * # Parse
- * @param html HTML string.
- * @returns Parsed node.
- */
-const parse = (html: string): Node => {
-	const node: HTMLDivElement = div()
-	node.innerHTML = html
-	return node.firstChild as Node
-}
-
-/**
- * # Make Nanosplash Element
- * @returns Nanpslash DOM element.
+ * # Use Nanosplash
+ * @returns Nanosplash API.
  */
-const makeNs = (): NSElement => {
-	const circle: string = '<circle class=path cx=25 cy=25 r=20 fill=none />'
-	const svg = parse(`<svg viewBox="0 0 50 50">${circle}</svg>`) as Element
-	const node = div('ns', div('nst'), div('nss', svg)) as NSElement
-	node.nsId = Date.now()
-	return node
-}
+export const useNs = (
+	win?: (Window | (Window & typeof globalThis)) | DOMWindow
+): NanosplashInterface => {
+	const doc = () => (win ?? window).document
+	const bod = () => doc().body
+
+	const all = (node: ParentNode, ref: string) =>
+		Array.from(node.querySelectorAll(ref))
+	const first = (node: ParentNode, ref: string) => all(node, ref)[0] ?? null
+
+	/**
+	 * # Get All Nanosplashes
+	 * @returns An array of all Nanosplash elements in the DOM.
+	 */
+	const getAllNs = (): NSElement[] => all(doc(), '.ns') as NSElement[]
+
+	/**
+	 * # Parse Ref
+	 * @param ref Element reference which could be a selector or an Element.
+	 * @returns The Element node or null.
+	 */
+	const parseRef = (ref: ElementReference): Element | null =>
+		ref instanceof Element ? ref : first(doc(), ref)
+
+	/**
+	 * # Create HTMLDivElement
+	 * @param className Optional string containing class names.
+	 * @param children Optional list of Nodes or strings.
+	 * @returns The newly created HTMLDivElement.
+	 */
+	const div = (
+		className?: string,
+		...children: (Node | string)[]
+	): HTMLDivElement => {
+		const node: HTMLDivElement = doc().createElement('div')
+		if (className) node.classList.add(className)
+		node.append(...children)
+		return node
+	}
 
-/**
- * # Peek Nanosplash Queue
- * Collect all Nanosplash elements in the DOM, sort them by their NS ID
- * in ascending order, and return the first element.
- * @returns The front of the queue.
- */
-const peekNsQueue = (): NSElement | null =>
-	getAllNs().sort((a: NSElement, b: NSElement) => a.nsId - b.nsId)[0] ?? null
+	/**
+	 * # Parse
+	 * @param html HTML string.
+	 * @returns Parsed node.
+	 */
+	const parse = (html: string): Node => {
+		const node: HTMLDivElement = div()
+		node.innerHTML = html
+		return node.firstChild as Node
+	}
 
-/**
- * # Set Nanosplash Text
- * Replace the text node to trigger the animation which in turn is invoked
- * by the connected callback in the DOM.
- * @param ns Nanosplash element.
- * @param text Text to display adjacent to spinner.
- */
-const setNsText = (ns: NSElement, text: string): void => {
-	const oldNsText = scope(ns).first('.nst') as Element | null
-	if (!text) return oldNsText?.remove()
-	const newNsText = div('nst', text)
-	if (oldNsText) {
-		oldNsText.replaceWith(newNsText)
-	} else {
-		ns.insertBefore(newNsText, ns.firstChild)
+	/**
+	 * # Make Nanosplash Element
+	 * @returns Nanpslash DOM element.
+	 */
+	const makeNs = (): NSElement => {
+		const circle: string = '<circle class=path cx=25 cy=25 r=20 fill=none/>'
+		const svg = parse(`<svg viewBox="0 0 50 50">${circle}</svg>`) as Element
+		const node = div('ns', div('nst'), div('nss', svg)) as NSElement
+		node.nsId = Date.now()
+		return node
 	}
-}
 
-/**
- * # Set Nanosplash Parent
- * Define where inside the DOM to spawn the Nansoplash.
- * @param ns Nanosplash element.
- * @param parent NS element's parent to be.
- */
-const setNsParent = (ns: NSElement, parent: Element): void => {
-	const child = parent.firstElementChild
-	if (child) {
-		parent.insertBefore(ns, child)
+	/**
+	 * # Peek Nanosplash Queue
+	 * Collect all Nanosplash elements in the DOM, sort them by their NS ID
+	 * in ascending order, and return the first element.
+	 * @returns The front of the queue.
+	 */
+	const peekNsQueue = (): NSElement | null =>
+		getAllNs().sort((a: NSElement, b: NSElement) => a.nsId - b.nsId)[0] ?? null
+
+	/**
+	 * # Set Nanosplash Text
+	 * Replace the text node to trigger the animation which in turn is invoked
+	 * by the connected callback in the DOM.
+	 * @param ns Nanosplash element.
+	 * @param text Text to display adjacent to spinner.
+	 */
+	const setNsText = (ns: NSElement, text: string): void => {
+		const oldNsText = first(ns, '.nst') as Element | null
+		if (!text) return oldNsText?.remove()
+		const newNsText = div('nst', text)
+		if (oldNsText) {
+			oldNsText.replaceWith(newNsText)
+		} else {
+			ns.insertBefore(newNsText, ns.firstChild)
+		}
 	}
-	parent.append(ns)
-	parent.classList.add('nsh')
-}
 
-/**
- * # Show Nanosplash
- * @param text Text to display adjacent to spinner.
- * @param inside Selector or element in which the NS element will be spawned.
- * @returns The ID if the NS element — which is a UTC integer.
- */
-const show = (text?: string, inside?: string | Element): number | null => {
-	const parent: Element | null = (
-		inside ? parseRef(inside) : bod
-	) as Element | null
-	let ns: NSElement
-	const recycledNs = scope(parent ?? bod).first('& > .ns')
-	if (recycledNs) {
-		ns = recycledNs as NSElement
-	} else {
-		ns = makeNs()
-		setNsParent(ns, parent as Element)
+	/**
+	 * # Set Nanosplash Parent
+	 * Define where inside the DOM to spawn the Nansoplash.
+	 * @param ns Nanosplash element.
+	 * @param parent NS element's parent to be.
+	 */
+	const setNsParent = (ns: NSElement, parent: Element): void => {
+		const child = parent.firstElementChild
+		if (child) {
+			parent.insertBefore(ns, child)
+		}
+		parent.append(ns)
+		parent.classList.add('nsh')
 	}
-	setNsText(ns, text ?? '')
-	const top: string = scrollY + 'px'
-	bod.style.setProperty('--ns-top', top)
-	return ns.nsId
-}
 
-/**
- * # Remove Nanosplash
- * @param ns Nanosplash elememnt.
- */
-const removeNs = (ns?: Element | null): void => {
-	ns?.parentElement?.classList.remove('nsh')
-	ns?.remove()
-}
+	/**
+	 * # Show Nanosplash
+	 * @param text Text to display adjacent to spinner.
+	 * @param inside Selector or element in which the NS element will be spawned.
+	 * @returns The ID if the NS element — which is a UTC integer.
+	 */
+	const show = (text?: string, inside?: string | Element): number | null => {
+		const parent: Element | null = (
+			inside ? parseRef(inside) : bod
+		) as Element | null
+		let ns: NSElement
+		const recycledNs = first(parent ?? bod(), '& > .ns')
+		if (recycledNs) {
+			ns = recycledNs as NSElement
+		} else {
+			ns = makeNs()
+			setNsParent(ns, parent as Element)
+		}
+		setNsText(ns, text ?? '')
+		const top: string = scrollY + 'px'
+		bod().style.setProperty('--ns-top', top)
+		return ns.nsId
+	}
 
-/**
- * # Find Nanosplash
- * @param id The UTC integer returned from the `show` function.
- * @returns Null or the corresponding Nanosplash element.
- */
-const findNs = (id: number) => getAllNs().find(v => v.nsId === id) ?? null
+	/**
+	 * # Remove Nanosplash
+	 * @param ns Nanosplash elememnt.
+	 */
+	const removeNs = (ns?: Element | null): void => {
+		ns?.parentElement?.classList.remove('nsh')
+		ns?.remove()
+	}
 
-/**
- * # Hide Nanosplash
- * Hide agnostically in FIFO order, specifically by ID, or all by the asterisk
- * which will delete all Nanosplashes.
- * @param id Optional ID of a Nanosplash element or '*' .
- */
-const hide = (id?: number | '*'): void => {
-	if (id === '*') getAll('.ns').forEach(removeNs)
-	else removeNs(typeof id === 'number' ? findNs(id) : peekNsQueue())
-}
+	/**
+	 * # Find Nanosplash
+	 * @param id The UTC integer returned from the `show` function.
+	 * @returns Null or the corresponding Nanosplash element.
+	 */
+	const findNs = (id: number) => getAllNs().find(v => v.nsId === id) ?? null
+
+	/**
+	 * # Hide Nanosplash
+	 * Hide agnostically in FIFO order, specifically by ID, or all by the asterisk
+	 * which will delete all Nanosplashes.
+	 * @param id Optional ID of a Nanosplash element or '*' .
+	 */
+	const hide = (id?: number | '*'): void => {
+		if (id === '*') all(doc(), '.ns').forEach(removeNs)
+		else removeNs(typeof id === 'number' ? findNs(id) : peekNsQueue())
+	}
 
-/**
- * # Add CSS
- */
-const addCssToBody = (): void => {
-	get('#' + styleId)?.remove()
-	bod.append(parse(`<style id=${styleId}>${style}</style>`))
-}
+	// Add CSS to window
+	first(doc(), '#ns')?.remove()
+	bod().append(parse(`<style id="ns">${style}</style>`))
 
-/**
- * # Use Nanosplash
- * @returns Nanosplash API.
- */
-export const useNs = (): NanosplashInterface => {
-	addCssToBody()
 	return {
 		show,
 		hide,

package/src/ts/main.ts

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

package/src/ts/types/Types.ts

@@ -5,19 +5,6 @@ export type UTCInteger = Integer
 export type DOMSelector = string
 export type ElementReference = DOMSelector | Element
 
-export interface ScopedSelectors {
-	/**
-	 * @param selector Selector to match with a DOM element.
-	 * @returns An array of elements matching with the selector.
-	 */
-	all: (selector: DOMSelector) => Element[]
-	/**
-	 * @param selector Selector to match with a DOM element.
-	 * @returns Null or the first element in the DOM to match the selector.
-	 */
-	first: (selector: DOMSelector) => Element | null
-}
-
 export interface NSElement extends HTMLDivElement {
 	nsId: number
 }

package/tests/Nanosplash.spec.ts

@@ -1,20 +1,10 @@
-import { describe, it, test, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
 import { JSDOM } from 'jsdom'
-import { NanosplashInterface } from '../src/ts/types/NanosplashInterface'
+import { useNs } from '../src/ts/Nanosplash'
 
-let dom = new JSDOM()
-let document: Document | null = null
-let ns: NanosplashInterface | null = null
-
-async function updateGlobals() {
-	dom = new JSDOM()
-	// @ts-ignore
-	globalThis.window = dom.window
-	document = globalThis.document = dom.window.document
-	ns = globalThis.window.ns = (await import('../src/ts/Nanosplash')).useNs()
-}
-
-beforeEach(updateGlobals)
+const dom = new JSDOM()
+var window = dom.window
+const ns = (window.ns = useNs(window))
 
 describe('Nanosplash API', () => {
 	it('should be defined', () => {

package/dist/cjs/ns.cjs

@@ -1 +0,0 @@
-"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,44 +0,0 @@
-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) => {
-  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, A = (e) => {
-  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(), {
-  show: z,
-  hide: A,
-  version: m
-});
-export {
-  S as useNs
-};

package/dist/iife/ns.iife.js

@@ -1 +0,0 @@
-(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()})();