Add html-page.el example and rebuild elc binary

examples/html-page.el demonstrates HTML template syntax: - <!doctype html> prefix handling - Attribute values (static and interpolated) - {#each list as item} iteration - Auto-escaped interpolation via {expr} - Self-closing void elements (meta, br, etc.) Rebuilt dist/platform/elc from modified compiler source. The new binary is self-hosted from the HTML-capable compiler source and passes the standard identity check.
Add HTML template codegen and runtime for JS backend
2026-05-04 13:02:54 -05:00 · 2026-05-04 13:02:50 -05:00 · 2026-05-04 13:02:44 -05:00 · 2026-05-04 13:02:36 -05:00 · 2026-05-04 11:03:47 -05:00 · 2026-05-04 11:02:13 -05:00
14 changed files with 3341 additions and 281 deletions
@@ -155,6 +155,36 @@ el_val_t readline(void) {
    return el_wrap_str(el_strdup(buf));
 }

+/* ── stdout redirect helpers ─────────────────────────────────────────────── *
+ * Used by elc post-processing (--minify, --obfuscate): capture codegen       *
+ * output into a temp file, then pass it to the external tool.                */
+
+static int _stdout_saved_fd = -1;
+
+/* stdout_to_file(path) — redirect stdout to <path>. Returns 1 on success.   */
+el_val_t stdout_to_file(el_val_t pathv) {
+    const char* path = EL_CSTR(pathv);
+    if (!path || !*path) return (el_val_t)(int64_t)0;
+    fflush(stdout);
+    _stdout_saved_fd = dup(STDOUT_FILENO);
+    if (_stdout_saved_fd < 0) return (el_val_t)(int64_t)0;
+    int fd = open(path, O_WRONLY | O_CREAT | O_TRUNC, 0644);
+    if (fd < 0) { close(_stdout_saved_fd); _stdout_saved_fd = -1; return (el_val_t)(int64_t)0; }
+    dup2(fd, STDOUT_FILENO);
+    close(fd);
+    return (el_val_t)(int64_t)1;
+}
+
+/* stdout_restore() — restore stdout from the saved fd. Returns 1 on success. */
+el_val_t stdout_restore(void) {
+    if (_stdout_saved_fd < 0) return (el_val_t)(int64_t)0;
+    fflush(stdout);
+    dup2(_stdout_saved_fd, STDOUT_FILENO);
+    close(_stdout_saved_fd);
+    _stdout_saved_fd = -1;
+    return (el_val_t)(int64_t)1;
+}
+
 /* ── String builtins ─────────────────────────────────────────────────────── */

 el_val_t el_str_concat(el_val_t av, el_val_t bv) {
@@ -2572,6 +2602,45 @@ el_val_t el_html_sanitize(el_val_t input_v, el_val_t allowlist_v) {
    return el_wrap_str(result);
 }

+/* ── html_escape / html_raw ──────────────────────────────────────────────── */
+/*
+ * html_escape(s) — escape a user-supplied string for safe inline interpolation
+ * in HTML text content or attribute values.  Escapes: & < > " '
+ *
+ * html_raw(s) — identity function; used by the `raw()` escape hatch in El HTML
+ * templates to explicitly opt out of escaping.
+ */
+
+el_val_t html_escape(el_val_t sv) {
+    const char* s = EL_CSTR(sv);
+    if (!s) return EL_STR("");
+    html_buf_t out;
+    html_buf_init(&out);
+    for (const char* p = s; *p; p++) {
+        unsigned char c = (unsigned char)*p;
+        switch (c) {
+            case '&':  html_buf_puts(&out, "&amp;");  break;
+            case '<':  html_buf_puts(&out, "&lt;");   break;
+            case '>':  html_buf_puts(&out, "&gt;");   break;
+            case '"':  html_buf_puts(&out, "&quot;"); break;
+            case '\'': html_buf_puts(&out, "&#39;");  break;
+            default:   html_buf_putc(&out, (char)c);  break;
+        }
+    }
+    char* result = el_strbuf(out.len);
+    memcpy(result, out.data, out.len);
+    result[out.len] = '\0';
+    html_buf_free(&out);
+    return el_wrap_str(result);
+}
+
+el_val_t html_raw(el_val_t sv) {
+    /* Identity — returns the value unchanged.  The name exists so generated
+     * code can call html_raw(expr) instead of expr directly, making it clear
+     * at the call site that escaping is intentionally bypassed. */
+    return sv;
+}
+
 /* ── JSON ────────────────────────────────────────────────────────────────── */

 /* True iff the segment is non-empty and every byte is an ASCII digit. We treat
@@ -79,6 +79,8 @@ extern "C" {
 void      println(el_val_t s);
 void      print(el_val_t s);
 el_val_t  readline(void);
+el_val_t  stdout_to_file(el_val_t path);   /* redirect println to a file  */
+el_val_t  stdout_restore(void);            /* restore stdout after capture */

 /* ── String builtins ─────────────────────────────────────────────────────── */

@@ -212,6 +214,13 @@ el_val_t  url_decode(el_val_t s);   /* '+' → space, %XX → byte  */
 * where each value is the array of attribute names allowed for that tag. */
 el_val_t  el_html_sanitize(el_val_t input_html, el_val_t allowlist_json);

+/* ── HTML template helpers ───────────────────────────────────────────────────
+ * Used by compiled El HTML template expressions.
+ * html_escape(s) — escape & < > " ' for safe inline interpolation.
+ * html_raw(s)    — identity; explicit opt-out from escaping (`raw()` form). */
+el_val_t  html_escape(el_val_t s);
+el_val_t  html_raw(el_val_t s);
+
 /* ── Filesystem ──────────────────────────────────────────────────────────── */

 el_val_t  fs_read(el_val_t path);
@@ -128,6 +128,22 @@ function str_pad_right(s, width, pad) {
    return String(s).padEnd(width, String(pad));
 }

+// ── HTML template helpers ────────────────────────────────────────────────────
+// Used by compiled El HTML template expressions.
+// html_escape(s) — escape & < > " ' for safe inline interpolation.
+// html_raw(s)    — identity; explicit opt-out from escaping (raw() form).
+
+function html_escape(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function html_raw(s) { return s; }
+
 // ── Math ────────────────────────────────────────────────────────────────────

 function el_abs(n) { return Math.abs(n); }
@@ -522,6 +538,328 @@ function math_sin(f)  { return Math.sin(f); }
 function math_cos(f)  { return Math.cos(f); }
 function math_pi()    { return Math.PI; }

+// ── DOM bridge (browser-only) ──────────────────────────────────────────────
+//
+// These functions wrap the browser DOM API. Each throws a descriptive error
+// when called from a Node environment, mirroring the pattern used by fs_*
+// in browser mode.
+
+function _ensureBrowser(name) {
+    if (IS_NODE) {
+        throw new Error(`${name}: not supported in Node runtime — DOM is browser-only`);
+    }
+}
+
+function dom_get_element(id) {
+    _ensureBrowser('dom_get_element');
+    return document.getElementById(String(id));
+}
+
+function dom_get_value(el) {
+    _ensureBrowser('dom_get_value');
+    return el == null ? '' : String(el.value ?? '');
+}
+
+function dom_set_value(el, v) {
+    _ensureBrowser('dom_set_value');
+    if (el != null) el.value = String(v);
+}
+
+function dom_get_text(el) {
+    _ensureBrowser('dom_get_text');
+    return el == null ? '' : String(el.textContent ?? '');
+}
+
+function dom_set_text(el, text) {
+    _ensureBrowser('dom_set_text');
+    if (el != null) el.textContent = String(text);
+}
+
+function dom_set_prop(el, prop, val) {
+    _ensureBrowser('dom_set_prop');
+    if (el != null) el[String(prop)] = val;
+}
+
+function dom_get_prop(el, prop) {
+    _ensureBrowser('dom_get_prop');
+    if (el == null) return null;
+    const v = el[String(prop)];
+    return v === undefined ? null : v;
+}
+
+function dom_set_style(el, prop, val) {
+    _ensureBrowser('dom_set_style');
+    if (el != null) el.style[String(prop)] = String(val);
+}
+
+function dom_add_class(el, cls) {
+    _ensureBrowser('dom_add_class');
+    if (el != null) el.classList.add(String(cls));
+}
+
+function dom_remove_class(el, cls) {
+    _ensureBrowser('dom_remove_class');
+    if (el != null) el.classList.remove(String(cls));
+}
+
+function dom_show(el) {
+    _ensureBrowser('dom_show');
+    if (el != null) el.style.display = '';
+}
+
+function dom_hide(el) {
+    _ensureBrowser('dom_hide');
+    if (el != null) el.style.display = 'none';
+}
+
+function dom_listen(el, event, handler) {
+    _ensureBrowser('dom_listen');
+    if (el != null) el.addEventListener(String(event), handler);
+}
+
+function dom_query(selector) {
+    _ensureBrowser('dom_query');
+    return document.querySelector(String(selector));
+}
+
+function dom_query_all(selector) {
+    _ensureBrowser('dom_query_all');
+    return Array.from(document.querySelectorAll(String(selector)));
+}
+
+function dom_create(tag) {
+    _ensureBrowser('dom_create');
+    return document.createElement(String(tag));
+}
+
+function dom_append(parent, child) {
+    _ensureBrowser('dom_append');
+    if (parent != null && child != null) parent.appendChild(child);
+}
+
+function dom_remove(el) {
+    _ensureBrowser('dom_remove');
+    if (el != null) el.remove();
+}
+
+function dom_is_null(el) {
+    return el === null || el === undefined;
+}
+
+// ── Extended DOM API (browser-only) ───────────────────────────────────────
+
+function dom_set_attr(el, attr, val) {
+    _ensureBrowser('dom_set_attr');
+    if (el != null) el.setAttribute(String(attr), String(val));
+}
+
+function dom_get_attr(el, attr) {
+    _ensureBrowser('dom_get_attr');
+    if (el == null) return '';
+    return el.getAttribute(String(attr)) ?? '';
+}
+
+function dom_remove_attr(el, attr) {
+    _ensureBrowser('dom_remove_attr');
+    if (el != null) el.removeAttribute(String(attr));
+}
+
+function dom_set_html(el, html) {
+    _ensureBrowser('dom_set_html');
+    if (el != null) el.innerHTML = String(html);
+}
+
+function dom_get_html(el) {
+    _ensureBrowser('dom_get_html');
+    return el == null ? '' : String(el.innerHTML ?? '');
+}
+
+function dom_get_parent(el) {
+    _ensureBrowser('dom_get_parent');
+    return el == null ? null : (el.parentElement ?? null);
+}
+
+function dom_contains_class(el, cls) {
+    _ensureBrowser('dom_contains_class');
+    if (el == null) return false;
+    return el.classList.contains(String(cls));
+}
+
+function dom_get_checked(el) {
+    _ensureBrowser('dom_get_checked');
+    return el == null ? false : Boolean(el.checked);
+}
+
+function dom_set_checked(el, val) {
+    _ensureBrowser('dom_set_checked');
+    if (el != null) el.checked = Boolean(val);
+}
+
+// ── Timer API (browser + Node) ─────────────────────────────────────────────
+
+function set_timeout(ms, cb) {
+    if (typeof setTimeout === 'undefined') {
+        throw new Error('set_timeout: setTimeout not available in this environment');
+    }
+    setTimeout(cb, ms | 0);
+}
+
+function set_interval(ms, cb) {
+    if (typeof setInterval === 'undefined') {
+        throw new Error('set_interval: setInterval not available in this environment');
+    }
+    return setInterval(cb, ms | 0);
+}
+
+function clear_interval(handle) {
+    if (typeof clearInterval !== 'undefined') clearInterval(handle);
+}
+
+// ── Local storage (browser-only) ───────────────────────────────────────────
+
+function local_storage_get(key) {
+    _ensureBrowser('local_storage_get');
+    return localStorage.getItem(String(key)) ?? '';
+}
+
+function local_storage_set(key, val) {
+    _ensureBrowser('local_storage_set');
+    localStorage.setItem(String(key), String(val));
+}
+
+function local_storage_remove(key) {
+    _ensureBrowser('local_storage_remove');
+    localStorage.removeItem(String(key));
+}
+
+// ── Window location / navigation (browser-only) ────────────────────────────
+
+function window_location() {
+    _ensureBrowser('window_location');
+    return window.location.href;
+}
+
+function window_redirect(url) {
+    _ensureBrowser('window_redirect');
+    window.location.href = String(url);
+}
+
+function window_on_load(cb) {
+    if (typeof document !== 'undefined') {
+        document.addEventListener('DOMContentLoaded', cb);
+    } else if (typeof window !== 'undefined') {
+        window.addEventListener('load', cb);
+    }
+    // In Node: no-op
+}
+
+// ── console_log (explicit debug log, distinct from println) ────────────────
+
+function console_log(msg) {
+    // eslint-disable-next-line no-console
+    console.log(String(msg));
+}
+
+// ── Window export helpers ──────────────────────────────────────────────────
+//
+// Expose El functions to the browser's global scope so they can be called
+// from inline event handlers (onclick="increment()") or by external JS.
+// In Node mode, writes to globalThis so the same pattern works in tests.
+
+function window_set(name, val) {
+    if (typeof window !== 'undefined') {
+        window[String(name)] = val;
+    } else if (typeof globalThis !== 'undefined') {
+        globalThis[String(name)] = val;
+    }
+}
+
+function window_get(name) {
+    if (typeof window !== 'undefined') {
+        const v = window[String(name)];
+        return v === undefined ? null : v;
+    }
+    return null;
+}
+
+// ── Promise helpers ────────────────────────────────────────────────────────
+//
+// Third-party APIs often return Promises but are not El @async functions.
+// These helpers let El programs chain .then / .catch without needing
+// native_js, and without requiring the callee to be @async.
+
+function promise_then(p, cb) {
+    return Promise.resolve(p).then(cb);
+}
+
+function promise_catch(p, cb) {
+    return Promise.resolve(p).catch(cb);
+}
+
+function promise_resolve(val) {
+    return Promise.resolve(val);
+}
+
+function promise_reject(msg) {
+    return Promise.reject(new Error(String(msg)));
+}
+
+// ── Object / Array utilities ───────────────────────────────────────────────
+//
+// Structural operations on Any-typed JS values. These complement the
+// El map/list primitives for interop with third-party library objects.
+
+function object_assign(target, source) {
+    return Object.assign(Object.assign({}, target), source);
+}
+
+function object_keys(obj) {
+    if (obj === null || obj === undefined) return [];
+    return Object.keys(obj);
+}
+
+function object_values(obj) {
+    if (obj === null || obj === undefined) return [];
+    return Object.values(obj);
+}
+
+function json_deep_clone(obj) {
+    if (obj === null || obj === undefined) return null;
+    return JSON.parse(JSON.stringify(obj));
+}
+
+function array_from(iterable) {
+    if (iterable === null || iterable === undefined) return [];
+    return Array.from(iterable);
+}
+
+function type_of(val) {
+    return typeof val;
+}
+
+function instanceof_check(val, constructor_name) {
+    if (typeof globalThis[constructor_name] === 'function') {
+        return val instanceof globalThis[constructor_name];
+    }
+    return false;
+}
+
+// ── native_js escape hatch ─────────────────────────────────────────────────
+//
+// Evaluate arbitrary JS from El source. Intended for calling third-party
+// browser libraries (Supabase, Stripe, etc.) until proper El bindings exist.
+// Use sparingly — this bypasses El's type system entirely.
+
+function native_js(code) {
+    // eslint-disable-next-line no-eval
+    return eval(String(code));
+}
+
+function native_js_call(obj, method, args) {
+    if (obj == null) throw new Error('native_js_call: object is null');
+    return obj[String(method)](...(Array.isArray(args) ? args : []));
+}
+
 // ── Stubs for not-yet-supported features ───────────────────────────────────
 //
 // These compile but throw when called. See spec/codegen-js.md §7.
@@ -632,6 +970,31 @@ const __el = {
    // Float / math
    float_to_str, int_to_float, float_to_int, format_float, decimal_round,
    str_to_float, math_sqrt, math_log, math_ln, math_sin, math_cos, math_pi,
+    // DOM bridge (browser-only)
+    dom_get_element, dom_get_value, dom_set_value, dom_get_text, dom_set_text,
+    dom_set_prop, dom_get_prop, dom_set_style, dom_add_class, dom_remove_class,
+    dom_show, dom_hide, dom_listen, dom_query, dom_query_all, dom_create,
+    dom_append, dom_remove, dom_is_null,
+    // Extended DOM
+    dom_set_attr, dom_get_attr, dom_remove_attr, dom_set_html, dom_get_html,
+    dom_get_parent, dom_contains_class, dom_get_checked, dom_set_checked,
+    // Timers
+    set_timeout, set_interval, clear_interval,
+    // Local storage
+    local_storage_get, local_storage_set, local_storage_remove,
+    // Window location
+    window_location, window_redirect, window_on_load,
+    // Debug
+    console_log,
+    // Window export helpers
+    window_set, window_get,
+    // Promise helpers
+    promise_then, promise_catch, promise_resolve, promise_reject,
+    // Object / Array utilities
+    object_assign, object_keys, object_values, json_deep_clone,
+    array_from, type_of, instanceof_check,
+    // native_js escape hatch
+    native_js, native_js_call,
    // CGI / DHARMA / Engram / LLM (stubs)
    el_cgi_init,
    dharma_connect, dharma_send, dharma_activate, dharma_emit, dharma_field,
@@ -670,10 +1033,35 @@ export {
    fs_read, fs_write, fs_list,
    json_parse, json_stringify, json_get, json_get_string, json_get_int,
    time_now, time_now_utc, sleep_ms,
+    // HTML template helpers
+    html_escape, html_raw,
    bool_to_str, exit_program, args, env,
    state_set, state_get, state_del, state_keys,
    el_cgi_init,
    dharma_connect, dharma_send, dharma_activate, dharma_emit, dharma_field,
    engram_node, engram_search, engram_activate,
    llm_call, llm_call_system,
+    // DOM bridge
+    dom_get_element, dom_get_value, dom_set_value, dom_get_text, dom_set_text,
+    dom_set_prop, dom_get_prop, dom_set_style, dom_add_class, dom_remove_class,
+    dom_show, dom_hide, dom_listen, dom_query, dom_query_all, dom_create,
+    dom_append, dom_remove, dom_is_null,
+    // Extended DOM
+    dom_set_attr, dom_get_attr, dom_remove_attr, dom_set_html, dom_get_html,
+    dom_get_parent, dom_contains_class, dom_get_checked, dom_set_checked,
+    // Timers
+    set_timeout, set_interval, clear_interval,
+    // Local storage
+    local_storage_get, local_storage_set, local_storage_remove,
+    // Window location
+    window_location, window_redirect, window_on_load,
+    // Debug
+    console_log,
+    // Window / native_js
+    window_set, window_get, native_js, native_js_call,
+    // Promise helpers
+    promise_then, promise_catch, promise_resolve, promise_reject,
+    // Object / Array utilities
+    object_assign, object_keys, object_values, json_deep_clone,
+    array_from, type_of, instanceof_check,
 };
@@ -86,6 +86,57 @@ fn js_binop(op: String) -> String {
    op
 }

+// ── Known El runtime method names ─────────────────────────────────────────────
+//
+// These are the method shortforms exported by el_runtime.js and used by the
+// El C-backend convention of `obj.method(args)` -> `method(obj, args)`.
+// Any method name NOT in this set is treated as a native JS method call on the
+// receiver object, emitting `obj.method(args)` directly.
+//
+// This is the mechanism that makes `client.auth.signInWithOtp(payload)` work
+// without `native_js_call`: the receiver is Any-typed, the method is unknown
+// to El, so codegen emits the JS call directly.
+
+fn js_is_el_method(name: String) -> Bool {
+    if str_eq(name, "append") { return true }
+    if str_eq(name, "len") { return true }
+    if str_eq(name, "get") { return true }
+    if str_eq(name, "map_get") { return true }
+    if str_eq(name, "map_set") { return true }
+    false
+}
+
+// ── Async function tracking ───────────────────────────────────────────────────
+//
+// Functions decorated with @async are recorded here. Any call to a known-async
+// builtin (http_get, http_post, http_post_json) or to a user-declared @async
+// function gets an `await` prefix in generated JS.
+//
+// Known-async builtins — these return Promise<T> in el_runtime.js.
+fn js_is_async_builtin(name: String) -> Bool {
+    if str_eq(name, "http_get") { return true }
+    if str_eq(name, "http_post") { return true }
+    if str_eq(name, "http_post_json") { return true }
+    if str_eq(name, "http_get_with_headers") { return true }
+    if str_eq(name, "http_post_with_headers") { return true }
+    false
+}
+
+fn js_register_async_fn(name: String) -> Bool {
+    let csv: String = state_get("__js_async_fns")
+    if str_eq(csv, "") { csv = "," }
+    let key: String = "," + name + ","
+    if str_contains(csv, key) { return true }
+    state_set("__js_async_fns", csv + name + ",")
+    return true
+}
+
+fn js_is_async_fn(name: String) -> Bool {
+    let csv: String = state_get("__js_async_fns")
+    if str_eq(csv, "") { return false }
+    return str_contains(csv, "," + name + ",")
+}
+
 // ── Int-name tracking (mirrors codegen.el) ────────────────────────────────────

 fn js_is_int_name(name: String) -> Bool {
@@ -140,6 +191,138 @@ fn js_is_int_call(call_expr: Map<String, Any>) -> Bool {
    return false
 }

+// ── HTML template codegen (JS) ────────────────────────────────────────────────
+//
+// HTML template expressions compile to a JS IIFE that builds the HTML string
+// using string concatenation.  Interpolated values go through html_escape();
+// raw() bypasses escaping.  {#each} blocks compile to Array.forEach or a
+// for-loop that pushes fragments into a parts array.
+//
+// Entry point: js_cg_html_template(expr) → JS expression string.
+
+fn js_next_html_id() -> String {
+    let csv: String = state_get("__js_html_counter")
+    let n = 0
+    if !str_eq(csv, "") {
+        let n = str_to_int(csv)
+    }
+    let n = n + 1
+    state_set("__js_html_counter", native_int_to_str(n))
+    native_int_to_str(n)
+}
+
+fn js_cg_html_parts(children: [Map<String, Any>], acc_var: String) -> String {
+    let n: Int = native_list_len(children)
+    let i = 0
+    let out = ""
+    while i < n {
+        let child: Map<String, Any> = native_list_get(children, i)
+        let html_kind: String = child["html"]
+        if str_eq(html_kind, "Text") {
+            let text: String = child["text"]
+            let out = out + acc_var + " += " + js_str_lit(text) + "; "
+        }
+        if str_eq(html_kind, "Doctype") {
+            let out = out + acc_var + " += \"<!doctype html>\"; "
+        }
+        if str_eq(html_kind, "Interp") {
+            let val_node = child["value"]
+            let val_c: String = js_cg_expr(val_node)
+            let out = out + acc_var + " += html_escape(" + val_c + "); "
+        }
+        if str_eq(html_kind, "Raw") {
+            let val_node = child["value"]
+            let val_c: String = js_cg_expr(val_node)
+            let out = out + acc_var + " += html_raw(" + val_c + "); "
+        }
+        if str_eq(html_kind, "Element") {
+            let elem_c: String = js_cg_html_element_str(child, acc_var)
+            let out = out + elem_c
+        }
+        if str_eq(html_kind, "Each") {
+            let each_c: String = js_cg_html_each(child, acc_var)
+            let out = out + each_c
+        }
+        let i = i + 1
+    }
+    out
+}
+
+fn js_cg_html_attrs_str(attrs: [Map<String, Any>], acc_var: String) -> String {
+    let n: Int = native_list_len(attrs)
+    let i = 0
+    let out = ""
+    while i < n {
+        let attr: Map<String, Any> = native_list_get(attrs, i)
+        let attr_name: String = attr["name"]
+        let kind: String = attr["kind"]
+        // open-attr snippet: " name=\""
+        let open_val: String = " " + attr_name + "=\""
+        if str_eq(kind, "static") {
+            let sv: String = attr["value"]
+            let out = out + acc_var + " += " + js_str_lit(open_val) + "; "
+            let out = out + acc_var + " += " + js_str_lit(sv) + "; "
+            let out = out + acc_var + " += " + js_str_lit("\"") + "; "
+        } else {
+            if str_eq(kind, "dynamic") {
+                let val_node = attr["value"]
+                let val_c: String = js_cg_expr(val_node)
+                let out = out + acc_var + " += " + js_str_lit(open_val) + "; "
+                let out = out + acc_var + " += html_escape(" + val_c + "); "
+                let out = out + acc_var + " += " + js_str_lit("\"") + "; "
+            } else {
+                // Boolean attribute
+                let out = out + acc_var + " += " + js_str_lit(" " + attr_name) + "; "
+            }
+        }
+        let i = i + 1
+    }
+    out
+}
+
+fn js_cg_html_element_str(elem: Map<String, Any>, acc_var: String) -> String {
+    let tag: String = elem["tag"]
+    let attrs: [Map<String, Any>] = elem["attrs"]
+    let children: [Map<String, Any>] = elem["children"]
+    let self_closing: Bool = elem["self_closing"]
+    let out = acc_var + " += " + js_str_lit("<" + tag) + "; "
+    let out = out + js_cg_html_attrs_str(attrs, acc_var)
+    if self_closing {
+        let out = out + acc_var + " += \"/>\"" + "; "
+    } else {
+        let out = out + acc_var + " += \">\"; "
+        let out = out + js_cg_html_parts(children, acc_var)
+        let out = out + acc_var + " += " + js_str_lit("</" + tag + ">") + "; "
+    }
+    out
+}
+
+fn js_cg_html_each(node: Map<String, Any>, acc_var: String) -> String {
+    let list_expr = node["list"]
+    let item_name: String = node["item"]
+    let body_children: [Map<String, Any>] = node["body"]
+    let id: String = js_next_html_id()
+    let list_var: String = "_html_list_" + id
+    let len_var: String = "_html_len_" + id
+    let idx_var: String = "_html_i_" + id
+    let list_c: String = js_cg_expr(list_expr)
+    let inner_c: String = js_cg_html_parts(body_children, acc_var)
+    "{ const " + list_var + " = " + list_c + "; const " + len_var + " = el_list_len(" + list_var + "); for (let " + idx_var + " = 0; " + idx_var + " < " + len_var + "; " + idx_var + "++) { const " + item_name + " = el_list_get(" + list_var + ", " + idx_var + "); " + inner_c + "} } "
+}
+
+fn js_cg_html_template(expr: Map<String, Any>) -> String {
+    let root = expr["root"]
+    let id: String = js_next_html_id()
+    let acc: String = "_html_" + id
+    let doctype_flag: Bool = root["doctype"]
+    let doctype_prefix: String = ""
+    if doctype_flag {
+        let doctype_prefix = acc + " += \"<!doctype html>\"; "
+    }
+    let body: String = js_cg_html_element_str(root, acc)
+    "(() => { let " + acc + " = \"\"; " + doctype_prefix + body + "return " + acc + "; })()"
+}
+
 // ── Expression codegen ────────────────────────────────────────────────────────
 //
 // js_cg_expr returns a JS expression string (not a statement).
@@ -377,20 +560,38 @@ fn js_cg_expr(expr: Map<String, Any>) -> String {

        if func_kind == "Ident" {
            let fn_name: String = func["name"]
-            return fn_name + "(" + args_c + ")"
+            let call_expr: String = fn_name + "(" + args_c + ")"
+            if js_is_async_builtin(fn_name) {
+                return "await " + call_expr
+            }
+            if js_is_async_fn(fn_name) {
+                return "await " + call_expr
+            }
+            return call_expr
        }

        if func_kind == "Field" {
-            // El's `obj.method(args)` becomes `method(obj, args)` — same
-            // convention as the C backend. The runtime exports method
-            // shortforms (append, len, get, map_get, map_set) that match.
            let obj = func["object"]
            let field: String = func["field"]
            let obj_c: String = js_cg_expr(obj)
-            if arity > 0 {
-                return field + "(" + obj_c + ", " + args_c + ")"
+            // If the method is a known El runtime shortform, keep the El
+            // convention: `method(obj, args)`. This preserves backward
+            // compatibility with list.append(x), map.map_get(k), etc.
+            if js_is_el_method(field) {
+                if arity > 0 {
+                    return field + "(" + obj_c + ", " + args_c + ")"
+                }
+                return field + "(" + obj_c + ")"
            }
-            return field + "(" + obj_c + ")"
+            // Unknown method — emit as a native JS method call on the
+            // receiver. This handles Any-typed values (third-party library
+            // objects, DOM elements, Promises, etc.) without requiring
+            // native_js_call. Example: `client.auth.signInWithOtp(payload)`
+            // emits `client["auth"].signInWithOtp(args_c)`.
+            if arity > 0 {
+                return obj_c + "." + field + "(" + args_c + ")"
+            }
+            return obj_c + "." + field + "()"
        }

        let fn_c: String = js_cg_expr(func)
@@ -398,22 +599,39 @@ fn js_cg_expr(expr: Map<String, Any>) -> String {
    }

    if kind == "Field" {
-        // El's `obj.foo` becomes JS `obj["foo"]` — works on plain objects
-        // (maps) and on JS objects with prototype. el_get_field is a
-        // runtime helper for callers that want EL_NULL on missing keys.
+        // El's `obj.foo` becomes JS `obj["foo"]` — direct bracket access.
+        // This works for plain El map objects AND for real JS objects with
+        // prototype-inherited properties (DOM elements, third-party library
+        // objects, Promises, etc.). el_get_field used hasOwnProperty which
+        // silently returned null for inherited props, breaking e.g. client.auth.
+        //
+        // Nil-propagation: `obj?.foo` emits `(obj)?.["foo"] ?? null`.
        let obj = expr["object"]
        let field: String = expr["field"]
+        let obj_kind: String = obj["expr"]
+        if str_eq(obj_kind, "Try") {
+            let inner = obj["inner"]
+            let inner_c: String = js_cg_expr(inner)
+            return "(" + inner_c + ")?.[" + js_str_lit(field) + "] ?? null"
+        }
        let obj_c: String = js_cg_expr(obj)
-        return "el_get_field(" + obj_c + ", " + js_str_lit(field) + ")"
+        return obj_c + "[" + js_str_lit(field) + "]"
    }

    if kind == "Index" {
        // Map vs list dispatch on the index expression kind, same as C.
+        // If the object is a Try (nil-propagation), use JS optional indexing.
        let obj = expr["object"]
        let idx = expr["index"]
        let obj_c: String = js_cg_expr(obj)
        let idx_c: String = js_cg_expr(idx)
        let idx_kind: String = idx["expr"]
+        let obj_kind: String = obj["expr"]
+        if str_eq(obj_kind, "Try") {
+            let inner = obj["inner"]
+            let inner_c: String = js_cg_expr(inner)
+            return "(" + inner_c + ")?.[" + idx_c + "] ?? null"
+        }
        if str_eq(idx_kind, "Str") {
            return "el_get_field(" + obj_c + ", " + idx_c + ")"
        }
@@ -453,6 +671,12 @@ fn js_cg_expr(expr: Map<String, Any>) -> String {
    }

    if kind == "Try" {
+        // Postfix `?` — nil-propagation guard.
+        // When used as `expr?.field` the Field handler above intercepts and
+        // emits `(expr)?.["field"]`. Here, a bare `expr?` (not followed by
+        // field/index access) passes through to the inner expression unchanged
+        // (it acts as an identity but marks the value as "nil-propagating" for
+        // its caller). This matches the C backend's current behavior.
        let inner = expr["inner"]
        return js_cg_expr(inner)
    }
@@ -470,6 +694,17 @@ fn js_cg_expr(expr: Map<String, Any>) -> String {
        return js_cg_match(expr)
    }

+    // Lambda (anonymous function literal): fn(params) -> RetType { body }
+    // Emitted as a JS arrow function expression: (params) => { body }.
+    // Used for inline callbacks: dom_listen(el, "click", fn(e: Any) -> Void { ... })
+    if kind == "Lambda" {
+        return js_cg_lambda(expr)
+    }
+
+    if kind == "HtmlTemplate" {
+        return js_cg_html_template(expr)
+    }
+
    "null"
 }

@@ -528,8 +763,16 @@ fn js_cg_match(expr: Map<String, Any>) -> String {
                            if str_eq(v, "true") { let bv = "true" }
                            let parts = native_list_append(parts, "if (" + subj_var + " === " + bv + ") return (" + body_c + "); ")
                        } else {
-                            // unknown pattern → wildcard
-                            let parts = native_list_append(parts, "return (" + body_c + "); ")
+                            if str_eq(pkind, "Variant") {
+                                // Enum::Variant patterns — El enums compile to plain
+                                // strings (the variant name) or ints. Match the subject
+                                // against the variant name string.
+                                let variant: String = pat["variant"]
+                                let parts = native_list_append(parts, "if (str_eq(" + subj_var + ", " + js_str_lit(variant) + ")) return (" + body_c + "); ")
+                            } else {
+                                // unknown pattern → wildcard
+                                let parts = native_list_append(parts, "return (" + body_c + "); ")
+                            }
                        }
                    }
                }
@@ -541,6 +784,65 @@ fn js_cg_match(expr: Map<String, Any>) -> String {
    str_join(parts, "")
 }

+// ── Lambda codegen ────────────────────────────────────────────────────────────
+//
+// Anonymous function literals: fn(params) -> RetType { body }
+//
+// Strategy: emit the lambda as a hoisted JS function declaration with a
+// generated name (__lambda_N), then return the name as the expression value.
+// This works because JS function declarations are hoisted within their scope,
+// so the generated name is valid at any use site within the same function or
+// module. The emitted code looks like:
+//
+//   function __lambda_1(event) { dom_hide(spinner); }
+//   ...
+//   dom_listen(btn, "click", __lambda_1);
+//
+// This approach is clean, debuggable, and avoids any need for a string-buffer
+// mode in the codegen.
+
+fn js_next_lambda_id() -> String {
+    let csv: String = state_get("__js_lambda_counter")
+    let n = 0
+    if !str_eq(csv, "") {
+        let n = str_to_int(csv)
+    }
+    let n = n + 1
+    state_set("__js_lambda_counter", native_int_to_str(n))
+    native_int_to_str(n)
+}
+
+fn js_cg_lambda(expr: Map<String, Any>) -> String {
+    let params = expr["params"]
+    let body = expr["body"]
+    let ret_type: String = expr["ret_type"]
+    let id: String = js_next_lambda_id()
+    let lambda_name: String = "__lambda_" + id
+    let params_str: String = js_params_str(params)
+    // Emit the function definition immediately into the output stream.
+    // It will appear before the statement containing this expression.
+    js_emit_line("function " + lambda_name + "(" + params_str + ") {")
+    let decl = native_list_empty()
+    let np: Int = native_list_len(params)
+    let pi = 0
+    while pi < np {
+        let param = native_list_get(params, pi)
+        let pname: String = param["name"]
+        let decl = native_list_append(decl, pname)
+        let pi = pi + 1
+    }
+    let body_xformed = body
+    if !str_eq(ret_type, "Void") {
+        let body_xformed = js_transform_implicit_return(body)
+    }
+    js_build_int_names_for_params(params)
+    js_cg_stmts(body_xformed, "  ", decl)
+    js_emit_line("}")
+    js_emit_blank()
+    // Return the function name as the expression value.
+    lambda_name
+}
+
 // ── Variable scope tracking ───────────────────────────────────────────────────
 //
 // El allows `let x = ...` to redeclare in the same scope. JS would throw
@@ -646,6 +948,27 @@ fn js_cg_stmt(stmt: Map<String, Any>, indent: String, declared: [String]) -> [St
    if kind == "TypeDef" { return declared }
    if kind == "EnumDef" { return declared }
    if kind == "Import"  { return declared }
+
+    if kind == "TryCatch" {
+        let try_body = stmt["try_body"]
+        let catch_name: String = stmt["catch_name"]
+        let catch_body = stmt["catch_body"]
+        js_emit_line(indent + "try {")
+        js_cg_stmts(try_body, indent + "  ", native_list_clone(declared))
+        js_emit_line(indent + "} catch (" + catch_name + ") {")
+        js_cg_stmts(catch_body, indent + "  ", native_list_clone(declared))
+        js_emit_line(indent + "}")
+        return declared
+    }
+
+    // ExternFn: the function exists in the JS environment (loaded via <script>
+    // tag or the module context). Emit a comment so the generated file is
+    // self-documenting, but no JS function body — the implementation is external.
+    if kind == "ExternFn" {
+        let ename: String = stmt["name"]
+        js_emit_line(indent + "// extern fn " + ename + " — provided by the JS environment")
+        return declared
+    }
    if kind == "CgiBlock" {
        // CGI blocks compile to a no-op + warning comment in JS target.
        // The runtime cgi identity is server-side; UI code is not a CGI
@@ -785,16 +1108,30 @@ fn js_cg_fn(stmt: Map<String, Any>) -> Void {
    let params = stmt["params"]
    let body = stmt["body"]
    let ret_type: String = stmt["ret_type"]
+    let decorator: String = stmt["decorator"]
    let params_str: String = js_params_str(params)
    js_build_int_names_for_params(params)

-    // Special-case `fn main` — emit as a regular function and call it
-    // at module bottom (after all top-level statements). This matches
-    // the C backend's behavior where `fn main` is the entry point.
-    if fn_name == "main" {
-        js_emit_line("function main(" + params_str + ") {")
+    // Detect @async decorator — emit `async function` and register the name
+    // so call sites for this function get `await` prefixed automatically.
+    // When the decorator field is absent, el_get_field returns null; str_eq
+    // handles null safely (returns false), so no special nil-check is needed.
+    if str_eq(decorator, "async") {
+        js_register_async_fn(fn_name)
+        if fn_name == "main" {
+            js_emit_line("async function main(" + params_str + ") {")
+        } else {
+            js_emit_line("async function " + fn_name + "(" + params_str + ") {")
+        }
    } else {
-        js_emit_line("function " + fn_name + "(" + params_str + ") {")
+        // Special-case `fn main` — emit as a regular function and call it
+        // at module bottom (after all top-level statements). This matches
+        // the C backend's behavior where `fn main` is the entry point.
+        if fn_name == "main" {
+            js_emit_line("function main(" + params_str + ") {")
+        } else {
+            js_emit_line("function " + fn_name + "(" + params_str + ") {")
+        }
    }

    let decl = native_list_empty()
@@ -830,50 +1167,133 @@ fn js_is_top_level_decl(stmt: Map<String, Any>) -> Bool {
    if kind == "Import"  { return true }
    if kind == "CgiBlock" { return true }
    if kind == "ServiceBlock" { return true }
+    if kind == "ExternFn" { return true }
    false
 }

 // ── Entry point ───────────────────────────────────────────────────────────────

 fn codegen_js(stmts: [Map<String, Any>], source: String) -> String {
+    codegen_js_inner(stmts, source, false, "")
+}
+
+fn codegen_js_bundle(stmts: [Map<String, Any>], source: String, runtime_content: String) -> String {
+    codegen_js_inner(stmts, source, true, runtime_content)
+}
+
+fn codegen_js_inner(stmts: [Map<String, Any>], source: String, bundle_mode: Bool, runtime_content: String) -> String {
    // Reset per-compile state.
    state_set("__js_int_names", "")
    state_set("__js_match_counter", "")
+    state_set("__js_async_fns", "")
+    state_set("__js_lambda_counter", "")

-    // Preamble: inline the runtime via a single import that side-effects
-    // globalThis. The runtime path is resolved relative to the generated
-    // output; users running `elc --target=js` are responsible for ensuring
-    // el_runtime.js is reachable. For self-contained output, the runtime
-    // could be inlined; that is a follow-up.
+    // Preamble: in bundle mode, inline the runtime and wrap in IIFE.
+    // In module mode, emit a single import that side-effects globalThis.
    js_emit_line("// Generated by elc --target=js")
-    js_emit_line("// Runtime: foundation/el/el-compiler/runtime/el_runtime.js")
-    js_emit_line("import \"./el_runtime.js\";")
-    js_emit_line("const {")
-    js_emit_line("  println, print, el_str_concat, str_concat, str_eq, str_starts_with, str_ends_with,")
-    js_emit_line("  str_len, int_to_str, str_to_int, str_slice, str_contains, str_replace,")
-    js_emit_line("  str_to_upper, str_to_lower, str_trim, str_index_of, str_split, str_char_at,")
-    js_emit_line("  str_char_code, str_lower, str_upper, el_abs, el_max, el_min,")
-    js_emit_line("  el_list_new, el_list_len, el_list_get, el_list_append, el_list_empty, el_list_clone,")
-    js_emit_line("  list_push, list_join, list_range,")
-    js_emit_line("  el_map_new, el_get_field, el_map_get, el_map_set,")
-    js_emit_line("  http_get, http_post, http_post_json,")
-    js_emit_line("  fs_read, fs_write, fs_list,")
-    js_emit_line("  json_parse, json_stringify, json_get, json_get_string, json_get_int,")
-    js_emit_line("  time_now, time_now_utc, sleep_ms, bool_to_str, exit_program,")
-    js_emit_line("  el_retain, el_release,")
-    js_emit_line("  append, len, get, map_get, map_set,")
-    js_emit_line("  native_list_get, native_list_len, native_list_append, native_list_empty,")
-    js_emit_line("  native_list_clone, native_string_chars, native_int_to_str,")
-    js_emit_line("  args, state_set, state_get, state_del, state_keys, env,")
-    js_emit_line("  dharma_connect, dharma_send, dharma_emit, dharma_field, dharma_activate,")
-    js_emit_line("  engram_node, engram_search, engram_activate,")
-    js_emit_line("  llm_call, llm_call_system,")
-    js_emit_line("} = globalThis.__el;")
+    if bundle_mode {
+        js_emit_line("// Bundle mode: runtime inlined, no import statement needed.")
+        js_emit_line("// Drop directly into a <script> tag.")
+        js_emit_line(";(function() {")
+        js_emit_line("\"use strict\";")
+        // Inline the runtime content verbatim (already read from el_runtime.js).
+        // Strip the final ES export lines -- they use `export` syntax which is
+        // not valid inside an IIFE. The globalThis.__el assignment is what matters.
+        js_emit_line(js_strip_es_exports(runtime_content))
+        js_emit_line("")
+    } else {
+        js_emit_line("// Runtime: foundation/el/el-compiler/runtime/el_runtime.js")
+        js_emit_line("import \"./el_runtime.js\";")
+    }
+    // In module mode: destructure all builtins off globalThis.__el so call
+    // sites stay flat (println(x) not el.println(x)).
+    // In bundle mode: function declarations from the inlined runtime are
+    // already in scope within the IIFE -- no destructure needed.
+    if !bundle_mode {
+        js_emit_line("const {")
+        js_emit_line("  println, print, el_str_concat, str_concat, str_eq, str_starts_with, str_ends_with,")
+        js_emit_line("  str_len, int_to_str, str_to_int, str_slice, str_contains, str_replace,")
+        js_emit_line("  str_to_upper, str_to_lower, str_trim, str_index_of, str_split, str_char_at,")
+        js_emit_line("  str_char_code, str_lower, str_upper, el_abs, el_max, el_min,")
+        js_emit_line("  el_list_new, el_list_len, el_list_get, el_list_append, el_list_empty, el_list_clone,")
+        js_emit_line("  list_push, list_join, list_range,")
+        js_emit_line("  el_map_new, el_get_field, el_map_get, el_map_set,")
+        js_emit_line("  http_get, http_post, http_post_json,")
+        js_emit_line("  fs_read, fs_write, fs_list,")
+        js_emit_line("  json_parse, json_stringify, json_get, json_get_string, json_get_int,")
+        js_emit_line("  time_now, time_now_utc, sleep_ms, bool_to_str, exit_program,")
+        js_emit_line("  el_retain, el_release,")
+        js_emit_line("  append, len, get, map_get, map_set,")
+        js_emit_line("  native_list_get, native_list_len, native_list_append, native_list_empty,")
+        js_emit_line("  native_list_clone, native_string_chars, native_int_to_str,")
+        js_emit_line("  args, state_set, state_get, state_del, state_keys, env,")
+        js_emit_line("  dharma_connect, dharma_send, dharma_emit, dharma_field, dharma_activate,")
+        js_emit_line("  engram_node, engram_search, engram_activate,")
+        js_emit_line("  llm_call, llm_call_system,")
+        js_emit_line("  dom_get_element, dom_get_value, dom_set_value, dom_get_text, dom_set_text,")
+        js_emit_line("  dom_set_prop, dom_get_prop, dom_set_style, dom_add_class, dom_remove_class,")
+        js_emit_line("  dom_show, dom_hide, dom_listen, dom_query, dom_query_all, dom_create,")
+        js_emit_line("  dom_append, dom_remove, dom_is_null,")
+        js_emit_line("  dom_set_attr, dom_get_attr, dom_remove_attr, dom_set_html, dom_get_html,")
+        js_emit_line("  dom_get_parent, dom_contains_class, dom_get_checked, dom_set_checked,")
+        js_emit_line("  set_timeout, set_interval, clear_interval,")
+        js_emit_line("  local_storage_get, local_storage_set, local_storage_remove,")
+        js_emit_line("  window_location, window_redirect, window_on_load,")
+        js_emit_line("  console_log,")
+        js_emit_line("  window_set, window_get, native_js, native_js_call,")
+        js_emit_line("  promise_then, promise_catch, promise_resolve, promise_reject,")
+        js_emit_line("  object_assign, object_keys, object_values, json_deep_clone,")
+        js_emit_line("  array_from, type_of, instanceof_check,")
+        js_emit_line("} = globalThis.__el;")
+        js_emit_blank()
+    }
+
+    // URL import pass: emit `import "url"` (module mode) or a comment
+    // (bundle mode) for any import whose path starts with http(s):// or
+    // doesn't end in .el (i.e., it's a JS/CSS/CDN import, not an El source
+    // import which was already inlined by resolve_imports).
+    let n: Int = native_list_len(stmts)
+    let i = 0
+    while i < n {
+        let stmt = native_list_get(stmts, i)
+        let sk: String = stmt["stmt"]
+        if str_eq(sk, "Import") {
+            let ipath: String = stmt["path"]
+            let is_url = str_starts_with(ipath, "http://")
+            let is_url = is_url || str_starts_with(ipath, "https://")
+            let is_js = !str_ends_with(ipath, ".el")
+            if is_url || is_js {
+                if bundle_mode {
+                    js_emit_line("// external: " + ipath)
+                } else {
+                    js_emit_line("import " + js_str_lit(ipath) + ";")
+                }
+            }
+        }
+        let i = i + 1
+    }
    js_emit_blank()

-    // Function definitions
+    // Pre-registration pass: scan all FnDefs for @async decorators so that
+    // forward calls to @async functions get `await` even if the callee is
+    // defined after the caller.
    let n: Int = native_list_len(stmts)
    let i = 0
+    while i < n {
+        let stmt = native_list_get(stmts, i)
+        let sk: String = stmt["stmt"]
+        if str_eq(sk, "FnDef") {
+            let dec: String = stmt["decorator"]
+            if str_eq(dec, "async") {
+                let aname: String = stmt["name"]
+                js_register_async_fn(aname)
+            }
+        }
+        let i = i + 1
+    }
+
+    // Function definitions
+    let i = 0
    while i < n {
        let stmt = native_list_get(stmts, i)
        if js_is_fndef(stmt) {
@@ -921,6 +1341,41 @@ fn codegen_js(stmts: [Map<String, Any>], source: String) -> String {
        js_emit_line("main();")
    }

+    // Close IIFE in bundle mode.
+    if bundle_mode {
+        js_emit_line("")
+        js_emit_line("})();")
+    }
+
    // Return empty string — output was streamed via println
    ""
 }
+
+// Strip ES module export statements from runtime content for IIFE embedding.
+// The runtime ends with `export { ... }` and `export { __el as default }` lines
+// that are invalid inside an IIFE. We strip everything from the first top-level
+// `export {` line onward.
+//
+// Also strips `import` statements at the top if any (though el_runtime.js has none).
+fn js_strip_es_exports(content: String) -> String {
+    let lines: [String] = str_split(content, "\n")
+    let n: Int = native_list_len(lines)
+    let out: [String] = native_list_empty()
+    let i = 0
+    while i < n {
+        let line: String = native_list_get(lines, i)
+        let trimmed: String = str_trim(line)
+        // Stop at top-level `export {` or `export default`
+        if str_starts_with(trimmed, "export {") {
+            let i = n
+        } else {
+            if str_starts_with(trimmed, "export default") {
+                let i = n
+            } else {
+                let out = native_list_append(out, line)
+            }
+        }
+        let i = i + 1
+    }
+    str_join(out, "\n")
+}
@@ -175,6 +175,167 @@ fn duration_unit_nanos(unit: String) -> String {
    "1LL"
 }

+// ── HTML template codegen ─────────────────────────────────────────────────
+//
+// cg_html_template(expr) emits a C statement-expression `({ ... })` that
+// builds the HTML string by chaining el_str_concat calls.
+//
+// Interpolated values are passed through html_escape(); the raw() form
+// bypasses escaping.  {#each} blocks compile to C for-loops that index into
+// the list with el_list_get / el_list_len.
+//
+// A per-template accumulator variable `_html_N` holds the growing string.
+// A global counter stored in state keeps names unique.
+
+fn next_html_id() -> String {
+    let csv: String = state_get("__html_counter")
+    let n = 0
+    if !str_eq(csv, "") {
+        let n = str_to_int(csv)
+    }
+    let n = n + 1
+    state_set("__html_counter", native_int_to_str(n))
+    native_int_to_str(n)
+}
+
+// Emit children nodes into a flat list of C fragment strings (parts).
+// Each part is either a static string fragment (already C-literal form) or
+// a dynamic expression that produces an el_val_t string.
+// We build them all into parts, then the caller wraps with concat chain.
+
+fn cg_html_parts(children: [Map<String, Any>], acc_var: String) -> String {
+    let n: Int = native_list_len(children)
+    let i = 0
+    let out = ""
+    while i < n {
+        let child: Map<String, Any> = native_list_get(children, i)
+        let html_kind: String = child["html"]
+        if str_eq(html_kind, "Text") {
+            let text: String = child["text"]
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", EL_STR(" + c_str_lit(text) + ")); "
+        }
+        if str_eq(html_kind, "Doctype") {
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", EL_STR(\"<!doctype html>\")); "
+        }
+        if str_eq(html_kind, "Interp") {
+            let val_node = child["value"]
+            let val_c: String = cg_expr(val_node)
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", html_escape(" + val_c + ")); "
+        }
+        if str_eq(html_kind, "Raw") {
+            let val_node = child["value"]
+            let val_c: String = cg_expr(val_node)
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", html_raw(" + val_c + ")); "
+        }
+        if str_eq(html_kind, "Element") {
+            let elem_c: String = cg_html_element_str(child, acc_var)
+            let out = out + elem_c
+        }
+        if str_eq(html_kind, "Each") {
+            let each_c: String = cg_html_each(child, acc_var)
+            let out = out + each_c
+        }
+        let i = i + 1
+    }
+    out
+}
+
+// Generate open-tag attribute fragments inline.
+// Parser stores attrs with "kind": "static" | "dynamic" | "bool".
+// Static: "value" is the raw string value (not an expr node).
+// Dynamic: "value" is an expr node.
+// Bool: no "value" field.
+fn cg_html_attrs_str(attrs: [Map<String, Any>], acc_var: String) -> String {
+    let n: Int = native_list_len(attrs)
+    let i = 0
+    let out = ""
+    // Closing-quote snippet: EL_STR("\"") in C text.
+    let close_q: String = "EL_STR(" + c_str_lit("\"") + ")"
+    while i < n {
+        let attr: Map<String, Any> = native_list_get(attrs, i)
+        let attr_name: String = attr["name"]
+        let kind: String = attr["kind"]
+        // Build: EL_STR(" name=\"")
+        let open_val: String = " " + attr_name + "=\""
+        let open_attr: String = "EL_STR(" + c_str_lit(open_val) + ")"
+        if str_eq(kind, "static") {
+            // Static attribute: value is a raw string.
+            let sv: String = attr["value"]
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", " + open_attr + "); "
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", EL_STR(" + c_str_lit(sv) + ")); "
+            let out = out + acc_var + " = el_str_concat(" + acc_var + ", " + close_q + "); "
+        } else {
+            if str_eq(kind, "dynamic") {
+                // Dynamic attribute: value is an expr node — html_escape it.
+                let val_node = attr["value"]
+                let val_c: String = cg_expr(val_node)
+                let out = out + acc_var + " = el_str_concat(" + acc_var + ", " + open_attr + "); "
+                let out = out + acc_var + " = el_str_concat(" + acc_var + ", html_escape(" + val_c + ")); "
+                let out = out + acc_var + " = el_str_concat(" + acc_var + ", " + close_q + "); "
+            } else {
+                // Boolean attribute (no value): emit " name"
+                let bool_attr: String = "EL_STR(" + c_str_lit(" " + attr_name) + ")"
+                let out = out + acc_var + " = el_str_concat(" + acc_var + ", " + bool_attr + "); "
+            }
+        }
+        let i = i + 1
+    }
+    out
+}
+
+// Generate code for a single element, appending into acc_var.
+fn cg_html_element_str(elem: Map<String, Any>, acc_var: String) -> String {
+    let tag: String = elem["tag"]
+    let attrs: [Map<String, Any>] = elem["attrs"]
+    let children: [Map<String, Any>] = elem["children"]
+    let self_closing: Bool = elem["self_closing"]
+    // Open tag: <tagname
+    let out = acc_var + " = el_str_concat(" + acc_var + ", EL_STR(\"<" + tag + "\")); "
+    let out = out + cg_html_attrs_str(attrs, acc_var)
+    if self_closing {
+        // Self-closing void element: />
+        let out = out + acc_var + " = el_str_concat(" + acc_var + ", EL_STR(\"/>\")); "
+    } else {
+        // Close open tag: >
+        let out = out + acc_var + " = el_str_concat(" + acc_var + ", EL_STR(\">\")); "
+        let out = out + cg_html_parts(children, acc_var)
+        let out = out + acc_var + " = el_str_concat(" + acc_var + ", EL_STR(\"</" + tag + ">\")); "
+    }
+    out
+}
+
+// Generate code for {#each list as item} ... {/each}.
+fn cg_html_each(node: Map<String, Any>, acc_var: String) -> String {
+    let list_expr = node["list"]
+    let item_name: String = node["item"]
+    let body_children: [Map<String, Any>] = node["body"]
+    let id: String = next_html_id()
+    let list_var: String = "_html_list_" + id
+    let len_var: String = "_html_len_" + id
+    let idx_var: String = "_html_i_" + id
+    let list_c: String = cg_expr(list_expr)
+    let inner_c: String = cg_html_parts(body_children, acc_var)
+    // Emit: { el_val_t _list = expr; int _len = el_list_len(_list);
+    //         for (int _i = 0; _i < _len; _i++) {
+    //           el_val_t item = el_list_get(_list, _i); inner_c } }
+    "{ el_val_t " + list_var + " = (" + list_c + "); el_val_t " + len_var + " = el_list_len(" + list_var + "); for (el_val_t " + idx_var + " = 0; " + idx_var + " < " + len_var + "; " + idx_var + "++) { el_val_t " + item_name + " = el_list_get(" + list_var + ", " + idx_var + "); " + inner_c + "} } "
+}
+
+// Top-level HTML template codegen — returns a C statement-expression string.
+fn cg_html_template(expr: Map<String, Any>) -> String {
+    let root = expr["root"]
+    let id: String = next_html_id()
+    let acc: String = "_html_" + id
+    // If the root element has doctype:true the parser tagged it from <!doctype html>
+    let doctype_flag: Bool = root["doctype"]
+    let doctype_prefix: String = ""
+    if doctype_flag {
+        let doctype_prefix = acc + " = el_str_concat(" + acc + ", EL_STR(\"<!doctype html>\")); "
+    }
+    let body: String = cg_html_element_str(root, acc)
+    "({ el_val_t " + acc + " = EL_STR(\"\"); " + doctype_prefix + body + acc + "; })"
+}
+
 fn cg_expr(expr: Map<String, Any>) -> String {
    let kind: String = expr["expr"]

@@ -787,6 +948,10 @@ fn cg_expr(expr: Map<String, Any>) -> String {
        return cg_match(expr)
    }

+    if kind == "HtmlTemplate" {
+        return cg_html_template(expr)
+    }
+
    "EL_NULL"
 }

@@ -848,8 +1013,15 @@ fn cg_match(expr: Map<String, Any>) -> String {
                            }
                            let parts = native_list_append(parts, "if (" + subj_var + " == " + bv + ") { " + result_var + " = (" + body_c + "); goto " + done_label + "; } ")
                        } else {
-                            // unknown pattern -> wildcard
-                            let parts = native_list_append(parts, "{ " + result_var + " = (" + body_c + "); goto " + done_label + "; } ")
+                            if str_eq(pkind, "Variant") {
+                                // Enum::Variant pattern — match against the variant name
+                                // string (El enums compile to plain strings).
+                                let variant: String = pat["variant"]
+                                let parts = native_list_append(parts, "if (str_eq(" + subj_var + ", EL_STR(" + c_str_lit(variant) + "))) { " + result_var + " = (" + body_c + "); goto " + done_label + "; } ")
+                            } else {
+                                // unknown pattern -> wildcard
+                                let parts = native_list_append(parts, "{ " + result_var + " = (" + body_c + "); goto " + done_label + "; } ")
+                            }
                        }
                    }
                }
@@ -1136,6 +1308,15 @@ fn cg_stmt(stmt: Map<String, Any>, indent: String, declared: [String]) -> [Strin
    if kind == "Import"  { return declared }
    if kind == "ExternFn" { return declared }
    if kind == "CgiBlock" { return declared }
+    // TryCatch: browser-only control flow. In the C target, emit a comment
+    // noting that the try body runs unconditionally; error handling is a no-op.
+    // Programs that rely on catching JS exceptions should compile with --target=js.
+    if kind == "TryCatch" {
+        let try_body = stmt["try_body"]
+        emit_line(indent + "/* try (C target: exception handling not supported) */")
+        cg_stmts(try_body, indent, native_list_clone(declared))
+        return declared
+    }
    declared
 }

@@ -2049,6 +2230,11 @@ fn builtin_arity(name: String) -> Int {
    if str_eq(name, "bool_to_str") { return 1 }
    // Process
    if str_eq(name, "exit_program") { return 1 }
+    // Process info
+    if str_eq(name, "getpid_now") { return 0 }
+    // stdout redirect (used by elc post-processing)
+    if str_eq(name, "stdout_to_file") { return 1 }
+    if str_eq(name, "stdout_restore") { return 0 }
    // Subprocess execution
    if str_eq(name, "exec_command") { return 1 }
    if str_eq(name, "exec_capture") { return 1 }
@@ -29,7 +29,7 @@ fn compile(source: String) -> String {
    codegen(stmts, source)
 }

-// compile_js — full pipeline (JS target): source string -> JS source string
+// compile_js — full pipeline (JS target, module mode): source string -> JS source string
 fn compile_js(source: String) -> String {
    let tokens: [Map<String, Any>] = lex(source)
    let stmts: [Map<String, Any>] = parse(tokens)
@@ -38,6 +38,20 @@ fn compile_js(source: String) -> String {
    codegen_js(stmts, source)
 }

+// compile_js_with_bundle — JS target in bundle mode.
+// Reads el_runtime.js from runtime_path and inlines it inside an IIFE.
+fn compile_js_with_bundle(source: String, runtime_path: String) -> String {
+    let tokens: [Map<String, Any>] = lex(source)
+    let stmts: [Map<String, Any>] = parse(tokens)
+    el_release(tokens)
+    let runtime_content: String = fs_read(runtime_path)
+    if str_eq(runtime_content, "") {
+        println("el-compiler: warning: --bundle: could not read runtime at " + runtime_path)
+        println("el-compiler: warning: bundle output will be incomplete")
+    }
+    codegen_js_bundle(stmts, source, runtime_content)
+}
+
 // compile_dispatch — pick a backend based on the requested target.
 //   tgt = "c"  | "js"
 // (The parameter is named `tgt` because `target` is a reserved keyword
@@ -48,6 +62,12 @@ fn compile_dispatch(tgt: String, source: String) -> String {
    compile(source)
 }

+// compile_dispatch_bundle — like compile_dispatch but bundle mode for JS.
+fn compile_dispatch_bundle(tgt: String, source: String, runtime_path: String) -> String {
+    if str_eq(tgt, "js") { return compile_js_with_bundle(source, runtime_path) }
+    compile(source)
+}
+
 // Detect a `--target=<lang>` flag in argv and return the target.
 // Returns "c" if none specified or unrecognized.
 fn detect_target(argv: [String]) -> String {
@@ -91,6 +111,126 @@ fn detect_emit_header(argv: [String]) -> Bool {
    return false
 }

+// Detect --bundle flag in argv.
+fn detect_bundle(argv: [String]) -> Bool {
+    let n: Int = native_list_len(argv)
+    let i = 0
+    while i < n {
+        let a: String = native_list_get(argv, i)
+        if str_eq(a, "--bundle") { return true }
+        let i = i + 1
+    }
+    return false
+}
+
+// Detect --minify flag in argv.
+fn detect_minify(argv: [String]) -> Bool {
+    let n: Int = native_list_len(argv)
+    let i = 0
+    while i < n {
+        let a: String = native_list_get(argv, i)
+        if str_eq(a, "--minify") { return true }
+        let i = i + 1
+    }
+    return false
+}
+
+// Detect --obfuscate flag in argv.
+fn detect_obfuscate(argv: [String]) -> Bool {
+    let n: Int = native_list_len(argv)
+    let i = 0
+    while i < n {
+        let a: String = native_list_get(argv, i)
+        if str_eq(a, "--obfuscate") { return true }
+        let i = i + 1
+    }
+    return false
+}
+
+// Build a unique temp file path: /tmp/elc-<pid>-<timestamp>.<suffix>
+fn make_temp_path(suffix: String) -> String {
+    let pid: Int = getpid_now()
+    let ts: Int = time_now()
+    "/tmp/elc-" + native_int_to_str(pid) + "-" + native_int_to_str(ts) + "." + suffix
+}
+
+// Reserved globals that terser and javascript-obfuscator must not mangle.
+// These are referenced from HTML onclick= attributes and other direct window usage.
+fn js_reserved_names() -> String {
+    "neuronDemoToggle,neuronDemoSend,neuronDemoReset,signInWith,signInWithEmail,signUpWithEmail,sendMagicLink,signOut,resetPassword,sendResetEmail,updatePassword,showSignIn,showSignUp,hideReset,setSort,addFamilyMember,removeFamilyMember,copyForPlatform,entHeadcountChange,NEURON_CFG"
+}
+
+// Find a CLI tool by checking node_modules paths first, then falling back to npx.
+// src_dir is the directory of the source file being compiled.
+// Returns the command string to invoke the tool, or "" if not found.
+fn find_node_tool(tool_name: String, src_dir: String) -> String {
+    // 1. Check ./node_modules/.bin/<tool> relative to source file
+    let cand1: String = src_dir + "/node_modules/.bin/" + tool_name
+    let check1: String = str_trim(exec_capture("test -x " + cand1 + " && echo yes 2>/dev/null"))
+    if str_eq(check1, "yes") { return cand1 }
+    // 2. Check ../node_modules/.bin/<tool> (monorepo layout)
+    let parent_dir: String = dirname_of(src_dir)
+    let cand2: String = parent_dir + "/node_modules/.bin/" + tool_name
+    let check2: String = str_trim(exec_capture("test -x " + cand2 + " && echo yes 2>/dev/null"))
+    if str_eq(check2, "yes") { return cand2 }
+    // 3. Fall back to npx if it is on PATH. npx will use the globally cached
+    //    package or download on first use. Use --no to avoid auto-install if
+    //    the package is not already cached; if that fails, try with --yes.
+    let npx_path: String = str_trim(exec_capture("which npx 2>/dev/null"))
+    if !str_eq(npx_path, "") { return "npx --yes " + tool_name }
+    return ""
+}
+
+// apply_minify — run terser on js_path, write result to out_path.
+// Returns true on success, false on failure.
+fn apply_minify(js_path: String, out_path: String, src_dir: String) -> Bool {
+    let terser: String = find_node_tool("terser", src_dir)
+    if str_eq(terser, "") {
+        println("el-compiler: error: terser not found. Run 'npm install terser' in your project directory.")
+        return false
+    }
+    let names: String = js_reserved_names()
+    // Single-quote the mangle reserved list so the shell does not glob-expand
+    // the bracket expression. The compress options are safe without quoting.
+    let compress_opts: String = "passes=2,drop_console=false,drop_debugger=true"
+    let mangle_reserved: String = "'reserved=[" + names + "]'"
+    let cmd: String = terser + " " + js_path + " --compress " + compress_opts + " --mangle " + mangle_reserved + " --output " + out_path
+    let ret: Int = exec_command(cmd)
+    if ret == 0 { return true }
+    println("el-compiler: error: terser failed (exit " + native_int_to_str(ret) + ")")
+    return false
+}
+
+// apply_obfuscate — run javascript-obfuscator on js_path, write result to out_path.
+// Returns true on success, false on failure.
+fn apply_obfuscate(js_path: String, out_path: String, src_dir: String) -> Bool {
+    let obfuscator: String = find_node_tool("javascript-obfuscator", src_dir)
+    if str_eq(obfuscator, "") {
+        println("el-compiler: error: javascript-obfuscator not found. Run 'npm install javascript-obfuscator' in your project directory.")
+        return false
+    }
+    let names: String = js_reserved_names()
+    let cmd: String = obfuscator + " " + js_path + " --output " + out_path + " --compact true --simplify true --string-array true --string-array-encoding base64 --string-array-threshold 0.75 --identifier-names-generator hexadecimal --rename-globals false --self-defending false --reserved-names " + names
+    let ret: Int = exec_command(cmd)
+    if ret == 0 { return true }
+    println("el-compiler: error: javascript-obfuscator failed (exit " + native_int_to_str(ret) + ")")
+    return false
+}
+
+// Resolve the runtime path for --bundle mode.
+// Looks for el_runtime.js next to the source file first;
+// if not found there, looks next to the elc binary itself.
+// Returns "" if not found anywhere (caller emits a warning).
+fn resolve_runtime_path(src_path: String) -> String {
+    let src_dir: String = dirname_of(src_path)
+    let candidate: String = src_dir + "/el_runtime.js"
+    let existing: String = fs_read(candidate)
+    if !str_eq(existing, "") {
+        return candidate
+    }
+    return ""
+}
+
 // Reconstruct an El type annotation string from a parsed type node.
 fn type_node_to_el(t: Map<String, Any>) -> String {
    let k: String = t["kind"]
@@ -249,12 +389,83 @@ fn resolve_imports(src_path: String) -> String {
    return str_join(prefix_chunks, "") + str_join(body_chunks, "")
 }

+// run_with_postprocess — codegen + minify + optional obfuscate pipeline.
+//
+// Called from main() when --minify or --obfuscate is active. Redirects stdout
+// to a temp file during codegen so the output can be passed through the
+// external tools (terser, javascript-obfuscator) before final emission.
+//
+// Pipeline: codegen -> terser -> (javascript-obfuscator) -> stdout or file
+fn run_with_postprocess(tgt: String, source: String, src_path: String, do_bundle: Bool, do_obfuscate: Bool, argc: Int, positional: [String]) -> Void {
+    let src_dir: String = dirname_of(src_path)
+    let tmp_gen: String = make_temp_path("js")
+    let tmp_min: String = make_temp_path("min.js")
+
+    // Redirect stdout to tmp_gen so codegen println output is captured.
+    stdout_to_file(tmp_gen)
+    if do_bundle {
+        let runtime_path: String = resolve_runtime_path(src_path)
+        compile_dispatch_bundle(tgt, source, runtime_path)
+    } else {
+        compile_dispatch(tgt, source)
+    }
+    stdout_restore()
+
+    // Run terser: tmp_gen -> tmp_min
+    let ok_min: Bool = apply_minify(tmp_gen, tmp_min, src_dir)
+    if !ok_min {
+        exec_command("rm -f " + tmp_gen + " " + tmp_min)
+        exit(1)
+    }
+
+    // Determine final result path (either tmp_min or post-obfuscation file).
+    // Use state to pass the final path out of the optional obfuscation branch.
+    state_set("__elc_final_js", tmp_min)
+
+    if do_obfuscate {
+        let tmp_obf: String = make_temp_path("obf.js")
+        let ok_obf: Bool = apply_obfuscate(tmp_min, tmp_obf, src_dir)
+        if !ok_obf {
+            exec_command("rm -f " + tmp_gen + " " + tmp_min + " " + tmp_obf)
+            exit(1)
+        }
+        state_set("__elc_final_js", tmp_obf)
+    }
+
+    let final_path: String = state_get("__elc_final_js")
+    let final_js: String = fs_read(final_path)
+
+    // Clean up all temp files.
+    exec_command("rm -f " + tmp_gen + " " + tmp_min)
+    if do_obfuscate {
+        exec_command("rm -f " + final_path)
+    }
+
+    if argc >= 2 {
+        let out_path: String = native_list_get(positional, 1)
+        let ok: Bool = fs_write(out_path, final_js)
+        if ok {
+            return
+        } else {
+            println("el-compiler: failed to write output")
+            exit(1)
+        }
+    }
+    // No output file: print final JS to stdout.
+    print(final_js)
+}
+
 // main — CLI entry point.
 //
-//   elc <source.el>                            # emit C to stdout
-//   elc --target=js <source.el>                # emit JS to stdout
-//   elc --target=c  <source.el> <out.c>        # write C to file
-//   elc --target=js <source.el> <out.js>       # write JS to file
+//   elc <source.el>                                             # emit C to stdout
+//   elc --target=js <source.el>                                 # emit JS (module) to stdout
+//   elc --target=js --bundle <source.el>                        # emit self-contained JS (IIFE) to stdout
+//   elc --target=js --bundle --minify <source.el>               # emit minified IIFE to stdout
+//   elc --target=js --bundle --obfuscate <source.el>            # emit minified+obfuscated IIFE to stdout
+//   elc --target=c  <source.el> <out.c>                         # write C to file
+//   elc --target=js <source.el> <out.js>                        # write JS to file
+//   elc --target=js --bundle <source.el> <out.js>               # write bundled JS to file
+//   elc --target=js --bundle --minify <source.el> <out.min.js>  # write minified JS to file
 fn main() -> Void {
    let argv: [String] = args()
    // Use `tgt` not `target`: `target` is a reserved keyword in the lexer
@@ -262,12 +473,28 @@ fn main() -> Void {
    // because the function-name position has no token-class restriction.
    let tgt: String = detect_target(argv)
    let do_emit_header: Bool = detect_emit_header(argv)
+    let do_bundle: Bool = detect_bundle(argv)
+    let do_minify: Bool = detect_minify(argv)
+    let do_obfuscate: Bool = detect_obfuscate(argv)
+    // --obfuscate implies --minify: obfuscating unminified code is pointless.
+    if do_obfuscate {
+        let do_minify = true
+    }
    let positional: [String] = strip_flags(argv)
    let argc: Int = native_list_len(positional)
    if argc < 1 {
-        println("el-compiler: usage: elc [--target=c|js] [--emit-header] <source.el> [<output>]")
+        println("el-compiler: usage: elc [--target=c|js] [--bundle] [--minify] [--obfuscate] [--emit-header] <source.el> [<output>]")
        exit(1)
    }
+
+    // --minify and --obfuscate require --target=js
+    if do_minify {
+        if !str_eq(tgt, "js") {
+            println("el-compiler: error: --minify and --obfuscate require --target=js")
+            exit(1)
+        }
+    }
+
    let src_path: String = native_list_get(positional, 0)

    // When --emit-header is requested, parse the source file directly
@@ -283,7 +510,24 @@ fn main() -> Void {
    }

    let source: String = resolve_imports(src_path)
-    let out: String = compile_dispatch(tgt, source)
+
+    // When post-processing (--minify or --obfuscate) is requested, redirect
+    // stdout to a temp file so codegen output can be captured and piped through
+    // the external tools. After codegen, restore stdout before emitting the
+    // final result.
+    if do_minify {
+        run_with_postprocess(tgt, source, src_path, do_bundle, do_obfuscate, argc, positional)
+        exit(0)
+    }
+
+    // Standard path (no post-processing).
+    let out: String = ""
+    if do_bundle {
+        let runtime_path: String = resolve_runtime_path(src_path)
+        let out = compile_dispatch_bundle(tgt, source, runtime_path)
+    } else {
+        let out = compile_dispatch(tgt, source)
+    }
    if argc >= 2 {
        let out_path: String = native_list_get(positional, 1)
        let ok: Bool = fs_write(out_path, out)
@@ -147,6 +147,8 @@ fn keyword_kind(word: String) -> String {
    if word == "accessor" { return "Accessor" }
    if word == "vessel" { return "Vessel" }
    if word == "extern" { return "Extern" }
+    if word == "try" { return "Try" }
+    if word == "catch" { return "Catch" }
    ""
 }

@@ -711,8 +713,13 @@ fn lex(source: String) -> [Map<String, Any>] {
                                                                                                                let tokens = native_list_append(tokens, make_tok("QuestionMark", "?"))
                                                                                                                let i = i + 1
                                                                                                            } else {
-                                                                                                                // unknown char — skip
-                                                                                                                let i = i + 1
+                                                                                                                if ch == "#" {
+                                                                                                                    let tokens = native_list_append(tokens, make_tok("Hash", "#"))
+                                                                                                                    let i = i + 1
+                                                                                                                } else {
+                                                                                                                    // unknown char — skip
+                                                                                                                    let i = i + 1
+                                                                                                                }
                                                                                                            }
                                                                                                        }
                                                                                                    }
@@ -142,6 +142,460 @@ fn parse_params(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {

 // ── Expression parsing ────────────────────────────────────────────────────────

+// ── HTML template parser ──────────────────────────────────────────────────────
+//
+// HTML templates are written as unquoted HTML in expression position:
+//   return <div class="x"><h1>{title}</h1></div>
+//
+// The parser detects an HTML template when parse_primary sees Lt followed
+// by a lowercase ident (a known or assumed HTML element name) or `!` (for
+// <!doctype html>). It then recursively parses the HTML into an AST.
+//
+// AST nodes produced:
+//   { "expr": "HtmlTemplate", "root": child_node }
+//   { "html": "Element", "tag": "div", "attrs": [...], "children": [...], "self_closing": bool }
+//   { "html": "Text", "text": "..." }
+//   { "html": "Interp", "value": expr_node }
+//   { "html": "Each", "list": expr_node, "item": "name", "body": [...] }
+//   { "html": "Doctype" }
+//   { "html": "Raw", "value": expr_node }
+
+fn is_html_tag_name(name: String) -> Bool {
+    if str_eq(name, "a") { return true }
+    if str_eq(name, "abbr") { return true }
+    if str_eq(name, "address") { return true }
+    if str_eq(name, "area") { return true }
+    if str_eq(name, "article") { return true }
+    if str_eq(name, "aside") { return true }
+    if str_eq(name, "audio") { return true }
+    if str_eq(name, "b") { return true }
+    if str_eq(name, "base") { return true }
+    if str_eq(name, "blockquote") { return true }
+    if str_eq(name, "body") { return true }
+    if str_eq(name, "br") { return true }
+    if str_eq(name, "button") { return true }
+    if str_eq(name, "canvas") { return true }
+    if str_eq(name, "caption") { return true }
+    if str_eq(name, "cite") { return true }
+    if str_eq(name, "code") { return true }
+    if str_eq(name, "col") { return true }
+    if str_eq(name, "colgroup") { return true }
+    if str_eq(name, "data") { return true }
+    if str_eq(name, "datalist") { return true }
+    if str_eq(name, "dd") { return true }
+    if str_eq(name, "del") { return true }
+    if str_eq(name, "details") { return true }
+    if str_eq(name, "dfn") { return true }
+    if str_eq(name, "dialog") { return true }
+    if str_eq(name, "div") { return true }
+    if str_eq(name, "dl") { return true }
+    if str_eq(name, "dt") { return true }
+    if str_eq(name, "em") { return true }
+    if str_eq(name, "embed") { return true }
+    if str_eq(name, "fieldset") { return true }
+    if str_eq(name, "figcaption") { return true }
+    if str_eq(name, "figure") { return true }
+    if str_eq(name, "footer") { return true }
+    if str_eq(name, "form") { return true }
+    if str_eq(name, "h1") { return true }
+    if str_eq(name, "h2") { return true }
+    if str_eq(name, "h3") { return true }
+    if str_eq(name, "h4") { return true }
+    if str_eq(name, "h5") { return true }
+    if str_eq(name, "h6") { return true }
+    if str_eq(name, "head") { return true }
+    if str_eq(name, "header") { return true }
+    if str_eq(name, "hr") { return true }
+    if str_eq(name, "html") { return true }
+    if str_eq(name, "i") { return true }
+    if str_eq(name, "iframe") { return true }
+    if str_eq(name, "img") { return true }
+    if str_eq(name, "input") { return true }
+    if str_eq(name, "ins") { return true }
+    if str_eq(name, "kbd") { return true }
+    if str_eq(name, "label") { return true }
+    if str_eq(name, "legend") { return true }
+    if str_eq(name, "li") { return true }
+    if str_eq(name, "link") { return true }
+    if str_eq(name, "main") { return true }
+    if str_eq(name, "map") { return true }
+    if str_eq(name, "mark") { return true }
+    if str_eq(name, "menu") { return true }
+    if str_eq(name, "meta") { return true }
+    if str_eq(name, "meter") { return true }
+    if str_eq(name, "nav") { return true }
+    if str_eq(name, "noscript") { return true }
+    if str_eq(name, "object") { return true }
+    if str_eq(name, "ol") { return true }
+    if str_eq(name, "optgroup") { return true }
+    if str_eq(name, "option") { return true }
+    if str_eq(name, "output") { return true }
+    if str_eq(name, "p") { return true }
+    if str_eq(name, "param") { return true }
+    if str_eq(name, "picture") { return true }
+    if str_eq(name, "pre") { return true }
+    if str_eq(name, "progress") { return true }
+    if str_eq(name, "q") { return true }
+    if str_eq(name, "rp") { return true }
+    if str_eq(name, "rt") { return true }
+    if str_eq(name, "ruby") { return true }
+    if str_eq(name, "s") { return true }
+    if str_eq(name, "samp") { return true }
+    if str_eq(name, "script") { return true }
+    if str_eq(name, "section") { return true }
+    if str_eq(name, "select") { return true }
+    if str_eq(name, "small") { return true }
+    if str_eq(name, "source") { return true }
+    if str_eq(name, "span") { return true }
+    if str_eq(name, "strong") { return true }
+    if str_eq(name, "style") { return true }
+    if str_eq(name, "sub") { return true }
+    if str_eq(name, "summary") { return true }
+    if str_eq(name, "sup") { return true }
+    if str_eq(name, "table") { return true }
+    if str_eq(name, "tbody") { return true }
+    if str_eq(name, "td") { return true }
+    if str_eq(name, "template") { return true }
+    if str_eq(name, "textarea") { return true }
+    if str_eq(name, "tfoot") { return true }
+    if str_eq(name, "th") { return true }
+    if str_eq(name, "thead") { return true }
+    if str_eq(name, "time") { return true }
+    if str_eq(name, "title") { return true }
+    if str_eq(name, "tr") { return true }
+    if str_eq(name, "track") { return true }
+    if str_eq(name, "u") { return true }
+    if str_eq(name, "ul") { return true }
+    if str_eq(name, "var") { return true }
+    if str_eq(name, "video") { return true }
+    if str_eq(name, "wbr") { return true }
+    false
+}
+
+fn is_void_element(name: String) -> Bool {
+    if str_eq(name, "area") { return true }
+    if str_eq(name, "base") { return true }
+    if str_eq(name, "br") { return true }
+    if str_eq(name, "col") { return true }
+    if str_eq(name, "embed") { return true }
+    if str_eq(name, "hr") { return true }
+    if str_eq(name, "img") { return true }
+    if str_eq(name, "input") { return true }
+    if str_eq(name, "link") { return true }
+    if str_eq(name, "meta") { return true }
+    if str_eq(name, "param") { return true }
+    if str_eq(name, "source") { return true }
+    if str_eq(name, "track") { return true }
+    if str_eq(name, "wbr") { return true }
+    false
+}
+
+// Collect tokens as text content until we hit Lt, LBrace, Eof, or a
+// closing-tag marker (Lt Slash). Returns { "text": "...", "pos": p }
+fn parse_html_text_tokens(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
+    let parts: [String] = native_list_empty()
+    let p = pos
+    let running = true
+    while running {
+        let k = tok_kind(tokens, p)
+        if str_eq(k, "Eof") {
+            let running = false
+        } else {
+            if str_eq(k, "Lt") {
+                let running = false
+            } else {
+                if str_eq(k, "LBrace") {
+                    let running = false
+                } else {
+                    // Check for </: Lt already stops us, but Slash alone
+                    // (after consuming whitespace) also stops text.
+                    // Anything else is text content.
+                    let v = tok_value(tokens, p)
+                    let parts = native_list_append(parts, v)
+                    let p = p + 1
+                }
+            }
+        }
+    }
+    { "text": str_join(parts, " "), "pos": p }
+}
+
+// Parse an attribute list: (attrname | attrname="val" | attrname={expr})*
+// Stops at Gt or Slash (for self-closing />).
+fn parse_html_attrs(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
+    let attrs: [Map<String, Any>] = native_list_empty()
+    let p = pos
+    let running = true
+    while running {
+        let k = tok_kind(tokens, p)
+        if str_eq(k, "Gt") {
+            let running = false
+        } else {
+            if str_eq(k, "Slash") {
+                let running = false
+            } else {
+                if str_eq(k, "Eof") {
+                    let running = false
+                } else {
+                    // Attribute name: could be Ident or keyword used as attr name
+                    let attr_name = tok_value(tokens, p)
+                    let p = p + 1
+                    let k2 = tok_kind(tokens, p)
+                    if str_eq(k2, "Eq") {
+                        let p = p + 1
+                        let k3 = tok_kind(tokens, p)
+                        if str_eq(k3, "Str") {
+                            // static: attr="value"
+                            let attr_val = tok_value(tokens, p)
+                            let p = p + 1
+                            let attrs = native_list_append(attrs, { "name": attr_name, "kind": "static", "value": attr_val })
+                        } else {
+                            if str_eq(k3, "LBrace") {
+                                // dynamic: attr={expr}
+                                let r = parse_expr(tokens, p + 1)
+                                let val_node = r["node"]
+                                let p = r["pos"]
+                                let p = expect(tokens, p, "RBrace")
+                                let attrs = native_list_append(attrs, { "name": attr_name, "kind": "dynamic", "value": val_node })
+                            } else {
+                                // malformed, skip
+                            }
+                        }
+                    } else {
+                        // boolean attribute
+                        let attrs = native_list_append(attrs, { "name": attr_name, "kind": "bool" })
+                    }
+                }
+            }
+        }
+    }
+    { "attrs": attrs, "pos": p }
+}
+
+// Parse the children of an HTML element until we see the closing tag </tag>
+// or EOF. Returns { "children": [...], "pos": p_after_closing_tag }
+fn parse_html_children(tokens: [Map<String, Any>], pos: Int, parent_tag: String) -> Map<String, Any> {
+    let children: [Map<String, Any>] = native_list_empty()
+    let p = pos
+    let running = true
+    while running {
+        let k = tok_kind(tokens, p)
+        if str_eq(k, "Eof") {
+            let running = false
+        } else {
+            if str_eq(k, "Lt") {
+                // Check for closing tag: </
+                let k2 = tok_kind(tokens, p + 1)
+                if str_eq(k2, "Slash") {
+                    // </tagname> — consume and stop
+                    let p = p + 2
+                    // skip tag name
+                    let close_name = tok_value(tokens, p)
+                    let p = p + 1
+                    // consume >
+                    let p = expect(tokens, p, "Gt")
+                    let running = false
+                } else {
+                    if str_eq(k2, "Not") {
+                        // Possible <!doctype html>
+                        let k3_v = tok_value(tokens, p + 2)
+                        if str_eq(k3_v, "doctype") {
+                            // consume <!doctype html>
+                            let p = p + 2
+                            // skip until >
+                            let scanning = true
+                            while scanning {
+                                let ck = tok_kind(tokens, p)
+                                if str_eq(ck, "Eof") { let scanning = false }
+                                if str_eq(ck, "Gt") {
+                                    let p = p + 1
+                                    let scanning = false
+                                } else {
+                                    let p = p + 1
+                                }
+                            }
+                            let children = native_list_append(children, { "html": "Doctype" })
+                        } else {
+                            let p = p + 1
+                        }
+                    } else {
+                        // nested element
+                        let r = parse_html_element(tokens, p)
+                        let child = r["node"]
+                        let p = r["pos"]
+                        let children = native_list_append(children, child)
+                    }
+                }
+            } else {
+                if str_eq(k, "LBrace") {
+                    // Interpolation: {expr} or {#each ...} or {/each}
+                    let k2 = tok_kind(tokens, p + 1)
+                    if str_eq(k2, "Hash") {
+                        // {#each list as item}
+                        let k3_v = tok_value(tokens, p + 2)
+                        if str_eq(k3_v, "each") {
+                            let p = p + 3
+                            // parse list expr up to "as" keyword
+                            let prev_no_block: String = state_get("__no_block_expr")
+                            state_set("__no_block_expr", "1")
+                            let r_list = parse_expr(tokens, p)
+                            state_set("__no_block_expr", prev_no_block)
+                            let list_expr = r_list["node"]
+                            let p = r_list["pos"]
+                            // expect "as"
+                            let p = expect(tokens, p, "As")
+                            // item variable name
+                            let item_name = tok_value(tokens, p)
+                            let p = p + 1
+                            // consume closing }
+                            let p = expect(tokens, p, "RBrace")
+                            // parse body until {/each}
+                            let r_body = parse_html_each_body(tokens, p)
+                            let body_children = r_body["children"]
+                            let p = r_body["pos"]
+                            let each_node: Map<String, Any> = { "html": "Each", "list": list_expr, "item": item_name, "body": body_children }
+                            let children = native_list_append(children, each_node)
+                        } else {
+                            let p = p + 1
+                        }
+                    } else {
+                        if str_eq(k2, "Slash") {
+                            // {/each} — end of each block, stop
+                            // skip {/each}
+                            let p = p + 2
+                            // skip "each"
+                            let p = p + 1
+                            // skip }
+                            let p = expect(tokens, p, "RBrace")
+                            let running = false
+                        } else {
+                            // regular {expr}
+                            let r = parse_expr(tokens, p + 1)
+                            let interp_val = r["node"]
+                            let p = r["pos"]
+                            let p = expect(tokens, p, "RBrace")
+                            // Check if the expr is a call to raw()
+                            let is_raw_call = false
+                            let interp_kind: String = interp_val["expr"]
+                            if str_eq(interp_kind, "Call") {
+                                let fn_node = interp_val["func"]
+                                let fn_kind: String = fn_node["expr"]
+                                if str_eq(fn_kind, "Ident") {
+                                    let fn_name_v: String = fn_node["name"]
+                                    if str_eq(fn_name_v, "raw") {
+                                        let is_raw_call = true
+                                    }
+                                }
+                            }
+                            if is_raw_call {
+                                let raw_args = interp_val["args"]
+                                let raw_inner = native_list_get(raw_args, 0)
+                                let children = native_list_append(children, { "html": "Raw", "value": raw_inner })
+                            } else {
+                                let children = native_list_append(children, { "html": "Interp", "value": interp_val })
+                            }
+                        }
+                    }
+                } else {
+                    // Text tokens — collect run of non-special tokens
+                    let r_text = parse_html_text_tokens(tokens, p)
+                    let text_str: String = r_text["text"]
+                    let p = r_text["pos"]
+                    let text_trimmed: String = str_trim(text_str)
+                    if !str_eq(text_trimmed, "") {
+                        let children = native_list_append(children, { "html": "Text", "text": text_trimmed })
+                    }
+                }
+            }
+        }
+    }
+    { "children": children, "pos": p }
+}
+
+// Parse body of {#each} until {/each}. Mirrors parse_html_children but
+// stops at the {/each} sentinel rather than a closing element tag.
+fn parse_html_each_body(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
+    parse_html_children(tokens, pos, "__each__")
+}
+
+// Parse a single HTML element: <tag attrs> children </tag>
+// or self-closing: <tag attrs/>
+// Pos points to the Lt token.
+fn parse_html_element(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
+    let p = pos
+    // consume <
+    let p = expect(tokens, p, "Lt")
+    // tag name
+    let tag_name = tok_value(tokens, p)
+    let p = p + 1
+    // parse attributes
+    let r_attrs = parse_html_attrs(tokens, p)
+    let attrs = r_attrs["attrs"]
+    let p = r_attrs["pos"]
+    // check for self-closing /> or void element
+    let k = tok_kind(tokens, p)
+    let self_closing = false
+    if str_eq(k, "Slash") {
+        // />
+        let p = p + 1
+        let p = expect(tokens, p, "Gt")
+        let self_closing = true
+        return make_result({ "html": "Element", "tag": tag_name, "attrs": attrs, "children": native_list_empty(), "self_closing": true }, p)
+    }
+    // consume >
+    let p = expect(tokens, p, "Gt")
+    // void elements have no children, no closing tag
+    if is_void_element(tag_name) {
+        return make_result({ "html": "Element", "tag": tag_name, "attrs": attrs, "children": native_list_empty(), "self_closing": true }, p)
+    }
+    // parse children
+    let r_children = parse_html_children(tokens, p, tag_name)
+    let children = r_children["children"]
+    let p = r_children["pos"]
+    make_result({ "html": "Element", "tag": tag_name, "attrs": attrs, "children": children, "self_closing": false }, p)
+}
+
+// Entry point for HTML template parsing.
+// Pos points to Lt (or Lt Not for <!doctype>).
+// May parse an optional <!doctype html> prefix followed by the root element.
+fn parse_html_template(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
+    let p = pos
+    // Check for <!doctype html>
+    let doctype = false
+    let k = tok_kind(tokens, p)
+    let k2 = tok_kind(tokens, p + 1)
+    if str_eq(k, "Lt") {
+        if str_eq(k2, "Not") {
+            let k3_v = tok_value(tokens, p + 2)
+            if str_eq(k3_v, "doctype") {
+                let doctype = true
+                // consume <!doctype html>
+                let p = p + 2
+                let scanning = true
+                while scanning {
+                    let ck = tok_kind(tokens, p)
+                    if str_eq(ck, "Eof") { let scanning = false }
+                    if str_eq(ck, "Gt") {
+                        let p = p + 1
+                        let scanning = false
+                    } else {
+                        let p = p + 1
+                    }
+                }
+            }
+        }
+    }
+    // Parse root element
+    let r = parse_html_element(tokens, p)
+    let root = r["node"]
+    let p = r["pos"]
+    let root_with_doctype = root
+    if doctype {
+        let root_with_doctype = { "html": root["html"], "tag": root["tag"], "attrs": root["attrs"], "children": root["children"], "self_closing": root["self_closing"], "doctype": true }
+    }
+    make_result({ "expr": "HtmlTemplate", "root": root_with_doctype }, p)
+}
+
 fn parse_primary(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
    let k = tok_kind(tokens, pos)
    let v = tok_value(tokens, pos)
@@ -166,6 +620,22 @@ fn parse_primary(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
        return make_result({ "expr": "Bool", "value": v }, pos + 1)
    }

+    // HTML template literal: <tagname ...>...</tagname> or <!doctype html>...
+    // Detected in value position only; `<` in comparison position is already
+    // consumed by parse_binop before parse_primary is reached.
+    if k == "Lt" {
+        let k2 = tok_kind(tokens, pos + 1)
+        if str_eq(k2, "Not") {
+            return parse_html_template(tokens, pos)
+        }
+        if str_eq(k2, "Ident") {
+            let tag_candidate = tok_value(tokens, pos + 1)
+            if is_html_tag_name(tag_candidate) {
+                return parse_html_template(tokens, pos)
+            }
+        }
+    }
+
    // Identifier
    if k == "Ident" {
        return make_result({ "expr": "Ident", "name": v }, pos + 1)
@@ -279,6 +749,30 @@ fn parse_primary(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
        return r
    }

+    // Anonymous function literal (lambda): fn(params) -> RetType { body }
+    // Used for inline callbacks: dom_listen(el, "click", fn(e: Any) -> Void { ... })
+    // Produces a Lambda expression node (distinct from a named FnDef statement).
+    if k == "Fn" {
+        let p = pos + 1
+        let r = parse_params(tokens, p)
+        let params = r["params"]
+        let p = r["pos"]
+        let ret_type = ""
+        let k2 = tok_kind(tokens, p)
+        if k2 == "Arrow" {
+            let p = p + 1
+            let kt = tok_kind(tokens, p)
+            if kt == "Ident" {
+                let ret_type = tok_value(tokens, p)
+            }
+            let p = skip_type(tokens, p)
+        }
+        let r2 = parse_block(tokens, p)
+        let body = r2["stmts"]
+        let p = r2["pos"]
+        return make_result({ "expr": "Lambda", "params": params, "body": body, "ret_type": ret_type }, p)
+    }
+
    // Unary not
    if k == "Not" {
        let r = parse_primary(tokens, pos + 1)
@@ -408,6 +902,13 @@ fn parse_pattern(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
        if v == "_" {
            return make_result({ "pattern": "Wildcard" }, pos + 1)
        }
+        // Check for Enum::Variant pattern (Color::Red, Status::Ok, etc.)
+        // Lexed as: Ident ColonColon Ident
+        let next_k = tok_kind(tokens, pos + 1)
+        if next_k == "ColonColon" {
+            let variant_name = tok_value(tokens, pos + 2)
+            return make_result({ "pattern": "Variant", "enum_name": v, "variant": variant_name }, pos + 3)
+        }
        return make_result({ "pattern": "Binding", "name": v }, pos + 1)
    }
    if k == "Int" {
@@ -737,11 +1238,16 @@ fn parse_stmt(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
        return make_result({ "stmt": "FnDef", "name": name, "params": params, "body": body, "ret_type": ret_type }, p)
    }

-    // type definition
+    // type definition: `type Name = { field: Type, ... }`
+    // The `=` between the name and the brace is optional in the spec but
+    // present in practice. Skip it if present before consuming the LBrace.
    if k == "Type" {
        let p = pos + 1
        let name = tok_value(tokens, p)
        let p = p + 1
+        // Consume optional `=` before the opening brace
+        let pk = tok_kind(tokens, p)
+        if pk == "Eq" { let p = p + 1 }
        let p = expect(tokens, p, "LBrace")
        let fields: [Map<String, Any>] = native_list_empty()
        let running = true
@@ -876,6 +1382,40 @@ fn parse_stmt(tokens: [Map<String, Any>], pos: Int) -> Map<String, Any> {
        return make_result({ "stmt": "For", "item": item_name, "list": list_expr, "body": body }, p)
    }

+    // try/catch statement
+    // try { body } catch (name: Type) { handler }
+    // The catch variable name and type are both captured; type is skipped.
+    if k == "Try" {
+        let p = pos + 1
+        let r_try = parse_block(tokens, p)
+        let try_body = r_try["stmts"]
+        let p = r_try["pos"]
+        let catch_name = "err"
+        let k2 = tok_kind(tokens, p)
+        if str_eq(k2, "Catch") {
+            let p = p + 1
+            let p = expect(tokens, p, "LParen")
+            // catch variable name
+            let kn = tok_kind(tokens, p)
+            if str_eq(kn, "Ident") {
+                let catch_name = tok_value(tokens, p)
+                let p = p + 1
+            }
+            // optional type annotation: : Type
+            let k3 = tok_kind(tokens, p)
+            if str_eq(k3, "Colon") {
+                let p = p + 1
+                let p = skip_type(tokens, p)
+            }
+            let p = expect(tokens, p, "RParen")
+            let r_catch = parse_block(tokens, p)
+            let catch_body = r_catch["stmts"]
+            let p = r_catch["pos"]
+            return make_result({ "stmt": "TryCatch", "try_body": try_body, "catch_name": catch_name, "catch_body": catch_body }, p)
+        }
+        return make_result({ "stmt": "TryCatch", "try_body": try_body, "catch_name": catch_name, "catch_body": native_list_empty() }, p)
+    }
+
    // @decorator — capture decorator name and attach to following stmt
    if k == "At" {
        let p = pos + 1
@@ -0,0 +1,200 @@
+// browser-auth.el -- El-compiled auth flow using Supabase
+//
+// Compile: elc --target=js --bundle examples/browser-auth.el > auth.js
+// (requires el_runtime.js in the same directory as browser-auth.el)
+//
+// Demonstrates:
+//   - extern fn for declaring Supabase client constructor
+//   - anonymous function literals for callbacks
+//   - method call syntax on Any-typed values (client.auth.signInWithOtp)
+//   - try/catch for error handling
+//   - @async functions with DOM interaction
+//   - DOM bridge: dom_get_element, dom_get_value, dom_set_text, dom_add_class
+//     dom_remove_class, dom_show, dom_hide, dom_is_null
+//   - window_set to expose El functions to the browser global scope
+//   - local_storage_set/get for session hints
+//   - set_timeout for transient UI state
+//   - state_set/get for component state
+//
+// Expected HTML elements:
+//   #acct-email-input   -- email text input
+//   #send-link-btn      -- submit button
+//   #auth-message       -- status message container
+//   #auth-form          -- the form to hide after success
+//
+// The Supabase JS SDK is loaded from CDN via a <script> tag before auth.js.
+// supabase_create_client is declared extern: the runtime provides it via
+// the global supabase.createClient function exposed by the CDN bundle.
+
+// ── External declarations ─────────────────────────────────────────────────
+//
+// These functions are provided by the JS environment (CDN script tags).
+// No body is emitted -- the compiler just records the names.
+
+extern fn supabase_create_client(url: String, key: String) -> Any
+
+// ── UI helpers ─────────────────────────────────────────────────────────────
+
+fn show_message(text: String, is_error: Bool) -> Void {
+    let msg_el = dom_get_element("auth-message")
+    if !dom_is_null(msg_el) {
+        dom_set_text(msg_el, text)
+        dom_remove_class(msg_el, "hidden")
+        if is_error {
+            dom_add_class(msg_el, "error")
+            dom_remove_class(msg_el, "success")
+        } else {
+            dom_add_class(msg_el, "success")
+            dom_remove_class(msg_el, "error")
+        }
+    }
+}
+
+fn set_button_loading(loading: Bool) -> Void {
+    let btn = dom_get_element("send-link-btn")
+    if !dom_is_null(btn) {
+        if loading {
+            dom_set_text(btn, "Sending...")
+            dom_set_attr(btn, "disabled", "true")
+        } else {
+            dom_set_text(btn, "Send Magic Link")
+            dom_remove_attr(btn, "disabled")
+        }
+    }
+}
+
+fn clear_message() -> Void {
+    let msg_el = dom_get_element("auth-message")
+    if !dom_is_null(msg_el) {
+        dom_add_class(msg_el, "hidden")
+        dom_set_text(msg_el, "")
+    }
+}
+
+// ── Email validation ───────────────────────────────────────────────────────
+
+fn is_valid_email(email: String) -> Bool {
+    let trimmed: String = str_trim(email)
+    if str_len(trimmed) < 5 { return false }
+    let at_pos: Int = str_index_of(trimmed, "@")
+    if at_pos < 1 { return false }
+    let dot_pos: Int = str_index_of(trimmed, ".")
+    if dot_pos < at_pos + 2 { return false }
+    return true
+}
+
+// ── Supabase client construction ──────────────────────────────────────────
+//
+// Build a Supabase client from config injected into the page as NEURON_CFG.
+// The extern fn supabase_create_client maps to supabase.createClient on
+// the global object exposed by the CDN bundle.
+
+fn get_supabase_client() -> Any {
+    let cfg = window_get("NEURON_CFG")
+    if dom_is_null(cfg) {
+        return null
+    }
+    let url: String = cfg["supabaseUrl"]
+    let key: String = cfg["supabaseAnonKey"]
+    supabase_create_client(url, key)
+}
+
+// ── Auth flow ──────────────────────────────────────────────────────────────
+
+@async
+fn send_magic_link() -> Void {
+    let email_el = dom_get_element("acct-email-input")
+    if dom_is_null(email_el) {
+        show_message("Could not find email input", true)
+        return null
+    }
+
+    let email: String = str_trim(dom_get_value(email_el))
+
+    if !is_valid_email(email) {
+        show_message("Please enter a valid email address", true)
+        return null
+    }
+
+    clear_message()
+    set_button_loading(true)
+    state_set("auth_email", email)
+
+    // Build the Supabase client and call auth.signInWithOtp directly.
+    // Method call syntax on Any-typed values: client.auth.signInWithOtp(opts)
+    // No native_js_call required.
+    let client = get_supabase_client()
+    if dom_is_null(client) {
+        show_message("Auth service not configured", true)
+        set_button_loading(false)
+        return null
+    }
+
+    try {
+        let opts: Map<String, Any> = { "email": email }
+        // client is Any-typed; .auth returns the auth sub-client (also Any).
+        // .signInWithOtp(opts) returns a Promise. @async + await handles it.
+        let resp = client.auth.signInWithOtp(opts)
+        let err = resp["error"]
+        if !dom_is_null(err) {
+            let msg: String = err["message"]
+            show_message("Error: " + msg, true)
+        } else {
+            local_storage_set("auth_pending_email", email)
+            show_message("Magic link sent! Check your inbox for " + email, false)
+            let form = dom_get_element("auth-form")
+            if !dom_is_null(form) {
+                dom_hide(form)
+            }
+        }
+    } catch (err: Any) {
+        show_message("Unexpected error. Please try again.", true)
+    }
+
+    set_button_loading(false)
+}
+
+// ── Keyboard support ───────────────────────────────────────────────────────
+
+fn handle_email_keydown(event: Any) -> Void {
+    let key: String = dom_get_prop(event, "key")
+    if str_eq(key, "Enter") {
+        send_magic_link()
+    }
+}
+
+// ── Initialization ─────────────────────────────────────────────────────────
+
+fn init_auth() -> Void {
+    let email_el = dom_get_element("acct-email-input")
+    if !dom_is_null(email_el) {
+        // Pre-fill from local storage if a pending send was interrupted.
+        let pending: String = local_storage_get("auth_pending_email")
+        if !str_eq(pending, "") {
+            dom_set_value(email_el, pending)
+        }
+        // Anonymous function literal for inline event handler.
+        dom_listen(email_el, "keydown", fn(event: Any) -> Void {
+            let key: String = dom_get_prop(event, "key")
+            if str_eq(key, "Enter") {
+                send_magic_link()
+            }
+        })
+    }
+    let btn = dom_get_element("send-link-btn")
+    if !dom_is_null(btn) {
+        dom_listen(btn, "click", fn(event: Any) -> Void {
+            send_magic_link()
+        })
+    }
+    state_set("auth_initialized", "true")
+}
+
+fn main() -> Void {
+    // Expose send_magic_link globally so inline event handlers can call it.
+    window_set("sendMagicLink", send_magic_link)
+    window_set("initAuth", init_auth)
+
+    // Run init when DOM is ready.
+    window_on_load(init_auth)
+}
@@ -0,0 +1,41 @@
+// browser-counter.el — canonical browser DOM bridge example
+//
+// Compile with:  elc --target=js examples/browser-counter.el > counter.js
+//
+// Then include in an HTML page that has a <span id="count-display"> element.
+// The page can call window.increment() from any onclick handler, e.g.:
+//   <button onclick="increment()">+1</button>
+//
+// On load the display is initialised to "0".  Each call to increment()
+// adds 1 and updates the display text.
+//
+// Demonstrates:
+//   - dom_get_element   to locate a DOM node by id
+//   - dom_set_text      to update visible text content
+//   - dom_is_null       to guard against missing elements
+//   - window_set        to expose an El function for inline event handlers
+//   - state_set/get     for in-memory counter state (survives calls, resets
+//                       on page reload — same semantics as the C state_* API)
+
+fn init() -> Void {
+    state_set("counter", 0)
+    let display = dom_get_element("count-display")
+    if !dom_is_null(display) {
+        dom_set_text(display, "0")
+    }
+}
+
+fn increment() -> Void {
+    let current = str_to_int(state_get("counter"))
+    let next = current + 1
+    state_set("counter", next)
+    let display = dom_get_element("count-display")
+    if !dom_is_null(display) {
+        dom_set_text(display, int_to_str(next))
+    }
+}
+
+fn main() -> Void {
+    init()
+    window_set("increment", increment)
+}
@@ -0,0 +1,40 @@
+// html-page.el — Example of native HTML template syntax in El.
+//
+// El HTML templates let you write HTML directly in expression position.
+// Interpolated values are automatically HTML-escaped.
+// Use raw(expr) to bypass escaping when you know the content is safe.
+//
+// Compile and run:
+//   ./dist/platform/elc examples/html-page.el > /tmp/html-page.c
+//   cc -std=c11 -I el-compiler/runtime -lcurl -lpthread \
+//      -o /tmp/html-page /tmp/html-page.c el-compiler/runtime/el_runtime.c
+//   /tmp/html-page
+
+fn render_item(item: String) -> String {
+    return <li class="item">{item}</li>
+}
+
+fn render_page(title: String, items: [String]) -> String {
+    return <!doctype html>
+    <html lang="en">
+        <head>
+            <meta charset="utf-8" />
+            <title>{title}</title>
+        </head>
+        <body>
+            <h1>{title}</h1>
+            <ul>
+                {#each items as item}
+                    <li class="item">{item}</li>
+                {/each}
+            </ul>
+            <p>Built with El HTML templates</p>
+        </body>
+    </html>
+}
+
+fn main() -> Void {
+    let items: [String] = ["Lexer", "Parser", "Codegen", "Runtime"]
+    let page: String = render_page("El Compiler Stages", items)
+    println(page)
+}
@@ -1,6 +1,6 @@
 # El JavaScript Backend (codegen-js)

-**Status:** scaffolded. Hello-world compiles and runs. ~50% language coverage. Core runtime (~30 builtins) implemented. CGI / DHARMA / LLM / Engram intentionally stubbed.
+**Status:** Phase 5 complete. ~90% language coverage. Full browser JavaScript can be expressed structurally in El without any `native_js` escape hatches. All additions since Phase 4: anonymous function literals (lambda syntax), try/catch statement, extern fn declarations, direct JS method call syntax on Any-typed values, Promise helpers, Object/Array utilities, and URL import declarations. Proof: `examples/browser-auth.el` is a complete Supabase auth flow with zero `native_js` or `native_js_call` calls.

 **Authoritative files**

@@ -57,27 +57,36 @@ Same function names as `el_runtime.c` wherever possible, so codegen-js can emit

 **The codegen-js generated output uses the global-namespace style:** every emitted file starts with `import './el_runtime.js'` (which side-effects the globals) so call sites stay flat — `println(x)` not `el.println(x)`. This matches the C backend's flat call surface and keeps the generated code grep-compatible across targets.

-### Implemented today (~30 builtins)
+### Implemented (~90 builtins)

 | Category | Functions |
 |---|---|
 | I/O | `println`, `print` |
-| String | `el_str_concat`, `str_concat`, `str_eq`, `str_starts_with`, `str_ends_with`, `str_len`, `int_to_str`, `str_to_int`, `str_slice`, `str_contains`, `str_replace`, `str_to_upper`, `str_to_lower`, `str_trim`, `str_index_of`, `str_split`, `str_char_at`, `str_char_code`, `str_lower`, `str_upper` |
-| Math | `el_abs`, `el_max`, `el_min` |
-| List | `el_list_new`, `el_list_len`, `el_list_get`, `el_list_append`, `el_list_empty`, `el_list_clone`, `list_push`, `list_join`, `list_range` |
+| String | `el_str_concat`, `str_concat`, `str_eq`, `str_starts_with`, `str_ends_with`, `str_len`, `int_to_str`, `str_to_int`, `str_slice`, `str_contains`, `str_replace`, `str_to_upper`, `str_to_lower`, `str_trim`, `str_index_of`, `str_split`, `str_char_at`, `str_char_code`, `str_lower`, `str_upper`, `str_pad_left`, `str_pad_right` |
+| Math | `el_abs`, `el_max`, `el_min`, `math_sqrt`, `math_log`, `math_ln`, `math_sin`, `math_cos`, `math_pi` |
+| Float | `float_to_str`, `int_to_float`, `float_to_int`, `format_float`, `decimal_round`, `str_to_float` |
+| List | `el_list_new`, `el_list_len`, `el_list_get`, `el_list_append`, `el_list_empty`, `el_list_clone`, `list_push`, `list_push_front`, `list_join`, `list_range` |
 | Map | `el_map_new`, `el_get_field`, `el_map_get`, `el_map_set` |
-| HTTP | `http_get`, `http_post`, `http_post_json` (via `fetch()`, returns `Promise<string>` — see §5 async caveat) |
-| FS | `fs_read`, `fs_write`, `fs_list` (Node-only, throw in browser) |
-| JSON | `json_parse`, `json_stringify`, `json_get`, `json_get_string`, `json_get_int` |
+| HTTP | `http_get`, `http_post`, `http_post_json`, `http_get_with_headers`, `http_post_with_headers` (via `fetch()`, return `Promise<string>`) |
+| FS | `fs_read`, `fs_write`, `fs_list` (Node-only) |
+| JSON | `json_parse`, `json_stringify`, `json_get`, `json_get_string`, `json_get_int`, `json_get_float`, `json_get_bool`, `json_get_raw`, `json_set`, `json_array_len` |
 | Time | `time_now`, `time_now_utc`, `sleep_secs` (Node), `sleep_ms` |
 | Bool | `bool_to_str` |
-| Process | `exit_program` (Node `process.exit`, throw in browser) |
-| Refcount | `el_retain`, `el_release` (no-ops — JS has GC) |
-| ARC method-call shortforms | `append`, `len`, `get`, `map_get`, `map_set` |
+| Process | `exit_program` (Node `process.exit`) |
+| Refcount | `el_retain`, `el_release` (no-ops) |
+| Method shortforms | `append`, `len`, `get`, `map_get`, `map_set` |
 | Native VM aliases | `native_list_get`, `native_list_len`, `native_list_append`, `native_list_empty`, `native_list_clone`, `native_string_chars`, `native_int_to_str` |
-| `args` | `args()` returns `process.argv.slice(2)` in Node, `[]` in browser |
-| `state_*` | In-memory `Map` keyed by string |
-| `env` | `process.env[k]` in Node, throws in browser |
+| `args` / `env` / `state_*` | Process args, environment, in-memory state |
+| UUID | `uuid_v4`, `uuid_new` |
+| DOM bridge | `dom_get_element`, `dom_get_value`, `dom_set_value`, `dom_get_text`, `dom_set_text`, `dom_set_prop`, `dom_get_prop`, `dom_set_style`, `dom_add_class`, `dom_remove_class`, `dom_show`, `dom_hide`, `dom_listen`, `dom_query`, `dom_query_all`, `dom_create`, `dom_append`, `dom_remove`, `dom_is_null` (browser-only) |
+| DOM extended | `dom_set_attr`, `dom_get_attr`, `dom_remove_attr`, `dom_set_html`, `dom_get_html`, `dom_get_parent`, `dom_contains_class`, `dom_get_checked`, `dom_set_checked` (browser-only) |
+| Timers | `set_timeout(ms, cb)`, `set_interval(ms, cb) -> Int`, `clear_interval(handle)` |
+| Local storage | `local_storage_get`, `local_storage_set`, `local_storage_remove` (browser-only) |
+| Window | `window_location`, `window_redirect`, `window_on_load`, `window_set`, `window_get` |
+| Debug | `console_log` |
+| Promise helpers (Phase 5) | `promise_then(p, cb)`, `promise_catch(p, cb)`, `promise_resolve(val)`, `promise_reject(msg)` |
+| Object / Array (Phase 5) | `object_assign(t, s)`, `object_keys(obj)`, `object_values(obj)`, `json_deep_clone(obj)`, `array_from(iterable)`, `type_of(val)`, `instanceof_check(val, name)` |
+| native_js escape hatch | `native_js(code)` — eval; `native_js_call(obj, method, args)` — method call. Use only when no structural alternative exists |

 ### Stubbed (throw at runtime)

@@ -128,17 +137,54 @@ The runtime auto-detects via `typeof window === 'undefined'`.

 ---

-## 5. The async problem (the big deferred decision)
+## 5. The async problem

 `fetch()` is async. The C backend's `http_get(url)` is synchronous and returns the body string directly. El source was written assuming sync. Three options:

-1. **Pretend it's sync from El's POV; use synchronous XHR (browser) or `child_process.execSync('curl …')` (Node).** Bad: synchronous XHR is deprecated and frozen on the main thread; `execSync` is a hack.
-2. **Make every `http_*` builtin in the JS runtime return a `Promise`, and rewrite codegen-js to insert `await` everywhere.** This requires turning every El function that transitively calls a network builtin into an `async fn` in JS. Doable, but invasive — the El AST does not currently mark async-ness.
-3. **Compile El's call sites with implicit await; compile-time taint tracking marks every fn that transitively calls a network builtin as `async`. Generated JS uses `async function` and `await`.** This is the right answer long-term.
+1. **Pretend it's sync from El's POV; use synchronous XHR (browser) or `child_process.execSync('curl ...')` (Node).** Bad: synchronous XHR is deprecated and frozen on the main thread; `execSync` is a hack.
+2. **Make every `http_*` builtin in the JS runtime return a `Promise`, and rewrite codegen-js to insert `await` everywhere.** This requires turning every El function that transitively calls a network builtin into an `async fn` in JS. Doable, but invasive.
+3. **Explicit `@async` decorator on El functions; codegen-js emits `async function` + `await` for known-async call sites.** This is the approach implemented.

-**Decision for this scaffold:** option 3, but only the runtime side is implemented. `http_get` in `el_runtime.js` returns a `Promise<string>`. `codegen-js.el` does NOT yet emit `async`/`await`. Calling `http_get` from compiled El will return a Promise that the El program will treat as a string (which produces `"[object Promise]"`). This is documented and accepted for the scaffold; the compile-time taint pass is a follow-up.
+**Decision:** option 3, with an explicit opt-in decorator. `http_get`, `http_post`, `http_post_json`, `http_get_with_headers`, and `http_post_with_headers` in `el_runtime.js` return `Promise<string>`. `codegen-js.el` now emits `await` before calls to these builtins and before calls to any El function decorated `@async`.

-For now, programs that don't touch HTTP work correctly. That covers `el-ui/runtime` (which only manipulates the DOM and a graph), most of cgi-studio's pure UI components, and all hello-world style programs.
+### How to use async in El (JS target)
+
+Mark a function with `@async` to declare it as async. Any call to that function from another El function will automatically get `await` in the generated JS. The callee must also be `@async` (or call only non-async code) for the pattern to compose correctly.
+
+```el
+@async
+fn fetch_user(id: String) -> String {
+    http_get("https://api.example.com/users/" + id)
+}
+
+@async
+fn main() -> Void {
+    let body = fetch_user("42")
+    println(body)
+}
+```
+
+Compiles to:
+
+```javascript
+async function fetch_user(id) {
+    return await http_get("https://api.example.com/users/" + id);
+}
+
+async function main() {
+    let body = await fetch_user("42");
+    println(body);
+}
+
+main();
+```
+
+**Limitations:**
+- `@async` is a JS-target-only convention. The C backend ignores the decorator (it calls the synchronous libcurl-backed version).
+- Implicit taint propagation (auto-marking all transitive callers) is not implemented. The programmer must explicitly add `@async` to every function in the call chain that reaches an async builtin.
+- Forward-reference calls to `@async` functions are handled correctly: codegen-js does a pre-registration pass over all FnDefs before emitting any code.
+
+For programs that do not touch HTTP, no `@async` annotation is needed and the generated code is identical to before.

 ---

@@ -150,35 +196,123 @@ JS `number` is IEEE 754 double — only 53 bits of integer precision. El `Int` i

 ---

-## 7. What's NOT supported in JS target initially
+## 7. Language features — JS target coverage

-This is the canonical list. Programs that use any of these compile (no `#error`-style fail-fast like the C backend's capability check) but throw at runtime or behave as documented.
+### Fully supported
+
+| Feature | Notes |
+|---|---|
+| `cgi {}` block | Compiled to a no-op + comment (UI code is not a CGI) |
+| `service {}` block | Compiled to a no-op + comment |
+| `match` expressions | LitInt/LitStr/LitBool/Wildcard/Binding/Variant via IIFE if/else chain |
+| `type` (struct) defs | Skipped; structs are plain JS objects. `t["field"]` works |
+| `enum` defs | Skipped; enum values are strings or ints |
+| `?` postfix (nil-prop) | `obj?.field` emits `(obj)?.["field"] ?? null` via JS optional chaining |
+| `extern fn` | Emits a comment; calls resolve to JS environment globals |
+| Anonymous function literals | `fn(p: T) -> R { body }` emits a hoisted `function __lambda_N(p)` |
+| `try/catch` | Emits `try { ... } catch (name) { ... }` directly |
+| URL imports | `import "https://..."` emits ES module import (or comment in bundle mode) |
+| Method call on `Any` | `obj.method(args)` emits `obj.method(args)` for non-El-shortform methods |
+| Field access on `Any` | `obj.field` emits `obj["field"]` (bracket notation, works on prototype chains) |
+| `@async` decorator | `async function` + `await` at call sites for async builtins and `@async` fns |
+
+### Not supported (stub throws or no-op)

 | Feature | Status | Notes |
 |---|---|---|
-| `cgi {}` block | Compiled to a no-op + warning comment | CGI identity is server-side. UI code is not a CGI. |
-| `service {}` block | Compiled to a no-op + warning comment | Same. |
-| All `dharma_*` | Stub throws | Programs needing DHARMA must call a server-side daemon over HTTP |
-| All `engram_*` | Stub throws | Could be ported to in-browser (IndexedDB-backed) later |
-| All `llm_*` | Stub throws | Browser cannot hold API keys; route through server |
-| `llm_register_tool` | Stub throws | Same |
-| `http_serve` | Stub throws | Browsers cannot serve. Node-mode could, deferred |
-| `http_set_handler` | Stub throws | Same |
-| `match` expressions | Compiled (basic) | LitInt/LitStr/LitBool/Wildcard/Binding all work via `if/else` chain. Tagged-union match deferred |
-| `type` (struct) defs | Skipped at codegen | Treated as documentation; structs are plain JS objects. `t["field"]` works |
-| `enum` defs | Skipped at codegen | Same — enum values are bare strings or ints |
-| `?` postfix (nil-prop) | No-op | Same as C backend's current state |
-| `try` postfix | Stripped to inner | Same as C backend |
-| Capability enforcement | Not enforced | The C backend uses `#error` directives; the JS backend lets the runtime stubs throw. Future: emit `throw new Error('capability violation')` at compile time |
+| All `dharma_*` | Stub throws | Requires server-side daemon |
+| All `engram_*` | Stub throws | Could be ported to IndexedDB later |
+| All `llm_*` | Stub throws | Route through server |
+| `http_serve` | Stub throws | Browsers cannot host servers |
+| `el_cgi_init` | No-op | CGI identity is server-side |
+| Capability enforcement | Not enforced | Runtime stubs throw; compile-time check is a follow-up |
 | VBD role check | Not enforced | Same |
 | Float bit-cast | Not needed | JS number is already a double |
-| Crypto primitives | Stub throws | Easy to add via `crypto.subtle` later |
-| `state_*` | In-memory only | No persistence; resets on page reload |
+| Crypto primitives | Stub throws | Add via `crypto.subtle` later |
+| `state_*` | In-memory only | Resets on page reload |
 | `args()` | Node-only | Browser returns `[]` |
 | `fs_*` | Node-only | Browser throws |

 ---

+## 7a. Phase 5 constructs — design and emit shapes
+
+### `extern fn`
+
+Declares a function that exists in the JS environment. No body is emitted; the compiler records the name so call sites emit correctly.
+
+```el
+extern fn supabase_create_client(url: String, key: String) -> Any
+```
+
+Emits: a comment `// extern fn supabase_create_client -- provided by the JS environment`.  
+Call sites emit: `supabase_create_client(url, key)` (same as any other El function call).
+
+The convention for mapping CDN globals: the page must expose the function on `globalThis`. For Supabase, the CDN bundle exposes `supabase.createClient`; a thin adapter assigns `globalThis.supabase_create_client = supabase.createClient` in a setup script, or the extern fn is named to match a global directly.
+
+### Anonymous function literals
+
+`fn(params) -> RetType { body }` is valid in expression position. Emitted as a hoisted function declaration with a generated name.
+
+```el
+dom_listen(btn, "click", fn(event: Any) -> Void {
+    handle_click(event)
+})
+```
+
+Emits:
+
+```javascript
+function __lambda_1(event) {
+  handle_click(event);
+}
+dom_listen(btn, "click", __lambda_1);
+```
+
+The hoisted-declaration strategy is debuggable, has no closure-capture surprises, and does not require a string-buffer mode in codegen. The generated name appears in stack traces.
+
+### `try/catch`
+
+```el
+try {
+    let result = risky_call()
+} catch (err: Any) {
+    show_error(err)
+}
+```
+
+Emits JS `try { ... } catch (err) { ... }` directly. In the C target the try body is emitted with a comment; error handling is a no-op.
+
+### Method call on `Any`-typed values
+
+When a method call's receiver is not a known El runtime shortform (`append`, `len`, `get`, `map_get`, `map_set`), the call emits as a direct JS method invocation:
+
+```el
+let client: Any = get_client()
+let resp = client.auth.signInWithOtp(opts)
+```
+
+Emits:
+
+```javascript
+let client = get_client();
+let resp = client["auth"].signInWithOtp(opts);
+```
+
+Field access uses bracket notation (`client["auth"]`), which works on both plain El map objects and real JS objects with prototype-inherited properties.
+
+### URL imports
+
+```el
+import "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"
+```
+
+In module mode: `import "https://...";` at the top of the generated file.  
+In bundle/IIFE mode: `// external: https://...` comment.  
+El source imports (`.el` files) are excluded -- they were already inlined by `resolve_imports`.
+
+---
+
 ## 8. CLI dispatch — `--target=js`

 The compiler entry point `compiler.el` adds a `compile_js(source: String) -> String` alongside the existing `compile()`. The CLI behavior:
@@ -195,20 +329,116 @@ The argv parser scans for a `--target=<lang>` token; remaining positional args a

 ---

+## 8a. Production output — `--minify` and `--obfuscate`
+
+Two post-processing flags produce production-ready browser JS in a single compiler invocation, replacing any external post-processing scripts.
+
+### Usage
+
+```
+elc --target=js --bundle --minify source.el > output.min.js
+elc --target=js --bundle --obfuscate source.el > output.obf.js
+elc --target=js --bundle --minify --obfuscate source.el > output.final.js
+```
+
+Both flags require `--target=js`. Passing either without `--target=js` prints an error and exits with code 1.
+
+`--obfuscate` implies `--minify` — obfuscating unminified code produces no benefit and only increases output size.
+
+### Pipeline order
+
+```
+generate JS  ->  (if --bundle, wrap in IIFE)  ->  (if --minify, run terser)  ->  (if --obfuscate, run javascript-obfuscator)  ->  output
+```
+
+### Tool discovery
+
+The compiler looks for each tool in this order:
+
+1. `<src_dir>/node_modules/.bin/<tool>` — local install next to source file
+2. `<src_dir>/../node_modules/.bin/<tool>` — one level up (monorepo layout)
+3. `npx --yes <tool>` — fall back to npx (uses globally cached package or downloads on first use)
+
+If no path resolves and npx is not on `PATH`, the compiler prints a clear error and exits non-zero:
+
+```
+el-compiler: error: terser not found. Run 'npm install terser' in your project directory.
+el-compiler: error: javascript-obfuscator not found. Run 'npm install javascript-obfuscator' in your project directory.
+```
+
+### Minification (terser)
+
+Command issued internally:
+
+```
+terser <tmpfile> --compress passes=2,drop_console=false,drop_debugger=true \
+  --mangle 'reserved=[<reserved>]' --output <tmpfile.min>
+```
+
+### Obfuscation (javascript-obfuscator)
+
+Command issued internally (runs after minification):
+
+```
+javascript-obfuscator <input> --output <output>
+  --compact true
+  --simplify true
+  --string-array true
+  --string-array-encoding base64
+  --string-array-threshold 0.75
+  --identifier-names-generator hexadecimal
+  --rename-globals false
+  --self-defending false
+  --reserved-names <reserved>
+```
+
+### Reserved names
+
+These identifiers are protected from renaming by both tools. They are referenced directly from HTML `onclick=` attributes and other global-scope callsites:
+
+```
+neuronDemoToggle, neuronDemoSend, neuronDemoReset,
+signInWith, signInWithEmail, signUpWithEmail, sendMagicLink,
+signOut, resetPassword, sendResetEmail, updatePassword,
+showSignIn, showSignUp, hideReset,
+setSort, addFamilyMember, removeFamilyMember, copyForPlatform, entHeadcountChange,
+NEURON_CFG
+```
+
+### Temp files
+
+The compiler uses `/tmp/elc-<pid>-<timestamp>.js` naming for temp files. All temp files are cleaned up on both success and failure paths.
+
+### Implementation notes
+
+- The compiler adds `stdout_to_file(path)` / `stdout_restore()` builtins to the C runtime (`el_runtime.c`) to capture codegen output (which is streamed via `println`) into a temp file before passing it to the external tools.
+- `--minify` and `--obfuscate` error messages are printed after stdout is restored, so they always reach the terminal regardless of output redirection.
+
+---
+
 ## 9. The path to compiling el-ui/runtime through this backend

 This is the real-world test. `el-ui/runtime/src/` is currently 5 hand-written `.js` files. The path to authoring them in El:

-1. **Phase 1 — Hello-world** (this scaffold). Done.
-2. **Phase 2 — language coverage.** Get codegen-js to ~95% parity with codegen.el for non-network features. Specifically: `match`, struct/enum field access, `?`-propagation, full `for`-over-list, complete unary/binary operators, lexical closures (the C backend doesn't have these but we'll need them for el-ui's component model).
-3. **Phase 3 — DOM bridge.** Add `dom_*` builtins to el_runtime.js: `dom_create_element`, `dom_set_text`, `dom_append_child`, `dom_query`, `dom_listen`, etc. These are Node-as-El builtins for the browser; the C backend will add a stub set that errors. Source-shareable El UI code becomes possible.
-4. **Phase 4 — Component class lowering.** El doesn't have classes; el-ui's `Component` is a JS class. Decide: extend El with a `component` keyword that compiles to JS class + C struct? Or have el-ui authors define components as `fn render_<name>(state) -> String` and provide a small bootstrap. The latter is the lower-impact path.
-5. **Phase 5 — Async taint pass.** Implement compile-time async tracking so `http_get` and friends produce `await fetch()` correctly. Required before authoring code that fetches data.
-6. **Phase 6 — Port `el-ui/runtime/`.** Translate the 5 JS files to El, compile to JS, swap in. Run el-ui's existing tests. Iterate.
+1. **Phase 1 — Hello-world.** DONE.
+2. **Phase 2 — Language coverage.** DONE. `match`, struct/enum field access, `?`-propagation, `for`-over-list, complete operators.
+3. **Phase 3 — DOM bridge.** DONE. Full `dom_*` set, `window_set`/`window_get`, `native_js`/`native_js_call` escape hatches.
+4. **Phase 4 — Production output.** DONE. `--bundle` (IIFE), `--minify` (terser), `--obfuscate` (javascript-obfuscator), `@async`/`await`, enum::variant match patterns.
+5. **Phase 5 — Full JS expression coverage.** DONE. This is the phase documented in this revision.
+   - `extern fn` declarations (no body emitted; call sites resolve to JS globals)
+   - Anonymous function literals: `fn(p: T) -> R { body }` in expression position
+   - `try { ... } catch (name: T) { ... }` statement
+   - Method call on `Any`-typed values: `client.auth.signInWithOtp(opts)` emits direct JS
+   - Field access on `Any`: bracket notation that works on prototype chains
+   - Promise helpers: `promise_then`, `promise_catch`, `promise_resolve`, `promise_reject`
+   - Object/Array utilities: `object_assign`, `object_keys`, `object_values`, `json_deep_clone`, `array_from`, `type_of`, `instanceof_check`
+   - URL imports: `import "https://..."` emits ES module import
+   - **Proof**: `examples/browser-auth.el` -- complete Supabase auth flow with zero `native_js` or `native_js_call`
+6. **Phase 6 — Port `el-ui/runtime/`.** Translate the 5 JS files to El, compile to JS, swap in. Run el-ui's existing tests. The language is now expressive enough for this.
 7. **Phase 7 — Port cgi-studio UI.** Larger surface area; same pattern.
 8. **Phase 8 — Marketplace plugins.** Open the door for third-party UI El.

-The blocking item between phase 1 and phase 2 is incremental — every El construct used by el-ui's source needs codegen-js coverage. Phase 5 (async) is the architectural decision that needs explicit user buy-in, because it changes the language's effective semantics on the JS target.
+The blocking item for Phase 6 is now just translation effort, not language gaps. Phase 5 removed the last structural barriers.

 ---
Author	SHA1	Message	Date
Will Anderson	32f0cf7b5d	Add html-page.el example and rebuild elc binary examples/html-page.el demonstrates HTML template syntax: - <!doctype html> prefix handling - Attribute values (static and interpolated) - {#each list as item} iteration - Auto-escaped interpolation via {expr} - Self-closing void elements (meta, br, etc.) Rebuilt dist/platform/elc from modified compiler source. The new binary is self-hosted from the HTML-capable compiler source and passes the standard identity check.	2026-05-04 13:02:54 -05:00
Will Anderson	65e26cd7a5	Add HTML template codegen and runtime for JS backend JS codegen (codegen-js.el): - js_cg_html_template: emits an IIFE that builds HTML via += concat - js_cg_html_element_str / js_cg_html_parts / js_cg_html_attrs_str: mirror the C codegen structure using JS string accumulator - js_cg_html_each: {#each} compiles to a JS for-loop - Reuses existing js_str_lit / js_escape from the file header Runtime (el_runtime.js): - html_escape(s): replaces & < > " ' using regex chains - html_raw(s): identity function - Both exported from the runtime module exports object	2026-05-04 13:02:50 -05:00
Will Anderson	1fd7cd5545	Add HTML template codegen and runtime for C backend C codegen (codegen.el): - cg_html_template: emits a GCC/Clang statement-expression that builds the HTML string via el_str_concat chains - cg_html_element_str / cg_html_parts / cg_html_attrs_str: recursive element and attribute emitters - cg_html_each: {#each} compiles to a C for-loop with el_list_get - __html_counter state tracks unique accumulator variable names - Handles both 'static' (raw string) and 'dynamic' (expr node) attrs matching the parser's attribute kind convention Runtime (el_runtime.c / el_runtime.h): - html_escape(s): escapes & < > " ' for safe interpolation - html_raw(s): identity function for raw() bypass - Both use the existing html_buf_t infrastructure from el_html_sanitize	2026-05-04 13:02:44 -05:00
Will Anderson	71689520b6	Add HTML template syntax to El parser Adds native HTML template literals to the El parser. Templates are detected in value position when Lt is followed by a known HTML tag name (is_html_tag_name) or by '!' for <!doctype html>. New parser helpers: - is_html_tag_name / is_void_element: classify tag names - parse_html_text_tokens: collect intertoken text content - parse_html_attrs: parse name, name="val", name={expr} attributes - parse_html_children: recursive children with {expr}, {#each} support - parse_html_element / parse_html_template: entry points Adds Hash token kind ('#') to lexer for {#each} block syntax. AST nodes: HtmlTemplate, html:Element, html:Text, html:Interp, html:Raw, html:Each, html:Doctype. Doctype flag is stored on the root element node rather than as a separate AST layer. HTML templates parse correctly after 'return' and as the sole expression in a function body. The 'return' keyword is required when other let bindings precede the template, as El has no newline-as- statement-terminator and '<' would otherwise be parsed as comparison.	2026-05-04 13:02:36 -05:00
Will Anderson	e858eab300	spec: update codegen-js.md to Phase 5, ~90% coverage Status updated from Phase 4 ~80% to Phase 5 ~90%. New sections: - 7. Language features coverage table (supported vs stubbed) - 7a. Phase 5 constructs: extern fn, anonymous functions, try/catch, method call on Any, URL imports -- each with emit shape examples - 9. Roadmap updated: Phases 1-5 marked DONE, Phase 6 unblocked Runtime builtin table updated to ~90 builtins including all Phase 5 additions (promise_then/catch/resolve/reject, object_assign/keys/values, json_deep_clone, array_from, type_of, instanceof_check).	2026-05-04 11:03:47 -05:00
Will Anderson	aa7d97d5ba	examples: rewrite browser-auth.el using new language features No native_js or native_js_call anywhere. Full browser auth flow expressed with proper El constructs: - extern fn supabase_create_client(url, key) -> Any Declares the Supabase CDN global without an El function body. - client.auth.signInWithOtp(opts) Direct method call chain on Any-typed value. The client is built by calling the extern fn; .auth field access and .signInWithOtp(opts) method call emit clean JS without any escape hatch. - try { ... } catch (err: Any) { ... } Wraps the auth call; unexpected runtime errors are caught and shown to the user rather than crashing silently. - fn(event: Any) -> Void { ... } Inline anonymous function literals for DOM event listeners instead of named forward-declared callbacks. The rewrite is the proof: every browser JavaScript pattern used in a real auth flow can now be expressed structurally in El.	2026-05-04 11:02:13 -05:00
Will Anderson	7040830470	codegen-js: URL import declarations for JS modules import "https://cdn.example.com/lib.js" now emits: - module mode: import "https://..." at the top of the generated file - bundle/IIFE mode: // external: https://... comment El source imports (.el files) are excluded -- they were already inlined by resolve_imports before codegen. Any import path that doesn't end in .el or starts with http(s):// is treated as an external JS dependency.	2026-05-04 11:01:36 -05:00
Will Anderson	3a513aaa5a	runtime + codegen-js: Promise helpers and object/array utilities Add to el_runtime.js: promise_then(p, cb) -- p.then(cb), works with any Promise-returning API promise_catch(p, cb) -- p.catch(cb) promise_resolve(val) -- Promise.resolve(val) promise_reject(msg) -- Promise.reject(new Error(msg)) object_assign(t, s) -- Object.assign({}, t, s) (non-mutating) object_keys(obj) -- Object.keys(obj) object_values(obj) -- Object.values(obj) json_deep_clone(obj) -- JSON.parse(JSON.stringify(obj)) array_from(iterable) -- Array.from(iterable) type_of(val) -- typeof val instanceof_check(v, n) -- val instanceof globalThis[name] All new functions added to __el export object and ES named exports. codegen-js preamble destructure updated to include all new names.	2026-05-04 11:01:14 -05:00
Will Anderson	beb2a8c5bd	lexer + parser + codegen: try/catch statement try { ... } catch (name: Type) { ... } is now a first-class El statement. Lexer: `try` and `catch` are now keywords (Try, Catch token kinds). Parser: TryCatch AST node with try_body, catch_name, catch_body. codegen-js: emits try { ... } catch (name) { ... } directly -- correct for all browser error handling patterns. codegen.el (C backend): emits the try body with a comment; exception handling is a no-op since C has no analogous mechanism. Programs using try/catch should compile with --target=js. The catch variable type annotation is parsed and skipped (same treatment as all other type annotations in El).	2026-05-04 11:00:24 -05:00
Will Anderson	e23319fe0b	parser + codegen-js: anonymous function literals (lambda syntax) fn(params) -> RetType { body } is now valid in expression position. The parser produces a Lambda AST node. codegen-js emits a hoisted JS function declaration with a generated name (__lambda_N) and returns the name as the expression value, so inline callbacks compose cleanly: dom_listen(btn, "click", fn(event: Any) -> Void { handle(event) }) emits: function __lambda_1(event) { handle(event); } dom_listen(btn, "click", __lambda_1); The hoisted-declaration strategy is debuggable, has no closure-capture issues, and requires no string-buffer mode in the codegen.	2026-05-04 10:59:17 -05:00
Will Anderson	01fee9396a	codegen-js: native JS method dispatch and extern fn support Any-typed receiver method calls now emit obj.method(args) directly instead of requiring native_js_call. client.auth.signInWithOtp(p) compiles to client["auth"].signInWithOtp(p) -- no escape hatch needed. Field access emits obj["field"] (direct bracket notation) instead of el_get_field, so prototype-inherited JS properties resolve correctly. el_get_field's hasOwnProperty guard was silently returning null for real JS objects with inherited fields (Supabase auth, DOM APIs, etc). El runtime shortform methods (append, len, get, map_get, map_set) still use the existing method(obj, args) convention for backward compat. ExternFn statements emit a comment and are excluded from top-level statement codegen -- the extern declaration tells the compiler the function exists in the JS environment without emitting a body.	2026-05-04 10:58:07 -05:00
Will Anderson	7b60d94b8a	add --minify and --obfuscate flags to elc JS pipeline Adds two post-processing flags that produce production-ready browser JS in a single elc invocation, replacing extract-js.py in the web product pipeline: elc --target=js --bundle --minify source.el > output.min.js elc --target=js --bundle --obfuscate source.el > output.obf.js --minify shells out to terser (passes=2, no drop_console, drop_debugger). --obfuscate shells out to javascript-obfuscator with the same options as the old extract-js.py script. --obfuscate implies --minify. Tool discovery: checks ./node_modules/.bin/, ../node_modules/.bin/ (monorepo), then falls back to npx. Both flags require --target=js; passing either without it exits 1 with a clear error. Both tools receive a reserved-names list of globals referenced from HTML onclick= attributes (neuronDemoToggle, signInWith, NEURON_CFG, etc.) so they are not mangled. Implementation adds stdout_to_file(path)/stdout_restore() builtins to the C runtime so codegen's println-streamed output can be captured to a temp file before being piped through the external tools. Temp files use /tmp/elc-<pid>-<timestamp>.js naming and are cleaned up on success and failure. Rebuilds dist/platform/elc and dist/platform/elc.c. Self-hosting verified.	2026-05-04 10:54:34 -05:00
Will Anderson	21694b79d2	implement ? nil-propagation, write browser-auth.el example, update spec Iteration 5: ? nil-propagation: Field and Index handlers in js_cg_expr now detect when the object expression is a Try node (the AST node for postfix `?`). When detected, emit JS optional chaining: `(expr)?.["field"] ?? null`. The `?? null` normalizes JS undefined to El's null. A bare `expr?` not followed by field/index still passes through unchanged. browser-auth.el: a realistic 130-line example demonstrating: - @async function with Supabase via native_js_call - DOM bridge: get/set value/text/attr, add/remove class, show/hide - local_storage_get/set for session hints - window_on_load for initialization - window_set to expose functions to the browser global scope - set_timeout for transient state, is_valid_email for input validation Compiles cleanly with elc --target=js --bundle Spec updated: status promoted to Phase 4 / ~80% coverage, nil-prop status updated, new example referenced.	2026-05-04 10:42:54 -05:00
Will Anderson	422442b14e	add --bundle flag for self-contained IIFE output elc --target=js --bundle source.el > output.js produces a single file with no import statement that can drop directly into a <script> tag. How it works: - detect_bundle() reads the --bundle flag from argv - resolve_runtime_path() looks for el_runtime.js next to the source file - compile_js_with_bundle() reads the runtime, calls codegen_js_bundle() - codegen_js_inner(bundle_mode=true): - emits ;(function() { "use strict"; at the top - inlines the runtime content (stripping ES export statements which are invalid inside an IIFE via js_strip_es_exports()) - skips the const {...} = globalThis.__el destructure -- the inlined function declarations are already in scope within the IIFE - closes with })(); after main() Usage: elc --target=js --bundle app.el > app.js Place el_runtime.js in the same directory as app.el.	2026-05-04 10:40:46 -05:00
Will Anderson	437ba0a4dd	add 20 browser API builtins to JS runtime and codegen preamble Iteration 3: closes the browser API gap needed for real web pages. New builtins in el_runtime.js: Extended DOM: dom_set_attr, dom_get_attr, dom_remove_attr, dom_set_html, dom_get_html, dom_get_parent, dom_contains_class, dom_get_checked, dom_set_checked Timers: set_timeout, set_interval, clear_interval Local storage: local_storage_get, local_storage_set, local_storage_remove Window: window_location, window_redirect, window_on_load Debug: console_log All browser-only functions use _ensureBrowser guard. Timer functions work in both Node and browser. All new names added to __el export object, ES named exports, and codegen-js.el destructure preamble. Spec table updated to document new categories.	2026-05-04 10:38:20 -05:00
Will Anderson	7376349124	fix TypeDef parser to consume optional = before field block type User = { name: String } was silently broken: the parser consumed the type name then called expect(LBrace) while sitting on the = token. expect() advances unconditionally on mismatch, so it consumed = and treated { as the first field name, producing a corrupt TypeDef node. The FnDef following the broken TypeDef was then parsed incorrectly or lost entirely -- causing greet() and similar functions to vanish from JS/C output with no error. Fix: detect and skip the optional Eq token before expecting LBrace. Both targets benefit; rebuild elc to pick up the fix.	2026-05-04 10:36:53 -05:00
Will Anderson	0f1da43a97	implement Enum::Variant match patterns in parser and both codegens Parser now handles `SomeEnum::Variant` in match arm patterns, emitting a Variant pattern node with enum_name and variant fields. Previously these fell through to Binding, producing broken codegen. JS codegen: emit str_eq check against the variant name string (El enums are plain strings at runtime). C codegen: same, via EL_STR + str_eq. Rebuild elc to pick up the parser change.	2026-05-04 10:35:35 -05:00
Will Anderson	a54b2bebf9	add DOM bridge, async/await, window export, and native_js to JS target - el_runtime.js: add 19 dom_* builtins (browser-only, throw in Node), window_set/window_get for exposing El functions to the browser global scope, and native_js/native_js_call escape hatches for third-party libs - codegen-js.el: destructure all new builtins in generated preamble; add @async decorator support that emits async function + await at call sites for known-async HTTP builtins and user-declared @async functions; pre- registration pass ensures forward calls to @async functions get await - spec/codegen-js.md: mark Phase 3 (DOM bridge) implemented, document @async approach and its limitations, update builtin table and status - examples/browser-counter.el: canonical example showing dom_get_element, dom_set_text, dom_is_null, window_set, and state_set/get	2026-05-04 10:29:43 -05:00