@tanstack/cta-framework-react-cra 0.47.0 → 0.48.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @tanstack/cta-framework-react-cra
 
+## 0.48.1
+
+### Patch Changes
+
+- Updated dependencies [[`cdb6eef`](https://github.com/TanStack/create-tsrouter-app/commit/cdb6eef79274a4041eae5e8cd9d43539c9a9a77a)]:
+  - @tanstack/cta-engine@0.49.0
+
+## 0.48.0
+
+### Minor Changes
+
+- no will prompt about overriding a directory that has contents ([#289](https://github.com/TanStack/create-tsrouter-app/pull/289))
+
+### Patch Changes
+
+- Updated dependencies [[`3087532`](https://github.com/TanStack/create-tsrouter-app/commit/308753249af11bf5c9e374789e973a934c753520)]:
+  - @tanstack/cta-engine@0.48.0
+
 ## 0.47.0
 
 ### Minor Changes

package/add-ons/ai/info.json

@@ -4,6 +4,8 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#00D1B2",
   "priority": 60,
   "link": "",
   "routes": [

package/add-ons/apollo-client/info.json

@@ -4,6 +4,8 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "api",
+  "color": "#311C87",
   "priority": 15,
   "link": "https://github.com/apollographql/apollo-client-integrations/tree/main/packages/tanstack-start",
   "dependsOn": ["start"],

package/add-ons/better-auth/README.md

@@ -0,0 +1,32 @@
+## Setting up Better Auth
+
+1. Generate and set the `BETTER_AUTH_SECRET` environment variable in your `.env.local`:
+
+   ```bash
+   npx @better-auth/cli secret
+   ```
+
+2. Visit the [Better Auth documentation](https://www.better-auth.com) to unlock the full potential of authentication in your app.
+
+### Adding a Database (Optional)
+
+Better Auth can work in stateless mode, but to persist user data, add a database:
+
+```typescript
+// src/lib/auth.ts
+import { betterAuth } from "better-auth";
+import { Pool } from "pg";
+
+export const auth = betterAuth({
+  database: new Pool({
+    connectionString: process.env.DATABASE_URL,
+  }),
+  // ... rest of config
+});
+```
+
+Then run migrations:
+
+```bash
+npx @better-auth/cli migrate
+```

package/add-ons/better-auth/assets/_dot_env.local.append

@@ -0,0 +1,3 @@
+# Better Auth configuration
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`

package/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx

@@ -0,0 +1,43 @@
+import { authClient } from "@/lib/auth-client";
+import { Link } from "@tanstack/react-router";
+
+export default function BetterAuthHeader() {
+  const { data: session, isPending } = authClient.useSession();
+
+  if (isPending) {
+    return (
+      <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 animate-pulse" />
+    );
+  }
+
+  if (session?.user) {
+    return (
+      <div className="flex items-center gap-2">
+        {session.user.image ? (
+          <img src={session.user.image} alt="" className="h-8 w-8" />
+        ) : (
+          <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
+            <span className="text-xs font-medium text-neutral-600 dark:text-neutral-400">
+              {session.user.name?.charAt(0).toUpperCase() || "U"}
+            </span>
+          </div>
+        )}
+        <button
+          onClick={() => authClient.signOut()}
+          className="flex-1 h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+        >
+          Sign out
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      to="/demo/better-auth"
+      className="h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors inline-flex items-center"
+    >
+      Sign in
+    </Link>
+  );
+}

package/add-ons/better-auth/assets/src/lib/auth-client.ts

@@ -0,0 +1,3 @@
+import { createAuthClient } from 'better-auth/react'
+
+export const authClient = createAuthClient()

package/add-ons/better-auth/assets/src/lib/auth.ts

@@ -0,0 +1,9 @@
+import { betterAuth } from 'better-auth'
+import { tanstackStartCookies } from 'better-auth/tanstack-start'
+
+export const auth = betterAuth({
+  emailAndPassword: {
+    enabled: true,
+  },
+  plugins: [tanstackStartCookies()],
+})

package/add-ons/better-auth/assets/src/routes/api/auth/$.ts

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { auth } from '@/lib/auth'
+
+export const Route = createFileRoute('/api/auth/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => auth.handler(request),
+      POST: ({ request }) => auth.handler(request),
+    },
+  },
+})

package/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx

@@ -0,0 +1,232 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+
+export const Route = createFileRoute("/demo/better-auth")({
+  component: BetterAuthDemo,
+});
+
+function BetterAuthDemo() {
+  const { data: session, isPending } = authClient.useSession();
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  if (isPending) {
+    return (
+      <div className="flex items-center justify-center py-10">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
+      </div>
+    );
+  }
+
+  if (session?.user) {
+    return (
+      <div className="flex justify-center py-10 px-4">
+        <div className="w-full max-w-md p-6 space-y-6">
+          <div className="space-y-1.5">
+            <h1 className="text-lg font-semibold leading-none tracking-tight">
+              Welcome back
+            </h1>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              You're signed in as {session.user.email}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {session.user.image ? (
+              <img src={session.user.image} alt="" className="h-10 w-10" />
+            ) : (
+              <div className="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
+                <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                  {session.user.name?.charAt(0).toUpperCase() || "U"}
+                </span>
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {session.user.name}
+              </p>
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 truncate">
+                {session.user.email}
+              </p>
+            </div>
+          </div>
+
+          <button
+            onClick={() => authClient.signOut()}
+            className="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+          >
+            Sign out
+          </button>
+
+          <p className="text-xs text-center text-neutral-400 dark:text-neutral-500">
+            Built with{" "}
+            <a
+              href="https://better-auth.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+            >
+              BETTER-AUTH
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      if (isSignUp) {
+        const result = await authClient.signUp.email({
+          email,
+          password,
+          name,
+        });
+        if (result.error) {
+          setError(result.error.message || "Sign up failed");
+        }
+      } else {
+        const result = await authClient.signIn.email({
+          email,
+          password,
+        });
+        if (result.error) {
+          setError(result.error.message || "Sign in failed");
+        }
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex justify-center py-10 px-4">
+      <div className="w-full max-w-md p-6">
+        <h1 className="text-lg font-semibold leading-none tracking-tight">
+          {isSignUp ? "Create an account" : "Sign in"}
+        </h1>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+          {isSignUp
+            ? "Enter your information to create an account"
+            : "Enter your email below to login to your account"}
+        </p>
+
+        <form onSubmit={handleSubmit} className="grid gap-4">
+          {isSignUp && (
+            <div className="grid gap-2">
+              <label
+                htmlFor="name"
+                className="text-sm font-medium leading-none"
+              >
+                Name
+              </label>
+              <input
+                id="name"
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                required
+              />
+            </div>
+          )}
+
+          <div className="grid gap-2">
+            <label htmlFor="email" className="text-sm font-medium leading-none">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              required
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <label
+              htmlFor="password"
+              className="text-sm font-medium leading-none"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+              required
+              minLength={8}
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <span className="flex items-center justify-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-400 border-t-white dark:border-neutral-600 dark:border-t-neutral-900" />
+                <span>Please wait</span>
+              </span>
+            ) : isSignUp ? (
+              "Create account"
+            ) : (
+              "Sign in"
+            )}
+          </button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <button
+            type="button"
+            onClick={() => {
+              setIsSignUp(!isSignUp);
+              setError("");
+            }}
+            className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+          >
+            {isSignUp
+              ? "Already have an account? Sign in"
+              : "Don't have an account? Sign up"}
+          </button>
+        </div>
+
+        <p className="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
+          Built with{" "}
+          <a
+            href="https://better-auth.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+          >
+            BETTER-AUTH
+          </a>
+          .
+        </p>
+      </div>
+    </div>
+  );
+}

package/add-ons/better-auth/info.json

@@ -0,0 +1,29 @@
+{
+  "name": "Better Auth",
+  "description": "Add Better Auth authentication to your application.",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "auth",
+  "exclusive": ["auth"],
+  "color": "#000000",
+  "priority": 26,
+  "link": "https://www.better-auth.com",
+  "modes": ["file-router"],
+  "tailwind": true,
+  "dependsOn": ["start"],
+  "routes": [
+    {
+      "url": "/demo/better-auth",
+      "name": "Better Auth",
+      "path": "src/routes/demo/better-auth.tsx",
+      "jsName": "BetterAuthDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "jsName": "BetterAuthHeader",
+      "path": "src/integrations/better-auth/header-user.tsx"
+    }
+  ]
+}

package/add-ons/better-auth/logo.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<path d="M0 0 C165 0 330 0 500 0 C500 165 500 330 500 500 C335 500 170 500 0 500 C0 335 0 170 0 0 Z " fill="#000000" transform="translate(0,0)"/>
+<path d="M0 0 C28.71 0 57.42 0 87 0 C87 27.39 87 54.78 87 83 C119.01 83 151.02 83 184 83 C184 55.61 184 28.22 184 0 C242.41 0 300.82 0 361 0 C361 85.47 361 170.94 361 259 C302.59 259 244.18 259 184 259 C184 231.61 184 204.22 184 176 C151.99 176 119.98 176 87 176 C87 203.39 87 230.78 87 259 C58.29 259 29.58 259 0 259 C0 173.53 0 88.06 0 0 Z " fill="#FCFCFC" transform="translate(69,121)"/>
+<path d="M0 0 C58.41 0 116.82 0 177 0 C177 85.47 177 170.94 177 259 C118.59 259 60.18 259 0 259 C0 231.61 0 204.22 0 176 C28.05 176 56.1 176 85 176 C85 145.31 85 114.62 85 83 C56.95 83 28.9 83 0 83 C0 55.61 0 28.22 0 0 Z " fill="#FFFFFF" transform="translate(253,121)"/>
+<path d="M0 0 C27.72 0 55.44 0 84 0 C84 30.03 84 60.06 84 91 C56.28 91 28.56 91 0 91 C0 60.97 0 30.94 0 0 Z " fill="#000000" transform="translate(253,205)"/>
+</svg>

package/add-ons/better-auth/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "better-auth": "^1.4.12"
+  }
+}

package/add-ons/better-auth/small-logo.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 128 128" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 0 0 C 42.238281 0 84.480469 0 128 0 C 128 42.238281 128 84.480469 128 128 C 85.761719 128 43.519531 128 0 128 C 0 85.761719 0 43.519531 0 0 Z M 0 0 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.823529%,98.823529%,98.823529%);fill-opacity:1;" d="M 17.664062 30.976562 C 25.015625 30.976562 32.363281 30.976562 39.9375 30.976562 C 39.9375 37.988281 39.9375 45 39.9375 52.222656 C 48.128906 52.222656 56.324219 52.222656 64.769531 52.222656 C 64.769531 45.210938 64.769531 38.199219 64.769531 30.976562 C 79.722656 30.976562 94.675781 30.976562 110.078125 30.976562 C 110.078125 52.855469 110.078125 74.738281 110.078125 97.28125 C 95.128906 97.28125 80.175781 97.28125 64.769531 97.28125 C 64.769531 90.269531 64.769531 83.257812 64.769531 76.03125 C 56.574219 76.03125 48.378906 76.03125 39.9375 76.03125 C 39.9375 83.042969 39.9375 90.054688 39.9375 97.28125 C 32.585938 97.28125 25.238281 97.28125 17.664062 97.28125 C 17.664062 75.398438 17.664062 53.519531 17.664062 30.976562 Z M 17.664062 30.976562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 64.769531 30.976562 C 79.722656 30.976562 94.675781 30.976562 110.078125 30.976562 C 110.078125 52.855469 110.078125 74.738281 110.078125 97.28125 C 95.128906 97.28125 80.175781 97.28125 64.769531 97.28125 C 64.769531 90.269531 64.769531 83.257812 64.769531 76.03125 C 71.949219 76.03125 79.128906 76.03125 86.527344 76.03125 C 86.527344 68.175781 86.527344 60.320312 86.527344 52.222656 C 79.347656 52.222656 72.167969 52.222656 64.769531 52.222656 C 64.769531 45.210938 64.769531 38.199219 64.769531 30.976562 Z M 64.769531 30.976562 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 64.769531 52.480469 C 71.863281 52.480469 78.960938 52.480469 86.273438 52.480469 C 86.273438 60.167969 86.273438 67.855469 86.273438 75.777344 C 79.175781 75.777344 72.078125 75.777344 64.769531 75.777344 C 64.769531 68.089844 64.769531 60.402344 64.769531 52.480469 Z M 64.769531 52.480469 "/>
+</g>
+</svg>

package/add-ons/clerk/info.json

@@ -4,6 +4,9 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "auth",
+  "exclusive": ["auth"],
+  "color": "#6C47FF",
   "priority": 150,
   "link": "https://clerk.com",
   "tailwind": true,

package/add-ons/compiler/info.json

@@ -5,6 +5,8 @@
   "link": "https://react.dev/learn/react-compiler",
   "modes": ["code-router", "file-router"],
   "type": "add-on",
+  "category": "tooling",
+  "color": "#61DAFB",
   "priority": 50,
   "routes": []
 }

package/add-ons/convex/info.json

@@ -4,6 +4,9 @@
   "link": "https://convex.dev",
   "phase": "add-on",
   "type": "add-on",
+  "category": "database",
+  "exclusive": ["database", "orm"],
+  "color": "#EE342F",
   "priority": 140,
   "modes": ["file-router"],
   "routes": [

package/add-ons/db/info.json

@@ -3,6 +3,8 @@
   "description": "TanStack DB",
   "phase": "add-on",
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#00D1B2",
   "priority": 48,
   "modes": ["file-router"],
   "link": "https://tanstack.com/db/latest",

package/add-ons/drizzle/info.json

@@ -3,6 +3,9 @@
   "description": "Add Drizzle ORM to your application.",
   "phase": "add-on",
   "type": "add-on",
+  "category": "orm",
+  "exclusive": ["orm"],
+  "color": "#C026D3",
   "priority": 46,
   "link": "https://orm.drizzle.team/",
   "modes": ["file-router"],

package/add-ons/form/info.json

@@ -3,6 +3,8 @@
   "description": "TanStack Form",
   "phase": "add-on",
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#FACC15",
   "priority": 44,
   "modes": ["file-router", "code-router"],
   "link": "https://tanstack.com/form/latest",

package/add-ons/mcp/info.json

@@ -5,6 +5,8 @@
   "link": "https://mcp.dev",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "api",
+  "color": "#10B981",
   "priority": 42,
   "warning": "MCP is still in development and may change significantly or not be compatible with other add-ons.\nThe MCP implementation does not support authentication.",
   "routes": [

package/add-ons/module-federation/info.json

@@ -5,5 +5,7 @@
   "modes": ["code-router"],
   "link": "https://module-federation.io/",
   "type": "add-on",
+  "category": "tooling",
+  "color": "#1B72BE",
   "priority": 38
 }

package/add-ons/neon/info.json

@@ -4,6 +4,9 @@
   "link": "https://neon.com",
   "phase": "add-on",
   "type": "add-on",
+  "category": "database",
+  "exclusive": ["database"],
+  "color": "#00E599",
   "priority": 170,
   "modes": ["file-router"],
   "routes": [

package/add-ons/oRPC/info.json

@@ -6,6 +6,8 @@
   "link": "https://orpc.unnoq.com/",
   "dependsOn": ["tanstack-query", "start"],
   "type": "add-on",
+  "category": "api",
+  "color": "#FF6B6B",
   "priority": 34,
   "routes": [
     {

package/add-ons/paraglide/info.json

@@ -4,6 +4,8 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "i18n",
+  "color": "#14B8A6",
   "priority": 30,
   "link": "https://github.com/paraglidejs/paraglide-js",
   "routes": [

package/add-ons/prisma/info.json

@@ -3,6 +3,9 @@
   "description": "Add Prisma Postgres, or Prisma ORM with other DBs to your application.",
   "phase": "add-on",
   "type": "add-on",
+  "category": "orm",
+  "exclusive": ["orm"],
+  "color": "#2D3748",
   "priority": 120,
   "link": "https://www.prisma.io/",
   "modes": ["file-router"],

package/add-ons/sentry/info.json

@@ -5,6 +5,8 @@
   "link": "https://sentry.com/",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "monitoring",
+  "color": "#362D59",
   "priority": 130,
   "routes": [
     {

package/add-ons/shadcn/info.json

@@ -5,5 +5,7 @@
   "modes": ["file-router", "code-router"],
   "link": "https://ui.shadcn.com/",
   "type": "add-on",
+  "category": "styling",
+  "color": "#000000",
   "priority": 30
 }

package/add-ons/start/info.json

@@ -5,6 +5,8 @@
   "link": "https://tanstack.com/start/latest",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#00D1B2",
   "tailwind": false,
   "priority": 26,
   "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.\nMigrating to Start might require deleting node_modules and re-installing.",

package/add-ons/store/info.json

@@ -4,6 +4,8 @@
   "phase": "add-on",
   "link": "https://tanstack.com/store/latest",
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#00D1B2",
   "priority": 22,
   "modes": ["file-router", "code-router"],
   "routes": [

package/add-ons/storybook/info.json

@@ -5,6 +5,8 @@
   "modes": ["file-router"],
   "link": "https://storybook.js.org/",
   "type": "add-on",
+  "category": "tooling",
+  "color": "#FF4785",
   "priority": 18,
   "routes": [
     {

package/add-ons/strapi/info.json

@@ -4,6 +4,8 @@
   "link": "https://strapi.io/",
   "phase": "add-on",
   "type": "add-on",
+  "category": "cms",
+  "color": "#4945FF",
   "priority": 110,
   "modes": ["file-router"],
   "routes": [

package/add-ons/t3env/info.json

@@ -3,6 +3,8 @@
   "description": "Add type safety to your environment variables",
   "phase": "add-on",
   "type": "add-on",
+  "category": "tooling",
+  "color": "#6366F1",
   "priority": 29,
   "link": "https://github.com/t3-oss/t3-env",
   "modes": ["file-router", "code-router"]

package/add-ons/tRPC/info.json

@@ -6,6 +6,8 @@
   "link": "https://trpc.io/",
   "dependsOn": ["tanstack-query", "start"],
   "type": "add-on",
+  "category": "api",
+  "color": "#2596BE",
   "priority": 27,
   "routes": [
     {

package/add-ons/table/info.json

@@ -5,6 +5,8 @@
   "modes": ["file-router", "code-router"],
   "link": "https://tanstack.com/table/latest",
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#00D1B2",
   "priority": 28,
   "routes": [
     {

package/add-ons/tanstack-query/info.json

@@ -4,6 +4,8 @@
   "phase": "add-on",
   "modes": ["file-router", "code-router"],
   "type": "add-on",
+  "category": "tanstack",
+  "color": "#EF4444",
   "priority": 10,
   "link": "https://tanstack.com/query/latest",
   "routes": [

package/add-ons/workos/info.json

@@ -4,6 +4,9 @@
   "phase": "add-on",
   "modes": ["file-router"],
   "type": "add-on",
+  "category": "auth",
+  "exclusive": ["auth"],
+  "color": "#6363F1",
   "priority": 160,
   "link": "https://workos.com",
   "tailwind": true,

package/examples/events/info.json

@@ -4,6 +4,8 @@
   "phase": "example",
   "modes": ["file-router"],
   "type": "example",
+  "category": "other",
+  "color": "#F59E0B",
   "priority": 10,
   "link": "",
   "routes": [

package/examples/resume/info.json

@@ -4,6 +4,8 @@
   "phase": "example",
   "modes": ["file-router"],
   "type": "example",
+  "category": "other",
+  "color": "#8B5CF6",
   "priority": 10,
   "link": "",
   "routes": [

package/hosts/cloudflare/info.json

@@ -5,6 +5,9 @@
   "phase": "add-on",
   "modes": ["file-router", "code-router"],
   "type": "deployment",
+  "category": "deploy",
+  "exclusive": ["deploy"],
+  "color": "#F38020",
   "priority": 200,
   "tailwind": false,
   "integrations": [

package/hosts/cloudflare/{package.json → package.json.ejs}

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "deploy": "npm run build && wrangler deploy"
+    "deploy": "<%= packageManager %> run build && wrangler deploy"
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.13.8"

package/hosts/netlify/info.json

@@ -5,6 +5,9 @@
   "phase": "add-on",
   "modes": ["file-router", "code-router"],
   "type": "deployment",
+  "category": "deploy",
+  "exclusive": ["deploy"],
+  "color": "#00C7B7",
   "priority": 180,
   "tailwind": false,
   "integrations": [

package/hosts/nitro/info.json

@@ -5,6 +5,9 @@
   "phase": "add-on",
   "modes": ["file-router", "code-router"],
   "type": "deployment",
+  "category": "deploy",
+  "exclusive": ["deploy"],
+  "color": "#ECDC5A",
   "priority": 0,
   "tailwind": false,
   "integrations": [

package/hosts/railway/assets/nixpacks.toml

@@ -0,0 +1,8 @@
+[phases.setup]
+nixPkgs = ["nodejs_22"]
+
+[phases.build]
+cmds = ["npm install", "npm run build"]
+
+[start]
+cmd = "npm run start"

package/hosts/railway/info.json

@@ -0,0 +1,20 @@
+{
+  "name": "Railway",
+  "description": "Railway deployment setup",
+  "link": "https://railway.com/",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "deployment",
+  "category": "deploy",
+  "exclusive": ["deploy"],
+  "color": "#9B4DCA",
+  "priority": 160,
+  "tailwind": false,
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import { nitro } from 'nitro/vite'",
+      "code": "nitro()"
+    }
+  ]
+}

package/hosts/railway/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "nitro": "npm:nitro-nightly@latest"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.47.0",
+  "version": "0.48.1",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/cta-engine": "0.47.0"
+    "@tanstack/cta-engine": "0.49.0"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",

package/toolchains/biome/info.json

@@ -3,6 +3,9 @@
   "description": "Biome toolchain support.",
   "phase": "setup",
   "type": "toolchain",
+  "category": "tooling",
+  "exclusive": ["linter"],
+  "color": "#60A5FA",
   "priority": 2,
   "modes": ["code-router", "file-router"],
   "link": "https://biomejs.dev"

package/toolchains/eslint/info.json

@@ -3,6 +3,9 @@
   "description": "ESLint + Prettier toolchain support.",
   "phase": "setup",
   "type": "toolchain",
+  "category": "tooling",
+  "exclusive": ["linter"],
+  "color": "#4B32C3",
   "priority": 0,
   "modes": ["code-router", "file-router"],
   "link": "https://eslint.org"