@korajs/cli 0.1.8 → 0.1.11

package/dist/index.d.cts

@@ -4,7 +4,7 @@ import { KoraError, SchemaDefinition } from '@korajs/core';
 declare const PACKAGE_MANAGERS: readonly ["pnpm", "npm", "yarn", "bun"];
 type PackageManager = (typeof PACKAGE_MANAGERS)[number];
 /** Available project templates */
-declare const TEMPLATES: readonly ["react-basic", "react-sync"];
+declare const TEMPLATES: readonly ["react-tailwind-sync", "react-tailwind", "react-sync", "react-basic"];
 type TemplateName = (typeof TEMPLATES)[number];
 /** Metadata for a project template */
 interface TemplateInfo {

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { KoraError, SchemaDefinition } from '@korajs/core';
 declare const PACKAGE_MANAGERS: readonly ["pnpm", "npm", "yarn", "bun"];
 type PackageManager = (typeof PACKAGE_MANAGERS)[number];
 /** Available project templates */
-declare const TEMPLATES: readonly ["react-basic", "react-sync"];
+declare const TEMPLATES: readonly ["react-tailwind-sync", "react-tailwind", "react-sync", "react-basic"];
 type TemplateName = (typeof TEMPLATES)[number];
 /** Metadata for a project template */
 interface TemplateInfo {

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   SchemaNotFoundError,
   TEMPLATES,
   TEMPLATE_INFO
-} from "./chunk-ZVB4HAB3.js";
+} from "./chunk-VGOOQ56H.js";
 export {
   CliError,
   DevServerError,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korajs/cli",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "Kora.js CLI tooling and project scaffolding",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -30,16 +30,6 @@
     "dist",
     "templates"
   ],
-  "dependencies": {
-    "citty": "^0.1.6",
-    "@korajs/core": "0.1.2"
-  },
-  "devDependencies": {
-    "typescript": "^5.7.3",
-    "tsup": "^8.3.6",
-    "vitest": "^3.0.4"
-  },
-  "license": "MIT",
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
@@ -48,5 +38,15 @@
     "typecheck": "tsc --noEmit",
     "lint": "biome check src/ tests/",
     "clean": "rm -rf dist .turbo coverage"
-  }
-}
+  },
+  "dependencies": {
+    "@korajs/core": "workspace:*",
+    "citty": "^0.1.6"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3",
+    "tsup": "^8.3.6",
+    "vitest": "^3.0.4"
+  },
+  "license": "MIT"
+}

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

@@ -1,48 +1,146 @@
+import { useState } from 'react'
 import { useQuery, useMutation, useCollection } from '@korajs/react'
 
+type Filter = 'all' | 'active' | 'completed'
+
 export function App() {
   const todos = useCollection('todos')
-  const activeTodos = useQuery(todos.where({ completed: false }))
+  const allTodos = useQuery(todos.orderBy('createdAt', 'desc'))
   const { mutate: addTodo } = useMutation(
     (data: { title: string }) => todos.insert(data)
   )
   const { mutate: toggleTodo } = useMutation(
     (id: string, data: { completed: boolean }) => todos.update(id, data)
   )
+  const { mutate: deleteTodo } = useMutation(
+    (id: string) => todos.delete(id)
+  )
+
+  const [filter, setFilter] = useState<Filter>('all')
+  const [input, setInput] = useState('')
+
+  const activeTodos = allTodos.filter((t) => !t.completed)
+  const completedTodos = allTodos.filter((t) => !!t.completed)
+  const filteredTodos =
+    filter === 'active' ? activeTodos : filter === 'completed' ? completedTodos : allTodos
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const title = input.trim()
+    if (title) {
+      addTodo({ title })
+      setInput('')
+    }
+  }
+
+  const clearCompleted = () => {
+    for (const todo of completedTodos) {
+      deleteTodo(todo.id)
+    }
+  }
 
   return (
-    <div style={{ maxWidth: 600, margin: '0 auto', padding: 20 }}>
-      <h1>Kora Todo App</h1>
-
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault()
-          const form = e.currentTarget
-          const input = form.elements.namedItem('title') as HTMLInputElement
-          if (input.value.trim()) {
-            addTodo({ title: input.value.trim() })
-            input.value = ''
-          }
-        }}
-      >
-        <input name="title" placeholder="What needs to be done?" />
-        <button type="submit">Add</button>
+    <div className="app">
+      <div className="header">
+        <h1>My Tasks</h1>
+        <span className="local-badge">Local-first</span>
+      </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>
 
-      <ul>
-        {activeTodos.map((todo) => (
-          <li key={todo.id}>
-            <label>
-              <input
-                type="checkbox"
-                checked={!!todo.completed}
-                onChange={() => toggleTodo(todo.id, { completed: !todo.completed })}
-              />
-              {String(todo.title)}
-            </label>
-          </li>
-        ))}
-      </ul>
+      <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(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(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-basic/src/index.css

@@ -0,0 +1,281 @@
+*,
+*::before,
+*::after {
+  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;
+}
+
+body {
+  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;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+
+.header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.local-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: var(--color-surface);
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.stats {
+  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;
+}
+
+.stat-card .label {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.stat-card .value {
+  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); }
+
+.add-form {
+  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;
+}
+
+.add-form input:focus {
+  border-color: var(--color-primary);
+}
+
+.add-form input::placeholder {
+  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;
+}
+
+.add-form button:hover {
+  background: var(--color-primary-hover);
+}
+
+.add-form button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.filters {
+  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;
+}
+
+.filter-btn:hover {
+  background: var(--color-border-hover);
+  color: var(--color-text);
+}
+
+.filter-btn.active {
+  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);
+}
+
+.filter-btn:not(.active) .badge {
+  background: var(--color-border);
+}
+
+.todo-list {
+  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);
+}
+
+.todo-item: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;
+}
+
+.todo-item .toggle.checked {
+  border-color: var(--color-success);
+  background: var(--color-success);
+  color: white;
+}
+
+.todo-item .title {
+  flex: 1;
+}
+
+.todo-item .title.done {
+  text-decoration: line-through;
+  color: var(--color-text-muted);
+}
+
+.todo-item .time {
+  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;
+}
+
+.todo-item:hover .delete-btn {
+  opacity: 1;
+}
+
+.todo-item .delete-btn:hover {
+  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);
+}
+
+.footer {
+  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;
+}
+
+.footer button:hover {
+  color: var(--color-text);
+}
+
+.branding {
+  margin-top: 48px;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--color-text-dim);
+}

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

@@ -4,12 +4,14 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import schema from './schema'
 import { App } from './App'
+import './index.css'
 
 const app = createApp({
   schema,
   store: {
     workerUrl: new URL('./kora-worker.ts', import.meta.url),
   },
+  devtools: true,
 })
 
 createRoot(document.getElementById('root')!).render(

package/templates/react-basic/vite.config.ts

@@ -1,9 +1,39 @@
 import react from '@vitejs/plugin-react'
+import type { Plugin } from 'vite'
 import { defineConfig } from 'vite'
 
+/**
+ * Adds Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers
+ * required for SharedArrayBuffer. Without these headers, OPFS SAH Pool VFS
+ * cannot be used and SQLite WASM falls back to in-memory storage (no persistence).
+ */
+function crossOriginIsolation(): Plugin {
+  return {
+    name: 'cross-origin-isolation',
+    configureServer(server) {
+      server.middlewares.use((_req, res, next) => {
+        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
+        next()
+      })
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use((_req, res, next) => {
+        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
+        next()
+      })
+    },
+  }
+}
+
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), crossOriginIsolation()],
   optimizeDeps: {
     exclude: ['@sqlite.org/sqlite-wasm', '@korajs/store'],
+    include: ['yjs'],
+  },
+  resolve: {
+    dedupe: ['yjs'],
   },
 })

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

@@ -7,7 +7,7 @@ export default defineConfig({
 		sync: {
 			enabled: true,
 			port: 3001,
-			store: 'memory',
+			store: 'sqlite',
 		},
 		watch: {
 			enabled: true,

package/templates/react-sync/server.ts

@@ -1,6 +1,17 @@
-import { createKoraServer, MemoryServerStore } from '@korajs/server'
+import { createKoraServer, createSqliteServerStore } from '@korajs/server'
+
+// SQLite persists data to disk — survives server restarts
+const store = createSqliteServerStore({ filename: './kora-server.db' })
+
+// To use PostgreSQL instead:
+// 1. Install: pnpm add postgres
+// 2. Replace the store above with:
+//
+// import { createPostgresServerStore } from '@korajs/server'
+// const store = await createPostgresServerStore({
+//   connectionString: 'postgresql://user:password@localhost:5432/mydb',
+// })
 
-const store = new MemoryServerStore()
 const server = createKoraServer({
   store,
   port: 3001,