tanstack_start_ts 1.0.0

package/src/styles.css

@@ -0,0 +1,333 @@
+@import "tailwindcss" source(none);
+@import "tw-animate-css";
+
+@source "../src";
+@custom-variant dark (&:is(.dark *));
+
+
+/* ─── Design Tokens ─────────────────────────────────────── */
+@theme inline {
+  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 6px);
+  --radius-2xl: calc(var(--radius) + 12px);
+  --radius-3xl: calc(var(--radius) + 20px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
+  --color-surface-elevated: var(--surface-elevated);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-brand-orange: var(--brand-orange);
+  --color-brand-amber: var(--brand-amber);
+  --color-brand-magenta: var(--brand-magenta);
+  --color-brand-violet: var(--brand-violet);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.875rem;
+
+  /* Dark canvas */
+  --background: oklch(0.13 0.015 280);
+  --foreground: oklch(0.97 0.005 280);
+
+  --surface: oklch(0.16 0.018 280);
+  --surface-elevated: oklch(0.19 0.022 285);
+
+  --card: oklch(0.16 0.018 280);
+  --card-foreground: oklch(0.97 0.005 280);
+  --popover: oklch(0.17 0.02 282);
+  --popover-foreground: oklch(0.97 0.005 280);
+
+  /* Brand: Sunset Blaze */
+  --brand-orange: oklch(0.73 0.19 45); /* #ff6b35 */
+  --brand-amber: oklch(0.78 0.17 65); /* #f7931e */
+  --brand-magenta: oklch(0.65 0.25 5); /* #e84393 */
+  --brand-violet: oklch(0.58 0.22 290); /* #6c5ce7 */
+
+  --primary: oklch(0.65 0.25 5);
+  --primary-foreground: oklch(0.98 0.005 280);
+
+  --secondary: oklch(0.22 0.025 285);
+  --secondary-foreground: oklch(0.97 0.005 280);
+
+  --muted: oklch(0.22 0.022 285);
+  --muted-foreground: oklch(0.68 0.02 285);
+
+  --accent: oklch(0.58 0.22 290);
+  --accent-foreground: oklch(0.98 0.005 280);
+
+  --destructive: oklch(0.62 0.24 25);
+  --destructive-foreground: oklch(0.98 0.005 280);
+
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 10%);
+  --ring: oklch(0.65 0.25 5);
+
+  /* Gradients & effects */
+  --gradient-brand: linear-gradient(135deg, #ff6b35 0%, #e84393 50%, #6c5ce7 100%);
+  --gradient-brand-soft: linear-gradient(135deg, #ff6b3530 0%, #e8439330 50%, #6c5ce730 100%);
+  --gradient-radial: radial-gradient(ellipse at top, #6c5ce740 0%, transparent 60%);
+  --gradient-card: linear-gradient(
+    180deg,
+    oklch(0.18 0.02 285 / 0.7) 0%,
+    oklch(0.14 0.018 280 / 0.6) 100%
+  );
+  --gradient-text: linear-gradient(135deg, #ff6b35 0%, #e84393 60%, #a78bfa 100%);
+
+  --shadow-glow: 0 0 40px -10px #e8439360, 0 0 80px -30px #6c5ce740;
+  --shadow-card: 0 8px 30px -10px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+  --shadow-elevated: 0 20px 60px -20px rgba(232, 67, 147, 0.25), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
+
+  --sidebar: oklch(0.15 0.018 282);
+  --sidebar-foreground: oklch(0.97 0.005 280);
+  --sidebar-primary: oklch(0.65 0.25 5);
+  --sidebar-primary-foreground: oklch(0.98 0.005 280);
+  --sidebar-accent: oklch(0.22 0.022 285);
+  --sidebar-accent-foreground: oklch(0.97 0.005 280);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.65 0.25 5);
+}
+
+/* Site is dark-by-default; .light overrides if user opts in */
+.light {
+  --background: oklch(0.99 0.005 280);
+  --foreground: oklch(0.15 0.02 280);
+  --surface: oklch(0.97 0.008 280);
+  --surface-elevated: oklch(1 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.02 280);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.02 280);
+  --secondary: oklch(0.95 0.008 280);
+  --secondary-foreground: oklch(0.2 0.02 280);
+  --muted: oklch(0.95 0.008 280);
+  --muted-foreground: oklch(0.45 0.02 280);
+  --border: oklch(0.15 0.02 280 / 10%);
+  --input: oklch(0.15 0.02 280 / 12%);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    background-image:
+      radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.58 0.22 290 / 0.18), transparent),
+      radial-gradient(ellipse 60% 40% at 90% 10%, oklch(0.65 0.25 5 / 0.12), transparent);
+    background-attachment: fixed;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-family: var(--font-display);
+    letter-spacing: -0.02em;
+  }
+
+  ::selection {
+    background: #e8439360;
+    color: white;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #ff6b3580, #6c5ce780);
+    border-radius: 999px;
+  }
+}
+
+@layer components {
+  .text-gradient {
+    background: var(--gradient-text);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .bg-gradient-brand {
+    background: var(--gradient-brand);
+  }
+  .bg-gradient-card {
+    background: var(--gradient-card);
+  }
+  .glass {
+    background: oklch(0.18 0.02 285 / 0.55);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+    border: 1px solid oklch(1 0 0 / 0.08);
+  }
+  .glass-strong {
+    background: oklch(0.14 0.018 282 / 0.78);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    border: 1px solid oklch(1 0 0 / 0.08);
+  }
+  .glow-ring {
+    box-shadow: var(--shadow-glow);
+  }
+  .btn-glow {
+    background: var(--gradient-brand);
+    color: white;
+    box-shadow:
+      0 8px 24px -8px #e8439370,
+      inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    transition:
+      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.25s;
+  }
+  .btn-glow:hover {
+    transform: translateY(-2px);
+    box-shadow:
+      0 14px 32px -8px #e84393a0,
+      inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  }
+  .card-tilt {
+    transition:
+      transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+      box-shadow 0.4s;
+  }
+  .card-tilt:hover {
+    transform: translateY(-6px) scale(1.015);
+    box-shadow: var(--shadow-elevated);
+  }
+  .ring-brand {
+    box-shadow:
+      0 0 0 2px transparent,
+      0 0 0 4px var(--brand-magenta);
+  }
+}
+
+/* Animations */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-12px);
+  }
+}
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 #e8439350;
+  }
+  50% {
+    box-shadow: 0 0 0 16px transparent;
+  }
+}
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+@keyframes gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+.animate-pulse-glow {
+  animation: pulse-glow 2.4s ease-out infinite;
+}
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-shift 10s ease infinite;
+}
+.animate-fade-up {
+  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.animate-scale-in {
+  animation: scale-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+.animate-marquee {
+  animation: marquee 30s linear infinite;
+}
+.shimmer {
+  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.06), transparent);
+  background-size: 200% 100%;
+  animation: shimmer 1.6s linear infinite;
+}

package/terminal-test-output.txt

@@ -0,0 +1 @@
+ok

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "eslint.config.js"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/vercel.json

@@ -0,0 +1,26 @@
+{
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "installCommand": "npm install",
+  "framework": "other",
+  "env": {
+    "NODE_ENV": "production"
+  },
+  "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ],
+  "rewrites": [
+    {
+      "source": "/:path*",
+      "destination": "/index.html"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,38 @@
+// @lovable.dev/vite-tanstack-config already includes the following — do NOT add them manually
+// or the app will break with duplicate plugins:
+//   - tanstackStart, viteReact, tailwindcss, tsConfigPaths, cloudflare (build-only),
+//     componentTagger (dev-only), VITE_* env injection, @ path alias, React/TanStack dedupe,
+//     error logger plugins, and sandbox detection (port/host/strictPort).
+// You can pass additional config via defineConfig({ vite: { ... } }) if needed.
+import { defineConfig } from "@lovable.dev/vite-tanstack-config";
+
+// Redirect TanStack Start's bundled server entry to src/server.ts (our SSR error wrapper).
+// @cloudflare/vite-plugin builds from this — wrangler.jsonc main alone is insufficient.
+export default defineConfig({
+  tanstackStart: {
+    server: { entry: "server" },
+  },
+  vite: {
+    build: {
+      chunkSizeWarningLimit: 800,
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (!id.includes("node_modules")) return;
+
+            const normalizedId = id.replace(/\\/g, "/");
+            const parts = normalizedId.split("/node_modules/");
+            const pkgPath = parts[1];
+            if (!pkgPath) return;
+
+            const segments = pkgPath.split("/");
+            const pkgName = segments[0].startsWith("@")
+              ? `${segments[0]}/${segments[1]}`
+              : segments[0];
+            return `vendor-${pkgName.replace("@", "").replace("/", "-")}`;
+          },
+        },
+      },
+    },
+  },
+});

package/wrangler.jsonc

@@ -0,0 +1,7 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "tanstack-start-app",
+  "compatibility_date": "2025-09-24",
+  "compatibility_flags": ["nodejs_compat"],
+  "main": "src/server.ts",
+}