Skip to content

Commit 5b58f5b

Browse files
ProgrammerKRProgrammerKR
committed
fix(ui): Correct JS scoping in actions and enhance generated styles with premium aesthetics
1 parent 1160a8c commit 5b58f5b

1 file changed

Lines changed: 66 additions & 40 deletions

File tree

‎src/compiler/transpiler_ui.c‎

Lines changed: 66 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
#include <stdio.h>
44
#include <stdlib.h>
55
#include <string.h>
6+
#include <stdbool.h>
67

78
#ifdef _WIN32
89
#include <direct.h>
@@ -13,7 +14,7 @@
1314
#endif
1415

1516
static void transpileStmt(Stmt *stmt, FILE *html, FILE *js, int indent);
16-
static void transpileExpr(Expr *expr, FILE *out);
17+
static void transpileExpr(Expr *expr, FILE *out, bool isJS);
1718

1819
static void printIndent(FILE *out, int level) {
1920
for (int i = 0; i < level; i++) fprintf(out, " ");
@@ -167,7 +168,7 @@ static void transpileStmt(Stmt *stmt, FILE *html, FILE *js, int indent) {
167168
printIndent(js, indent);
168169
fprintf(js, "%s: ", stmt->as.ui_state.name);
169170
if (stmt->as.ui_state.initializer) {
170-
transpileExpr(stmt->as.ui_state.initializer, js);
171+
transpileExpr(stmt->as.ui_state.initializer, js, true);
171172
} else {
172173
fprintf(js, "null");
173174
}
@@ -237,10 +238,10 @@ static void transpileStmt(Stmt *stmt, FILE *html, FILE *js, int indent) {
237238
fprintf(html, "%s", mappedKey);
238239
}
239240
} else {
240-
transpileExpr(props->items[i].key, html);
241+
transpileExpr(props->items[i].key, html, false);
241242
}
242243
fprintf(html, "=\"");
243-
transpileExpr(props->items[i].value, html);
244+
transpileExpr(props->items[i].value, html, false);
244245
fprintf(html, "\"");
245246
}
246247

@@ -252,7 +253,7 @@ static void transpileStmt(Stmt *stmt, FILE *html, FILE *js, int indent) {
252253
fprintf(html, ">");
253254

254255
if (innerTextValue) {
255-
transpileExpr(innerTextValue, html);
256+
transpileExpr(innerTextValue, html, false);
256257
}
257258

258259
// Children
@@ -287,12 +288,12 @@ static void transpileStmt(Stmt *stmt, FILE *html, FILE *js, int indent) {
287288
// Reactive text
288289
fprintf(html, "<span x-text=\"%s\"></span>", stmt->as.expression.expression->as.variable.name);
289290
} else if (stmt->as.expression.expression->type == EXPR_LITERAL) {
290-
transpileExpr(stmt->as.expression.expression, html);
291+
transpileExpr(stmt->as.expression.expression, html, false);
291292
}
292293
// Skip assignments or other complex exprs in HTML output
293294
} else if (js) {
294295
printIndent(js, indent);
295-
transpileExpr(stmt->as.expression.expression, js);
296+
transpileExpr(stmt->as.expression.expression, js, true);
296297
fprintf(js, ";\n");
297298
}
298299
break;
@@ -303,7 +304,7 @@ static void transpileStmt(Stmt *stmt, FILE *html, FILE *js, int indent) {
303304
}
304305
}
305306

306-
static void transpileExpr(Expr *expr, FILE *out) {
307+
static void transpileExpr(Expr *expr, FILE *out, bool isJS) {
307308
if (!expr) return;
308309
switch (expr->type) {
309310
case EXPR_LITERAL:
@@ -324,19 +325,20 @@ static void transpileExpr(Expr *expr, FILE *out) {
324325
break;
325326

326327
case EXPR_VARIABLE:
328+
if (isJS) fprintf(out, "this.");
327329
fprintf(out, "%s", expr->as.variable.name);
328330
break;
329331

330332
case EXPR_ASSIGN:
331-
// Assume JS action context for now
332-
fprintf(out, "this.%s = ", expr->as.assign.name);
333-
if (expr->as.assign.value) transpileExpr(expr->as.assign.value, out);
333+
if (isJS) fprintf(out, "this.");
334+
fprintf(out, "%s = ", expr->as.assign.name);
335+
if (expr->as.assign.value) transpileExpr(expr->as.assign.value, out, isJS);
334336
break;
335337

336338
case EXPR_BINARY:
337-
transpileExpr(expr->as.binary.left, out);
339+
transpileExpr(expr->as.binary.left, out, isJS);
338340
fprintf(out, " %s ", expr->as.binary.operator);
339-
transpileExpr(expr->as.binary.right, out);
341+
transpileExpr(expr->as.binary.right, out, isJS);
340342
break;
341343

342344
default:
@@ -347,59 +349,83 @@ static void transpileExpr(Expr *expr, FILE *out) {
347349

348350
static void emitBaseStyles(FILE *css, const char *appName) {
349351
fprintf(css, "/* ============================================\n");
350-
fprintf(css, " ProXPL UI — Generated style.css\n");
352+
fprintf(css, " ProXPL UI — Premium Generated style.css\n");
351353
fprintf(css, " App: %s\n", appName);
352354
fprintf(css, " ============================================ */\n\n");
353355

356+
// Modern Design Tokens
357+
fprintf(css, ":root {\n");
358+
fprintf(css, " --primary: #6366f1;\n");
359+
fprintf(css, " --primary-hover: #4f46e5;\n");
360+
fprintf(css, " --bg-gradient: linear-gradient(135deg, #f8fafc 0%%, #e2e8f0 100%%);\n");
361+
fprintf(css, " --card-bg: rgba(255, 255, 255, 0.8);\n");
362+
fprintf(css, " --text-main: #0f172a;\n");
363+
fprintf(css, " --text-muted: #64748b;\n");
364+
fprintf(css, "}\n\n");
365+
354366
// CSS Reset
355-
fprintf(css, "/* === CSS Reset === */\n");
356367
fprintf(css, "*, *::before, *::after {\n");
357368
fprintf(css, " box-sizing: border-box;\n");
358369
fprintf(css, " margin: 0;\n");
359370
fprintf(css, " padding: 0;\n");
360371
fprintf(css, "}\n\n");
361372

362373
// Base Styles
363-
fprintf(css, "/* === Base === */\n");
364374
fprintf(css, "html {\n");
365375
fprintf(css, " font-size: 16px;\n");
366376
fprintf(css, " scroll-behavior: smooth;\n");
367377
fprintf(css, "}\n\n");
368378

369379
fprintf(css, "body {\n");
370-
fprintf(css, " font-family: 'Inter', system-ui, -apple-system, sans-serif;\n");
371-
fprintf(css, " font-size: 1rem;\n");
372-
fprintf(css, " line-height: 1.6;\n");
373-
fprintf(css, " color: #1f2937;\n");
374-
fprintf(css, " background: #f9fafb;\n");
380+
fprintf(css, " font-family: 'Outfit', 'Inter', system-ui, sans-serif;\n");
381+
fprintf(css, " color: var(--text-main);\n");
382+
fprintf(css, " background: var(--bg-gradient);\n");
375383
fprintf(css, " min-height: 100vh;\n");
384+
fprintf(css, " display: flex;\n");
385+
fprintf(css, " align-items: center;\n");
386+
fprintf(css, " justify-content: center;\n");
387+
fprintf(css, "}\n\n");
388+
389+
// ProXPL Window Component (Glassmorphism)
390+
fprintf(css, ".prox-window {\n");
391+
fprintf(css, " background: var(--card-bg);\n");
392+
fprintf(css, " backdrop-filter: blur(12px);\n");
393+
fprintf(css, " -webkit-backdrop-filter: blur(12px);\n");
394+
fprintf(css, " border-radius: 2rem;\n");
395+
fprintf(css, " box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\n");
396+
fprintf(css, " border: 1px solid rgba(255, 255, 255, 0.3);\n");
397+
fprintf(css, " padding: 3rem;\n");
398+
fprintf(css, " margin: 1rem;\n");
399+
fprintf(css, " max-width: 600px;\n");
400+
fprintf(css, " width: 90%%;\n");
401+
fprintf(css, " animation: zoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n");
376402
fprintf(css, "}\n\n");
377403

378-
fprintf(css, "img, video, canvas {\n");
379-
fprintf(css, " max-width: 100%%;\n");
380-
fprintf(css, " display: block;\n");
404+
// Basic components
405+
fprintf(css, "button {\n");
406+
fprintf(css, " background: var(--primary);\n");
407+
fprintf(css, " color: white;\n");
408+
fprintf(css, " border: none;\n");
409+
fprintf(css, " padding: 0.75rem 1.5rem;\n");
410+
fprintf(css, " border-radius: 1rem;\n");
411+
fprintf(css, " font-weight: 600;\n");
412+
fprintf(css, " cursor: pointer;\n");
413+
fprintf(css, " transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n");
414+
fprintf(css, " box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);\n");
381415
fprintf(css, "}\n\n");
382416

383-
fprintf(css, "input, button, textarea, select {\n");
384-
fprintf(css, " font: inherit;\n");
417+
fprintf(css, "button:hover {\n");
418+
fprintf(css, " background: var(--primary-hover);\n");
419+
fprintf(css, " transform: translateY(-2px);\n");
420+
fprintf(css, " box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4);\n");
385421
fprintf(css, "}\n\n");
386422

387-
// ProXPL Window component
388-
fprintf(css, "/* === ProXPL Window Component === */\n");
389-
fprintf(css, ".prox-window {\n");
390-
fprintf(css, " background: #ffffff;\n");
391-
fprintf(css, " border-radius: 1rem;\n");
392-
fprintf(css, " box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n");
393-
fprintf(css, " border: 1px solid rgba(0, 0, 0, 0.05);\n");
394-
fprintf(css, " padding: 2rem;\n");
395-
fprintf(css, " margin: 2rem;\n");
423+
fprintf(css, "button:active {\n");
424+
fprintf(css, " transform: translateY(0);\n");
396425
fprintf(css, "}\n\n");
397426

398-
// Basic animations
399-
fprintf(css, "/* === Animations === */\n");
400-
fprintf(css, "@keyframes fadeIn {\n");
401-
fprintf(css, " from { opacity: 0; }\n");
402-
fprintf(css, " to { opacity: 1; }\n");
427+
fprintf(css, "span {\n");
428+
fprintf(css, " font-size: 1.1rem;\n");
403429
fprintf(css, "}\n\n");
404430
}
405431

0 commit comments

Comments
 (0)