@kazzle/app 0.1.927 → 0.1.930

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kazzle/app",
-  "version": "0.1.927",
+  "version": "0.1.930",
   "description": "Contracts, tool helpers, Vite helper, and templates for building Kazzle apps.",
   "license": "UNLICENSED",
   "repository": {
@@ -24,6 +24,22 @@
       "types": "./dist/client.d.ts",
       "import": "./dist/client.js"
     },
+    "./connections": {
+      "types": "./dist/connections.d.ts",
+      "import": "./dist/connections.js"
+    },
+    "./auth": {
+      "types": "./dist/auth.d.ts",
+      "import": "./dist/auth.js"
+    },
+    "./auth/schema": {
+      "types": "./dist/auth-schema.d.ts",
+      "import": "./dist/auth-schema.js"
+    },
+    "./auth/react": {
+      "types": "./dist/auth-react.d.ts",
+      "import": "./dist/auth-react.js"
+    },
     "./vite": {
       "types": "./dist/vite.d.ts",
       "import": "./dist/vite.js"
@@ -32,6 +48,10 @@
       "types": "./dist/pwa.d.ts",
       "import": "./dist/pwa.js"
     },
+    "./sdk": {
+      "types": "./dist/sdk.d.ts",
+      "import": "./dist/sdk.js"
+    },
     "./templates": {
       "types": "./dist/templates.d.ts",
       "import": "./dist/templates.js"
@@ -61,10 +81,26 @@
     "workbox-window": "^7.4.1"
   },
   "peerDependencies": {
+    "kazzle": "^0.1.0",
+    "better-auth": ">=1.6.0 <1.7.0",
+    "pg": "^8.11.0",
+    "react": ">=18",
     "vite": ">=5",
     "zod": "^3 || ^4"
   },
   "peerDependenciesMeta": {
+    "kazzle": {
+      "optional": true
+    },
+    "better-auth": {
+      "optional": true
+    },
+    "pg": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
     "vite": {
       "optional": true
     },
@@ -73,7 +109,13 @@
     }
   },
   "devDependencies": {
+    "kazzle": "workspace:*",
     "@types/node": "^25.1.0",
+    "@types/pg": "^8.11.0",
+    "@types/react": "^19.0.0",
+    "better-auth": ">=1.6.0 <1.7.0",
+    "pg": "^8.11.0",
+    "react": "^19.0.0",
     "typescript": "7.0.2",
     "vite": "^6.3.5",
     "zod": "^4.3.6"

package/templates/login-app/KAZZLE.md

@@ -0,0 +1,18 @@
+# Kazzle template context
+
+This app was created from the `login` template. It already includes end-user
+login (Google via Kazzle), a React UI, a Hono process API, and Postgres wiring.
+
+Template-owned setup:
+- `kazzle.config.ts` declares the UI and server components and `appLogin: true`. Database env vars are injected by `app.create`.
+- `components/server/index.ts` mounts the login flow (`createKazzleAuth` + `mountKazzleAuth` from `@kazzle/app/auth`) and owns the per-user notes API.
+- `components/ui/src/App.tsx` renders login state via `useAppUser()` / `signInWithKazzle()` / `signOutOfApp()` from `@kazzle/app/auth/react`.
+- The database schema (auth tables + notes) is bootstrapped by template setup before the app is handed back.
+
+Login rules — these keep sign-in working:
+- Auth is SDK code. Never write session/cookie/callback logic, never call the Kazzle broker or Google directly, never edit `/api/auth` handling beyond `mountKazzleAuth`.
+- The `auth` Postgres schema (`auth."user"`, `auth."session"`, `auth."account"`, `auth."verification"`) is owned by the SDK. Never ALTER those tables. Per-user data goes in your own public-schema tables with `user_id TEXT REFERENCES auth."user"(id) ON DELETE CASCADE` — see `notes`.
+- Server routes that touch user data start with `await kazzleAuth.getAppUser(c.req.raw)`; null → return 401.
+- New backend routes the browser calls must be added to `proxyPaths` in `components/ui/vite.config.ts`. `/api/auth` must stay in that list.
+
+Do not rerun `db.connect`, rewrite manifest env refs, recreate server boilerplate, or reinstall dependencies as setup repair after `app.create` reports template setup complete. Change these files only when the user asks for behavior beyond this template.

package/templates/login-app/components/server/index.ts

@@ -0,0 +1,93 @@
+/**
+ * {{APP_NAME}} — server component for the login template.
+ *
+ * End-user login via Kazzle (Google today) plus a per-user notes API that
+ * shows the pattern for user-owned data:
+ *
+ *   - Auth is SDK code: `createKazzleAuth()` + `mountKazzleAuth()` wire the
+ *     whole login flow. Do NOT write auth logic (sessions, cookies, callbacks)
+ *     by hand — extend around it.
+ *   - Users live in this app's own database, in the `auth` Postgres schema
+ *     (auth."user", auth."session", …). NEVER modify those tables. Per-user
+ *     app data goes in your own public-schema tables with a
+ *     `user_id TEXT REFERENCES auth."user"(id)` column — like `notes` below.
+ *   - Every route that touches user data starts with `getAppUser(request)`;
+ *     null means logged out → 401. The browser sends the session cookie
+ *     automatically (same-origin /api/auth + API paths via the UI proxy).
+ */
+
+import { serve } from '@hono/node-server';
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import postgres from 'postgres';
+import { createKazzleAuth, mountKazzleAuth } from '@kazzle/app/auth';
+
+const databaseUrl = process.env.DATABASE_URL;
+if (!databaseUrl) throw new Error('DATABASE_URL is required');
+
+const sql = postgres(databaseUrl);
+const kazzleAuth = createKazzleAuth();
+const app = new Hono();
+
+app.use('*', cors());
+app.get('/health', (c) => c.json({ ok: true }));
+
+// All of /api/auth/* — sign-in, callback, session, sign-out. SDK-owned.
+mountKazzleAuth(app, kazzleAuth);
+
+// ── Who am I ─────────────────────────────────────────────────────────────
+
+app.get('/me', async (c) => {
+  const user = await kazzleAuth.getAppUser(c.req.raw);
+  if (!user) return c.json({ error: 'Not signed in' }, 401);
+  return c.json(user);
+});
+
+// ── Notes (per-user data pattern) ────────────────────────────────────────
+
+app.get('/notes', async (c) => {
+  const user = await kazzleAuth.getAppUser(c.req.raw);
+  if (!user) return c.json({ error: 'Not signed in' }, 401);
+  const rows = await sql`
+    SELECT id, body, created_at
+    FROM notes
+    WHERE user_id = ${user.id}
+    ORDER BY created_at DESC
+  `;
+  return c.json(rows);
+});
+
+app.post('/notes', async (c) => {
+  const user = await kazzleAuth.getAppUser(c.req.raw);
+  if (!user) return c.json({ error: 'Not signed in' }, 401);
+  const { body } = await c.req.json<{ body?: string }>();
+  const text = body?.trim();
+  if (!text) return c.json({ error: 'Note text is required' }, 400);
+  const [note] = await sql`
+    INSERT INTO notes (user_id, body)
+    VALUES (${user.id}, ${text})
+    RETURNING id, body, created_at
+  `;
+  return c.json(note, 201);
+});
+
+app.delete('/notes/:id', async (c) => {
+  const user = await kazzleAuth.getAppUser(c.req.raw);
+  if (!user) return c.json({ error: 'Not signed in' }, 401);
+  const id = Number(c.req.param('id'));
+  if (!Number.isFinite(id)) return c.json({ error: 'Invalid note id' }, 400);
+  // WHERE user_id keeps one user from deleting another's note by guessing ids.
+  await sql`DELETE FROM notes WHERE id = ${id} AND user_id = ${user.id}`;
+  return c.json({ ok: true });
+});
+
+// ─────────────────────────────────────────────────────────────────────────
+//  DO NOT CHANGE THE NEXT 4 LINES.  DO NOT ADD FALLBACKS.  DO NOT HARDCODE.
+//  PORT and HOST are injected by `kazzle run`. Missing values must throw.
+// ─────────────────────────────────────────────────────────────────────────
+if (!process.env.PORT || !process.env.HOST) {
+  throw new Error('PORT and HOST must be set by "kazzle run" — never hardcode them.');
+}
+const port = Number(process.env.PORT);
+const hostname = process.env.HOST;
+serve({ fetch: app.fetch, port, hostname });

package/templates/login-app/components/server/package.json

@@ -0,0 +1,25 @@
+{
+  "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",
+    "@kazzle/app": "{{KAZZLE_APP_VERSION}}",
+    "better-auth": ">=1.6.0 <1.7.0",
+    "hono": "^4.12.16",
+    "pg": "^8.11.0",
+    "postgres": "^3.4.5"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.6",
+    "@types/pg": "^8.11.0",
+    "typescript": "7.0.2"
+  }
+}

package/templates/login-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/login-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/login-app/components/ui/package.json

@@ -0,0 +1,29 @@
+{
+  "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",
+    "better-auth": ">=1.6.0 <1.7.0",
+    "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": "7.0.2"
+  }
+}

package/templates/login-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/login-app/components/ui/src/App.tsx

@@ -0,0 +1,107 @@
+/**
+ * {{APP_NAME}} — login template UI.
+ *
+ * Two states, driven entirely by `useAppUser()` from @kazzle/app/auth/react:
+ *   logged out → a login card with one "Continue with Google" button
+ *   logged in  → the app (per-user notes), user chip, sign out
+ *
+ * All auth is SDK code: `signInWithKazzle()` starts the flow,
+ * `signOutOfApp()` ends the session, `useAppUser()` is reactive. There is no
+ * auth logic to write in this file — build the app around the user object.
+ */
+
+import { useEffect, useState, type FormEvent } from 'react';
+import { signInWithKazzle, signOutOfApp, useAppUser, useAppUserPending } from '@kazzle/app/auth/react';
+import { createNote, deleteNote, getNotes, type Note } from './api';
+
+export function App() {
+  const user = useAppUser();
+  const pending = useAppUserPending();
+
+  if (pending) return <div className="page" />;
+  if (!user) return <LoginScreen />;
+  return <NotesScreen name={user.name ?? user.email} image={user.image} />;
+}
+
+function LoginScreen() {
+  return (
+    <div className="page items-center justify-center">
+      <div className="card stack max-w-sm w-full items-center text-center">
+        <h1 className="text-2xl font-semibold">{'{{APP_NAME}}'}</h1>
+        <p className="text-muted">Sign in to keep your notes in one place.</p>
+        <button className="btn w-full" onClick={() => void signInWithKazzle('google')}>
+          Continue with Google
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function NotesScreen({ name, image }: { name: string; image: string | null }) {
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [draft, setDraft] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getNotes().then(setNotes).catch((err: Error) => setError(err.message));
+  }, []);
+
+  async function addNote(event: FormEvent) {
+    event.preventDefault();
+    const body = draft.trim();
+    if (!body) return;
+    try {
+      const note = await createNote(body);
+      setNotes((current) => [note, ...current]);
+      setDraft('');
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }
+
+  async function removeNote(id: number) {
+    try {
+      await deleteNote(id);
+      setNotes((current) => current.filter((note) => note.id !== id));
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }
+
+  return (
+    <div className="page">
+      <header className="row justify-between">
+        <h1 className="text-xl font-semibold">{'{{APP_NAME}}'}</h1>
+        <div className="row">
+          {image && <img src={image} alt="" className="size-8 rounded-full" referrerPolicy="no-referrer" />}
+          <span className="text-muted">{name}</span>
+          <button className="btn" onClick={() => void signOutOfApp().then(() => window.location.reload())}>
+            Sign out
+          </button>
+        </div>
+      </header>
+
+      <form className="row" onSubmit={addNote}>
+        <input
+          className="input flex-1"
+          placeholder="Write a note…"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+        <button className="btn" type="submit">Add</button>
+      </form>
+
+      {error && <p className="text-red-400">{error}</p>}
+
+      <div className="stack">
+        {notes.map((note) => (
+          <div key={note.id} className="card row justify-between">
+            <span>{note.body}</span>
+            <button className="btn" onClick={() => void removeNote(note.id)}>Delete</button>
+          </div>
+        ))}
+        {notes.length === 0 && !error && <p className="text-muted">No notes yet — your notes are only visible to you.</p>}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Thin wrappers over the server's REST API. The browser sends the session
+ * cookie automatically — no auth headers to add. A 401 means logged out; the
+ * App component treats that as "show the login screen".
+ */
+
+export interface Note {
+  id: number;
+  body: string;
+  created_at: string;
+}
+
+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 getNotes(): Promise<Note[]> {
+  return request<Note[]>('/notes');
+}
+
+export function createNote(body: string): Promise<Note> {
+  return request<Note>('/notes', { method: 'POST', body: JSON.stringify({ body }) });
+}
+
+export function deleteNote(id: number): Promise<{ ok: boolean }> {
+  return request<{ ok: boolean }>(`/notes/${id}`, { method: 'DELETE' });
+}

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

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

package/templates/login-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/login-app/components/ui/src/vite-env.d.ts

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

package/templates/login-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": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": []
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Vite config for the UI component.
+ *
+ * Kazzle owns HOST/PORT (`kazzleAppVite`) and production PWA (`kazzleAppPwa`)
+ * in `@kazzle/app/vite`. This template declares a backend `server` component;
+ * we pass its name plus the relative routes the browser calls. `/api/auth` is
+ * the login flow — it MUST stay proxied so auth cookies are same-origin. Add
+ * new backend routes to `proxyPaths`.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { kazzleAppVite, kazzleAppPwa } from '@kazzle/app/vite';
+
+export default defineConfig(({ command }) => ({
+  plugins: [react(), tailwindcss(), ...kazzleAppPwa()],
+  ...kazzleAppVite(command, { apiComponent: 'server', proxyPaths: ['/api/auth', '/me', '/notes'] }),
+}));