@tanstack/create 0.68.0 → 0.68.2

package/src/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.$articleId.tsx

@@ -1,63 +1,58 @@
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { strapiApi } from "@/data/loaders";
-import { StrapiImage } from "@/components/strapi-image";
-import { BlockRenderer } from "@/components/blocks";
-import type { TArticle } from "@/types/strapi";
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { strapiApi } from '@/data/loaders'
+import { StrapiImage } from '@/components/strapi-image'
+import { BlockRenderer } from '@/components/blocks'
+import type { TArticle } from '@/types/strapi'
 
-export const Route = createFileRoute("/demo/strapi/$articleId")({
+export const Route = createFileRoute('/demo/strapi/$articleId')({
   component: RouteComponent,
   errorComponent: ErrorComponent,
   loader: async ({ params }) => {
     try {
       const response = await strapiApi.articles.getArticleByIdData({
         data: params.articleId,
-      });
-      return { success: true, article: response.data };
+      })
+      return { success: true, article: response.data }
     } catch (error) {
       return {
         success: false,
-        error: error instanceof Error ? error.message : "Failed to load article",
+        error:
+          error instanceof Error ? error.message : 'Failed to load article',
         article: null,
-      };
+      }
     }
   },
-});
+})
 
 function ErrorComponent({ error }: { error: Error }) {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div className="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main className="demo-page">
+      <div className="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" className="mb-6 inline-flex items-center">
           ← Back to Articles
         </Link>
-        <div className="bg-red-900/20 border border-red-500/50 rounded-xl p-8 text-center">
-          <h1 className="text-2xl font-bold text-red-400 mb-4">Error Loading Article</h1>
-          <p className="text-gray-300">{error.message}</p>
+        <div className="demo-alert demo-alert-danger text-center">
+          <h1 className="text-2xl font-bold mb-4">Error Loading Article</h1>
+          <p className="demo-muted">{error.message}</p>
         </div>
       </div>
-    </div>
-  );
+    </main>
+  )
 }
 
 function RouteComponent() {
   const { success, article, error } = Route.useLoaderData() as {
-    success: boolean;
-    article: TArticle | null;
-    error?: string;
-  };
+    success: boolean
+    article: TArticle | null
+    error?: string
+  }
 
   // Show error state
   if (!success || !article) {
     return (
-      <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-        <div className="max-w-4xl mx-auto">
-          <Link
-            to="/demo/strapi"
-            className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-          >
+      <main className="demo-page">
+        <div className="mx-auto max-w-4xl">
+          <Link to="/demo/strapi" className="mb-6 inline-flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-5 w-5 mr-2"
@@ -73,31 +68,27 @@ function RouteComponent() {
             Back to Articles
           </Link>
 
-          <div className="bg-amber-900/20 border border-amber-500/50 rounded-xl p-8">
+          <div className="demo-alert">
             <div className="flex items-start gap-4">
-              <div className="text-amber-400 text-2xl">⚠️</div>
               <div>
-                <h2 className="text-xl font-semibold text-amber-400 mb-2">
-                  {error || "Article Not Found"}
+                <h2 className="text-xl font-semibold mb-2">
+                  {error || 'Article Not Found'}
                 </h2>
-                <p className="text-gray-300">
+                <p className="demo-muted">
                   Make sure the Strapi server is running and the article exists.
                 </p>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    );
+      </main>
+    )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div className="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main className="demo-page">
+      <div className="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" className="mb-6 inline-flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             className="h-5 w-5 mr-2"
@@ -113,7 +104,7 @@ function RouteComponent() {
           Back to Articles
         </Link>
 
-        <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl overflow-hidden">
+        <article className="demo-panel overflow-hidden p-0">
           <StrapiImage
             src={article.cover?.url}
             alt={article.cover?.alternativeText || article.title}
@@ -121,23 +112,23 @@ function RouteComponent() {
           />
 
           <div className="p-8">
-            <h1 className="text-4xl font-bold text-white mb-4">
-              {article.title || "Untitled"}
-            </h1>
+            <h1 className="demo-title mb-4">{article.title || 'Untitled'}</h1>
 
             <div className="flex items-center gap-4 mb-6">
               {article.author?.name && (
-                <span className="text-gray-400">
-                  By{" "}
-                  <span className="text-cyan-400">{article.author.name}</span>
+                <span className="demo-muted">
+                  By{' '}
+                  <span className="text-[var(--sea-ink)]">
+                    {article.author.name}
+                  </span>
                 </span>
               )}
               {article.createdAt && (
-                <span className="text-sm text-cyan-400/70">
-                  {new Date(article.createdAt).toLocaleDateString("en-US", {
-                    year: "numeric",
-                    month: "long",
-                    day: "numeric",
+                <span className="demo-muted text-sm">
+                  {new Date(article.createdAt).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
                   })}
                 </span>
               )}
@@ -145,15 +136,13 @@ function RouteComponent() {
 
             {article.category?.name && (
               <div className="mb-6">
-                <span className="text-xs px-3 py-1 bg-slate-700 text-cyan-400 rounded-full">
-                  {article.category.name}
-                </span>
+                <span className="demo-pill">{article.category.name}</span>
               </div>
             )}
 
             {article.description && (
               <div className="mb-8">
-                <p className="text-xl text-gray-300 leading-relaxed">
+                <p className="demo-muted text-xl leading-relaxed">
                   {article.description}
                 </p>
               </div>
@@ -165,6 +154,6 @@ function RouteComponent() {
           </div>
         </article>
       </div>
-    </div>
-  );
+    </main>
+  )
 }

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

@@ -73,28 +73,25 @@ export const Route = createFileRoute('/demo/strapi')({
 
 function StrapiServerInstructions() {
   return (
-    <div className="bg-slate-800/50 rounded-lg p-6 text-left mt-6">
-      <h2 className="text-lg font-semibold text-white mb-4">
-        Start the Strapi Server
-      </h2>
-      <div className="space-y-2 text-sm font-mono text-gray-400">
+    <div className="demo-card mt-6 text-left">
+      <h2 className="demo-section-title mb-4">Start the Strapi Server</h2>
+      <div className="demo-muted space-y-2 font-mono text-sm">
         <p>
-          <span className="text-cyan-400">$</span> cd ../server
+          <span>$</span> cd ../server
         </p>
         <p>
-          <span className="text-cyan-400">$</span> npm install
+          <span>$</span> npm install
         </p>
         <p>
-          <span className="text-cyan-400">$</span> npm run develop
+          <span>$</span> npm run develop
         </p>
       </div>
-      <p className="text-gray-500 text-sm mt-4">
+      <p className="demo-muted text-sm mt-4">
         Then create an admin at{' '}
         <a
           href="http://localhost:1337/admin"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-cyan-400 hover:underline"
         >
           http://localhost:1337/admin
         </a>
@@ -105,22 +102,17 @@ function StrapiServerInstructions() {
 
 function ConnectionError({ error }: { error?: string }) {
   return (
-    <div className="bg-amber-900/20 border border-amber-500/50 rounded-xl p-8">
+    <div className="demo-alert">
       <div className="flex items-start gap-4">
-        <div className="text-amber-400 text-2xl">⚠️</div>
         <div>
-          <h2 className="text-xl font-semibold text-amber-400 mb-2">
+          <h2 className="text-xl font-semibold mb-2">
             Cannot Connect to Strapi
           </h2>
-          <p className="text-gray-300 mb-4">
+          <p className="demo-muted mb-4">
             Make sure your Strapi server is running at{' '}
-            <code className="text-cyan-400 bg-slate-800 px-2 py-1 rounded">
-              http://localhost:1337
-            </code>
+            <code>http://localhost:1337</code>
           </p>
-          {error && (
-            <p className="text-gray-500 text-sm mb-4">Error: {error}</p>
-          )}
+          {error && <p className="demo-muted text-sm mb-4">Error: {error}</p>}
           <StrapiServerInstructions />
         </div>
       </div>
@@ -131,13 +123,10 @@ function ConnectionError({ error }: { error?: string }) {
 function NoArticlesFound({ query }: { query?: string }) {
   if (query) {
     return (
-      <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-8">
+      <div className="demo-card">
         <div className="text-center">
-          <div className="text-6xl mb-4">🔍</div>
-          <h2 className="text-2xl font-semibold text-white mb-4">
-            No Results Found
-          </h2>
-          <p className="text-gray-400 mb-6 max-w-md mx-auto">
+          <h2 className="text-2xl font-semibold mb-4">No Results Found</h2>
+          <p className="demo-muted mb-6 max-w-md mx-auto">
             No articles match your search for "{query}". Try adjusting your
             search terms.
           </p>
@@ -147,54 +136,54 @@ function NoArticlesFound({ query }: { query?: string }) {
   }
 
   return (
-    <div className="bg-slate-800/50 border border-slate-700 rounded-xl p-8">
+    <div className="demo-card">
       <div className="text-center">
-        <div className="text-6xl mb-4">📝</div>
-        <h2 className="text-2xl font-semibold text-white mb-4">
-          No Articles Yet
-        </h2>
-        <p className="text-gray-400 mb-6 max-w-md mx-auto">
+        <h2 className="text-2xl font-semibold mb-4">No Articles Yet</h2>
+        <p className="demo-muted mb-6 max-w-md mx-auto">
           Your Strapi server is running, but there are no published articles.
           Create and publish your first article to see it here.
         </p>
 
-        <div className="bg-slate-900/50 rounded-lg p-6 text-left max-w-md mx-auto">
-          <h3 className="text-lg font-semibold text-white mb-4">
-            How to add articles:
-          </h3>
-          <ol className="space-y-3 text-gray-400">
+        <div className="demo-card max-w-md mx-auto text-left">
+          <h3 className="demo-section-title mb-4">How to add articles:</h3>
+          <ol className="demo-muted space-y-3">
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">1.</span>
+              <span className="font-bold">1.</span>
               <span>
                 Open{' '}
                 <a
                   href="http://localhost:1337/admin"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-cyan-400 hover:underline"
                 >
                   Strapi Admin Panel
                 </a>
               </span>
             </li>
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">2.</span>
+              <span className="font-bold">2.</span>
               <span>
-                Go to <strong className="text-white">Content Manager</strong> →{' '}
-                <strong className="text-white">Article</strong>
+                Go to{' '}
+                <strong className="text-[var(--sea-ink)]">
+                  Content Manager
+                </strong>{' '}
+                → <strong className="text-[var(--sea-ink)]">Article</strong>
               </span>
             </li>
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">3.</span>
+              <span className="font-bold">3.</span>
               <span>
-                Click <strong className="text-white">Create new entry</strong>
+                Click{' '}
+                <strong className="text-[var(--sea-ink)]">
+                  Create new entry
+                </strong>
               </span>
             </li>
             <li className="flex gap-3">
-              <span className="text-cyan-400 font-bold">4.</span>
+              <span className="font-bold">4.</span>
               <span>
                 Fill in the details and click{' '}
-                <strong className="text-white">Publish</strong>
+                <strong className="text-[var(--sea-ink)]">Publish</strong>
               </span>
             </li>
           </ol>
@@ -208,14 +197,10 @@ function RouteComponent() {
   const { status, articles, meta, error, query } = Route.useLoaderData()
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div className="max-w-7xl mx-auto">
-        <h1 className="text-4xl font-bold mb-6 text-white">
-          <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-            Strapi
-          </span>{' '}
-          <span className="text-gray-300">Articles</span>
-        </h1>
+    <main className="demo-page demo-page-wide">
+      <div>
+        <p className="island-kicker mb-2">CMS</p>
+        <h1 className="demo-title mb-6">Strapi Articles</h1>
 
         <div className="mb-8">
           <Search />
@@ -235,7 +220,7 @@ function RouteComponent() {
                   params={{ articleId: article.documentId }}
                   className="block"
                 >
-                  <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full flex flex-col">
+                  <article className="demo-card h-full cursor-pointer overflow-hidden p-0 transition hover:-translate-y-0.5">
                     <StrapiImage
                       src={article.cover?.url}
                       alt={article.cover?.alternativeText || article.title}
@@ -243,24 +228,24 @@ function RouteComponent() {
                     />
 
                     <div className="p-6 flex flex-col flex-1">
-                      <h2 className="text-xl font-semibold text-white mb-3">
+                      <h2 className="text-xl font-semibold mb-3">
                         {article.title || 'Untitled'}
                       </h2>
 
                       {article.description && (
-                        <p className="text-gray-400 mb-4 leading-relaxed line-clamp-2">
+                        <p className="demo-muted mb-4 leading-relaxed line-clamp-2">
                           {article.description}
                         </p>
                       )}
 
                       <div className="mt-auto flex items-center justify-between">
                         {article.author?.name && (
-                          <span className="text-sm text-gray-500">
+                          <span className="demo-muted text-sm">
                             By {article.author.name}
                           </span>
                         )}
                         {article.createdAt && (
-                          <span className="text-sm text-cyan-400/70">
+                          <span className="demo-muted text-sm">
                             {new Date(article.createdAt).toLocaleDateString()}
                           </span>
                         )}
@@ -268,7 +253,7 @@ function RouteComponent() {
 
                       {article.category?.name && (
                         <div className="mt-3">
-                          <span className="text-xs px-2 py-1 bg-slate-700 text-cyan-400 rounded-full">
+                          <span className="demo-pill">
                             {article.category.name}
                           </span>
                         </div>
@@ -287,6 +272,6 @@ function RouteComponent() {
           </>
         )}
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx

@@ -30,22 +30,14 @@ function TRPCTodos() {
   }, [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 95% 5%, #4a90c2 0%, #317eb9 50%, #1e4d72 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">tRPC Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">tRPC</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>
@@ -60,17 +52,17 @@ function TRPCTodos() {
               }
             }}
             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/table/assets/src/routes/demo/table.tsx.ejs

@@ -144,19 +144,21 @@ function TableDemo() {
   }, [table.getState().columnFilters[0]?.id])
 
   return (
-    <div className="min-h-screen bg-gray-900 p-6">
+    <main className="demo-page demo-page-wide">
       <div>
+        <p className="island-kicker mb-2">TanStack Table</p>
+        <h1 className="demo-title mb-6">Table Demo</h1>
         <DebouncedInput
           value={globalFilter ?? ''}
           onChange={(value) => setGlobalFilter(String(value))}
-          className="w-full p-3 bg-gray-800 text-white rounded-lg border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+          className="demo-input"
           placeholder="Search all columns..."
         />
       </div>
       <div className="h-4" />
-      <div className="overflow-x-auto rounded-lg border border-gray-700">
-        <table className="w-full text-sm text-gray-200">
-          <thead className="bg-gray-800 text-gray-100">
+      <div className="demo-table-shell">
+        <table className="demo-table text-sm">
+          <thead>
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
@@ -171,7 +173,7 @@ function TableDemo() {
                           <div
                             {...{
                               className: header.column.getCanSort()
-                                ? 'cursor-pointer select-none hover:text-blue-400 transition-colors'
+                                ? 'cursor-pointer select-none transition-colors hover:text-[var(--lagoon-deep)]'
                                 : '',
                               onClick: header.column.getToggleSortingHandler(),
                             }}
@@ -198,12 +200,12 @@ function TableDemo() {
               </tr>
             ))}
           </thead>
-          <tbody className="divide-y divide-gray-700">
+          <tbody>
             {table.getRowModel().rows.map((row) => {
               return (
                 <tr
                   key={row.id}
-                  className="hover:bg-gray-800 transition-colors"
+                  className="transition-colors"
                 >
                   {row.getVisibleCells().map((cell) => {
                     return (
@@ -222,30 +224,30 @@ function TableDemo() {
         </table>
       </div>
       <div className="h-4" />
-      <div className="flex flex-wrap items-center gap-2 text-gray-200">
+      <div className="demo-muted flex flex-wrap items-center gap-2">
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
           {'<<'}
         </button>
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
           {'<'}
         </button>
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
           {'>'}
         </button>
         <button
-          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="demo-button demo-button-secondary"
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >
@@ -267,7 +269,7 @@ function TableDemo() {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
-            className="w-16 px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            className="demo-input demo-input-fit py-1"
           />
         </span>
         <select
@@ -275,7 +277,7 @@ function TableDemo() {
           onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
-          className="px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+          className="demo-select demo-input-fit py-1"
         >
           {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
@@ -284,24 +286,24 @@ function TableDemo() {
           ))}
         </select>
       </div>
-      <div className="mt-4 text-gray-400">
+      <div className="demo-muted mt-4">
         {table.getPrePaginationRowModel().rows.length} Rows
       </div>
       <div className="mt-4 flex gap-2">
         <button
           onClick={() => rerender()}
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          className="demo-button"
         >
           Force Rerender
         </button>
         <button
           onClick={() => refreshData()}
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          className="demo-button"
         >
           Refresh Data
         </button>
       </div>
-      <pre className="mt-4 p-4 bg-gray-800 rounded-lg text-gray-300 overflow-auto">
+      <pre className="demo-code-block mt-4 overflow-auto">
         {JSON.stringify(
           {
             columnFilters: table.getState().columnFilters,
@@ -311,7 +313,7 @@ function TableDemo() {
           2,
         )}
       </pre>
-    </div>
+    </main>
   )
 }
 
@@ -324,7 +326,7 @@ function Filter({ column }: { column: Column<any, unknown> }) {
       value={(columnFilterValue ?? '') as string}
       onChange={(value) => column.setFilterValue(value)}
       placeholder={`Search...`}
-      className="w-full px-2 py-1 bg-gray-700 text-white rounded-md border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+      className="demo-input py-1"
     />
   )
 }
@@ -370,4 +372,3 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-