@tanstack/create 0.67.0 → 0.68.1

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

@@ -14,18 +14,14 @@ function RouteComponent() {
   const strapiArticles = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-7xl mx-auto">
-        <h1 class="text-4xl font-bold mb-8 text-white">
-          <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-            Strapi
-          </span>{' '}
-          <span class="text-gray-300">Articles</span>
-        </h1>
+    <main class="demo-page demo-page-wide">
+      <div>
+        <p class="island-kicker mb-2">CMS</p>
+        <h1 class="demo-title mb-8">Strapi Articles</h1>
 
         <Show
           when={strapiArticles() && strapiArticles().length > 0}
-          fallback={<p class="text-gray-400">No articles found.</p>}
+          fallback={<p class="demo-muted">No articles found.</p>}
         >
           <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
             <For each={strapiArticles()}>
@@ -35,25 +31,25 @@ function RouteComponent() {
                   params={{ articleId: article.documentId }}
                   class="block"
                 >
-                  <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
-                    <h2 class="text-xl font-semibold text-white mb-3">
+                  <article class="demo-card h-full cursor-pointer transition hover:-translate-y-0.5">
+                    <h2 class="mb-3 text-xl font-semibold">
                       {article.title || 'Untitled'}
                     </h2>
 
                     {article.description && (
-                      <p class="text-gray-400 mb-4 leading-relaxed">
+                      <p class="demo-muted mb-4 leading-relaxed">
                         {article.description}
                       </p>
                     )}
 
                     {article.content && (
-                      <p class="text-gray-400 line-clamp-3 leading-relaxed">
+                      <p class="demo-muted line-clamp-3 leading-relaxed">
                         {article.content}
                       </p>
                     )}
 
                     {article.createdAt && (
-                      <p class="text-sm text-cyan-400/70 mt-4">
+                      <p class="demo-muted mt-4 text-sm">
                         {new Date(article.createdAt).toLocaleDateString()}
                       </p>
                     )}
@@ -64,6 +60,6 @@ function RouteComponent() {
           </div>
         </Show>
       </div>
-    </div>
+    </main>
   )
 }

package/dist/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -13,12 +13,9 @@ function RouteComponent() {
   const article = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          class="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main class="demo-page">
+      <div class="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" class="mb-6 inline-flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5 mr-2"
@@ -34,13 +31,11 @@ function RouteComponent() {
           Back to Articles
         </Link>
 
-        <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
-          <h1 class="text-4xl font-bold text-white mb-4">
-            {article()?.title || 'Untitled'}
-          </h1>
+        <article class="demo-panel">
+          <h1 class="demo-title mb-4">{article()?.title || 'Untitled'}</h1>
 
           {article()?.createdAt && (
-            <p class="text-sm text-cyan-400/70 mb-6">
+            <p class="demo-muted mb-6 text-sm">
               Published on{' '}
               {new Date(
                 article()?.createdAt || article()?.attributes?.createdAt,
@@ -54,10 +49,8 @@ function RouteComponent() {
 
           {article()?.description && (
             <div class="mb-6">
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">
-                Description
-              </h2>
-              <p class="text-gray-400 leading-relaxed">
+              <h2 class="demo-section-title mb-3">Description</h2>
+              <p class="demo-muted leading-relaxed">
                 {article()?.description || article()?.attributes?.description}
               </p>
             </div>
@@ -65,14 +58,14 @@ function RouteComponent() {
 
           {article()?.content && (
             <div>
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">Content</h2>
-              <div class="text-gray-400 leading-relaxed whitespace-pre-wrap">
+              <h2 class="demo-section-title mb-3">Content</h2>
+              <div class="demo-muted whitespace-pre-wrap leading-relaxed">
                 {article()?.content}
               </div>
             </div>
           )}
         </article>
       </div>
-    </div>
+    </main>
   )
 }

package/dist/frameworks/solid/project/base/_dot_gitignore

@@ -6,6 +6,7 @@ dist-ssr
 .env
 .nitro
 .tanstack
+src/routeTree.gen.ts
 .wrangler
 .output
 .vinxi

package/dist/frameworks/solid/project/base/src/styles.css.ejs

@@ -120,6 +120,209 @@ code {
     0 4px 14px rgba(23, 58, 64, 0.06);
 }
 
+.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);
+}
+
 .site-header {
   position: sticky;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/create",
-  "version": "0.67.0",
+  "version": "0.68.1",
   "description": "TanStack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx

@@ -24,7 +24,7 @@ function Messages({ messages }: { messages: ChatMessages }) {
 
   if (!messages.length) {
     return (
-      <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
+      <div className="demo-muted flex flex-1 items-center justify-center text-sm">
         Ask me anything! I'm here to help.
       </div>
     )
@@ -36,9 +36,7 @@ function Messages({ messages }: { messages: ChatMessages }) {
         <div
           key={id}
           className={`py-3 ${
-            role === 'assistant'
-              ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
-              : 'bg-transparent'
+            role === 'assistant' ? 'bg-[var(--chip-bg)]' : 'bg-transparent'
           }`}
         >
           {parts.map((part, index) => {
@@ -46,15 +44,15 @@ function Messages({ messages }: { messages: ChatMessages }) {
               return (
                 <div key={index} className="flex items-start gap-2 px-4">
                   {role === 'assistant' ? (
-                    <div className="w-6 h-6 rounded-lg bg-linear-to-r from-orange-500 to-red-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                    <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--lagoon-deep)] text-xs font-medium text-white">
                       AI
                     </div>
                   ) : (
-                    <div className="w-6 h-6 rounded-lg bg-gray-700 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                    <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--sea-ink-soft)] text-xs font-medium text-white">
                       Y
                     </div>
                   )}
-                  <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
+                  <div className="min-w-0 flex-1 max-w-none text-sm text-[var(--sea-ink)]">
                     <Streamdown>{part.content}</Streamdown>
                   </div>
                 </div>
@@ -87,7 +85,7 @@ export default function AIAssistant() {
     <div className="relative z-50">
       <button
         onClick={() => showAIAssistant.setState((state) => !state)}
-        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-green-700 to-green-900 text-white hover:opacity-90 transition-opacity"
+        className="demo-button w-full justify-between px-4 py-2.5"
       >
         <div className="flex items-center gap-2">
           <BotIcon size={24} />
@@ -97,12 +95,14 @@ export default function AIAssistant() {
       </button>
 
       {isOpen && (
-        <div className="absolute bottom-0 left-full ml-2 w-[700px] h-[600px] bg-gray-900 rounded-lg shadow-xl border border-orange-500/20 flex flex-col">
-          <div className="flex items-center justify-between p-3 border-b border-orange-500/20">
-            <h3 className="font-semibold text-white">AI Assistant</h3>
+        <div className="demo-panel fixed inset-x-4 top-20 z-[100] flex h-[calc(100vh-6rem)] max-h-[600px] flex-col overflow-hidden p-0 sm:left-auto sm:w-[min(calc(100vw-2rem),700px)]">
+          <div className="flex items-center justify-between border-b border-[var(--line)] p-3">
+            <h3 className="font-semibold text-[var(--sea-ink)]">
+              AI Assistant
+            </h3>
             <button
               onClick={() => showAIAssistant.setState((state) => !state)}
-              className="text-gray-400 hover:text-white transition-colors"
+              className="demo-muted transition-colors hover:text-[var(--sea-ink)]"
             >
               <X className="w-4 h-4" />
             </button>
@@ -110,7 +110,7 @@ export default function AIAssistant() {
 
           <Messages messages={messages} />
 
-          <div className="p-3 border-t border-orange-500/20">
+          <div className="border-t border-[var(--line)] p-3">
             <form
               onSubmit={(e) => {
                 e.preventDefault()
@@ -125,7 +125,7 @@ export default function AIAssistant() {
                   value={input}
                   onChange={(e) => setInput(e.target.value)}
                   placeholder="Type your message..."
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-3 pr-10 py-2 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden"
+                  className="demo-textarea pr-10 text-sm"
                   rows={1}
                   style={{ minHeight: '36px', maxHeight: '120px' }}
                   onInput={(e) => {
@@ -145,7 +145,7 @@ export default function AIAssistant() {
                 <button
                   type="submit"
                   disabled={!input.trim()}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-orange-500 hover:text-orange-400 disabled:text-gray-500 transition-colors focus:outline-none"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-[var(--lagoon-deep)] transition-colors hover:text-[var(--sea-ink)] disabled:text-[var(--sea-ink-soft)]"
                 >
                   <Send className="w-4 h-4" />
                 </button>

package/src/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx

@@ -11,7 +11,7 @@ export default function GuitarRecommendation({ id }: { id: string }) {
     return null
   }
   return (
-    <div className="my-4 rounded-lg overflow-hidden border border-orange-500/20 bg-gray-800/50">
+    <div className="demo-card my-4 overflow-hidden p-0">
       <div className="aspect-[4/3] relative overflow-hidden">
         <img
           src={guitar.image}
@@ -20,23 +20,25 @@ export default function GuitarRecommendation({ id }: { id: string }) {
         />
       </div>
       <div className="p-4">
-        <h3 className="text-lg font-semibold text-white mb-2">{guitar.name}</h3>
-        <p className="text-sm text-gray-300 mb-3 line-clamp-2">
+        <h3 className="mb-2 text-lg font-semibold text-[var(--sea-ink)]">
+          {guitar.name}
+        </h3>
+        <p className="demo-muted mb-3 line-clamp-2 text-sm">
           {guitar.shortDescription}
         </p>
         <div className="flex items-center justify-between">
-          <div className="text-lg font-bold text-emerald-400">
+          <div className="text-lg font-bold text-[var(--lagoon-deep)]">
             ${guitar.price}
           </div>
           <button
             onClick={() => {
               navigate({
-                to: '/example/guitars/$guitarId',
+                to: '/demo/guitars/$guitarId',
                 params: { guitarId: guitar.id.toString() },
               })
               showAIAssistant.setState(() => false)
             }}
-            className="bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-1.5 rounded-lg text-sm hover:opacity-90 transition-opacity"
+            className="demo-button px-4 py-1.5 text-sm"
           >
             View Details
           </button>

package/src/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import 'highlight.js/styles/github-dark.css';
+@import 'highlight.js/styles/github.css';
 @source "../../../../node_modules/streamdown/dist/*.js";
 
 /* Custom scrollbar styles */
@@ -28,7 +28,7 @@ html {
 /* Markdown content styles */
 .prose {
   max-width: none;
-  color: #e5e7eb; /* text-gray-200 */
+  color: var(--sea-ink-soft);
 }
 
 /* .prose p {
@@ -37,15 +37,15 @@ html {
 } */
 
 .prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
+  color: var(--sea-ink);
+  background-color: var(--chip-bg);
   padding: 0.2em 0.4em;
   border-radius: 0.375rem;
   font-size: 0.875em;
 }
 
 .prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
+  background-color: var(--chip-bg);
   border-radius: 0.5rem;
   padding: 1rem;
   margin: 1.25em 0;
@@ -63,7 +63,7 @@ html {
 .prose h2,
 .prose h3,
 .prose h4 {
-  color: #f9fafb; /* text-gray-50 */
+  color: var(--sea-ink);
   /* margin-top: 2em; */
   /* margin-bottom: 1em; */
 }
@@ -81,27 +81,27 @@ html {
 }
 
 .prose blockquote {
-  border-left-color: #f97316; /* orange-500 */
-  background-color: rgba(249, 115, 22, 0.1);
+  border-left-color: var(--lagoon-deep);
+  background-color: var(--chip-bg);
   padding: 1em;
   margin: 1.25em 0;
   border-radius: 0.5rem;
 }
 
 .prose hr {
-  border-color: rgba(249, 115, 22, 0.2);
+  border-color: var(--line);
   margin: 2em 0;
 }
 
 .prose a {
-  color: #f97316; /* orange-500 */
+  color: var(--lagoon-deep);
   text-decoration: underline;
   text-decoration-thickness: 0.1em;
   text-underline-offset: 0.2em;
 }
 
 .prose a:hover {
-  color: #fb923c; /* orange-400 */
+  color: var(--sea-ink);
 }
 
 .prose table {
@@ -113,11 +113,11 @@ html {
 .prose th,
 .prose td {
   padding: 0.75em;
-  border: 1px solid rgba(249, 115, 22, 0.2);
+  border: 1px solid var(--line);
 }
 
 .prose th {
-  background-color: rgba(249, 115, 22, 0.1);
+  background-color: var(--chip-bg);
   font-weight: 600;
 }
 
@@ -181,16 +181,16 @@ html {
 
 .prose th,
 .prose td {
-  border: 1px solid rgba(249, 115, 22, 0.2);
+  border: 1px solid var(--line);
   padding: 0.5em;
 }
 
 .prose th {
-  background-color: rgba(249, 115, 22, 0.1);
+  background-color: var(--chip-bg);
 }
 
 .prose strong {
-  color: #f9fafb; /* text-gray-50 */
+  color: var(--sea-ink);
   font-weight: 600;
 }
 
@@ -199,23 +199,23 @@ html {
 }
 
 .prose blockquote {
-  border-left: 4px solid #f97316; /* orange-500 */
+  border-left: 4px solid var(--lagoon-deep);
   padding-left: 1em;
   margin: 1em 0;
-  color: #d1d5db; /* text-gray-300 */
+  color: var(--sea-ink-soft);
 }
 
 /* Ensure code blocks match the AI's formatting */
 .prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
+  color: var(--sea-ink);
+  background-color: var(--chip-bg);
   padding: 0.2em 0.4em;
   border-radius: 0.375rem;
   font-size: 0.875em;
 }
 
 .prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
+  background-color: var(--chip-bg);
   border-radius: 0.5rem;
   padding: 1rem;
   margin: 1em 0;