@tanstack/create 0.49.1

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

@@ -0,0 +1,168 @@
+import { createServerFn } from '@tanstack/react-start'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+
+import { getClient } from '@/db'
+
+const getTodos = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  const client = await getClient()
+  if (!client) {
+    return undefined
+  }
+  return (await client.query(`SELECT * FROM todos`)) as Array<{
+    id: number
+    title: string
+  }>
+})
+
+const insertTodo = createServerFn({
+  method: 'POST',
+})
+  .inputValidator((d: { title: string }) => d)
+  .handler(async ({ data }) => {
+    const client = await getClient()
+    if (!client) {
+      return undefined
+    }
+    await client.query(`INSERT INTO todos (title) VALUES ($1)`, [data.title])
+  })
+
+export const Route = createFileRoute('/demo/neon')({
+  component: App,
+  loader: async () => {
+    const todos = await getTodos()
+    return { todos }
+  },
+})
+
+function App() {
+  const { todos } = Route.useLoaderData()
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.target as HTMLFormElement)
+    const data = Object.fromEntries(formData)
+    await insertTodo({ data: { title: data.title as string } })
+    router.invalidate()
+  }
+
+  if (!todos) {
+    return <DBConnectionError />
+  }
+
+  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(circle at 5% 40%, #63F655 0%, #00E0D9 40%, #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">
+        <div className="flex items-center justify-center gap-4 mb-8 bg-black/30 p-4 rounded-lg">
+          <div className="relative">
+            <div className="absolute -inset-1 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000"></div>
+            <div className="relative">
+              <img
+                src="/demo-neon.svg"
+                alt="Neon Logo"
+                className="w-12 h-12 transform hover:scale-110 transition-transform duration-200"
+              />
+            </div>
+          </div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-200 to-cyan-200 text-transparent bg-clip-text">
+            Neon Database Demo
+          </h1>
+        </div>
+        {todos && (
+          <>
+            <h1 className="text-2xl font-bold mb-4">Todos</h1>
+            <ul className="space-y-3 mb-6">
+              {todos.map((todo: { id: number; title: string }) => (
+                <li
+                  key={todo.id}
+                  className="bg-white/10 backdrop-blur-sm rounded-lg p-4 shadow-sm border border-white/20 transition-all hover:bg-white/20 hover:scale-[1.02] cursor-pointer group"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-lg font-medium group-hover:text-white/90">
+                      {todo.title}
+                    </span>
+                    <span className="text-xs text-white/50">#{todo.id}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+            <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
+              <input
+                type="text"
+                name="title"
+                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] bg-black/20"
+              />
+              <button
+                type="submit"
+                className="px-6 py-2 bg-[#00E0D9] text-black font-medium rounded-md hover:bg-[#00E0D9]/80 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] focus:ring-offset-2 transition-colors disabled:opacity-50 whitespace-nowrap"
+              >
+                Add Todo
+              </button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function DBConnectionError() {
+  return (
+    <div className="text-center space-y-6">
+      <div className="flex items-center justify-center mb-4">
+        <svg
+          className="w-12 h-12 text-amber-500"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      </div>
+      <h2 className="text-2xl font-bold mb-4">Database Connection Issue</h2>
+      <div className="text-lg mb-6">The Neon database is not connected.</div>
+      <div className="bg-black/30 p-6 rounded-lg max-w-xl mx-auto">
+        <h3 className="text-lg font-semibold mb-4">Required Steps to Fix:</h3>
+        <ul className="space-y-4 text-left list-none">
+          <li className="flex items-start">
+            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
+              1
+            </span>
+            <div>
+              Use the{' '}
+              <code className="bg-black/30 px-2 py-1 rounded">db/init.sql</code>{' '}
+              file to create the database
+            </div>
+          </li>
+          <li className="flex items-start">
+            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
+              2
+            </span>
+            <div>
+              Set the{' '}
+              <code className="bg-black/30 px-2 py-1 rounded">
+                DATABASE_URL
+              </code>{' '}
+              environment variable to the connection string of your Neon
+              database
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/neon/info.json

@@ -0,0 +1,29 @@
+{
+  "name": "Neon",
+  "description": "Add the Neon database to your application.",
+  "link": "https://neon.com",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "database",
+  "exclusive": ["database"],
+  "color": "#00E599",
+  "priority": 170,
+  "modes": ["file-router"],
+  "routes": [
+    {
+      "icon": "Database",
+      "url": "/demo/neon",
+      "name": "Neon",
+      "path": "src/routes/demo.neon.tsx",
+      "jsName": "NeonDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "jsName": "neon",
+      "path": "neon-vite-plugin.ts"
+    }
+  ],
+  "dependsOn": ["start"]
+}

package/src/frameworks/react/add-ons/neon/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@neondatabase/serverless": "^1.0.0",
+    "@neondatabase/vite-plugin-postgres": "^0.5.0"
+  }
+}

package/src/frameworks/react/add-ons/neon/small-logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" width="256" height="256" preserveAspectRatio="xMidYMid"><defs><linearGradient id="a" x1="100%" x2="12.069%" y1="100%" y2="0%"><stop offset="0%" stop-color="#62F755"/><stop offset="100%" stop-color="#8FF986" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="100%" x2="40.603%" y1="100%" y2="76.897%"><stop offset="0%" stop-opacity=".9"/><stop offset="100%" stop-color="#1A1A1A" stop-opacity="0"/></linearGradient></defs><path fill="#00E0D9" d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"/><path fill="url(#a)" d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"/><path fill="url(#b)" fill-opacity=".4" d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"/><path fill="#63F655" d="M211.861 0C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723a4.409 4.409 0 0 0 4.409-4.409V115.058c0-25.223 31.914-36.167 47.395-16.256l48.391 62.243V8.825c0-4.871-3.953-8.825-8.832-8.825Z"/></svg>

package/src/frameworks/react/add-ons/oRPC/assets/src/orpc/client.ts

@@ -0,0 +1,29 @@
+import { createRouterClient } from '@orpc/server'
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { createTanstackQueryUtils } from '@orpc/tanstack-query'
+import { getRequestHeaders } from '@tanstack/react-start/server'
+import { createIsomorphicFn } from '@tanstack/react-start'
+
+import type { RouterClient } from '@orpc/server'
+
+import router from '@/orpc/router'
+
+const getORPCClient = createIsomorphicFn()
+  .server(() =>
+    createRouterClient(router, {
+      context: () => ({
+        headers: getRequestHeaders(),
+      }),
+    }),
+  )
+  .client((): RouterClient<typeof router> => {
+    const link = new RPCLink({
+      url: `${window.location.origin}/api/rpc`,
+    })
+    return createORPCClient(link)
+  })
+
+export const client: RouterClient<typeof router> = getORPCClient()
+
+export const orpc = createTanstackQueryUtils(client)

package/src/frameworks/react/add-ons/oRPC/assets/src/orpc/router/index.ts

@@ -0,0 +1,6 @@
+import { addTodo, listTodos } from './todos'
+
+export default {
+  listTodos,
+  addTodo,
+}

package/src/frameworks/react/add-ons/oRPC/assets/src/orpc/router/todos.ts

@@ -0,0 +1,20 @@
+import { os } from '@orpc/server'
+import * as z from 'zod'
+
+const todos = [
+  { id: 1, name: 'Get groceries' },
+  { id: 2, name: 'Buy a new phone' },
+  { id: 3, name: 'Finish the project' },
+]
+
+export const listTodos = os.input(z.object({})).handler(() => {
+  return todos
+})
+
+export const addTodo = os
+  .input(z.object({ name: z.string() }))
+  .handler(({ input }) => {
+    const newTodo = { id: todos.length + 1, name: input.name }
+    todos.push(newTodo)
+    return newTodo
+  })

package/src/frameworks/react/add-ons/oRPC/assets/src/orpc/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod'
+
+export const TodoSchema = z.object({
+  id: z.number().int().min(1),
+  name: z.string(),
+})

package/src/frameworks/react/add-ons/oRPC/assets/src/polyfill.ts

@@ -0,0 +1,21 @@
+import { File } from "node:buffer";
+
+/**
+ * This file aims to polyfill missing APIs in Node.js 18 that oRPC depends on.
+ *
+ * Since Stackblitz runs on Node.js 18, these polyfills ensure oRPC works in that environment.
+ * If you're running oRPC locally, please use Node.js 20 or later for full compatibility.
+ */
+
+/**
+ * Note: Stackblitz provides an emulated Node.js environment with inherent limitations.
+ * If you encounter issues, please test on a local setup with Node.js 20 or later before reporting them.
+ */
+
+/**
+ * The `oz.file()` schema depends on the `File` API.
+ * If you're not using `oz.file()`, you can safely remove this polyfill.
+ */
+if (typeof globalThis.File === "undefined") {
+  globalThis.File = File as any;
+}

package/src/frameworks/react/add-ons/oRPC/assets/src/routes/api.$.ts

@@ -0,0 +1,77 @@
+import '@/polyfill'
+
+import { OpenAPIHandler } from '@orpc/openapi/fetch'
+import { ZodToJsonSchemaConverter } from '@orpc/zod/zod4'
+import { SmartCoercionPlugin } from '@orpc/json-schema'
+import { createFileRoute } from '@tanstack/react-router'
+import { onError } from '@orpc/server'
+import { OpenAPIReferencePlugin } from '@orpc/openapi/plugins'
+
+import { TodoSchema } from '@/orpc/schema'
+import router from '@/orpc/router'
+
+const handler = new OpenAPIHandler(router, {
+  interceptors: [
+    onError((error) => {
+      console.error(error)
+    }),
+  ],
+  plugins: [
+    new SmartCoercionPlugin({
+      schemaConverters: [new ZodToJsonSchemaConverter()],
+    }),
+    new OpenAPIReferencePlugin({
+      schemaConverters: [new ZodToJsonSchemaConverter()],
+      specGenerateOptions: {
+        info: {
+          title: 'TanStack ORPC Playground',
+          version: '1.0.0',
+        },
+        commonSchemas: {
+          Todo: { schema: TodoSchema },
+          UndefinedError: { error: 'UndefinedError' },
+        },
+        security: [{ bearerAuth: [] }],
+        components: {
+          securitySchemes: {
+            bearerAuth: {
+              type: 'http',
+              scheme: 'bearer',
+            },
+          },
+        },
+      },
+      docsConfig: {
+        authentication: {
+          securitySchemes: {
+            bearerAuth: {
+              token: 'default-token',
+            },
+          },
+        },
+      },
+    }),
+  ],
+})
+
+async function handle({ request }: { request: Request }) {
+  const { response } = await handler.handle(request, {
+    prefix: '/api',
+    context: {},
+  })
+
+  return response ?? new Response('Not Found', { status: 404 })
+}
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
+})

package/src/frameworks/react/add-ons/oRPC/assets/src/routes/api.rpc.$.ts

@@ -0,0 +1,29 @@
+import '@/polyfill'
+
+import { RPCHandler } from '@orpc/server/fetch'
+import { createFileRoute } from '@tanstack/react-router'
+import router from '@/orpc/router'
+
+const handler = new RPCHandler(router)
+
+async function handle({ request }: { request: Request }) {
+  const { response } = await handler.handle(request, {
+    prefix: '/api/rpc',
+    context: {},
+  })
+
+  return response ?? new Response('Not Found', { status: 404 })
+}
+
+export const Route = createFileRoute('/api/rpc/$')({
+  server: {
+    handlers: {
+      HEAD: handle,
+      GET: handle,
+      POST: handle,
+      PUT: handle,
+      PATCH: handle,
+      DELETE: handle,
+    },
+  },
+})

package/src/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery } from '@tanstack/react-query'
+
+import { orpc } from '@/orpc/client'
+
+export const Route = createFileRoute('/demo/orpc-todo')({
+  component: ORPCTodos,
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery(
+      orpc.listTodos.queryOptions({
+        input: {},
+      }),
+    )
+  },
+})
+
+function ORPCTodos() {
+  const { data, refetch } = useQuery(
+    orpc.listTodos.queryOptions({
+      input: {},
+    }),
+  )
+
+  const [todo, setTodo] = useState('')
+  const { mutate: addTodo } = useMutation({
+    mutationFn: orpc.addTodo.call,
+    onSuccess: () => {
+      refetch()
+      setTodo('')
+    },
+  })
+
+  const submitTodo = useCallback(() => {
+    addTodo({ name: todo })
+  }, [addTodo, todo])
+
+  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 50% 50%, #D2149D 0%, #8E1066 50%, #2D0A1F 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">oRPC 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>
+  )
+}

package/src/frameworks/react/add-ons/oRPC/info.json

@@ -0,0 +1,21 @@
+{
+  "name": "oRPC",
+  "description": "Integrate oRPC into your application.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "link": "https://orpc.unnoq.com/",
+  "dependsOn": ["tanstack-query", "start"],
+  "type": "add-on",
+  "category": "api",
+  "color": "#FF6B6B",
+  "priority": 34,
+  "routes": [
+    {
+      "icon": "Network",
+      "url": "/demo/orpc-todo",
+      "name": "oRPC Todo",
+      "path": "src/routes/demo.orpc-todo.tsx",
+      "jsName": "ORPCTodos"
+    }
+  ]
+}

package/src/frameworks/react/add-ons/oRPC/package.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@orpc/client": "^1.13.0",
+    "@orpc/json-schema": "^1.13.0",
+    "@orpc/openapi": "^1.13.0",
+    "@orpc/server": "^1.13.0",
+    "@orpc/tanstack-query": "^1.13.0",
+    "@orpc/zod": "^1.13.0",
+    "zod": "^4.2.1"
+  }
+}

package/src/frameworks/react/add-ons/oRPC/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none" viewBox="0 0 512 512"><rect width="512" height="512" fill="#398CCB" rx="150"/><path fill="#fff" fill-rule="evenodd" d="m255.446 75 71.077 41.008v22.548l86.031 49.682v84.986l23.077 13.322v82.062L364.6 409.615l-31.535-18.237-76.673 44.268-76.214-44.012-31.093 17.981-71.031-41.077v-81.992l22.177-12.803v-85.505l84.184-48.6.047-.002v-23.628L255.446 75Zm71.077 84.879v38.144l-71.031 41.008-71.03-41.008v-37.087l-.047.002-65.723 37.962v64.184l30.393-17.546 71.03 41.008v81.992l-21.489 12.427 57.766 33.358 58.226-33.611-21.049-12.174v-81.992l71.031-41.008 29.492 17.027V198.9l-67.569-39.021Zm-14.492 198.09v-50.054l43.338 25.016v50.054l-43.338-25.016Zm105.138-50.123-43.338 25.016v50.123l43.338-25.085v-50.054ZM96.515 357.9v-50.054l43.339 25.016v50.053L96.515 357.9Zm105.139-50.054-43.339 25.016v50.053l43.339-25.015v-50.054Zm119.608-15.923 43.338-25.015 43.338 25.015-43.338 25.039-43.338-25.039Zm-172.177-25.085-43.339 25.085 43.339 24.969 43.338-24.969-43.338-25.085Zm53.838-79.476v-50.054l43.292 25.038v50.031l-43.292-25.015Zm105.092-50.054-43.292 25.038v50.008l43.292-24.992v-50.054Zm-95.861-15.97 43.292-25.015 43.339 25.015-43.339 25.016-43.292-25.016Z" clip-rule="evenodd"/></svg>

package/src/frameworks/react/add-ons/paraglide/README.md

@@ -0,0 +1,7 @@
+# Paraglide i18n
+
+This add-on wires up ParaglideJS for localized routing and message formatting.
+
+- Messages live in `project.inlang/messages`.
+- URLs are localized through the Paraglide Vite plugin and router `rewrite` hooks.
+- Run the dev server or build to regenerate the `src/paraglide` outputs.

package/src/frameworks/react/add-ons/paraglide/assets/messages/de.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "home_page": "Startseite",
+  "about_page": "Über uns",
+  "example_message": "Willkommen in deiner i18n-App.",
+  "language_label": "Sprache",
+  "current_locale": "Aktuelle Sprache: {locale}",
+  "learn_router": "Paraglide JS lernen"
+}

package/src/frameworks/react/add-ons/paraglide/assets/messages/en.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "home_page": "Home page",
+  "about_page": "About page",
+  "example_message": "Welcome to your i18n app.",
+  "language_label": "Language",
+  "current_locale": "Current locale: {locale}",
+  "learn_router": "Learn Paraglide JS"
+}

package/src/frameworks/react/add-ons/paraglide/assets/project.inlang/settings.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "en",
+  "locales": ["en", "de"],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{locale}.json"
+  }
+}

package/src/frameworks/react/add-ons/paraglide/assets/src/components/LocaleSwitcher.tsx.ejs

@@ -0,0 +1,44 @@
+// Locale switcher refs:
+// - Paraglide docs: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
+// - Router example: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#switching-locale
+import { getLocale, locales, setLocale } from '@/paraglide/runtime'
+import { m } from '@/paraglide/messages'
+
+export default function ParaglideLocaleSwitcher() {
+  const currentLocale = getLocale()
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'center',
+        color: 'inherit',
+      }}
+      aria-label={m.language_label()}
+    >
+      <span style={{ opacity: 0.85 }}>{m.current_locale({ locale: currentLocale })}</span>
+      <div style={{ display: 'flex', gap: '0.25rem' }}>
+        {locales.map((locale) => (
+          <button
+            key={locale}
+            onClick={() => setLocale(locale)}
+            aria-pressed={locale === currentLocale}
+            style={{
+              cursor: 'pointer',
+              padding: '0.35rem 0.75rem',
+              borderRadius: '999px',
+              border: '1px solid #d1d5db',
+              background: locale === currentLocale ? '#0f172a' : 'transparent',
+              color: locale === currentLocale ? '#f8fafc' : 'inherit',
+              fontWeight: locale === currentLocale ? 700 : 500,
+              letterSpacing: '0.01em',
+            }}
+          >
+            {locale.toUpperCase()}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs

@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import logo from "../logo.svg";
+import { m } from "@/paraglide/messages";
+import LocaleSwitcher from "../components/LocaleSwitcher";
+
+export const Route = createFileRoute("/demo/i18n")({
+  component: App,
+});
+
+function App() {
+  return (
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] gap-4">
+        <img
+          src={logo}
+          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          alt="logo"
+        />
+        <p>{m.example_message({ username: "TanStack Router" })}</p>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://inlang.com/m/gerre34r/library-inlang-paraglideJs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {m.learn_router()}
+        </a>
+        <div className="mt-3">
+          <LocaleSwitcher />
+        </div>
+      </header>
+    </div>
+  );
+}