@tanstack/create 0.68.0 → 0.68.1

package/dist/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/dist/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/dist/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>
   )
 }