Update major packages to their next majors

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 .nx/
 .turbo/
+.million/
 .ignore/
 dist/
 .next/

.vscode/settings.json

@@ -27,7 +27,7 @@
     "vite.config.chrome.ts": "vite",
     "vite.config.firefox.ts": "vite"
   },
-  "cSpell.words": ["posthog", "Resolvables"],
+  "cSpell.words": ["color", "posthog", "Resolvables"],
   "todo-tree.general.tags": ["=====", "NOTE", "IDEA", "TODO", "FIX", "HACK"],
   "todo-tree.highlights.customHighlight": {
     "=====": {

apps/browser-extension/package.json

@@ -16,14 +16,14 @@
     "@evaluate/engine": "workspace:^",
     "@evaluate/helpers": "workspace:^",
     "@evaluate/shapes": "workspace:^",
-    "@evaluate/style": "workspace:^",
+    "@evaluate/styles": "workspace:^",
     "@t3-oss/env-core": "^0.11.1",
-    "lucide-react": "^0.475.0",
-    "posthog-js": "^1.218.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sonner": "^1.7.4",
-    "tailwind-merge": "^2.6.0",
+    "lucide-react": "^0.476.0",
+    "posthog-js": "^1.223.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "^3.0.2",
     "webext-bridge": "^6.0.1",
     "webextension-polyfill": "^0.12.0",
     "zod": "3.22.4"
@@ -34,13 +34,14 @@
     "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.26.9",
     "@crxjs/vite-plugin": "2.0.0-beta.30",
+    "@tailwindcss/vite": "^4.0.9",
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@types/webextension-polyfill": "^0.12.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^4.0.9",
     "vite": "3.2.11",
     "vite-plugin-zip-pack": "^1.2.4",
     "vite-tsconfig-paths": "^5.1.4"

apps/browser-extension/src/content-script/execution/dialog.tsx

@@ -35,7 +35,7 @@ export function ExecutionDialog({
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogBody portalProps={{ container: portal }}>
+      <DialogBody portalProps={{ container: portal }} className="border-2">
         <DialogHeader className="flex-row">
           <img
             src={browser.runtime.getURL('images/icon.png')}

apps/browser-extension/src/content-script/execution/result.tsx

@@ -32,8 +32,8 @@ export function ResultDialog({
           value={display.output}
           placeholder="The code ran successfully, but it didn't produce an output to the console."
           className={cn(
-            'min-h-[40vh] w-full resize-none',
-            display.code && 'border-2 border-destructive',
+            'min-h-[40vh] w-full resize-none border-2',
+            display.code && 'border-destructive',
             display.output && 'font-mono',
           )}
         />

apps/browser-extension/src/content-script/index.tsx

@@ -1,10 +1,10 @@
 import { Toaster } from '@evaluate/components/toast';
-import tailwindCss from '@evaluate/style/.css?inline';
 import { createRoot } from 'react-dom/client';
 import sonnerCss from 'sonner/dist/styles.css?inline';
 import { onMessage, sendMessage } from 'webext-bridge/content-script';
 import { extractRuntimeResolvables } from '~/helpers/runtime-resolvables';
 import posthog, { sessionLog } from '~/services/posthog';
+import tailwindCss from '../styles.css?inline';
 import { Execution } from './execution';
 import { createIsolatedElement } from './shadow-root';
 
@@ -31,7 +31,8 @@ const { parentElement, portalElement, isolatedElement } = createIsolatedElement(
       inter: 'https://rsms.me/inter/inter.css',
     },
     styles: {
-      tailwind: tailwindCss.replaceAll(':root', ':host'),
+      // TODO: Figure out why this is necessary
+      tailwind: tailwindCss.replaceAll('border-style:', '__ignore__:'),
       sonner: sonnerCss,
     },
     isolatedEvents: true,

apps/browser-extension/src/styles.css

@@ -0,0 +1,3 @@
+@import "@evaluate/styles";
+@import "@evaluate/components";
+@source ".";

apps/browser-extension/vite.config.chrome.ts

@@ -1,4 +1,5 @@
 import { chromeExtension } from '@crxjs/vite-plugin';
+import tailwindCss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import zipPack from 'vite-plugin-zip-pack';
@@ -9,6 +10,7 @@ import { removeExternalScriptLoading } from './vite-plugins';
 export default defineConfig({
   plugins: [
     removeExternalScriptLoading(),
+    tailwindCss(),
     tsconfigPaths(),
     react(),
     chromeExtension({

apps/browser-extension/vite.config.firefox.ts

@@ -1,4 +1,5 @@
 import { chromeExtension } from '@crxjs/vite-plugin';
+import tailwindCss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import zipPack from 'vite-plugin-zip-pack';
@@ -9,6 +10,7 @@ import { removeExternalScriptLoading } from './vite-plugins';
 export default defineConfig({
   plugins: [
     removeExternalScriptLoading(),
+    tailwindCss(),
     tsconfigPaths(),
     react(),
     chromeExtension({

apps/discord-bot/package.json

@@ -18,14 +18,14 @@
     "dev": "pnpm build --watch"
   },
   "dependencies": {
-    "@buape/carbon": "0.0.0-beta-20250204223027",
+    "@buape/carbon": "0.7.0",
     "@evaluate/engine": "workspace:^",
     "@evaluate/helpers": "workspace:^",
     "@evaluate/shapes": "workspace:^",
     "@t3-oss/env-core": "^0.11.1",
     "es-toolkit": "^1.32.0",
     "date-fns": "^4.1.0",
-    "posthog-node": "^4.6.0",
+    "posthog-node": "^4.7.0",
     "zod": "3.22.4"
   }
 }

apps/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/website/next.config.js

@@ -1,17 +1,26 @@
-import withBundleAnalyser from '@next/bundle-analyzer';
+import { fetchRuntimes } from '@evaluate/engine/runtimes';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   typescript: { ignoreBuildErrors: true },
 
-  redirects: async () => [
-    {
-      source: '/',
-      destination: '/playgrounds',
-      permanent: false,
-    },
-  ],
+  redirects: async () => {
+    return [
+      {
+        source: '/',
+        destination: '/playgrounds',
+        permanent: false,
+      },
+      {
+        source: `/:slug(${(await fetchRuntimes())
+          .map((r) => r.id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+          .join('|')})`,
+        destination: '/playgrounds/:slug',
+        permanent: true,
+      },
+    ];
+  },
   rewrites: async () => [
     {
       source: '/api/ingest/static/:path*',
@@ -35,7 +44,12 @@ const nextConfig = {
   },
 };
 
-const isTruthy = (v) => ['true', 't', '1'].includes(v);
-export default withBundleAnalyser({
-  enabled: isTruthy(String(process.env.ANALYSE)),
-})(nextConfig);
+const truthy = (v) => ['true', 't', '1'].includes(v);
+export default [
+  truthy(process.env.ANALYSE) &&
+    (await import('@next/bundle-analyzer')).default({ enabled: true }),
+  !truthy(process.env.TURBOPACK) &&
+    (await import('@million/lint')).next({ rsc: true }),
+]
+  .filter(Boolean)
+  .reduce((acc, curr) => curr(acc), nextConfig);

apps/website/package.json

@@ -6,24 +6,25 @@
     "check": "tsc --noEmit",
     "build": "use-env -p NEXT -P -- next build --no-lint",
     "start": "use-env -p NEXT -P -- next start",
-    "dev": "use-env -p NEXT -- next dev --turbo"
+    "dev": "use-env -p NEXT -- next dev --turbo",
+    "dev:lint": "use-env -p NEXT -- next dev"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.7.1",
-    "@codemirror/view": "^6.35.0",
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/view": "^6.36.3",
     "@evaluate/components": "workspace:^",
     "@evaluate/engine": "workspace:^",
     "@evaluate/helpers": "workspace:^",
     "@evaluate/hooks": "workspace:^",
     "@evaluate/shapes": "workspace:^",
-    "@evaluate/style": "workspace:^",
-    "@hookform/resolvers": "^3.10.0",
+    "@evaluate/styles": "workspace:^",
+    "@hookform/resolvers": "^4.1.2",
     "@t3-oss/env-nextjs": "^0.11.1",
-    "@tanstack/react-query": "^5.66.0",
-    "@tanstack/react-query-devtools": "^5.66.0",
-    "@uiw/codemirror-extensions-langs": "^4.23.6",
-    "@uiw/codemirror-theme-vscode": "^4.23.6",
-    "@uiw/react-codemirror": "^4.23.6",
+    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-query-devtools": "^5.66.9",
+    "@uiw/codemirror-extensions-langs": "^4.23.8",
+    "@uiw/codemirror-theme-vscode": "^4.23.8",
+    "@uiw/react-codemirror": "^4.23.8",
     "@vercel/speed-insights": "^1.2.0",
     "date-fns": "^4.1.0",
     "discord-bot": "workspace:^",
@@ -34,29 +35,31 @@
     "fuse.js": "^7.1.0",
     "is-mobile": "^5.0.0",
     "jszip": "^3.10.1",
-    "lucide-react": "^0.475.0",
+    "lucide-react": "^0.476.0",
     "material-icon-theme": "^5.19.0",
-    "next": "^14.2.24",
+    "next": "^15.1.7",
     "next-themes": "npm:@wits/next-themes@^0.2.16",
-    "posthog-js": "^1.218.1",
-    "react": "^18.3.1",
+    "posthog-js": "^1.223.4",
+    "react": "^19.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-hotkeys-hook": "^4.6.1",
     "sharp": "^0.33.5",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.0.2",
+    "type-fest": "^4.35.0",
     "virtual-file-explorer-backend": "^0.0.4",
     "vscode-icons-js": "^11.6.1",
     "zod": "3.22.4"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.24",
-    "@types/dompurify": "^3.2.0",
+    "@million/lint": "^1.0.14",
+    "@next/bundle-analyzer": "^15.1.7",
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/file-saver": "^2.0.7",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.10",
     "autoprefixer": "^10.4.20",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^4.0.9"
   }
 }

apps/website/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };

apps/website/src/app/(editor)/playgrounds/[playground]/page.tsx

@@ -14,9 +14,8 @@ export async function generateStaticParams() {
   return runtimes.map((r) => ({ playground: r.id }));
 }
 
-export async function generateMetadata({
-  params: { playground },
-}: PageProps<['playground']>) {
+export async function generateMetadata(props: PageProps<['[playground]']>) {
+  const playground = (await props.params).playground;
   const runtime = await getRuntime(decodeURIComponent(playground));
   if (!runtime) notFound();
 
@@ -28,9 +27,8 @@ export async function generateMetadata({
   });
 }
 
-export default async function EditorPage({
-  params: { playground },
-}: PageProps<['playground']>) {
+export default async function EditorPage(props: PageProps<['[playground]']>) {
+  const playground = (await props.params).playground;
   const runtime = await getRuntime(decodeURIComponent(playground));
   if (!runtime) notFound();
 

apps/website/src/app/(editor)/playgrounds/[playground]/wrapper/desktop.tsx

@@ -14,7 +14,7 @@ export function DesktopWrapper({ children }: React.PropsWithChildren) {
         defaultSize={15}
         minSize={10}
         collapsible={false}
-        className="m-1.5 rounded-xl border-2 bg-card"
+        className="m-1.5 rounded-lg border-2 bg-card"
       >
         {explorer}
       </ResizablePanel>
@@ -25,7 +25,7 @@ export function DesktopWrapper({ children }: React.PropsWithChildren) {
         defaultSize={55}
         minSize={35}
         collapsible={false}
-        className="m-1.5 rounded-xl border-2 bg-card"
+        className="m-1.5 rounded-lg border-2 bg-card"
       >
         {editor}
       </ResizablePanel>
@@ -36,7 +36,7 @@ export function DesktopWrapper({ children }: React.PropsWithChildren) {
         defaultSize={30}
         minSize={10}
         collapsible={false}
-        className="m-1.5 rounded-xl border-2 bg-card"
+        className="m-1.5 rounded-lg border-2 bg-card"
       >
         {terminal}
       </ResizablePanel>