@tanstack/cta-ui 0.10.0-alpha.24 → 0.10.0-alpha.27

package/lib-dist/index.js

@@ -1,23 +1,129 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-export function launchUI({ mode, addOns, options, forcedMode, forcedAddOns, }) {
-    const projectPath = process.cwd();
-    delete process.env.NODE_ENV;
-    process.env.CTA_ADD_ONS = addOns?.join(',') || '';
-    process.env.CTA_PROJECT_PATH = projectPath;
-    process.env.CTA_OPTIONS = options ? JSON.stringify(options) : '';
-    process.env.CTA_MODE = mode;
-    if (forcedMode) {
-        process.env.CTA_FORCED_ROUTER_MODE = forcedMode;
+import express from 'express';
+import cors from 'cors';
+import chalk from 'chalk';
+import { AddOnCompiledSchema, StarterCompiledSchema, } from '@tanstack/cta-engine';
+import { addToAppWrapper } from './engine-handling/add-to-app-wrapper.js';
+import { createAppWrapper } from './engine-handling/create-app-wrapper.js';
+import { generateInitialPayload } from './engine-handling/generate-initial-payload.js';
+import { setServerEnvironment } from './engine-handling/server-environment.js';
+export function launchUI(options) {
+    const { port: requestedPort, ...rest } = options;
+    setServerEnvironment(rest);
+    const app = express();
+    app.use(cors());
+    app.use(express.json());
+    app.use(express.urlencoded({ extended: true }));
+    const launchUI = !process.env.CTA_DISABLE_UI;
+    if (launchUI) {
+        const packagePath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+        app.use(express.static(resolve(packagePath, 'dist')));
     }
-    if (forcedAddOns) {
-        process.env.CTA_FORCED_ADD_ONS = forcedAddOns.join(',');
-    }
-    const developerPath = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-    const configPath = resolve(developerPath, './app.config.js');
-    process.chdir(developerPath);
-    import(configPath).then(async (config) => {
-        const out = await config.default;
-        await out.dev();
+    app.post('/api/add-to-app', async (req, res) => {
+        await addToAppWrapper(req.body.addOns, {
+            response: res,
+            environmentFactory: options.environmentFactory,
+        });
+    });
+    app.post('/api/create-app', async (req, res) => {
+        await createAppWrapper(req.body.options, {
+            response: res,
+            environmentFactory: options.environmentFactory,
+        });
+    });
+    app.post('/api/dry-run-add-to-app', async (req, res) => {
+        res.send(await addToAppWrapper(req.body.addOns, {
+            dryRun: true,
+            environmentFactory: options.environmentFactory,
+        }));
+    });
+    app.post('/api/dry-run-create-app', async (req, res) => {
+        res.send(await createAppWrapper(req.body.options, {
+            dryRun: true,
+            environmentFactory: options.environmentFactory,
+        }));
+    });
+    app.get('/api/initial-payload', async (_req, res) => {
+        res.send(await generateInitialPayload());
+    });
+    app.get('/api/load-remote-add-on', async (req, res) => {
+        const { url } = req.query;
+        if (!url) {
+            res.status(400).send('URL is required');
+            return;
+        }
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const parsed = AddOnCompiledSchema.safeParse(data);
+            if (!parsed.success) {
+                res.status(400).json({ error: 'Invalid add-on data' });
+            }
+            else {
+                res.json({
+                    id: url,
+                    name: parsed.data.name,
+                    description: parsed.data.description,
+                    version: parsed.data.version,
+                    author: parsed.data.author,
+                    license: parsed.data.license,
+                    link: parsed.data.link,
+                    smallLogo: parsed.data.smallLogo,
+                    logo: parsed.data.logo,
+                    type: parsed.data.type,
+                    modes: parsed.data.modes,
+                });
+            }
+        }
+        catch {
+            res.status(500).send('Failed to load add-on');
+        }
+    });
+    app.get('/api/load-starter', async (req, res) => {
+        const { url } = req.query;
+        if (!url) {
+            res.status(400).send('URL is required');
+            return;
+        }
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const parsed = StarterCompiledSchema.safeParse(data);
+            if (!parsed.success) {
+                res.status(400).json({ error: 'Invalid starter data' });
+            }
+            else {
+                res.json({
+                    url,
+                    id: parsed.data.id,
+                    name: parsed.data.name,
+                    description: parsed.data.description,
+                    version: parsed.data.version,
+                    author: parsed.data.author,
+                    license: parsed.data.license,
+                    dependsOn: parsed.data.dependsOn,
+                    mode: parsed.data.mode,
+                    typescript: parsed.data.typescript,
+                    tailwind: parsed.data.tailwind,
+                    banner: parsed.data.banner
+                        ? url.replace('starter.json', parsed.data.banner)
+                        : undefined,
+                });
+            }
+        }
+        catch {
+            res.status(500).send('Failed to load starter');
+        }
+    });
+    app.post('/api/shutdown', (_req, res) => {
+        setTimeout(() => {
+            process.exit(0);
+        }, 50);
+        res.send({ shutdown: true });
+    });
+    const port = requestedPort || process.env.PORT || 8080;
+    app.listen(port, () => {
+        console.log(`🔥 ${chalk.blueBright(`Create TanStack ${launchUI ? 'App' : 'API'}`)} is running on ${chalk.underline(`http://localhost:${port}`)}`);
     });
 }

package/package.json

@@ -24,17 +24,15 @@
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.5",
     "@tanstack/react-query-devtools": "^5.66.5",
-    "@tanstack/react-router": "^1.114.3",
-    "@tanstack/react-router-devtools": "^1.114.3",
-    "@tanstack/react-router-with-query": "^1.114.3",
-    "@tanstack/react-start": "^1.114.3",
-    "@tanstack/router-plugin": "^1.114.3",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
+    "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cors": "^2.8.5",
     "embla-carousel-react": "^8.6.0",
     "execa": "^9.5.2",
+    "express": "^4.21.2",
     "jotai-tanstack-query": "^0.9.0",
     "lucide-react": "^0.476.0",
     "next-themes": "^0.4.6",
@@ -45,27 +43,29 @@
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
-    "vinxi": "^0.5.3",
     "vite-tsconfig-paths": "^5.1.4",
     "zustand": "^5.0.3",
-    "@tanstack/cta-engine": "0.10.0-alpha.21",
-    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.21",
-    "@tanstack/cta-framework-solid": "0.10.0-alpha.21"
+    "@tanstack/cta-engine": "0.10.0-alpha.27",
+    "@tanstack/cta-framework-react-cra": "0.10.0-alpha.27",
+    "@tanstack/cta-framework-solid": "0.10.0-alpha.27"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.1",
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "3.1.1",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.2",
-    "vite": "^6.1.0",
+    "vite": "^6.3.3",
     "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   },
-  "version": "0.10.0-alpha.24",
+  "version": "0.10.0-alpha.27",
   "scripts": {}
 }

package/src/components/background-animation.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+import { useMounted } from '@/hooks/use-mounted'
+import { usePrefersReducedMotion } from '@/hooks/use-preferred-reduced-motion'
+
+export function BackgroundAnimation() {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const mounted = useMounted()
+  const isHomePage = false
+
+  React.useEffect(() => {
+    if (prefersReducedMotion !== false) {
+      return
+    }
+
+    const canvas = canvasRef.current
+
+    let morphDuration = 2000
+    const waitDuration = 1000 * 60 * 2
+
+    const easingFn = cubicBezier(0.645, 0.045, 0.355, 1.0)
+
+    if (canvas) {
+      const ctx = canvas.getContext('2d')!
+
+      let rafId: ReturnType<typeof requestAnimationFrame> | null = null
+      let timeout: ReturnType<typeof setTimeout> | null = null
+      let startTime = performance.now()
+
+      function createBlobs() {
+        return shuffle([
+          {
+            color: { h: 10, s: 100, l: 50 },
+          },
+          {
+            color: { h: 40, s: 100, l: 50 },
+          },
+          {
+            color: { h: 150, s: 100, l: 50 },
+          },
+          {
+            color: { h: 200, s: 100, l: 50 },
+          },
+        ]).map((blob) => ({
+          ...blob,
+          x: Math.random() * canvas!.width,
+          y: Math.random() * canvas!.height,
+          r: Math.random() * 500 + 700,
+          colorH: blob.color.h,
+          colorS: blob.color.s,
+          colorL: blob.color.l,
+        }))
+      }
+
+      function shuffle<T>(array: T[]) {
+        for (let i = array.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1))
+          ;[array[i], array[j]] = [array[j], array[i]]
+        }
+        return array
+      }
+
+      let startBlobs = createBlobs()
+      let currentBlobs = startBlobs
+      let targetBlobs: ReturnType<typeof createBlobs> = []
+
+      function resizeHandler() {
+        // Create an offscreen canvas and copy the current content
+        const offscreen = document.createElement('canvas')
+        offscreen.width = canvas!.width
+        offscreen.height = canvas!.height
+        offscreen.getContext('2d')!.drawImage(canvas!, 0, 0)
+
+        // Resize the main canvas
+        canvas!.width = window.innerWidth
+        canvas!.height = window.innerHeight
+
+        // Stretch and redraw the saved content to fill the new size
+        ctx.drawImage(offscreen, 0, 0, canvas!.width, canvas!.height)
+      }
+
+      function start() {
+        if (timeout) {
+          clearTimeout(timeout)
+        }
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+
+        startBlobs = JSON.parse(JSON.stringify(currentBlobs))
+        targetBlobs = createBlobs()
+        startTime = performance.now()
+        animate()
+      }
+
+      function animate() {
+        ctx.clearRect(0, 0, canvas!.width, canvas!.height)
+
+        const time = performance.now() - startTime
+        const progress = time / morphDuration
+        const easedProgress = easingFn(progress)
+
+        // Draw the blobs
+        startBlobs.forEach((startBlob, i) => {
+          const targetBlob = targetBlobs[i]
+
+          currentBlobs[i].x = interpolate(
+            startBlob.x,
+            targetBlob.x,
+            easedProgress,
+          )
+          currentBlobs[i].y = interpolate(
+            startBlob.y,
+            targetBlob.y,
+            easedProgress,
+          )
+
+          const gradient = ctx.createRadialGradient(
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            0,
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            currentBlobs[i].r,
+          )
+
+          currentBlobs[i].colorH = interpolate(
+            startBlob.colorH,
+            targetBlob.colorH,
+            easedProgress,
+          )
+          currentBlobs[i].colorS = interpolate(
+            startBlob.colorS,
+            targetBlob.colorS,
+            easedProgress,
+          )
+          currentBlobs[i].colorL = interpolate(
+            startBlob.colorL,
+            targetBlob.colorL,
+            easedProgress,
+          )
+
+          gradient.addColorStop(
+            0,
+            `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 1)`,
+          )
+          gradient.addColorStop(
+            1,
+            `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 0)`,
+          )
+
+          ctx.fillStyle = gradient
+          ctx.beginPath()
+          ctx.arc(
+            currentBlobs[i].x,
+            currentBlobs[i].y,
+            currentBlobs[i].r,
+            0,
+            Math.PI * 2,
+          )
+          ctx.fill()
+        })
+
+        if (progress < 1) {
+          rafId = requestAnimationFrame(animate)
+        } else {
+          timeout = setTimeout(() => {
+            morphDuration = 4000
+            start()
+          }, waitDuration)
+        }
+      }
+
+      resizeHandler()
+      start()
+      window.addEventListener('resize', resizeHandler)
+
+      return () => {
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+        }
+        if (timeout) {
+          clearTimeout(timeout)
+        }
+        window.removeEventListener('resize', resizeHandler)
+      }
+    }
+  }, [prefersReducedMotion])
+
+  return (
+    <div
+      className={twMerge(
+        'fixed inset-0 z-0 opacity-20 pointer-events-none',
+        'transition-opacity duration-[2s] ease-linear',
+        '[&+*]:relative',
+        mounted
+          ? isHomePage
+            ? 'opacity-10 dark:opacity-20'
+            : 'opacity-10 dark:opacity-20'
+          : 'opacity-0',
+      )}
+    >
+      <canvas ref={canvasRef} />
+    </div>
+  )
+}
+
+function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number) {
+  return function (t: number) {
+    const cx = 3 * p1x
+    const bx = 3 * (p2x - p1x) - cx
+    const ax = 1 - cx - bx
+
+    const cy = 3 * p1y
+    const by = 3 * (p2y - p1y) - cy
+    const ay = 1 - cy - by
+
+    const x = ((ax * t + bx) * t + cx) * t
+    const y = ((ay * t + by) * t + cy) * t
+
+    return y
+  }
+}
+
+function interpolate(start: number, end: number, progress: number) {
+  return start + (end - start) * progress
+}

package/src/components/cta-sidebar.tsx

@@ -1,11 +1,3 @@
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarHeader,
-} from '@/components/ui/sidebar'
-
 import SelectedAddOns from '@/components/sidebar-items/add-ons'
 import RunAddOns from '@/components/sidebar-items/run-add-ons'
 import RunCreateApp from '@/components/sidebar-items/run-create-app'
@@ -14,6 +6,8 @@ import ModeSelector from '@/components/sidebar-items/mode-selector'
 import TypescriptSwitch from '@/components/sidebar-items/typescript-switch'
 import StarterDialog from '@/components/sidebar-items/starter'
 
+import { ChevronRightIcon } from 'lucide-react'
+
 import { useApplicationMode, useReady } from '@/store/project'
 
 export function AppSidebar() {
@@ -21,35 +15,36 @@ export function AppSidebar() {
   const mode = useApplicationMode()
 
   return (
-    <Sidebar>
-      <SidebarHeader className="flex justify-center items-center">
-        <img src="/tanstack.png" className="w-3/5" />
-      </SidebarHeader>
-      <SidebarContent>
-        {ready && (
-          <>
-            {mode === 'setup' && (
-              <SidebarGroup>
+    <div className="flex flex-col gap-2">
+      {ready && (
+        <>
+          {mode === 'setup' && (
+            <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
                 <ProjectName />
+              </div>
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
                 <ModeSelector />
+              </div>
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
                 <TypescriptSwitch />
-              </SidebarGroup>
-            )}
-            <SidebarGroup>
-              <SelectedAddOns />
-            </SidebarGroup>
-            {mode === 'setup' && (
-              <SidebarGroup>
-                <StarterDialog />
-              </SidebarGroup>
-            )}
-          </>
-        )}
-      </SidebarContent>
-      <SidebarFooter className="mb-5">
+              </div>
+            </div>
+          )}
+          <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
+            <SelectedAddOns />
+          </div>
+          {mode === 'setup' && (
+            <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
+              <StarterDialog />
+            </div>
+          )}
+        </>
+      )}
+      <div className="mt-5">
         <RunAddOns />
         <RunCreateApp />
-      </SidebarFooter>
-    </Sidebar>
+      </div>
+    </div>
   )
 }