@cioky/vike-create 0.5.2

package/README.md

@@ -0,0 +1,60 @@
+# @cioky/vike-create
+
+Scaffold a [Vike](https://vike.dev) + [Ripple TS](https://ripple-ts.com) project.
+
+Part of the [vike-ripple monorepo](https://github.com/Opaius/vike-ripple).
+
+## Usage
+
+```bash
+# With Tailwind CSS (default)
+npx @cioky/vike-create my-app
+
+# With Panda CSS
+npx @cioky/vike-create my-app --style pandacss
+
+# Without a CSS framework
+npx @cioky/vike-create my-app --style none
+
+# With Cloudflare Workers support
+npx @cioky/vike-create my-app --style tailwind --cloudflare
+
+# With Remult (SSE live query everywhere)
+npx @cioky/vike-create my-app --style tailwind --remult
+
+# With Remult + Cloudflare (DO-based realtime)
+npx @cioky/vike-create my-app --style tailwind --remult --cloudflare
+```
+
+## Flags
+
+| Flag | Description |
+|------|-------------|
+| `--style tailwind` | Tailwind CSS v4 (default) |
+| `--style pandacss` | Panda CSS |
+| `--style none` | No CSS framework |
+| `--cloudflare` | Cloudflare Workers setup (wrangler, D1, DO config) |
+| `--remult` | Remult ORM with realtime subscriptions |
+| `--remult --cloudflare` | Remult with Durable Object-based realtime via `remult-partykit` |
+
+## What's included
+
+The scaffold creates:
+
+- Vike pages (`pages/index`, `pages/about`) with SSR
+- Ripple TS `.tsrx` file support
+- `@cioky/vike-core` config (Layout, Head, hooks)
+- CSS framework config (tailwind.css or panda.config.ts)
+- Cloudflare Workers config when `--cloudflare` is set
+- Remult + realtime subscription setup when `--remult` is set
+
+## Generated Packages
+
+| Package | Installed when |
+|---------|---------------|
+| `@cioky/vike-core` | Always |
+| `@cioky/vike-tailwindcss` | `--style tailwind` |
+| `@cioky/vike-pandacss` | `--style pandacss` |
+| `remult-partykit` | `--remult --cloudflare` |
+
+See the [main repo](https://github.com/Opaius/vike-ripple) for per-package documentation.

package/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@cioky/vike-create",
+	"version": "0.5.2",
+	"description": "Scaffold a Vike + Ripple TS project",
+	"type": "module",
+	"bin": {
+		"@cioky/vike-create": "src/index.js"
+	},
+	"files": [
+		"src"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Opaius/vike-ripple.git"
+	},
+	"homepage": "https://github.com/Opaius/vike-ripple",
+	"bugs": {
+		"url": "https://github.com/Opaius/vike-ripple/issues"
+	},
+	"keywords": [
+		"vike",
+		"ripple",
+		"ripplets",
+		"vite",
+		"scaffold",
+		"tailwindcss",
+		"pandacss",
+		"cloudflare",
+		"remult"
+	],
+	"license": "MIT"
+}

package/src/index.js

@@ -0,0 +1,809 @@
+#!/usr/bin/env node
+import { readFileSync, mkdirSync, writeFileSync } from 'fs';
+import { join, resolve } from 'path';
+import { execSync } from 'child_process';
+
+// --- arg parse ---
+const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h')) {
+	console.log(`
+@cioky/vike-create — Scaffold a Vike + Ripple TS project
+
+Usage:
+  @cioky/vike-create [name] [options]
+
+Options:
+  --style <name>    CSS framework: tailwind (default), pandacss, none
+  --cloudflare      Add Cloudflare Workers configuration
+  --remult          Add Remult ORM (DO-based realtime with CF, SSE without)
+  --betterauth      Add Better Auth (requires --remult)
+  --help, -h        Show this help message
+
+Examples:
+  @cioky/vike-create my-app
+  @cioky/vike-create my-app --style pandacss
+  @cioky/vike-create my-app --cloudflare
+  @cioky/vike-create my-app --remult
+  @cioky/vike-create my-app --remult --cloudflare
+`);
+	process.exit(0);
+}
+
+let name = null;
+let style = 'tailwind';
+let cloudflare = false;
+let remult = false;
+let betterauth = false;
+
+for (let i = 0; i < args.length; i++) {
+	if (args[i] === '--style' && args[i + 1]) { style = args[++i]; continue; }
+	if (args[i] === '--cloudflare') { cloudflare = true; continue; }
+	if (args[i] === '--remult') { remult = true; continue; }
+	if (args[i] === '--betterauth') { betterauth = true; continue; }
+	if (!args[i].startsWith('--') && !name) name = args[i];
+}
+if (!name && args.length && !args[0].startsWith('--')) name = args[0];
+if (!name) name = 'my-vike-app';
+if (!['tailwind', 'pandacss', 'none'].includes(style)) {
+	console.error(`Unknown style "${style}". Use tailwind, pandacss, or none.`);
+	process.exit(1);
+}
+if (betterauth && !remult) {
+	console.error('--betterauth requires --remult.');
+	process.exit(1);
+}
+
+const root = resolve(process.cwd(), name);
+mkdirSync(join(root, 'renderer'), { recursive: true });
+mkdirSync(join(root, 'src'), { recursive: true });
+mkdirSync(join(root, 'pages', 'index'), { recursive: true });
+
+// --- package.json ---
+const deps = {
+	vike: '0.4.259',
+	'@cioky/vike-core': '0.5.6',
+	'@ripple-ts/vite-plugin': '0.3.85',
+	ripple: '0.3.85',
+};
+const devDeps = { vite: '8.1.0', typescript: '5.9.3', '@tsrx/typescript-plugin': '0.3.85' };
+if (style === 'tailwind') {
+	deps['@cioky/vike-tailwindcss'] = 'latest';
+	deps['@tailwindcss/vite'] = 'latest';
+}
+if (style === 'pandacss') {
+	deps['@cioky/vike-pandacss'] = '0.1.0';
+	deps['@pandacss/dev'] = '1.11.3';
+}
+if (cloudflare) {
+	devDeps['@cloudflare/vite-plugin'] = '1.42.2';
+	devDeps['@cloudflare/workers-types'] = '4.20260624.1';
+	devDeps.wrangler = '4.104.0';
+}
+if (remult) {
+	deps.remult = '3.3.13';
+	if (cloudflare) {
+		deps['remult-partykit'] = '1.1.0';
+		deps.partyserver = '0.5.8';
+		deps.hono = '4.12.27';
+		deps['@vikejs/hono'] = '0.2.1';
+	}
+}
+if (betterauth) {
+	deps['better-auth'] = '1.6.20';
+	deps['@nerdfolio/remult-better-auth'] = '0.4.3';
+}
+const scripts = { dev: 'vite', build: 'vite build', preview: 'vite preview', check: 'tsrx-tsc --noEmit', postinstall: 'rm -f node_modules/~ && ln -sf .. node_modules/~' };
+if (style === 'pandacss') {
+	scripts.codegen = 'panda codegen';
+	scripts.prepare = 'panda codegen';
+}
+if (cloudflare) {
+	scripts.types = 'wrangler types --env-interface Env worker-configuration.d.ts';
+}
+writeFileSync(join(root, 'package.json'), JSON.stringify({
+	name, private: true, type: 'module',
+	scripts, dependencies: deps, devDependencies: devDeps
+}, null, 2) + '\n');
+
+// --- vite.config.ts ---
+const viteImports = [
+	`import { defineConfig } from 'vite'`,
+	`import { fileURLToPath } from 'node:url'`,
+	`import { dirname } from 'node:path'`,
+	`import vike from 'vike/plugin'`,
+	`import { ripple } from '@ripple-ts/vite-plugin'`,
+	`import vikeRipple from '@cioky/vike-core'`,
+];
+const vitePlugins = [
+	`    vike(),`,
+	`    vikeRipple(),`,
+	`    ripple({ excludeRippleExternalModules: true }),`,
+];
+if (cloudflare) {
+	viteImports.unshift(`import { cloudflare } from '@cloudflare/vite-plugin'`);
+	vitePlugins.unshift(`    cloudflare({ viteEnvironment: { name: 'ssr' } }),`);
+}
+if (style === 'tailwind') {
+	viteImports.push(
+		`import vikeRippleTailwindcss from '@cioky/vike-tailwindcss'`,
+		`import tailwindcss from '@tailwindcss/vite'`
+	);
+	vitePlugins.push(`    vikeRippleTailwindcss(),`, `    tailwindcss(),`);
+}
+if (style === 'pandacss') {
+	viteImports.push(`import vikeRipplePandacss from '@cioky/vike-pandacss'`);
+	vitePlugins.push(`    vikeRipplePandacss(),`);
+}
+const vitExtras = [];
+if (cloudflare) vitExtras.push(`  environments: { ssr: { consumer: 'server' } },`);
+if (style === 'pandacss') vitExtras.push(`  css: { postcss: './postcss.config.js' },`);
+writeFileSync(join(root, 'vite.config.ts'), [
+	...viteImports, ``,
+	`const __dirname = dirname(fileURLToPath(import.meta.url))`,
+	`export default defineConfig({`,
+	`  resolve: { alias: { '~': __dirname } },`,
+	...vitExtras,
+	`  optimizeDeps: { exclude: ['ripple'] },`,
+	`  plugins: [`, ...vitePlugins, `  ],`, `})`, ``
+].join('\n'));
+
+// --- tsconfig.json ---
+const tsPaths = { '~/*': ['./*'] };
+if (style === 'pandacss') tsPaths['~styled-system/*'] = ['./styled-system/*'];
+writeFileSync(join(root, 'tsconfig.json'), JSON.stringify({
+	compilerOptions: {
+		strict: true, module: 'ESNext', moduleResolution: 'bundler',
+		target: 'ESNext', jsx: 'preserve', jsxImportSource: 'ripple',
+		esModuleInterop: true, isolatedModules: true,
+		experimentalDecorators: true,
+		verbatimModuleSyntax: true, skipLibCheck: true,
+		...(cloudflare ? { types: ['@cloudflare/workers-types'] } : { types: ['vike/client'] }),
+		paths: tsPaths
+	},
+	include: ['**/*.ts', '**/*.tsx', '**/*.tsrx']
+}, null, 2) + '\n');
+
+// --- renderer/+config.ts ---
+writeFileSync(join(root, 'renderer', '+config.ts'), [
+	`export default {`,
+	`  extends: ['import:@cioky/vike-core/config:default'],
+	`  server: true,`,
+	`}`, ``
+].join('\n'));
+
+// --- pages/+Layout.tsrx ---
+if (style === 'pandacss') {
+	writeFileSync(join(root, 'pages', '+Layout.tsrx'), [
+		`import { type TSRXElement } from 'ripple'`,
+		`import { css } from '~/styled-system/css'`,
+		`import '~/src/styles.css'`,
+		``,
+		`export function Layout({ children }: { children: TSRXElement }) @{`,
+		`  <div class={css({ minH: 'screen', bg: 'white', color: 'gray.900' })}>`,
+		`    <nav class={css({ display: 'flex', gap: '4', borderBottom: '1px', px: '4', py: '3', fontSize: 'sm' })}>`,
+		`      <a href="/" data-vike-link class={css({ fontWeight: 600, color: 'gray.700', _hover: { color: 'black' } })}>Home</a>`,
+		`      <a href="/about" data-vike-link class={css({ color: 'gray.500', _hover: { color: 'black' } })}>About</a>`,
+		`    </nav>`,
+		`    {children}`,
+		`  </div>`,
+		`}`,
+		``
+	].join('\n'));
+} else if (style === 'none') {
+	writeFileSync(join(root, 'pages', '+Layout.tsrx'), [
+		`import { type TSRXElement } from 'ripple'`, ``,
+		`export function Layout({ children }: { children: TSRXElement }) @{`,
+		`  <div>`, `    {children}`, `  </div>`,
+		`}`, ``
+	].join('\n'));
+} else {
+	writeFileSync(join(root, 'pages', '+Layout.tsrx'), [
+		`import { type TSRXElement } from 'ripple'`, ``,
+		`export function Layout({ children }: { children: TSRXElement }) @{`,
+		`  <div class="min-h-screen bg-white text-gray-900">`,
+		`    <nav class="flex gap-4 border-b px-4 py-3 text-sm">`,
+		`      <a href="/" data-vike-link class="font-semibold text-gray-700 hover:text-black">Home</a>`,
+		`      <a href="/about" data-vike-link class="text-gray-500 hover:text-black">About</a>`,
+		`    </nav>`, `    {children}`, `  </div>`,
+		`}`, ``
+	].join('\n'));
+}
+
+// --- pages/index/+Page.tsrx ---
+if (style === 'pandacss') {
+	writeFileSync(join(root, 'pages', 'index', '+Page.tsrx'), [
+		`import { css } from '~/styled-system/css'`, ``,
+		`export function Page() @{`,
+		`  <>`,
+		`    <head><title>Home</title></head>`,
+		`    <section class={css({ minH: 'screen', display: 'flex', flexDir: 'column', alignItems: 'center', justifyContent: 'center', gap: '4', p: '8' })}>`,
+		`      <h1 class={css({ fontSize: '4xl', fontWeight: 'bold' })}>Hello, Vike + Ripple!</h1>`,
+		`      <p class={css({ fontSize: 'lg', color: 'blue.600' })}>With Panda CSS</p>`,
+		`    </section>`,
+		`  </>`,
+		`}`, ``
+	].join('\n'));
+} else if (style === 'tailwind') {
+	writeFileSync(join(root, 'pages', 'index', '+Page.tsrx'), [
+		`import '../../tailwind.css'`, ``,
+		`export function Page() @{`,
+		`  <>`,
+		`    <head><title>Home</title></head>`,
+		`    <section class="min-h-screen flex flex-col items-center justify-center gap-4 p-8">`,
+		`      <h1 class="text-4xl font-bold">Hello, Vike + Ripple!</h1>`,
+		`      <p class="text-lg text-blue-600">With Tailwind CSS v4</p>`,
+		`    </section>`,
+		`  </>`,
+		`}`, ``
+	].join('\n'));
+} else {
+	writeFileSync(join(root, 'pages', 'index', '+Page.tsrx'), [
+		`export function Page() @{`,
+		`  <>`,
+		`    <head><title>Home</title></head>`,
+		`    <section>`, `      <h1>Hello, Vike + Ripple!</h1>`, `    </section>`,
+		`  </>`,
+		`}`, ``
+	].join('\n'));
+}
+
+// --- pages/about/+Page.tsrx ---
+mkdirSync(join(root, 'pages', 'about'), { recursive: true });
+if (style === 'pandacss') {
+	writeFileSync(join(root, 'pages', 'about', '+Page.tsrx'), [
+		`import { css } from '~/styled-system/css'`, ``,
+		`export function Page() @{`,
+		`  <>`,
+		`    <head><title>About</title></head>`,
+		`    <section class={css({ mx: 'auto', maxW: '2xl', p: '8' })}>`,
+		`      <h1 class={css({ fontSize: '3xl', fontWeight: 'bold', mb: '4' })}>About</h1>`,
+		`      <p class={css({ color: 'gray.600' })}>This scaffold was created by @cioky/vike-create.</p>`,
+		`      <p class={css({ color: 'gray.600' })}>Scaffolded with Panda CSS + Ripple TS plugin.</p>`,
+		`    </section>`,
+		`  </>`,
+		`}`, ``
+	].join('\n'));
+} else if (style !== 'none') {
+	writeFileSync(join(root, 'pages', 'about', '+Page.tsrx'), [
+		`export function Page() @{`,
+		`  <>`,
+		`    <head><title>About</title></head>`,
+		`    <section class="mx-auto max-w-2xl p-8">`,
+		`      <h1 class="text-3xl font-bold mb-4">About</h1>`,
+		`      <p class="text-gray-600">This scaffold was created by @cioky/vike-create.</p>`,
+		`    </section>`,
+		`  </>`,
+		`}`, ``
+	].join('\n'));
+} else {
+	writeFileSync(join(root, 'pages', 'about', '+Page.tsrx'), [
+		`export function Page() @{`,
+		`  <>`,
+		`    <head><title>About</title></head>`,
+		`    <section>`, `      <h1>About</h1>`,
+		`      <p>This scaffold was created by @cioky/vike-create.</p>`,
+		`  </>`,
+		`}`, ``
+	].join('\n'));
+}
+
+// --- Better Auth pages ---
+if (betterauth) {
+	mkdirSync(join(root, 'pages', 'login'), { recursive: true });
+	mkdirSync(join(root, 'pages', 'register'), { recursive: true });
+	mkdirSync(join(root, 'pages', 'dashboard'), { recursive: true });
+	writeFileSync(join(root, 'pages', 'login', '+Page.tsrx'), [
+		`import { css } from '~/styled-system/css'`,
+		`import { track } from 'ripple'`,
+		`import { createAuthClient } from 'better-auth/client'`,
+		``,
+		`const authClient = createAuthClient({ baseURL: typeof window !== 'undefined' ? window.location.origin : '' })`,
+		``,
+		`export function Page() @{`,
+		`  let &[email] = track('')`,
+		`  let &[password] = track('')`,
+		`  let &[errorMsg] = track('')`,
+		`  let &[loading] = track(false)`,
+		``,
+		`  function handleSubmit(e: Event) {`,
+		`    e.preventDefault()`,
+		`    loading = true`,
+		`    errorMsg = ''`,
+		`    authClient.signIn.email({ email, password }).then(function(res: unknown) {`,
+		`      const r = res as { error?: { message?: string; status?: string } }`,
+		`      if (r.error) {`,
+		`        errorMsg = r.error.message || r.error.status || 'Sign in failed'`,
+		`      } else {`,
+		`        window.location.href = '/dashboard'`,
+		`      }`,
+		`      loading = false`,
+		`    }).catch(function(err: Error) {`,
+		`      errorMsg = err.message`,
+		`      loading = false`,
+		`    })`,
+		`  }`,
+		``,
+		`  <>`,
+		`    <head><title>Sign In</title></head>`,
+		`    <section class={css({ maxW: 'md', mx: 'auto', mt: '20', p: '8' })}>`,
+		`      <form onSubmit={handleSubmit} class={css({ display: 'flex', flexDir: 'column', gap: '4' })}>`,
+		`        <input type="email" placeholder="Email" value={email} onInput={(e) => { if (e.target) email = (e.target as HTMLInputElement).value }} required class={css({ p: '3', border: '1px', borderRadius: 'md', borderColor: 'gray.300', w: 'full' })} />`,
+		`        <input type="password" placeholder="Password" value={password} onInput={(e) => { if (e.target) password = (e.target as HTMLInputElement).value }} required class={css({ p: '3', border: '1px', borderRadius: 'md', borderColor: 'gray.300', w: 'full' })} />`,
+		`        @if (errorMsg) {`,
+		`          <p class={css({ color: 'red.500', fontSize: 'sm' })}>{errorMsg}</p>`,
+		`        }`,
+		`        <button type="submit" disabled={loading} class={css({ p: '3', bg: 'blue.600', color: 'white', borderRadius: 'md', fontWeight: 'bold', cursor: 'pointer', _hover: { bg: 'blue.700' }, _disabled: { opacity: 0.5 } })}>`,
+		`          {loading ? 'Signing in...' : 'Sign In'}`,
+		`        </button>`,
+		`        <p class={css({ textAlign: 'center', fontSize: 'sm', color: 'gray.600' })}>`,
+		`          Don't have an account? <a href="/register" class={css({ color: 'blue.600', textDecoration: 'underline' })}>Register</a>`,
+		`        </p>`,
+		`      </form>`,
+		`    </section>`,
+		`  </>`,
+		`}`,
+		``
+	].join('\n'));
+	writeFileSync(join(root, 'pages', 'register', '+Page.tsrx'), [
+		`import { css } from '~/styled-system/css'`,
+		`import { track } from 'ripple'`,
+		`import { createAuthClient } from 'better-auth/client'`,
+		``,
+		`const authClient = createAuthClient({ baseURL: typeof window !== 'undefined' ? window.location.origin : '' })`,
+		``,
+		`export function Page() @{`,
+		`  let &[name] = track('')`,
+		`  let &[email] = track('')`,
+		`  let &[password] = track('')`,
+		`  let &[errorMsg] = track('')`,
+		`  let &[loading] = track(false)`,
+		``,
+		`  function handleSubmit(e: Event) {`,
+		`    e.preventDefault()`,
+		`    loading = true`,
+		`    errorMsg = ''`,
+		`    authClient.signUp.email({ name, email, password }).then(function(res: unknown) {`,
+		`      const r = res as { error?: { message?: string; status?: string } }`,
+		`      if (r.error) {`,
+		`        errorMsg = r.error.message || r.error.status || 'Registration failed'`,
+		`      } else {`,
+		`        window.location.href = '/dashboard'`,
+		`      }`,
+		`      loading = false`,
+		`    }).catch(function(err: Error) {`,
+		`      errorMsg = err.message`,
+		`      loading = false`,
+		`    })`,
+		`  }`,
+		``,
+		`  <>`,
+		`    <head><title>Register</title></head>`,
+		`    <section class={css({ maxW: 'md', mx: 'auto', mt: '20', p: '8' })}>`,
+		`      <form onSubmit={handleSubmit} class={css({ display: 'flex', flexDir: 'column', gap: '4' })}>`,
+		`        <input type="text" placeholder="Name" value={name} onInput={(e) => { if (e.target) name = (e.target as HTMLInputElement).value }} required class={css({ p: '3', border: '1px', borderRadius: 'md', borderColor: 'gray.300', w: 'full' })} />`,
+		`        <input type="email" placeholder="Email" value={email} onInput={(e) => { if (e.target) email = (e.target as HTMLInputElement).value }} required class={css({ p: '3', border: '1px', borderRadius: 'md', borderColor: 'gray.300', w: 'full' })} />`,
+		`        <input type="password" placeholder="Password" value={password} onInput={(e) => { if (e.target) password = (e.target as HTMLInputElement).value }} required class={css({ p: '3', border: '1px', borderRadius: 'md', borderColor: 'gray.300', w: 'full' })} />`,
+		`        @if (errorMsg) {`,
+		`          <p class={css({ color: 'red.500', fontSize: 'sm' })}>{errorMsg}</p>`,
+		`        }`,
+		`        <button type="submit" disabled={loading} class={css({ p: '3', bg: 'blue.600', color: 'white', borderRadius: 'md', fontWeight: 'bold', cursor: 'pointer', _hover: { bg: 'blue.700' }, _disabled: { opacity: 0.5 } })}>`,
+		`          {loading ? 'Creating account...' : 'Register'}`,
+		`        </button>`,
+		`        <p class={css({ textAlign: 'center', fontSize: 'sm', color: 'gray.600' })}>`,
+		`          Already have an account? <a href="/login" class={css({ color: 'blue.600', textDecoration: 'underline' })}>Sign in</a>`,
+		`        </p>`,
+		`      </form>`,
+		`    </section>`,
+		`  </>`,
+		`}`,
+		``
+	].join('\n'));
+	writeFileSync(join(root, 'pages', 'dashboard', '+data.server.ts'), [
+		`import type { PageContextServer } from 'vike/types'`,
+		``,
+		`export type Data = {`,
+		`  user: { name?: string; email?: string; id?: string } | null`,
+		`}`,
+		``,
+		`export default async function data(pageContext: PageContextServer): Promise<Data> {`,
+		`  return { user: (pageContext as unknown as Record<string, unknown>).user as Data["user"] ?? null }`,
+		`}`,
+		``
+	].join('\n'));
+	writeFileSync(join(root, 'pages', 'dashboard', '+Page.tsrx'), [
+		`import { css } from '~/styled-system/css'`,
+		`import type { Data } from './+data.server'`,
+		``,
+		`export function Page(data: Data) @{`,
+		`  const { user } = data`,
+		``,
+		`  <>`,
+		`    <head><title>Dashboard</title></head>`,
+		`    <section class={css({ maxW: '2xl', mx: 'auto', mt: '20', p: '8' })}>`,
+		`      @if (!user) {`,
+		`        <div class={css({ textAlign: 'center', py: '10' })}>`,
+		`          <h1 class={css({ fontSize: '2xl', fontWeight: 'bold', mb: '4' })}>Not Authenticated</h1>`,
+		`          <p class={css({ color: 'gray.600', mb: '6' })}>Please sign in to view this page.</p>`,
+		`          <a href="/login" class={css({ display: 'inline-block', p: '3', bg: 'blue.600', color: 'white', borderRadius: 'md', textDecoration: 'none' })}>Sign In</a>`,
+		`        </div>`,
+		`      } @else {`,
+		`        <div>`,
+		`          <h1 class={css({ fontSize: '2xl', fontWeight: 'bold', mb: '6' })}>Dashboard</h1>`,
+		`          <div class={css({ bg: 'gray.50', p: '6', borderRadius: 'lg', border: '1px', borderColor: 'gray.200' })}>`,
+		`            <p class={css({ mb: '2' })}><strong>Welcome, {user.name || user.email}!</strong></p>`,
+		`            <p class={css({ color: 'gray.600', fontSize: 'sm' })}>Email: {user.email}</p>`,
+		`            <p class={css({ color: 'gray.600', fontSize: 'sm' })}>User ID: {user.id}</p>`,
+		`          </div>`,
+		`          <div class={css({ mt: '6', display: 'flex', gap: '4' })}>`,
+		`            <a href="/" class={css({ color: 'blue.600' })}>Home</a>`,
+		`            <a href="/about" class={css({ color: 'blue.600' })}>About</a>`,
+		`          </div>`,
+		`        </div>`,
+		`      }`,
+		`    </section>`,
+		`  </>`,
+		`}`,
+		``
+	].join('\n'));
+}
+
+// --- style-specific files ---
+if (style === 'tailwind') {
+	writeFileSync(join(root, 'tailwind.css'), [`@import "tailwindcss";`, ``].join('\n'));
+}
+if (style === 'pandacss') {
+	writeFileSync(join(root, 'panda.config.ts'), [
+		`import { defineConfig } from '@pandacss/dev'`,
+		`import { pluginRipple } from '@cioky/vike-pandacss/panda-plugin'`,
+		`export default defineConfig({`,
+		`  preflight: true,`,
+		`  include: ['./pages/**/*.{tsrx,tsx}', './renderer/**/*.{ts,tsx}'],`,
+		`  exclude: [],`,
+		`  plugins: [pluginRipple()],`,
+		`  theme: { extend: {} },`,
+		`  outdir: 'styled-system',`,
+		`})`, ``
+	].join('\n'));
+	writeFileSync(join(root, 'postcss.config.js'), [
+		`export default { plugins: { '@pandacss/dev/postcss': {} } }`, ``
+	].join('\n'));
+	writeFileSync(join(root, 'src', 'styles.css'), [
+		`@layer reset, base, tokens, recipes, utilities;`, ``
+	].join('\n'));
+}
+
+// --- CF basic ---
+if (cloudflare && !(remult && cloudflare)) {
+	mkdirSync(join(root, '.wrangler'), { recursive: true });
+	writeFileSync(join(root, 'wrangler.jsonc'), JSON.stringify({
+		$schema: 'node_modules/wrangler/config-schema.json',
+		name, main: 'vike:server-entry',
+		compatibility_date: '2026-06-01',
+		compatibility_flags: ['nodejs_compat']
+	}, null, 2) + '\n');
+	writeFileSync(join(root, '.gitignore'), `node_modules/\ndist/\n.wrangler/\n*.log\n.env\n`);
+}
+
+// --- Remult + CF ---
+if (remult && cloudflare) {
+	mkdirSync(join(root, 'server'), { recursive: true });
+	mkdirSync(join(root, 'lib'), { recursive: true });
+	mkdirSync(join(root, '.wrangler'), { recursive: true });
+	writeFileSync(join(root, 'wrangler.jsonc'), JSON.stringify({
+		$schema: 'node_modules/wrangler/config-schema.json', name, main: '+server.ts',
+		compatibility_date: '2026-06-01', compatibility_flags: ['nodejs_compat'],
+		d1_databases: [{ binding: 'DB', database_name: name, database_id: 'your-database-id-here' }],
+		durable_objects: {
+			bindings: [
+				{ name: 'REMULT_ROOM', class_name: 'RemultPubSubRoom' },
+				{ name: 'REMULT_LIVE_QUERY_STORAGE', class_name: 'RemultLiveQueryStorageRoom' }
+			]
+		},
+		migrations: [{ tag: 'v1', new_sqlite_classes: ['RemultPubSubRoom', 'RemultLiveQueryStorageRoom'] }],
+		vars: {
+			BETTER_AUTH_URL: 'http://localhost:3000',
+			BETTER_AUTH_SECRET: 'dev-secret-change-in-production!!',
+			MAX_CONNECTIONS_PER_SHARD: '100',
+			REALTIME_LIVE_QUERY_ROOM_MODE: 'global'
+		}
+	}, null, 2) + '\n');
+	let honoBody = [
+		``,
+		`const app = new Hono<{ Variables: { user: unknown; session: unknown } }>()`,
+		`let db: D1Database`,
+		``,
+		`// Universal middleware: exposes auth instance + session to Vike pageContext`,
+		`const authMiddleware = async (`,
+		`  _request: Request,`,
+		`  context: Record<string, unknown>,`,
+		`  runtime: { hono?: { env: Cloudflare.Env } }`,
+		`) => {`,
+		`  const env = runtime.hono?.env`,
+		`  if (!env) return`,
+		`  const auth = await getAuth(env.DB, env.BETTER_AUTH_SECRET, env.BETTER_AUTH_URL)`,
+		`  if (!auth) return`,
+		`  context.auth = auth`,
+		`  const session = await auth.api.getSession({ headers: _request.headers }).catch(() => null)`,
+		`  if (session) {`,
+		`    context.user = session.user`,
+		`    context.session = session.session`,
+		`  }`,
+		`}`,
+		``,
+		`app.use('/api/*', async (c, next) => {`,
+		`  db = (c.env as Cloudflare.Env).DB`,
+		`  await next()`,
+		`})`,
+	]
+	if (betterauth) {
+		honoBody.push(
+			`app.use('/api/auth/*', async (c) => {`,
+			`  const env = c.env as Cloudflare.Env`,
+			`  const auth = await getAuth(env.DB, env.BETTER_AUTH_SECRET, env.BETTER_AUTH_URL)`,
+			`  if (!auth) return c.text('Auth not available', 500)`,
+			`  return auth.handler(c.req.raw)`,
+			`})`,
+		)
+	}
+	honoBody.push(
+		`app.route('/api', remultApi({`,
+		`  dataProvider: async () => new SqlDatabase(new D1DataProvider(new D1BindingClient(db))),`,
+		`  entities: [],`,
+		`  getUser: async () => undefined,`,
+		`}))`,
+	)
+	honoBody.push(
+		`app.use('/party/*', async (c) => {`,
+		`  const env = c.env as Cloudflare.Env`,
+		`  const ns = env.REMULT_ROOM`,
+		`  return ns.get(ns.idFromName('global')).fetch(c.req.raw)`,
+		`})`,
+		`vike(app, [authMiddleware])`,
+		`export { app }`, ``
+	)
+	writeFileSync(join(root, '+server.ts'), [
+		`import { RemultLiveQueryStorageRoom, RemultPartyRoom, resolveRoomIdFromChannel } from 'remult-partykit/durable-object'`,
+		`import { app } from './server/hono'`, ``,
+		`class PubSubRoom extends RemultPartyRoom<Cloudflare.Env> {`,
+		`  static options = { hibernate: false }`,
+		`  override options = { resolveRoomId: resolveRoomIdFromChannel };`,
+		`  override async onError(_connection: import('partyserver').Connection, error: unknown) {`,
+		`    console.error('PubSubRoom error:', error)`,
+		`  }`,
+		`}`, ``,
+		`export default { fetch: app.fetch }`,
+		`export { RemultLiveQueryStorageRoom, PubSubRoom as RemultPubSubRoom }`, ``
+	].join('\n'));
+	const honoImports = [
+		`import { Hono } from 'hono'`,
+		`import { D1DataProvider, D1BindingClient } from 'remult/remult-d1'`,
+		`import { SqlDatabase } from 'remult'`,
+		`import { remultApi } from 'remult/remult-hono'`,
+		`import vike from '@vikejs/hono'`,
+	]
+	if (betterauth) {
+		honoImports.push(
+			`import { getAuth } from './better-auth'`,
+		)
+	}
+	writeFileSync(join(root, 'server', 'hono.ts'), [...honoImports, ...honoBody].join('\n'))
+	writeFileSync(join(root, 'lib', 'remult-client.ts'), [
+		`import { RemultPartySubscriptionClient } from 'remult-partykit'`,
+		`import { remult } from 'remult'`,
+		`export function initRemultRealtime(host: string) {`,
+		`  const client = new RemultPartySubscriptionClient({`,
+		`    getSocketUrl: (roomName: string) => {`,
+		`      const wsHost = host.replace(/^http/, 'ws')`,
+		`      return \`\${wsHost}/party/remult?room=\${roomName}\``,
+		`    },`,
+		`  })`,
+		`  remult.apiClient.subscriptionClient = client`,
+		`}`, ``
+	].join('\n'));
+	writeFileSync(join(root, '.gitignore'), `node_modules/\ndist/\n.wrangler/\n*.log\n.env\n`);
+}
+
+// --- Remult only ---
+if (remult && !cloudflare) {
+	mkdirSync(join(root, 'server'), { recursive: true });
+	writeFileSync(join(root, 'server', 'remult.ts'), [
+		`import { remult } from 'remult'`,
+		`export const api = remult({ entities: [], getUser: async () => undefined })`, ``
+	].join('\n'));
+}
+if (betterauth) {
+	mkdirSync(join(root, 'entities'), { recursive: true });
+	writeFileSync(join(root, 'entities', 'auth.ts'), [
+		`import { Allow, Entity, Fields, Relations, Validators } from 'remult'`,
+		``,
+		`const Roles = { admin: 'admin' }`,
+		``,
+		`@Entity('user', { allowApiCrud: Roles.admin, allowApiRead: Allow.authenticated })`,
+		`export class User {`,
+		`  @Fields.string({ required: true, minLength: 8, maxLength: 40, validate: Validators.unique(), allowApiUpdate: false })`,
+		`  id!: string`,
+		`  @Fields.string({ required: true })`,
+		`  name = ''`,
+		`  @Fields.string({})`,
+		`  email = ''`,
+		`  @Fields.boolean({})`,
+		`  emailVerified = false`,
+		`  @Fields.string({ required: false })`,
+		`  image = ''`,
+		`  @Fields.createdAt({})`,
+		`  createdAt!: Date`,
+		`  @Fields.updatedAt({})`,
+		`  updatedAt!: Date`,
+		`}`,
+		``,
+		`@Entity('session', { allowApiCrud: Roles.admin })`,
+		`export class Session {`,
+		`  @Fields.string({ required: true, minLength: 8, maxLength: 40, validate: Validators.unique(), allowApiUpdate: false })`,
+		`  id!: string`,
+		`  @Fields.date({ required: true })`,
+		`  expiresAt = new Date()`,
+		`  @Fields.string({})`,
+		`  token = ''`,
+		`  @Fields.createdAt({})`,
+		`  createdAt!: Date`,
+		`  @Fields.updatedAt({ required: true, allowApiUpdate: false })`,
+		`  updatedAt!: Date`,
+		`  @Fields.string({ required: false })`,
+		`  ipAddress = ''`,
+		`  @Fields.string({ required: false })`,
+		`  userAgent = ''`,
+		`  @Fields.string({ required: true })`,
+		`  userId = ''`,
+		`  @Relations.toOne(() => User, 'id')`,
+		`  user!: User`,
+		`}`,
+		``,
+		`@Entity('account', { allowApiCrud: Roles.admin })`,
+		`export class Account {`,
+		`  @Fields.string({ required: true, minLength: 8, maxLength: 40, validate: Validators.unique(), allowApiUpdate: false })`,
+		`  id!: string`,
+		`  @Fields.string({ required: true, allowApiUpdate: false })`,
+		`  accountId = ''`,
+		`  @Fields.string({ required: true, allowApiUpdate: false })`,
+		`  providerId = ''`,
+		`  @Fields.string({ required: true })`,
+		`  userId = ''`,
+		`  @Relations.toOne(() => User, 'id')`,
+		`  user!: User`,
+		`  @Fields.string({ required: false, allowApiUpdate: false })`,
+		`  accessToken = ''`,
+		`  @Fields.string({ required: false, allowApiUpdate: false })`,
+		`  refreshToken = ''`,
+		`  @Fields.string({ required: false })`,
+		`  idToken = ''`,
+		`  @Fields.date({ required: false })`,
+		`  accessTokenExpiresAt = new Date()`,
+		`  @Fields.date({ required: false })`,
+		`  refreshTokenExpiresAt = new Date()`,
+		`  @Fields.string({ required: false })`,
+		`  scope = ''`,
+		`  @Fields.string({ required: false, allowApiUpdate: false })`,
+		`  password = ''`,
+		`  @Fields.createdAt({ required: true, defaultValue: () => new Date(), allowApiUpdate: false })`,
+		`  createdAt!: Date`,
+		`  @Fields.updatedAt({ required: true, allowApiUpdate: false })`,
+		`  updatedAt!: Date`,
+		`}`,
+		``,
+		`@Entity('verification', { allowApiCrud: Roles.admin })`,
+		`export class Verification {`,
+		`  @Fields.string({ required: true, minLength: 8, maxLength: 40, validate: Validators.unique(), allowApiUpdate: false })`,
+		`  id!: string`,
+		`  @Fields.string({ required: true })`,
+		`  identifier = ''`,
+		`  @Fields.string({ required: true })`,
+		`  value = ''`,
+		`  @Fields.date({ required: true })`,
+		`  expiresAt = new Date()`,
+		`  @Fields.createdAt({ required: true, defaultValue: () => new Date(), allowApiUpdate: false })`,
+		`  createdAt!: Date`,
+		`  @Fields.updatedAt({ required: true, defaultValue: () => new Date(), allowApiUpdate: false })`,
+		`  updatedAt!: Date`,
+		`}`,
+		``
+	].join('\n'));
+	mkdirSync(join(root, 'server'), { recursive: true });
+	writeFileSync(join(root, 'server', 'better-auth.ts'), [
+		`import { betterAuth } from 'better-auth'`,
+		`import { remultAdapter } from '@nerdfolio/remult-better-auth'`,
+		`import { User, Session, Account, Verification } from '../entities/auth'`,
+		`import type { BetterAuthOptions } from 'better-auth'`,
+		`import type { ClassType } from 'remult'`,
+		`import { SqlDatabase, withRemult } from 'remult'`,
+		`import { D1BindingClient, D1DataProvider } from 'remult/remult-d1'`,
+		``,
+		`export function getAuthConfig(db: D1Database, secret: string, url?: string): BetterAuthOptions {`,
+		`  const dataProvider = new SqlDatabase(new D1DataProvider(new D1BindingClient(db)))`,
+		``,
+		`  withRemult(`,
+		`    async (remult) => {`,
+		`      const entities = [User, Session, Account, Verification] as ClassType<unknown>[]`,
+		`      const metadata = entities.map((e) => remult.repo(e).metadata)`,
+		`      await dataProvider.ensureSchema(metadata)`,
+		`    },`,
+		`    { dataProvider }`,
+		`  ).catch((e: unknown) => console.error('Schema init failed:', e))`,
+		``,
+		`  return {`,
+		`    secret,`,
+		`    baseURL: url,`,
+		`    database: remultAdapter({`,
+		`      authEntities: { User, Session, Account, Verification },`,
+		`      dataProvider`,
+		`    }),`,
+		`    emailAndPassword: { enabled: true }`,
+		`  }`,
+		`}`,
+		``,
+		`let _auth: ReturnType<typeof betterAuth> | null = null`,
+		`let _schemaInit: Promise<void> | null = null`,
+		``,
+		`async function ensureSchema(db: D1Database) {`,
+		`  if (!_schemaInit) {`,
+		`    _schemaInit = (async () => {`,
+		`      const dp = new SqlDatabase(new D1DataProvider(new D1BindingClient(db)))`,
+		`      await withRemult(`,
+		`        async (remult) => {`,
+		`          const entities = [User, Session, Account, Verification] as ClassType<unknown>[]`,
+		`          const metadata = entities.map((e) => remult.repo(e).metadata)`,
+		`          await dp.ensureSchema(metadata)`,
+		`        },`,
+		`        { dataProvider: dp }`,
+		`      )`,
+		`    })()`,
+		`  }`,
+		`  return _schemaInit`,
+		`}`,
+		``,
+		`export async function getAuth(db: D1Database, secret: string, url?: string) {`,
+		`  if (!_auth) {`,
+		`    await ensureSchema(db)`,
+		`    const dp = new SqlDatabase(new D1DataProvider(new D1BindingClient(db)))`,
+		`    _auth = betterAuth<BetterAuthOptions>({`,
+		`      secret,`,
+		`      baseURL: url,`,
+		`      database: remultAdapter({`,
+		`        authEntities: { User, Session, Account, Verification },`,
+		`        dataProvider: dp`,
+		`      }),`,
+		`      emailAndPassword: { enabled: true }`,
+		`    })`,
+		`  }`,
+		`  return _auth`,
+		`}`,
+		``,
+	].join('\n'));
+		``
+}
+
+// --- install ---
+let label = `style: ${style}`;
+if (cloudflare) label += ', CF Workers';
+if (remult) label += ', Remult';
+if (betterauth) label += ', Better Auth';
+console.log(`\n  \x1b[1mCreated ${name}  (${label})\x1b[22m`);
+console.log(`\n  Installing dependencies...`);
+execSync('npm install', { cwd: root, stdio: 'inherit' });
+console.log(`\n  Running @cioky/vike-core setup...`);
+execSync('npx --yes @cioky/vike-core setup', { cwd: root, stdio: 'inherit' });
+if (style === 'tailwind') {
+	console.log(`\n  Running @cioky/vike-tailwindcss setup...`);
+	execSync('npx --yes @cioky/vike-tailwindcss setup', { cwd: root, stdio: 'inherit' });
+}
+if (style === 'pandacss') {
+	console.log(`\n  Running @cioky/vike-pandacss setup...`);
+	execSync('npx --yes @cioky/vike-pandacss setup', { cwd: root, stdio: 'inherit' });
+}
+
+
+if (cloudflare) {
+	console.log(`\n  Generating worker types...`);
+	execSync('npm run types', { cwd: root, stdio: 'inherit' });
+}
+console.log(`\n  \x1b[1mDone!\x1b[22m`);
+console.log(`  cd ${name} && npm run dev`);