@kazzle/app 0.1.693

package/templates/ui-db-app/components/server/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{APP_SLUG}}-server",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "bun run index.ts",
+    "dev": "kazzle run -- bun --watch index.ts",
+    "typecheck": "tsc --noEmit --allowImportingTsExtensions",
+    "check": "bun run typecheck"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.0",
+    "hono": "^4.12.16",
+    "postgres": "^3.4.5"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.6",
+    "typescript": "^5.8.3"
+  }
+}

package/templates/ui-db-app/components/server/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["bun"]
+  },
+  "include": ["*.ts"]
+}

package/templates/ui-db-app/components/ui/index.html

@@ -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>{{APP_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/ui-db-app/components/ui/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "{{APP_SLUG}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "kazzle run -- vite",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "preview": "kazzle run -- vite preview",
+    "check": "bun run typecheck && bun run build"
+  },
+  "dependencies": {
+    "@kazzle/app": "{{KAZZLE_APP_VERSION}}",
+    "@vitejs/plugin-react": "^4.5.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^6.3.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.3"
+  }
+}

package/templates/ui-db-app/components/ui/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" rx="18" fill="#6366F1"/>
+  <path d="M19 33.5L28 42L46 22" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/templates/ui-db-app/components/ui/src/App.tsx

@@ -0,0 +1,221 @@
+import { FormEvent, useEffect, useMemo, useState } from 'react';
+import {
+  createCategory,
+  createTodo,
+  deleteCategory,
+  deleteTodo,
+  getCategories,
+  getTodos,
+  updateCategory,
+  updateTodo,
+} from './api';
+import type { Category, Todo } from './types';
+
+const DEFAULT_COLOR = '#6366f1';
+const COLORS = [DEFAULT_COLOR, '#0ea5e9', '#f97316', '#10b981', '#ec4899'];
+
+export function App() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
+  const [draft, setDraft] = useState('');
+  const [draftCategoryId, setDraftCategoryId] = useState<number | null>(null);
+  const [categoryName, setCategoryName] = useState('');
+  const [categoryColor, setCategoryColor] = useState<string>(DEFAULT_COLOR);
+  const [editingCategoryId, setEditingCategoryId] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectedCategory = useMemo(
+    () => categories.find(category => category.id === selectedCategoryId) ?? null,
+    [categories, selectedCategoryId],
+  );
+
+  const totalCount = useMemo(
+    () => categories.reduce((total, category) => total + category.todo_count, 0),
+    [categories],
+  );
+
+  async function load() {
+    const [nextCategories, nextTodos] = await Promise.all([
+      getCategories(),
+      getTodos(selectedCategoryId),
+    ]);
+    setCategories(nextCategories);
+    setTodos(nextTodos);
+  }
+
+  useEffect(() => {
+    load().catch(handleError);
+  }, [selectedCategoryId]);
+
+  function handleError(err: unknown) {
+    setError(err instanceof Error ? err.message : String(err));
+  }
+
+  async function onSubmit(event: FormEvent) {
+    event.preventDefault();
+    const title = draft.trim();
+    if (!title) return;
+    try {
+      await createTodo(title, selectedCategoryId ?? draftCategoryId);
+      setDraft('');
+      await load();
+    } catch (err) {
+      handleError(err);
+    }
+  }
+
+  async function onCategorySubmit(event: FormEvent) {
+    event.preventDefault();
+    const name = categoryName.trim();
+    if (!name) return;
+    try {
+      if (editingCategoryId !== null) {
+        await updateCategory(editingCategoryId, { name, color: categoryColor });
+      } else {
+        await createCategory(name, categoryColor);
+      }
+      setCategoryName('');
+      setCategoryColor(DEFAULT_COLOR);
+      setEditingCategoryId(null);
+      await load();
+    } catch (err) {
+      handleError(err);
+    }
+  }
+
+  function startEditCategory(category: Category) {
+    setEditingCategoryId(category.id);
+    setCategoryName(category.name);
+    setCategoryColor(category.color);
+  }
+
+  async function removeCategory(categoryId: number) {
+    try {
+      await deleteCategory(categoryId);
+      if (selectedCategoryId === categoryId) setSelectedCategoryId(null);
+      await load();
+    } catch (err) {
+      handleError(err);
+    }
+  }
+
+  return (
+    <main className="grid min-h-screen grid-cols-[280px_1fr]">
+      <aside className="flex flex-col gap-2 border-r border-border bg-surface p-8">
+        <p className="muted text-sm">{{APP_NAME}}</p>
+        <h1 className="mb-4">Categories</h1>
+
+        <button
+          className={`btn justify-start ${!selectedCategoryId ? 'btn-primary' : ''}`}
+          onClick={() => setSelectedCategoryId(null)}
+        >
+          <span className="size-2.5 rounded-full bg-fg" />
+          <span className="flex-1 text-left">All tasks</span>
+          <small className="muted">{totalCount}</small>
+        </button>
+
+        {categories.map(category => (
+          <div className="row gap-1.5" key={category.id}>
+            <button
+              className={`btn flex-1 justify-start ${selectedCategoryId === category.id ? 'btn-primary' : ''}`}
+              onClick={() => setSelectedCategoryId(category.id)}
+            >
+              <span className="size-2.5 rounded-full" style={{ background: category.color }} />
+              <span className="flex-1 text-left">{category.name}</span>
+              <small className="muted">{category.todo_count}</small>
+            </button>
+            <button className="btn px-2.5" onClick={() => startEditCategory(category)}>Edit</button>
+          </div>
+        ))}
+
+        <form className="stack mt-4 border-t border-border pt-4" onSubmit={onCategorySubmit}>
+          <input
+            className="input"
+            value={categoryName}
+            onChange={event => setCategoryName(event.target.value)}
+            placeholder={editingCategoryId ? 'Rename category' : 'New category'}
+          />
+          <div className="row">
+            {COLORS.map(color => (
+              <button
+                key={color}
+                type="button"
+                className={`size-6 rounded-full border-2 ${categoryColor === color ? 'border-fg' : 'border-transparent'}`}
+                style={{ background: color }}
+                onClick={() => setCategoryColor(color)}
+              />
+            ))}
+          </div>
+          <div className="row">
+            <button type="submit" className="btn btn-primary">{editingCategoryId ? 'Save' : 'Add category'}</button>
+            {editingCategoryId !== null ? (
+              <button type="button" className="btn" onClick={() => removeCategory(editingCategoryId)}>
+                Delete
+              </button>
+            ) : null}
+          </div>
+        </form>
+      </aside>
+
+      <section className="flex flex-col gap-6 p-12">
+        <header className="stack gap-1">
+          <p className="muted text-sm">{selectedCategory?.name ?? 'All categories'}</p>
+          <h2>{selectedCategory ? `${selectedCategory.name} tasks` : 'Today\'s tasks'}</h2>
+        </header>
+
+        <form className="row" onSubmit={onSubmit}>
+          <input
+            className="input flex-1"
+            value={draft}
+            onChange={event => setDraft(event.target.value)}
+            placeholder="Add a task..."
+          />
+          {!selectedCategoryId ? (
+            <select
+              className="input w-auto"
+              value={draftCategoryId ?? ''}
+              onChange={event => setDraftCategoryId(event.target.value ? Number(event.target.value) : null)}
+            >
+              <option value="">No category</option>
+              {categories.map(category => (
+                <option key={category.id} value={category.id}>{category.name}</option>
+              ))}
+            </select>
+          ) : null}
+          <button type="submit" className="btn btn-primary">Add</button>
+        </form>
+
+        {error ? <p className="text-danger">{error}</p> : null}
+
+        <div className="stack">
+          {todos.map(todo => (
+            <article
+              key={todo.id}
+              className={`card row ${todo.completed ? 'opacity-70' : ''}`}
+            >
+              <label className="row flex-1 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={todo.completed}
+                  onChange={() => updateTodo(todo.id, { completed: !todo.completed }).then(load).catch(handleError)}
+                />
+                <span className={todo.completed ? 'muted line-through' : ''}>{todo.title}</span>
+              </label>
+              {todo.category_name ? (
+                <span
+                  className="rounded-full px-2.5 py-1 text-xs text-accent-fg"
+                  style={{ background: todo.category_color ?? '#6366f1' }}
+                >
+                  {todo.category_name}
+                </span>
+              ) : null}
+              <button className="btn px-3 py-1.5" onClick={() => deleteTodo(todo.id).then(load).catch(handleError)}>Delete</button>
+            </article>
+          ))}
+          {todos.length === 0 ? <p className="muted">No tasks yet. Add one above.</p> : null}
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/ui-db-app/components/ui/src/api.ts

@@ -0,0 +1,79 @@
+/**
+ * Thin wrappers over the server's REST API.
+ *
+ * Pattern: one async function per endpoint. Each one builds the request,
+ * awaits the response, throws on non-2xx, and parses the JSON body. The UI
+ * imports these by name, so changing a URL or shape only ever touches one
+ * file.
+ *
+ * The `request` helper centralises the fetch + JSON + error-handling
+ * boilerplate so the individual functions stay one-liners. Add a header
+ * (auth tokens, etc.) here and every endpoint picks it up.
+ *
+ * Errors are surfaced as `Error` instances with the status code and body in
+ * the message — the App component catches them and shows the message in the
+ * UI. If you need structured error objects (with codes the UI can branch
+ * on), augment `request` to JSON-parse non-2xx bodies and throw a typed
+ * subclass.
+ */
+
+import type { Category, Todo } from './types';
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(path, {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...init?.headers,
+    },
+  });
+  if (!res.ok) {
+    throw new Error(`Request failed: ${res.status} ${await res.text()}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export function getCategories(): Promise<Category[]> {
+  return request<Category[]>('/categories');
+}
+
+export function createCategory(name: string, color: string): Promise<Category> {
+  return request<Category>('/categories', {
+    method: 'POST',
+    body: JSON.stringify({ name, color }),
+  });
+}
+
+export function updateCategory(id: number, data: Partial<Pick<Category, 'name' | 'color'>>): Promise<Category> {
+  return request<Category>(`/categories/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  });
+}
+
+export function deleteCategory(id: number): Promise<{ ok: true }> {
+  return request<{ ok: true }>(`/categories/${id}`, { method: 'DELETE' });
+}
+
+export function getTodos(categoryId: number | null): Promise<Todo[]> {
+  const query = categoryId ? `?category_id=${categoryId}` : '';
+  return request<Todo[]>(`/todos${query}`);
+}
+
+export function createTodo(title: string, categoryId: number | null): Promise<Todo> {
+  return request<Todo>('/todos', {
+    method: 'POST',
+    body: JSON.stringify({ title, category_id: categoryId }),
+  });
+}
+
+export function updateTodo(id: number, data: Partial<Pick<Todo, 'title' | 'completed' | 'category_id'>>): Promise<Todo> {
+  return request<Todo>(`/todos/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  });
+}
+
+export function deleteTodo(id: number): Promise<{ ok: true }> {
+  return request<{ ok: true }>(`/todos/${id}`, { method: 'DELETE' });
+}

package/templates/ui-db-app/components/ui/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles/theme.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/ui-db-app/components/ui/src/styles/theme.css

@@ -0,0 +1,181 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ *  Kazzle app theme — the ONE styling entry point for this app.
+ *
+ *  This file is the design system. It is imported once (in `main.tsx`) and
+ *  gives you three things, in order:
+ *
+ *    1. Tailwind v4            — every utility class (`flex`, `gap-4`,
+ *                                `rounded-xl`, `text-zinc-500`, …) works in
+ *                                your JSX. No config file, no PostCSS setup.
+ *    2. Design tokens (@theme) — colors, radius, fonts as CSS variables. Edit
+ *                                these to re-skin the whole app at once.
+ *    3. Primitives (@layer)    — a few ready-made classes (`.btn`, `.card`,
+ *                                `.input`, `.field`, `.page`, `.stack`,
+ *                                `.row`) so common UI looks good with zero
+ *                                effort.
+ *
+ *  HOW TO STYLE — pick whichever is easier, mix freely:
+ *    • Tailwind utilities in `className` for one-off layout/spacing.
+ *    • A primitive class (`.btn`, `.card`) for the common building blocks.
+ *
+ *  WHY IT'S BUILT THIS WAY: styles live in the markup (utilities) or in named
+ *  primitives here — never in a separate per-screen stylesheet keyed to class
+ *  names you have to keep in sync. Rewriting a component can't silently strip
+ *  its styling, because the styling travels with the elements.
+ *
+ *  TO EXTEND: add new design tokens under `@theme`, and add new reusable
+ *  building blocks under `@layer components`. Keep app-specific one-offs as
+ *  inline Tailwind utilities in the component instead of adding a class here.
+ * ───────────────────────────────────────────────────────────────────────── */
+
+@import "tailwindcss";
+
+/* ── Design tokens ──────────────────────────────────────────────────────────
+ * Exposed to Tailwind as `bg-surface`, `text-fg`, `text-muted`,
+ * `bg-accent`, `rounded-app`, etc. Change a value here and every utility and
+ * primitive that references it updates at once. */
+@theme {
+  --color-bg: #0b0f1a;
+  --color-surface: #131a2a;
+  --color-surface-raised: #1b2438;
+  --color-fg: #e8edf7;
+  --color-muted: #94a3b8;
+  --color-border: rgba(148, 163, 184, 0.18);
+  --color-accent: #6366f1;
+  --color-accent-hover: #4f46e5;
+  --color-accent-fg: #ffffff;
+  --color-danger: #f87171;
+
+  --radius-app: 0.875rem;
+
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* ── Base ────────────────────────────────────────────────────────────────────
+ * Sensible document defaults so even unstyled markup reads well. */
+@layer base {
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1 {
+    font-size: 1.875rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+/* ── Primitives ──────────────────────────────────────────────────────────────
+ * Reusable building blocks. Use them directly (`<button class="btn btn-primary">`)
+ * or layer Tailwind utilities on top. Add new ones here when a pattern repeats. */
+@layer components {
+  /* Page wrapper — centers content with comfortable gutters. */
+  .page {
+    width: min(100% - 2rem, 48rem);
+    margin-inline: auto;
+    padding-block: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  /* Vertical / horizontal stacks. */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  /* Card surface. */
+  .card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-app);
+    padding: 1.25rem;
+  }
+
+  /* Buttons. `.btn` is the neutral base; add `.btn-primary` for the accent. */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1rem;
+    border-radius: var(--radius-app);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-fg);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+  }
+  .btn:hover {
+    background: color-mix(in srgb, var(--color-surface-raised) 80%, white);
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .btn-primary {
+    background: var(--color-accent);
+    border-color: transparent;
+    color: var(--color-accent-fg);
+  }
+  .btn-primary:hover {
+    background: var(--color-accent-hover);
+  }
+
+  /* Text input / select. */
+  .input {
+    width: 100%;
+    min-width: 0;
+    padding: 0.625rem 0.875rem;
+    border-radius: var(--radius-app);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface-raised);
+    color: var(--color-fg);
+    font: inherit;
+    outline: none;
+  }
+  .input:focus {
+    border-color: var(--color-accent);
+  }
+
+  /* Labelled field: <label class="field"><span>Label</span><input class="input"/></label> */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--color-muted);
+  }
+
+  /* Muted helper / secondary text. */
+  .muted {
+    color: var(--color-muted);
+  }
+}

package/templates/ui-db-app/components/ui/src/types.ts

@@ -0,0 +1,17 @@
+export interface Category {
+  id: number;
+  name: string;
+  color: string;
+  todo_count: number;
+}
+
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  category_id: number | null;
+  category_name: string | null;
+  category_color: string | null;
+  created_at: string;
+  updated_at: string;
+}

package/templates/ui-db-app/components/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/ui-db-app/components/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": []
+}

package/templates/ui-db-app/components/ui/vite.config.ts

@@ -0,0 +1,19 @@
+/**
+ * Vite config for the UI component.
+ *
+ * Kazzle preview/runtime wiring (HOST/PORT binding, strictPort, allowedHosts,
+ * backend proxy) lives in @kazzle/app/vite — the ONE shared place that must
+ * never be reinvented. This template declares a backend `server` component, so
+ * we pass its name plus the relative routes the browser calls; the helper
+ * proxies them to the sibling component and refuses to serve until Kazzle has
+ * injected the backend URL. Add new backend routes to `proxyPaths`.
+ */
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { kazzleAppVite } from '@kazzle/app/vite';
+
+export default defineConfig(({ command }) => ({
+  plugins: [react(), tailwindcss()],
+  ...kazzleAppVite(command, { apiComponent: 'server', proxyPaths: ['/categories', '/todos'] }),
+}));

package/templates/ui-db-app/kazzle.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@kazzle/app';
+
+export default defineConfig({
+  icon: 'components/ui/public/favicon.svg',
+  components: [
+    { name: 'ui', type: 'ui', path: './components/ui' },
+    { name: 'server', type: 'process', path: './components/server/index.ts', runtime: { dev: 'bun run dev', run: 'bun run start' } },
+  ],
+});

package/templates/ui-db-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "{{APP_SLUG}}",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "workspaces": [
+    "components/*"
+  ],
+  "scripts": {
+    "dev": "bun run --cwd components/ui dev",
+    "start": "bun run --cwd components/server start",
+    "check": "bun run --filter='./components/*' check"
+  },
+  "dependencies": {
+    "@kazzle/app": "{{KAZZLE_APP_VERSION}}"
+  }
+}