model User {
  id: ID
  name: String
  email: Email
}

api users: User

page Users "/" {
  data users = api.users.list()
  state name = ""
  state email = ""
  state error = ""
  fn add() {
    if !email.includes("@") {
      error = "Email inválido"
      return
    }
    await api.users.create({ name, email })
    name = ""
    email = ""
    error = ""
  }

  column gap=2 {
    input name placeholder="Nombre"
    input email placeholder="Email"
    button "Agregar" primary -> add()
    if error != "" {
      text error bold
    }
    for u in users {
      row gap=2 {
        text `${u.name} (${u.email})`
        button "Borrar" small -> api.users.remove(u.id)
      }
    }
  }
}

// ---- App.tsx ----
import { useEffect, useState } from "react";

type User = { id: string; name: string; email: string };

export default function App() {
  const [users, setUsers] = useState<User[]>([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const load = () => fetch("/api/users").then((r) => r.json()).then(setUsers);
  useEffect(() => { load(); }, []);

  async function add() {
    if (!email.includes("@")) {
      setError("Email inválido");
      return;
    }
    await fetch("/api/users", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ name, email }) });
    setName("");
    setEmail("");
    setError("");
    load();
  }

  async function remove(id: string) {
    await fetch(`/api/users/${id}`, { method: "DELETE" });
    load();
  }

  return (
    <div className="flex flex-col gap-2">
      <input placeholder="Nombre" value={name} onChange={(e) => setName(e.target.value)} />
      <input placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={add}>Agregar</button>
      {error && <span>{error}</span>}
      {users.map((u) => (
        <div key={u.id} className="flex gap-2">
          <span>{u.name} ({u.email})</span>
          <button onClick={() => remove(u.id)}>Borrar</button>
        </div>
      ))}
    </div>
  );
}

// ---- server.ts ----
import { randomUUID } from "node:crypto";
import { createServer } from "node:http";

type User = { id: string; name: string; email: string };
const users: User[] = [];

createServer(async (req, res) => {
  const url = new URL(req.url ?? "/", "http://localhost");
  const send = (status: number, body?: unknown) => {
    res.writeHead(status, { "content-type": "application/json" });
    res.end(body === undefined ? "" : JSON.stringify(body));
  };
  if (url.pathname === "/api/users" && req.method === "GET") return send(200, users);
  if (url.pathname === "/api/users" && req.method === "POST") {
    let raw = "";
    for await (const chunk of req) raw += chunk;
    const { name, email } = JSON.parse(raw);
    if (typeof name !== "string" || typeof email !== "string" || !email.includes("@")) return send(400, { error: "Email inválido" });
    const user = { id: randomUUID(), name, email };
    users.push(user);
    return send(201, user);
  }
  const m = url.pathname.match(/^\/api\/users\/(.+)$/);
  if (m && req.method === "DELETE") {
    const i = users.findIndex((u) => u.id === m[1]);
    if (i >= 0) users.splice(i, 1);
    return send(204);
  }
  send(404, { error: "not found" });
}).listen(Number(process.env.PORT));