chore: update package versions and dependencies across multiple files (#413)

* chore: update package versions and dependencies across multiple files

- Bumped application version to 2.21.3 in package.json.
- Updated dependencies including turbo to version 2.6.1, @next/bundle-analyzer and @next/eslint-plugin-next to version 16.0.3, and @supabase/supabase-js to version 2.81.1.
- Adjusted @types/node, @types/react, and @types/react-dom versions for consistency.
- Refactored package.json files to utilize catalog dependencies for improved management.
- Incremented various other dependencies such as react-i18next to version 16.3.3 and tailwind-merge to version 3.4.0.

* chore: downgrade @next/bundle-analyzer and @next/eslint-plugin-next to version 16.0.2 and update next to version 16.0.2 in pnpm-lock.yaml and pnpm-workspace.yaml

- Updated package versions for consistency across the project.
- Adjusted the overflow property in the PageWithSidebar component for improved layout handling.

* feat: add sorting functionality to DataTable header

- Implemented click handler for sortable headers in the DataTable component, allowing users to toggle sorting between ascending and descending order.
- Enhanced user interaction by updating the header's visual state based on the current sorting direction.

* fix: update layout and structure in UserHomePage and DashboardDemo components

- Added a new div structure within the PageBody of UserHomePage for improved layout.
- Simplified the grid structure in DashboardDemo by adjusting the number of columns for better responsiveness.
- Enhanced the PageWithSidebar component to ensure proper flex behavior and layout consistency.

* refactor: simplify PageBody structure in UserHomePage

- Removed unnecessary div elements within the PageBody of UserHomePage for cleaner layout.
- Enhanced readability and maintainability of the component structure.

apps/dev-tool/package.json

@@ -8,15 +8,15 @@
     "format": "prettier --check --write \"**/*.{ts,tsx}\" --ignore-path=\"../../.prettierignore\""
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.64",
+    "@ai-sdk/openai": "^2.0.67",
     "@faker-js/faker": "^10.1.0",
     "@hookform/resolvers": "^5.2.2",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
-    "ai": "5.0.89",
+    "ai": "5.0.93",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
     "nodemailer": "^7.0.10",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
     "rxjs": "^7.8.2"
   },
@@ -41,7 +41,7 @@
     "tailwindcss": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config",
   "browserslist": [

apps/e2e/package.json

@@ -12,7 +12,7 @@
   "author": "Makerkit",
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
     "@types/node": "catalog:",
     "dotenv": "17.2.3",
     "node-html-parser": "^7.0.1",

apps/web/app/home/[account]/_components/dashboard-demo-charts.tsx

@@ -50,11 +50,7 @@ export default function DashboardDemo() {
         'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
       }
     >
-      <div
+      <div className={'grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4'}>
-        className={
-          'grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
-        }
-      >
         <Card>
           <CardHeader>
             <CardTitle className={'flex items-center gap-2.5'}>

apps/web/package.json

@@ -54,25 +54,25 @@
     "@makerkit/data-loader-supabase-core": "^0.0.10",
     "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
     "@marsidev/react-turnstile": "^1.3.1",
-    "@nosecone/next": "1.0.0-beta.14",
+    "@nosecone/next": "1.0.0-beta.15",
     "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.21.3",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.4.6",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.66.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
     "recharts": "2.15.3",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "catalog:",
     "urlpattern-polyfill": "^10.1.0",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.21.2",
+  "version": "2.21.3",
   "private": true,
   "sideEffects": false,
   "engines": {
@@ -43,7 +43,7 @@
     "@turbo/gen": "^2.6.0",
     "cross-env": "^10.0.0",
     "prettier": "^3.6.2",
-    "turbo": "2.6.0",
+    "turbo": "2.6.1",
     "typescript": "^5.9.3"
   }
 }

packages/billing/core/package.json

@@ -21,7 +21,7 @@
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/billing/gateway/package.json

@@ -26,15 +26,15 @@
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
     "@types/react": "catalog:",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-hook-form": "^7.66.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/billing/lemon-squeezy/package.json

@@ -26,8 +26,8 @@
     "@kit/ui": "workspace:*",
     "@types/react": "catalog:",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/billing/stripe/package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@stripe/react-stripe-js": "^5.3.0",
-    "@stripe/stripe-js": "^8.3.0",
+    "@stripe/stripe-js": "^8.4.0",
-    "stripe": "^19.3.0"
+    "stripe": "^19.3.1"
   },
   "devDependencies": {
     "@kit/billing": "workspace:*",
@@ -30,8 +30,8 @@
     "@types/react": "catalog:",
     "date-fns": "^4.1.0",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/cms/keystatic/package.json

@@ -28,8 +28,8 @@
     "@kit/ui": "workspace:*",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/database-webhooks/package.json

@@ -21,8 +21,8 @@
     "@kit/stripe": "workspace:*",
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/email-templates/package.json

@@ -13,7 +13,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@react-email/components": "1.0.0"
+    "@react-email/components": "1.0.1"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",

packages/features/accounts/package.json

@@ -34,18 +34,18 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
     "next-themes": "0.4.6",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.66.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config",
   "typesVersions": {

packages/features/admin/package.json

@@ -20,16 +20,16 @@
     "@kit/ui": "workspace:*",
     "@makerkit/data-loader-supabase-core": "^0.0.10",
     "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "catalog:",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.66.0",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "exports": {
     ".": "./src/index.ts",

packages/features/auth/package.json

@@ -29,15 +29,15 @@
     "@kit/ui": "workspace:*",
     "@marsidev/react-turnstile": "^1.3.1",
     "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@types/react": "catalog:",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
     "react-hook-form": "^7.66.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
     "sonner": "^2.0.7",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config",
   "typesVersions": {

packages/features/notifications/package.json

@@ -19,13 +19,13 @@
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@types/react": "catalog:",
     "lucide-react": "^0.553.0",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
-    "react-i18next": "^16.2.4"
+    "react-i18next": "^16.3.3"
   },
   "prettier": "@kit/prettier-config",
   "typesVersions": {

packages/features/team-accounts/package.json

@@ -36,8 +36,8 @@
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
@@ -45,11 +45,11 @@
     "date-fns": "^4.1.0",
     "lucide-react": "^0.553.0",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.66.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config",
   "typesVersions": {

packages/i18n/package.json

@@ -20,14 +20,14 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
-    "react-i18next": "^16.2.4"
+    "react-i18next": "^16.3.3"
   },
   "dependencies": {
-    "i18next": "25.6.1",
+    "i18next": "25.6.2",
     "i18next-browser-languagedetector": "8.2.0",
     "i18next-resources-to-backend": "^1.2.1"
   },

packages/mailers/core/package.json

@@ -21,7 +21,7 @@
     "@kit/shared": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@types/node": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/mailers/nodemailer/package.json

@@ -21,7 +21,7 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@types/nodemailer": "7.0.3",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/mailers/resend/package.json

@@ -18,7 +18,7 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@types/node": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/mailers/shared/package.json

@@ -16,7 +16,7 @@
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/mcp-server/package.json

@@ -24,10 +24,10 @@
   "devDependencies": {
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@modelcontextprotocol/sdk": "1.21.1",
+    "@modelcontextprotocol/sdk": "1.22.0",
     "@types/node": "catalog:",
     "postgres": "3.4.7",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config",
   "typesVersions": {

packages/monitoring/api/package.json

@@ -24,8 +24,8 @@
     "@kit/shared": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@types/react": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/monitoring/sentry/package.json

@@ -16,7 +16,7 @@
     "./config/server": "./src/sentry.client.server.ts"
   },
   "dependencies": {
-    "@sentry/nextjs": "^10.22.0"
+    "@sentry/nextjs": "^10.25.0"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",

packages/next/package.json

@@ -20,9 +20,9 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
     "next": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/otp/package.json

@@ -25,13 +25,13 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.66.0",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/policies/package.json

@@ -23,7 +23,7 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config"
 }

packages/supabase/package.json

@@ -26,13 +26,13 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@supabase/ssr": "^0.7.0",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "next": "catalog:",
-    "react": "19.2.0",
+    "react": "catalog:",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "typesVersions": {
     "*": {

packages/ui/package.json

@@ -19,14 +19,14 @@
     "react-dropzone": "^14.3.8",
     "react-top-loading-bar": "3.0.2",
     "recharts": "2.15.3",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.80.0",
+    "@supabase/supabase-js": "catalog:",
-    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
@@ -38,12 +38,12 @@
     "prettier": "^3.6.2",
     "react-day-picker": "^9.11.1",
     "react-hook-form": "^7.66.0",
-    "react-i18next": "^16.2.4",
+    "react-i18next": "^16.3.3",
     "sonner": "^2.0.7",
     "tailwindcss": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3",
-    "zod": "^3.25.74"
+    "zod": "catalog:"
   },
   "prettier": "@kit/prettier-config",
   "imports": {

packages/ui/src/makerkit/data-table.tsx

@@ -358,6 +358,14 @@ export function DataTable<RecordData extends DataItem>({
                   >
                     {header.isPlaceholder ? null : (
                       <div
+                        onClick={() =>
+                          header.column.getCanSort() &&
+                          header.column.toggleSorting(
+                            header.column.getIsSorted() === 'asc'
+                              ? true
+                              : false,
+                          )
+                        }
                         className={cn(
                           'flex items-center gap-2',
                           header.column.getCanSort()
@@ -380,6 +388,7 @@ export function DataTable<RecordData extends DataItem>({
                                   : 'text-muted-foreground/50',
                               )}
                             />
+
                             <ChevronDown
                               className={cn(
                                 '-mt-1 h-3 w-3',

packages/ui/src/makerkit/page.tsx

@@ -35,18 +35,22 @@ function PageWithSidebar(props: PageProps) {
   const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
 
   return (
-    <div className={cn('flex min-w-0 flex-1', props.className)}>
+    <div
+      className={cn('flex min-w-0 flex-1 overflow-x-hidden', props.className)}
+    >
       {Navigation}
 
       <div
         className={
           props.contentContainerClassName ??
-          'mx-auto flex h-screen w-full flex-col bg-inherit'
+          'mx-auto flex h-screen w-full min-w-0 flex-1 flex-col bg-inherit'
         }
       >
         {MobileNavigation}
 
-        <div className={'bg-background flex flex-1 flex-col px-4 lg:px-0'}>
+        <div
+          className={'bg-background flex min-w-0 flex-1 flex-col px-4 lg:px-0'}
+        >
           {Children}
         </div>
       </div>
@@ -109,13 +113,13 @@ export function PageBody(
     className?: string;
   }>,
 ) {
-  const className = cn('flex w-full flex-1 flex-col lg:px-4', props.className);
+  const className = cn('flex min-w-0 flex-1 flex-col lg:px-4', props.className);
 
   return <div className={className}>{props.children}</div>;
 }
 
 export function PageNavigation(props: React.PropsWithChildren) {
-  return <div className={'flex-1 bg-inherit'}>{props.children}</div>;
+  return <div className={'bg-inherit'}>{props.children}</div>;
 }
 
 export function PageDescription(props: React.PropsWithChildren) {

pnpm-workspace.yaml

@@ -4,17 +4,21 @@ packages:
   - tooling/*
 
 catalog:
-  '@next/bundle-analyzer': 16.0.1
+  '@next/bundle-analyzer': 16.0.2
-  '@next/eslint-plugin-next': 16.0.1
+  '@next/eslint-plugin-next': 16.0.2
   '@tailwindcss/postcss': 4.1.17
-  '@types/node': 24.10.0
+  '@types/node': 24.10.1
-  '@types/react': 19.2.2
+  '@types/react': 19.2.5
-  '@types/react-dom': 19.2.2
+  '@types/react-dom': 19.2.3
-  eslint-config-next: 16.0.1
+  eslint-config-next: 16.0.3
-  next: 16.0.1
+  next: 16.0.2
-  supabase: 2.54.11
+  supabase: 2.58.5
   tailwindcss: 4.1.17
   tw-animate-css: 1.4.0
+  '@supabase/supabase-js': 2.81.1
+  '@tanstack/react-query': 5.90.9
+  zod: 3.25.74
+  react: 19.2.0
 
 onlyBuiltDependencies:
   - '@tailwindcss/oxide'

tooling/eslint/package.json

@@ -16,7 +16,7 @@
     "@next/eslint-plugin-next": "catalog:",
     "@types/eslint": "9.6.1",
     "eslint-config-next": "catalog:",
-    "eslint-config-turbo": "^2.6.0"
+    "eslint-config-turbo": "^2.6.1"
   },
   "devDependencies": {
     "@kit/prettier-config": "workspace:*",