@tanstack/create 0.49.1

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+export interface SliderProps {
+  label: string;
+  id: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+  className?: string;
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  label,
+  id,
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = true,
+  className = "",
+}) => {
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      <div className="flex justify-between items-center">
+        <label
+          htmlFor={id}
+          className="text-sm font-medium text-gray-700 dark:text-gray-200"
+        >
+          {label}
+        </label>
+        {showValue && (
+          <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 min-w-12 text-right">
+            {value}
+          </span>
+        )}
+      </div>
+      <input
+        type="range"
+        id={id}
+        value={value}
+        onChange={(e) => onChange?.(Number(e.target.value))}
+        min={min}
+        max={max}
+        step={step}
+        className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
+      />
+      <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+        <span>{min}</span>
+        <span>{max}</span>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,93 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+
+import { Dialog } from "@/components/storybook/dialog";
+import { Input } from "@/components/storybook/input";
+import { RadioGroup } from "@/components/storybook/radio-group";
+import { Slider } from "@/components/storybook/slider";
+import { Button } from "@/components/storybook/button";
+
+export const Route = createFileRoute("/demo/storybook")({
+  component: StorybookDemo,
+});
+
+function StorybookDemo() {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [employmentType, setEmploymentType] = useState("full-time");
+  const [coffeeCups, setCoffeeCups] = useState(3);
+
+  const handleSubmit = () => {};
+
+  const handleReset = () => {
+    setFirstName("");
+    setLastName("");
+    setEmploymentType("full-time");
+    setCoffeeCups(3);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4">
+      <div className="max-w-2xl mx-auto">
+        <Dialog
+          title="Employee Information Form"
+          footer={
+            <div className="flex gap-3 justify-end">
+              <Button variant="secondary" size="medium" onClick={handleReset}>
+                Reset
+              </Button>
+              <Button
+                variant="primary"
+                size="medium"
+                type="submit"
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </div>
+          }
+        >
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <Input
+              label="First Name"
+              id="firstName"
+              value={firstName}
+              onChange={setFirstName}
+              placeholder="John"
+              required
+            />
+
+            <Input
+              label="Last Name"
+              id="lastName"
+              value={lastName}
+              onChange={setLastName}
+              placeholder="Doe"
+              required
+            />
+
+            <RadioGroup
+              label="Employment Type"
+              name="employmentType"
+              options={[
+                { value: "full-time", label: "Full Time" },
+                { value: "part-time", label: "Part Time" },
+              ]}
+              value={employmentType}
+              onChange={setEmploymentType}
+            />
+
+            <Slider
+              label="Coffee Cups Per Day"
+              id="coffeeCups"
+              value={coffeeCups}
+              onChange={setCoffeeCups}
+              min={0}
+              max={10}
+            />
+          </form>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+{
+  "name": "Storybook",
+  "description": "Integrate Storybook into your application.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "link": "https://storybook.js.org/",
+  "type": "add-on",
+  "category": "tooling",
+  "color": "#FF4785",
+  "priority": 18,
+  "routes": [
+    {
+      "icon": "BookOpen",
+      "url": "/demo/storybook",
+      "name": "Storybook",
+      "path": "src/routes/demo.storybook.tsx",
+      "jsName": "StorybookDemo"
+    }
+  ]
+}

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

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@storybook/react-vite": "^10.1.10",
+    "storybook": "^10.1.10"
+  }
+}

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 319" width="256" height="319" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"><defs><path d="M9.872 293.324.012 30.574C-.315 21.895 6.338 14.54 15.005 14L238.494.032c8.822-.552 16.42 6.153 16.972 14.975.02.332.031.665.031.998v286.314c0 8.839-7.165 16.004-16.004 16.004-.24 0-.48-.005-.718-.016l-213.627-9.595c-8.32-.373-14.963-7.065-15.276-15.388Z" id="storybook__a"/></defs><mask id="storybook__b" fill="#fff"><use xlink:href="#storybook__a"/></mask><use fill="#FF4785" xlink:href="#storybook__a"/><path d="m188.665 39.127 1.527-36.716L220.884 0l1.322 37.863a2.387 2.387 0 0 1-3.864 1.96l-11.835-9.325-14.013 10.63a2.387 2.387 0 0 1-3.829-2.001Zm-39.251 80.853c0 6.227 41.942 3.243 47.572-1.131 0-42.402-22.752-64.684-64.415-64.684-41.662 0-65.005 22.628-65.005 56.57 0 59.117 79.78 60.249 79.78 92.494 0 9.052-4.433 14.426-14.184 14.426-12.705 0-17.729-6.49-17.138-28.552 0-4.786-48.458-6.278-49.936 0-3.762 53.466 29.548 68.887 67.665 68.887 36.935 0 65.892-19.687 65.892-55.326 0-63.36-80.961-61.663-80.961-93.06 0-12.728 9.455-14.425 15.07-14.425 5.909 0 16.546 1.042 15.66 24.801Z" fill="#FFF" mask="url(#storybook__b)"/></svg>

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

@@ -0,0 +1,14 @@
+## Setting up Strapi
+
+The current setup shows an example of how to use Strapi with an articles collection which is part of the example structure & data.
+
+- Create a local running copy of the strapi admin
+
+```bash
+pnpm dlx create-strapi@latest my-strapi-project
+cd my-strapi-project
+pnpm dev
+```
+
+- Login and publish the example articles to see them on the strapi demo page.
+- Set the `VITE_STRAPI_URL` environment variable in your `.env.local`. (For local it should be http://localhost:1337/api)

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

@@ -0,0 +1,2 @@
+# Strapi configuration
+VITE_STRAPI_URL="http://localhost:1337/api"

package/dist/frameworks/react/add-ons/strapi/assets/src/lib/strapiClient.js

@@ -0,0 +1,5 @@
+import { strapi } from "@strapi/client";
+export const strapiClient = strapi({
+    baseURL: import.meta.env.VITE_STRAPI_URL,
+});
+export const articles = strapiClient.collection("articles");

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

@@ -0,0 +1,66 @@
+import { articles } from '@/lib/strapiClient'
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/demo/strapi')({
+  component: RouteComponent,
+  loader: async () => {
+    const { data: strapiArticles } = await articles.find()
+    return strapiArticles
+  },
+})
+
+function RouteComponent() {
+  const strapiArticles = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8 text-white">
+          <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
+            Strapi
+          </span>{' '}
+          <span className="text-gray-300">Articles</span>
+        </h1>
+
+        {strapiArticles && strapiArticles.length > 0 ? (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {strapiArticles.map((article) => (
+              <Link
+                key={article.id}
+                to="/demo/strapi/$articleId"
+                params={{ articleId: article.documentId }}
+                className="block"
+              >
+                <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
+                  <h2 className="text-xl font-semibold text-white mb-3">
+                    {article.title || 'Untitled'}
+                  </h2>
+
+                  {article.description && (
+                    <p className="text-gray-400 mb-4 leading-relaxed">
+                      {article.description}
+                    </p>
+                  )}
+
+                  {article.content && (
+                    <p className="text-gray-400 line-clamp-3 leading-relaxed">
+                      {article.content}
+                    </p>
+                  )}
+
+                  {article.createdAt && (
+                    <p className="text-sm text-cyan-400/70 mt-4">
+                      {new Date(article.createdAt).toLocaleDateString()}
+                    </p>
+                  )}
+                </article>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-400">No articles found.</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -0,0 +1,78 @@
+import { articles } from '@/lib/strapiClient'
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/demo/strapi_/$articleId')({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const { data: article } = await articles.findOne(params.articleId)
+    return article
+  },
+})
+
+function RouteComponent() {
+  const article = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div className="max-w-4xl mx-auto">
+        <Link
+          to="/demo/strapi"
+          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5 mr-2"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+          Back to Articles
+        </Link>
+
+        <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
+          <h1 className="text-4xl font-bold text-white mb-4">
+            {article?.title || 'Untitled'}
+          </h1>
+
+          {article?.createdAt && (
+            <p className="text-sm text-cyan-400/70 mb-6">
+              Published on{' '}
+              {new Date(article?.createdAt).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </p>
+          )}
+
+          {article?.description && (
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold text-gray-300 mb-3">
+                Description
+              </h2>
+              <p className="text-gray-400 leading-relaxed">
+                {article?.description}
+              </p>
+            </div>
+          )}
+
+          {article?.content && (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-300 mb-3">
+                Content
+              </h2>
+              <div className="text-gray-400 leading-relaxed whitespace-pre-wrap">
+                {article?.content}
+              </div>
+            </div>
+          )}
+        </article>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "Strapi",
+  "description": "Use the Strapi CMS to manage your content.",
+  "link": "https://strapi.io/",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "cms",
+  "color": "#4945FF",
+  "priority": 110,
+  "modes": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/strapi",
+      "name": "Strapi",
+      "path": "src/routes/demo.strapi.tsx",
+      "jsName": "StrapiDemo"
+    }
+  ]
+}

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

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@strapi/client": "^1.5.0"
+  }
+}

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

@@ -0,0 +1,8 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 208C0 109.948 0 60.9218 30.4609 30.4609C60.9218 0 109.948 0 208 0H392C490.052 0 539.078 0 569.539 30.4609C600 60.9218 600 109.948 600 208V392C600 490.052 600 539.078 569.539 569.539C539.078 600 490.052 600 392 600H208C109.948 600 60.9218 600 30.4609 569.539C0 539.078 0 490.052 0 392V208Z" fill="#4945FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M414 182H212V285H315V388H418V186C418 183.791 416.209 182 414 182Z" fill="white"/>
+<rect x="311" y="285" width="4" height="4" fill="white"/>
+<path d="M212 285H311C313.209 285 315 286.791 315 289V388H216C213.791 388 212 386.209 212 384V285Z" fill="#9593FF"/>
+<path d="M315 388H418L318.414 487.586C317.154 488.846 315 487.953 315 486.172V388Z" fill="#9593FF"/>
+<path d="M212 285H113.828C112.046 285 111.154 282.846 112.414 281.586L212 182V285Z" fill="#9593FF"/>
+</svg>

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

@@ -0,0 +1,16 @@
+## T3Env
+
+- You can use T3Env to add type safety to your environment variables.
+- Add Environment variables to the `src/env.mjs` file.
+- Use the environment variables in your code.
+
+### Usage
+
+```ts
+import { env } from "@/env";
+
+console.log(env.VITE_APP_TITLE);
+```
+
+
+

package/dist/frameworks/react/add-ons/t3env/assets/src/env.js

@@ -0,0 +1,34 @@
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
+export const env = createEnv({
+    server: {
+        SERVER_URL: z.string().url().optional(),
+    },
+    /**
+     * The prefix that client-side variables must have. This is enforced both at
+     * a type-level and at runtime.
+     */
+    clientPrefix: "VITE_",
+    client: {
+        VITE_APP_TITLE: z.string().min(1).optional(),
+    },
+    /**
+     * What object holds the environment variables at runtime. This is usually
+     * `process.env` or `import.meta.env`.
+     */
+    runtimeEnv: import.meta.env,
+    /**
+     * By default, this library will feed the environment variables directly to
+     * the Zod validator.
+     *
+     * This means that if you have an empty string for a value that is supposed
+     * to be a number (e.g. `PORT=` in a ".env" file), Zod will incorrectly flag
+     * it as a type mismatch violation. Additionally, if you have an empty string
+     * for a value that is supposed to be a string with a default value (e.g.
+     * `DOMAIN=` in an ".env" file), the default value will never be applied.
+     *
+     * In order to solve these issues, we recommend that all new projects
+     * explicitly specify this option as true.
+     */
+    emptyStringAsUndefined: true,
+});

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

@@ -0,0 +1,11 @@
+{
+  "name": "T3Env",
+  "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/dist/frameworks/react/add-ons/t3env/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "zod": "^4.1.11",
+    "@t3-oss/env-core": "^0.13.8"
+  }
+}

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

@@ -0,0 +1,6 @@
+<svg width="258" height="199" viewBox="0 0 258 199" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.735 25.0701L188.947 0.972412H0.465994V25.0701H165.735Z" fill="#e2e8f0"/>
+<path d="M163.981 96.3239L254.022 3.68314L221.206 3.68295L145.617 80.7609L163.981 96.3239Z" fill="#e2e8f0"/>
+<path d="M233.658 131.418C233.658 155.075 214.48 174.254 190.823 174.254C171.715 174.254 155.513 161.738 150 144.439L146.625 133.848L127.329 153.143L129.092 157.336C139.215 181.421 163.034 198.354 190.823 198.354C227.791 198.354 257.759 168.386 257.759 131.418C257.759 106.937 244.399 85.7396 224.956 74.0905L220.395 71.3582L202.727 89.2528L210.788 93.5083C224.403 100.696 233.658 114.981 233.658 131.418Z" fill="#e2e8f0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.2625 192.669L88.2626 45.6459H64.1648L64.1648 192.669H88.2625Z" fill="#e2e8f0"/>
+</svg>

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/init.js

@@ -0,0 +1,7 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+const t = initTRPC.create({
+    transformer: superjson,
+});
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/react.js

@@ -0,0 +1,2 @@
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+export const { TRPCProvider, useTRPC } = createTRPCContext();

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/router.js

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+import { createTRPCRouter, publicProcedure } from './init';
+const todos = [
+    { id: 1, name: 'Get groceries' },
+    { id: 2, name: 'Buy a new phone' },
+    { id: 3, name: 'Finish the project' },
+];
+const todosRouter = {
+    list: publicProcedure.query(() => todos),
+    add: publicProcedure
+        .input(z.object({ name: z.string() }))
+        .mutation(({ input }) => {
+        const newTodo = { id: todos.length + 1, name: input.name };
+        todos.push(newTodo);
+        return newTodo;
+    }),
+};
+export const trpcRouter = createTRPCRouter({
+    todos: todosRouter,
+});

package/dist/frameworks/react/add-ons/tRPC/assets/src/routes/api.trpc.$.tsx

@@ -0,0 +1,21 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { trpcRouter } from '@/integrations/trpc/router'
+import { createFileRoute } from '@tanstack/react-router'
+
+function handler({ request }: { request: Request }) {
+  return fetchRequestHandler({
+    req: request,
+    router: trpcRouter,
+    endpoint: '/api/trpc',
+  })
+}
+
+export const Route = createFileRoute('/api/trpc/$')({
+  server: {
+    handlers: {
+      GET: handler,
+      POST: handler,
+    },
+  },
+})

package/dist/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { useTRPC } from '@/integrations/trpc/react'
+
+export const Route = createFileRoute('/demo/trpc-todo')({
+  component: TRPCTodos,
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery(
+      context.trpc.todos.list.queryOptions(),
+    )
+  },
+})
+
+function TRPCTodos() {
+  const trpc = useTRPC()
+  const { data, refetch } = useQuery(trpc.todos.list.queryOptions())
+
+  const [todo, setTodo] = useState('')
+  const { mutate: addTodo } = useMutation({
+    ...trpc.todos.add.mutationOptions(),
+    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 95% 5%, #4a90c2 0%, #317eb9 50%, #1e4d72 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">tRPC 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/dist/frameworks/react/add-ons/tRPC/info.json

@@ -0,0 +1,21 @@
+{
+  "name": "tRPC",
+  "description": "Integrate tRPC into your application.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "link": "https://trpc.io/",
+  "dependsOn": ["tanstack-query", "start"],
+  "type": "add-on",
+  "category": "api",
+  "color": "#2596BE",
+  "priority": 27,
+  "routes": [
+    {
+      "icon": "Network",
+      "url": "/demo/trpc-todo",
+      "name": "tRPC Todo",
+      "path": "src/routes/demo.trpc-todo.tsx",
+      "jsName": "TRPCTodos"
+    }
+  ]
+}

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

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@trpc/client": "^11.4.3",
+    "@trpc/server": "^11.4.3",
+    "@trpc/tanstack-react-query": "^11.4.3",
+    "superjson": "^2.2.2",
+    "zod": "^4.1.11"
+  }
+}

package/dist/frameworks/react/add-ons/tRPC/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>