@korajs/cli 0.0.0-canary-20261008174129

package/templates/react-sync/AGENTS.md

@@ -0,0 +1,87 @@
+# AGENTS.md
+
+Guidance for AI coding agents working in this project. Humans: this is useful for you too.
+
+## What this project is
+
+This is a **Kora.js** application: an offline-first app where all data lives in a local SQLite database (WASM + OPFS in the browser) and optionally syncs across devices through a Kora sync server. Offline is the normal state, not an error state. Full docs: https://korajs.dev and machine-readable index at https://korajs.dev/llms.txt (complete docs in one file: https://korajs.dev/llms-full.txt).
+
+## Golden rules
+
+1. **The schema is the source of truth.** All collections are defined in `src/schema.ts` with `defineSchema` and the `t.*` field builders. To add or change data shapes, edit the schema first; types flow from it automatically. Never hand-write types for records.
+2. **Never fetch application data over HTTP.** Do not add REST or GraphQL calls for app data, and do not talk to the sync server directly. Read and write through Kora collections only; sync happens automatically in the background.
+3. **Await readiness before direct collection access.** Outside the UI bindings, `await app.ready` before calling `app.<collection>` methods. The bindings handle this for you inside components.
+4. **Offline must keep working.** Any feature you add must function with the network off. Never gate a write or a read on connectivity. If you find yourself checking `navigator.onLine` before a data operation, you are doing it wrong.
+5. **Surface mutation errors.** Fire-and-forget mutate calls put errors into the mutation state. Always render the mutation's `error` in the UI or handle the promise from the async variant. Silent failure is the worst failure.
+6. **Do not touch `src/kora-worker.ts`.** It wires the SQLite WASM binary URL for both dev and production builds. Changing it breaks production builds in ways that only show up after deploy.
+7. **Do not add a state management library for server or app data.** Kora's reactive queries are the store. Local UI state (form inputs, toggles) can use the framework's normal state tools.
+
+## Data API cheat sheet
+
+```ts
+await app.ready
+const rec = await app.todos.insert({ title: 'x' })   // defaults and .auto() fields applied
+await app.todos.update(rec.id, { completed: true })  // partial update, changed fields only
+await app.todos.delete(rec.id)
+const one = await app.todos.findById(rec.id)
+const unsubscribe = app.todos
+  .where({ completed: false })
+  .orderBy('createdAt', 'desc')
+  .subscribe((rows) => {/* fires immediately, then on every change */})
+```
+
+Schema example (`src/schema.ts`):
+
+```ts
+import { defineSchema, t } from 'korajs'
+
+export default defineSchema({
+  version: 1,
+  collections: {
+    todos: {
+      fields: {
+        title: t.string(),
+        completed: t.boolean().default(false),
+        tags: t.array(t.string()).default([]),
+        priority: t.enum(['low', 'medium', 'high']).default('medium'),
+        createdAt: t.timestamp().auto(), // set automatically; never pass it on insert
+      },
+      indexes: ['completed', 'createdAt'],
+    },
+  },
+})
+```
+
+If you change a collection's shape, increment `version` and add a `migrations` entry for it (`migrate().addField(...)`): each device migrates its local database on its next open. `npx kora migrate` generates the matching migration for server databases and a transform stub for clients still on the older version.
+
+## Project conventions
+
+- Feature code lives in `src/modules/<feature>/` with the pattern: `<feature>.schema.ts` (collection definition, imported into `src/schema.ts`), `<feature>.queries.ts` (query builders), `<feature>.mutations.ts` (mutation functions taking a collection accessor).
+- Conflict handling is declarative. Concurrent edits merge automatically (last-write-wins per field, arrays as multisets that keep every device's additions and removals, objects per top-level key). If a field needs domain-specific merging (counters, quantities), add a `resolve` function in the schema rather than writing sync logic.
+- `kora.config.ts` controls the dev environment (ports, sync server, schema watcher).
+
+## Commands
+
+- `npm run dev` starts everything: Vite dev server (port 5173), local sync server (port 3001), and the schema watcher.
+- `npm run build` type-checks and builds for production.
+- `npx kora doctor` diagnoses a broken setup.
+- DevTools overlay: press Ctrl+Shift+K (Cmd+Shift+K on macOS) in the running app to inspect operations, merges, and sync status.
+
+## Sync and auth
+
+Sync is configured in `src/main.*` via `createApp({ sync: { url, authClient } })`. In dev, the sync URL is derived from the page host and proxied by Vite; in production set `VITE_SYNC_URL`. Auth (if present in this template) uses `@korajs/auth`; the client is created in `src/auth.ts`. Local writes work without sign-in; sync requires the server to accept the connection.
+
+## React bindings
+
+```tsx
+import { useCollection, useMutation, useQuery, useSyncStatus } from '@korajs/react'
+
+const todos = useCollection('todos')
+const rows = useQuery(orderedTodos(todos))            // reactive; [] on the very first render
+const addTodo = useMutation((data) => todos.insert(data))
+addTodo.mutate({ title: 'x' })                        // fire-and-forget; errors land in addTodo.error
+await addTodo.mutateAsync({ title: 'x' })             // throws on failure; use when you need the error
+const status = useSyncStatus()                        // status.status, status.pendingOperations
+```
+
+Rules: always render `mutation.error` somewhere. The app must work under React StrictMode (the framework's hooks are StrictMode-safe; keep `<StrictMode>` in `src/main.tsx`). `useQuery` reads the local store: no network, no spinner. Its very first render returns `[]` before the local query has run; use `useQueryState` when you must tell "loading" from "no rows".

package/templates/react-sync/README.md.hbs

@@ -0,0 +1,106 @@
+# {{projectName}}
+
+An offline-first application built with [Kora.js](https://ehoneahobed.github.io/kora/).
+
+## Getting Started
+
+```bash
+npm run dev
+```
+
+This starts both the Vite dev server and the Kora sync server.
+
+- **App**: http://localhost:5173
+- **Sync server**: ws://localhost:3001/kora-sync
+
+## Project Structure
+
+```
+src/
+  schema.ts        # Schema entry point
+  auth.ts          # Auth client and OAuth callback handling
+  main.tsx         # App initialization and Kora setup
+  App.tsx          # Main application component
+  modules/
+    todos/
+      todo.schema.ts     # Todo collection definition
+      todo.queries.ts    # Reusable todo query builders
+      todo.mutations.ts  # Todo mutation helpers
+      useTodos.ts        # React hook connecting todos to the UI
+  kora-worker.ts   # SQLite WASM web worker
+  index.css        # Styles
+server.ts          # Kora sync server
+kora.config.ts     # Kora configuration
+```
+
+In a feature module, `schema` defines data shape, `queries` contain reads only, `mutations` contain
+writes, and `useTodos.ts` is the React binding that exposes todo data and actions to components.
+
+## Environment Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `VITE_SYNC_URL` | `ws://localhost:3001/kora-sync` | WebSocket URL for the sync endpoint |
+| `VITE_AUTH_URL` | current origin | HTTP URL for `/auth/*` routes |
+| `PORT` | `3001` | Sync server port |
+| `KORA_SERVER_DB` | `./.kora/kora-server.db` | SQLite file used by the sync server when `DATABASE_URL` is empty |
+| `KORA_AUTH_DB` | `./.kora/kora-auth.db` | SQLite file used by OAuth state and linked identities when `DATABASE_URL` is empty |
+| `KORA_COEP_POLICY` | `credentialless` | Dev/preview Cross-Origin-Embedder-Policy. Use `require-corp` only when every embedded resource opts in. |
+| `DATABASE_URL` | (none) | PostgreSQL connection string for production sync server deployments |
+| `KORA_SYNC_PATH` | `/kora-sync` | WebSocket path exposed by the sync server |
+| `KORA_AUTH_SECRET` | (none) | Enables built-in `/auth/*` routes and authenticated sync when set |
+| `KORA_GOOGLE_CLIENT_ID` | (none) | Enables Google OAuth when set with `KORA_GOOGLE_REDIRECT_URI` |
+| `KORA_GOOGLE_CLIENT_SECRET` | (none) | Google OAuth client secret for confidential web clients |
+| `KORA_GOOGLE_REDIRECT_URI` | (none) | OAuth callback URL, usually your app URL that handles `code` and `state` |
+| `KORA_OAUTH_PKCE` | `true` when no client secret | Enables PKCE for public desktop/mobile OAuth clients |
+| `KORA_ADMIN_TOKEN` | (none) | Protects `/__kora`, `/__kora/status`, and `/__kora/events` |
+| `KORA_METRICS_TOKEN` | (none) | Protects `/__kora/metrics` |
+| `KORA_BACKUP_TOKEN` | (none) | Protects server backup and restore endpoints |
+
+## Authentication
+
+Set `KORA_AUTH_SECRET` to enable built-in auth on the sync server. Generate a secret with:
+
+```bash
+node -e "console.log(require('node:crypto').randomBytes(32).toString('hex'))"
+```
+
+The template already creates `src/auth.ts`, wraps the app in `AuthProvider`, and wires sync with `createKoraAuthSync({ authClient, schema })`. To enable Google OAuth, set:
+
+```bash
+KORA_AUTH_SECRET=...
+KORA_GOOGLE_CLIENT_ID=...
+KORA_GOOGLE_CLIENT_SECRET=...
+KORA_GOOGLE_REDIRECT_URI=http://localhost:5173
+```
+
+Use `authClient.signInWithOAuth('google')` for web redirect sign-in, or `authClient.getOAuthAuthorizationUrl('google')` plus `authClient.completeOAuthSignIn('google', { code, state })` for custom handoff flows. See the [Authentication Guide](https://ehoneahobed.github.io/kora/guide/authentication).
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start dev server + sync server |
+| `npm run dev:server` | Start sync server only |
+| `npm run build` | Build for production |
+| `npm run preview` | Preview production build |
+
+## Deployment
+
+The client and sync server must be deployed separately:
+
+- **Client**: Any static host (Vercel, Netlify, Cloudflare Pages)
+- **Sync server**: Any Node.js host with WebSocket support (Railway, Render, Fly.io)
+
+Set `VITE_SYNC_URL` to your deployed sync server URL when building:
+
+```bash
+VITE_SYNC_URL=wss://your-server.example.com/kora-sync npm run build
+```
+
+## Learn More
+
+- [Documentation](https://ehoneahobed.github.io/kora/)
+- [Storage Configuration](https://ehoneahobed.github.io/kora/guide/storage-configuration)
+- [Sync Configuration](https://ehoneahobed.github.io/kora/guide/sync-configuration)
+- [Deployment Guide](https://ehoneahobed.github.io/kora/guide/deployment)

package/templates/react-sync/index.html.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-sync/kora.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'korajs/config'
+
+export default defineConfig({
+	schema: './src/schema.ts',
+	dev: {
+		port: 5173,
+		sync: {
+			enabled: true,
+			port: 3001,
+			store: 'sqlite',
+		},
+		watch: {
+			enabled: true,
+			debounceMs: 300,
+		},
+	},
+})

package/templates/react-sync/package.json.hbs

@@ -0,0 +1,44 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "kora dev",
+    "dev:server": "tsx server.ts",
+    "build": "tsc && vite build",
+    "start": "node --import tsx server.ts",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "korajs": "{{koraVersion}}",
+    "@korajs/auth": "{{koraVersion}}",
+    "@korajs/react": "{{koraVersion}}",
+    "@korajs/store": "{{koraVersion}}",
+    "@sqlite.org/sqlite-wasm": ">=3.51.0-build1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "ws": "^8.18.0",
+    "yjs": "^13.6.30"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "better-sqlite3",
+      "esbuild",
+      "protobufjs"
+    ]
+  },
+  "devDependencies": {
+    "@korajs/cli": "{{koraVersion}}",
+    "@korajs/server": "{{koraVersion}}",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/ws": "^8.5.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "better-sqlite3": "^12.9.0",
+    "postgres": "^3.4.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react-sync/server.ts

@@ -0,0 +1,141 @@
+import { existsSync, readFileSync } from 'node:fs'
+import {
+	type CreateKoraAuthServerOptions,
+	createKoraAuthServer,
+	createPostgresOAuthStores,
+	createPostgresUserStore,
+	createSqliteOAuthStores,
+	createSqliteUserStore,
+	googleProvider,
+} from '@korajs/auth/server'
+import {
+	createPostgresServerStore,
+	createProductionServer,
+	createSqliteServerStore,
+} from '@korajs/server'
+import schema from './src/schema'
+
+loadLocalEnv()
+
+function loadLocalEnv(mode = process.env.NODE_ENV || 'development') {
+	const existingKeys = new Set(Object.keys(process.env))
+	for (const file of ['.env', '.env.local', `.env.${mode}`, `.env.${mode}.local`]) {
+		if (!existsSync(file)) continue
+		for (const [key, value] of Object.entries(parseEnvFile(readFileSync(file, 'utf8')))) {
+			if (!existingKeys.has(key)) {
+				process.env[key] = value
+			}
+		}
+	}
+}
+
+function parseEnvFile(contents: string): Record<string, string> {
+	const env: Record<string, string> = {}
+	for (const rawLine of contents.split(/\r?\n/)) {
+		const line = rawLine.trim()
+		if (!line || line.startsWith('#')) continue
+		const normalized = line.startsWith('export ') ? line.slice('export '.length).trim() : line
+		const equalsIndex = normalized.indexOf('=')
+		if (equalsIndex <= 0) continue
+		const key = normalized.slice(0, equalsIndex).trim()
+		if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) continue
+		env[key] = parseEnvValue(normalized.slice(equalsIndex + 1).trim())
+	}
+	return env
+}
+
+function parseEnvValue(value: string): string {
+	const quote = value[0]
+	if ((quote === '"' || quote === "'") && value[value.length - 1] === quote) {
+		const inner = value.slice(1, -1)
+		return quote === '"' ? inner.replace(/\\n/g, '\n').replace(/\\r/g, '\r') : inner
+	}
+	const commentIndex = value.search(/\s#/)
+	return (commentIndex >= 0 ? value.slice(0, commentIndex) : value).trim()
+}
+
+async function createStore() {
+	if (process.env.DATABASE_URL) {
+		return createPostgresServerStore({
+			connectionString: process.env.DATABASE_URL,
+		})
+	}
+
+	return createSqliteServerStore({
+		filename: process.env.KORA_SERVER_DB || './.kora/kora-server.db',
+	})
+}
+
+async function start() {
+	const store = await createStore()
+	await store.setSchema(schema)
+
+	const syncPath = process.env.KORA_SYNC_PATH || '/kora-sync'
+	const auth = await createAuth()
+	const server = createProductionServer({
+		store,
+		port: Number(process.env.PORT) || 3001,
+		staticDir: './dist',
+		syncPath,
+		httpRoutes: auth ? [{ path: '/auth', handle: auth.handleRequest }] : undefined,
+		syncOptions: {
+			schemaVersion: schema.version,
+			...(auth ? { auth: auth.auth } : {}),
+		},
+		operationalAuth: {
+			adminToken: process.env.KORA_ADMIN_TOKEN,
+			metricsToken: process.env.KORA_METRICS_TOKEN,
+			backupToken: process.env.KORA_BACKUP_TOKEN,
+		},
+	})
+
+	const url = await server.start()
+	console.log(`Kora app running at ${url}`)
+	console.log(`  Sync endpoint: ${url.replace('http', 'ws')}${syncPath}`)
+	if (auth) console.log(`  Auth endpoint: ${url}/auth`)
+}
+
+void start()
+
+async function createAuth() {
+	if (!process.env.KORA_AUTH_SECRET) {
+		return null
+	}
+
+	const oauth = await createOAuthConfig()
+	// Users and token revocations persist in the same database (the user store's
+	// revocation store is used automatically), so sign-outs survive restarts.
+	const userStore = process.env.DATABASE_URL
+		? await createPostgresUserStore({ connectionString: process.env.DATABASE_URL })
+		: await createSqliteUserStore({ filename: process.env.KORA_AUTH_DB || './.kora/kora-auth.db' })
+	return createKoraAuthServer({
+		jwtSecret: process.env.KORA_AUTH_SECRET,
+		userStore,
+		...(oauth ? { oauth } : {}),
+	})
+}
+
+async function createOAuthConfig(): Promise<CreateKoraAuthServerOptions['oauth'] | undefined> {
+	if (!process.env.KORA_GOOGLE_CLIENT_ID || !process.env.KORA_GOOGLE_REDIRECT_URI) {
+		return undefined
+	}
+
+	const oauthStores = process.env.DATABASE_URL
+		? await createPostgresOAuthStores({ connectionString: process.env.DATABASE_URL })
+		: await createSqliteOAuthStores({
+				filename: process.env.KORA_AUTH_DB || './.kora/kora-auth.db',
+			})
+
+	return {
+		providers: [
+			googleProvider({
+				clientId: process.env.KORA_GOOGLE_CLIENT_ID,
+				clientSecret: process.env.KORA_GOOGLE_CLIENT_SECRET,
+				redirectUri: process.env.KORA_GOOGLE_REDIRECT_URI,
+				pkce: process.env.KORA_OAUTH_PKCE === 'true' || !process.env.KORA_GOOGLE_CLIENT_SECRET,
+			}),
+		],
+		stateStore: oauthStores.stateStore,
+		linkedIdentityStore: oauthStores.linkedIdentityStore,
+	}
+}

package/templates/react-sync/src/App.tsx

@@ -0,0 +1,160 @@
+import { useAuth } from '@korajs/auth/react'
+import { useSyncStatus } from '@korajs/react'
+import { useState } from 'react'
+import { useTodos } from './modules/todos/useTodos'
+
+type Filter = 'all' | 'active' | 'completed'
+
+export function App() {
+	const { allTodos, activeTodos, completedTodos, addTodo, toggleTodo, deleteTodo } = useTodos()
+	const status = useSyncStatus()
+	const { user, isAuthenticated, signInWithOAuth, signOut, error } = useAuth()
+
+	const [filter, setFilter] = useState<Filter>('all')
+	const [input, setInput] = useState('')
+
+	const filteredTodos =
+		filter === 'active' ? activeTodos : filter === 'completed' ? completedTodos : allTodos
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault()
+		const title = input.trim()
+		if (title) {
+			addTodo.mutate({ title })
+			setInput('')
+		}
+	}
+
+	const clearCompleted = () => {
+		for (const todo of completedTodos) {
+			deleteTodo.mutate(todo.id)
+		}
+	}
+
+	return (
+		<div className="app">
+			<div className="header">
+				<h1>My Tasks</h1>
+				<div className="header-actions">
+					<div className="sync-badge">
+						<span className={`sync-dot ${status.status}`} />
+						<span>{status.status}</span>
+					</div>
+					{isAuthenticated ? (
+						<button type="button" className="auth-button" onClick={() => signOut()}>
+							{user?.email || 'Sign out'}
+						</button>
+					) : (
+						<button type="button" className="auth-button" onClick={() => signInWithOAuth('google')}>
+							Sign in
+						</button>
+					)}
+				</div>
+			</div>
+
+			{status.status === 'clock-error' && (
+				<div className="clock-error-banner">
+					<strong>This device's clock looks wrong.</strong> Your changes are safe on this device,
+					but they can't sync until the clock is corrected. Open Settings, find Date &amp; Time, and
+					turn on "Set automatically".
+				</div>
+			)}
+
+			{error && <div className="auth-error">{error}</div>}
+
+			<div className="stats">
+				<div className="stat-card">
+					<div className="label">Total</div>
+					<div className="value muted">{allTodos.length}</div>
+				</div>
+				<div className="stat-card">
+					<div className="label">Remaining</div>
+					<div className="value warning">{activeTodos.length}</div>
+				</div>
+				<div className="stat-card">
+					<div className="label">Done</div>
+					<div className="value success">{completedTodos.length}</div>
+				</div>
+			</div>
+
+			<form className="add-form" onSubmit={handleSubmit}>
+				<input
+					type="text"
+					value={input}
+					onChange={(e) => setInput(e.target.value)}
+					placeholder="What needs to be done?"
+				/>
+				<button type="submit" disabled={!input.trim()}>
+					Add
+				</button>
+			</form>
+
+			<div className="filters">
+				{(['all', 'active', 'completed'] as const).map((f) => {
+					const count =
+						f === 'all'
+							? allTodos.length
+							: f === 'active'
+								? activeTodos.length
+								: completedTodos.length
+					return (
+						<button
+							key={f}
+							className={`filter-btn ${filter === f ? 'active' : ''}`}
+							onClick={() => setFilter(f)}
+						>
+							{f.charAt(0).toUpperCase() + f.slice(1)}
+							<span className="badge">{count}</span>
+						</button>
+					)
+				})}
+			</div>
+
+			<div className="todo-list">
+				{filteredTodos.length === 0 ? (
+					<div className="empty-state">
+						{filter === 'all' && 'No tasks yet. Add one above!'}
+						{filter === 'active' && 'All caught up! No active tasks.'}
+						{filter === 'completed' && 'No completed tasks yet.'}
+					</div>
+				) : (
+					filteredTodos.map((todo) => (
+						<div key={todo.id} className="todo-item">
+							<button
+								className={`toggle ${todo.completed ? 'checked' : ''}`}
+								onClick={() => toggleTodo.mutate(todo.id, { completed: !todo.completed })}
+							>
+								{todo.completed ? '\u2713' : ''}
+							</button>
+							<span className={`title ${todo.completed ? 'done' : ''}`}>{String(todo.title)}</span>
+							{todo.createdAt && <span className="time">{formatTime(Number(todo.createdAt))}</span>}
+							<button className="delete-btn" onClick={() => deleteTodo.mutate(todo.id)}>
+								\u00d7
+							</button>
+						</div>
+					))
+				)}
+			</div>
+
+			{allTodos.length > 0 && (
+				<div className="footer">
+					<span>
+						{activeTodos.length} item{activeTodos.length !== 1 ? 's' : ''} left
+					</span>
+					{completedTodos.length > 0 && <button onClick={clearCompleted}>Clear completed</button>}
+				</div>
+			)}
+
+			<p className="branding">Powered by Kora &mdash; offline-first, real-time sync</p>
+		</div>
+	)
+}
+
+function formatTime(timestamp: number): string {
+	const date = new Date(timestamp)
+	const now = new Date()
+	if (date.toDateString() === now.toDateString()) {
+		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+	}
+	return date.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}

package/templates/react-sync/src/auth.ts

@@ -0,0 +1,25 @@
+import { createKoraAuth } from '@korajs/auth'
+
+export const authServerUrl =
+	import.meta.env.VITE_AUTH_URL || `${window.location.protocol}//${window.location.host}`
+
+export const authClient = createKoraAuth({
+	serverUrl: authServerUrl,
+})
+
+export async function completeOAuthCallbackFromLocation(): Promise<void> {
+	const url = new URL(window.location.href)
+	const code = url.searchParams.get('code')
+	const state = url.searchParams.get('state')
+	const provider = url.searchParams.get('provider') || 'google'
+
+	if (!code || !state) {
+		return
+	}
+
+	await authClient.completeOAuthSignIn(provider, { code, state })
+	url.searchParams.delete('code')
+	url.searchParams.delete('state')
+	url.searchParams.delete('provider')
+	window.history.replaceState({}, document.title, `${url.pathname}${url.search}${url.hash}`)
+}