create-surf-app 0.1.26-alpha.0 → 1.0.0-alpha.0

package/dist/chunk-NZOL5GFZ.js

@@ -0,0 +1,131 @@
+// src/index.ts
+import fs from "fs";
+import os from "os";
+import path from "path";
+import { fileURLToPath } from "url";
+var DEFAULT_BACKEND_PORT = "3001";
+var VALID_TEMPLATES = ["vite", "nextjs"];
+async function createSurfApp({
+  projectName = ".",
+  backendPort = process.env.BACKEND_PORT || DEFAULT_BACKEND_PORT,
+  previewBase = process.env.BASE_PATH,
+  template: templateArg,
+  logger = console.log
+} = {}) {
+  const root = path.resolve(projectName);
+  const name = path.basename(root);
+  const template = validateTemplate(templateArg);
+  const validatedBackendPort = validatePort("backend", backendPort);
+  const templateDir = resolveTemplateDir(template);
+  logger(`
+  Creating Surf app (${template}) in ${root}
+`);
+  fs.mkdirSync(root, { recursive: true });
+  copyDir(templateDir, root, root, logger);
+  if (template === "nextjs") {
+    writeNextjsEnvFile(root, validatedBackendPort, previewBase);
+    finalizePackageName(root, name);
+    logger(`
+Done! Next steps:
+
+  cd ${name}
+  npm install
+  npm run dev
+
+  Open http://localhost:3000
+`);
+  } else {
+    writeEnvFiles(root, validatedBackendPort, previewBase);
+    logger(`
+Done! Next steps:
+
+  cd ${name}
+  cd backend && npm install && cd ..
+  cd frontend && npm install && cd ..
+
+  # Start backend
+  cd backend && npm run dev &
+
+  # Start frontend
+  cd frontend && npm run dev
+
+  Open the local URL printed by Vite
+`);
+  }
+  return root;
+}
+function validateTemplate(template) {
+  if (!template) return "vite";
+  if (!VALID_TEMPLATES.includes(template)) {
+    throw new Error(`Unknown template: ${template}. Valid templates: ${VALID_TEMPLATES.join(", ")}`);
+  }
+  return template;
+}
+function resolveTemplateDir(template = "vite") {
+  const dirName = template === "vite" ? "default" : template;
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  const candidates = [
+    path.join(here, "templates", dirName),
+    path.join(here, "..", "templates", dirName)
+  ];
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate)) return candidate;
+  }
+  throw new Error(`Could not find ${template} template near ${here}`);
+}
+function copyDir(src, dest, root, logger) {
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyDir(srcPath, destPath, root, logger);
+      continue;
+    }
+    fs.mkdirSync(path.dirname(destPath), { recursive: true });
+    fs.writeFileSync(destPath, fs.readFileSync(srcPath));
+    logger(`  ${path.relative(root, destPath)}`);
+  }
+}
+function validatePort(label, value) {
+  const port = Number.parseInt(value, 10);
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    throw new Error(`Invalid ${label} port: ${value}`);
+  }
+  return String(port);
+}
+function finalizePackageName(root, projectName) {
+  const pkgPath = path.join(root, "package.json");
+  if (!fs.existsSync(pkgPath)) return;
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  pkg.name = projectName.trim().toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "") || "surf-app";
+  fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}${os.EOL}`);
+}
+function writeNextjsEnvFile(root, port, basePath) {
+  const envPath = path.join(root, ".env");
+  const envContent = [
+    `FRONTEND_PORT=${port}`,
+    `BASE_PATH=${basePath || ""}`,
+    "SURF_API_KEY="
+  ].join(os.EOL);
+  fs.writeFileSync(envPath, `${envContent}${os.EOL}`);
+}
+function writeEnvFiles(root, backendPort, previewBase) {
+  const backendEnvPath = path.join(root, "backend", ".env");
+  const frontendEnvPath = path.join(root, "frontend", ".env");
+  const backendEnv = [
+    `BACKEND_PORT=${backendPort}`,
+    "SURF_API_KEY="
+  ].join(os.EOL);
+  fs.writeFileSync(backendEnvPath, `${backendEnv}${os.EOL}`);
+  const frontendEnv = [
+    "FRONTEND_PORT=5173",
+    `BACKEND_PORT=${backendPort}`,
+    `BASE_PATH=${previewBase || ""}`
+  ].join(os.EOL);
+  fs.writeFileSync(frontendEnvPath, `${frontendEnv}${os.EOL}`);
+}
+
+export {
+  createSurfApp
+};

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   createSurfApp
-} from "./chunk-E32T2IIS.js";
+} from "./chunk-NZOL5GFZ.js";
 
 // src/cli.ts
 var VALUE_FLAGS = /* @__PURE__ */ new Set([

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   createSurfApp
-} from "./chunk-E32T2IIS.js";
+} from "./chunk-NZOL5GFZ.js";
 export {
   createSurfApp
 };

package/dist/templates/default/backend/package.json

@@ -2,11 +2,11 @@
   "name": "backend",
   "private": true,
   "scripts": {
-    "start": "node server.js",
-    "dev": "node --watch server.js"
+    "start": "node --env-file=.env server.js",
+    "dev": "node --env-file=.env --watch server.js"
   },
   "dependencies": {
-    "@surf-ai/sdk": "0.1.4-beta",
+    "@surf-ai/sdk": "1.0.0-alpha.1",
     "express": "4.22.1"
   }
 }

package/dist/templates/default/backend/server.js

@@ -1,2 +1,2 @@
 const { createServer } = require('@surf-ai/sdk/server')
-createServer({ proxy: false }).start()
+createServer().start()

package/dist/templates/default/frontend/src/vite-env.d.ts

@@ -1,10 +1 @@
 /// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_PORT: string
-  readonly VITE_BACKEND_PORT: string
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
-}

package/dist/templates/default/frontend/vite.config.ts

@@ -5,7 +5,7 @@ import tailwindcss from '@tailwindcss/vite'
 
 function readRequiredPort(
   env: Record<string, string>,
-  name: 'VITE_BACKEND_PORT' | 'VITE_PORT',
+  name: 'BACKEND_PORT' | 'FRONTEND_PORT',
 ) {
   const value = env[name]
   const port = Number.parseInt(value || '', 10)
@@ -16,9 +16,10 @@ function readRequiredPort(
 }
 
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd())
-  const backendPort = readRequiredPort(env, 'VITE_BACKEND_PORT')
-  const base = env.VITE_BASE || './'
+  const env = loadEnv(mode, process.cwd(), '')
+  const frontendPort = readRequiredPort(env, 'FRONTEND_PORT')
+  const backendPort = readRequiredPort(env, 'BACKEND_PORT')
+  const base = env.BASE_PATH || './'
   const hasAbsBase = base.startsWith('/')
   const apiBasePrefix = hasAbsBase ? base.replace(/\/$/, '') : ''
 
@@ -33,8 +34,8 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [react(), tailwindcss()],
     server: {
-      port: readRequiredPort(env, 'VITE_PORT'),
       host: '0.0.0.0',
+      port: frontendPort,
       proxy: {
         [`${apiBasePrefix}/api`]: backendProxy,
       },

package/dist/templates/default/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "surf-app",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently \"npm run dev --prefix backend\" \"npm run dev --prefix frontend\"",
+    "install:all": "cd backend && npm install && cd ../frontend && npm install"
+  },
+  "devDependencies": {
+    "concurrently": "^9.0.0"
+  }
+}

package/dist/templates/nextjs/CLAUDE.md

@@ -1 +1,93 @@
-@AGENTS.md
+# Project
+
+Built with [Surf SDK](https://github.com/cyberconnecthq/urania/tree/main/packages/sdk) and Next.js App Router.
+
+## Imports from @surf-ai/sdk
+
+Use `@surf-ai/sdk/server` in API route handlers to talk to Surf data APIs.
+Do not import `@surf-ai/sdk/server` in client components.
+Use `fetch('/api/...')` in client components to call your own API routes.
+
+**API Route Handler (`@surf-ai/sdk/server`):**
+
+```ts
+import { dataApi } from "@surf-ai/sdk/server";
+const data = await dataApi.market.price({ symbol: "BTC" });
+const holders = await dataApi.token.holders({
+  address: "0x...",
+  chain: "ethereum",
+});
+// Escape hatch for new endpoints:
+const raw = await dataApi.get("newcategory/endpoint", { foo: "bar" });
+```
+
+## Structure
+
+```
+app/page.tsx              - build your UI here
+app/api/*/route.ts        - add API route handlers
+components/               - add components (use "use client" directive)
+db/schema.ts              - define database tables
+```
+
+## Built-in Endpoints
+
+These are provided automatically - do NOT create routes for them:
+
+| Endpoint             | Method | Purpose                                        |
+| -------------------- | ------ | ---------------------------------------------- |
+| `/api/health`        | GET    | Health check - `{ status: 'ok' }`              |
+| `/api/__sync-schema` | POST   | Sync `db/schema.ts` tables to database         |
+| `/api/cron`          | GET    | List cron jobs                                 |
+| `/api/cron`          | POST   | Create a new cron task                         |
+
+## Creating API Routes
+
+Create Route Handler files in `app/api/`:
+
+```ts
+// app/api/prices/route.ts
+import { dataApi } from '@surf-ai/sdk/server'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const symbol = searchParams.get('symbol') || 'BTC'
+  const data = await dataApi.market.price({ symbol })
+  return Response.json(data)
+}
+```
+
+## Database
+
+Define tables in `db/schema.ts` using Drizzle ORM:
+
+```ts
+import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
+export const users = pgTable("users", {
+  id: serial("id").primaryKey(),
+  name: text("name").notNull(),
+  created_at: timestamp("created_at").defaultNow(),
+});
+```
+
+Tables are auto-synced on server start and when `db/schema.ts` changes in dev mode.
+
+## Do NOT modify
+
+- `instrumentation.ts` - server boot (schema sync, cron)
+- `next.config.ts` - build/deploy config
+- `db/index.ts` - database connection
+- `lib/boot.ts` - infrastructure (schema sync, cron init)
+- `app/layout.tsx` - root layout and providers
+- `app/providers.tsx` - client-side providers (QueryClient, theme)
+- `eslint.config.mjs` - lint rules
+- `globals.css` - only imports, do not add styles here (use Tailwind classes)
+
+## Rules
+
+- Add `"use client"` at the top of all components you create
+- Use `fetch('/api/...')` in client components to call API routes
+- Use `@surf-ai/sdk/server` `dataApi` in route handlers when you need Surf data
+- Do not bypass your API routes from client components
+- Packages are pre-installed - check `package.json` before installing
+- Default to a dark theme unless the user explicitly asks for a different visual direction

package/dist/templates/nextjs/app/api/__sync-schema/route.ts

@@ -0,0 +1,18 @@
+import path from 'node:path'
+import { syncSchema } from '@surf-ai/sdk/db'
+
+export async function POST() {
+  try {
+    await syncSchema({
+      schemaPath: path.join(process.cwd(), 'db', 'schema.ts'),
+      retries: 2,
+      retryDelay: 1500,
+    })
+    return Response.json({ ok: true })
+  } catch (err) {
+    return Response.json(
+      { ok: false, error: String(err) },
+      { status: 500 }
+    )
+  }
+}

package/dist/templates/nextjs/app/api/cron/route.ts

@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { randomUUID } from 'node:crypto'
+
+const CRON_PATH = path.join(process.cwd(), 'cron.json')
+
+function readCronConfig() {
+  if (!fs.existsSync(CRON_PATH)) return []
+  return JSON.parse(fs.readFileSync(CRON_PATH, 'utf-8'))
+}
+
+function writeCronConfig(config: unknown[]) {
+  fs.writeFileSync(CRON_PATH, JSON.stringify(config, null, 2))
+}
+
+export async function GET() {
+  return Response.json(readCronConfig())
+}
+
+export async function POST(request: Request) {
+  const body = await request.json()
+  const config = readCronConfig()
+  const task = {
+    id: randomUUID(),
+    ...body,
+    enabled: body.enabled ?? true,
+  }
+  config.push(task)
+  writeCronConfig(config)
+  return Response.json(task, { status: 201 })
+}

package/dist/templates/nextjs/app/api/health/route.ts

@@ -1,3 +1,3 @@
 export async function GET() {
-  return Response.json({ status: "ok" });
+  return Response.json({ status: 'ok' })
 }

package/dist/templates/nextjs/app/api/market/price/route.ts

@@ -1,25 +1,9 @@
-import { dataApi } from "@surf-ai/sdk/server";
-import { NextResponse } from "next/server";
-
-const TIME_RANGES = ["1d", "7d", "14d", "30d", "90d", "180d", "365d", "max"] as const;
+import { dataApi } from '@surf-ai/sdk/server'
 
 export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url);
-  const symbol = searchParams.get("symbol") || "BTC";
-  const rawTimeRange = searchParams.get("time_range");
-  const timeRange = TIME_RANGES.includes((rawTimeRange || "") as (typeof TIME_RANGES)[number])
-    ? (rawTimeRange as (typeof TIME_RANGES)[number])
-    : "1d";
-
-  try {
-    const data = await dataApi.market.price({
-      symbol,
-      time_range: timeRange,
-    });
+  const { searchParams } = new URL(request.url)
+  const symbol = searchParams.get('symbol') || 'BTC'
 
-    return NextResponse.json(data);
-  } catch (error) {
-    const message = error instanceof Error ? error.message : "Unknown error";
-    return NextResponse.json({ error: message }, { status: 500 });
-  }
+  const data = await dataApi.market.price({ symbol })
+  return Response.json(data)
 }

package/dist/templates/nextjs/app/globals.css

@@ -1,26 +1,2 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+@import "tw-animate-css";

package/dist/templates/nextjs/app/layout.tsx

@@ -1,33 +1,24 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import type { Metadata } from "next"
+import { ThemeProvider } from "next-themes"
+import { Providers } from "./providers"
+import "./globals.css"
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: "Surf App",
+}
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
+          <Providers>{children}</Providers>
+        </ThemeProvider>
+      </body>
     </html>
-  );
+  )
 }

package/dist/templates/nextjs/app/page.tsx

@@ -1,65 +1,25 @@
-import Image from "next/image";
+"use client"
+
+const SURF_LOGO_PATH = "M14.6875 13.333C15.0977 13.333 15.4859 13.5196 15.7422 13.8398L17.8721 16.502C17.9009 16.538 17.9308 16.5721 17.9619 16.6035C18.3091 16.9542 18.7529 17.3405 18.7529 17.834C18.7528 18.3399 18.3428 18.75 17.8369 18.75H17.5713C17.2123 18.75 16.8727 18.5869 16.6484 18.3066L15.4678 16.8311C14.761 15.9479 13.3369 16.4478 13.3369 17.5791V18.6494C13.3369 18.7062 13.2882 18.75 13.2314 18.75H11.3584C10.7127 18.75 10.1016 18.4564 9.69824 17.9521L8.80176 16.8311C8.09497 15.9477 6.66993 16.4478 6.66992 17.5791V18.6494C6.66991 18.7062 6.62124 18.75 6.56445 18.75H4.69141C4.04589 18.75 3.43548 18.4562 3.03223 17.9521L2.13477 16.8311C1.77885 16.3862 1.25293 15.931 1.25293 15.3613V13.4395C1.253 13.3822 1.29729 13.3331 1.35449 13.333C1.7646 13.3332 2.15295 13.5196 2.40918 13.8398L4.53809 16.502C5.24478 17.3853 6.66962 16.886 6.66992 15.7549V14.6836C6.67018 13.9379 7.27483 13.3332 8.02051 13.333C8.43065 13.333 8.81884 13.5197 9.0752 13.8398L11.2051 16.502C11.9097 17.3827 13.3282 16.8887 13.3369 15.7646V14.6836C13.3372 13.9378 13.9417 13.3331 14.6875 13.333ZM14.6875 6.66699C15.0978 6.66702 15.4859 6.85347 15.7422 7.17383L17.8721 9.83594C18.2276 10.2801 18.7526 10.7339 18.7529 11.3027V13.2266C18.7528 13.2833 18.7091 13.333 18.6523 13.333C18.2421 13.3329 17.8539 13.1465 17.5977 12.8262L15.4678 10.1641C14.7609 9.28113 13.3369 9.78089 13.3369 10.9121V11.9824C13.3369 12.7282 12.7321 13.3328 11.9863 13.333C11.5761 13.3329 11.187 13.1465 10.9307 12.8262L8.80176 10.1641C8.09497 9.28072 6.66993 9.78076 6.66992 10.9121V11.9824C6.66992 12.7284 6.06525 13.3329 5.31934 13.333C4.90908 13.3329 4.52094 13.1465 4.26465 12.8262L2.13477 10.1641C1.7788 9.71925 1.25293 9.26403 1.25293 8.69434V6.77344C1.253 6.71621 1.29728 6.6671 1.35449 6.66699C1.76461 6.66714 2.15295 6.85359 2.40918 7.17383L4.53809 9.83594C5.24487 10.7193 6.66989 10.2192 6.66992 9.08789V8.01758C6.66992 7.27168 7.27467 6.66722 8.02051 6.66699C8.43082 6.66699 8.81885 6.85345 9.0752 7.17383L11.2051 9.83594C11.9097 10.7163 13.3279 10.2223 13.3369 9.09863V8.01758C13.3369 7.27161 13.9416 6.6671 14.6875 6.66699ZM2.43555 1.25C2.79488 1.25 3.13499 1.41367 3.35938 1.69434L4.53809 3.16895C5.24485 4.05241 6.66991 3.55228 6.66992 2.4209V1.35059C6.66993 1.29391 6.71874 1.25017 6.77539 1.25H8.64844C9.29394 1.25 9.90438 1.5438 10.3076 2.04785L11.2051 3.16895C11.9097 4.04967 13.3282 3.55564 13.3369 2.43164V1.35059C13.3369 1.29391 13.3857 1.25017 13.4424 1.25H15.3154C15.9609 1.25 16.5714 1.5438 16.9746 2.04785L17.8721 3.16895C18.2275 3.61314 18.7526 4.06689 18.7529 4.63574V6.56055C18.7528 6.61728 18.7091 6.66699 18.6523 6.66699C18.2421 6.66688 17.8539 6.4795 17.5977 6.15918L15.4678 3.49805C14.761 2.61474 13.3371 3.11388 13.3369 4.24512V5.31543C13.3369 6.06126 12.7321 6.66673 11.9863 6.66699C11.5761 6.66693 11.187 6.47955 10.9307 6.15918L8.80176 3.49805C8.095 2.61474 6.67006 3.11388 6.66992 4.24512V5.31543C6.66992 6.06137 6.06525 6.66691 5.31934 6.66699C4.90908 6.66693 4.52094 6.47955 4.26465 6.15918L2.13477 3.49805C2.10558 3.46158 2.07543 3.42725 2.04395 3.39551C1.6966 3.04528 1.25293 2.6583 1.25293 2.16504C1.25317 1.65963 1.66348 1.25 2.16895 1.25H2.43555Z"
+
+function SurfLogo() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d={SURF_LOGO_PATH} fill="var(--fg-base, #212121)" />
+    </svg>
+  )
+}
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
+    <div className="min-h-screen flex flex-col items-center justify-center gap-4 rounded-[14px]" style={{ background: 'var(--bg-chat-nav, #f4f4f4)', border: '1px solid var(--border-strong, rgba(42,42,42,0.08))' }}>
+      <SurfLogo />
+      <h1 className="font-black text-[36px] leading-[44px] text-[var(--fg-base,#212121)]">
+        GM, Builder<span style={{ color: 'var(--brand-100, #ff2882)' }}>.</span>
+      </h1>
+      <p className="text-xl leading-7 text-[var(--fg-subtle,#7a7a7a)]">
+        Start your crypto project here!
+      </p>
     </div>
-  );
+  )
 }

package/dist/templates/nextjs/app/providers.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { useState } from "react"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: 3,
+            staleTime: 30 * 1000,
+          },
+        },
+      })
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

package/dist/templates/nextjs/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }