@tanstack/create 0.68.0 → 0.68.1

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

@@ -49,68 +49,57 @@ function App() {
   }
 
   if (!todos) {
-    return <DBConnectionError />
+    return (
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-2xl">
+          <DBConnectionError />
+        </section>
+      </main>
+    )
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(circle at 5% 40%, #63F655 0%, #00E0D9 40%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <div className="flex items-center justify-center gap-4 mb-8 bg-black/30 p-4 rounded-lg">
-          <div className="relative">
-            <div className="absolute -inset-1 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000"></div>
-            <div className="relative">
-              <img
-                src="/demo-neon.svg"
-                alt="Neon Logo"
-                className="w-12 h-12 transform hover:scale-110 transition-transform duration-200"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/demo-neon.svg" alt="Neon Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Neon Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-200 to-cyan-200 text-transparent bg-clip-text">
-            Neon Database Demo
-          </h1>
-        </div>
+        </header>
         {todos && (
           <>
-            <h1 className="text-2xl font-bold mb-4">Todos</h1>
+            <h2 className="demo-section-title mb-4">Todos</h2>
             <ul className="space-y-3 mb-6">
               {todos.map((todo: { id: number; title: string }) => (
-                <li
-                  key={todo.id}
-                  className="bg-white/10 backdrop-blur-sm rounded-lg p-4 shadow-sm border border-white/20 transition-all hover:bg-white/20 hover:scale-[1.02] cursor-pointer group"
-                >
+                <li key={todo.id} className="demo-list-item">
                   <div className="flex items-center justify-between">
-                    <span className="text-lg font-medium group-hover:text-white/90">
-                      {todo.title}
-                    </span>
-                    <span className="text-xs text-white/50">#{todo.id}</span>
+                    <span className="font-medium">{todo.title}</span>
+                    <span className="demo-muted text-xs">#{todo.id}</span>
                   </div>
                 </li>
               ))}
             </ul>
-            <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
+            <form
+              onSubmit={handleSubmit}
+              className="mt-4 flex flex-col gap-2 sm:flex-row"
+            >
               <input
                 type="text"
                 name="title"
-                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] bg-black/20"
+                className="demo-input min-w-0 flex-1"
               />
-              <button
-                type="submit"
-                className="px-6 py-2 bg-[#00E0D9] text-black font-medium rounded-md hover:bg-[#00E0D9]/80 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] focus:ring-offset-2 transition-colors disabled:opacity-50 whitespace-nowrap"
-              >
+              <button type="submit" className="demo-button whitespace-nowrap">
                 Add Todo
               </button>
             </form>
           </>
         )}
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -134,31 +123,23 @@ function DBConnectionError() {
         </svg>
       </div>
       <h2 className="text-2xl font-bold mb-4">Database Connection Issue</h2>
-      <div className="text-lg mb-6">The Neon database is not connected.</div>
-      <div className="bg-black/30 p-6 rounded-lg max-w-xl mx-auto">
+      <div className="demo-muted text-lg mb-6">
+        The Neon database is not connected.
+      </div>
+      <div className="demo-card max-w-xl mx-auto text-left">
         <h3 className="text-lg font-semibold mb-4">Required Steps to Fix:</h3>
         <ul className="space-y-4 text-left list-none">
           <li className="flex items-start">
-            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
-              1
-            </span>
+            <span className="demo-pill mr-3 min-w-8 justify-center">1</span>
             <div>
-              Use the{' '}
-              <code className="bg-black/30 px-2 py-1 rounded">db/init.sql</code>{' '}
-              file to create the database
+              Use the <code>db/init.sql</code> file to create the database
             </div>
           </li>
           <li className="flex items-start">
-            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
-              2
-            </span>
+            <span className="demo-pill mr-3 min-w-8 justify-center">2</span>
             <div>
-              Set the{' '}
-              <code className="bg-black/30 px-2 py-1 rounded">
-                DATABASE_URL
-              </code>{' '}
-              environment variable to the connection string of your Neon
-              database
+              Set the <code>DATABASE_URL</code> environment variable to the
+              connection string of your Neon database
             </div>
           </li>
         </ul>

package/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx

@@ -36,22 +36,14 @@ function ORPCTodos() {
   }, [addTodo, todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 50% 50%, #D2149D 0%, #8E1066 50%, #2D0A1F 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">oRPC Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">oRPC</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {data?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.name}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.name}</span>
             </li>
           ))}
         </ul>
@@ -66,17 +58,17 @@ function ORPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs

@@ -9,16 +9,15 @@ export const Route = createFileRoute("/demo/i18n")({
 
 function App() {
   return (
-    <div className="text-center">
-      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] gap-4">
+    <main className="demo-page demo-center text-center">
+      <section className="demo-panel flex w-full max-w-2xl flex-col items-center gap-4">
         <img
           src={logo}
-          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          className="pointer-events-none h-28 animate-[spin_20s_linear_infinite]"
           alt="logo"
         />
-        <p>{m.example_message({ username: "TanStack Router" })}</p>
+        <p className="demo-muted text-lg">{m.example_message({ username: "TanStack Router" })}</p>
         <a
-          className="text-[#61dafb] hover:underline"
           href="https://inlang.com/m/gerre34r/library-inlang-paraglideJs"
           target="_blank"
           rel="noopener noreferrer"
@@ -28,7 +27,7 @@ function App() {
         <div className="mt-3">
           <LocaleSwitcher />
         </div>
-      </header>
-    </div>
+      </section>
+    </main>
   );
 }

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

@@ -21,61 +21,60 @@ function PostHogDemo() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-8">
-      <div className="max-w-md mx-auto">
-        <h1 className="text-3xl font-bold mb-6">PostHog Demo</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md">
+        <p className="island-kicker mb-2">Analytics</p>
+        <h1 className="demo-title mb-6">PostHog Demo</h1>
 
         {!isConfigured && (
-          <div className="mb-4 p-4 bg-yellow-900/50 border border-yellow-600 rounded-lg">
-            <p className="text-yellow-200 text-sm">
+          <div className="demo-alert mb-4">
+            <p className="text-sm">
               <strong>Warning:</strong> VITE_POSTHOG_KEY is not configured.
-              Events won't be sent to PostHog. Add it to your{' '}
-              <code className="bg-yellow-900 px-1 rounded">.env</code> file.
+              Events won't be sent to PostHog. Add it to your <code>.env</code>{' '}
+              file.
             </p>
           </div>
         )}
 
-        <div className="bg-gray-800 rounded-lg p-6">
-          <p className="text-gray-400 mb-4">
+        <div className="demo-card">
+          <p className="demo-muted mb-4">
             Click the button below to send events to PostHog. Check your PostHog
             dashboard to see them appear in real-time.
           </p>
 
           <button
             onClick={() => trackEvent('button_clicked', { button: 'demo' })}
-            className="w-full bg-cyan-600 hover:bg-cyan-700 px-4 py-3 rounded font-medium"
+            className="demo-button w-full"
           >
             Track Click
           </button>
 
           {isConfigured && (
-            <div className="mt-6 p-4 bg-gray-700 rounded">
-              <p className="text-sm text-gray-400">Events sent this session:</p>
-              <p className="text-4xl font-bold text-cyan-400">{eventCount}</p>
+            <div className="demo-list-item mt-6">
+              <p className="demo-muted text-sm">Events sent this session:</p>
+              <p className="text-4xl font-bold">{eventCount}</p>
             </div>
           )}
         </div>
 
-        <p className="mt-4 text-sm text-gray-400">
+        <p className="demo-muted mt-4 text-sm">
           Open your{' '}
           <a
             href="https://app.posthog.com/events"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-cyan-400 hover:text-cyan-300 underline"
           >
             PostHog Events
           </a>{' '}
           page to see these events appear.
         </p>
 
-        <p className="mt-2 text-sm text-gray-400">
+        <p className="demo-muted mt-2 text-sm">
           Learn more in the{' '}
           <a
             href="https://posthog.com/docs/libraries/react"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-cyan-400 hover:text-cyan-300 underline"
           >
             PostHog React docs
           </a>
@@ -83,11 +82,9 @@ function PostHogDemo() {
         </p>
 
         <div className="mt-8">
-          <Link to="/" className="text-cyan-400 hover:text-cyan-300">
-            &larr; Back to Home
-          </Link>
+          <Link to="/">&larr; Back to Home</Link>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

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

@@ -54,21 +54,22 @@ function PowerSyncDemo() {
           </p>
           <h1 className="text-3xl font-semibold tracking-tight">PowerSync</h1>
           <p className="text-sm text-[var(--sea-ink-soft)]">
-            This demo writes to the local SQLite database immediately. Replace the sample
-            schema and backend connector with your real PowerSync configuration.
+            This demo writes to the local SQLite database immediately. Replace
+            the sample schema and backend connector with your real PowerSync
+            configuration.
           </p>
         </header>
 
-        <section className="rounded-3xl border border-[var(--line)] bg-white/70 p-5 shadow-sm">
+        <section className="demo-card">
           <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--sea-ink-soft)]">
             Connection State
           </h2>
-          <pre className="mt-3 overflow-auto rounded-2xl bg-[var(--chip-bg)] p-4 text-xs leading-6 text-[var(--sea-ink)]">
+          <pre className="demo-code-block mt-3 overflow-auto text-xs leading-6">
             {JSON.stringify(status, null, 2)}
           </pre>
         </section>
 
-        <section className="rounded-3xl border border-[var(--line)] bg-white/70 p-5 shadow-sm">
+        <section className="demo-card">
           <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--sea-ink-soft)]">
             Local Todos
           </h2>
@@ -77,39 +78,39 @@ function PowerSyncDemo() {
               {error}
             </p>
           ) : null}
-          <form className="mt-4 flex flex-col gap-3 sm:flex-row" onSubmit={addTodo}>
+          <form
+            className="mt-4 flex flex-col gap-3 sm:flex-row"
+            onSubmit={addTodo}
+          >
             <label className="sr-only" htmlFor="powersync-todo-description">
               Todo description
             </label>
             <input
               id="powersync-todo-description"
-              className="min-w-0 flex-1 rounded-2xl border border-[var(--line)] bg-white px-4 py-3 text-sm text-[var(--sea-ink)] outline-none"
+              className="demo-input min-w-0 flex-1"
               onChange={(event) => setDescription(event.target.value)}
               placeholder="Write to the local PowerSync database"
               value={description}
             />
-            <button
-              className="rounded-2xl bg-[var(--sea-ink)] px-4 py-3 text-sm font-semibold text-white"
-              type="submit"
-            >
+            <button className="demo-button" type="submit">
               Insert Local Row
             </button>
           </form>
 
           <ul className="mt-5 space-y-3">
             {todos.length === 0 ? (
-              <li className="rounded-2xl border border-dashed border-[var(--line)] px-4 py-5 text-sm text-[var(--sea-ink-soft)]">
-                No rows yet. Insert one locally, then wire `uploadData()` to send it upstream.
+              <li className="demo-list-item text-sm text-[var(--sea-ink-soft)]">
+                No rows yet. Insert one locally, then wire `uploadData()` to
+                send it upstream.
               </li>
             ) : (
               todos.map((todo) => (
-                <li
-                  className="rounded-2xl border border-[var(--line)] bg-[var(--chip-bg)] px-4 py-4"
-                  key={todo.id}
-                >
+                <li className="demo-list-item" key={todo.id}>
                   <div className="flex items-start justify-between gap-4">
                     <div>
-                      <p className="font-medium text-[var(--sea-ink)]">{todo.description}</p>
+                      <p className="font-medium text-[var(--sea-ink)]">
+                        {todo.description}
+                      </p>
                       <p className="mt-1 text-xs text-[var(--sea-ink-soft)]">
                         {todo.created_at}
                       </p>

package/src/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs

@@ -46,141 +46,91 @@ function DemoPrisma() {
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen p-4 text-white"
-      style={{
-        background:
-          'linear-gradient(135deg, #0c1a2b 0%, #1a2332 50%, #16202e 100%)',
-      }}
-    >
-      <div
-        className="w-full max-w-2xl p-8 rounded-xl shadow-2xl border border-white/10"
-        style={{
-          background:
-            'linear-gradient(135deg, rgba(22, 32, 46, 0.95) 0%, rgba(12, 26, 43, 0.95) 100%)',
-          backdropFilter: 'blur(10px)',
-        }}
-      >
-        <div
-          className="flex items-center justify-center gap-4 mb-8 p-4 rounded-lg"
-          style={{
-            background:
-              'linear-gradient(90deg, rgba(93, 103, 227, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
-            border: '1px solid rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <div className="relative group">
-            <div className="absolute -inset-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 rounded-lg blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
-            <div className="relative bg-gradient-to-br from-indigo-600 to-purple-600 p-3 rounded-lg">
-              <img
-                src="/prisma.svg"
-                alt="Prisma Logo"
-                className="w-8 h-8 transform group-hover:scale-110 transition-transform duration-300"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/prisma.svg" alt="Prisma Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Prisma Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-300 via-purple-300 to-indigo-300 text-transparent bg-clip-text">
-            Prisma Database Demo
-          </h1>
-        </div>
+        </header>
 
-        <h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
+        <h2 className="demo-section-title mb-4">Todos</h2>
 
         <ul className="space-y-3 mb-6">
           {todos.map((todo) => (
             <li
               key={todo.id}
-              className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
-              style={{
-                background:
-                  'linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)',
-                borderColor: 'rgba(93, 103, 227, 0.3)',
-              }}
+              className="demo-list-item"
             >
               <div className="flex items-center justify-between">
-                <span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
-                  {todo.title}
-                </span>
-                <span className="text-xs text-indigo-300/70">#{todo.id}</span>
+                <span className="font-medium">{todo.title}</span>
+                <span className="demo-muted text-xs">#{todo.id}</span>
               </div>
             </li>
           ))}
           {todos.length === 0 && (
-            <li className="text-center py-8 text-indigo-300/70">
+            <li className="demo-list-item text-center demo-muted">
               No todos yet. Create one below!
             </li>
           )}
         </ul>
 
-        <form onSubmit={handleSubmit} className="flex gap-2">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:flex-row">
           <input
             type="text"
             name="title"
             placeholder="Add a new todo..."
-            className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
-            style={{
-              background: 'rgba(93, 103, 227, 0.1)',
-              borderColor: 'rgba(93, 103, 227, 0.3)',
-              focusRing: 'rgba(93, 103, 227, 0.5)',
-            }}
+            className="demo-input min-w-0 flex-1"
           />
           <button
             type="submit"
-            className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
-            style={{
-              background: 'linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)',
-              color: 'white',
-            }}
+            className="demo-button whitespace-nowrap"
           >
             Add Todo
           </button>
         </form>
 
-        <div
-          className="mt-8 p-6 rounded-lg border"
-          style={{
-            background: 'rgba(93, 103, 227, 0.05)',
-            borderColor: 'rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-2 text-indigo-200">
+        <div className="demo-card mt-8">
+          <h3 className="demo-section-title mb-2">
             Powered by Prisma ORM
           </h3>
-          <p className="text-sm text-indigo-300/80 mb-4">
+          <p className="demo-muted mb-4 text-sm">
             Next-generation ORM for Node.js & TypeScript with PostgreSQL
           </p>
           <div className="space-y-2 text-sm">
-            <p className="text-indigo-200 font-medium">Setup Instructions:</p>
-            <ol className="list-decimal list-inside space-y-2 text-indigo-300/80">
+            <p className="font-medium">Setup Instructions:</p>
+            <ol className="demo-muted list-inside list-decimal space-y-2">
               <li>
                 Configure your{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  DATABASE_URL
-                </code>{' '}
+                <code>DATABASE_URL</code>{' '}
                 in .env.local
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('prisma', ['generate']) %>
                 </code>
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('prisma', ['db', 'push']) %>
                 </code>
               </li>
               <li>
                 Optional:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('prisma', ['studio']) %>
                 </code>
               </li>
             </ol>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }