@tanstack/create 0.68.0 → 0.68.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tanstack/create
 
+## 0.68.2
+
+### Patch Changes
+
+- Keep the generated route tree tracked in new React and Solid apps and run route generation once during scaffold. ([#464](https://github.com/TanStack/cli/pull/464))
+
+## 0.68.1
+
+### Patch Changes
+
+- Keep the generated AI assistant demo panel inside the viewport. ([#459](https://github.com/TanStack/cli/pull/459))
+
+- Normalize generated demo pages to use the base template styling instead of bespoke full-page gradients and mismatched color treatments. ([#461](https://github.com/TanStack/cli/pull/461))
+
+- Ignore the generated route tree in new React and Solid app gitignores. ([#460](https://github.com/TanStack/cli/pull/460))
+
 ## 0.68.0
 
 ### Minor Changes

package/dist/create-app.js

@@ -202,6 +202,28 @@ async function runCommandsAndInstallDependencies(environment, options) {
     }
     await installShadcnComponents(environment, options.targetDir, options);
     await setupIntent(environment, options.targetDir, options);
+    if (shouldGenerateRoutes(options)) {
+        s.start(`Generating route tree...`);
+        const command = getPackageManagerScriptCommand(options.packageManager, [
+            'generate-routes',
+        ]);
+        const cmd = formatCommand(command);
+        environment.startStep({
+            id: 'generate-routes',
+            type: 'command',
+            message: cmd,
+        });
+        await environment.execute(command.command, command.args, options.targetDir, {
+            inherit: true,
+        });
+        environment.finishStep('generate-routes', 'Route tree generated');
+        s.stop(`Route tree generated`);
+    }
+}
+function shouldGenerateRoutes(options) {
+    return (options.install !== false &&
+        options.mode === 'file-router' &&
+        (options.framework.id === 'react' || options.framework.id === 'solid'));
 }
 async function seedEnvValues(environment, options) {
     const envVarValues = options.envVarValues || {};

package/dist/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/dist/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/dist/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;

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

@@ -24,10 +24,8 @@ function InitialLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex-1 flex items-center justify-center px-4">
       <div className="text-center max-w-3xl mx-auto w-full">
-        <h1 className="text-6xl font-bold mb-4 bg-linear-to-r from-orange-500 to-red-600 text-transparent bg-clip-text uppercase">
-          <span className="text-white">TanStack</span> Chat
-        </h1>
-        <p className="text-gray-400 mb-6 w-2/3 mx-auto text-lg">
+        <h1 className="demo-title mb-4">TanStack Chat</h1>
+        <p className="demo-muted mb-6 mx-auto max-w-2xl text-lg">
           You can ask me about anything, I might or might not have a good
           answer, but you can still ask.
         </p>
@@ -39,7 +37,7 @@ function InitialLayout({ children }: { children: React.ReactNode }) {
 
 function ChattingLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sticky bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10 z-10">
+    <div className="sticky bottom-0 left-0 right-0 z-10 border-t border-[var(--line)] bg-[var(--header-bg)] backdrop-blur-sm">
       <div className="max-w-3xl mx-auto w-full px-4 py-3">{children}</div>
     </div>
   )
@@ -96,17 +94,17 @@ function Messages({
               key={message.id}
               className={`p-4 ${
                 message.role === 'assistant'
-                  ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+                  ? 'bg-[var(--chip-bg)]'
                   : 'bg-transparent'
               }`}
             >
               <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
                 {message.role === 'assistant' ? (
-                  <div className="w-8 h-8 rounded-lg bg-linear-to-r from-orange-500 to-red-600 mt-2 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                  <div className="mt-2 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--lagoon-deep)] text-sm font-medium text-white">
                     AI
                   </div>
                 ) : (
-                  <div className="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center text-sm font-medium text-white flex-shrink-0">
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--sea-ink-soft)] text-sm font-medium text-white">
                     Y
                   </div>
                 )}
@@ -115,7 +113,7 @@ function Messages({
                     if (part.type === 'text' && part.content) {
                       return (
                         <div
-                          className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
+                          className="prose prose-sm min-w-0 max-w-none flex-1"
                           key={index}
                         >
                           <Streamdown>{part.content}</Streamdown>
@@ -145,7 +143,7 @@ function Messages({
                         ? onStopSpeak()
                         : onSpeak(textContent, message.id)
                     }
-                    className="flex-shrink-0 p-2 text-gray-400 hover:text-orange-400 transition-colors"
+                    className="demo-muted flex-shrink-0 p-2 transition-colors hover:text-[var(--lagoon-deep)]"
                     title={isPlaying ? 'Stop speaking' : 'Read aloud'}
                   >
                     {isPlaying ? (
@@ -190,7 +188,7 @@ function ChatPage() {
   const Layout = messages.length ? ChattingLayout : InitialLayout
 
   return (
-    <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
+    <div className="relative flex h-[calc(100vh-12rem)] min-h-[32rem]">
       <div className="flex-1 flex flex-col min-h-0">
         <Messages
           messages={messages}
@@ -205,7 +203,7 @@ function ChatPage() {
               <div className="flex items-center justify-center">
                 <button
                   onClick={stop}
-                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+                  className="demo-button demo-button-danger"
                 >
                   <Square className="w-4 h-4 fill-current" />
                   Stop
@@ -226,10 +224,8 @@ function ChatPage() {
                   type="button"
                   onClick={handleMicClick}
                   disabled={isLoading || isTranscribing}
-                  className={`p-3 rounded-lg transition-colors ${
-                    isRecording
-                      ? 'bg-red-600 hover:bg-red-700 text-white'
-                      : 'bg-gray-800/50 text-gray-400 hover:text-orange-400 border border-orange-500/20'
+                  className={`demo-button p-3 ${
+                    isRecording ? 'demo-button-danger' : 'demo-button-secondary'
                   } disabled:opacity-50`}
                   title={isRecording ? 'Stop recording' : 'Start recording'}
                 >
@@ -247,7 +243,7 @@ function ChatPage() {
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder="Type something clever..."
-                    className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 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 shadow-lg"
+                    className="demo-textarea pr-12 text-sm"
                     rows={1}
                     style={{ minHeight: '44px', maxHeight: '200px' }}
                     disabled={isLoading}
@@ -268,7 +264,7 @@ function ChatPage() {
                   <button
                     type="submit"
                     disabled={!input.trim() || isLoading}
-                    className="absolute right-2 top-1/2 -translate-y-1/2 p-2 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-2 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/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-image.tsx

@@ -73,26 +73,25 @@ function ImagePage() {
   }
 
   return (
-    <div className="min-h-[calc(100vh-80px)] bg-gray-900 p-6">
-      <div className="max-w-6xl mx-auto">
+    <main className="demo-page demo-page-wide">
+      <div>
         <div className="flex items-center gap-3 mb-6">
-          <ImageIcon className="w-8 h-8 text-orange-500" />
-          <h1 className="text-2xl font-bold text-white">Image Generation</h1>
+          <ImageIcon className="w-8 h-8 text-[var(--lagoon-deep)]" />
+          <h1 className="demo-title">Image Generation</h1>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Input Panel */}
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                   Size
                 </label>
                 <select
                   value={size}
                   onChange={(e) => setSize(e.target.value)}
                   disabled={isLoading}
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  className="demo-select text-sm"
                 >
                   {SIZES.map((s) => (
                     <option key={s} value={s}>
@@ -102,7 +101,7 @@ function ImagePage() {
                 </select>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
+                <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                   Count
                 </label>
                 <input
@@ -116,13 +115,13 @@ function ImagePage() {
                   min={1}
                   max={4}
                   disabled={isLoading}
-                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  className="demo-input text-sm"
                 />
               </div>
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-300 mb-2">
+              <label className="mb-2 block text-sm font-medium text-[var(--sea-ink)]">
                 Prompt
               </label>
               <textarea
@@ -130,7 +129,7 @@ function ImagePage() {
                 onChange={(e) => setPrompt(e.target.value)}
                 disabled={isLoading}
                 rows={6}
-                className="w-full rounded-lg border border-orange-500/20 bg-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50 resize-none"
+                className="demo-textarea text-sm"
                 placeholder="Describe the image you want to generate..."
               />
             </div>
@@ -138,7 +137,7 @@ function ImagePage() {
             <button
               onClick={handleGenerate}
               disabled={isLoading || !prompt.trim()}
-              className="w-full px-4 py-3 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              className="demo-button w-full"
             >
               {isLoading ? (
                 <>
@@ -151,16 +150,11 @@ function ImagePage() {
             </button>
           </div>
 
-          {/* Output Panel */}
-          <div className="lg:col-span-2 bg-gray-800 rounded-lg p-6 border border-orange-500/20">
-            <h2 className="text-lg font-semibold text-white mb-4">
-              Generated Images
-            </h2>
+          <div className="demo-panel lg:col-span-2">
+            <h2 className="demo-section-title mb-4">Generated Images</h2>
 
             {error && (
-              <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 mb-4">
-                {error}
-              </div>
+              <div className="demo-alert demo-alert-danger mb-4">{error}</div>
             )}
 
             {images.length > 0 ? (
@@ -171,17 +165,17 @@ function ImagePage() {
                       <img
                         src={getImageSrc(image)}
                         alt={`Generated image ${index + 1}`}
-                        className="w-full rounded-lg border border-gray-700"
+                        className="w-full rounded-lg border border-[var(--line)]"
                       />
                       <button
                         onClick={() => handleDownload(image, index)}
-                        className="absolute top-2 right-2 p-2 bg-gray-900/80 hover:bg-gray-900 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="demo-button absolute right-2 top-2 p-2 opacity-0 transition-opacity group-hover:opacity-100"
                         title="Download image"
                       >
-                        <Download className="w-4 h-4 text-white" />
+                        <Download className="w-4 h-4" />
                       </button>
                       {image.revisedPrompt && (
-                        <p className="mt-2 text-xs text-gray-400 italic">
+                        <p className="demo-muted mt-2 text-xs italic">
                           Revised: {image.revisedPrompt}
                         </p>
                       )}
@@ -190,7 +184,7 @@ function ImagePage() {
                 </div>
               </div>
             ) : !error && !isLoading ? (
-              <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+              <div className="demo-muted flex h-64 flex-col items-center justify-center">
                 <ImageIcon className="w-16 h-16 mb-4 opacity-50" />
                 <p>
                   Enter a prompt and click "Generate Image" to create an image.
@@ -200,7 +194,7 @@ function ImagePage() {
           </div>
         </div>
       </div>
-    </div>
+    </main>
   )
 }