open-vtop 1.0.4 → 1.0.5

package/README.md

@@ -2,6 +2,16 @@
 
 An open-source VTOP client with automatic session management.
 
+## Todo
+1) save usn and password for future use
+2) grab regno from the responses it self
+3) attendance
+4) timetable
+5) cgpa
+6) course-page
+7) callendar
+8) many more...
+9) qol like automatic browser open, better logging, save usn password for faster logins, logout
 ## Features
 
 - 🚀 **Automatic Session Initialization**: VTOP session cookies and CSRF tokens are automatically established when the server starts

package/dist/index.js

@@ -3,107 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { serveStatic } from "@hono/node-server/serve-static";
-import { Home } from "./views/Home.js";
-import { SuccessMessage } from "./views/partials.js";
+import { Login } from "./views/Login.js";
+import { Dashboard } from "./views/Dashboard.js";
 import { sessionManager } from "./session-manager.js";
-const app = new Hono();
 import { createRequire } from "module";
+const app = new Hono();
 const require = createRequire(import.meta.url);
 const htmxPath = require.resolve("htmx.org/dist/htmx.min.js");
-// Serve htmx from node_modules
 app.use("/static/htmx.js", serveStatic({ path: htmxPath }));
-// Main page
 app.get("/", (c) => {
-    return c.html(_jsx(Home, {}));
-});
-// API Endpoints
-app.get("/api/hello", (c) => {
-    return c.html(_jsx(SuccessMessage, { message: "Hello from HTMX!" }));
-});
-// Session status endpoint
-app.get("/api/session/status", (c) => {
-    const state = sessionManager.getState();
-    const status = state.initialized ? "✅ Initialized" : "❌ Not Initialized";
-    const lastInit = state.lastInitialized
-        ? new Date(state.lastInitialized).toLocaleString()
-        : "Never";
-    const csrfToken = state.csrf || "None";
-    const jsessionid = state.cookies.get("JSESSIONID") || "None";
-    const serverid = state.cookies.get("SERVERID") || "None";
-    return c.html(_jsxs("div", { style: "font-family: monospace; padding: 1rem; background: #f5f5f5; border-radius: 4px; color: #000;", children: [_jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "Status:" }), " ", status] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "Last Initialized:" }), " ", lastInit] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "Total Cookies:" }), " ", state.cookies.size] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "CSRF Token:" }), " ", csrfToken] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "JSESSIONID:" }), " ", jsessionid] }), _jsxs("div", { children: [_jsx("strong", { children: "SERVERID:" }), " ", serverid] })] }));
-});
-// Manual session refresh endpoint
-app.post("/api/session/refresh", async (c) => {
-    try {
-        await sessionManager.refresh();
-        return c.json({ success: true, message: "Session refreshed successfully" });
-    }
-    catch (error) {
-        return c.json({ success: false, error: String(error) }, 500);
-    }
-});
-// Login endpoint
-app.post("/api/login", async (c) => {
-    try {
-        const body = await c.req.json();
-        const { username, password, regNo } = body;
-        if (!username || !password || !regNo) {
-            return c.json({
-                success: false,
-                error: "Username, password, and registration number are required",
-            }, 400);
-        }
-        console.log(`🔐 Login requested for user: ${username} (${regNo})`);
-        const success = await sessionManager.login(username, password, regNo);
-        if (success) {
-            return c.json({
-                success: true,
-                message: "Login successful",
-                username: sessionManager.getUsername(),
-            });
-        }
-        else {
-            return c.json({
-                success: false,
-                error: "Login failed - check credentials or try again",
-            }, 401);
-        }
+    if (sessionManager.isLoggedIn()) {
+        return c.html(_jsx(Dashboard, { username: sessionManager.getUsername() }));
     }
-    catch (error) {
-        console.error("Login error:", error);
-        return c.json({ success: false, error: String(error) }, 500);
-    }
-});
-// Login status endpoint
-app.get("/api/login/status", (c) => {
-    return c.json({
-        loggedIn: sessionManager.isLoggedIn(),
-        username: sessionManager.getUsername(),
-    });
+    return c.html(_jsx(Login, {}));
 });
-// Login status HTML endpoint
-app.get("/api/login/status/html", (c) => {
-    const isLoggedIn = sessionManager.isLoggedIn();
-    const username = sessionManager.getUsername();
-    if (isLoggedIn) {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; color: #155724;", children: [_jsx("strong", { children: "\u2705 Logged In" }), _jsxs("div", { style: "margin-top: 0.5rem;", children: ["Username: ", _jsx("code", { children: username })] })] }));
-    }
-    else {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Not Logged In" }), _jsx("div", { style: "margin-top: 0.5rem;", children: "Please use the login form above." })] }));
-    }
-});
-// Debug logs storage
-const debugLogs = [];
-function addDebugLog(level, message) {
-    const timestamp = new Date().toLocaleTimeString();
-    debugLogs.push({ timestamp, level, message });
-    // Keep only last 100 logs
-    if (debugLogs.length > 100) {
-        debugLogs.shift();
-    }
-    console.log(`[${level}] ${message}`);
-}
-// Form-based login endpoint (for HTMX)
 app.post("/api/login/form", async (c) => {
     try {
         const formData = await c.req.parseBody();
@@ -111,98 +24,42 @@ app.post("/api/login/form", async (c) => {
         const password = formData["password"];
         const regNo = formData["regNo"];
         if (!username || !password || !regNo) {
-            addDebugLog("ERROR", "Login attempt with missing credentials");
-            return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Error:" }), " Username, password, and registration number are required."] }));
+            return c.html(_jsx("div", { id: "error-message", class: "mt-4 p-3 bg-red-500/10 border border-red-500/50 rounded-md text-red-500 text-sm", children: "Missing credentials. Please try again." }));
         }
-        addDebugLog("INFO", `Login requested for user: ${username} (${regNo})`);
-        // Show that login is in progress
-        const startTime = Date.now();
-        addDebugLog("INFO", "Starting login process - polling for text CAPTCHA...");
         const success = await sessionManager.login(username, password, regNo);
-        const duration = ((Date.now() - startTime) / 1000).toFixed(1);
         if (success) {
-            addDebugLog("SUCCESS", `Login successful for ${username} (took ${duration}s)`);
-            return c.html(_jsxs("div", { style: "padding: 1rem; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; color: #155724;", children: [_jsx("strong", { children: "\uD83C\uDF89 Login Successful!" }), _jsxs("div", { style: "margin-top: 0.5rem;", children: ["Welcome, ", _jsx("strong", { children: username })] }), _jsxs("div", { style: "margin-top: 0.25rem; font-size: 0.85rem;", children: ["Login took ", duration, " seconds"] })] }));
+            return c.html(_jsx(Dashboard, { username: username }));
         }
         else {
-            addDebugLog("ERROR", `Login failed for ${username} (took ${duration}s)`);
-            return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Login Failed" }), _jsx("div", { style: "margin-top: 0.5rem;", children: "Check your credentials or try again. VTOP might be showing reCAPTCHA." }), _jsxs("div", { style: "margin-top: 0.25rem; font-size: 0.85rem;", children: ["Attempt took ", duration, " seconds"] })] }));
+            return c.html(_jsx("div", { id: "error-message", class: "mt-4 p-3 bg-red-500/10 border border-red-500/50 rounded-md text-red-500 text-sm", children: "Login failed. Invalid credentials or captcha error." }));
         }
     }
     catch (error) {
-        addDebugLog("ERROR", `Login exception: ${String(error)}`);
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Error:" }), " ", String(error)] }));
-    }
-});
-// Debug logs endpoint
-app.get("/api/debug/logs", (c) => {
-    if (debugLogs.length === 0) {
-        return c.html(_jsx("div", { style: "color: #888;", children: "No logs yet. Try logging in to see debug output." }));
-    }
-    return c.html(_jsx("div", { children: debugLogs.map((log, i) => (_jsxs("div", { style: {
-                color: log.level === "ERROR"
-                    ? "#ff6b6b"
-                    : log.level === "SUCCESS"
-                        ? "#51cf66"
-                        : log.level === "WARN"
-                            ? "#fcc419"
-                            : "#0f0",
-                marginBottom: "0.25rem",
-            }, children: [_jsxs("span", { style: "color: #888;", children: ["[", log.timestamp, "]"] }), " ", _jsxs("span", { style: "font-weight: bold;", children: ["[", log.level, "]"] }), " ", log.message] }, i))) }));
-});
-// Clear debug logs endpoint
-app.post("/api/debug/logs/clear", (c) => {
-    debugLogs.length = 0;
-    return c.html(_jsx("div", { style: "color: #888;", children: "Logs cleared." }));
-});
-// Assignments JSON endpoint
-app.get("/api/assignments", async (c) => {
-    if (!sessionManager.isLoggedIn()) {
-        return c.json({ success: false, error: "Not logged in" }, 401);
-    }
-    try {
-        const assignments = await sessionManager.fetchUpcomingAssignments();
-        return c.json({ success: true, assignments });
-    }
-    catch (error) {
-        return c.json({ success: false, error: String(error) }, 500);
+        return c.html(_jsxs("div", { id: "error-message", class: "mt-4 p-3 bg-red-500/10 border border-red-500/50 rounded-md text-red-500 text-sm", children: ["Server error: ", String(error)] }));
     }
 });
-// Assignments HTML endpoint (for HTMX)
 app.get("/api/assignments/html", async (c) => {
     if (!sessionManager.isLoggedIn()) {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Not Logged In" }), _jsx("div", { style: "margin-top: 0.5rem;", children: "Please log in first to see your assignments." })] }));
+        // If session expired, redirect/render login
+        return c.html(_jsx("div", { class: "text-red-500", children: "Session expired. Please refresh to log in again." }));
     }
     try {
         const assignments = await sessionManager.fetchUpcomingAssignments();
         if (assignments.length === 0) {
-            return c.html(_jsxs("div", { style: "padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; text-align: center;", children: [_jsx("div", { style: "font-size: 3rem; margin-bottom: 0.5rem;", children: "\uD83C\uDF89" }), _jsx("strong", { style: "font-size: 1.25rem;", children: "No Upcoming Assignments!" }), _jsx("div", { style: "margin-top: 0.5rem; opacity: 0.9;", children: "You're all caught up. Time to relax!" })] }));
+            return c.html(_jsxs("div", { class: "p-12 text-center bg-surface border border-border rounded-lg", children: [_jsx("h3", { class: "text-lg font-medium mb-2", children: "No Upcoming Assignments" }), _jsx("p", { class: "text-muted", children: "You are all caught up!" })] }));
         }
-        return c.html(_jsxs("div", { style: "display: flex; flex-direction: column; gap: 1rem;", children: [_jsxs("div", { style: "padding: 0.75rem 1rem; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 8px; color: white; font-weight: bold;", children: ["\uD83D\uDCDA ", assignments.length, " Upcoming Assignment", assignments.length > 1 ? "s" : ""] }), assignments.map((ass, i) => (_jsxs("div", { style: {
-                        padding: "1rem",
-                        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
-                        borderRadius: "12px",
-                        border: "1px solid rgba(255,255,255,0.1)",
-                        color: "#fff",
-                        boxShadow: "0 4px 15px rgba(0,0,0,0.2)",
-                    }, children: [_jsxs("div", { style: "display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;", children: [_jsxs("div", { children: [_jsx("div", { style: "font-size: 0.85rem; color: #64ffda; font-weight: 600;", children: ass.courseCode }), _jsx("div", { style: "font-size: 0.8rem; color: #aaa;", children: ass.courseName })] }), _jsx("div", { style: {
-                                        padding: "0.25rem 0.75rem",
-                                        background: ass.status?.toLowerCase().includes("pending")
-                                            ? "#ff6b6b"
-                                            : "#4CAF50",
-                                        borderRadius: "20px",
-                                        fontSize: "0.75rem",
-                                        fontWeight: "bold",
-                                    }, children: ass.status || "Pending" })] }), _jsx("div", { style: "font-weight: bold; font-size: 1rem; margin-bottom: 0.5rem;", children: ass.assignmentTitle }), _jsxs("div", { style: "display: flex; justify-content: space-between; font-size: 0.85rem; color: #aaa;", children: [_jsxs("span", { children: ["\uD83D\uDCC5 Due: ", ass.dueDate || "N/A"] }), _jsxs("span", { children: ["\uD83D\uDCCA Max: ", ass.maxMarks || "N/A", " marks"] })] })] }, i)))] }));
+        //ass
+        return c.html(_jsx("div", { class: "flex flex-col gap-3", children: assignments.map((ass, i) => (_jsxs("div", { class: "flex items-center justify-between p-4 bg-surface border border-border rounded-lg transition-colors hover:border-muted group", children: [_jsxs("div", { class: "flex-1 min-w-0 pr-4", children: [_jsxs("div", { class: "flex items-baseline gap-3 overflow-hidden whitespace-nowrap text-ellipsis", children: [_jsx("span", { class: "text-xs font-bold text-muted uppercase tracking-wider min-w-fit", children: ass.courseCode }), _jsx("span", { class: "font-semibold text-sm truncate", children: ass.assignmentTitle }), _jsxs("span", { class: "text-xs text-muted", children: ["\u2014 ", ass.courseName] })] }), _jsxs("div", { class: "flex gap-4 mt-1 text-xs text-muted", children: [_jsxs("span", { children: ["Due:", " ", _jsx("span", { class: "text-foreground", children: ass.dueDate || "N/A" })] }), _jsxs("span", { children: ["Max:", " ", _jsx("span", { class: "text-foreground", children: ass.maxMarks || "N/A" })] })] })] }), _jsx("span", { class: `text-xs px-2.5 py-1 rounded-full font-medium whitespace-nowrap ${ass.status?.toLowerCase().includes("pending")
+                            ? "bg-red-500/10 text-red-500 border border-red-500/20"
+                            : "bg-blue-500/10 text-blue-500 border border-blue-500/20"}`, children: ass.status || "Pending" })] }, i))) }));
     }
     catch (error) {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Error:" }), " ", String(error)] }));
+        return c.html(_jsxs("div", { class: "p-4 border border-red-500 rounded-md text-red-500", children: ["Failed to load assignments: ", String(error)] }));
     }
 });
 serve({
     fetch: app.fetch,
     port: 6767,
 }, (info) => {
-    console.log(`🚀 Server is running on http://localhost:${info.port}`);
-    console.log(`📊 Session status: http://localhost:${info.port}/api/session/status`);
+    console.log(`Server is running on http://localhost:${info.port}`);
 });

package/dist/session-manager.js

@@ -10,7 +10,6 @@ const OPEN_PAGE = `${BASE}/vtop/openPage`;
 const OPEN_PAGE_ALT = `${BASE}/vtop/open/page`;
 const PRELOGIN_SETUP = `${BASE}/vtop/prelogin/setup`;
 const LOGIN_PAGE = `${BASE}/vtop/login`;
-// Post-login endpoints
 const INIT_PAGE = `${BASE}/vtop/init/page`;
 const MAIN_PAGE = `${BASE}/vtop/main/page`;
 const VTOP_OPEN = `${BASE}/vtop/open`;
@@ -27,9 +26,7 @@ class VTOPSessionManager {
         username: null,
         regNo: null,
     };
-    /**
-     * Extract CSRF token from HTML response
-     */
+    //cheerio at home
     extractCsrf(html) {
         // Look for _csrf token in various forms
         const patterns = [
@@ -46,9 +43,6 @@ class VTOPSessionManager {
         }
         return null;
     }
-    /**
-     * Parse Set-Cookie headers and store cookies
-     */
     storeCookies(response) {
         const setCookieHeaders = response.headers.getSetCookie?.() || [];
         for (const cookieStr of setCookieHeaders) {
@@ -59,9 +53,6 @@ class VTOPSessionManager {
             }
         }
     }
-    /**
-     * Get cookie header string for requests
-     */
     getCookieHeader() {
         return Array.from(this.state.cookies.entries())
             .map(([name, value]) => `${name}=${value}`)

package/dist/views/Dashboard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { BaseLayout } from "./layouts/Base.js";
+export const Dashboard = ({ username }) => {
+    return (_jsxs(BaseLayout, { title: "Dashboard - Open-VTOP", children: [_jsxs("div", { class: "flex justify-between items-center mb-8", children: [_jsxs("div", { children: [_jsx("h1", { class: "text-2xl font-bold tracking-tight", children: "Dashboard" }), _jsxs("p", { class: "text-muted text-sm", children: ["Welcome back, ", username] })] }), _jsx("div", {})] }), _jsx("div", { "hx-get": "/api/assignments/html", "hx-trigger": "load", "hx-target": "#assignments-container", "hx-swap": "innerHTML", class: "w-full", children: _jsx("div", { id: "assignments-container", class: "space-y-4", children: _jsxs("div", { id: "loading-state", class: "text-center py-16 text-muted", children: [_jsx("div", { class: "inline-block animate-spin rounded-full h-6 w-6 border-2 border-muted border-t-white mb-4" }), _jsx("p", { class: "text-sm", children: "Syncing assignments..." })] }) }) })] }));
+};

package/dist/views/Login.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { BaseLayout } from "./layouts/Base.js";
+export const Login = () => {
+    return (_jsx(BaseLayout, { title: "Login - Open-VTOP", children: _jsxs("div", { "x-data": "{ \n          showPassword: false, \n          loading: false \n        }", class: "w-full", children: [_jsxs("div", { class: "text-center mb-8", children: [_jsx("h1", { class: "text-3xl font-bold tracking-tight mb-2", children: "Log In" }), _jsx("p", { class: "text-muted text-sm", children: "Enter your VTOP credentials to continue." })] }), _jsx("div", { class: "bg-surface border border-border rounded-lg p-6 shadow-sm", children: _jsxs("form", { id: "login-form", "hx-post": "/api/login/form", "hx-target": "body", "hx-swap": "outerHTML", "x-on:submit": "loading = true", "x-on:htmx:after-request": "loading = false", children: [_jsxs("div", { class: "mb-4", children: [_jsx("label", { class: "block text-sm text-muted mb-2", for: "username", children: "Username" }), _jsx("input", { type: "text", id: "username", name: "username", required: true, autofocus: true, class: "w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:border-white transition-colors placeholder-muted" })] }), _jsxs("div", { class: "mb-4", children: [_jsx("label", { class: "block text-sm text-muted mb-2", for: "password", children: "Password" }), _jsxs("div", { class: "relative", children: [_jsx("input", { "x-bind:type": "showPassword ? 'text' : 'password'", id: "password", name: "password", required: true, class: "w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:border-white transition-colors placeholder-muted pr-10" }), _jsxs("button", { type: "button", "x-on:click": "showPassword = !showPassword", class: "absolute inset-y-0 right-0 px-3 flex items-center text-muted hover:text-foreground transition-colors", children: [_jsx("span", { "x-show": "!showPassword", class: "text-xs font-medium", children: "SHOW" }), _jsx("span", { "x-show": "showPassword", style: "display: none;", class: "text-xs font-medium", children: "HIDE" })] })] })] }), _jsxs("div", { class: "mb-6", children: [_jsx("label", { class: "block text-sm text-muted mb-2", for: "regNo", children: "Registration Number" }), _jsx("input", { type: "text", id: "regNo", name: "regNo", required: true, class: "w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:border-white transition-colors placeholder-muted" })] }), _jsxs("button", { type: "submit", class: "w-full bg-white text-black font-semibold py-2.5 rounded-md hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2", "x-bind:disabled": "loading", children: [_jsx("span", { "x-show": "!loading", children: "Log In" }), _jsxs("span", { "x-show": "loading", style: "display: none;", class: "flex items-center gap-2", children: [_jsxs("svg", { class: "animate-spin h-4 w-4 text-black", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { class: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "4" }), _jsx("path", { class: "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" })] }), "Authenticating..."] })] }), _jsx("div", { id: "error-message" })] }) }), _jsx("div", { class: "text-center mt-8 text-muted text-xs", children: _jsx("p", { children: "Open-VTOP \u00A9 2026" }) })] }) }));
+};

package/dist/views/layouts/Base.js

@@ -1,121 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
-export const BaseLayout = ({ title = "Open-VTOP", children, }) => {
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: title }), _jsx("script", { src: "/static/htmx.js" }), _jsx("style", { children: `
-          * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-          }
-
+export const BaseLayout = ({ title, children, }) => {
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: title }), _jsx("script", { src: "/static/htmx.js" }), _jsx("script", { src: "https://cdn.tailwindcss.com" }), _jsx("script", { dangerouslySetInnerHTML: {
+                            __html: `
+          tailwind.config = {
+            theme: {
+              extend: {
+                colors: {
+                  background: '#000000',
+                  surface: '#111111',
+                  border: '#333333',
+                  foreground: '#ffffff',
+                  muted: '#888888',
+                  primary: '#ffffff',
+                  'primary-fg': '#000000',
+                },
+                fontFamily: {
+                  sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+                }
+              }
+            }
+          }
+        `,
+                        } }), _jsx("script", { defer: true, src: "https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js" }), _jsx("style", { dangerouslySetInnerHTML: {
+                            __html: `
           body {
-            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Dank Mono', 'Source Code Pro', monospace;
-            background: #000;
-            color: #fff;
-            min-height: 100vh;
-            padding: 2rem;
-            line-height: 1.6;
-          }
-
-          h1 {
-            font-size: 2rem;
-            font-weight: 600;
-            margin-bottom: 2rem;
-            letter-spacing: -0.02em;
-          }
-
-          h2 {
-            font-size: 1.25rem;
-            font-weight: 500;
-            margin-bottom: 1rem;
-            letter-spacing: -0.01em;
-          }
-
-          .container {
-            max-width: 800px;
-            margin: 0 auto;
-          }
-
-          .section {
-            background: #111;
-            border: 1px solid #333;
-            border-radius: 8px;
-            padding: 2rem;
-            margin-bottom: 2rem;
-            transition: border-color 0.2s ease;
-          }
-
-          .section:hover {
-            border-color: #555;
-          }
-
-          button {
-            background: #fff;
-            color: #000;
-            border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.875rem;
-            font-family: inherit;
-            font-weight: 500;
-            transition: all 0.2s ease;
-          }
-
-          button:hover {
-            background: #e6e6e6;
-            transform: translateY(-1px);
-          }
-
-          button:active {
-            transform: translateY(0);
-          }
-
-          input {
-            background: #111;
-            color: #fff;
-            border: 1px solid #333;
-            padding: 0.75rem 1rem;
-            border-radius: 6px;
-            font-size: 0.875rem;
-            font-family: inherit;
-            width: 100%;
-            transition: border-color 0.2s ease;
-          }
-
-          input:focus {
-            outline: none;
-            border-color: #fff;
-          }
-
-          input::placeholder {
-            color: #666;
-          }
-
-          #result {
-            margin-top: 1rem;
-            padding: 1rem;
-            background: #0a0a0a;
-            border: 1px solid #222;
-            border-radius: 6px;
-            min-height: 2rem;
-            font-size: 0.875rem;
-          }
-
-          .success {
-            color: #0f0;
-          }
-
-          .error {
-            color: #f00;
-          }
-
-          .htmx-swapping {
-            opacity: 0.5;
-            transition: opacity 0.2s;
-          }
-
-          .htmx-request {
-            opacity: 0.8;
-          }
-        ` })] }), _jsx("body", { children: _jsx("div", { class: "container", children: children }) })] }));
+            background-color: theme('colors.background');
+            color: theme('colors.foreground');
+          }
+          /* Custom spinner animation since Tailwind's animate-spin is utility based */
+          .htmx-indicator {
+            display: none;
+            opacity: 0;
+            transition: opacity 200ms ease-in;
+          }
+          .htmx-request .htmx-indicator,
+          .htmx-request.htmx-indicator {
+            display: inline-block;
+            opacity: 1;
+          }
+        `,
+                        } })] }), _jsx("body", { class: "bg-background text-foreground antialiased min-h-screen flex flex-col items-center justify-center p-4", children: _jsx("main", { class: "w-full max-w-md flex flex-col gap-6", children: children }) })] }));
 };

package/package.json

@@ -27,5 +27,5 @@
     "tsx": "^4.7.1",
     "typescript": "^5.8.3"
   },
-  "version": "1.0.4"
+  "version": "1.0.5"
 }