@tanstack/create 0.49.1

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

@@ -0,0 +1,138 @@
+<% if (addOnEnabled['start']) {
+/** Start todos implementation */  
+%>import { useCallback, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery, useMutation } from '@tanstack/react-query'
+
+export const Route = createFileRoute('/demo/tanstack-query')({
+  component: TanStackQueryDemo,
+})
+
+type Todo = {
+  id: number
+  name: string
+}
+
+function TanStackQueryDemo() {
+  const { data, refetch } = useQuery<Todo[]>({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/demo/api/tq-todos').then((res) => res.json()),
+    initialData: [],
+  })
+
+  const { mutate: addTodo } = useMutation({
+    mutationFn: (todo: string) =>
+      fetch('/demo/api/tq-todos', {
+        method: 'POST',
+        body: JSON.stringify(todo),
+      }).then((res) => res.json()),
+    onSuccess: () => refetch(),
+  })
+
+  const [todo, setTodo] = useState('')
+
+  const submitTodo = useCallback(async () => {
+    await addTodo(todo)
+    setTodo('')
+  }, [addTodo, todo])
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-900 via-red-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 80% 20%, #3B021F 0%, #7B1028 60%, #1A000A 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">TanStack Query Todos list</h1>
+        <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>
+          ))}
+        </ul>
+        <div className="flex flex-col gap-2">
+          <input
+            type="text"
+            value={todo}
+            onChange={(e) => setTodo(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitTodo()
+              }
+            }}
+            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"
+          />
+          <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"
+          >
+            Add todo
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+<% } else {
+/** Simple in-memory query implementation */
+%>import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/tanstack-query')({
+  component: TanStackQueryDemo,
+})
+<% } %>
+function TanStackQueryDemo() {
+  const { data } = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => Promise.resolve([
+      { id: 1, name: 'Alice' },
+      { id: 2, name: 'Bob' },
+      { id: 3, name: 'Charlie' },
+    ]),
+    initialData: [],
+  })
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 95% 5%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">TanStack Query Simple Promise Handling</h1>
+        <ul className="mb-4 space-y-2">
+          {data.map((todo) => (
+            <li
+              key={todo.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{todo.name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/tanstack-query',
+  component: TanStackQueryDemo,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+<% } %>

package/dist/frameworks/react/add-ons/tanstack-query/info.json

@@ -0,0 +1,32 @@
+{
+  "name": "Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "type": "add-on",
+  "category": "tanstack",
+  "color": "#EF4444",
+  "priority": 10,
+  "link": "https://tanstack.com/query/latest",
+  "routes": [
+    {
+      "icon": "Network",
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query",
+      "path": "src/routes/demo/tanstack-query.tsx",
+      "jsName": "TanStackQueryDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "root-provider",
+      "path": "src/integrations/tanstack-query/root-provider.tsx",
+      "jsName": "TanStackQueryProvider"
+    },
+    {
+      "type": "devtools",
+      "path": "src/integrations/tanstack-query/devtools.tsx",
+      "jsName": "TanStackQueryDevtools"
+    }
+  ]
+}

package/dist/frameworks/react/add-ons/tanstack-query/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.66.5",
+    "@tanstack/react-query-devtools": "^5.84.2"
+  }
+}

package/dist/frameworks/react/add-ons/tanstack-query/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 633 633"><defs><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="71.65%"><stop offset="0%" stop-color="#6BDAFF"/><stop offset="31.922%" stop-color="#F9FFB5"/><stop offset="70.627%" stop-color="#FFA770"/><stop offset="100%" stop-color="#FF7373"/></linearGradient><linearGradient id="d" x1="43.996%" x2="53.441%" y1="8.54%" y2="93.872%"><stop offset="0%" stop-color="#673800"/><stop offset="100%" stop-color="#B65E00"/></linearGradient><linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="f" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="g" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="h" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="j" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="k" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%"><stop offset="0%" stop-color="#EE2700"/><stop offset="100%" stop-color="#FF008E"/></linearGradient><linearGradient id="l" x1="61.109%" x2="43.717%" y1="3.633%" y2="43.072%"><stop offset="0%" stop-color="#FFF400"/><stop offset="100%" stop-color="#3C8700"/></linearGradient><linearGradient id="m" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFDF00"/><stop offset="100%" stop-color="#FF9D00"/></linearGradient><linearGradient id="n" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="o" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="p" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="q" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="r" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="s" x1="78.334%" x2="31.668%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="t" x1="57.913%" x2="44.88%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="u" x1="50.495%" x2="49.68%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><circle id="a" cx="308.5" cy="308.5" r="308.5"/><circle id="v" cx="307.5" cy="308.5" r="316.5"/></defs><g fill="none" fill-rule="evenodd" transform="translate(9 8)"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a" fill="url(#b)"/><ellipse cx="81.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><g mask="url(#c)"><path fill="url(#d)" stroke="#6E3A00" stroke-width="6.088" d="M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927" transform="scale(-1 1) rotate(25 -300.37 -553.013)"/><g stroke="#2F8A00"><path fill="url(#e)" stroke-width="9.343" d="M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#f)" stroke-width="9.343" d="M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#g)" stroke-width="9.343" d="M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#h)" stroke-width="9.343" d="M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#i)" stroke-width="9.343" d="M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#j)" stroke-width="9.343" d="M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z" transform="rotate(1 -6061.691 5926.397)"/><path stroke-linecap="round" stroke-width="5.91" d="M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216"/><path stroke-linecap="round" stroke-width="5.91" d="M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617"/></g><path stroke="#830305" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="6.937" d="m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816"/><path fill="url(#k)" d="M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z" transform="scale(-1 1) rotate(-9 2092.128 2856.854)"/><path fill="#D8D8D8" stroke="#FFF" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="4.414" d="m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497"/></g><ellipse cx="308.5" cy="720.5" fill="url(#l)" mask="url(#c)" rx="266" ry="316.5"/><ellipse cx="308.5" cy="720.5" stroke="#6DA300" stroke-opacity=".502" stroke-width="26" mask="url(#c)" rx="253" ry="303.5"/><g mask="url(#c)"><g transform="translate(389 -32)"><circle cx="168.5" cy="113.5" r="113.5" fill="url(#m)"/><circle cx="168.5" cy="113.5" r="106" stroke="#FFC900" stroke-opacity=".529" stroke-width="15"/><path stroke="url(#n)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M30 113H0"/><path stroke="url(#o)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M33.5 79.5 7 74"/><path stroke="url(#p)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m34 146-29 8"/><path stroke="url(#q)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m45 177-24 13"/><path stroke="url(#r)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m67 204-20 19"/><path stroke="url(#s)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m94.373 227-13.834 22.847"/><path stroke="url(#t)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M127.5 243.5 120 268"/><path stroke="url(#u)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m167.5 252.5.5 24.5"/></g></g><circle cx="307.5" cy="308.5" r="304" stroke="#000" stroke-width="25"/></g></svg>

package/dist/frameworks/react/add-ons/workos/README.md

@@ -0,0 +1,3 @@
+## Setting up WorkOS
+
+- Set the `VITE_WORKOS_CLIENT_ID` in your `.env.local`.

package/dist/frameworks/react/add-ons/workos/assets/_dot_env.local.append

@@ -0,0 +1,4 @@
+VITE_WORKOS_CLIENT_ID=
+
+# This should be your Custom Authentication Domain in production
+VITE_WORKOS_API_HOSTNAME=api.workos.com

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

@@ -0,0 +1,41 @@
+import { useAuth } from '@workos-inc/authkit-react'
+
+export default function SignInButton({ large }: { large?: boolean }) {
+  const { user, isLoading, signIn, signOut } = useAuth()
+
+  const buttonClasses = `${
+    large ? 'px-6 py-3 text-base' : 'px-4 py-2 text-sm'
+  } bg-blue-600 hover:bg-blue-700 text-white font-medium rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed`
+
+  if (user) {
+    return (
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center gap-2">
+          {user.profilePictureUrl && (
+            <img
+              src={user.profilePictureUrl}
+              alt={`Avatar of ${user.firstName} ${user.lastName}`}
+              className="w-10 h-10 rounded-full"
+            />
+          )}
+          {user.firstName} {user.lastName}
+        </div>
+        <button onClick={() => signOut()} className={buttonClasses}>
+          Sign Out
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={() => {
+        signIn()
+      }}
+      className={buttonClasses}
+      disabled={isLoading}
+    >
+      Sign In {large && 'with AuthKit'}
+    </button>
+  )
+}

package/dist/frameworks/react/add-ons/workos/assets/src/hooks/useUser.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useAuth } from "@workos-inc/authkit-react";
+import { useLocation } from "@tanstack/react-router";
+
+type UserOrNull = ReturnType<typeof useAuth>["user"];
+
+// redirects to the sign-in page if the user is not signed in
+export const useUser = (): UserOrNull => {
+  const { user, isLoading, signIn } = useAuth();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!isLoading && !user) {
+      signIn({
+        state: { returnTo: location.pathname },
+      });
+    } else {
+      console.log(user);
+    }
+  }, [isLoading, user]);
+
+  return user;
+};

package/dist/frameworks/react/add-ons/workos/assets/src/integrations/workos/provider.tsx

@@ -0,0 +1,34 @@
+import { AuthKitProvider } from '@workos-inc/authkit-react'
+import { useNavigate } from '@tanstack/react-router'
+
+const VITE_WORKOS_CLIENT_ID = import.meta.env.VITE_WORKOS_CLIENT_ID
+if (!VITE_WORKOS_CLIENT_ID) {
+  throw new Error('Add your WorkOS Client ID to the .env.local file')
+}
+
+const VITE_WORKOS_API_HOSTNAME = import.meta.env.VITE_WORKOS_API_HOSTNAME
+if (!VITE_WORKOS_API_HOSTNAME) {
+  throw new Error('Add your WorkOS API Hostname to the .env.local file')
+}
+
+export default function AppWorkOSProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const navigate = useNavigate()
+
+  return (
+    <AuthKitProvider
+      clientId={VITE_WORKOS_CLIENT_ID}
+      apiHostname={VITE_WORKOS_API_HOSTNAME}
+      onRedirectCallback={({ state }) => {
+        if (state?.returnTo) {
+          navigate(state.returnTo)
+        }
+      }}
+    >
+      {children}
+    </AuthKitProvider>
+  )
+}

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

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

package/dist/frameworks/react/add-ons/workos/info.json

@@ -0,0 +1,34 @@
+{
+  "name": "WorkOS",
+  "description": "Add WorkOS authentication to your application.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "auth",
+  "exclusive": ["auth"],
+  "color": "#6363F1",
+  "priority": 160,
+  "link": "https://workos.com",
+  "tailwind": true,
+  "routes": [
+    {
+      "icon": "CircleUserRound",
+      "url": "/demo/workos",
+      "name": "WorkOS",
+      "path": "src/routes/demo.workos.tsx",
+      "jsName": "WorkOSDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "jsName": "WorkOSHeader",
+      "path": "src/components/workos-user.tsx"
+    },
+    {
+      "type": "provider",
+      "jsName": "WorkOSProvider",
+      "path": "src/integrations/workos/provider.tsx"
+    }
+  ]
+}

package/dist/frameworks/react/add-ons/workos/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@workos-inc/authkit-react": "^0.13.0",
+    "zod": "^4.1.11"
+  }
+}

package/dist/frameworks/react/add-ons/workos/small-logo.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 242 242" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 120.999C1 125.559 2.2 130.119 4.52 134.039L46.5999 206.919C50.9199 214.359 57.4799 220.44 65.6399 223.16C81.7199 228.52 98.3599 221.64 106.28 207.88L116.44 190.279L76.3599 120.999L128.84 30.04C131.88 24.76 135.96 20.44 140.76 17H75.4799C64.0399 17 53.4799 23.08 47.7999 33L4.52 107.96C2.2 111.88 1 116.439 1 120.999Z" fill="#FFFFFF"/>
+<path d="M241 120.999C241 116.439 239.8 111.879 237.48 107.959L194.84 34.1192C186.92 20.4392 170.28 13.5592 154.2 18.8392C146.04 21.5592 139.48 27.6392 135.16 35.0792L125.56 51.6392L165.64 120.999L113.16 211.958C110.12 217.158 106.04 221.558 101.24 224.998H166.52C177.96 224.998 188.52 218.918 194.2 208.998L237.48 134.039C239.8 130.119 241 125.559 241 120.999Z" fill="#FFFFFF"/>
+</svg>

package/dist/frameworks/react/examples/events/README.md

@@ -0,0 +1,110 @@
+# Events Example - Haute Pâtisserie 2026
+
+A beautiful pastry conference website built with TanStack Start and Netlify, featuring:
+
+- **Speakers & Sessions**: Managed with content-collections for easy markdown-based content
+- **Conference Schedule**: Day-by-day timeline of all sessions
+- **AI Assistant (Remy)**: An AI-powered chat assistant to help attendees navigate the conference
+- **Elegant Dark Theme**: Custom typography with Playfair Display and copper/gold accents
+
+## Features
+
+### Content Management
+- Speaker profiles with bios, awards, and specialty information
+- Session details with topics, duration, and speaker attribution
+- All content in markdown files using content-collections
+
+### AI-Powered Assistance
+- Chat with "Remy" the culinary assistant
+- Search for speakers and sessions by topic
+- Get recommendations based on interests
+- Supports multiple AI providers (Anthropic, OpenAI, Gemini, Ollama)
+
+### Routes
+- `/` - Home page with featured speakers and sessions
+- `/schedule` - Conference schedule with day-by-day timeline
+- `/speakers` - All speakers grid
+- `/speakers/:slug` - Individual speaker detail page
+- `/talks` - All sessions grid
+- `/talks/:slug` - Individual session detail page
+
+## Getting Started
+
+```bash
+# Create a new project with this example
+npx netlify-cta my-conference --example events
+
+# Navigate to the project
+cd my-conference
+
+# Install dependencies
+pnpm install
+
+# Start the development server
+pnpm dev
+```
+
+## AI Configuration
+
+To use the AI assistant, set one of the following environment variables:
+
+```bash
+# Anthropic (Claude)
+ANTHROPIC_API_KEY=your-key-here
+
+# OpenAI
+OPENAI_API_KEY=your-key-here
+
+# Google Gemini
+GEMINI_API_KEY=your-key-here
+
+# Ollama (local, no API key needed)
+# Just ensure Ollama is running locally
+```
+
+The assistant will automatically use the first available provider.
+
+## Customization
+
+### Adding Speakers
+Create a new markdown file in `content/speakers/`:
+
+```markdown
+---
+name: "Chef Name"
+title: "Executive Pastry Chef"
+specialty: "French Pastry"
+restaurant: "Restaurant Name"
+location: "City, Country"
+headshot: "speakers/chef-name.jpg"
+awards:
+  - "Award 1"
+  - "Award 2"
+---
+
+Bio content here...
+```
+
+### Adding Sessions
+Create a new markdown file in `content/talks/`:
+
+```markdown
+---
+title: "Session Title"
+speaker: "Chef Name"
+duration: "90 minutes"
+image: "talks/session-image.jpg"
+topics:
+  - "Topic 1"
+  - "Topic 2"
+---
+
+Session description here...
+```
+
+## Theme
+
+The example uses a custom dark theme with:
+- **Font**: Playfair Display (display) and Cormorant Garamond (body)
+- **Colors**: Copper and gold accents on a dark charcoal background
+- **Effects**: Elegant card hover animations, grain texture overlay

package/dist/frameworks/react/examples/events/assets/content/speakers/andre-costa.md

@@ -0,0 +1,22 @@
+---
+name: "André Costa"
+title: "Master Confeiteiro"
+specialty: "Portuguese Pastries & Mediterranean Breads"
+restaurant: "Pastelaria Ouro"
+location: "Lisbon, Portugal"
+headshot: "speakers/andre-costa.jpg"
+awards:
+  - "Portuguese National Gastronomy Prize 2020"
+  - "Pastéis de Belém Certified Master"
+  - "European Baker of the Year 2019"
+---
+
+André Costa is the guardian of Portugal's rich pastry heritage and an ambassador for Mediterranean bread traditions. His life's work has been dedicated to preserving, perfecting, and sharing the techniques behind iconic Portuguese sweets — from the legendary pastel de nata to the lesser-known regional treasures that deserve global recognition.
+
+André's training began at age sixteen at Pastéis de Belém, the historic Lisbon bakery that has guarded the original pastel de nata recipe since 1837. For twelve years, he worked within their closely guarded production, eventually becoming one of only a handful of people entrusted with the complete, secret recipe. The discipline and precision required to produce thousands of identical custard tarts daily became the foundation of his craft.
+
+But André's curiosity extended beyond Lisbon. He spent years traveling the Mediterranean coast — from the Algarve to Morocco, Sicily to Lebanon — studying the bread traditions that connect these cultures. He became fascinated by how similar techniques evolved differently across regions, and how the sea, the wheat, and the olive oil created distinct but related culinary identities.
+
+Pastelaria Ouro, opened in Lisbon's Alfama district in 2018, showcases both Portuguese classics and André's Mediterranean discoveries. The morning pastry case features perfect pastéis de nata alongside Sicilian brioche, Moroccan msemen, and his own creations that blend traditions. The afternoon bread service offers naturally leavened loaves baked in a wood-fired oven built to his specifications.
+
+André is also a passionate historian, having written two books on Portuguese pastry traditions and consulting for UNESCO on the cultural preservation of Mediterranean baking heritage.

package/dist/frameworks/react/examples/events/assets/content/speakers/hans-mueller.md

@@ -0,0 +1,22 @@
+---
+name: "Hans Mueller"
+title: "Master Baker"
+specialty: "Viennoiserie & Laminated Doughs"
+restaurant: "Das Brotwerk"
+location: "Munich, Germany"
+headshot: "speakers/hans-mueller.jpg"
+awards:
+  - "German Master Baker Certification"
+  - "Coupe du Monde de la Boulangerie Silver 2016"
+  - "Austrian Chamber of Commerce Gold Medal"
+---
+
+Hans Mueller represents the sixth generation of his family to pursue the art of baking, carrying forward a tradition that began in a small Austrian village in 1847. His mastery of laminated doughs — the painstaking process of folding butter into dough to create hundreds of flaky layers — is considered unparalleled in the German-speaking world.
+
+Hans's formal training began at age fourteen as an apprentice in his father's bakery in Salzburg. He later refined his skills at the prestigious bakery of the Vienna State Opera, where he spent eight years supplying pastries for intermission service and exclusive galas. The pressure of producing hundreds of perfect croissants and Kipferl daily, with no margin for error, forged his legendary precision.
+
+What sets Hans apart is his scientific approach to an ancient craft. He has collaborated with food scientists at the Technical University of Munich to study the crystalline structure of butter at various temperatures, the gluten networks in different flour types, and the fermentation kinetics that create flavor. His findings have been published in academic journals and have influenced professional bakers worldwide.
+
+Das Brotwerk, his Munich bakery and teaching academy, opened in 2017. The space features a glass-walled production kitchen where visitors can observe the lamination process in real-time. His signature "288-Layer Croissant" — a technical feat requiring three days of preparation — has been called "the platonic ideal of the form" by *Die Zeit*.
+
+Hans is also dedicated to preserving traditional Germanic baking techniques, maintaining an archive of historical recipes and training the next generation in methods that might otherwise be lost.

package/dist/frameworks/react/examples/events/assets/content/speakers/isabella-martinez.md

@@ -0,0 +1,22 @@
+---
+name: "Isabella Martinez"
+title: "Head Baker & Founder"
+specialty: "Artisan Bread & Sourdough"
+restaurant: "Madre Masa"
+location: "San Francisco, USA"
+headshot: "speakers/isabella-martinez.jpg"
+awards:
+  - "San Francisco Chronicle Rising Star 2021"
+  - "Bread Bakers Guild of America Master Baker"
+  - "Slow Food Presidium Recognition"
+---
+
+Isabella Martinez's love affair with bread began in her grandmother's kitchen in Mexico City, where she learned that bread is more than sustenance — it's culture, community, and love made tangible. That foundation led her on a journey through the world's great bread traditions, ultimately landing at San Francisco's legendary Tartine Bakery.
+
+During her four years at Tartine, Isabella immersed herself in the art and science of long-fermentation breads. She developed an obsession with understanding the living ecosystems within sourdough starters, eventually cultivating over twenty distinct cultures from around the world, each with unique flavor profiles and characteristics.
+
+Her technical mastery is matched by her commitment to sustainable sourcing. Isabella works directly with small-scale grain farmers throughout California and Mexico, championing heritage wheat varieties that were nearly lost to industrial agriculture. Her "Oaxacan Heritage Loaf," made with ancestral Mexican wheat and local California grains, has become a symbol of the neo-locavore bread movement.
+
+Madre Masa, which Isabella founded in 2019 in San Francisco's Mission District, operates as both bakery and community hub. The space hosts weekly bread-making workshops, partners with local food banks, and has become a gathering place for the Bay Area's food community. Her naturally leavened pizza, served only on weekend evenings, regularly draws three-hour waits.
+
+Isabella believes that bread connects us to millennia of human history and that every loaf tells a story of the land, the grain, and the hands that shaped it.