@tanstack/create 0.67.0 → 0.68.1

package/dist/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx

@@ -1,37 +1,36 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-import { authClient } from "#/lib/auth-client";
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { authClient } from '#/lib/auth-client'
 
-export const Route = createFileRoute("/demo/better-auth")({
+export const Route = createFileRoute('/demo/better-auth')({
   component: BetterAuthDemo,
-});
+})
 
 function BetterAuthDemo() {
-  const { data: session, isPending } = authClient.useSession();
-  const [isSignUp, setIsSignUp] = useState(false);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
+  const { data: session, isPending } = authClient.useSession()
+  const [isSignUp, setIsSignUp] = useState(false)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [name, setName] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
 
   if (isPending) {
     return (
-      <div className="flex items-center justify-center py-10">
+      <main className="demo-page demo-center">
         <div className="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
-      </div>
-    );
+      </main>
+    )
   }
 
   if (session?.user) {
     return (
-      <div className="flex justify-center py-10 px-4">
-        <div className="w-full max-w-md p-6 space-y-6">
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-md space-y-6">
           <div className="space-y-1.5">
-            <h1 className="text-lg font-semibold leading-none tracking-tight">
-              Welcome back
-            </h1>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            <p className="island-kicker mb-2">Better Auth</p>
+            <h1 className="demo-title">Welcome back</h1>
+            <p className="demo-muted text-sm">
               You're signed in as {session.user.email}
             </p>
           </div>
@@ -42,7 +41,7 @@ function BetterAuthDemo() {
             ) : (
               <div className="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
                 <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
-                  {session.user.name?.charAt(0).toUpperCase() || "U"}
+                  {session.user.name?.charAt(0).toUpperCase() || 'U'}
                 </span>
               </div>
             )}
@@ -60,32 +59,32 @@ function BetterAuthDemo() {
             onClick={() => {
               void authClient.signOut()
             }}
-            className="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+            className="demo-button demo-button-secondary w-full"
           >
             Sign out
           </button>
 
-          <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
-            Built with{" "}
+          <p className="demo-muted text-center text-xs">
+            Built with{' '}
             <a
               href="https://better-auth.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+              className="font-medium"
             >
               BETTER-AUTH
             </a>
             .
           </p>
-        </div>
-      </div>
-    );
+        </section>
+      </main>
+    )
   }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
 
     try {
       if (isSignUp) {
@@ -93,36 +92,37 @@ function BetterAuthDemo() {
           email,
           password,
           name,
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign up failed");
+          setError(result.error.message || 'Sign up failed')
         }
       } else {
         const result = await authClient.signIn.email({
           email,
           password,
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign in failed");
+          setError(result.error.message || 'Sign in failed')
         }
       }
     } catch (err) {
-      setError("An unexpected error occurred");
+      setError('An unexpected error occurred')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   return (
-    <div className="flex justify-center py-10 px-4">
-      <div className="w-full max-w-md p-6">
-        <h1 className="text-lg font-semibold leading-none tracking-tight">
-          {isSignUp ? "Create an account" : "Sign in"}
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md">
+        <p className="island-kicker mb-2">Better Auth</p>
+        <h1 className="demo-title">
+          {isSignUp ? 'Create an account' : 'Sign in'}
         </h1>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+        <p className="demo-muted mt-2 mb-6 text-sm">
           {isSignUp
-            ? "Enter your information to create an account"
-            : "Enter your email below to login to your account"}
+            ? 'Enter your information to create an account'
+            : 'Enter your email below to login to your account'}
         </p>
 
         <form onSubmit={handleSubmit} className="grid gap-4">
@@ -139,7 +139,7 @@ function BetterAuthDemo() {
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                className="demo-input"
                 required
               />
             </div>
@@ -154,7 +154,7 @@ function BetterAuthDemo() {
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              className="demo-input"
               required
             />
           </div>
@@ -171,22 +171,22 @@ function BetterAuthDemo() {
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              className="demo-input"
               required
               minLength={8}
             />
           </div>
 
           {error && (
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            <div className="demo-alert demo-alert-danger">
+              <p className="text-sm text-red-600">{error}</p>
             </div>
           )}
 
           <button
             type="submit"
             disabled={loading}
-            className="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="demo-button w-full"
           >
             {loading ? (
               <span className="flex items-center justify-center gap-2">
@@ -194,9 +194,9 @@ function BetterAuthDemo() {
                 <span>Please wait</span>
               </span>
             ) : isSignUp ? (
-              "Create account"
+              'Create account'
             ) : (
-              "Sign in"
+              'Sign in'
             )}
           </button>
         </form>
@@ -205,30 +205,30 @@ function BetterAuthDemo() {
           <button
             type="button"
             onClick={() => {
-              setIsSignUp(!isSignUp);
-              setError("");
+              setIsSignUp(!isSignUp)
+              setError('')
             }}
-            className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+            className="demo-muted text-sm transition-colors hover:text-[var(--sea-ink)]"
           >
             {isSignUp
-              ? "Already have an account? Sign in"
+              ? 'Already have an account? Sign in'
               : "Don't have an account? Sign up"}
           </button>
         </div>
 
-        <p className="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
-          Built with{" "}
+        <p className="demo-muted mt-6 text-center text-xs">
+          Built with{' '}
           <a
             href="https://better-auth.com"
             target="_blank"
             rel="noopener noreferrer"
-            className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+            className="font-medium"
           >
             BETTER-AUTH
           </a>
           .
         </p>
-      </div>
-    </div>
-  );
+      </section>
+    </main>
+  )
 }

package/dist/frameworks/react/add-ons/clerk/assets/src/routes/demo/clerk.tsx

@@ -1,10 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import {
-  SignIn,
-  SignedIn,
-  SignedOut,
-  useUser,
-} from '@clerk/clerk-react'
+import { SignIn, SignedIn, SignedOut, useUser } from '@clerk/clerk-react'
 
 export const Route = createFileRoute('/demo/clerk')({
   component: ClerkDemo,
@@ -12,27 +7,27 @@ export const Route = createFileRoute('/demo/clerk')({
 
 function ClerkDemo() {
   return (
-    <div className="flex justify-center py-10 px-4">
-      <div className="w-full max-w-md p-6 space-y-6">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md space-y-6">
         <SignedOut>
           <div className="space-y-1.5">
-            <h1 className="text-lg font-semibold leading-none tracking-tight">
-              Sign in to continue
-            </h1>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">
-              Clerk renders the sign-in UI, manages sessions, and handles social providers for you.
+            <p className="island-kicker mb-2">Clerk</p>
+            <h1 className="demo-title">Sign in to continue</h1>
+            <p className="demo-muted text-sm">
+              Clerk renders the sign-in UI, manages sessions, and handles social
+              providers for you.
             </p>
           </div>
           <div className="flex justify-center pt-2">
             <SignIn routing="hash" />
           </div>
-          <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
+          <p className="demo-muted text-center text-xs">
             Built with{' '}
             <a
               href="https://clerk.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+              className="font-medium"
             >
               CLERK
             </a>
@@ -43,8 +38,8 @@ function ClerkDemo() {
         <SignedIn>
           <SignedInGreeting />
         </SignedIn>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -58,12 +53,9 @@ function SignedInGreeting() {
   return (
     <div className="space-y-6">
       <div className="space-y-1.5">
-        <h1 className="text-lg font-semibold leading-none tracking-tight">
-          Welcome back
-        </h1>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
-          You're signed in as {email}
-        </p>
+        <p className="island-kicker mb-2">Clerk</p>
+        <h1 className="demo-title">Welcome back</h1>
+        <p className="demo-muted text-sm">You're signed in as {email}</p>
       </div>
 
       <div className="flex items-center gap-3">
@@ -86,13 +78,13 @@ function SignedInGreeting() {
         </div>
       </div>
 
-      <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
+      <p className="demo-muted text-center text-xs">
         Manage your account from the avatar in the header. Built with{' '}
         <a
           href="https://clerk.com"
           target="_blank"
           rel="noopener noreferrer"
-          className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+          className="font-medium"
         >
           CLERK
         </a>

package/dist/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -44,36 +44,25 @@ function ConvexTodos() {
   const totalCount = todos?.length || 0
 
   return (
-    <div
-      className="min-h-screen flex items-center justify-center p-4"
-      style={{
-        background:
-          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl">
-        {/* Header Card */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+    <main className="demo-page">
+      <div className="mx-auto w-full max-w-2xl space-y-6">
+        <section className="demo-panel">
           <div className="text-center">
-            <h1 className="text-4xl font-bold text-green-800 mb-2">
-              Convex Todos
-            </h1>
-            <p className="text-green-600 text-lg">Powered by real-time sync</p>
+            <p className="island-kicker mb-2">Convex</p>
+            <h1 className="demo-title">Todos</h1>
+            <p className="demo-muted mt-2">Powered by real-time sync</p>
             {totalCount > 0 && (
               <div className="mt-4 flex justify-center space-x-6 text-sm">
-                <span className="text-green-700 font-medium">
-                  {completedCount} completed
-                </span>
-                <span className="text-gray-600">
+                <span className="font-medium">{completedCount} completed</span>
+                <span className="demo-muted">
                   {totalCount - completedCount} remaining
                 </span>
               </div>
             )}
           </div>
-        </div>
+        </section>
 
-        {/* Add Todo Card */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+        <section className="demo-card">
           <div className="flex gap-3">
             <input
               type="text"
@@ -85,42 +74,39 @@ function ConvexTodos() {
                 }
               }}
               placeholder="What needs to be done?"
-              className="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+              className="demo-input min-w-0 flex-1"
             />
             <button
               onClick={handleAddTodo}
               disabled={!newTodo.trim()}
-              className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+              className="demo-button"
             >
               <Plus size={20} />
               Add
             </button>
           </div>
-        </div>
+        </section>
 
-        {/* Todos List */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+        <section className="demo-card overflow-hidden p-0">
           {!todos ? (
             <div className="p-8 text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
-              <p className="text-green-600">Loading todos...</p>
+              <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--lagoon-deep)]"></div>
+              <p className="demo-muted">Loading todos...</p>
             </div>
           ) : todos.length === 0 ? (
             <div className="p-12 text-center">
-              <Circle size={48} className="text-green-300 mx-auto mb-4" />
-              <h3 className="text-xl font-semibold text-green-800 mb-2">
-                No todos yet
-              </h3>
-              <p className="text-green-600">
+              <Circle size={48} className="demo-muted mx-auto mb-4" />
+              <h3 className="demo-section-title mb-2">No todos yet</h3>
+              <p className="demo-muted">
                 Add your first todo above to get started!
               </p>
             </div>
           ) : (
-            <div className="divide-y divide-green-100">
+            <div className="divide-y divide-[var(--line)]">
               {todos.map((todo, index) => (
                 <div
                   key={todo._id}
-                  className={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                  className={`p-4 flex items-center gap-4 transition-colors hover:bg-[var(--link-bg-hover)] ${
                     todo.completed ? 'opacity-75' : ''
                   }`}
                   style={{
@@ -131,8 +117,8 @@ function ConvexTodos() {
                     onClick={() => handleToggleTodo(todo._id)}
                     className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
                       todo.completed
-                        ? 'bg-green-500 border-green-500 text-white'
-                        : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                        ? 'border-[var(--lagoon-deep)] bg-[var(--lagoon)] text-[var(--sea-ink)]'
+                        : 'border-[var(--line)] text-transparent hover:border-[var(--lagoon-deep)] hover:text-[var(--lagoon-deep)]'
                     }`}
                   >
                     <Check size={14} />
@@ -141,8 +127,8 @@ function ConvexTodos() {
                   <span
                     className={`flex-1 text-lg transition-all duration-200 ${
                       todo.completed
-                        ? 'line-through text-gray-500'
-                        : 'text-gray-800'
+                        ? 'line-through demo-muted'
+                        : 'text-[var(--sea-ink)]'
                     }`}
                   >
                     {todo.text}
@@ -150,7 +136,7 @@ function ConvexTodos() {
 
                   <button
                     onClick={() => handleRemoveTodo(todo._id)}
-                    className="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    className="demo-button demo-button-danger flex-shrink-0 p-2"
                   >
                     <Trash2 size={18} />
                   </button>
@@ -158,15 +144,14 @@ function ConvexTodos() {
               ))}
             </div>
           )}
-        </div>
+        </section>
 
-        {/* Footer */}
         <div className="text-center mt-6">
-          <p className="text-green-700/80 text-sm">
-            Built with Convex • Real-time updates • Always in sync
+          <p className="demo-muted text-sm">
+            Built with Convex, real-time updates, and synced state.
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }

package/dist/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -27,16 +27,16 @@ export default function ChatArea() {
 
   return (
     <>
-      <div className="px-4 py-6 space-y-4">
+      <div className="flex-1 space-y-4 overflow-auto px-4 py-6">
         <Messages messages={messages} user={user} />
       </div>
 
-      <div className="bg-white border-t border-gray-200 px-4 py-4">
+      <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-4 py-4">
         <div className="flex items-center space-x-3">
           <select
             value={user}
             onChange={(e) => setUser(e.target.value)}
-            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="demo-select demo-input-fit text-sm"
           >
             <option value="Alice">Alice</option>
             <option value="Bob">Bob</option>
@@ -49,14 +49,14 @@ export default function ChatArea() {
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={handleKeyPress}
               placeholder="Type a message..."
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="demo-input"
             />
           </div>
 
           <button
             onClick={postMessage}
             disabled={message.trim() === ''}
-            className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="demo-button"
           >
             Send
           </button>

package/dist/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx

@@ -2,14 +2,10 @@ import type { Message } from '#/db-collections'
 
 export const getAvatarColor = (username: string) => {
   const colors = [
-    'bg-blue-500',
-    'bg-green-500',
-    'bg-purple-500',
-    'bg-pink-500',
-    'bg-indigo-500',
-    'bg-red-500',
-    'bg-yellow-500',
-    'bg-teal-500',
+    'bg-[var(--lagoon-deep)]',
+    'bg-[var(--palm)]',
+    'bg-[var(--sea-ink-soft)]',
+    'bg-[var(--lagoon)]',
   ]
   const index = username
     .split('')
@@ -49,12 +45,12 @@ export default function Messages({
             <div
               className={`px-4 py-2 rounded-2xl ${
                 msg.user === user
-                  ? 'bg-blue-500 text-white rounded-br-md'
-                  : 'bg-white text-gray-800 border border-gray-200 rounded-bl-md'
+                  ? 'bg-[var(--lagoon-deep)] text-white rounded-br-md'
+                  : 'border border-[var(--line)] bg-[var(--chip-bg)] text-[var(--sea-ink)] rounded-bl-md'
               }`}
             >
               {msg.user !== user && (
-                <p className="text-xs text-gray-500 mb-1 font-medium">
+                <p className="demo-muted mb-1 text-xs font-medium">
                   {msg.user}
                 </p>
               )}

package/dist/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx

@@ -8,8 +8,10 @@ export const Route = createFileRoute('/demo/db-chat')({
 
 function App() {
   return (
-    <div className="flex flex-col h-screen bg-gray-50">
-      <ChatArea />
-    </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel flex h-[70vh] w-full max-w-3xl flex-col overflow-hidden p-0">
+        <ChatArea />
+      </section>
+    </main>
   )
 }