WIP: chore: update tanstack start

package.json

@@ -52,10 +52,10 @@
     "@tanstack/pacer": "^0.16.4",
     "@tanstack/react-pacer": "^0.17.4",
     "@tanstack/react-query": "^5.90.12",
-    "@tanstack/react-router": "1.141.6",
-    "@tanstack/react-router-devtools": "1.141.6",
-    "@tanstack/react-router-ssr-query": "1.141.6",
-    "@tanstack/react-start": "1.141.8",
+    "@tanstack/react-router": "1.157.16",
+    "@tanstack/react-router-devtools": "1.157.16",
+    "@tanstack/react-router-ssr-query": "1.157.16",
+    "@tanstack/react-start": "1.157.16",
     "@tanstack/react-table": "^8.21.3",
     "@types/d3": "^7.4.3",
     "@uploadthing/react": "^7.3.3",
@@ -84,9 +84,9 @@
     "mermaid": "^11.11.0",
     "postgres": "^3.4.7",
     "posthog-node": "^5.20.0",
-    "react": "^19.2.0",
+    "react": "^19.2.4",
     "react-colorful": "^5.6.1",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.4",
     "react-easy-crop": "^5.5.6",
     "react-instantsearch": "7",
     "rehype-autolink-headings": "^7.1.0",
@@ -124,8 +124,8 @@
     "@types/hast": "^3.0.4",
     "@types/node": "^24.3.0",
     "@types/pg": "^8.15.6",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.3",
     "@types/remove-markdown": "^0.3.4",
     "@types/three": "^0.182.0",
     "autoprefixer": "^10.4.18",

src/builder/api/compile.ts

@@ -174,7 +174,7 @@ function extractWarnings(addOns: Array<AddOn>): Array<string> {
     .map((a) => `${a.name}: ${a.warning}`)
 }
 
-function convertToStarter(template: StarterCompiled): Starter {
+function _convertToStarter(template: StarterCompiled): Starter {
   return {
     ...template,
     getFiles: () => Promise.resolve(Object.keys(template.files)),

src/components/BottomCTA.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
-import type { LinkProps } from '@tanstack/react-router'
 import { Link } from '@tanstack/react-router'
-import { Button } from '~/ui'
+import type { LibraryId } from '~/libraries'
 
 type BottomCTAProps = {
-  linkProps: Omit<LinkProps, 'className' | 'children'>
+  linkProps: {
+    to: '/$libraryId/$version/docs'
+    params: { libraryId: LibraryId; version?: string }
+  }
   label?: string
   className?: string
 }
@@ -23,13 +25,16 @@ export function BottomCTA({
         Only one thing left to do...
       </div>
       <div>
-        <Button
-          as={Link}
-          {...linkProps}
-          className={`py-2 px-4 text-sm shadow-xs hover:shadow-sm ${className}`}
+        <Link
+          to={linkProps.to}
+          params={{
+            ...linkProps.params,
+            version: linkProps.params.version ?? 'latest',
+          }}
+          className={`inline-flex items-center justify-center gap-2 cursor-pointer transition-colors py-2 px-4 text-sm shadow-xs hover:shadow-sm rounded-lg border font-medium bg-blue-600 text-white border-blue-600 hover:bg-blue-700 ${className}`}
         >
           {label}
-        </Button>
+        </Link>
       </div>
     </div>
   )

src/components/ExampleDeployDialog.tsx

@@ -92,12 +92,14 @@ export function ExampleDeployDialog({
   // Reset repo name when dialog opens with new example
   useEffect(() => {
     if (isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setRepoName(defaultRepoName)
     }
   }, [isOpen, defaultRepoName])
 
   // Validate and check repo name
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRepoNameError(null)
 
     const validation = validateRepoNameFormat(repoName)
@@ -126,6 +128,7 @@ export function ExampleDeployDialog({
   // Check auth state when dialog opens or auth changes
   useEffect(() => {
     if (!isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setState({ step: 'auth-check' })
       setCountdown(null)
       return
@@ -155,6 +158,7 @@ export function ExampleDeployDialog({
     if (state.step !== 'success' || countdown === null) return
 
     if (countdown <= 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setCountdown(null)
       const deployUrl = providerInfo.deployUrl(state.owner, state.repoName)
       window.open(deployUrl, '_blank')

src/components/FeedbackModerationTopBar.tsx

@@ -1,4 +1,4 @@
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import { DOC_FEEDBACK_STATUSES, type DocFeedbackStatus } from '~/db/types'
 import {
   TopBarFilter,
@@ -13,14 +13,14 @@ import { FormInput } from '~/ui'
 interface FeedbackModerationTopBarProps {
   filters: {
     status?: DocFeedbackStatus[]
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
   }
   onFilterChange: (filters: {
     status?: DocFeedbackStatus[]
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
@@ -63,7 +63,7 @@ export function FeedbackModerationTopBar({
     filters.dateTo,
   )
 
-  const getLibraryName = (id: string) =>
+  const getLibraryName = (id: LibraryId) =>
     libraries.find((l) => l.id === id)?.name || id
 
   const formatDateRange = () => {
@@ -130,7 +130,11 @@ export function FeedbackModerationTopBar({
           <select
             value={filters.libraryId || ''}
             onChange={(e) =>
-              onFilterChange({ libraryId: e.target.value || undefined })
+              onFilterChange({
+                libraryId: (e.target.value || undefined) as
+                  | LibraryId
+                  | undefined,
+              })
             }
             className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           >

src/components/LibraryHero.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { Link, LinkProps } from '@tanstack/react-router'
-import type { Library } from '~/libraries'
-import { Button } from '~/ui'
+import { Link } from '@tanstack/react-router'
+import type { Library, LibraryId } from '~/libraries'
 
 type LibraryHeroProps = {
   project: Library
   cta?: {
-    linkProps: LinkProps
+    linkProps: {
+      to: '/$libraryId/$version/docs'
+      params: { libraryId: LibraryId; version?: string }
+    }
     label: string
     className?: string
   }
@@ -54,13 +56,19 @@ export function LibraryHero({ project, cta, actions }: LibraryHeroProps) {
       {actions ? (
         <div className="flex flex-wrap gap-2 justify-center">{actions}</div>
       ) : cta ? (
-        <Button
-          as={Link}
-          {...cta.linkProps}
-          className={twMerge('py-2 px-4 text-sm', cta.className)}
+        <Link
+          to={cta.linkProps.to}
+          params={{
+            ...cta.linkProps.params,
+            version: cta.linkProps.params.version ?? 'latest',
+          }}
+          className={twMerge(
+            'inline-flex items-center justify-center gap-2 cursor-pointer transition-colors py-2 px-4 text-sm rounded-lg border font-medium bg-blue-600 text-white border-blue-600 hover:bg-blue-700',
+            cta.className,
+          )}
         >
           {cta.label}
-        </Button>
+        </Link>
       ) : null}
     </div>
   )

src/components/Navbar.tsx

@@ -180,7 +180,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
 
   const { Title, library } = React.useMemo(() => {
     const match = [...matches].reverse().find((m) => m.staticData.Title)
-    const libraryId = match?.params?.libraryId
+    const params = match?.params as { libraryId?: string } | undefined
+    const libraryId = params?.libraryId
 
     return {
       Title: match?.staticData.Title ?? null,
@@ -253,7 +254,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <Authenticated>
         <React.Suspense fallback={<div className="w-[26px] h-[26px]" />}>
           <LazyAuthenticatedUserMenu
-            user={user}
+            user={user ?? null}
             canAdmin={canAdmin}
             canApiKeys={canApiKeys}
             onSignOut={signOut}
@@ -333,7 +334,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       </div>
       <div className="hidden xl:flex flex-1 justify-end min-w-0">
         <Link
-          to="/cli"
+          to="/$libraryId/$version"
+          params={{ libraryId: 'cli', version: 'latest' }}
           className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md
             bg-gradient-to-r from-indigo-600 to-violet-700
             hover:from-indigo-500 hover:to-violet-600
@@ -437,7 +439,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                   {/* Mobile: Direct link with Card */}
                   <MobileCard isActive={isActive}>
                     <Link
-                      to={`${library.to}/latest`}
+                      to="/$libraryId/$version"
+                      params={{ libraryId: library.id, version: 'latest' }}
                       className={twMerge(
                         linkClasses,
                         'md:hidden',
@@ -477,7 +480,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                   </MobileCard>
                   {/* Desktop: Simple link */}
                   <Link
-                    to={`${library.to}/latest`}
+                    to="/$libraryId/$version"
+                    params={{ libraryId: library.id, version: 'latest' }}
                     className={twMerge(
                       linkClasses,
                       'hidden md:flex',

src/components/NotesModerationTopBar.tsx

@@ -1,4 +1,4 @@
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import {
   TopBarFilter,
   FilterChip,
@@ -10,13 +10,13 @@ import { FormInput } from '~/ui'
 
 interface NotesModerationTopBarProps {
   filters: {
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
   }
   onFilterChange: (filters: {
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
@@ -43,7 +43,7 @@ export function NotesModerationTopBar({
     filters.dateTo,
   )
 
-  const getLibraryName = (id: string) =>
+  const getLibraryName = (id: LibraryId) =>
     libraries.find((l) => l.id === id)?.name || id
 
   const formatDateRange = () => {
@@ -89,7 +89,11 @@ export function NotesModerationTopBar({
           <select
             value={filters.libraryId || ''}
             onChange={(e) =>
-              onFilterChange({ libraryId: e.target.value || undefined })
+              onFilterChange({
+                libraryId: (e.target.value || undefined) as
+                  | LibraryId
+                  | undefined,
+              })
             }
             className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           >

src/components/ShowcaseGallery.tsx

@@ -15,6 +15,7 @@ import { Plus } from 'lucide-react'
 import { Button } from '~/ui'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import { useLoginModal } from '~/contexts/LoginModalContext'
+import type { LibraryId } from '~/libraries'
 
 export function ShowcaseGallery() {
   const navigate = useNavigate({ from: '/showcase/' })
@@ -186,13 +187,13 @@ export function ShowcaseGallery() {
     voteMutation.mutate({ showcaseId, value })
   }
 
-  const handleLibraryToggle = (libraryId: string) => {
+  const handleLibraryToggle = (libraryId: LibraryId) => {
     const current = search.libraryIds || []
     const updated = current.includes(libraryId)
-      ? current.filter((id: string) => id !== libraryId)
+      ? current.filter((id) => id !== libraryId)
       : [...current, libraryId]
     navigate({
-      search: (prev: typeof search) => ({
+      search: (prev) => ({
         ...prev,
         libraryIds: updated.length > 0 ? updated : undefined,
         page: 1,

src/components/ShowcaseModerationTopBar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import { SHOWCASE_STATUSES, type ShowcaseStatus } from '~/db/types'
 import {
   TopBarFilter,
@@ -13,12 +13,12 @@ import {
 interface ShowcaseModerationTopBarProps {
   filters: {
     status?: ShowcaseStatus[]
-    libraryId?: string[]
+    libraryId?: LibraryId[]
     isFeatured?: boolean
   }
   onFilterChange: (filters: {
     status?: ShowcaseStatus[]
-    libraryId?: string[]
+    libraryId?: LibraryId[]
     isFeatured?: boolean
   }) => void
 }
@@ -41,7 +41,7 @@ export function ShowcaseModerationTopBar({
     onFilterChange({ status: updated.length > 0 ? updated : undefined })
   }
 
-  const toggleLibrary = (libraryId: string) => {
+  const toggleLibrary = (libraryId: LibraryId) => {
     const current = filters.libraryId || []
     const updated = current.includes(libraryId)
       ? current.filter((l) => l !== libraryId)
@@ -67,7 +67,7 @@ export function ShowcaseModerationTopBar({
     filters.isFeatured !== undefined,
   )
 
-  const getLibraryName = (id: string) =>
+  const getLibraryName = (id: LibraryId) =>
     libraries.find((l) => l.id === id)?.name || id
 
   return (