@korajs/cli 0.4.0 → 0.5.0

package/templates/react-sync/src/index.css

@@ -1,292 +1,339 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
 }
 
 :root {
-  --color-bg: #0a0a0f;
-  --color-surface: #111118;
-  --color-border: #1e1e2a;
-  --color-border-hover: #2a2a3a;
-  --color-text: #e4e4e7;
-  --color-text-muted: #71717a;
-  --color-text-dim: #3f3f46;
-  --color-primary: #6366f1;
-  --color-primary-hover: #818cf8;
-  --color-success: #34d399;
-  --color-warning: #fbbf24;
-  --color-danger: #f87171;
-  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --radius: 8px;
+	--color-bg: #0a0a0f;
+	--color-surface: #111118;
+	--color-border: #1e1e2a;
+	--color-border-hover: #2a2a3a;
+	--color-text: #e4e4e7;
+	--color-text-muted: #71717a;
+	--color-text-dim: #3f3f46;
+	--color-primary: #6366f1;
+	--color-primary-hover: #818cf8;
+	--color-success: #34d399;
+	--color-warning: #fbbf24;
+	--color-danger: #f87171;
+	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	--radius: 8px;
 }
 
 body {
-  font-family: var(--font-sans);
-  background: var(--color-bg);
-  color: var(--color-text);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
+	font-family: var(--font-sans);
+	background: var(--color-bg);
+	color: var(--color-text);
+	line-height: 1.6;
+	-webkit-font-smoothing: antialiased;
 }
 
 .app {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 48px 16px;
+	max-width: 640px;
+	margin: 0 auto;
+	padding: 48px 16px;
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 32px;
 }
 
 .header h1 {
-  font-size: 1.5rem;
-  font-weight: 700;
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
 }
 
 .sync-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 999px;
-  background: var(--color-surface);
-  font-size: 0.8rem;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: var(--color-surface);
+	font-size: 0.8rem;
 }
 
 .sync-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
 }
 
 .sync-dot.connected,
-.sync-dot.synced { background: var(--color-success); }
-.sync-dot.syncing { background: var(--color-warning); }
-.sync-dot.offline { background: var(--color-text-muted); }
-.sync-dot.error { background: var(--color-danger); }
+.sync-dot.synced {
+	background: var(--color-success);
+}
+.sync-dot.syncing {
+	background: var(--color-warning);
+}
+.sync-dot.offline {
+	background: var(--color-text-muted);
+}
+.sync-dot.error {
+	background: var(--color-danger);
+}
+
+.auth-button {
+	border: 1px solid var(--color-border);
+	border-radius: 999px;
+	background: var(--color-surface);
+	color: var(--color-text);
+	cursor: pointer;
+	font-size: 0.8rem;
+	max-width: 180px;
+	overflow: hidden;
+	padding: 4px 12px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.auth-button:hover {
+	border-color: var(--color-border-hover);
+}
+
+.auth-error {
+	border: 1px solid rgba(248, 113, 113, 0.35);
+	border-radius: var(--radius);
+	color: var(--color-danger);
+	font-size: 0.85rem;
+	margin-bottom: 16px;
+	padding: 10px 12px;
+}
 
 .stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 32px;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 12px;
+	margin-bottom: 32px;
 }
 
 .stat-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  padding: 16px;
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	padding: 16px;
 }
 
 .stat-card .label {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
+	font-size: 0.8rem;
+	color: var(--color-text-muted);
 }
 
 .stat-card .value {
-  font-size: 1.5rem;
-  font-weight: 700;
+	font-size: 1.5rem;
+	font-weight: 700;
 }
 
-.stat-card .value.muted { color: var(--color-text-muted); }
-.stat-card .value.warning { color: var(--color-warning); }
-.stat-card .value.success { color: var(--color-success); }
+.stat-card .value.muted {
+	color: var(--color-text-muted);
+}
+.stat-card .value.warning {
+	color: var(--color-warning);
+}
+.stat-card .value.success {
+	color: var(--color-success);
+}
 
 .add-form {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 32px;
+	display: flex;
+	gap: 12px;
+	margin-bottom: 32px;
 }
 
 .add-form input {
-  flex: 1;
-  padding: 10px 16px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background: var(--color-surface);
-  color: var(--color-text);
-  font-size: 0.95rem;
-  outline: none;
+	flex: 1;
+	padding: 10px 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	background: var(--color-surface);
+	color: var(--color-text);
+	font-size: 0.95rem;
+	outline: none;
 }
 
 .add-form input:focus {
-  border-color: var(--color-primary);
+	border-color: var(--color-primary);
 }
 
 .add-form input::placeholder {
-  color: var(--color-text-muted);
+	color: var(--color-text-muted);
 }
 
 .add-form button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: var(--radius);
-  background: var(--color-primary);
-  color: white;
-  font-size: 0.95rem;
-  font-weight: 500;
-  cursor: pointer;
+	padding: 10px 20px;
+	border: none;
+	border-radius: var(--radius);
+	background: var(--color-primary);
+	color: white;
+	font-size: 0.95rem;
+	font-weight: 500;
+	cursor: pointer;
 }
 
 .add-form button:hover {
-  background: var(--color-primary-hover);
+	background: var(--color-primary-hover);
 }
 
 .add-form button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+	opacity: 0.5;
+	cursor: not-allowed;
 }
 
 .filters {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 24px;
+	display: flex;
+	gap: 8px;
+	margin-bottom: 24px;
 }
 
 .filter-btn {
-  padding: 6px 16px;
-  border: none;
-  border-radius: var(--radius);
-  background: var(--color-surface);
-  color: var(--color-text-muted);
-  font-size: 0.85rem;
-  font-weight: 500;
-  cursor: pointer;
+	padding: 6px 16px;
+	border: none;
+	border-radius: var(--radius);
+	background: var(--color-surface);
+	color: var(--color-text-muted);
+	font-size: 0.85rem;
+	font-weight: 500;
+	cursor: pointer;
 }
 
 .filter-btn:hover {
-  background: var(--color-border-hover);
-  color: var(--color-text);
+	background: var(--color-border-hover);
+	color: var(--color-text);
 }
 
 .filter-btn.active {
-  background: var(--color-primary);
-  color: white;
+	background: var(--color-primary);
+	color: white;
 }
 
 .filter-btn .badge {
-  display: inline-block;
-  margin-left: 6px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  background: rgba(255, 255, 255, 0.15);
+	display: inline-block;
+	margin-left: 6px;
+	padding: 1px 6px;
+	border-radius: 999px;
+	font-size: 0.75rem;
+	background: rgba(255, 255, 255, 0.15);
 }
 
 .filter-btn:not(.active) .badge {
-  background: var(--color-border);
+	background: var(--color-border);
 }
 
 .todo-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 }
 
 .todo-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background: var(--color-surface);
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	background: var(--color-surface);
 }
 
 .todo-item:hover {
-  border-color: var(--color-border-hover);
+	border-color: var(--color-border-hover);
 }
 
 .todo-item .toggle {
-  background: none;
-  border: 2px solid var(--color-text-muted);
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: transparent;
-  font-size: 0.7rem;
-  flex-shrink: 0;
+	background: none;
+	border: 2px solid var(--color-text-muted);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: transparent;
+	font-size: 0.7rem;
+	flex-shrink: 0;
 }
 
 .todo-item .toggle.checked {
-  border-color: var(--color-success);
-  background: var(--color-success);
-  color: white;
+	border-color: var(--color-success);
+	background: var(--color-success);
+	color: white;
 }
 
 .todo-item .title {
-  flex: 1;
+	flex: 1;
 }
 
 .todo-item .title.done {
-  text-decoration: line-through;
-  color: var(--color-text-muted);
+	text-decoration: line-through;
+	color: var(--color-text-muted);
 }
 
 .todo-item .time {
-  font-size: 0.75rem;
-  color: var(--color-text-dim);
+	font-size: 0.75rem;
+	color: var(--color-text-dim);
 }
 
 .todo-item .delete-btn {
-  background: none;
-  border: none;
-  color: var(--color-text-dim);
-  cursor: pointer;
-  padding: 4px;
-  opacity: 0;
-  transition: opacity 0.15s;
+	background: none;
+	border: none;
+	color: var(--color-text-dim);
+	cursor: pointer;
+	padding: 4px;
+	opacity: 0;
+	transition: opacity 0.15s;
 }
 
 .todo-item:hover .delete-btn {
-  opacity: 1;
+	opacity: 1;
 }
 
 .todo-item .delete-btn:hover {
-  color: var(--color-danger);
+	color: var(--color-danger);
 }
 
 .empty-state {
-  padding: 48px 0;
-  text-align: center;
-  color: var(--color-text-dim);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius);
+	padding: 48px 0;
+	text-align: center;
+	color: var(--color-text-dim);
+	border: 1px dashed var(--color-border);
+	border-radius: var(--radius);
 }
 
 .footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
+	display: flex;
+	justify-content: space-between;
+	margin-top: 24px;
+	font-size: 0.85rem;
+	color: var(--color-text-muted);
 }
 
 .footer button {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  cursor: pointer;
+	background: none;
+	border: none;
+	color: var(--color-text-muted);
+	cursor: pointer;
 }
 
 .footer button:hover {
-  color: var(--color-text);
+	color: var(--color-text);
 }
 
 .branding {
-  margin-top: 48px;
-  text-align: center;
-  font-size: 0.75rem;
-  color: var(--color-text-dim);
+	margin-top: 48px;
+	text-align: center;
+	font-size: 0.75rem;
+	color: var(--color-text-dim);
 }

package/templates/react-sync/src/kora-worker.ts

@@ -4,7 +4,6 @@
 // Import the WASM binary URL so Vite resolves it with the correct content hash.
 // Without this, production builds fail because sqlite3 looks for the unhashed filename.
 import sqliteWasmUrl from '@sqlite.org/sqlite-wasm/sqlite3.wasm?url'
-
 ;(globalThis as Record<string, unknown>).__KORA_SQLITE_WASM_URL = sqliteWasmUrl
 
 import '@korajs/store/sqlite-wasm/worker'

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

@@ -1,36 +1,52 @@
-import { createApp } from 'korajs'
+import { createKoraAuthSync } from '@korajs/auth'
+import { AuthProvider } from '@korajs/auth/react'
 import { KoraProvider } from '@korajs/react'
+import { createApp } from 'korajs'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import schema from './schema'
 import { App } from './App'
+import { authClient, completeOAuthCallbackFromLocation } from './auth'
+import schema from './schema'
 import './index.css'
 import koraWorkerUrl from './kora-worker.ts?worker&url'
 
 // Build sync URL: use env var if set, otherwise derive from current page host.
 // This allows the Vite proxy (/kora-sync → ws://localhost:3001) to work in dev,
 // and also works through any tunnel (ngrok, cloudflared) without extra configuration.
-const syncUrl = import.meta.env.VITE_SYNC_URL
-  || `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/kora-sync`
+const syncUrl =
+	import.meta.env.VITE_SYNC_URL ||
+	`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/kora-sync`
 
 const app = createApp({
-  schema,
-  sync: {
-    url: syncUrl,
-  },
-  store: {
-    workerUrl: koraWorkerUrl,
-  },
-  devtools: true,
+	schema,
+	sync: {
+		url: syncUrl,
+		authClient: createKoraAuthSync({ authClient, schema }),
+	},
+	store: {
+		workerUrl: koraWorkerUrl,
+	},
+	devtools: true,
 })
 
 // Connect to sync server once the app is ready
 app.ready.then(() => app.sync?.connect())
+void completeOAuthCallbackFromLocation().catch((error) => {
+	console.error('[Kora Auth] OAuth callback failed:', error)
+})
+
+const rootElement = document.getElementById('root')
+
+if (!rootElement) {
+	throw new Error('Root element not found')
+}
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <KoraProvider app={app} fallback={<div>Loading...</div>}>
-      <App />
-    </KoraProvider>
-  </StrictMode>,
+createRoot(rootElement).render(
+	<StrictMode>
+		<AuthProvider client={authClient} fallback={<div>Restoring session...</div>}>
+			<KoraProvider app={app} fallback={<div>Loading...</div>}>
+				<App />
+			</KoraProvider>
+		</AuthProvider>
+	</StrictMode>,
 )

package/templates/react-sync/src/modules/todos/todo.mutations.ts

@@ -0,0 +1,25 @@
+import type { CollectionAccessor } from 'korajs'
+
+export interface CreateTodoInput {
+	title: string
+}
+
+export interface UpdateTodoStatusInput {
+	completed: boolean
+}
+
+export function createTodo(todos: CollectionAccessor, data: CreateTodoInput) {
+	return todos.insert({ title: data.title })
+}
+
+export function updateTodoStatus(
+	todos: CollectionAccessor,
+	id: string,
+	data: UpdateTodoStatusInput,
+) {
+	return todos.update(id, { completed: data.completed })
+}
+
+export function deleteTodo(todos: CollectionAccessor, id: string) {
+	return todos.delete(id)
+}

package/templates/react-sync/src/modules/todos/todo.queries.ts

@@ -0,0 +1,5 @@
+import type { CollectionAccessor } from 'korajs'
+
+export function orderedTodos(todos: CollectionAccessor) {
+	return todos.where({}).orderBy('createdAt', 'desc')
+}

package/templates/react-sync/src/modules/todos/todo.schema.ts

@@ -0,0 +1,10 @@
+import { t } from 'korajs'
+
+export const todos = {
+	fields: {
+		title: t.string(),
+		completed: t.boolean().default(false),
+		createdAt: t.timestamp().auto(),
+	},
+	indexes: ['completed', 'createdAt'],
+}

package/templates/react-sync/src/modules/todos/useTodos.ts

@@ -0,0 +1,31 @@
+import { useCollection, useMutation, useQuery } from '@korajs/react'
+import {
+	type CreateTodoInput,
+	type UpdateTodoStatusInput,
+	createTodo,
+	deleteTodo,
+	updateTodoStatus,
+} from './todo.mutations'
+import { orderedTodos } from './todo.queries'
+
+export function useTodos() {
+	const todos = useCollection('todos')
+	const allTodos = useQuery(orderedTodos(todos))
+	const addTodo = useMutation((data: CreateTodoInput) => createTodo(todos, data))
+	const toggleTodo = useMutation((id: string, data: UpdateTodoStatusInput) =>
+		updateTodoStatus(todos, id, data),
+	)
+	const removeTodo = useMutation((id: string) => deleteTodo(todos, id))
+
+	const activeTodos = allTodos.filter((todo) => !todo.completed)
+	const completedTodos = allTodos.filter((todo) => !!todo.completed)
+
+	return {
+		allTodos,
+		activeTodos,
+		completedTodos,
+		addTodo,
+		toggleTodo,
+		deleteTodo: removeTodo,
+	}
+}

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

@@ -1,15 +1,9 @@
-import { defineSchema, t } from 'korajs'
+import { defineSchema } from 'korajs'
+import { todos } from './modules/todos/todo.schema'
 
 export default defineSchema({
-  version: 1,
-  collections: {
-    todos: {
-      fields: {
-        title: t.string(),
-        completed: t.boolean().default(false),
-        createdAt: t.timestamp().auto(),
-      },
-      indexes: ['completed'],
-    },
-  },
+	version: 1,
+	collections: {
+		todos,
+	},
 })