@tanstack/create 0.68.0 → 0.68.2

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

@@ -37,22 +37,14 @@ function TanStackQueryDemo() {
   }, [addTodo, todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-900 via-red-800 to-black p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 80% 20%, #3B021F 0%, #7B1028 60%, #1A000A 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">TanStack Query Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">TanStack Query</p>
+        <h1 className="demo-title mb-6">TanStack Query 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>
@@ -67,18 +59,18 @@ function TanStackQueryDemo() {
               }
             }}
             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>
   )
 }
 <% } else {
@@ -104,27 +96,21 @@ function TanStackQueryDemo() {
   })
 
   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 95% 5%, #f4a460 0%, #8b4513 70%, #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">
-        <h1 className="text-2xl mb-4">TanStack Query Simple Promise Handling</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">TanStack Query</p>
+        <h1 className="demo-title mb-6">
+          TanStack Query Simple Promise Handling
+        </h1>
         <ul className="mb-4 space-y-2">
           {data.map((todo) => (
-            <li
-              key={todo.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{todo.name}</span>
+            <li key={todo.id} className="demo-list-item">
+              <span className="text-base font-medium">{todo.name}</span>
             </li>
           ))}
         </ul>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -135,4 +121,4 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-<% } %>
+<% } %>

package/src/frameworks/react/add-ons/workos/assets/src/components/workos-user.tsx

@@ -5,7 +5,7 @@ export default function SignInButton({ large }: { large?: boolean }) {
 
   const buttonClasses = `${
     large ? 'px-6 py-3 text-base' : 'px-4 py-2 text-sm'
-  } bg-blue-600 hover:bg-blue-700 text-white font-medium rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed`
+  } demo-button disabled:opacity-50 disabled:cursor-not-allowed`
 
   if (user) {
     return (

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

@@ -11,99 +11,89 @@ function App() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-        <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700/50">
-          <p className="text-gray-400 text-center">Loading...</p>
-        </div>
-      </div>
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-md">
+          <p className="demo-muted text-center">Loading...</p>
+        </section>
+      </main>
     )
   }
 
   if (user) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-        <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700/50">
-          <h1 className="text-2xl font-bold text-white mb-6 text-center">
-            User Profile
-          </h1>
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-md">
+          <p className="island-kicker mb-2 text-center">WorkOS</p>
+          <h1 className="demo-title mb-6 text-center">User Profile</h1>
 
           <div className="space-y-6">
-            {/* Profile Picture */}
             {user.profilePictureUrl && (
               <div className="flex justify-center">
                 <img
                   src={user.profilePictureUrl}
                   alt={`Avatar of ${user.firstName} ${user.lastName}`}
-                  className="w-24 h-24 rounded-full border-4 border-gray-700 shadow-lg"
+                  className="h-24 w-24 rounded-full border border-[var(--line)] shadow-lg"
                 />
               </div>
             )}
 
-            {/* User Information */}
             <div className="space-y-4">
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   First Name
                 </label>
-                <p className="text-white text-lg">{user.firstName || 'N/A'}</p>
+                <p className="text-lg">{user.firstName || 'N/A'}</p>
               </div>
 
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   Last Name
                 </label>
-                <p className="text-white text-lg">{user.lastName || 'N/A'}</p>
+                <p className="text-lg">{user.lastName || 'N/A'}</p>
               </div>
 
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   Email
                 </label>
-                <p className="text-white text-lg break-all">
-                  {user.email || 'N/A'}
-                </p>
+                <p className="break-all text-lg">{user.email || 'N/A'}</p>
               </div>
 
-              <div className="bg-gray-700/30 rounded-lg p-4 border border-gray-600/30">
-                <label className="text-gray-400 text-sm font-medium block mb-1">
+              <div className="demo-list-item">
+                <label className="demo-muted block text-sm font-medium mb-1">
                   User ID
                 </label>
-                <p className="text-gray-300 text-sm font-mono break-all">
+                <p className="demo-muted break-all font-mono text-sm">
                   {user.id || 'N/A'}
                 </p>
               </div>
             </div>
 
-            {/* Sign Out Button */}
-            <button
-              onClick={() => signOut()}
-              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg hover:shadow-xl"
-            >
+            <button onClick={() => signOut()} className="demo-button w-full">
               Sign Out
             </button>
           </div>
-        </div>
-      </div>
+        </section>
+      </main>
     )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-      <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700/50">
-        <h1 className="text-2xl font-bold text-white mb-6 text-center">
-          WorkOS Authentication
-        </h1>
-        <p className="text-gray-400 text-center mb-6">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-md">
+        <p className="island-kicker mb-2 text-center">WorkOS</p>
+        <h1 className="demo-title mb-6 text-center">WorkOS Authentication</h1>
+        <p className="demo-muted text-center mb-6">
           Sign in to view your profile information
         </p>
         <button
           onClick={() => signIn()}
           disabled={isLoading}
-          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button w-full"
         >
           Sign In with AuthKit
         </button>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

package/src/frameworks/react/project/base/package.json

@@ -7,6 +7,7 @@
   },
   "scripts": {
     "dev": "vite dev --port 3000",
+    "generate-routes": "tsr generate",
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest run"

package/src/frameworks/react/project/base/src/styles.css.ejs

@@ -203,6 +203,209 @@ pre code {
   border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
 }
 
+.demo-page {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+  padding-block: clamp(2.25rem, 6vw, 4.5rem);
+  color: var(--sea-ink);
+}
+
+.demo-page-wide {
+  width: min(1280px, calc(100% - 2rem));
+}
+
+.demo-center {
+  min-height: calc(100vh - 13rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-panel,
+.demo-card {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 18px 34px rgba(30, 90, 72, 0.1),
+    0 4px 14px rgba(23, 58, 64, 0.06);
+  backdrop-filter: blur(4px);
+}
+
+.demo-panel {
+  border-radius: 1.25rem;
+  padding: clamp(1.25rem, 4vw, 2rem);
+}
+
+.demo-card {
+  border-radius: 1rem;
+  padding: 1rem;
+}
+
+.demo-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.demo-section-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.demo-muted {
+  color: var(--sea-ink-soft);
+}
+
+.demo-input,
+.demo-select,
+.demo-textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  background: color-mix(in oklab, var(--surface-strong) 88%, white 12%);
+  color: var(--sea-ink);
+  outline: none;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+
+.demo-input,
+.demo-select {
+  padding: 0.7rem 0.9rem;
+}
+
+.demo-input-fit {
+  width: auto;
+}
+
+.demo-textarea {
+  min-height: 7rem;
+  padding: 0.8rem 0.9rem;
+  resize: vertical;
+}
+
+.demo-input:focus,
+.demo-select:focus,
+.demo-textarea:focus {
+  border-color: color-mix(in oklab, var(--lagoon-deep) 58%, var(--line));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 24%, transparent);
+}
+
+.demo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid color-mix(in oklab, var(--lagoon-deep) 34%, var(--line));
+  border-radius: 0.85rem;
+  background: color-mix(in oklab, var(--lagoon) 22%, var(--surface-strong));
+  color: var(--sea-ink);
+  padding: 0.72rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.demo-button:hover {
+  transform: translateY(-1px);
+  background: color-mix(in oklab, var(--lagoon) 30%, var(--surface-strong));
+}
+
+.demo-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+.demo-button-secondary {
+  border-color: var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 74%, transparent);
+  color: var(--sea-ink-soft);
+}
+
+.demo-button-danger {
+  border-color: rgba(196, 71, 71, 0.28);
+  background: rgba(196, 71, 71, 0.1);
+  color: #9f3030;
+}
+
+.demo-list-item {
+  border: 1px solid var(--line);
+  border-radius: 0.9rem;
+  background: color-mix(in oklab, var(--chip-bg) 82%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+.demo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--chip-line);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--sea-ink-soft);
+  padding: 0.35rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.demo-alert {
+  border: 1px solid rgba(193, 126, 42, 0.3);
+  border-radius: 1rem;
+  background: rgba(193, 126, 42, 0.1);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-alert-danger {
+  border-color: rgba(196, 71, 71, 0.3);
+  background: rgba(196, 71, 71, 0.1);
+}
+
+.demo-code-block {
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-table-shell {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--surface-strong) 78%, transparent);
+}
+
+.demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--sea-ink);
+}
+
+.demo-table th,
+.demo-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.demo-table th {
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  font-weight: 700;
+}
+
+.demo-table tr:hover td {
+  background: color-mix(in oklab, var(--lagoon) 8%, transparent);
+}
+
 button,
 .island-shell,
 a {

package/src/frameworks/react/project/base/tsr.config.json

@@ -0,0 +1,3 @@
+{
+  "target": "react"
+}

package/src/frameworks/react/project/packages.json

@@ -15,6 +15,9 @@
     }
   },
   "file-router": {
+    "devDependencies": {
+      "@tanstack/router-cli": "^1.132.0"
+    },
     "dependencies": {
       "@tanstack/router-plugin": "^1.132.0"
     }