@tanstack/create 0.49.1

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.data-only.tsx.ejs

@@ -0,0 +1,55 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getPunkSongs } from "@/data/demo.punk-songs";
+
+export const Route = createFileRoute("/demo/start/ssr/data-only")({
+  ssr: "data-only",
+  component: RouteComponent,
+  loader: async () => await getPunkSongs(),
+});
+
+function RouteComponent() {
+  const punkSongs = Route.useLoaderData();
+<% if (tailwind) { %>
+  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%, #1a1a1a 0%, #0a0a0a 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-3xl font-bold mb-6 text-pink-400">
+          Data Only SSR - Punk Songs
+        </h1>
+        <ul className="space-y-3">
+          {punkSongs.map((song) => (
+            <li
+              key={song.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white font-medium">
+                {song.name}
+              </span>
+              <span className="text-white/60"> - {song.artist}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+<% } else { %>
+  return (
+    <div>
+      <h1>Data Only SSR - Punk Songs</h1>
+      <ul>
+        {punkSongs.map((song) => (
+          <li key={song.id}>
+            {song.name} - {song.artist}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+<% } %>
+}

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

@@ -0,0 +1,55 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getPunkSongs } from "@/data/demo.punk-songs";
+
+export const Route = createFileRoute("/demo/start/ssr/full-ssr")({
+  component: RouteComponent,
+  loader: async () => await getPunkSongs(),
+});
+
+function RouteComponent() {
+  const punkSongs = Route.useLoaderData();
+
+<% if (tailwind) { %>
+  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%, #1a1a1a 0%, #0a0a0a 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-3xl font-bold mb-6 text-purple-400">
+          Full SSR - Punk Songs
+        </h1>
+        <ul className="space-y-3">
+          {punkSongs.map((song) => (
+            <li
+              key={song.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white font-medium">
+                {song.name}
+              </span>
+              <span className="text-white/60"> - {song.artist}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+<% } else { %>
+  return (
+    <div>
+      <h1>Full SSR - Punk Songs</h1>
+      <ul>
+        {punkSongs.map((song) => (
+          <li key={song.id}>
+            {song.name} - {song.artist}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+<% } %>
+}

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

@@ -0,0 +1,62 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/demo/start/ssr/")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+<% if (tailwind) { %>
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-900 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 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-4xl font-bold mb-8 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-green-400 bg-clip-text text-transparent">
+          SSR Demos
+        </h1>
+        <div className="flex flex-col gap-4">
+          <Link
+            to="/demo/start/ssr/spa-mode"
+            className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-pink-600 to-pink-500 hover:from-pink-700 hover:to-pink-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-pink-500/50 border-2 border-pink-400"
+          >
+            SPA Mode
+          </Link>
+          <Link
+            to="/demo/start/ssr/full-ssr"
+            className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-purple-500/50 border-2 border-purple-400"
+          >
+            Full SSR
+          </Link>
+          <Link
+            to="/demo/start/ssr/data-only"
+            className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-green-500/50 border-2 border-green-400"
+          >
+            Data Only
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+<% } else { %>
+  return (
+    <div>
+      <h1>SSR Demos</h1>
+      <ul>
+        <li>
+          <Link to="/demo/start/ssr/spa-mode">SPA Mode</Link>
+        </li>
+        <li>
+          <Link to="/demo/start/ssr/full-ssr">Full SSR</Link>
+        </li>
+        <li>
+          <Link to="/demo/start/ssr/data-only">Data Only</Link>
+        </li>
+      </ul>
+    </div>
+  );
+<% } %>
+}

package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.spa-mode.tsx.ejs

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { getPunkSongs } from "@/data/demo.punk-songs";
+
+export const Route = createFileRoute("/demo/start/ssr/spa-mode")({
+  ssr: false,
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const [punkSongs, setPunkSongs] = useState<
+    Awaited<ReturnType<typeof getPunkSongs>>
+  >([]);
+
+  useEffect(() => {
+    getPunkSongs().then(setPunkSongs);
+  }, []);
+
+<% if (tailwind) { %>
+  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%, #1a1a1a 0%, #0a0a0a 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-3xl font-bold mb-6 text-green-400">
+          SPA Mode - Punk Songs
+        </h1>
+        <ul className="space-y-3">
+          {punkSongs.map((song) => (
+            <li
+              key={song.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white font-medium">
+                {song.name}
+              </span>
+              <span className="text-white/60"> - {song.artist}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+<% } else { %>
+  return (
+    <div>
+      <h1>SPA Mode - Punk Songs</h1>
+      <ul>
+        {punkSongs.map((song) => (
+          <li key={song.id}>
+            {song.name} - {song.artist}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+<% } %>
+}

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

@@ -0,0 +1,142 @@
+import { createFileRoute } from "@tanstack/react-router"; <% if (!tailwind) { %>
+import "../App.css"
+<% } else { %>
+import {
+  Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles, } from "lucide-react";
+<% } %>
+
+export const Route = createFileRoute("/")({ component: App, });
+
+function App() { <% if (tailwind) { %>
+const features = [
+  {
+    icon: <Zap className="w-12 h-12 text-cyan-400" />,
+    title: "Powerful Server Functions",
+    description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
+  },
+  {
+    icon: <Server className="w-12 h-12 text-cyan-400" />,
+    title: "Flexible Server Side Rendering",
+    description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
+  },
+  {
+    icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
+    title: "API Routes",
+    description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
+  },
+  {
+    icon: <Shield className="w-12 h-12 text-cyan-400" />,
+    title: "Strongly Typed Everything",
+    description: "End-to-end type safety from server to client. Catch errors before they reach production.",
+  },
+  {
+    icon: <Waves className="w-12 h-12 text-cyan-400" />,
+    title: "Full Streaming Support",
+    description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
+  },
+  {
+    icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
+    title: "Next Generation Ready",
+    description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
+  },
+];
+
+return (
+  <div
+    className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"
+  >
+    <section className="relative py-20 px-6 text-center overflow-hidden">
+      <div
+        className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"
+      ></div>
+      <div className="relative max-w-5xl mx-auto">
+        <div className="flex items-center justify-center gap-6 mb-6">
+          <img
+            src="/tanstack-circle-logo.png"
+            alt="TanStack Logo"
+            className="w-24 h-24 md:w-32 md:h-32"
+          />
+          <h1
+            className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]"
+          >
+            <span className="text-gray-300">TANSTACK</span>{" "}
+            <span
+              className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent"
+            >
+              START
+            </span>
+          </h1>
+        </div>
+        <p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
+          The framework for next generation AI applications
+        </p>
+        <p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
+          Full-stack framework powered by TanStack Router for React and Solid.
+          Build modern applications with server functions, streaming, and type
+          safety.
+        </p>
+        <div className="flex flex-col items-center gap-4">
+          <a
+            href="https://tanstack.com/start"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
+          >
+            Documentation
+          </a>
+          <p className="text-gray-400 text-sm mt-2">
+            Begin your TanStack Start journey by editing{" "}
+            <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
+              /src/routes/index.tsx
+            </code>
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section className="py-16 px-6 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {features.map((feature, index) => (
+        <div
+          key={index}
+          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"
+        >
+          <div className="mb-4">{feature.icon}</div>
+          <h3 className="text-xl font-semibold text-white mb-3">
+            {feature.title}
+          </h3>
+          <p className="text-gray-400 leading-relaxed">{feature.description}</p>
+        </div>
+        ))}
+      </div>
+    </section>
+  </div>
+  ); <% } else { %> return (
+  <div className="App">
+    <header className="App-header">
+      <img
+        src="/tanstack-circle-logo.png"
+        className="App-logo" alt="TanStack Logo"
+      />
+      <p>Edit <code>src/routes/index.tsx</code> and save to reload.</p>
+      <a
+        className="App-link"
+        href="https://reactjs.org"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn React
+      </a>
+      <a
+        className="App-link"
+        href="https://tanstack.com"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn TanStack
+      </a>
+    </header>
+  </div>
+  );
+<% } %>
+}

package/dist/frameworks/react/add-ons/start/assets/src/server.ts.ejs

@@ -0,0 +1,9 @@
+<% if (!addOnEnabled.paraglide) { ignoreFile() } %>import { paraglideMiddleware } from './paraglide/server'
+import handler from '@tanstack/react-start/server-entry'
+
+// Server-side URL localization/redirects for Paraglide
+export default {
+  fetch(req: Request): Promise<Response> {
+    return paraglideMiddleware(req, () => handler.fetch(req))
+  },
+}

package/dist/frameworks/react/add-ons/start/assets/vite.config.ts.ejs

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+<% if (addOnEnabled.paraglide) { -%>
+import { paraglideVitePlugin } from "@inlang/paraglide-js"
+<% } -%>
+import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import { fileURLToPath, URL } from 'url'
+<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite"
+<% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
+<% } %>
+
+const config = defineConfig({
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
+    project: './project.inlang',
+    outdir: './src/paraglide',
+    strategy: ['url'],
+  }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+    // this is the plugin that enables path aliases
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    <% if (tailwind) { %>tailwindcss(),<% } %>
+    tanstackStart(),
+    viteReact(<% if (addOnEnabled.compiler) { %>{
+      babel: {
+        plugins: ["babel-plugin-react-compiler"],
+      },
+    }<% } %>),
+  ],
+})
+
+export default config

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

@@ -0,0 +1,61 @@
+{
+  "name": "Start",
+  "phase": "setup",
+  "description": "Add TanStack Start for SSR, API endpoints, and more.",
+  "link": "https://tanstack.com/start/latest",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "tanstack",
+  "color": "#14B8A6",
+  "tailwind": false,
+  "priority": 26,
+  "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.\nMigrating to Start might require deleting node_modules and re-installing.",
+  "routes": [
+    {
+      "icon": "SquareFunction",
+      "url": "/demo/start/server-funcs",
+      "name": "Start - Server Functions",
+      "path": "src/routes/demo.start.server-funcs.tsx",
+      "jsName": "StartServerFuncsDemo"
+    },
+    {
+      "icon": "Network",
+      "url": "/demo/start/api-request",
+      "name": "Start - API Request",
+      "path": "src/routes/demo.start.api-request.tsx",
+      "jsName": "StartApiRequestDemo"
+    },
+    {
+      "icon": "StickyNote",
+      "url": "/demo/start/ssr",
+      "name": "Start - SSR Demos",
+      "path": "src/routes/demo.start.ssr.index.tsx",
+      "jsName": "StartSSRDemo",
+      "children": [
+        {
+          "icon": "StickyNote",
+          "url": "/demo/start/ssr/spa-mode",
+          "name": "SPA Mode",
+          "path": "src/routes/demo.start.ssr.spa-mode.tsx",
+          "jsName": "StartSSRSpamodeDemo"
+        },
+        {
+          "icon": "StickyNote",
+          "url": "/demo/start/ssr/full-ssr",
+          "name": "Full SSR",
+          "path": "src/routes/demo.start.ssr.full-ssr.tsx",
+          "jsName": "StartSSRFullSsrDemo"
+        },
+        {
+          "icon": "StickyNote",
+          "url": "/demo/start/ssr/data-only",
+          "name": "Data Only",
+          "path": "src/routes/demo.start.ssr.data-only.tsx",
+          "jsName": "StartSSRDataOnlyDemo"
+        }
+      ]
+    }
+  ],
+  "deletedFiles": ["./index.html", "./src/main.tsx"],
+  "addOnSpecialSteps": ["rimraf-node-modules"]
+}

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

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@tanstack/react-router-ssr-query": "^1.131.7",
+    "@tanstack/react-start": "^1.132.0",
+    "vite-tsconfig-paths": "^6.0.2",
+    "lucide-react": "^0.561.0"
+  }
+}

package/dist/frameworks/react/add-ons/start/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/store/assets/src/lib/demo-store-devtools.tsx

@@ -0,0 +1,64 @@
+import { EventClient } from '@tanstack/devtools-event-client'
+import { useState, useEffect } from 'react'
+
+import { store, fullName } from './demo-store'
+
+type EventMap = {
+  'store-devtools:state': {
+    firstName: string
+    lastName: string
+    fullName: string
+  }
+}
+
+class StoreDevtoolsEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: 'store-devtools',
+    })
+  }
+}
+
+const sdec = new StoreDevtoolsEventClient()
+
+store.subscribe(() => {
+  sdec.emit('state', {
+    firstName: store.state.firstName,
+    lastName: store.state.lastName,
+    fullName: fullName.state,
+  })
+})
+
+function DevtoolPanel() {
+  const [state, setState] = useState<EventMap['store-devtools:state']>(() => ({
+    firstName: store.state.firstName,
+    lastName: store.state.lastName,
+    fullName: fullName.state,
+  }))
+
+  useEffect(() => {
+    return sdec.on('state', (e) => setState(e.payload))
+  }, [])
+
+  return (
+    <div className="p-4 grid gap-4 grid-cols-[1fr_10fr]">
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        First Name
+      </div>
+      <div className="text-sm">{state?.firstName}</div>
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        Last Name
+      </div>
+      <div className="text-sm">{state?.lastName}</div>
+      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+        Full Name
+      </div>
+      <div className="text-sm">{state?.fullName}</div>
+    </div>
+  )
+}
+
+export default {
+  name: 'TanStack Store',
+  render: <DevtoolPanel />,
+}

package/dist/frameworks/react/add-ons/store/assets/src/lib/demo-store.js

@@ -0,0 +1,10 @@
+import { Derived, Store } from '@tanstack/store';
+export const store = new Store({
+    firstName: 'Jane',
+    lastName: 'Smith',
+});
+export const fullName = new Derived({
+    fn: () => `${store.state.firstName} ${store.state.lastName}`,
+    deps: [store],
+});
+fullName.mount();