hightjs 0.3.5 → 0.4.0

package/example/src/web/components/Home.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import {useSession} from "hightjs/auth/react"
+import { Link } from "hightjs/client";
+export default function Home() {
+    const { data: session, status, signOut } = useSession();
+
+
+    return (
+        <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
+            <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
+            <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start z-10">
+                <div className="flex items-center gap-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500"><path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path></svg>
+                    <h1 className="text-3xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
+                </div>
+
+                <div className="flex flex-col items-center gap-4 self-center">
+                    {status === 'loading' && <p>Carregando...</p>}
+                    {status === 'authenticated' && session?.user && (
+                        <>
+                            <p className="text-lg">Você está logado como amoraaaa <span className="font-bold text-purple-400">{session.user.name}</span>!</p>
+                            <button
+                                onClick={() => signOut({callbackUrl: '/'})}
+                                className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
+                            >
+                                Sair
+                            </button>
+
+                        </>
+                    )}
+                    {status === 'unauthenticated' && (
+                        <Link
+                            href="/login"
+                            className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
+                        >
+                            Login
+                        </Link>
+                    )}
+                </div>
+
+                <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left text-gray-400">
+                    <li className="mb-2 tracking-[-.01em]">
+                        Comece editando{" "}
+                        <code className="bg-gray-800 border border-gray-700 font-mono font-semibold px-1 py-0.5 rounded text-purple-400">
+                            src/web/routes/index.tsx
+                        </code>
+                        .
+                    </li>
+                    <li className="tracking-[-.01em]">
+                        Salve e veja suas mudanças instantaneamente.
+                    </li>
+                </ol>
+
+                <div className="flex gap-4 items-center flex-col sm:flex-row">
+                    <a
+                        className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
+                        href="#"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="lucide lucide-rocket"
+                        >
+                            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.33-.04-3.86l1.8-1.8c.44-.44.86-.92 1.22-1.44l-2.06-2.06c-.52.36-1 .78-1.44 1.22l-1.8-1.8c-1.53.74-3.02.73-3.86-.04Z" />
+                            <path d="m12 15 5-5" />
+                            <path d="M9 3h6v6h-6Z" />
+                            <path d="M19.5 16.5c1.5-1.26 2-5 2-5s-3.74.5-5 2c-.71.84-.7 2.33.04 3.86l-1.8 1.8c-.44.44-.86.92-1.22 1.44l2.06 2.06c.52-.36 1-.78 1.44-1.22l1.8 1.8c1.53-.74 3.02-.73 3.86.04Z" />
+                        </svg>
+                        Fazer Deploy
+                    </a>
+                    <a
+                        className="rounded-full border border-solid border-white/20 transition-colors flex items-center justify-center hover:bg-white/10 hover:border-white/30 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px] text-gray-300"
+                        href="#"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Leia a documentação
+                    </a>
+                </div>
+            </main>
+            <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center z-10">
+                <a
+                    className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
+                    href="#"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <img
+                        aria-hidden
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2stb3BlbiI+PHBhdGggZD0iTTIgM3YxNGEyIDIgMCAwIDAgMiAyaDE2YTIgMiAwIDAgMCAyLTJWM20tOCAxOGExIDQgMCAwIDEtMy44LTJsMS42LTEuNmExIDQgMCAwIDEgMy44IDJ6bTggMGE0IDQgMCAwIDAgMy44LTJsLTEuNi0xLjZhNCA0IDAgMCAwLTMuOCAyeiIvPjwvc3ZnPg=="
+                        alt="Ícone de arquivo"
+                        width={16}
+                        height={16}
+                    />
+                    Aprenda
+                </a>
+                <a
+                    className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
+                    href="#"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <img
+                        aria-hidden
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxheW91dC10ZW1wbGF0ZSI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjE0IiByeD0iMiIgcnk9IjIiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIxNCIgeT0iMTQiIHJ4PSIyIiByeT0iMiIvPjwvc3ZnPg=="
+                        alt="Ícone de janela"
+                        width={16}
+                        height={16}
+                    />
+                    Exemplos
+                </a>
+                <a
+                    className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
+                    href="#"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <img
+                        aria-hidden
+                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsb2JlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAyYTE0LjUgMTQuNSAwIDAgMCAwIDIwIDE0LjUgMTQuNSAwIDAgMCAwLTIweiIvPjxwYXRoIGQ9Ik0yIDEySDEybTEwIDBIMTIiLz48L3N2Zz4="
+                        alt="Ícone de globo"
+                        width={16}
+                        height={16}
+                    />
+                    Ir para hightjs.dev →
+                </a>
+            </footer>
+        </div>
+    );
+}
+

package/example/src/web/components/LoginPage.tsx

@@ -0,0 +1,149 @@
+import React, {useState} from "react";
+import {useSession} from "hightjs/auth/react";
+import {router} from "hightjs/client";
+export default function LoginPage() {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const {signIn} = useSession();
+
+    const [error, setError] = useState<string | null>(null);
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            const result = await signIn('credentials', {
+                redirect: false,
+                username: username,
+                password: password,
+                callbackUrl: '/'
+            });
+            console.log(result)
+            if (!result || result.error) {
+                setError('Credenciais inválidas. Verifique seus dados e senha.');
+                setIsLoading(false);
+                return;
+            }
+            router.push("/")
+
+        } catch (err) {
+            setError('Ocorreu um erro inesperado. Tente novamente.');
+            setIsLoading(false);
+        }
+
+    };
+
+    return (
+        <div className="font-sans min-h-screen flex items-center justify-center p-8 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
+            {/* Background gradient */}
+            <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
+
+            {/* Additional ambient lights */}
+            <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -z-10"></div>
+            <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -z-10"></div>
+
+            {/* Login Container */}
+            <div className="w-full max-w-md">
+                {/* Header */}
+                <div className="text-center mb-8">
+                    <div className="flex items-center justify-center gap-3 mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500">
+                            <path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path>
+                        </svg>
+                        <h1 className="text-2xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
+                    </div>
+                    <h2 className="text-xl font-medium text-gray-300 mb-2">Bem-vindo de volta</h2>
+                    <p className="text-sm text-gray-400">Faça login em sua conta</p>
+                </div>
+
+                {/* Glass Login Form */}
+                <div className="relative">
+                    {/* Glass background */}
+                    <div className="absolute inset-0 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"></div>
+
+                    {/* error */}
+                    {error && (
+                        <div className="relative p-4 mb-4 text-sm text-red-800 bg-red-200 rounded-lg" role="alert">
+                            {error}
+                        </div>
+                    )}
+
+                    {/* Form content */}
+                    <form onSubmit={handleLogin} className="relative p-8 space-y-6">
+                        {/* Email field */}
+                        <div className="space-y-2">
+                            <label htmlFor="email" className="text-sm font-medium text-gray-300">
+                                Usuário
+                            </label>
+                            <input
+                                id="username"
+                                type="username"
+                                value={username}
+                                onChange={(e) => setUsername(e.target.value)}
+                                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
+                                required
+                            />
+                        </div>
+
+                        {/* Password field */}
+                        <div className="space-y-2">
+                            <label htmlFor="password" className="text-sm font-medium text-gray-300">
+                                Senha
+                            </label>
+                            <input
+                                id="password"
+                                type="password"
+                                placeholder="••••••••"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
+                                required
+                            />
+                        </div>
+
+                        {/* Remember me and forgot password */}
+                        <div className="flex items-center justify-between text-sm">
+                            <label className="flex items-center text-gray-400 cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    className="mr-2 rounded border-white/20 bg-white/5 text-purple-500 focus:ring-purple-500/20"
+                                />
+                                Lembrar de mim
+                            </label>
+                            <a href="#" className="text-purple-400 hover:text-purple-300 transition-colors hover:underline">
+                                Esqueceu a senha?
+                            </a>
+                        </div>
+
+                        {/* Login button */}
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="w-full bg-purple-600 hover:bg-purple-500 text-white font-medium py-3 px-4 rounded-xl transition-all duration-300 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)] disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500/20"
+                        >
+                            {isLoading ? (
+                                <div className="flex items-center justify-center gap-2">
+                                    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                    Entrando...
+                                </div>
+                            ) : (
+                                'Entrar'
+                            )}
+                        </button>
+
+
+
+
+                    </form>
+                </div>
+
+            </div>
+        </div>
+    );
+}

package/example/src/web/routes/index.tsx

@@ -1,145 +1,5 @@
 import {RouteConfig} from "hightjs/client";
-
-import React from "react";
-import {useSession} from "hightjs/auth/react"
-import { Link } from "hightjs/client";
-
-function Home() {
-    const { data: session, status, signOut } = useSession();
-
-
-    return (
-        <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
-            <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
-            <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start z-10">
-                <div className="flex items-center gap-4">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500"><path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path></svg>
-                    <h1 className="text-3xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
-                </div>
-
-                <div className="flex flex-col items-center gap-4 self-center">
-                    {status === 'loading' && <p>Carregando...</p>}
-                    {status === 'authenticated' && session?.user && (
-                        <>
-                            <p className="text-lg">Você está logado como <span className="font-bold text-purple-400">{session.user.name}</span>!</p>
-                            <button
-                                onClick={() => signOut({callbackUrl: '/'})}
-                                className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
-                            >
-                                Sair
-                            </button>
-
-                        </>
-                    )}
-                    {status === 'unauthenticated' && (
-                        <Link
-                            href="/login"
-                            className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
-                        >
-                            Login
-                        </Link>
-                    )}
-                </div>
-
-                <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left text-gray-400">
-                    <li className="mb-2 tracking-[-.01em]">
-                        Comece editando{" "}
-                        <code className="bg-gray-800 border border-gray-700 font-mono font-semibold px-1 py-0.5 rounded text-purple-400">
-                            src/web/routes/index.tsx
-                        </code>
-                        .
-                    </li>
-                    <li className="tracking-[-.01em]">
-                        Salve e veja suas mudanças instantaneamente.
-                    </li>
-                </ol>
-
-                <div className="flex gap-4 items-center flex-col sm:flex-row">
-                    <a
-                        className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
-                        href="#"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="20"
-                            height="20"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="lucide lucide-rocket"
-                        >
-                            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.33-.04-3.86l1.8-1.8c.44-.44.86-.92 1.22-1.44l-2.06-2.06c-.52.36-1 .78-1.44 1.22l-1.8-1.8c-1.53.74-3.02.73-3.86-.04Z" />
-                            <path d="m12 15 5-5" />
-                            <path d="M9 3h6v6h-6Z" />
-                            <path d="M19.5 16.5c1.5-1.26 2-5 2-5s-3.74.5-5 2c-.71.84-.7 2.33.04 3.86l-1.8 1.8c-.44.44-.86.92-1.22 1.44l2.06 2.06c.52-.36 1-.78 1.44-1.22l1.8 1.8c1.53-.74 3.02-.73 3.86.04Z" />
-                        </svg>
-                        Fazer Deploy
-                    </a>
-                    <a
-                        className="rounded-full border border-solid border-white/20 transition-colors flex items-center justify-center hover:bg-white/10 hover:border-white/30 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px] text-gray-300"
-                        href="#"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Leia a documentação
-                    </a>
-                </div>
-            </main>
-            <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center z-10">
-                <a
-                    className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
-                    href="#"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <img
-                        aria-hidden
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2stb3BlbiI+PHBhdGggZD0iTTIgM3YxNGEyIDIgMCAwIDAgMiAyaDE2YTIgMiAwIDAgMCAyLTJWM20tOCAxOGExIDQgMCAwIDEtMy44LTJsMS42LTEuNmExIDQgMCAwIDEgMy44IDJ6bTggMGE0IDQgMCAwIDAgMy44LTJsLTEuNi0xLjZhNCA0IDAgMCAwLTMuOCAyeiIvPjwvc3ZnPg=="
-                        alt="Ícone de arquivo"
-                        width={16}
-                        height={16}
-                    />
-                    Aprenda
-                </a>
-                <a
-                    className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
-                    href="#"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <img
-                        aria-hidden
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxheW91dC10ZW1wbGF0ZSI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjE0IiByeD0iMiIgcnk9IjIiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIxNCIgeT0iMTQiIHJ4PSIyIiByeT0iMiIvPjwvc3ZnPg=="
-                        alt="Ícone de janela"
-                        width={16}
-                        height={16}
-                    />
-                    Exemplos
-                </a>
-                <a
-                    className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
-                    href="#"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <img
-                        aria-hidden
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsb2JlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAyYTE0LjUgMTQuNSAwIDAgMCAwIDIwIDE0LjUgMTQuNSAwIDAgMCAwLTIweiIvPjxwYXRoIGQ9Ik0yIDEySDEybTEwIDBIMTIiLz48L3N2Zz4="
-                        alt="Ícone de globo"
-                        width={16}
-                        height={16}
-                    />
-                    Ir para hightjs.dev →
-                </a>
-            </footer>
-        </div>
-    );
-}
+import Home from "../components/Home";
 
 
 

package/example/src/web/routes/login.tsx

@@ -1,154 +1,9 @@
 import {RouteConfig, router} from "hightjs/client";
 import {GuestOnly, useSession} from "hightjs/auth/react"
 import React, {useState} from "react";
+import LoginPage from "../components/LoginPage";
 
 
-function LoginPage() {
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
-    const {signIn} = useSession();
-
-    const [error, setError] = useState<string | null>(null);
-
-    const handleLogin = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsLoading(true);
-        setError(null);
-
-        try {
-            const result = await signIn('credentials', {
-                redirect: false,
-                username: username,
-                password: password,
-                callbackUrl: '/'
-            });
-            console.log(result)
-            if (!result || result.error) {
-                setError('Credenciais inválidas. Verifique seus dados e senha.');
-                setIsLoading(false);
-                return;
-            }
-            router.push("/")
-
-        } catch (err) {
-            setError('Ocorreu um erro inesperado. Tente novamente.');
-            setIsLoading(false);
-        }
-
-    };
-
-    return (
-        <div className="font-sans min-h-screen flex items-center justify-center p-8 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
-            {/* Background gradient */}
-            <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
-
-            {/* Additional ambient lights */}
-            <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -z-10"></div>
-            <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -z-10"></div>
-
-            {/* Login Container */}
-            <div className="w-full max-w-md">
-                {/* Header */}
-                <div className="text-center mb-8">
-                    <div className="flex items-center justify-center gap-3 mb-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500">
-                            <path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path>
-                        </svg>
-                        <h1 className="text-2xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
-                    </div>
-                    <h2 className="text-xl font-medium text-gray-300 mb-2">Bem-vindo de volta</h2>
-                    <p className="text-sm text-gray-400">Faça login em sua conta</p>
-                </div>
-
-                {/* Glass Login Form */}
-                <div className="relative">
-                    {/* Glass background */}
-                    <div className="absolute inset-0 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"></div>
-
-                    {/* error */}
-                    {error && (
-                        <div className="relative p-4 mb-4 text-sm text-red-800 bg-red-200 rounded-lg" role="alert">
-                            {error}
-                        </div>
-                    )}
-
-                    {/* Form content */}
-                    <form onSubmit={handleLogin} className="relative p-8 space-y-6">
-                        {/* Email field */}
-                        <div className="space-y-2">
-                            <label htmlFor="email" className="text-sm font-medium text-gray-300">
-                                Usuário
-                            </label>
-                            <input
-                                id="username"
-                                type="username"
-                                value={username}
-                                onChange={(e) => setUsername(e.target.value)}
-                                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
-                                required
-                            />
-                        </div>
-
-                        {/* Password field */}
-                        <div className="space-y-2">
-                            <label htmlFor="password" className="text-sm font-medium text-gray-300">
-                                Senha
-                            </label>
-                            <input
-                                id="password"
-                                type="password"
-                                placeholder="••••••••"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
-                                required
-                            />
-                        </div>
-
-                        {/* Remember me and forgot password */}
-                        <div className="flex items-center justify-between text-sm">
-                            <label className="flex items-center text-gray-400 cursor-pointer">
-                                <input
-                                    type="checkbox"
-                                    className="mr-2 rounded border-white/20 bg-white/5 text-purple-500 focus:ring-purple-500/20"
-                                />
-                                Lembrar de mim
-                            </label>
-                            <a href="#" className="text-purple-400 hover:text-purple-300 transition-colors hover:underline">
-                                Esqueceu a senha?
-                            </a>
-                        </div>
-
-                        {/* Login button */}
-                        <button
-                            type="submit"
-                            disabled={isLoading}
-                            className="w-full bg-purple-600 hover:bg-purple-500 text-white font-medium py-3 px-4 rounded-xl transition-all duration-300 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)] disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500/20"
-                        >
-                            {isLoading ? (
-                                <div className="flex items-center justify-center gap-2">
-                                    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
-                                    Entrando...
-                                </div>
-                            ) : (
-                                'Entrar'
-                            )}
-                        </button>
-
-
-
-
-                    </form>
-                </div>
-
-            </div>
-        </div>
-    );
-}
 
 const wrapper = () => {
     const session = useSession()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hightjs",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "HightJS is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.11.24",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
@@ -65,6 +66,7 @@
     "express": "^4.0.0",
     "fastify": "^5.6.1",
     "framer-motion": "^12.23.22",
+    "fs-extra": "^11.3.2",
     "ws": "^8.18.1"
   },
   "peerDependency": {