@tanstack/create 0.68.0 → 0.68.1

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx

@@ -8,48 +8,42 @@ export const Route = createFileRoute('/demo/guitars/')({
 
 function GuitarsIndex() {
   return (
-    <div className="bg-black text-white p-5">
-      <h1 className="text-3xl font-bold mb-8 text-center">Featured Guitars</h1>
-      <div className="flex flex-wrap gap-12 justify-center">
+    <main className="demo-page demo-page-wide">
+      <h1 className="demo-title mb-8 text-center">Featured Guitars</h1>
+      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
         {guitars.map((guitar) => (
-          <div
-            key={guitar.id}
-            className="w-full md:w-[calc(50%-1.5rem)] xl:w-[calc(33.333%-2rem)] relative mb-24"
-          >
+          <div key={guitar.id}>
             <Link
-              to="/example/guitars/$guitarId"
+              to="/demo/guitars/$guitarId"
               params={{
                 guitarId: guitar.id.toString(),
               }}
+              className="block no-underline"
             >
-              <div className="relative z-0 w-full aspect-square mb-8">
-                <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
+              <article className="demo-card h-full overflow-hidden p-0 transition hover:-translate-y-0.5">
+                <div className="aspect-square overflow-hidden">
                   <img
                     src={guitar.image}
                     alt={guitar.name}
-                    className="w-full h-full object-cover guitar-image group-hover:scale-105 transition-transform duration-500"
+                    className="guitar-image h-full w-full object-cover transition-transform duration-500 hover:scale-105"
                   />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                 </div>
-
-                <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-emerald-500/80 text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-sm">
-                  View Details
-                </div>
-              </div>
-
-              <div className="absolute bottom-0 right-0 z-10 w-[80%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-5 border border-gray-800/50 shadow-xl transform translate-y-[40%]">
-                <h2 className="text-xl font-bold mb-2">{guitar.name}</h2>
-                <p className="text-gray-300 mb-3 line-clamp-2">
-                  {guitar.shortDescription}
-                </p>
-                <div className="text-xl font-bold text-emerald-400">
-                  ${guitar.price}
+                <div className="p-5">
+                  <h2 className="mb-2 text-xl font-bold text-[var(--sea-ink)]">
+                    {guitar.name}
+                  </h2>
+                  <p className="demo-muted mb-3 line-clamp-2">
+                    {guitar.shortDescription}
+                  </p>
+                  <div className="text-xl font-bold text-[var(--lagoon-deep)]">
+                    ${guitar.price}
+                  </div>
                 </div>
-              </div>
+              </article>
             </Link>
           </div>
         ))}
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx

@@ -33,43 +33,40 @@ function RouteComponent() {
   const { data } = useReadQuery(queryRef)
 
   return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Apollo Client Demo</h2>
-      <div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
-        <p className="font-bold">Apollo Client is configured!</p>
-        <p className="text-sm mt-2">
-          This demo uses{' '}
-          <code className="bg-blue-200 px-1 rounded">preloadQuery</code> in the
-          loader and{' '}
-          <code className="bg-blue-200 px-1 rounded">useReadQuery</code> in the
-          component for optimal streaming SSR performance.
-        </p>
-      </div>
-      <div className="bg-gray-100 p-4 rounded">
-        <h3 className="font-bold mb-2">Query Result:</h3>
-        <pre className="text-sm overflow-x-auto">
-          {JSON.stringify(data, null, 2)}
-        </pre>
-      </div>
-      <div className="mt-4 text-sm text-gray-600">
-        <p>📝 Next steps:</p>
-        <ul className="list-disc ml-6 mt-2">
-          <li>
-            Configure your GraphQL endpoint in{' '}
-            <code className="bg-gray-200 px-1 rounded">src/router.tsx</code>
-          </li>
-          <li>Replace the example query with your actual GraphQL schema</li>
-          <li>
-            Learn more:{' '}
-            <a
-              href="https://www.apollographql.com/docs/react"
-              className="text-blue-600 hover:underline"
-            >
-              Apollo Client Docs
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <main className="demo-page">
+      <section className="demo-panel">
+        <p className="island-kicker mb-2">GraphQL</p>
+        <h1 className="demo-title mb-6">Apollo Client Demo</h1>
+        <div className="demo-alert mb-4">
+          <p className="font-bold">Apollo Client is configured!</p>
+          <p className="text-sm mt-2">
+            This demo uses <code>preloadQuery</code> in the loader and{' '}
+            <code>useReadQuery</code> in the component for optimal streaming SSR
+            performance.
+          </p>
+        </div>
+        <div className="demo-code-block">
+          <h3 className="font-bold mb-2">Query Result:</h3>
+          <pre className="text-sm overflow-x-auto">
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </div>
+        <div className="demo-muted mt-4 text-sm">
+          <p className="font-medium text-[var(--sea-ink)]">Next steps:</p>
+          <ul className="list-disc ml-6 mt-2">
+            <li>
+              Configure your GraphQL endpoint in <code>src/router.tsx</code>
+            </li>
+            <li>Replace the example query with your actual GraphQL schema</li>
+            <li>
+              Learn more:{' '}
+              <a href="https://www.apollographql.com/docs/react">
+                Apollo Client Docs
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </main>
   )
 }

package/src/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/src/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>