@tanstack/create 0.49.1

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

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "build": "vite build && cp instrument.server.mjs .output/server",
+    "dev": "dotenv -e .env.local -- sh -c \"NODE_OPTIONS='--import ./instrument.server.mjs' vite dev --port 3000\"",
+    "start": "node --import ./.output/server/instrument.server.mjs .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@sentry/tanstackstart-react": "^10.22.0",
+    "dotenv-cli": "^11.0.0"
+  }
+}

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="227" preserveAspectRatio="xMidYMid" viewBox="0 0 256 227"><path fill="#362D59" d="M148.368 12.403a23.935 23.935 0 0 0-41.003 0L73.64 70.165c52.426 26.174 87.05 78.177 90.975 136.642h-23.679c-3.918-50.113-34.061-94.41-79.238-116.448l-31.213 53.97a81.595 81.595 0 0 1 47.307 62.375h-54.38a3.895 3.895 0 0 1-3.178-5.69l15.069-25.626a55.046 55.046 0 0 0-17.221-9.738L3.167 191.277a23.269 23.269 0 0 0 8.662 31.982 23.884 23.884 0 0 0 11.583 3.075h74.471a99.432 99.432 0 0 0-41.003-88.72l11.84-20.5c35.679 24.504 55.754 66.038 52.79 109.22h63.094c2.99-65.43-29.047-127.512-84.107-162.986l23.935-41.002a3.947 3.947 0 0 1 5.382-1.384c2.716 1.486 103.993 178.208 105.89 180.258a3.895 3.895 0 0 1-3.486 5.792h-24.396c.307 6.526.307 13.035 0 19.528h24.499A23.528 23.528 0 0 0 256 202.91a23.015 23.015 0 0 0-3.178-11.685L148.368 12.403Z"/></svg>

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

@@ -0,0 +1,7 @@
+## Shadcn
+
+Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
+
+```bash
+pnpm dlx shadcn@latest add button
+```

package/dist/frameworks/react/add-ons/shadcn/assets/_dot_cursorrules.append

@@ -0,0 +1,7 @@
+# shadcn instructions
+
+Use the latest version of Shadcn to install new components, like this command to add a button component:
+
+```bash
+pnpm dlx shadcn@latest add button
+```

package/dist/frameworks/react/add-ons/shadcn/assets/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/dist/frameworks/react/add-ons/shadcn/assets/src/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/frameworks/react/add-ons/shadcn/assets/src/styles.css

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "name": "Shadcn",
+  "description": "Add Shadcn UI to your application.",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "link": "https://ui.shadcn.com/",
+  "type": "add-on",
+  "category": "styling",
+  "color": "#000000",
+  "priority": 30
+}

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

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "tailwind-merge": "^3.0.2",
+    "tw-animate-css": "^1.3.6"
+  }
+}

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="none" d="M0 0h256v256H0z"/><path fill="none" stroke="#fff" stroke-width="25" stroke-linecap="round" d="M208 128l-80 80M192 40L40 192"/></svg>

package/dist/frameworks/react/add-ons/start/assets/_dot_gitignore.append

@@ -0,0 +1,3 @@
+.output
+.vinxi
+todos.json

package/dist/frameworks/react/add-ons/start/assets/src/data/demo.punk-songs.js

@@ -0,0 +1,12 @@
+import { createServerFn } from "@tanstack/react-start";
+export const getPunkSongs = createServerFn({
+    method: "GET",
+}).handler(async () => [
+    { id: 1, name: "Teenage Dirtbag", artist: "Wheatus" },
+    { id: 2, name: "Smells Like Teen Spirit", artist: "Nirvana" },
+    { id: 3, name: "The Middle", artist: "Jimmy Eat World" },
+    { id: 4, name: "My Own Worst Enemy", artist: "Lit" },
+    { id: 5, name: "Fat Lip", artist: "Sum 41" },
+    { id: 6, name: "All the Small Things", artist: "blink-182" },
+    { id: 7, name: "Beverly Hills", artist: "Weezer" },
+]);

package/dist/frameworks/react/add-ons/start/assets/src/router.tsx.ejs

@@ -0,0 +1,77 @@
+import { createRouter } from '@tanstack/react-router'<% if (addOnEnabled['tanstack-query']) { %>
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import * as TanstackQuery from "./integrations/tanstack-query/root-provider";
+<% } %><% if (addOnEnabled['apollo-client']) { %>
+import {
+  routerWithApolloClient,
+  ApolloClient,
+  InMemoryCache,
+} from "@apollo/client-integration-tanstack-start";
+import { HttpLink } from "@apollo/client";
+<% } %>
+<% if (addOnEnabled.sentry) { %>
+import * as Sentry from "@sentry/tanstackstart-react";
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime";
+<% } %>
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+<% if (addOnEnabled['apollo-client']) { %>
+  // Configure Apollo Client
+  const apolloClient = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: import.meta.env.VITE_GRAPHQL_ENDPOINT || "https://countries.trevorblades.com/"
+    }),
+  });
+<% } %>
+<% if (addOnEnabled['tanstack-query']) { %>
+  const rqContext = TanstackQuery.getContext();
+<% } %>
+
+  const router = createRouter({
+    routeTree,
+    context: {
+<% if (addOnEnabled['apollo-client']) { %>
+      ...routerWithApolloClient.defaultContext,
+<% } %>
+<% if (addOnEnabled['tanstack-query']) { %>
+      ...rqContext,
+<% } %>
+    },
+<% if (addOnEnabled.paraglide) { %>
+    // Paraglide URL rewrite docs: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#rewrite-url
+    rewrite: {
+      input: ({ url }) => deLocalizeUrl(url),
+      output: ({ url }) => localizeUrl(url),
+    },
+<% } %>
+<% if (addOnEnabled['tanstack-query'] || addOnEnabled['apollo-client']) { %>
+    defaultPreload: "intent",
+<% } else { %>
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+<% } %>
+  })
+
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})
+<% } %>
+
+<% if (addOnEnabled.sentry) { %>
+  if (!router.isServer) {
+    Sentry.init({
+      dsn: import.meta.env.VITE_SENTRY_DSN,
+      integrations: [],
+      tracesSampleRate: 1.0,
+      sendDefaultPii: true,
+    });
+  }
+<% } %>
+
+  return <% if (addOnEnabled['apollo-client']) { %>routerWithApolloClient(router, apolloClient)<% } else { %>router<% } %>;
+}

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/api.names.js

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { json } from '@tanstack/react-start';
+export const Route = createFileRoute('/demo/api/names')({
+    server: {
+        handlers: {
+            GET: () => json(['Alice', 'Bob', 'Charlie']),
+        },
+    },
+});

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/api.tq-todos.ts.ejs

@@ -0,0 +1,35 @@
+<% if (!addOnEnabled['tanstack-query']) { ignoreFile() } %>import { createFileRoute } from '@tanstack/react-router'
+
+const todos = [
+  {
+    id: 1,
+    name: 'Buy groceries',
+  },
+  {
+    id: 2,
+    name: 'Buy mobile phone',
+  },
+  {
+    id: 3,
+    name: 'Buy laptop',
+  },
+]
+
+export const Route = createFileRoute('/demo/api/tq-todos')({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json(todos)
+      },
+      POST: async ({ request }) => {
+        const name = await request.json()
+        const todo = {
+          id: todos.length + 1,
+          name,
+        }
+        todos.push(todo)
+        return Response.json(todo)
+      },
+    },
+  },
+})

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.api-request.tsx.ejs

@@ -0,0 +1,68 @@
+<% if (addOnEnabled['tanstack-query']) { %>
+import { useQuery } from '@tanstack/react-query'
+<% } else { %>
+import { useEffect, useState } from 'react'
+<% } %>
+import { createFileRoute } from '@tanstack/react-router'<% if (!tailwind) { %>
+import './start.css'
+<% } %>
+
+function getNames() {
+  return fetch('/demo/api/names').then((res) => res.json() as Promise<string[]>)
+}
+
+export const Route = createFileRoute('/demo/start/api-request')({
+  component: Home,
+})
+
+function Home() {
+  <% if (addOnEnabled['tanstack-query']) { %>
+    const { data: names = [] } = useQuery({
+      queryKey: ['names'],
+      queryFn: getNames,
+    })
+  <% } else { %>
+    const [names, setNames] = useState<Array<string>>([])
+      
+    useEffect(() => {
+      getNames().then(setNames)
+    }, [])
+  <% } %>
+  return (
+<% if (tailwind) { %>
+    <div
+      className="flex items-center justify-center min-h-screen p-4 text-white"
+      style={{
+        backgroundColor: '#000',
+        backgroundImage:
+          'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 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">Start API Request Demo - Names List</h1>
+        <ul className="mb-4 space-y-2">
+          {names.map((name) => (
+            <li
+              key={name}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+<% } else { %>
+    <div className="api-page">
+      <div className="content">
+        <h1>Start API Request Demo - Names List</h1>
+        <ul>
+          {names.map((name) => (
+            <li key={name}>{name}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+<% } %>
+  )
+}

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.css.ejs

@@ -0,0 +1,43 @@
+<% if (tailwind) { ignoreFile() } %>.api-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+  color: #fff;
+}
+
+.api-page .content {
+  width: 100%;
+  max-width: 2xl;
+  padding: 8rem;
+  border-radius: 1rem;
+  backdrop-filter: blur(1rem);
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
+  border: 0.5rem solid rgba(0, 0, 0, 0.1);
+}
+
+.api-page .content h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.api-page .content ul {
+  margin-bottom: 1rem;
+  list-style: none;
+  padding: 0;
+}
+
+.api-page .content li {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(0.5rem);
+  box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.1);
+}
+
+.api-page .content li span {
+  font-size: 1.2rem;
+}

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx.ejs

@@ -0,0 +1,183 @@
+<% if (addOnEnabled.cloudflare) { %>import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const getCurrentServerTime = createServerFn({
+  method: "GET",
+}).handler(async () => await new Date().toISOString());
+
+export const Route = createFileRoute("/demo/start/server-funcs")({
+  component: Home,
+  loader: async () => await getCurrentServerTime(),
+});
+
+function Home() {
+  const originalTime = Route.useLoaderData();
+  const [time, setTime] = useState(originalTime);
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          "radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 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">Start Server Functions - Server Time</h1>
+        <div className="flex flex-col gap-2">
+          <div className="text-xl">Starting Time: {originalTime}</div>
+          <div className="text-xl">Current Time: {time}</div>
+          <button
+            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"
+            onClick={async () => setTime(await getCurrentServerTime())}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+<% } else { %>import fs from 'node:fs'
+import { useCallback, useState } from 'react'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'<% if (!tailwind) { %>
+import './start.css'
+<% } %>
+
+/*
+const loggingMiddleware = createMiddleware().server(
+  async ({ next, request }) => {
+    console.log("Request:", request.url);
+    return next();
+  }
+);
+const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
+  loggingMiddleware,
+]);
+*/
+
+const TODOS_FILE = 'todos.json'
+
+async function readTodos() {
+  return JSON.parse(
+    await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
+      JSON.stringify(
+        [
+          { id: 1, name: 'Get groceries' },
+          { id: 2, name: 'Buy a new phone' },
+        ],
+        null,
+        2,
+      ),
+    ),
+  )
+}
+
+const getTodos = createServerFn({
+  method: 'GET',
+}).handler(async () => await readTodos())
+
+const addTodo = createServerFn({ method: 'POST' })
+  .inputValidator((d: string) => d)
+  .handler(async ({ data }) => {
+    const todos = await readTodos()
+    todos.push({ id: todos.length + 1, name: data })
+    await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
+    return todos
+  })
+
+export const Route = createFileRoute('/demo/start/server-funcs')({
+  component: Home,
+  loader: async () => await getTodos(),
+})
+
+function Home() {
+  const router = useRouter()
+  let todos = Route.useLoaderData()
+
+  const [todo, setTodo] = useState('')
+
+  const submitTodo = useCallback(async () => {
+    todos = await addTodo({ data: todo })
+    setTodo('')
+    router.invalidate()
+  }, [addTodo, todo])
+
+  return (
+<% if (tailwind) { %>
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 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">Start Server Functions - Todo Example</h1>
+        <ul className="mb-4 space-y-2">
+          {todos?.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 { %>
+    <div>
+      <h1>Start Server Functions - Todo Example</h1>
+      <ul>
+        {todos?.map((t) => (
+          <li key={t.id}>{t.name}</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..."
+      />
+      <button
+        disabled={todo.trim().length === 0}
+        onClick={submitTodo}
+      >
+        Add todo
+      </button>
+    </div>
+</div>
+<% } %>
+  )
+}
+<% } %>