@korajs/cli 0.0.0-canary-20261008174129

package/templates/tauri-react/src/AppShell.tsx

@@ -0,0 +1,158 @@
+import { createKoraAuthSync } from '@korajs/auth'
+import { AuthProvider } from '@korajs/auth/react'
+import { KoraProvider } from '@korajs/react'
+import { createApp } from 'korajs'
+import { useCallback, useEffect, useState } from 'react'
+import { App } from './App'
+import { SetupScreen } from './SetupScreen'
+import { completeOAuthCallbackFromLocation, createDesktopAuthClient } from './auth'
+import schema from './schema'
+import {
+	clearSyncUrl,
+	factoryReset,
+	getSyncUrl,
+	hasCompletedSetup,
+	markSetupComplete,
+	setSyncUrl,
+} from './sync-config'
+import { checkForUpdates } from './updater'
+
+type AppState = { phase: 'setup' } | { phase: 'running'; syncUrl: string | null }
+
+/**
+ * Root component that handles the first-launch setup flow.
+ *
+ * - If setup not completed, shows the setup screen.
+ * - If completed, initializes Kora and renders the app.
+ * - Handles server changes with proper data isolation warnings.
+ *
+ * Changing the sync server requires an app restart (to re-create the
+ * Kora app instance with the new URL). This is intentional — it prevents
+ * partial state from one server leaking to another.
+ */
+export function AppShell() {
+	const [state, setState] = useState<AppState>(() => {
+		if (hasCompletedSetup()) {
+			return { phase: 'running', syncUrl: getSyncUrl() }
+		}
+		return { phase: 'setup' }
+	})
+
+	const handleConnect = useCallback((url: string) => {
+		setSyncUrl(url)
+		setState({ phase: 'running', syncUrl: url })
+	}, [])
+
+	const handleSkip = useCallback(() => {
+		markSetupComplete()
+		setState({ phase: 'running', syncUrl: null })
+	}, [])
+
+	// Change to a different server URL.
+	// This requires restarting the app to create a fresh Kora instance.
+	const handleChangeServer = useCallback((newUrl: string | null) => {
+		if (newUrl) {
+			setSyncUrl(newUrl)
+		} else {
+			clearSyncUrl()
+			markSetupComplete() // Still completed — just disconnected
+		}
+		// Reload to re-initialize Kora with the new URL.
+		// This is cleaner than trying to hot-swap the sync connection,
+		// and prevents data from one server context leaking to another.
+		window.location.reload()
+	}, [])
+
+	const handleFactoryReset = useCallback(() => {
+		factoryReset() // Clears all data and reloads
+	}, [])
+
+	if (state.phase === 'setup') {
+		return <SetupScreen onConnect={handleConnect} onSkip={handleSkip} />
+	}
+
+	return (
+		<ConnectedApp
+			syncUrl={state.syncUrl}
+			onChangeServer={handleChangeServer}
+			onFactoryReset={handleFactoryReset}
+		/>
+	)
+}
+
+interface ConnectedAppProps {
+	syncUrl: string | null
+	onChangeServer: (newUrl: string | null) => void
+	onFactoryReset: () => void
+}
+
+function ConnectedApp({ syncUrl, onChangeServer, onFactoryReset }: ConnectedAppProps) {
+	const [authClient] = useState(() => createDesktopAuthClient(syncUrl))
+	// Create the Kora app instance with optional sync.
+	// This only runs once — the app instance is stable for the lifetime of this component.
+	const [app] = useState(() =>
+		createApp({
+			schema,
+			...(syncUrl
+				? {
+						sync: {
+							url: syncUrl,
+							authClient: createKoraAuthSync({ authClient, schema }),
+						},
+					}
+				: {}),
+			devtools: import.meta.env.DEV,
+		}),
+	)
+
+	// Connect to sync server once ready, and check for updates
+	useEffect(() => {
+		void completeOAuthCallbackFromLocation(authClient).catch((error) => {
+			console.error('[Kora Auth] OAuth callback failed:', error)
+		})
+		if (syncUrl) {
+			app.ready.then(() => app.sync?.connect())
+		}
+		checkForUpdates()
+	}, [app, authClient, syncUrl])
+
+	return (
+		<AuthProvider
+			client={authClient}
+			fallback={
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						height: '100vh',
+						background: '#0a0a0a',
+						color: '#6b7280',
+					}}
+				>
+					Restoring session...
+				</div>
+			}
+		>
+			<KoraProvider
+				app={app}
+				fallback={
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'center',
+							height: '100vh',
+							background: '#0a0a0a',
+							color: '#6b7280',
+						}}
+					>
+						Loading...
+					</div>
+				}
+			>
+				<App syncUrl={syncUrl} onChangeServer={onChangeServer} onFactoryReset={onFactoryReset} />
+			</KoraProvider>
+		</AuthProvider>
+	)
+}

package/templates/tauri-react/src/SetupScreen.tsx

@@ -0,0 +1,288 @@
+import { AlertCircle, ArrowRight, Loader2, Monitor, Wifi } from 'lucide-react'
+import { useState } from 'react'
+import { testConnection } from './sync-config'
+
+interface SetupScreenProps {
+	onConnect: (syncUrl: string) => void
+	onSkip: () => void
+}
+
+/**
+ * First-launch setup screen.
+ *
+ * Shown when no sync server URL is configured. The user enters their
+ * organization's sync server URL, or skips to use the app in local-only mode.
+ *
+ * The connection test is advisory — if the server is unreachable (e.g.,
+ * during maintenance), the user can still save the URL and the app will
+ * connect when the server comes back.
+ */
+export function SetupScreen({ onConnect, onSkip }: SetupScreenProps) {
+	const [url, setUrl] = useState('')
+	const [testing, setTesting] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+	const [unreachable, setUnreachable] = useState(false)
+
+	const validateUrl = (value: string): string | null => {
+		if (!value.startsWith('ws://') && !value.startsWith('wss://')) {
+			return 'URL must start with ws:// or wss://'
+		}
+		try {
+			new URL(value.replace(/^ws/, 'http'))
+		} catch {
+			return 'Invalid URL format'
+		}
+		return null
+	}
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		const syncUrl = url.trim()
+		if (!syncUrl) return
+
+		const validationError = validateUrl(syncUrl)
+		if (validationError) {
+			setError(validationError)
+			return
+		}
+
+		setTesting(true)
+		setError(null)
+		setUnreachable(false)
+
+		const reachable = await testConnection(syncUrl)
+		setTesting(false)
+
+		if (reachable) {
+			onConnect(syncUrl)
+		} else {
+			// Server unreachable — let the user save anyway
+			setUnreachable(true)
+		}
+	}
+
+	const handleSaveAnyway = () => {
+		onConnect(url.trim())
+	}
+
+	return (
+		<div
+			style={{
+				minHeight: '100vh',
+				background: '#0a0a0a',
+				color: '#f3f4f6',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+			}}
+		>
+			<div style={{ maxWidth: '480px', width: '100%', padding: '0 24px' }}>
+				{/* Logo */}
+				<div style={{ textAlign: 'center', marginBottom: '48px' }}>
+					<Monitor
+						style={{ width: '48px', height: '48px', color: '#818cf8', margin: '0 auto 16px' }}
+					/>
+					<h1 style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px' }}>Welcome</h1>
+					<p style={{ color: '#6b7280', fontSize: '15px' }}>
+						Connect to your organization's sync server to sync data across devices.
+					</p>
+				</div>
+
+				{/* Connection form */}
+				<form onSubmit={handleSubmit}>
+					<div style={{ marginBottom: '16px' }}>
+						<label
+							htmlFor="sync-server-url"
+							style={{
+								display: 'block',
+								fontSize: '14px',
+								fontWeight: '500',
+								marginBottom: '8px',
+								color: '#d1d5db',
+							}}
+						>
+							Sync server URL
+						</label>
+						<div style={{ position: 'relative' }}>
+							<Wifi
+								style={{
+									position: 'absolute',
+									left: '12px',
+									top: '50%',
+									transform: 'translateY(-50%)',
+									width: '18px',
+									height: '18px',
+									color: '#6b7280',
+								}}
+							/>
+							<input
+								id="sync-server-url"
+								type="text"
+								value={url}
+								onChange={(e) => {
+									setUrl(e.target.value)
+									setError(null)
+									setUnreachable(false)
+								}}
+								placeholder="wss://your-server.example.com/kora-sync"
+								style={{
+									width: '100%',
+									borderRadius: '8px',
+									border: `1px solid ${error ? '#ef4444' : '#374151'}`,
+									background: '#111827',
+									padding: '12px 16px 12px 40px',
+									color: '#f3f4f6',
+									outline: 'none',
+									fontSize: '14px',
+									boxSizing: 'border-box',
+								}}
+							/>
+						</div>
+						{error && (
+							<p style={{ color: '#ef4444', fontSize: '13px', marginTop: '8px' }}>{error}</p>
+						)}
+					</div>
+
+					{/* Server unreachable — offer to save anyway */}
+					{unreachable && (
+						<div
+							style={{
+								marginBottom: '16px',
+								padding: '12px 16px',
+								borderRadius: '8px',
+								border: '1px solid #92400e',
+								background: '#451a03',
+							}}
+						>
+							<div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+								<AlertCircle
+									style={{
+										width: '16px',
+										height: '16px',
+										color: '#fbbf24',
+										flexShrink: 0,
+										marginTop: '2px',
+									}}
+								/>
+								<div>
+									<p style={{ fontSize: '13px', color: '#fde68a', marginBottom: '8px' }}>
+										Server is not reachable right now. This could be temporary (maintenance, network
+										issues).
+									</p>
+									<div style={{ display: 'flex', gap: '8px' }}>
+										<button
+											type="button"
+											onClick={handleSaveAnyway}
+											style={{
+												fontSize: '13px',
+												color: '#fbbf24',
+												background: 'none',
+												border: '1px solid #92400e',
+												borderRadius: '6px',
+												padding: '4px 12px',
+												cursor: 'pointer',
+											}}
+										>
+											Save anyway — connect later
+										</button>
+										<button
+											type="submit"
+											style={{
+												fontSize: '13px',
+												color: '#9ca3af',
+												background: 'none',
+												border: '1px solid #374151',
+												borderRadius: '6px',
+												padding: '4px 12px',
+												cursor: 'pointer',
+											}}
+										>
+											Retry
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+
+					{!unreachable && (
+						<button
+							type="submit"
+							disabled={testing || !url.trim()}
+							style={{
+								width: '100%',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+								gap: '8px',
+								borderRadius: '8px',
+								background: '#4f46e5',
+								padding: '12px 20px',
+								fontWeight: '500',
+								color: 'white',
+								border: 'none',
+								cursor: testing || !url.trim() ? 'default' : 'pointer',
+								opacity: testing || !url.trim() ? 0.5 : 1,
+								fontSize: '14px',
+								marginBottom: '12px',
+							}}
+						>
+							{testing ? (
+								<>
+									<Loader2
+										style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }}
+									/>
+									Testing connection...
+								</>
+							) : (
+								<>
+									Connect
+									<ArrowRight style={{ width: '16px', height: '16px' }} />
+								</>
+							)}
+						</button>
+					)}
+				</form>
+
+				{/* Skip option */}
+				<div style={{ textAlign: 'center', marginTop: '24px' }}>
+					<button
+						onClick={onSkip}
+						style={{
+							background: 'none',
+							border: 'none',
+							color: '#6b7280',
+							cursor: 'pointer',
+							fontSize: '14px',
+							textDecoration: 'underline',
+							textUnderlineOffset: '3px',
+						}}
+					>
+						Skip — use offline only
+					</button>
+					<p style={{ color: '#374151', fontSize: '12px', marginTop: '8px' }}>
+						You can connect to a sync server later from settings.
+					</p>
+				</div>
+
+				{/* Help text */}
+				<div
+					style={{
+						marginTop: '48px',
+						padding: '16px',
+						borderRadius: '8px',
+						border: '1px solid #1f2937',
+						background: '#111827',
+					}}
+				>
+					<p style={{ fontSize: '13px', color: '#9ca3af', lineHeight: '1.6' }}>
+						<strong style={{ color: '#d1d5db' }}>Don't have a server URL?</strong>
+						<br />
+						Ask your administrator for the sync server address. For local development, use{' '}
+						<code style={{ color: '#818cf8' }}>ws://localhost:3001/kora-sync</code>.
+					</p>
+				</div>
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,45 @@
+import { type AuthClient, createKoraAuth } from '@korajs/auth'
+
+export function createDesktopAuthClient(syncUrl: string | null): AuthClient {
+	return createKoraAuth({
+		serverUrl: getAuthServerUrl(syncUrl),
+	})
+}
+
+export function getAuthServerUrl(syncUrl: string | null): string {
+	if (import.meta.env.VITE_AUTH_URL) {
+		return import.meta.env.VITE_AUTH_URL
+	}
+	if (!syncUrl) {
+		return 'http://localhost:3001'
+	}
+
+	const url = new URL(syncUrl)
+	url.protocol = url.protocol === 'wss:' ? 'https:' : 'http:'
+	url.pathname = url.pathname.replace(/\/kora-sync\/?$/, '') || '/'
+	url.search = ''
+	url.hash = ''
+	return url.toString().replace(/\/+$/, '')
+}
+
+export async function openOAuthSignIn(authClient: AuthClient, provider = 'google'): Promise<void> {
+	const { url } = await authClient.getOAuthAuthorizationUrl(provider)
+	window.open(url, '_blank', 'noopener,noreferrer')
+}
+
+export async function completeOAuthCallbackFromLocation(authClient: AuthClient): 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}`)
+}

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

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { AppShell } from './AppShell'
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<AppShell />
+	</StrictMode>,
+)

package/templates/tauri-react/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/tauri-react/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/tauri-react/src/modules/todos/todo.schema.ts

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

package/templates/tauri-react/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/tauri-react/src/schema.ts

@@ -0,0 +1,9 @@
+import { defineSchema } from '@korajs/core'
+import { todos } from './modules/todos/todo.schema'
+
+export default defineSchema({
+	version: 1,
+	collections: {
+		todos,
+	},
+})

package/templates/tauri-react/src/sync-config.ts

@@ -0,0 +1,103 @@
+/**
+ * Runtime sync server configuration.
+ *
+ * On first launch, the user enters their sync server URL (or organization URL).
+ * This is stored in localStorage and used for all subsequent launches.
+ *
+ * This allows a single binary to be distributed to multiple organizations,
+ * each pointing to their own sync server.
+ */
+
+const SYNC_URL_KEY = 'kora-sync-url'
+const SYNC_CONFIGURED_KEY = 'kora-sync-configured'
+
+/**
+ * Get the configured sync server URL.
+ * Priority: localStorage → VITE_SYNC_URL env var → null (needs setup).
+ */
+export function getSyncUrl(): string | null {
+	const stored = localStorage.getItem(SYNC_URL_KEY)
+	if (stored) return stored
+
+	// Compile-time default (set via VITE_SYNC_URL when building)
+	const envUrl = import.meta.env.VITE_SYNC_URL
+	if (envUrl) return envUrl
+
+	return null
+}
+
+/** Save a sync server URL to persistent local config. */
+export function setSyncUrl(url: string): void {
+	localStorage.setItem(SYNC_URL_KEY, url)
+	localStorage.setItem(SYNC_CONFIGURED_KEY, 'true')
+}
+
+/** Clear the stored sync server URL (returns to setup screen). */
+export function clearSyncUrl(): void {
+	localStorage.removeItem(SYNC_URL_KEY)
+	localStorage.removeItem(SYNC_CONFIGURED_KEY)
+}
+
+/**
+ * Whether the user has completed initial setup (connected or explicitly skipped).
+ * This is separate from getSyncUrl() — a user who skipped still completed setup.
+ */
+export function hasCompletedSetup(): boolean {
+	// If there's a compile-time URL, setup is not needed
+	if (import.meta.env.VITE_SYNC_URL) return true
+	return localStorage.getItem(SYNC_CONFIGURED_KEY) === 'true'
+}
+
+/** Mark setup as completed (used when user skips sync). */
+export function markSetupComplete(): void {
+	localStorage.setItem(SYNC_CONFIGURED_KEY, 'true')
+}
+
+/**
+ * Full factory reset: clears sync config and all local data.
+ * The app reloads with a fresh state, showing the setup screen.
+ */
+export function factoryReset(): void {
+	// Clear sync config
+	clearSyncUrl()
+	localStorage.removeItem(SYNC_CONFIGURED_KEY)
+
+	// Clear all Kora local data by removing IndexedDB databases
+	// and any other localStorage keys the app may have set.
+	const keysToRemove: string[] = []
+	for (let i = 0; i < localStorage.length; i++) {
+		const key = localStorage.key(i)
+		if (key?.startsWith('kora-')) {
+			keysToRemove.push(key)
+		}
+	}
+	for (const key of keysToRemove) {
+		localStorage.removeItem(key)
+	}
+
+	// Reload to reinitialize everything from scratch
+	window.location.reload()
+}
+
+/** Test if a WebSocket URL is reachable by attempting a brief connection. */
+export function testConnection(url: string, timeoutMs = 5000): Promise<boolean> {
+	return new Promise((resolve) => {
+		const timeout = setTimeout(() => {
+			ws.close()
+			resolve(false)
+		}, timeoutMs)
+
+		const ws = new WebSocket(url)
+
+		ws.onopen = () => {
+			clearTimeout(timeout)
+			ws.close()
+			resolve(true)
+		}
+
+		ws.onerror = () => {
+			clearTimeout(timeout)
+			resolve(false)
+		}
+	})
+}