ci: add dark/light mode transition

.github/workflows/publish.yml

@@ -27,14 +27,11 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
           cache: 'pnpm'
 
-      - name: Ensure npm 11.5.1 or later is installed
-        run: pnpm install -g npm@latest
-
       - name: Install dependencies
         run: pnpm install
 
       - name: Build
         run: pnpm build
 
       - name: Publish to npm
-        run: npm publish
+        run: pnpm publish --no-git-checks

README.md

@@ -18,7 +18,7 @@
     <img src="https://img.shields.io/codefactor/grade/github/hesprs/pointeract?style=flat&logo=codefactor&logoColor=white&label=Code%20Quality&labelColor=17b37a&color=333333" alt="Code Quality" />
   </a>
   <a href="https://pointeract.consensia.cc">
-    <img src="https://img.shields.io/badge/Documentation-Ready-333333?labelColor=5C73E7&logo=vitepress&logoColor=white" alt="Code Quality" />
+    <img src="https://img.shields.io/badge/Documentation-Ready-333333?labelColor=5C73E7&logo=vitepress&logoColor=white" alt="Documentation" />
   </a>
   <a href="https://www.npmjs.com/package/pointeract">
     <img src="https://img.shields.io/npm/v/pointeract?logo=npm&labelColor=red&logoColor=white&color=333333" alt="npm package" />
@@ -27,10 +27,10 @@
     <img src="https://img.shields.io/badge/Snyk%20Security-Monitored-333333?logo=snyk&style=flat&labelColor=8A2BE2&logoColor=white" alt="library security" />
   </a>
   <a href="https://bundlephobia.com/package/pointeract">
-    <img src="https://img.shields.io/bundlephobia/minzip/pointeract?style=flat&logo=webpack&labelColor=orange&logoColor=white&color=333333&label=Minified+Gzipped%20Size" alt="package size" />
+    <img src="https://img.shields.io/bundlephobia/minzip/pointeract?style=flat&logo=webpack&labelColor=orange&logoColor=white&color=333333&label=Minified%2bGzipped" alt="package size" />
   </a>
   <img src="https://img.shields.io/badge/Types-Strict-333333?logo=typescript&labelColor=blue&logoColor=white" alt="Typescript" />
-  <img src="https://img.shields.io/badge/%F0%9F%96%90%EF%B8%8F%20Made%20by-Human-333333?labelColor=25C260" alt="Made by Human" />
+  <img src="https://img.shields.io/badge/%F0%9F%96%90%EF%B8%8F%20Made%20by-Humans-333333?labelColor=25C260" alt="Made by Humans" />
 </p>
 
 <p align="center">
@@ -127,6 +127,6 @@ This project welcomes anyone that have ideas to improve it.
 - [Start a new thread in Discussions](https://github.com/hesprs/pointeract/discussions/new) if you have feature requests or questions, please avoid posting them in Issues.
 - [Report a vulnerability](https://github.com/hesprs/pointeract/security/advisories/new) if you find one, please do not disclose it publicly.
 
-## License
+## Copyright and License
 
-Pointeract is licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html).
+Copyright ©️ 2025-2026 Hesprs (Hēsperus) | [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html)

docs/.vitepress/config.ts

@@ -85,7 +85,10 @@ export default defineConfig({
 		],
 
 		search: { provider: 'local' },
-		socialLinks: [{ icon: 'github', link: 'https://github.com/hesprs/pointeract' }],
+		socialLinks: [
+			{ icon: 'npm', link: 'https://www.npmjs.com/package/pointeract' },
+			{ icon: 'github', link: 'https://github.com/hesprs/pointeract' },
+		],
 		editLink: { pattern: 'https://github.com/hesprs/pointeract/edit/main/docs/:path' },
 	},
 	markdown: {

docs/.vitepress/theme/index.ts

@@ -5,14 +5,11 @@ import DefaultTheme from 'vitepress/theme';
 import { h } from 'vue';
 import './style.css';
 import 'virtual:group-icons.css';
+import Layout from './layout.vue';
 
 export default {
 	extends: DefaultTheme,
-	Layout: () => {
-		return h(DefaultTheme.Layout, null, {
-			// https://vitepress.dev/guide/extending-default-theme#layout-slots
-		});
-	},
+	Layout: Layout,
 	enhanceApp({ app, router, siteData }) {
 		// ...
 	},

docs/.vitepress/theme/layout.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { nextTick, provide, Ref } from 'vue';
+import { useData } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+
+const enableTransitions = () => {
+    return 'startViewTransition' in document
+    && window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
+}
+
+const setupToggleDark = (isDark: Ref<boolean>) => {
+    provide('toggle-appearance', async ({ clientX: x, clientY: y }: PointerEvent) => {
+        if (!enableTransitions()) {
+            isDark.value = !isDark.value;
+            return;
+        }
+
+        console.log('toggle-appearance');
+        document.documentElement.style.setProperty('--darkX', x + 'px');
+        document.documentElement.style.setProperty('--darkY', y + 'px');
+
+        await document.startViewTransition(async () => {
+            isDark.value = !isDark.value;
+            await nextTick();
+        }).ready;
+    });
+};
+
+const { isDark } = useData();
+setupToggleDark(isDark);
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+
+<style>
+::view-transition-old(*) {
+    animation: none;
+}
+
+::view-transition-new(*) {
+    animation: globalDark 0.5s ease-in;
+}
+
+@keyframes globalDark {
+    from {
+        clip-path: circle(0% at var(--darkX) var(--darkY));
+    }
+
+    to {
+        clip-path: circle(100% at var(--darkX) var(--darkY));
+    }
+}
+</style>

package.json

@@ -19,18 +19,19 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/Hesprs/Pointeract.git"
+		"url": "git+https://github.com/hesprs/pointeract.git"
 	},
 	"homepage": "https://pointeract.consensia.cc",
 	"bugs": {
-		"url": "https://github.com/Hesprs/Pointeract/issues"
+		"url": "https://github.com/hesprs/pointeract/issues"
 	},
 	"files": ["dist"],
 	"publishConfig": {
 		"provenance": true,
 		"access": "public"
 	},
-	"keywords": ["frontend", "pointer-events", "interaction", "TypeScript"],
+	"keywords": ["frontend", "pointer-events", "interaction", "typescript"],
+	"sideEffects": false,
 	"author": {
 		"name": "Hēsperus",
 		"email": "hesprs@outlook.com"