create-surf-app 0.1.5 → 0.1.7

package/dist/templates/default/frontend/src/index.css

@@ -0,0 +1,314 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&family=Roboto+Mono:wght@400;500&display=swap');
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* ===== Tailwind CSS 4 Theme — maps CSS vars to Tailwind tokens ===== */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  /* Surf Semantic — Background */
+  --color-bg-subtle: var(--bg-subtle);
+  --color-bg-subtle-hover: var(--bg-subtle-hover);
+  --color-bg-base: var(--bg-base);
+  --color-bg-base-opaque: var(--bg-base-opaque);
+  --color-bg-menu: var(--bg-menu);
+  --color-bg-chat: var(--bg-chat);
+  --color-bg-chat-nav: var(--bg-chat-nav);
+
+  /* Surf Semantic — Foreground */
+  --color-fg-base: var(--fg-base);
+  --color-fg-subtle: var(--fg-subtle);
+  --color-fg-muted: var(--fg-muted);
+  --color-fg-disabled: var(--fg-disabled);
+
+  /* Surf Semantic — Border */
+  --color-border-base: var(--border-base);
+  --color-border-strong: var(--border-strong);
+  --color-border-contrast: var(--border-contrast);
+  --color-border-focus: var(--border-focus);
+
+  /* Surf Brand */
+  --color-brand-100: var(--brand-100);
+  --color-brand-60: var(--brand-60);
+  --color-brand-30: var(--brand-30);
+  --color-brand-10: var(--brand-10);
+
+  /* Surf Visualizer (Chart/Status) */
+  --color-visualizer-rose-pop: var(--visualizer-rose-pop);
+  --color-visualizer-indigo-breeze: var(--visualizer-indigo-breeze);
+  --color-visualizer-emerald-mint: var(--visualizer-emerald-mint);
+  --color-visualizer-golden-amber: var(--visualizer-golden-amber);
+  --color-visualizer-royal-blue: var(--visualizer-royal-blue);
+  --color-visualizer-crimson-spark: var(--visualizer-crimson-spark);
+  --color-visualizer-aqua-glow: var(--visualizer-aqua-glow);
+  --color-visualizer-sunbeam-yellow: var(--visualizer-sunbeam-yellow);
+
+  /* Surf Tags */
+  --color-tag-blue-10: var(--tag-blue-10);
+  --color-tag-blue-100: var(--tag-blue-100);
+  --color-tag-yellow-10: var(--tag-yellow-10);
+  --color-tag-yellow-100: var(--tag-yellow-100);
+  --color-tag-purple-10: var(--tag-purple-10);
+  --color-tag-purple-100: var(--tag-purple-100);
+  --color-tag-cyan-10: var(--tag-cyan-10);
+  --color-tag-cyan-100: var(--tag-cyan-100);
+  --color-tag-pink-10: var(--tag-pink-10);
+  --color-tag-pink-100: var(--tag-pink-100);
+  --color-tag-orange-10: var(--tag-orange-10);
+  --color-tag-orange-100: var(--tag-orange-100);
+
+  /* Neutral */
+  --color-neutral-0: var(--neutral-0);
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+/* ===== Light Mode (default) ===== */
+:root {
+  /* shadcn semantic tokens (Surf Light) */
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 13%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 13%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 13%);
+  --primary: hsl(339 100% 58%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(0 3% 95%);
+  --secondary-foreground: hsl(0 0% 13%);
+  --muted: hsl(0 3% 95%);
+  --muted-foreground: hsl(0 0% 48%);
+  --accent: hsl(0 3% 95%);
+  --accent-foreground: hsl(0 0% 13%);
+  --destructive: hsl(357 91% 55%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 91%);
+  --input: hsl(0 0% 91%);
+  --ring: #212121;
+  --radius: 0.5rem;
+
+  /* Surf Neutral Palette */
+  --neutral-0: #ffffff;
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f4f4;
+  --neutral-200: #e7e7e7;
+  --neutral-300: #d8d8d8;
+  --neutral-400: #aaaaaa;
+  --neutral-500: #7a7a7a;
+  --neutral-600: #5b5b5b;
+  --neutral-700: #464646;
+  --neutral-800: #2a2a2a;
+  --neutral-900: #212121;
+  --neutral-950: #1b1b1b;
+  --neutral-1000: #101010;
+
+  /* Surf Brand */
+  --brand-100: #ff2882;
+  --brand-60: rgba(255, 40, 130, 0.6);
+  --brand-30: rgba(255, 40, 130, 0.3);
+  --brand-10: rgba(255, 40, 130, 0.1);
+
+  /* Surf Brand Extended */
+  --brand-seafoam: #b6cfd0;
+  --brand-dusty-teal: #6ba4b8;
+  --brand-black-aqua: #002f38;
+  --brand-deep-teal-blue: #07272d;
+
+  /* Surf Visualizer (Chart) Colors */
+  --visualizer-rose-pop: #fd4b96;
+  --visualizer-indigo-breeze: #6366f1;
+  --visualizer-emerald-mint: #10b981;
+  --visualizer-golden-amber: #f59e0b;
+  --visualizer-royal-blue: #1d4ed8;
+  --visualizer-crimson-spark: #ef4444;
+  --visualizer-aqua-glow: #06b6d4;
+  --visualizer-sunbeam-yellow: #facc15;
+
+  /* Surf Semantic Tokens (Light) */
+  --bg-subtle: rgba(42, 42, 42, 0.04);
+  --bg-subtle-hover: rgba(42, 42, 42, 0.06);
+  --bg-base: rgba(255, 255, 255, 0.88);
+  --bg-base-opaque: #ffffff;
+  --bg-menu: #ffffff;
+  --bg-chat: #fcfcfc;
+  --bg-chat-nav: #f4f4f4;
+  --fg-base: #212121;
+  --fg-subtle: #7a7a7a;
+  --fg-muted: #aaaaaa;
+  --fg-disabled: #d8d8d8;
+  --border-base: rgba(42, 42, 42, 0.04);
+  --border-strong: rgba(42, 42, 42, 0.08);
+  --border-contrast: rgba(42, 42, 42, 0.12);
+  --border-focus: rgba(42, 42, 42, 0.4);
+
+  /* Tag Colors */
+  --tag-blue-10: rgba(91, 181, 255, 0.1);
+  --tag-blue-100: #5bb5ff;
+  --tag-yellow-10: rgba(222, 195, 120, 0.1);
+  --tag-yellow-100: #dec378;
+  --tag-purple-10: rgba(144, 142, 184, 0.1);
+  --tag-purple-100: #908eb8;
+  --tag-cyan-10: rgba(116, 173, 164, 0.1);
+  --tag-cyan-100: #74ada4;
+  --tag-pink-10: rgba(184, 142, 167, 0.1);
+  --tag-pink-100: #b88ea7;
+  --tag-orange-10: rgba(184, 160, 142, 0.1);
+  --tag-orange-100: #b8a08e;
+
+  /* Surf Gradient Definitions (raw, mode-independent) */
+  --gradient-max-dark: linear-gradient(213deg, #8c421d 2%, #fbe67b 31%, #fcfbe7 53%, #f7d14e 77%, #d4a041 100%);
+  --gradient-max-light: linear-gradient(125deg, #8c421d 22%, #d2af00 47%, #cd9124 67%, #d4a041 88%);
+  --gradient-pro-dark: linear-gradient(213deg, #7a96ac 1%, #c5d6e2 27%, #eaeff3 47%, #c5d6e2 65%, #a3bccf 89%);
+  --gradient-pro-light: linear-gradient(129deg, #7a96ac 4%, #6d7f8d 27%, #9fb9ce 55%, #6d7f8d 90%);
+  --gradient-plus-dark: linear-gradient(214deg, #986732 0%, #a7825b 23%, #f6d0ab 45%, #a07043 66%, #9d774e 100%);
+  --gradient-plus-light: linear-gradient(129deg, #9e8976 5%, #7a5e50 19%, #f6d0ab 35%, #9d774e 49%, #c99b70 65%, #795f52 78%);
+  --gradient-upgrade-dark: linear-gradient(214deg, #ffedf3 0%, #ff9fbf 30%, #fd5d92 59%, #ffdab2 100%);
+  --gradient-upgrade-light: linear-gradient(32deg, #fc3bb2 6%, #f7906e 79%);
+  --gradient-new-function: linear-gradient(33deg, #6e86ff 17%, #ff2882 55%, #ff98a4 103%);
+  --gradient-suggestion: linear-gradient(32deg, #fd538c 4%, #5aa6e0 47%, #ffdab2 98%);
+  --gradient-g1: linear-gradient(189deg, #ffacc6 6%, #b6e0f5 99%);
+  --gradient-g2: linear-gradient(34deg, #9796f0 9%, #fbc7d4 84%);
+  --gradient-g3: linear-gradient(to right, #ed4264, #ffedbc);
+  --gradient-g4: linear-gradient(232deg, #fedc2a 4%, #dd5789 56%, #7a2c9e 104%);
+  --gradient-g5: linear-gradient(32deg, #fc3bb2 6%, #f7906e 79%);
+
+  /* Surf Gradients (semantic, auto-switch by mode) */
+  --gradient-max: var(--gradient-max-light);
+  --gradient-pro: var(--gradient-pro-light);
+  --gradient-plus: var(--gradient-plus-light);
+  --gradient-upgrade: var(--gradient-upgrade-light);
+
+  /* Spacing */
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-64: 64px;
+  --spacing-96: 96px;
+  --spacing-128: 128px;
+
+  /* Border Radius */
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-24: 24px;
+  --radius-full: 999px;
+
+  /* Typography */
+  --font-family-header: "Lato", "PingFang SC", sans-serif;
+  --font-family-body: "Lato", "PingFang SC", sans-serif;
+  --font-family-code: "Roboto Mono", monospace;
+}
+
+/* ===== Dark Mode ===== */
+.dark {
+  /* shadcn semantic tokens (Surf Dark) */
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 91%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 91%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 91%);
+  --primary: hsl(339 100% 58%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(0 0% 16%);
+  --secondary-foreground: hsl(0 0% 91%);
+  --muted: hsl(0 0% 16%);
+  --muted-foreground: hsl(0 0% 67%);
+  --accent: hsl(0 0% 16%);
+  --accent-foreground: hsl(0 0% 91%);
+  --destructive: hsl(359 100% 65%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 20%);
+  --input: hsl(0 0% 20%);
+  --ring: #e7e7e7;
+
+  /* Surf Gradients (Dark) */
+  --gradient-max: var(--gradient-max-dark);
+  --gradient-pro: var(--gradient-pro-dark);
+  --gradient-plus: var(--gradient-plus-dark);
+  --gradient-upgrade: var(--gradient-upgrade-dark);
+
+  /* Surf Semantic Tokens (Dark) */
+  --bg-subtle: rgba(255, 255, 255, 0.04);
+  --bg-subtle-hover: rgba(255, 255, 255, 0.12);
+  --bg-base: rgba(42, 42, 42, 0.8);
+  --bg-base-opaque: #171717;
+  --bg-menu: #252525;
+  --bg-chat: #101010;
+  --bg-chat-nav: #171717;
+  --fg-base: #e7e7e7;
+  --fg-subtle: #aaaaaa;
+  --fg-muted: #7a7a7a;
+  --fg-disabled: #5b5b5b;
+  --border-base: rgba(255, 255, 255, 0.04);
+  --border-strong: rgba(255, 255, 255, 0.08);
+  --border-contrast: rgba(255, 255, 255, 0.12);
+  --border-focus: rgba(255, 255, 255, 0.4);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before {
+    border-color: var(--color-border);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: "Lato", "PingFang SC", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --spacing-96: 64px;
+    --spacing-128: 64px;
+  }
+}

package/dist/templates/default/frontend/src/lib/api.ts

@@ -0,0 +1,31 @@
+/**
+ * Crypto API client helpers (fallback — swagger fetch failed).
+ */
+
+export { API_BASE, normalizeProxyPath, fetchWithRetry, proxyGet, proxyPost } from './fetch'
+
+export interface ApiResponse<T> {
+  data: T[]
+  meta?: { total?: number; limit?: number; offset?: number }
+  error?: { code: string; message: string }
+}
+
+export interface ApiObjectResponse<T> {
+  data: T
+  meta?: { total?: number; limit?: number; offset?: number }
+  error?: { code: string; message: string }
+}
+
+export interface CursorMeta {
+  has_more: boolean
+  next_cursor?: string
+  limit?: number
+  cached?: boolean
+  credits_used?: number
+}
+
+export interface ApiCursorResponse<T> {
+  data: T[]
+  meta: CursorMeta
+  error?: { code: string; message: string }
+}

package/dist/templates/default/frontend/src/lib/fetch.ts

@@ -0,0 +1,38 @@
+/**
+ * Core fetch utilities for proxy API access.
+ * This file is part of the scaffold — do NOT modify manually.
+ */
+
+export const API_BASE = import.meta.env.VITE_API_URL || import.meta.env.BASE_URL.replace(/\/$/, '')
+
+/** Normalize logical proxy paths; strips leading slashes and proxy/ prefix. */
+export function normalizeProxyPath(path: string): string {
+  const trimmed = String(path || '').replace(/^\/+/, '')
+  return trimmed.replace(/^(?:proxy\/)+/, '')
+}
+
+/** Fetch with retry on empty response. */
+export async function fetchWithRetry<T = any>(url: string, init?: RequestInit, retries = 1): Promise<T> {
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    const res = await fetch(url, init)
+    const text = await res.text()
+    if (text) return JSON.parse(text)
+    if (attempt < retries) await new Promise(r => setTimeout(r, 1000))
+  }
+  throw new Error(`Empty response from ${url.replace(API_BASE, '')}`)
+}
+
+/** Generic proxy GET \u2014 use for any /proxy/{category}/{endpoint} route. */
+export async function proxyGet<T = any>(path: string, params?: Record<string, string>): Promise<T> {
+  const qs = params ? '?' + new URLSearchParams(params).toString() : ''
+  return fetchWithRetry<T>(`${API_BASE}/proxy/${normalizeProxyPath(path)}${qs}`)
+}
+
+/** Generic proxy POST \u2014 use for any /proxy/{category}/{endpoint} route. */
+export async function proxyPost<T = any>(path: string, body?: any): Promise<T> {
+  return fetchWithRetry<T>(`${API_BASE}/proxy/${normalizeProxyPath(path)}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  })
+}

package/dist/templates/default/frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

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

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

package/dist/templates/default/frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,162 @@
+import path from 'path'
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// Use loadEnv to read .env before config evaluation.
+// Vite does NOT load .env files until after the config is resolved,
+// so process.env.VITE_* is unavailable here without this.
+const env = loadEnv('development', process.cwd())
+
+function readRequiredPort(name: 'VITE_BACKEND_PORT' | 'VITE_PORT') {
+  const value = env[name]
+  const port = Number.parseInt(value || '', 10)
+  if (!Number.isInteger(port)) {
+    throw new Error(`Missing required ${name} in frontend/.env`)
+  }
+  return port
+}
+
+const BACKEND_PORT = readRequiredPort('VITE_BACKEND_PORT')
+const BASE = env.VITE_BASE || './'
+
+// Vite proxy middleware runs BEFORE base-path stripping. When base is
+// non-relative (e.g. /preview/staging/{sid}/), proxy keys must be prefixed
+// with base to match incoming requests.
+// See: https://vite.dev/config/server-options#server-proxy
+const hasAbsBase = BASE.startsWith('/')
+const proxyKey = hasAbsBase ? `${BASE}proxy` : '/proxy'
+const apiProxyKey = hasAbsBase ? `${BASE}api` : '/api'
+
+const backendProxy = {
+  target: `http://127.0.0.1:${BACKEND_PORT}`,
+  changeOrigin: true,
+  // Strip base prefix so Express receives clean paths
+  ...(hasAbsBase && {
+    rewrite: (path: string) => path.replace(BASE, '/'),
+  }),
+}
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: readRequiredPort('VITE_PORT'),
+    host: '0.0.0.0',
+    proxy: {
+      // /proxy/* → Express → OutboundProxy (crypto data APIs)
+      [proxyKey]: backendProxy,
+      // /api/* → Express (custom backend routes: auth, CRUD, etc.)
+      [apiProxyKey]: backendProxy,
+    },
+    hmr: {
+      // Relative path so Vite prepends the base (VITE_BASE) to construct
+      // the full WebSocket URL: wss://host/{base}/ws/vite-hmr
+      // This ensures HMR goes through the same preview proxy chain
+      // (frontend rewrite → Muninn → Urania → Vite dev server).
+      // An absolute path (starting with /) would bypass the proxy entirely.
+      path: 'ws/vite-hmr',
+    },
+    // Pre-transform entry files at startup so deps are optimized before the
+    // first browser request.  Reduces the window where Vite serves dep stubs
+    // (partially-optimized modules) during cold start after session respawn.
+    warmup: {
+      clientFiles: ['./src/entry-client.tsx', './src/App.tsx'],
+    },
+  },
+  // Force Vite to always resolve a single copy of React.
+  // Without this, dep re-optimization after `npm install <new-pkg>` can create
+  // a new React bundle (different hash) while dynamic imports still reference
+  // the old one → two React instances → "Invalid hook call" errors.
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+    dedupe: ['react', 'react-dom'],
+    // CRITICAL: node_modules is a tmpfs mount for performance.
+    // With preserveSymlinks=false (default), esbuild and Vite may resolve
+    // paths through the tmpfs layer differently after npm install modifies
+    // the directory — old dep bundles reference the previous real path
+    // → two React instances → "Cannot read properties of null
+    // (reading 'useState')".
+    // With preserveSymlinks=true, module identity uses the logical path
+    // (frontend/node_modules/react) which stays constant regardless of
+    // underlying mount changes → single React instance always.
+    preserveSymlinks: true,
+  },
+  // Eagerly pre-bundle ALL scaffold deps at startup.
+  // Without this, Vite discovers deps lazily by crawling imports. When the agent
+  // rewrites code between turns, new imports trigger dep re-optimization which
+  // serves "stub" modules (all exports undefined) → "Cannot read properties of
+  // null (reading 'useEffect')" and "Loading dependencies..." reload loops.
+  // Pre-bundling everything eliminates lazy discovery entirely.
+  optimizeDeps: {
+    include: [
+      // React core
+      'react',
+      'react-dom',
+      'react-dom/client',
+      'react/jsx-dev-runtime',
+      'react/jsx-runtime',
+      // Data fetching
+      '@tanstack/react-query',
+      '@tanstack/query-core',
+      // Charts
+      'echarts',
+      'echarts-for-react',
+      'echarts/core',
+      'echarts/charts',
+      'echarts/components',
+      'echarts/renderers',
+      // UI primitives (Radix)
+      '@radix-ui/react-accordion',
+      '@radix-ui/react-aspect-ratio',
+      '@radix-ui/react-avatar',
+      '@radix-ui/react-checkbox',
+      '@radix-ui/react-collapsible',
+      '@radix-ui/react-context-menu',
+      '@radix-ui/react-dialog',
+      '@radix-ui/react-dropdown-menu',
+      '@radix-ui/react-hover-card',
+      '@radix-ui/react-label',
+      '@radix-ui/react-menubar',
+      '@radix-ui/react-navigation-menu',
+      '@radix-ui/react-popover',
+      '@radix-ui/react-progress',
+      '@radix-ui/react-radio-group',
+      '@radix-ui/react-scroll-area',
+      '@radix-ui/react-select',
+      '@radix-ui/react-separator',
+      '@radix-ui/react-slider',
+      '@radix-ui/react-slot',
+      '@radix-ui/react-switch',
+      '@radix-ui/react-tabs',
+      '@radix-ui/react-toast',
+      '@radix-ui/react-toggle',
+      '@radix-ui/react-toggle-group',
+      '@radix-ui/react-tooltip',
+      // UI components
+      'sonner',
+      'cmdk',
+      'vaul',
+      'embla-carousel-react',
+      'react-day-picker',
+      'react-resizable-panels',
+      // Forms & validation
+      'react-hook-form',
+      '@hookform/resolvers',
+      'zod',
+      // Utilities
+      'lucide-react',
+      'next-themes',
+      'class-variance-authority',
+      'clsx',
+      'tailwind-merge',
+      'date-fns',
+      'scheduler',
+    ],
+  },
+  // Base path set dynamically to match external preview URL.
+  // This ensures Vite's internal modules (/@vite/client, /@react-refresh, etc.)
+  // are served under the correct path through the multi-layer proxy chain.
+  base: BASE,
+})

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "create-surf-app",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Scaffold a Surf app — Vite + React + Express + @surf-ai/sdk",
   "type": "module",
   "bin": {
-    "create-surf-app": "./dist/index.js"
+    "create-surf-app": "./dist/cli.js"
   },
   "files": [
-    "dist",
-    "templates"
+    "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm --clean && rm -rf dist/templates && cp -r templates dist/templates",
-    "dev": "tsup src/index.ts --format esm --watch",
-    "test": "bun test"
+    "build": "tsup src/index.ts src/cli.ts --format esm --clean && rm -rf dist/templates && cp -r templates dist/templates",
+    "dev": "tsup src/index.ts src/cli.ts --format esm --watch",
+    "test": "tsx --test tests/no-hardcoded-port.test.ts"
   },
   "devDependencies": {
+    "tsx": "^4.20.6",
     "tsup": "^8.0.0",
     "typescript": "^5.9.0"
   }

package/dist/templates/frontend/eslint.config.js

@@ -1,42 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: ['dist', 'node_modules'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-      },
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-empty-object-type': 'warn',
-      '@typescript-eslint/ban-ts-comment': 'warn',
-      '@typescript-eslint/no-require-imports': 'off',
-      '@typescript-eslint/no-unused-expressions': 'warn',
-      '@typescript-eslint/no-unsafe-function-type': 'warn',
-    },
-  },
-)