nanosplash 4.0.4 → 4.0.5

package/.github/workflows/ci.all.yml

@@ -0,0 +1,32 @@
+name: CI General (non-persistent)
+
+on:
+  push:
+    branches-ignore:
+      - production
+      - test
+  pull_request:
+    branches-ignore:
+      - production
+      - test
+
+jobs:
+  call-test-non-persistent:
+    name: Running Test (non-persistent)
+    uses: './.github/workflows/reusable.test.yml'
+    with:
+      persistent: false
+  
+  call-lint-non-persistent:
+    needs: call-test-non-persistent
+    name: Running Linting (non-persistent)
+    uses: './.github/workflows/reusable.lint.yml'
+    with:
+      run-linting: true
+  
+  call-build-non-persistent:
+    needs: call-lint-non-persistent
+    name: Running build (non-persistent)
+    uses: './.github/workflows/reusable.build.yml'
+    with:
+      persistent: false

package/.github/workflows/ci.prod.pull_request.yml

@@ -0,0 +1,54 @@
+name: CI Prepare for Production
+
+on:
+  pull_request:
+    branches: [ production ]
+
+jobs:
+  call-lint-non-persistent:
+    name: Lint (non-persistent)
+    uses: './.github/workflows/reusable.lint.yml'
+    with: 
+      run-linting: true
+
+  call-format-non-persistent:
+    needs: call-lint-non-persistent
+    name: Format (non-persistent)
+    uses: './.github/workflows/reusable.format.yml'
+    with:
+      persistent: false
+
+  call-test-non-persistent:
+    needs: call-format-non-persistent
+    name: Test (non-persistent)
+    uses: './.github/workflows/reusable.test.yml'
+    with: 
+      persistent: false
+
+  call-build-non-persistent:
+    needs: call-test-non-persistent
+    name: Build (non-persistent)
+    uses: './.github/workflows/reusable.build.yml'
+    with: 
+      persistent: false
+  
+  call-npm-publish-non-persistent:
+    needs: call-build-non-persistent
+    name: NPM Publish Dry-Run (non-persistent)
+    uses: './.github/workflows/reusable.npm-publish.yml'
+    with: 
+      persistent: false
+
+  call-format:
+    needs: call-npm-publish-non-persistent
+    name: Format
+    uses: './.github/workflows/reusable.format.yml'
+    with:
+      persistent: true
+
+  call-build:
+    needs: call-format
+    name: Build
+    uses: './.github/workflows/reusable.build.yml'
+    with: 
+      persistent: true

package/.github/workflows/ci.prod.push.yml

@@ -0,0 +1,68 @@
+name: CI Production & Publish
+
+on:
+  push:
+    branches: [ production ]
+
+jobs:
+  call-lint-non-persistent:
+    name: Lint (non-persistent)
+    uses: './.github/workflows/reusable.lint.yml'
+    with:
+      run-linting: true
+  
+  call-format-non-persistent:
+    needs: call-lint-non-persistent
+    name: Format (non-persistent)
+    uses: './.github/workflows/reusable.format.yml'
+    with:
+      persistent: false
+  
+  call-test-non-persistent:
+    needs: call-format-non-persistent
+    name: Test (non-persistent)
+    uses: './.github/workflows/reusable.test.yml'
+    with:
+      persistent: false
+  
+  call-build-non-persistent:
+    needs: call-test-non-persistent
+    name: Build (non-persistent)
+    uses: './.github/workflows/reusable.build.yml'
+    with:
+      persistent: false
+  
+  call-npm-publish-dryrun:
+    needs: call-build-non-persistent
+    name: NPM Publish Dry-Run (non-persistent)
+    uses: './.github/workflows/reusable.npm-publish.yml'
+    with:
+      persistent: false
+  
+  call-format:
+    needs: call-npm-publish-dryrun
+    name: Format
+    uses: './.github/workflows/reusable.format.yml'
+    with:
+      persistent: true
+  
+  call-test-and-coverage:
+    needs: call-format
+    name: Test & Coverage
+    uses: './.github/workflows/reusable.test.yml'
+    with: 
+      persistent: true
+  
+  call-build:
+    needs: call-test-and-coverage
+    name: Build
+    uses: './.github/workflows/reusable.build.yml'
+    with:
+      persistent: true
+  
+  call-npm-publish:
+    needs: call-build
+    name: NPM Publish
+    uses: './.github/workflows/reusable.npm-publish.yml'
+    with: 
+      persistent: true

package/.github/workflows/ci.test.yml

@@ -0,0 +1,56 @@
+name: CI Test
+
+on:
+  push:
+    branches: [ test ]
+  pull_request:
+    branches: [ test ]
+
+jobs:
+  call-lint-non-persistent:
+    name: Lint (non-persistent)
+    uses: './.github/workflows/reusable.lint.yml'
+    with:
+      run-linting: true
+
+  call-format-non-persistent:
+    needs: call-lint-non-persistent
+    name: Format (non-persistent)
+    uses: './.github/workflows/reusable.format.yml'
+    with:
+      persistent: false
+
+  call-test-non-persistent:
+    needs: call-format-non-persistent
+    name: Test (non-persistent)
+    uses: './.github/workflows/reusable.test.yml'
+    with:
+      persistent: false
+
+  call-build-non-persistent:
+    needs: call-test-non-persistent
+    name: Build (non-persistent)
+    uses: './.github/workflows/reusable.build.yml'
+    with:
+      persistent: false
+  
+  call-npm-publish-non-persistent:
+    needs: call-build-non-persistent
+    name: NPM Publish Dry-Run (non-persistent)
+    uses: './.github/workflows/reusable.npm-publish.yml'
+    with:
+      persistent: false
+
+  call-format:
+    needs: call-npm-publish-non-persistent
+    name: Format
+    uses: './.github/workflows/reusable.format.yml'
+    with:
+      persistent: true
+
+  call-build:
+    needs: call-format
+    name: Build
+    uses: './.github/workflows/reusable.build.yml'
+    with:
+      persistent: true

package/.github/workflows/reusable.build.yml

@@ -0,0 +1,42 @@
+name: Reusable - Build
+
+on:
+  workflow_call:
+    inputs:
+      persistent:
+        required: true
+        type: boolean
+
+jobs:
+  run-vite-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
+
+      # Setting up the latest Bun.js version
+      - name: Set up Bun.js
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 'latest'
+
+      # Installing dependencies using Bun
+      - name: Install Dependencies
+        run: bun install
+      
+      # Running Vite Build
+      - name: Run Vite Build
+        run: bun run build
+        
+      # Committing built files to the current branch
+      - name: Commit Built Files
+        if: ${{ inputs.persist }}
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          git add .
+          git commit -m "GitHub Actions: Build" --allow-empty
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/reusable.format.yml

@@ -0,0 +1,55 @@
+name: Reusable - Prettier Formatting
+
+on:
+  workflow_call:
+    inputs:
+      persistent:
+        required: true
+        type: boolean
+
+jobs:
+  run-prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
+
+      # Setting up the latest Bun.js version
+      - name: Set up Bun.js
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 'latest'
+
+      # Installing dependencies using Bun
+      - name: Install Dependencies
+        run: bun install
+      
+      # Running Prettier using Bun
+      - name: Run Prettier Format
+        run: bun run format
+        
+      # Committing formatted files to the current branch
+      - name: Commit Formatted Files
+        if: ${{ inputs.persistent }}
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          
+          # Stage all changes
+          git add .
+          
+          # Check if there are any staged changes
+          if ! git diff --cached --quiet; then
+            echo "There are changes to commit and push."
+          
+            # Commit the changes
+            git commit -m "GitHub Actions: Format using Prettier"
+          
+            # Push to the current branch
+            git push
+          else
+            echo "No changes to commit."
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/reusable.lint.yml

@@ -0,0 +1,30 @@
+name: Reusable - ESLint (non-persistent)
+
+on:
+  workflow_call:
+    inputs:
+      run-linting:
+        required: true
+        type: boolean
+
+jobs:
+  run-eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
+
+      # Setting up the latest Bun.js version
+      - name: Set up Bun.js
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 'latest'
+
+      # Installing dependencies using Bun
+      - name: Install Dependencies
+        run: bun install
+      
+      # Running Vitest with coverage using Bun
+      - name: Run ESLint
+        run: bun run lint

package/.github/workflows/reusable.npm-publish.yml

@@ -0,0 +1,55 @@
+name: Reusable - NPM Publish
+
+on:
+  workflow_call:
+    inputs:
+      persistent:
+        required: true
+        type: boolean
+
+jobs:
+  npm-publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
+
+      # Setting up the latest Node.js version
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+          registry-url: 'https://registry.npmjs.org'  # Specify NPM registry
+          
+      # Get the version inside package.json
+      - name: Get version from package.json
+        id: get-version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      # Publishing to NPM (dry-run for testing purposes)
+      - name: Publish to NPM (dry-run)
+        run: npm publish --dry-run
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+          
+      # Commit the version tag made by NPM
+      - name: Commit version tag
+        if: ${{ inputs.persist }}
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          git add .
+          git commit -m "GitHub Actions: NPM build ${{ env.VERSION }}" --allow-empty
+          git push origin HEAD:$GITHUB_REF_NAME
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          
+      - name: Configure npm for authentication
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_PUBLISH_TOKEN }}" > ~/.npmrc
+
+      - name: Publish to NPM
+        if: ${{ inputs.persistent }}
+        run: npm publish

package/.github/workflows/reusable.test.yml

@@ -0,0 +1,50 @@
+name: Reusable - Run Tests
+
+on:
+  workflow_call:
+    inputs:
+      persistent:
+        required: true
+        type: boolean
+
+jobs:
+  run-vitest:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
+
+      # Setting up the latest Bun.js version
+      - name: Set up Bun.js
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 'latest'
+
+      # Installing dependencies using Bun
+      - name: Install Dependencies
+        run: bun install
+      
+      # Running Vitest with coverage using Bun
+      - name: Run Vitest
+        run: bunx vitest
+      
+      # Committing coverage artifacts to the current branch
+      - name: Commit Build
+        if: ${{ inputs.persistent }}
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          git add .
+          git commit -m "GitHub Actions: Create Test Coverage" --allow-empty
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      # Uploading coverage to Coveralls
+      - name: Upload Coverage to Coveralls
+        if: ${{ inputs.persistent }}
+        uses: coverallsapp/github-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          path-to-lcov: ./coverage/lcov.info

package/README.md

@@ -2,7 +2,7 @@
 
 **The tiny loading screen for web artisans**
 
-[![CI Production: Build, Test, Publish](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml/badge.svg)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
+[![CI Production: Build, Test, Publish](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.push.yml/badge.svg)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
 [![Coverage Status](https://coveralls.io/repos/github/isakhauge/nanosplash/badge.svg?branch=production)](https://coveralls.io/github/isakhauge/nanosplash?branch=production)
 
 ---

package/coverage/lcov-report/index.html

@@ -161,7 +161,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/src/composables/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/composables/ns.ts.html

@@ -532,7 +532,7 @@ export const useNs: Func<INanosplash> = (): INanosplash => {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/constants/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/constants/ns.ts.html

@@ -109,7 +109,7 @@ export const Selectors = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/iife.ts.html

@@ -85,7 +85,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/interfaces/INSElement.ts.html

@@ -85,7 +85,7 @@ export interface INSElement extends HTMLDivElement {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/interfaces/INanosplash.ts.html

@@ -289,7 +289,7 @@ export interface INanosplash {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/interfaces/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/utils/dom-utils.ts.html

@@ -274,7 +274,7 @@ export const parseHtml = <T extends HTMLElement>(html: HTMLString): T =&gt
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/utils/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-07T22:57:20.354Z
+                at 2025-06-09T10:43:32.799Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/dist/cjs/ns.cjs.js

@@ -0,0 +1,135 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=`@keyframes nsRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nsDash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes nsFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nsAscend {
+  from {
+    opacity: 0;
+    transform: translateY(13px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --ns-top: 0;
+}
+
+/* Nanosplash host */
+.nsh {
+  --color: DarkSlateGray;
+  --size: 20px;
+  --relSize: calc(var(--size) * 0.9);
+  --font: 'Inter', 'Helvetica', 'Arial';
+  --weight: 400;
+  --bg: rgba(255, 255, 255, 0.9);
+  --zIdx: 9999999999;
+  --blur: blur(5px);
+
+  position: relative;
+  z-index: var(--zIdx);
+  &::before {
+    width: 100%;
+    height: 100%;
+    bottom: 0; /* Not sure why */
+    right: 0; /* Not sure why */
+    position: absolute;
+    content: '';
+    background-color: var(--bg);
+    backdrop-filter: var(--blur);
+    -webkit-backdrop-filter: var(--blur);
+    z-index: calc(var(--zIdx) + 1);
+    border-radius: var(--size);
+  }
+}
+
+/* For when the Nanosplash host is the document body */
+body.nsh {
+  &,
+  &::before {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: var(--ns-top);
+    left: 0;
+  }
+}
+
+/* Nanosplash main element */
+.ns {
+  width: 100%;
+  height: 100%;
+  bottom: 0; /* Not sure why */
+  right: 0; /* Not sure why */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: calc(var(--zIdx) + 2);
+  animation: nsFade 2s;
+  gap: var(--relSize);
+}
+
+/* Nanosplash text */
+.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 0.06rem rgba(0, 0, 0, 0.25);
+  filter: drop-shadow(0 0 0.07rem rgba(0, 0, 0, 0.25));
+  animation: nsAscend 0.5s;
+}
+
+/* Nanosplash spinner */
+.nss {
+  display: block;
+  width: var(--relSize);
+  height: var(--relSize);
+  animation: nsAscend 0.5s;
+  & > svg {
+    animation: nsRotate 2s linear infinite;
+    position: relative;
+    width: inherit;
+    height: inherit;
+    stroke-width: 8;
+  }
+  & .path {
+    stroke: var(--color);
+    stroke-linecap: round;
+    animation: nsDash 1.5s ease-in-out infinite;
+  }
+}
+`,d=()=>globalThis.document,l=()=>globalThis.document.body,y=t=>Array.from(t),v=(t,o)=>y(t.querySelectorAll(o)),h=(t,o)=>v(t,o)[0]??null,I=t=>t instanceof Element?t:h(d(),t),c=(t,...o)=>{const a=d().createElement("div");return t&&a.classList.add(t),a.append(...o),a},m=t=>{const o=c();return o.innerHTML=t,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},u={ns:"."+r.ns,nsText:"."+r.nsText},A="4.0.5",E=()=>{const t=()=>v(d(),u.ns),o=()=>{const e=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),s=c(r.ns,c(r.nsText),c(r.nsSpinner,e));return s.nsId=Date.now(),s},a=()=>t().sort((n,e)=>n.nsId-e.nsId),b=()=>a()[0]??null,g=(n,e)=>{var i;if((i=h(n,u.nsText))==null||i.remove(),!e)return;const s=c(r.nsText,e);n.insertBefore(s,n.firstChild)},w=(n,e)=>{const s=e.firstElementChild;s&&e.insertBefore(n,s),e.append(n),e.classList.add(r.nsHost)},x=n=>y(n.children).find(s=>s.classList.contains(r.ns)),k=(n,e)=>{const s=e?I(e)??l():l();let i;const p=x(s);if(p?i=p:(i=o(),w(i,s)),g(i,n??""),s===l()){const S=scrollY+"px";l().style.setProperty("--ns-top",S)}return i.nsId},f=n=>{var e;(e=n==null?void 0:n.parentElement)==null||e.classList.remove(r.nsHost),n==null||n.remove()},N=n=>t().find(e=>e.nsId===n)??null,z=n=>{n==="*"?t().forEach(f):f(typeof n=="number"?N(n):b())};return(()=>{var e;(e=h(d(),"#ns"))==null||e.remove();const n=m(`<style id="ns">${T}</style>`);l().append(n)})(),{show:k,hide:z,version:A}};exports.useNs=E;

package/dist/es/ns.es.js

@@ -0,0 +1,197 @@
+const S = `@keyframes nsRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nsDash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes nsFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nsAscend {
+  from {
+    opacity: 0;
+    transform: translateY(13px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --ns-top: 0;
+}
+
+/* Nanosplash host */
+.nsh {
+  --color: DarkSlateGray;
+  --size: 20px;
+  --relSize: calc(var(--size) * 0.9);
+  --font: 'Inter', 'Helvetica', 'Arial';
+  --weight: 400;
+  --bg: rgba(255, 255, 255, 0.9);
+  --zIdx: 9999999999;
+  --blur: blur(5px);
+
+  position: relative;
+  z-index: var(--zIdx);
+  &::before {
+    width: 100%;
+    height: 100%;
+    bottom: 0; /* Not sure why */
+    right: 0; /* Not sure why */
+    position: absolute;
+    content: '';
+    background-color: var(--bg);
+    backdrop-filter: var(--blur);
+    -webkit-backdrop-filter: var(--blur);
+    z-index: calc(var(--zIdx) + 1);
+    border-radius: var(--size);
+  }
+}
+
+/* For when the Nanosplash host is the document body */
+body.nsh {
+  &,
+  &::before {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: var(--ns-top);
+    left: 0;
+  }
+}
+
+/* Nanosplash main element */
+.ns {
+  width: 100%;
+  height: 100%;
+  bottom: 0; /* Not sure why */
+  right: 0; /* Not sure why */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: calc(var(--zIdx) + 2);
+  animation: nsFade 2s;
+  gap: var(--relSize);
+}
+
+/* Nanosplash text */
+.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 0.06rem rgba(0, 0, 0, 0.25);
+  filter: drop-shadow(0 0 0.07rem rgba(0, 0, 0, 0.25));
+  animation: nsAscend 0.5s;
+}
+
+/* Nanosplash spinner */
+.nss {
+  display: block;
+  width: var(--relSize);
+  height: var(--relSize);
+  animation: nsAscend 0.5s;
+  & > svg {
+    animation: nsRotate 2s linear infinite;
+    position: relative;
+    width: inherit;
+    height: inherit;
+    stroke-width: 8;
+  }
+  & .path {
+    stroke: var(--color);
+    stroke-linecap: round;
+    animation: nsDash 1.5s ease-in-out infinite;
+  }
+}
+`, d = () => globalThis.document, l = () => globalThis.document.body, v = (t) => Array.from(t), u = (t, o) => v(t.querySelectorAll(o)), h = (t, o) => u(t, o)[0] ?? null, T = (t) => t instanceof Element ? t : h(d(), t), c = (t, ...o) => {
+  const a = d().createElement("div");
+  return t && a.classList.add(t), a.append(...o), a;
+}, m = (t) => {
+  const o = c();
+  return o.innerHTML = t, o.firstChild;
+}, r = {
+  ns: "ns",
+  nsHost: "nsh",
+  nsText: "nst",
+  nsSpinner: "nss"
+}, y = {
+  ns: "." + r.ns,
+  nsText: "." + r.nsText
+}, A = "4.0.5", H = () => {
+  const t = () => u(d(), y.ns), o = () => {
+    const e = m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), s = c(
+      r.ns,
+      c(r.nsText),
+      c(r.nsSpinner, e)
+    );
+    return s.nsId = Date.now(), s;
+  }, a = () => t().sort((n, e) => n.nsId - e.nsId), b = () => a()[0] ?? null, g = (n, e) => {
+    var i;
+    if ((i = h(n, y.nsText)) == null || i.remove(), !e) return;
+    const s = c(r.nsText, e);
+    n.insertBefore(s, n.firstChild);
+  }, w = (n, e) => {
+    const s = e.firstElementChild;
+    s && e.insertBefore(n, s), e.append(n), e.classList.add(r.nsHost);
+  }, x = (n) => v(n.children).find(
+    (s) => s.classList.contains(r.ns)
+  ), k = (n, e) => {
+    const s = e ? T(e) ?? l() : l();
+    let i;
+    const p = x(s);
+    if (p ? i = p : (i = o(), w(i, s)), g(i, n ?? ""), s === l()) {
+      const I = scrollY + "px";
+      l().style.setProperty("--ns-top", I);
+    }
+    return i.nsId;
+  }, f = (n) => {
+    var e;
+    (e = n == null ? void 0 : n.parentElement) == null || e.classList.remove(r.nsHost), n == null || n.remove();
+  }, N = (n) => t().find((e) => e.nsId === n) ?? null, z = (n) => {
+    n === "*" ? t().forEach(f) : f(typeof n == "number" ? N(n) : b());
+  };
+  return (() => {
+    var e;
+    (e = h(d(), "#ns")) == null || e.remove();
+    const n = m(
+      `<style id="ns">${S}</style>`
+    );
+    l().append(n);
+  })(), {
+    show: k,
+    hide: z,
+    version: A
+  };
+};
+export {
+  H as useNs
+};

package/dist/iife/ns.iife.js

@@ -0,0 +1,135 @@
+(function(){"use strict";const w=`@keyframes nsRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nsDash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes nsFade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nsAscend {
+  from {
+    opacity: 0;
+    transform: translateY(13px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --ns-top: 0;
+}
+
+/* Nanosplash host */
+.nsh {
+  --color: DarkSlateGray;
+  --size: 20px;
+  --relSize: calc(var(--size) * 0.9);
+  --font: 'Inter', 'Helvetica', 'Arial';
+  --weight: 400;
+  --bg: rgba(255, 255, 255, 0.9);
+  --zIdx: 9999999999;
+  --blur: blur(5px);
+
+  position: relative;
+  z-index: var(--zIdx);
+  &::before {
+    width: 100%;
+    height: 100%;
+    bottom: 0; /* Not sure why */
+    right: 0; /* Not sure why */
+    position: absolute;
+    content: '';
+    background-color: var(--bg);
+    backdrop-filter: var(--blur);
+    -webkit-backdrop-filter: var(--blur);
+    z-index: calc(var(--zIdx) + 1);
+    border-radius: var(--size);
+  }
+}
+
+/* For when the Nanosplash host is the document body */
+body.nsh {
+  &,
+  &::before {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: var(--ns-top);
+    left: 0;
+  }
+}
+
+/* Nanosplash main element */
+.ns {
+  width: 100%;
+  height: 100%;
+  bottom: 0; /* Not sure why */
+  right: 0; /* Not sure why */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: calc(var(--zIdx) + 2);
+  animation: nsFade 2s;
+  gap: var(--relSize);
+}
+
+/* Nanosplash text */
+.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 0.06rem rgba(0, 0, 0, 0.25);
+  filter: drop-shadow(0 0 0.07rem rgba(0, 0, 0, 0.25));
+  animation: nsAscend 0.5s;
+}
+
+/* Nanosplash spinner */
+.nss {
+  display: block;
+  width: var(--relSize);
+  height: var(--relSize);
+  animation: nsAscend 0.5s;
+  & > svg {
+    animation: nsRotate 2s linear infinite;
+    position: relative;
+    width: inherit;
+    height: inherit;
+    stroke-width: 8;
+  }
+  & .path {
+    stroke: var(--color);
+    stroke-linecap: round;
+    animation: nsDash 1.5s ease-in-out infinite;
+  }
+}
+`,d=()=>globalThis.document,a=()=>globalThis.document.body,f=t=>Array.from(t),p=(t,o)=>f(t.querySelectorAll(o)),h=(t,o)=>p(t,o)[0]??null,b=t=>t instanceof Element?t:h(d(),t),l=(t,...o)=>{const c=d().createElement("div");return t&&c.classList.add(t),c.append(...o),c},m=t=>{const o=l();return o.innerHTML=t,o.firstChild},r={ns:"ns",nsHost:"nsh",nsText:"nst",nsSpinner:"nss"},u={ns:"."+r.ns,nsText:"."+r.nsText},g="4.0.5",x=()=>{const t=()=>p(d(),u.ns),o=()=>{const e=m('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),s=l(r.ns,l(r.nsText),l(r.nsSpinner,e));return s.nsId=Date.now(),s},c=()=>t().sort((n,e)=>n.nsId-e.nsId),k=()=>c()[0]??null,N=(n,e)=>{var i;if((i=h(n,u.nsText))==null||i.remove(),!e)return;const s=l(r.nsText,e);n.insertBefore(s,n.firstChild)},z=(n,e)=>{const s=e.firstElementChild;s&&e.insertBefore(n,s),e.append(n),e.classList.add(r.nsHost)},I=n=>f(n.children).find(s=>s.classList.contains(r.ns)),S=(n,e)=>{const s=e?b(e)??a():a();let i;const y=I(s);if(y?i=y:(i=o(),z(i,s)),N(i,n??""),s===a()){const E=scrollY+"px";a().style.setProperty("--ns-top",E)}return i.nsId},v=n=>{var e;(e=n==null?void 0:n.parentElement)==null||e.classList.remove(r.nsHost),n==null||n.remove()},T=n=>t().find(e=>e.nsId===n)??null,A=n=>{n==="*"?t().forEach(v):v(typeof n=="number"?T(n):k())};return(()=>{var e;(e=h(d(),"#ns"))==null||e.remove();const n=m(`<style id="ns">${w}</style>`);a().append(n)})(),{show:S,hide:A,version:g}};window.addEventListener("load",function(){this.ns=x()})})();

package/eslint.config.js

@@ -9,6 +9,6 @@ export default tseslint.config(
     tseslint.configs.strict,
     tseslint.configs.stylistic,
     {
-        ignores: ["node_modules", "dist"],
+        ignores: ["node_modules", "dist", "coverage"],
     }
 );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nanosplash",
   "private": false,
-  "version": "4.0.4",
+  "version": "4.0.5",
   "type": "module",
   "author": {
     "name": "Isak K. Hauge",
@@ -40,7 +40,7 @@
     "preview": "vite preview",
     "lint": "eslint . --fix",
     "format": "prettier --write \"src/**/*.ts\" \"vite.config.ts\"",
-    "test": "bun run vitest"
+    "test": "bunx vitest --coverage"
   },
   "types": "./src/types/global.d.ts",
   "exports": {
@@ -68,9 +68,7 @@
     "prettier": "3.5.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.33.0",
-    "vite": "^6.3.5"
-  },
-  "dependencies": {
+    "vite": "^6.3.5",
     "vitest": "^3.1.4"
   }
 }

package/tests/ns.spec.ts

@@ -1,4 +1,3 @@
-/// <reference types="vitest" />
 import { describe, it, expect, beforeEach } from 'vitest'
 import {useNs} from "@/composables/ns";
 import type {INSElement} from "@/interfaces/INSElement";

package/.github/workflows/ci.prod.yml

@@ -1,68 +0,0 @@
-name: CI Production
-
-on:
-  pull_request:
-    branches: [ production ]
-
-jobs:
-  build-and-test:
-    runs-on: ubuntu-latest
-
-    steps:
-      # Checking out the repository with the latest version
-      - uses: actions/checkout@v4
-        with:
-          ref: production
-
-      # Setting up the latest Node.js version
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 'latest'
-
-      # Setting up the latest Bun.js version
-      - name: Set up Bun.js
-        uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 'latest'
-
-      # Configuring git for GitHub Actions
-      - name: Configure Git
-        run: |
-          git config --global user.name "GitHub Actions"
-          git config --global user.email "actions@github.com"
-          git config --global init.defaultBranch production
-
-      # Installing dependencies using Bun
-      - name: Install Dependencies
-        run: bun install
-
-      # Running build using Bun
-      - name: Run Build
-        run: bun run build
-  
-      # Committing build artifacts to the production branch
-      - name: Commit Build
-        run: |
-         git add .
-         git commit -m "GitHub Actions: Persist build artifacts[ci skip]" || echo "No changes to commit"
-         git push origin production
-        env:
-         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      # Running Vitest with coverage using Bun
-      - name: Run Vitest with Coverage
-        run: bunx vitest run --coverage
-
-      # Uploading coverage to Coveralls
-      - name: Upload Coverage to Coveralls
-        uses: coverallsapp/github-action@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          path-to-lcov: ./coverage/lcov.info
-
-      # Publishing to NPM
-      - name: Publish to NPM
-        run: bunx npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}