Migrate to Vite+ integration and update related documentation

.github/copilot-instructions.md

@@ -0,0 +1 @@
+../AGENTS.md

.vite-hooks/pre-commit

@@ -0,0 +1 @@
+vp staged

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["VoidZero.vite-plus-extension-pack"]
+}

.vscode/settings.json

@@ -4,19 +4,11 @@
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
         "source.organizeImports": "explicit",
-        "source.fixAll.eslint": "explicit"
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.oxc": "explicit"
     },
     "css.lint.unknownAtRules": "ignore",
     "css.customData": [".vscode/tailwind.json"],
-    "[typescript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[javascript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[json]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
     "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", ".*Styles*"],
     "tailwindCSS.experimental.classRegex": [
         "(?:enter|leave)(?:From|To)?=\\s*(?:\"|'|{`)([^(?:\"|'|`})]*)",
@@ -32,5 +24,15 @@
             "(?:\\b(?:const|let|var)\\s+)?[\\w$_]*(?:[Ss]tyles|[Cc]lasses|[Cc]lassnames)[\\w\\d]*\\s*=\\s*{([\\s\\S]*?)}",
             "\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?"
         ]
-    ]
+    ],
+    "editor.defaultFormatter": "oxc.oxc-vscode",
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "oxc.oxc-vscode"
+    },
+    "oxc.disableNestedConfig": true,
+    "oxc.fmt.disableNestedConfig": true,
+    "editor.formatOnSaveMode": "file"
 }

AGENTS.md

@@ -0,0 +1,27 @@
+<!--VITE PLUS START-->
+
+# Using Vite+, the Unified Toolchain for the Web
+
+This project is using Vite+, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite+ wraps runtime management, package management, and frontend tooling in a single global CLI called `vp`. Vite+ is distinct from Vite, and it invokes Vite through `vp dev` and `vp build`. Run `vp help` to print a list of commands and `vp <command> --help` for information about a specific command.
+
+Docs are local at `node_modules/vite-plus/docs` or online at https://viteplus.dev/guide/.
+
+## Built-in Commands vs Scripts
+
+`vp <name>` runs a built-in command. `vp run <name>` runs a `package.json` script or a `vite.config.ts` task. Scripts cannot overwrite built-ins, so `vp dev` and `vp run dev` may do different things. Check `package.json` and `vite.config.ts` first, and run `vp run <name>` when the project defines a script or task with that name.
+
+## Tool Versions
+
+Run `vp toolchain` to show versions and relationships in the active Vite+
+release. Add a tool name to select part of the graph. For example, run
+`vp toolchain vite`. Use `--global` to ignore the local `vite-plus` package. Use
+`vp why <package>` to show the package-manager dependency graph.
+
+## Review Checklist
+
+- [ ] Run `vp install` after pulling remote changes and before getting started.
+- [ ] Run `vp check` and `vp test` to format, lint, type check and test changes.
+- [ ] Check if there are `vite.config.ts` tasks or `package.json` scripts necessary for validation, run via `vp run <script>`.
+- [ ] If setup, runtime, or package-manager behavior looks wrong, run `vp env doctor` and include its output when asking for help.
+
+<!--VITE PLUS END-->

CLAUDE.md

@@ -0,0 +1 @@
+AGENTS.md

app/components/application/sw-register.tsx

@@ -13,7 +13,7 @@ export function SwRegister(): null {
             const sw = event.target as ServiceWorker | null;
             const state = sw?.state;
             if (state === 'installed') {
-                navigator.serviceWorker.getRegistration('/').then((r) => {
+                void navigator.serviceWorker.getRegistration('/').then((r) => {
                     if (r?.waiting) r.waiting.postMessage({ type: 'SKIP_WAITING' });
                 });
             }
@@ -85,10 +85,12 @@ export function SwRegister(): null {
             }
         }
 
-        !import.meta.env.DEV && void tryRegister();
+        if (!import.meta.env.DEV) {
+            void tryRegister();
+        }
 
         return () => {
-            navigator.serviceWorker.getRegistration(SW_URL).then((reg) => {
+            void navigator.serviceWorker.getRegistration(SW_URL).then((reg) => {
                 if (reg?.installing) reg.installing.removeEventListener('statechange', handleNewWorkerStateChange);
                 if (reg?.waiting) reg.waiting.removeEventListener('statechange', handleNewWorkerStateChange);
                 if (reg?.active) reg.active.removeEventListener('statechange', handleNewWorkerStateChange);

app/components/pages/utilities/char-counter.tsx

@@ -11,7 +11,7 @@ export default function CharCounter() {
     useEffect(() => {
         function handleCharCount() {
             let words;
-            const isLatin = content.replace(/\s+/g, '').match(/([^\x00-\x7F\u2013\u2014])+/gi);
+            const isLatin = content.replace(/\s+/g, '').match(/([^\u0020-\u007F\u2013\u2014])+/gi);
 
             if (isLatin) words = content.match(/[\p{L}\p{N}]+/gu);
             else {

app/components/theme-provider.tsx

@@ -45,7 +45,7 @@ export function ThemeProvider({ children, initialTheme }: Readonly<ThemeProvider
             setTheme: (theme: Theme) => {
                 setTheme(theme);
 
-                fetcher.submit(
+                void fetcher.submit(
                     { theme },
                     {
                         method: 'post',

app/components/ui/calendar.tsx

@@ -5,6 +5,10 @@ import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react
 import { Button, buttonVariants } from '~/components/ui/button';
 import { cn } from '~/lib/utils';
 
+type CalendarProps<T> = T extends unknown
+    ? T & { buttonVariant?: Exclude<React.ComponentProps<typeof Button>['variant'], undefined> }
+    : never;
+
 function Calendar({
     className,
     classNames,
@@ -15,9 +19,7 @@ function Calendar({
     formatters,
     components,
     ...props
-}: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant: React.ComponentProps<typeof Button>['variant'];
-}) {
+}: CalendarProps<React.ComponentProps<typeof DayPicker>>) {
     const defaultClassNames = getDefaultClassNames();
 
     return (

app/components/ui/sidebar.tsx

@@ -72,7 +72,7 @@ function SidebarProvider({
             }
 
             // This sets the cookie to keep the sidebar state.
-            fetcher.submit(
+            void fetcher.submit(
                 { sidebar_state: String(openState) },
                 {
                     method: 'post',

app/root.tsx

@@ -104,7 +104,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 
     useEffect(() => {
         if (!error) {
-            navigate(location.pathname, { replace: true });
+            void navigate(location.pathname, { replace: true });
         }
     }, [error, location.pathname, navigate]);
 

app/sw.ts

@@ -63,7 +63,7 @@ async function matchCached(cacheName: string, request: Request) {
     return cache.match(normalizeCacheKey(request), { ignoreSearch: true });
 }
 
-async function warmApplicationShell(event: ExtendableEvent) {
+async function warmApplicationShell(_event: ExtendableEvent) {
     const response = await fetch('/routes.json', { cache: 'no-store' });
 
     if (!response.ok) {
@@ -170,7 +170,7 @@ const serwist = new Serwist({
 if (isDev) {
     self.addEventListener('install', (event) => {
         console.log('Event install (dev only)', event);
-        self.skipWaiting();
+        void self.skipWaiting();
     });
 
     self.addEventListener('activate', (event) => {

package.json

@@ -19,27 +19,28 @@
         "dev": "react-router dev --host",
         "start": "react-router-serve ./build/server/nodejs_eyJydW50aW1lIjoibm9kZWpzIn0/index.js",
         "typecheck": "react-router typegen && tsc",
-        "format": "prettier --write \"**/*.{ts,tsx}\"",
-        "tests": "vitest run"
+        "format": "vp fmt \"**/*.{ts,tsx}\"",
+        "tests": "vp test run",
+        "prepare": "vp config"
     },
     "dependencies": {
         "@base-ui/react": "^1.7.0",
         "@fontsource-variable/fira-code": "^5.3.0",
         "@fontsource-variable/montserrat": "^5.3.0",
         "@fontsource-variable/source-sans-3": "^5.3.0",
         "@hookform/resolvers": "^5.9.1",
-        "@react-router/node": "8.3.0",
-        "@react-router/serve": "8.3.0",
-        "@vercel/react-router": "^1.3.4",
+        "@react-router/node": "8.3.1",
+        "@react-router/serve": "8.3.1",
+        "@vercel/react-router": "^1.3.6",
         "canvas": "^3.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.4.0",
         "hash-wasm": "^4.12.0",
-        "isbot": "^5.2.1",
-        "konva": "^10.3.1",
+        "isbot": "^5.2.2",
+        "konva": "^10.3.2",
         "lodash": "^4.18.1",
-        "lucide-react": "^1.33.0",
+        "lucide-react": "^1.37.0",
         "mathjs": "^15.2.0",
         "optional": "^0.1.4",
         "qrcode": "^1.5.4",
@@ -48,37 +49,37 @@
         "react-day-picker": "^10.0.1",
         "react-dom": "^19.2.8",
         "react-dropzone": "^20.1.1",
-        "react-hook-form": "^7.85.0",
+        "react-hook-form": "^7.86.0",
         "react-konva": "^19.2.5",
-        "react-router": "8.3.0",
+        "react-router": "8.3.1",
         "shadcn": "^4.19.0",
         "tailwind-merge": "^3.6.0",
         "tw-animate-css": "^1.4.0",
-        "zod": "^4.4.3"
+        "zod": "^4.5.2"
     },
     "devDependencies": {
-        "@react-router/dev": "8.3.0",
+        "@react-router/dev": "8.3.1",
         "@serwist/vite": "^9.5.12",
         "@serwist/window": "^9.5.12",
         "@tailwindcss/vite": "^4.3.3",
         "@types/convert-source-map": "^2.0.3",
         "@types/lodash": "^4.17.25",
-        "@types/node": "^26.2.0",
+        "@types/node": "^26.4.0",
         "@types/qrcode": "^1.5.6",
         "@types/react": "^19.2.18",
-        "@types/react-dom": "^19.2.4",
-        "@vitest/browser-playwright": "^4.1.11",
+        "@types/react-dom": "^19.2.5",
+        "@vitest/browser-playwright": "catalog:",
         "babel-plugin-react-compiler": "^1.0.0",
         "jsdom": "^30.0.1",
-        "prettier": "^3.9.6",
-        "prettier-plugin-tailwindcss": "^0.8.1",
+        "playwright": "^1.62.1",
         "serwist": "^9.5.12",
         "tailwindcss": "^4.3.3",
         "typescript": "^6.0.3",
-        "vite": "^8.2.2",
+        "vite": "catalog:",
         "vite-plugin-devtools-json": "^1.1.0",
-        "vitest": "^4.1.11",
+        "vite-plus": "catalog:",
+        "vitest": "catalog:",
         "vitest-browser-react": "^2.2.0"
     },
-    "packageManager": "pnpm@11.22.0"
+    "packageManager": "pnpm@11.24.0"
 }